HTML:

THE BASICS

WORKSHOP DESCRIPTION
This workshop covers the explanation and basics of HTML. Participants will gain a better idea of how
HTML is used to create a Web page and will gain an understanding regarding the rules and
conventions that must be followed when developing any Web page in HTML. In addition to learning
HTML syntax, participants will learn how to format text in HTML, and learn how HTML is used to create
a hyperlink and include images on a Web page.

PREREQUISITES
Accessibility workshop and an understanding of Windows 95 or higher or Mac OS 8 or higher, basic
computer skills, knowledge of the Web, and basic Web browser skills.

OBJECTIVES
Participants attending this workshop will:
• Learn how HTML is used and the importance of learning it.
• Create a new Webpage utilizing basic HTML commands.
• Format text using various HTML commands.
• Link to other Web site files.
• Include an image in a Web page

The exercises in this document require files distributed during the workshop.
Please make sure that you have a copy of these files.

Academic Technology & Creative Services 1 Spring 2006

HTML: The Basics

TABLE OF CONTENT

An Introduction to HTML (Hypertext Markup Language)......................................... 3

But what is XHTML? ............................................................................................ 3
How is HTML used? ............................................................................................ 4
Why is HTML important? ..................................................................................... 4
Anatomy of an HTML Tag......................................................................................... 5
Attributes.............................................................................................................. 5
Values.................................................................................................................. 5
Nested Tags ........................................................................................................ 5
Structure of an HTML File ........................................................................................ 6
Head Section ....................................................................................................... 6
Body Section........................................................................................................ 7
Editing an Existing HTML File Using a Text Editor................................................ 8
Saving an HTML File................................................................................................. 9
Viewing an HTML File Using a Browser................................................................ 10
Exercise 1 – Basic Web Page Structure ........................................................ 11
Page Properties ...................................................................................................... 11
Exercise 2 – Give Your Web Page Properties ............................................... 12
HTML Tags – Basic Tags for Text Format & Appearance ........................................ 12
Some Basic Tags............................................................................................... 12
The Font Tag ..................................................................................................... 13
Exercise 3 – Text Appearance: Basic Tags ................................................... 14
Spacing.............................................................................................................. 15
Alignment........................................................................................................... 16
Exercise 4 – Text Appearance: Spacing & Alignment................................. 17
Other Tags......................................................................................................... 18
Exercise 5 – Text Appearance: Headings and Horizontal Rules ................ 19
Hyperlinks ............................................................................................................... 19
Creating a Hyperlink ............................................................................................... 20
Hyperlink Types ................................................................................................. 20
Exercise 6: Hyperlinks ................................................................................... 22
The Image Tag......................................................................................................... 22
Using an Image within a Web page ................................................................... 23
Exercise 7: Using Images in a Web page ..................................................... 24
Testing Your Pages in Different Browsers ........................................................... 25
Exercise 8 – Web Page Testing ...................................................................... 25

Academic Technology & Creative Services 2 Spring 2006

HTML: The Basics

An Introduction to HTML (Hypertext Markup Language)

HTML, or HyperText Markup Language, is the authoring language that describes how a Web page
should be displayed by a Web browser. It has two essential features: hypertext and universality.
Hypertext means when a visitor clicks a link on a Web page, the visitor is led to another Web page or
document. Universality means that because HTML documents are saved as text files, virtually any
computer can read a Web page.1

But what is XHTML?

XHTML, or eXtensible HyperText Markup Language, is a later version of HTML that includes
additional standards set forth by the international organization called the World Wide Web
Consortium (W3C).

Both HTML and XHTML can be understood by most browsers, but for increased accessibility to
your Web pages, we recommend using XHTML when creating your Web pages.

Below is an example of an HTML file that uses XHTML standards:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" lang="en">

<head>

<title>"Understanding XHTML…" </title>

<meta http-equiv="content-type" content="text/html;

charset=iso-8859-1" />

</head>

<body>

<img src="images/ambitious.gif" width="150" height="150"

border=0 alt="a hand raised up as if ambitious" align="right">

<h1>Welcome to "Understanding XHTML and the Web-Publishing

Process"!</h1>

<p>
During the course of this workshop, it is our intention to
teach you how to read and create HTML tags, understand Web page
A basic structure, and <i>build a Web page</i>.
HTML </p>
paragraph
tag. </body>
</html>

Note: Throughout the rest of this document we will use the term HTML to refer to the markup
languages HTML and XHTML.

1
Castro, E. (2003). HTML for the World Wide Web, Fifth Edition, with XHTML and CSS: Visual QuickStart Guide.

Academic Technology & Creative Services 3 Spring 2006

HTML: The Basics

How is HTML used?

• The formatting “rules” (HTML tags) that are applied to content (a syllabus, for example) are
interpreted by programs (browsers) designed to display Web pages as specified by the HTML.

Why is HTML important?

• HTML is the foundation of all Web pages.

• For the same reasons we learn how to perform mathematical

operations long-hand before we use a calculator, learning HTML can
be useful.

• Because HTML pages (Web pages) are really just text-files they can
be created with a simple text-editor (Notepad, WordPad, TextPad,
SimpleText, Write). HTML editors may not always be available, warranting the use of a text-
editor.

“HTML is not hard to learn or master. It is much more an exercise in careful typing and consistency
than in mind blowing, complicated procedures”.2

2
Castro, Elizabeth, “HTML for the World Wide Web.” 1996. Peachpit Press, Berkeley, CA. P. ix.

Academic Technology & Creative Services 4 Spring 2006

HTML: The Basics

Anatomy of an HTML Tag

HTML tags are pre-defined elements written between less than (<) and greater than (>) signs, also
known as angle brackets. There is usually an opening and closing tag. The affected text is contained
within the two tags.
Opening tag Closing tag

<strong> Bold text </strong>

Attributes
Many tags have special attributes that offer a variety of options for the contained text. The attribute is
entered between the element word and the final greater than symbol.
Tag attribute

<font face=“arial” >

Values
Attributes also have values. These values are the parameters by which the attributes behave (the
value of the attribute defines the attribute). Values should be enclosed in quotation marks.

Tag attribute value

<font face=“arial” >

The text affected by this particular FONT tag will be displayed using an Arial font-face.

Nested Tags
You may want to modify your page contents with more than one tag. For example, you may want to
add bold formatting to a word within a particular font tag.
A

<strong><font face=“arial” color=“#66cc00”>Affected text</font></strong>

B

Here order is everything. Whenever you use a closing tag it should corresponding to the last unclosed
opening tag. In other words, first A then B, then /B, and then /A.

Academic Technology & Creative Services 5 Spring 2006

HTML: The Basics

Structure of an HTML File

At the foundation of every HTML file is a set of structure tags that divide an HTML file into a head
section and a body section. These two sections are enclosed between an opening <HTML> tag and
end with the closing </HTML> tag. Following is a simple example of an HTML file that highlights the
structure tags that are required within every XHTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Doctype Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
declaration transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en"
Opening html tag lang="en">
<head>
<title>My Webpage</title>
<meta http-equiv="content-type" content="text/html;
Head section charset=iso-8859-1" />
</head>

<body>
My webpage content

Body section </body>

</html>

Closing html tag

• The head and body sections are contained within the opening html tag and the closing html tag.

• The Doctype declaration is found at the beginning of every XHTML file. It is the only tag that
can contain uppercase text.

Head Section
• Contains the title of the webpage and information pertaining to the entire Web page.

• Contains any “meta” tags. The meta tag shown in the example below is required in all XHTML
files.

• Nothing in the head section is visible in the browser window except for the title, “My Webpage”
that is found between the title tags (<title>My Webpage</title>).

Type <head> to begin

the head section <head>

<title>My Webpage</title>

The title goes <meta http-equiv="content-type"

between the content="text/html; charset=iso-
title tags. 8859-1" />
Type </head>
to end the head </head>
section.

Academic Technology & Creative Services 6 Spring 2006

HTML: The Basics

Body Section
• Contains the file contents that are visible in the browser window. In other words, whatever you
find within the body tags is what you will see in the browser window!

Type <body> to
begin the Web <body>
page content section.
My Webpage content
Type </body> to </body>
close the Web page
content section.

• Viewed in its entirety using a browser, the Web page would look like this:

The Web page

title contained
within the
head tags.

The content
contained
within the body
tags.

Academic Technology & Creative Services 7 Spring 2006

HTML: The Basics

Editing an Existing HTML File Using a Text Editor

Since HTML files are simply text-files, they can be edited using a text-editor such as Notepad (PC),
WordPad (PC) or TextEdit (Mac).

To open an HTML file for editing, it must be opened directly through a text-editor. To open an HTML
using Notepad or TextEdit:

Step 1. Locate and open either Notepad (PC) or TextEdit (Mac).

Step 2. Open the HTML file in the text editor:

a. If you are using Notepad:

i. Click on File > Open. From the Open dialog box, using the Files of Type drop
down menu, select All Files:

ii. Using the Open dialog box, browse for the HTML file that you would like to open.
When you have found the file, click the Open button.

b. If you are using TextEdit:

i. Click File > Open. Locate your HTML file using the Open dialog box.

ii. Click the Open button in the lower right-hand corner to open the file in TextEdit.

Step 3. Once your file is opened as a text file, you can edit the HTML code.

Step 4. When you have finished editing your file, save it by clicking on File > Save or File > Save
As. The file will be saved as HTML by default.

As a shortcut, you can edit HTML files by right-clicking (or Ctrl+click on a Mac) on the HTML filename.
From the right-click menu, go to Open With… > Notepad or Open With > TextEdit.

Remember – there are two methods of opening an HTML file – from an Internet browser or from a text-
editor.

Academic Technology & Creative Services 8 Spring 2006

HTML: The Basics

Saving an HTML File

This section only applies if you are saving a new HTML file.

To Save an HTML file:

Step 1. From your text-editor, click File on the toolbar.

Step 2. Click Save As…

Step 3. Choose where you want to save your file.

Step 4. Name your file your_file.htm where your_file is the name of your choice.

Step 5. Click Save.

NOTE: If you are saving an HTML file for the first time, and are using a Windows machine, you must
select all files next to the “save as type” field. If you miss this step, your file will be saved as a text file
[.txt extension].

Academic Technology & Creative Services 9 Spring 2006

HTML: The Basics

Viewing an HTML File Using a Browser

To view your HTML file in a browser window, you can double-click on your saved file or follow the
subsequent steps:

Step 1. Open a Web browser (Internet Explorer or Netscape Navigator).

Step 2. In your browser select File from the toolbar and choose Open or Open Web Location.

Internet Explorer Netscape Navigator

Step 3. In Internet Explorer click on the Browse button; choose the file on your computer that
you would like to view.

Browse button

On Netscape, click on the Choose File button; choose the file on your computer that
you would like to view.

Choose File button

Academic Technology & Creative Services 10 Spring 2006

HTML: The Basics

Exercise 1 – Basic Web Page Structure

Exercise 1 – Basic Web Page Structure

In this exercise, we will work with a basic HTML file.

1. From the workshop folder named HTML Basics on your desktop, open the file,
template.htm in Notepad or TextEdit.

2. Identify the structure tags – and the different section that each tag identifies or belongs to.
The most important section to recognize is the BODY section <body…> </body>. Any
content that you want displayed on your Webpage will be entered between these two tags
which identify the body section.

3. Type a title for your page between the title tags (<title> … </title>).

4. Type some text between the body tags (<body> … </body>).

5. Using the Save as option on the File menu of the text editor you are using, save your file in
the HTML Basics folder. Give your file the name structure.htm.

6. View your file in the browser window.

Page Properties
Page properties refer to elements such as page background color, text or link color. These properties
are established within the opening body (<body>) tag.

Example:

<body bgcolor=“yellow” text=”gray”>

The <body> tag above is read by the browser to produce…

• A background color of yellow (bgcolor=“yellow”)

• Gray body text

Color values can be represented by any of the 16 named colors or a hexadecimal color-code (shown in
example). For further information on color values, see the XHTML Essentials handout that has been
provided to you as part of this workshop.

Academic Technology & Creative Services 11 Spring 2006

HTML: The Basics

Exercise 2 – Give Your Web Page Properties

Exercise 2 – Give Your Web Page Properties

Using the file you created in the first exercise (structure.htm), add page properties to the body
tag. To keep it simple, use the example of body background and text color given in this section.

1. If your file is not already open, open the HTML document from the first exercise,
structure.htm in the text-editor you’ve been working in.

2. Add page properties to the body tag (background and text color).

3. Save your file in the HTML Basics folder on your desktop.

4. View your file in the browser window.

Advanced
Experiment with different background colors using the color reference in the XHTML Essentials
handout. Use both named and hexadecimal color values.

HTML Tags – Basic Tags for Text Format & Appearance

From this point on, all tags that will be covered should only be entered within the body section
(<body>…</body>).

Some Basic Tags

• Italics: <em>Italics text</em>

• Bold: <strong>Bold text</strong>

• Underline: <u>Underlined text</u> (try not to use this tag)

Example:

<body>
Recommended book: <em>XHTML for the World
Wide Web</em>.

Author: <strong>Elizabeth Castro</strong>.

Edition: <u>5th edition</u>.

</body>

Academic Technology & Creative Services 12 Spring 2006

HTML: The Basics

Viewed using a browser:

The Font Tag

Within the font tag, the font size, face (arial, verdana, etc), and color can be set using font tag
attributes.

• Font size: <font size=“n”> (where n is a number from 1 to 7)

• Font face: <font face=“name”> (where the face name is a system font)

• Font color: <font color=“color”> (where color can be any of the 16 named colors or a
hexadecimal color-code – see the XHTML Essentials handout)

Multiple attributes of a tag element can be combined:

• <font size=“n” face=“name” color=“color”>

Example:

<body>
<font face="arial">

<font color="red">Request CSUS Web Account</font>:

Faculty have a choice between four web accounts:
Departmental Web account, Faculty Web account, SacLink
Web account or a WebCT course account.
</font>

<font face="verdana" size="2" color="gray">

Any Questions?
</font>

</body>

Academic Technology & Creative Services 13 Spring 2006

HTML: The Basics

Viewed using a browser:

Exercise 3 – Text Appearance: Basic Tags

Exercise 3 – Text Appearance: Basic Tags
The following exercises are based on the HTML file, index.htm, which can be found in the
HTML Basics folder on the desktop.

1. Using the text-editor you’ve been working in, open the HTML file from the HTML Basics
folder with the filename index.htm.

2. Format the following text using the HTML tags highlighted in this section:

9 Format the first “Web Accounts:” using a size 5 font. These two
words should also be bold.

9 Within that same paragraph, italicize the second “Web accounts” and the term
“Web servers”.

9 Format the last sentence of the paragraph using a red font color.

3. Save your file in the HTML Basics folder.

4. View your file in the browser window.

Advanced
Add your own content using the HTML tags highlighted in this section as well as those
referenced in the XHTML Essentials handout.

Academic Technology & Creative Services 14 Spring 2006

HTML: The Basics

Spacing
Web browsers will ignore extra spaces and returns that exist between the tags in your HTML file.
Browsers treat ALL spaces as one space. To represent spaces in an HTML file, the following tags are
used.

• Paragraph: <p>A paragraph</p> (this tag will produce a double line-break)

• Line breaks: <br /> (notice that the opening and closing tag are contained within ONE tag)

• Single-spaces: &nbsp; (a space is a special character, hence the special code)

Example:

<body>
<p><strong><font size="4" color="red">Request CSUS
Web Account</font></strong></p>

Faculty have a choice between four web accounts:

Departmental Web account, Faculty Web account,
SacLink Web account or a WebCT course account.
<br />

<strong>Any Questions?</strong>
<p>Let's continue to Step 2: &nbsp; &nbsp; "Gather
Materials..."</p>

</body>

Viewed using a browser:

Academic Technology & Creative Services 15 Spring 2006

HTML: The Basics

Alignment
Text within an HTML file can be centered, left justified, right justified or justified. Left justified is the
default.

• Paragraph align: <p align=“position”>A paragraph</p> (where position is left, right,

center or justified).

• Division align: <div align=“position”>Content section</div> (where position is left,

right, center or justified; can be used to align any webpage element).

• Block quote: <blockquote>Block quoted text</blockquote> (the affected text

is indented from both sides)

Example:

<body>
<div align="center">

<strong><font size="5" color="red">The Web Process -

The Second Step</font></strong>
</div>

<p align="left">

<strong>Gather Materials:</strong>
<blockquote>Assignments, Syllabus, Handouts, Textbook
Info Images, Photographs, Data, etc.</blockquote>

</p>

</body>

Viewed using a browser:

Academic Technology & Creative Services 16 Spring 2006

HTML: The Basics

Exercise 4 – Text Appearance: Spacing & Alignment

Exercise 4 – Text Appearance: Spacing & Alignment
Using the file you’ve been working with (index.htm), format the following content.

1. Format the following text using the HTML tags highlighted in this section:

9 Insert an opening paragraph tag right before “Building Your Website”. Close the
paragraph tag directly after the sentence that ends with “…here is what you will
need:”

9 Insert the tag used for a line break directly after each of the comma-separated
items to make each appear on its own line.

9 Center the last two sentences (XHTML is picky…) in the section using the
division align HTML tag or the paragraph align tag.

2. Save your file in the HTML Basics folder on the desktop.

3. View your file in the browser window.

Academic Technology & Creative Services 17 Spring 2006

HTML: The Basics

Other Tags
• Headings: <h1>Heading size 1</h1> (where h1 can be from h1 to h6, h1 being the
largest; headings are always displayed in bold, with a blank line before
and after)

• Horizontal rule: <hr width=“90%” /> (notice that the opening and closing tag are
contained within ONE tag)

Example:

<body>
<h2><font color="red">The Web Process - The Third
Step</font></h2>

<strong>Create/Edit HTML documents:</strong>

<p align="left">

<strong>Text Editors:</strong>
Notepad, TextPad, SimpleText, Write<br />

<strong>Web Editors:</strong>
Macromedia Dreamweaver, Microsoft Frontpage<br />

</p>
<hr width="80%" />

</body>

Viewed using a browser:

Academic Technology & Creative Services 18 Spring 2006

HTML: The Basics

Exercise 5 –5 Text
Exercise Appearance:
– Text Appearance:Headings
Headingsand
andHorizontal
HorizontalRules
Rules
Using the file you’ve been working with (index.htm), format the following content.

1. Format the following text using the HTML tags highlighted in this section:

9 Format the line of text that begins “Web Page Editing…” using the heading tag
(size 3) HTML tag.

9 On the line following the list, insert the HTML tag for a horizontal rule, using a
width of 80%.

2. Save your file in the HTML Basics folder on the desktop.

3. View your file in the browser window.

Advanced
Play around with the attributes of the horizontal rule tag, referencing the XHTML Essentials
handout as needed. Try using different heading sizes.

Hyperlinks
Hyperlinks are used to connect files that are on the Web or within a Web site. Hyperlinks can be
clickable text or images within a Web page.

The screenshot below represents a hyperlink that, when clicked, connects the user to another page
within the same Web site.

Academic Technology & Creative Services 19 Spring 2006

HTML: The Basics

Creating a Hyperlink
There are two main parts to a hyperlink – the destination and the label. Once the destination (URL)
and label are determined, they are incorporated into an HTML file by using the anchor tag.

open close
destination
anchor tag anchor tag

<a href=”http://www.csus.edu”>CSUS Homepage</a>

href label
attribute

Example:

<body>

<h1>Favorite Links:</h1>
<a href=”http://www.csus.edu”>CSUS Homepage</a>

</body>

When interpreted using a browser, the label portion is

usually underlined to indicate that it is a hyperlink:

Hyperlink Types
There are four categories of hyperlinks (links to outside pages, links within a Web site, email links and
anchor links). We will be covering the two most common link types – links to outside pages and links to
pages within a Web site.

Academic Technology & Creative Services 20 Spring 2006

HTML: The Basics

#1: Links to an Outside Source

The first type of hyperlink is one that points to a file located outside of your Web site.

<a href=”http://www.csus.edu/web/”>Web Resources</a>

http://www.csus.edu/web/
root directory

index.htm
images
banner.jpg
Hyperlink icon.gif
within Web site week1
to “outside”
source. wk1_lesson1.htm
wk1_lesson2.htm
week2
wk2_lesson1.htm

#2: Links Within a Web site

The second type of hyperlink points to a file located inside of your Web site.

<a href=”tag_examples.htm”>Examples of HTML Tags</a>

OR

<a href=”week1/wk1_lesson1.htm”>Week 1</a>

OR

<a href=”../help/index.htm”>Help</a>

NOTE: The sequence “../” is used to denote that the file is located one directory up from the
current location.

root directory

index.htm
images
banner.jpg
icon.gif All hyperlinks
week1 point to a file
within the
wk1_lesson1.htm Web site.
wk1_lesson2.htm
week2
wk2_lesson1.htm

Academic Technology & Creative Services 21 Spring 2006

HTML: The Basics

Exercise 6: Hyperlinks

Exercise 6: Hyperlinks
Utilizing the information you just learned regarding hyperlinks, recreate the section entitled
Sample Links (from the file index.htm) using the following guidelines:

Step 1: Make each of the lines under the heading entitled “Sample Links” a link:

a. Locate the text that reads “Sample HTML document structure”. This text should be a
link to the HTML structure document you created in the first exercise. Using the anchor
tag, create a link using the text “Sample HTML document structure”. The URL
(destination) for the hyperlink should be “structure.htm”.

b. “Web Central at Sac State” – should be a link to the following URL:

http://www.csus.edu/web

Step 3: Save your file in the HTML Basics folder on the desktop.

Step 4: View the file using your Internet browser.

Advanced
Add links to your favorite Web sites in the Sample Links section!

The Image Tag

HTML documents can contain images (and/or graphics). These images can be photographs, designs,
logos, or icons.

To include an image on a Web page, you’ll need to use the image tag. Before we proceed, here are
the specifics on the image tag (notice that the opening and closing tag are contained within ONE tag):

The format of the HTML image tag is:

<img src=”image_path” height=”height” width=”width” alt=”alt_text” />

where:

image_path (attribute of the <img> tag) is the location (or path) of the image. For example,
images/banner.jpg. This example represents a relative path to the file. This
attribute is REQUIRED.

height The height of the image. This tag can be used to promote a faster download of
the image. This attribute is NOT required. However, it should be included.

Academic Technology & Creative Services 22 Spring 2006

HTML: The Basics

width The width of the image. This tag can be used to promote a faster download of
the image. This attribute is NOT required. However, it should be included.

alt_text (attribute of the <img> tag) the text that will be displayed by text Web browsers
such as LYNX and used by screen readers. On some browsers, the text that
appears within the alt attribute will display when the mouse cursor is held
stationary over the image. The alt attribute contains a description of the image.

Additional tags include:

Align Used to align the text appearing directly after the image tag. Align can be set to
left, right, and center.

border A border can be placed around an image. If you use your image as a link, you
will need to set the border attribute of the image to 0 – unless you want a blue
border around your image.

Example using all of these attributes:

<img src=”images/picture.jpg” width=”200” height=”230” border=”1” align=”left” alt=”Picture of

children playing” />

Using an Image within a Web page

The image tag is inserted wherever you want an image to appear in your Web page.
It is important to note that you are merely creating an image link that causes an image to appear on a
Web page – you are not “inserting” or “embedding” the image into the page.

root directory

index.htm In Browser…

image

banner.jpg

icon.gif

When an image file is located within your Web site (or directory), the value for the src attribute of the
<img> tag should be relative. One of the most common problems is when img src values are
indicated in the absolute, like this: C://mydocs/images/smiley.gif.3 This will be a problem when the
Web site is moved to a server.

Here is an example of the src attribute using a relative URL for the image:

<img src=”images/icon.gif” alt=”Law icon” />

My image, icon.gif, is located within the images folder of my Web site directory, according to the value
of the src attribute.

3
This type of absolute path will only exist when the image file is located on the local computer..

Academic Technology & Creative Services 23 Spring 2006

HTML: The Basics

Okay, now it is your turn to try inserting an image that is located within your Web site directory…

Exercise 7: Using Images in a Web page

Exercise 7: Using Images in a Web page
Referring to the completed Web Design document you were given at the beginning of the
workshop, insert the banner image at the top (using the file index.htm):

Step 1. Insert the image of the Web Design banner located in the images folder in
the HTML Basics folder (images/banner.gif). This image should appear in
the same place as the one displayed on the Web Design handout.

Step 2. Save your file using the same filename.

Step 3. View the file using your Internet browser.

Advanced
Add in some of the other images located within the images folder.

You can also visit the following Web address: http://www.csus.edu/web/campus.html.

Read the instructions located at the top of the Web page to include the image(s) of your
choice on your Web page. Explore the above-mentioned site a bit if you like.

Use the hyperlink tag to make the Sac State banner image at the top of your page a link to
Web Central (http://www.csus.edu/web).

Academic Technology & Creative Services 24 Spring 2006

HTML: The Basics

Testing Your Pages in Different Browsers

Different browsers (and browser versions) interpret HTML slightly different. To be certain your pages
appear as you intend, test your Web pages using different browsers:

• Internet Explorer (www.microsoft.com)

• Netscape Navigator (www.netscape.com)
• Mozilla Firefox (www.mozilla.org)
• Safari (Mac) (www.apple.com)

Netscape 6.2 Internet Explorer 6.0

Exercise 8 – Web Page Testing

Exercise 8 – Web Page Testing
Using your completed Web site files, preview them using both Internet Explorer and Netscape
Navigator.

1. Using Internet Explorer, open the file, “index.htm”, from the HTML Basics folder.
Navigate through your “Web site”, noting how the content is formatted.

2. Using Netscape Navigator, open the same file, “index.htm”, from the HTML Basics
folder. Navigate through your “Web site”, noting how the content is formatted.

3. Compare the view of your Web site offered by both browsers. Minimize the screens and
compare them side-by-side as done in the last example featuring Netscape 6.2 and
Internet Explorer 6.0.

Are there any differences? Can you accommodate for any differences?

Academic Technology & Creative Services 25 Spring 2006