Introduction to HTML Table of Contents

Table of Contents
Preface

Chapter 1 Getting Started: A Simple Web Site

Web page ------------------------------------------------------------------------------ 1

HTML ---------------------------------------------------------------------------------- 1
HTML Tags --------------------------------------------------------------------------- 1
Anatomy of a Web Page ------------------------------------------------------------- 1
Head and Body ------------------------------------------------------------------------ 1
Nested Structure of the HTML tags ----------------------------------------------- 3
Inserting text ------------------------------------------------------------------------- 3
Inserting Links and Images ---------------------------------------------------------- 4
Table Tag ------------------------------------------------------------------------------ 5
Exercise 1.2: Building your first Web page -------------------------------------- 5
Software that Create HTML Tags ------------------------------------------------- 6
Cascading Style Sheets -------------------------------------------------------------- 7
Is It Important to Learn HTML? --------------------------------------------------- 7
Some commonly used HTML Tags 7
Lab Exercise 1 ---------------------------------------------------------------------- 9

Chapter 2 Text Formatting & Page Layout

10
New Paragraphs and Line Breaks -------------------------------------------------- 11
Changing the Font, Size, and Color ------------------------------------------------ 13
Changing the Default Font, Size, and Color -------------------------------------- 14
Headers -------------------------------------------------------------------------------- 15
Lab Exercise 2 ------------------------------------------------------------------------ 15

Chapter 3 Images

Inserting Images ---------------------------------------------------------------------- 16

Adding a Link to Images ------------------------------------------------------------ 17
Wrapping Texts and Adding Space around an Image --------------------------- 18
Horizontal Rules --------------------------------------------------------------------- 19
Lab Exercise 3 ----------------------------------------------------------------------- 19

Chapter 4 Links

Linking to Another Web page ------------------------------------------------------ 20

Anchoring ----------------------------------------------------------------------------- 20
To Create Anchors ------------------------------------------------------------------- 20
To Link to a Specific Anchor ------------------------------------------------------ 20
Targeting ------------------------------------------------------------------------------ 22
Lab Exercise 4 ------------------------------------------------------------------------ 24
Introduction to HTML Table of Contents

Chapter 5 Lists and Tables

Creating Ordered Lists --------------------------------------------------------------- 25

Creating Unordered List ------------------------------------------------------------- 25
Creating a Simple Table ------------------------------------------------------------- 27
Table Borders ------------------------------------------------------------------------- 28
Spanning a Cell across Multiple Cells --------------------------------------------- 28
Changing sizes ------------------------------------------------------------------------ 29
Aligning Contents -------------------------------------------------------------------- 29
Lab Exercise 5 ------------------------------------------------------------------------ 30

Chapter 6 Frames

Simple Frameset ---------------------------------------------------------------------- 31

Combining Framesets ---------------------------------------------------------------- 31
Frame Margins and Borders --------------------------------------------------------- 32
Scrollbars; Resize option ------------------------------------------------------------ 32
Targeting links ------------------------------------------------------------------------ 32
Lab Exercise 6 ------------------------------------------------------------------------ 33

Appendix

Password Protected Test ------------------------------------------------------------- 34

Preface

This tutorial will show you how to create and display HTML pages. HTML page is
composed as ordinary ASCII text files, containing markup characters of the Hypertext
Markup Language (HTML). Once composed these text files are saved with an .html
extension. To view an HTML file we use an HTML Web browser like Internet Explorer
or Mozilla Firfox.

The tutorial is divided into six chapters. Each chapter contains two parts.
1. Lesson
2. Lab Exercise

The tutorial is also an excellent supplement for the ICS students. Online exam is
available at [Link] To get password and user name, please
send an Email at ihsan1@[Link]

You are welcome to e-mail me at ihsan1@[Link] with your thoughts and comments
while you are reading this tutorial or afterwards. I promise to get back to you speedily.

Have a fun!

Ihsan Rehman
London, Ontario
Canada

===============================================================
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________

Getting Started: A Simple Web Site

A web site is a collection of files/web pages, usually html files that are arranged on the
World Wide Web under a common address and allows retrieval via a browser.

Web Page:

A web page is a text file with extension html or htm containing HTML tags. For example
[Link], a web page is written using HTML tags/HTML language. The output of a
web page can be viewed by using a web browser, for example Internet Explorer.

HTML:

HTML stands for HyperText Markup Language; it's not really a programming
language like Java, Perl, C, or BASIC. It is a language of a web browser. We use HTML
to display text and images in the web browser.

A web browser is a software application that enables a user to display and interact with
text, images, and other information typically located on a web page at a website on the
World Wide Web or a local area network.

Most commonly used web browsers are Internet Explorer, Mozilla Firefox.

HTML Tags:

HTML tags are used to mark-up HTML elements, HTML elements mean text, images
and links etc. These tags are surrounded by the two characters < and >, normally come in
pairs like <b> and </b>. The first tag in a pair is the start tag; the second tag is the end tag

Example:

<CENTER>welcome</CENTER>

<CENTER> is an HTML tag for centering welcome is the text that gets centered.
</CENTER> is an HTML tag to end centering

Note: HTML tags are not case sensitive.

Anatomy of a Web Page:

Writing an HTML file means composing the text you want to display, and then inserting
any tags you want in the right places. Tags begin with a < character and end with a >
character, and tell a browser to do something special, like show text in italic or bold, or in

-1-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________
a larger font, or to show an image, or to make a link to another Web page. Although
HTML has many tags you can use, you don't need to know them all to use HTML
HEAD and BODY:

Most HTML files begin with <HTML> tag and end with </HTML>. This tells the
browser that you are using HTML language. The general format is:
<HTML>
<TITLE> title that appears at the left corner of the browser </TITLE>
<HEAD>
...head content
</HEAD>
<BODY>
...body content
</BODY>
</HTML>

Example:

<html>
<title> My Page</title>
<head></head>
<body>
<h1> This is my First Page </h1>
</body>
</html>

If you save this file as [Link] and then open this file in a browser such as Internet
Explorer, you will see the following the output.

-2-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________

Nested Structure of the HTML tags:

HTML tags are nested. Since <HEAD> comes after <HMTL> tag, </HEAD> need to
come before </HTML> tag. The following example is INCORRECT:

<h1> ...<h2> ...</h1> ...</h2>.

This is wrong since the tags overlap and are not nested.

<HEAD> section contains information about the page, such as the site title, keywords,
etc. Only the title is visible to the viewer (at the top of the window), and all other
information is hidden. <TITLE> is what gets copied to the bookmark, so it is important to
put a short, descriptive title to your page.

<META> tags are used by search engines to turn up search queries, although they serve
no purpose here.

Also notice that there are lines that start with <-- and end with -->. These are called
comments. Comments are not visible to the viewer, and they are for the writers/readers of
the source code to facilitate the reading.

<BODY> section contains the information that is visible to the viewer.

Inserting text:
The text you write in your HTML file has no formatting. Except the spaces you put in,
the return keys and tabs have no effect on how the text is displayed on the site.
<P> tag indicates that a new paragraph is starting, thus there will be a line break and
space between <P> tags. </P> tag indicates the end of the paragraph, but this is optional.

-3-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________

Exercise 1.1: Building your first Web page

1. Name your file:

-Start a Text editor program, such as Notepad

-On the menu bar, click on "File" "Save As?"
-Name your file as *.htm file (ex: my_start.htm)
-Under "Save as type", choose "All Files(*.*)"
-Save it under your desired directory.

2. Title your page

-Type in the <HTML>,<HEAD>,<BODY> tags. You may refer to

Figure 1.2 which demonstrates use of tags.
-In the HEAD section, type in the site title. Ex:
<TITLE>Grace?s Home Page</TITLE>

3. Type in a line of text

-In the BODY section, type in "Hello, World!" a line of

text wrapped in <P> tags. Ex: <P>Hello, World!</P

4. View the page

-Save your *.htm file

-Start Internet Explorer or Netscape
-Choose "File" "Open"
-Select your file by browsing if you don?t know the absolute path
Open file.

Inserting Links:

Here is the source code for this link:

<P><A HREF = "[Link] is a Link</A></P>
<P> places the link text in a separate paragraph. The general format for inserting a link is:
<A HREF = "destination">Link Label</A>

Inserting Images:
The most popular versions of graphics image are GIF and JPEG. Other formats include
BMP and PNG. You can create these images using graphics editors such as Adobe
Photoshop or Macromedia Fireworks.
Here is the source code for to insert an image:
<P><img src="[Link]"></P>
The usual format for inserting an image is: <IMG SRC = "image_file_name">

-4-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________
Table Tag:

Table tag is very important html tag. It is used to align the text, images and links. Here is
the source code for to insert an image:
<table align=center border=1>
<tr><td> First Row, First Column </td> <td> First Row, Second Column </td></tr>
<tr><td> Second Row, First Column</td> <td> Second Row, Second Column </td></tr>
</table>
Exercise 1.2: Building your first Web page
Copy the following HTML Code in your [Link] file and observe its output.

<html>
<title>My Page</title>
<head></head>
<body>
<center><h4>Welcome</h4></center>
<table border=1>
<tr><td>Some Text1</td><td>Some Text2</td></tr>
<tr><td><img src="images/[Link]"></td><td><a
href="[Link]
Link (Lion)</a></td></tr>
</table>
<p>
Typically a mature male stands 4 feet at the shoulder and
is 8 .5 feet long, plus tail. He'll average 450 pounds.
</p>
</body>

</html>

-5-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________
Output of the exercise 1.3 in a browser:

Software that Create HTML Tags:

Nowadays most people use visual HTML editors that let you create web pages easily
without the hassle of typing in every tag. Here is a brief list of popular HTML editors:

Microsoft FrontPage -- This comes with Microsoft Office. FrontPage provides

many functions and is easy to use. The downside is that FrontPage automatically
inserts many unnecessary tags which make the raw HTML code very hard to read.

Netscape Composer -- Composer comes free with the Netscape Communicator

package.

Macromedia Dreamweaver -- Another powerful HTML editor, the one used to

write the HTML code. Since it has so many features, it may be difficult to pick up
in the beginning. But once you learn how to use it, it's much better than FrontPage.
The downside is that the software is expensive.

-6-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________
Cascading Style Sheets:

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colours,
spacing) to Web documents.

There are various ways of linking these style rules to your HTML document, but the
simplest method for starting out is to use HTML's STYLE element. This element is
placed in the document HEAD, and it contains the style rules for the page.

Example:
Go to the page [Link] and view its source.

Is It Important to Learn HTML?

You can create web pages using these editors without knowing anything about HTML.
But, many times, you need to enter HTML codes into the document by hand to control
the details. Particularly, when you are using scripting languages. These programs let you
alternate between the visual side and the raw code side, which is very convenient.

Copying HTML Code:

You can learn quickly how to do something in HTML by using the View option of the
web browser.

Reasons against Copying other HTML Code:

1. Copyright issues
2. Poorly written
3. Bugs
4. Have not learned the basics
5. Inconsistent styles

Some commonly used HTML Tags:

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines
the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

-7-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________
Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored
by the browser. You can use comments to explain your code, which can help you when you edit the
source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.

See an HTML tag chart at [Link]

-8-
Chapter 1 Getting Started: A Simple Web Site
________________________________________________________________________
Lab Exercise 1: Check You Understanding

1. What does HTML stand for?

2. Choose the correct HTML tag for the largest heading

<h1>
<heading>
<h6>
<head>

3. What is the correct HTML tag for inserting a line break?

4. Choose the correct HTML tag to make a text bold

<bold>
<bld>
<b>
<bb>

5. What is correct HTML tag to make a text italic

6. What is the correct HTML for making a hyperlink?

<a url="[Link]
<a href="[Link]
<a>[Link]
<a name="[Link]

7. Which of these tags are all <table> tags?

<table><head><tfoot>
<table><tr><tt>
<thead><body><tr>
<table><tr><td>

8. Write the name of three Editors that produce HTML code.

-9-
Chapter 2 Text Formatting & Page Layout
________________________________________________________________________

Text Formatting & Page Layout

To display the web page in a way that you desire, you need to know how to format texts
and specify layouts. Text formatting includes font types, sizes, colors, centering texts, etc.
It applies only to the sections that you specify. Page layouts, however, apply to the entire
page; some examples are margin size and background color.

New Paragraphs and Line Breaks:

As mentioned in the very first example in chapter 1, HTML does not recognize the
returns that you type in the editor. To start a new paragraph, you must type in the <P>
tag.
1. Type <P
2. You can align the text in the paragraph by typing ALIGN= direction, where direction
is left, right, or center.
3. Type >.
4. Type the content of the paragraph.
5. End the paragraph with </P>, but this is optional.
The <P> tag spaces out the paragraphs. If you dont want the space, you can use the
<BR> to break a line, and avoid the extra lines. There is no closing BR tag.
Here is the sample code written in Notepad and file name is [Link]

Figure 2.1: The source code for Figure 2.2.

See the next page an output of this code.

- 10 -
Chapter 2 Text Formatting & Page Layout
________________________________________________________________________

Figure 2.2: Starting a new paragraph by P tag; creating line breaks by BR tag.

Changing the Font, Size, and Color:

You can specify the fonts that youd prefer the viewer to see. If the viewer does not have
the font that you specified, the default font is used instead.

1. Type <FONT FACE = "fontname1, fontname2, "> before the text you wish to
change. Fontname2 and other fonts you add after fontname1 is used if the user does not
have that font in the system.
2. Type the text that will be shown in the given font.
3. End with </FONT>.

Terminology: FONT is called a HTML tag, while FACE is one of the

attributes of the tag. "Fontname1", etc are the values that are
assigned to the attribute.

To change the font size, you can add the SIZE attribute to the FONT tag. Font size 3 is
the default. To change the font color, you can specify the COLOR attribute by:

1. One of the sixteen predefined colors: red, green, blue, navy, purple, yellow, etc.
2. RGB (red, green, blue) value in hex: #000000 (black), #FFFFFF(white), #00A5C6.

For a list of web safe color palette in hex, please visit:

[Link]
[Link]

- 11 -
Chapter 2 Text Formatting & Page Layout
________________________________________________________________________

Figure 2.3: Here is an example of different font type/size/color.

Figure 2.4: A portion of the source code for Figure 2.3.

- 12 -
Chapter 2 Text Formatting & Page Layout
________________________________________________________________________
Changing the Default Font, Size, and Color:

You can specify the default font, size, and color with BASEFONT tag. This is just like
the FONT tag, except that it applies to the entire page.
1. Type <BASEFONT.
2. Type FACE = "fontname1, fontname2, " for the font type.
3. Type SIZE= "x" where x is a number from 1 to 7. 3 displays the default size that the
viewer specified in the browser.
4. Type COLOR= "hexnumber or colorname">.

The default color for text can also be changed by the following way:

1. Inside the BODY tag, type TEXT.

2. Type = "hexnumber or colorname">.

Example: <BODY TEXT = "#222222">

Figure 2.5: The first and third lines show the effect of specifying default font.

Figure 2.6: The BODY section of the source code for figure 2.5.

- 13 -
Chapter 2 Text Formatting & Page Layout
________________________________________________________________________
Headers:
You can also use <Hx> tags, where x is a number from 1 to 6. They automatically format
the text in a decreasing size, so it is a convenient way to insert titles, subtitles, or
emphasis without all the hassles of the FONT tag.

Figure 2.7 (left) shows how to use <H> tags. Notice that a new paragraph is automatically started. The
source code shown in Figure 2.8 (right).

- 14 -
Chapter 2 Text Formatting & Page Layout
________________________________________________________________________
Lab Exercise 2:

1. Write a welcome sign using the heading tag.

2. Change the default font color to navy.
3. Write a short paragraph about yourself. This paragraph should be one size larger
than the default size.
4. Below this paragraph, write a quote in a new line, using the BR tag. The quote
should be in the default font size, but in a different font type and color.

5. After the quote, type your favorite day (e.g., your birthday) with the -st, -nd, -rd,
or -th endings in superscripts. Example -- My birthday is February 14th. Your
favorite day should italic and bold.

6. At the bottom of the page, insert a link that connects the page to Maple
Educational Academy web site.

Your web page should look something like this:

- 15 -
Chapter 3 Images
________________________________________________________________________

Images
Images add a fun and eloquent look to your page. You can also display important
information such as charts and graphs. A word of caution when playing with image files:
make sure that your file loads quickly. Graphics files tend to be huge, so you want to use
ones that are small in size.

Inserting Images:
You've already seen how to insert an image in chapter 1. You can also create a border and
offer an alternate text. Alternate text is the little text box that pops up when you place
your mouse over an image. Also, if the viewer chooses not to download the image, the
text fills the location of the image.
1. Type <IMG SRC="file name".
2. If desired, type BORDER=n, where n is the thickness of the border in pixels.
3. Type ALT="type description" to add altnernate text to the image.
4. To resize the image, type WIDTH=x, and HEIGHT=y, where x and y are pixel sizes.

Adding a Link to Images:

Sometimes you want to have a smaller version of a picture leading to the full-size
version. This can be done by making the small image a link to the bigger one. Then you
front page can load faster and you leave the viewer to decide whether they want to see the
full image. You can also use this when you want a image to act as a button to another
site.
1. Type <A HREF="destination">, where destination is either a file name or website
address (be sure to start by "[Link]
2. Type <IMG SRC="file name".
3. Add alternate text and resizing if desired.
4. Type >.
5. Type the label you want to go with the link, if desired.
6. Type </A> to mark the end of the link.

See the sample code at the next page.

- 16 -
Chapter 3 Images
________________________________________________________________________

Figure 3.1 and 3.2: An image that acts as a link. The alternate text is not shown.

Wrapping Texts and Adding Space around an Image:

You can use the ALIGN attribute to wrap text around an image. You can only align it left
or right.

1. Type <IMG SRC="file name".

2. Type ALIGN = left to put the image on the left side, or ALIGN = right to put it on
the right side.
3. Add other attributes, e.g. sizing.
4. End with >.
5. Type the text that should wrap around the image.

Text that lies too close to the image looks ugly. To fix that, you can add vertical and/or
horizontal space around your image:
-- In the IMG tag, add HSPACE = x and/or VSPACE = y. Pixels are added on both sides.

- 17 -
Chapter 3 Images
________________________________________________________________________

Figure 3.3 and 3.4: Adding an image with horizontal space added, with text wrap.

Aligning:
If you look at Figure 3.3, you'll notice that the text is aligned to the top of the image.
ALIGN tag also lets you control the vertical alignment of the text relative to the image.
1. In the IMG tag, type ALIGN=direction, where direction is one of the following:
texttop, top, middoe, absmiddle, bottom, or absbottom.
Horizontal Rules:
Most browsers support the horizontal rule, so you can use HR tag instead of an image for
faster downloading.
1. Type <HR where you want the rule to appear.
2. If desired, type SIZE=n, where n is the rule's height in pixels.
3. If desired, type WIDTH=n to specify the width in pixels.
4. You can also add the ALIGN attribute. The values are: left, right, or center.
5. You can also say, NOSHADE to create a solid bar.
6. Finish with >.

- 18 -
Chapter 3 Images
________________________________________________________________________
Lab Exercise 3: **continue from exercise 2 in chapter 2.

1. Below your birthday text, add this image:

You should download this image in the directory that contains your web page file.
(Right click on the image and choose "Save Picture As...")

2. Align the image to the right.

3. Convert the image to a link to go to [Link]
4. Add horizontal and vertical space of 30 pixels around the image.
5. Add another paragraph about yourself to the left of the image. The paragraph
should be wrapped around.
6. After the 'Hello, World!' line, insert a horizontal line.
Your pages should look something like this:

- 19 -
Chapter 4 Links
________________________________________________________________________

Links
Links are the distinguished feature of the World Wide Web. They let you skip from one
page to another, call up a movie or download files with FTP. In this chapter you will
learn how to create different types of links.

Linking to Another Web page:

If you have more than one Web page, you probably want to create links between the
pages. To do so, you use the A tag:

1. Type <A href="file name">, where file name is the destination file.
2. Type the label text.
3. Finish with </A> to complete the link definition.

You've already made links to another site in chapter 3.

Say your main homepage is in directory called MYPAGE. And in MYPAGE directory,
you created a subdirectory called SUBPAGE. In SUBPAGE directory, you have a web
page called "my_hobbies.htm". How do you link this page to your main page? Here is
how:

In the A tag, type <A href="SUBPAGE/my_hobbies.htm">. Everything else is the

same. The '/' character tells the browser to look for the file in the specified subdirectory.

Anchoring:

Sometimes you may want to make links that take a viewer to a specific region in the
same document. To do so, you need to create an anchor and then reference that anchor in
the link.

To Create Anchors:

1. In the part where you want the user to jump to, type <A NAME="anchor_name">,
where anchor_name is the text you will use internally to identify different sections.
2. Add words or images that you wish to be referenced.
3. Type </A> to finish the anchor.

To Link to a Specific Anchor:

1. Type <A HREF="#.

2. Type the anchor name that you've specified earlier.
3. Type ">.
4. Type the link label.
5. Finish with </A>.

- 20 -
Chapter 4 Links
________________________________________________________________________
The above method lets you jump to another section in the same document. If the anchor
is in another document, type
<A HREF="file_name#anchor-name"> to reference the section. (Note that there is no
space between the file name and the # symbol.)

Figure 4.1 and 4.2: Before and after clicking on "Click here to see Dali's Picture" link.

- 21 -
Chapter 4 Links
________________________________________________________________________
The source code for figure 4.1 and 4.2.:

Figure 4.3: The source code for figure 4.1 and 4.2.

Changing the Color of Links:

You probably would want to change the color of links when you've changed the
background color. Here is how:
1. In the BODY tag, type LINK (for unvisited links), VLINK (for visited links), and/or
ALINK (for active links).
2. Type ="hex number or colorname".

Targeting:
So far we've been opening links in the same window. You can control where links are
opened using TARGET attribute. This way, the page that contains the link stays open,
and the user can go back and forth between different windows.
To target links, type TARGET=win_name within the link definition, where win_name is
the name of the window where the corresponding page should be displayed.

Please see the screen shot and source cod eon the next page.

- 22 -
Chapter 4 Links
________________________________________________________________________

Figure 4.4: A new window pops up when you click on the links. DALI and SIMPSONS are targeted to the
same window, while SMARTBABY is targeted to a different window.

Figure 4.5: Source code for Figure 4.4.

- 23 -
Chapter 4 Links
________________________________________________________________________
Lab Exercise 4: ** Expanding Your Web Page

1. Create another html page called "my_secondpage.htm".

2. In the HEAD section, title the page to be "My Second Page".
3. In the BODY section, insert a greeting saying "Welcome to My Second Page".
4. From your previous page (from exercise 3), make a link to "my_secondpage.htm".
When opened, the my_secondpage.htm, page should be in a new window.
5. In the directory that contains your html files, create a subdirectory named
"images". Move all your image files (from exercise 3) into that subdirectory.
6. You should change the value of IMG SRC in your web page so that the image still
shows up properly on your website. Also resize the file "[Link]" (from
exercise 3) to be width 150 and height 100.
Your pages should look something like this:

- 24 -
Chapter 5 Lists and Tables
________________________________________________________________________

Lists and Tables

HTML lets you create different types of lists -- ordered and unordered. They are simple
to create and use.

When you want to present complicated data, you'd probably want to use tables. They are
rather difficult to create and manipulate, but you should know the basics at least. After
you've learned how to make tables, you can always use other HTML editors such as MS
Word or Frontpage to create tables automatically.

Creating Ordered Lists:

Ordered lists are useful in explaining step-by-step instructions. You can use different
symbols to number the items. Anything in the list is indented so that it stands out from
the regular text.

1. Type the title of the ordered list.

2. Type <OL.
3. If desired, type TYPE=X, where X represents symbols you want to use to number the
list: A for capital letters, a for small letters, I for capital roman numerals, i for small
roman numerals, and 1 for numbers, which is the default.
4. If desired, type START=n, where n is the initial numerical value the list should start
with. (i.e., don't put b, II, iv, etc.)
5. Finish definition by >.
6. Type <LI>. You can insert TYPE and START attributes inside LI tag if you wish.
7. Type the text you want to be in the list.
8. Repeat 6-7 for however many items you have on the list.
9. Finish the list by </OL>.

Creating Unordered Lists

Unordered list works in similar way as the ordered list, except that the items are not
numbered.
1. Type <UL.
2. If desired, type TYPE=shape, where shape can be circle, disc, or square. End with >.
3. Type <LI>. Similar to ordered lists, you can specify TYPE in LI tag if you wish.
4. Type the text to be in the list.
5. Repeat 3-4 for however many items you have on the list.
6. Type </UL> to finish the unordered list.

You can also create nested lists by inserting lists within a list. See screen shot at the next
page.

- 25 -
Chapter 5 Lists and Tables
________________________________________________________________________

- 26 -
Chapter 5 Lists and Tables
________________________________________________________________________
Creating a Simple Table:
There are many kinds of tables. TABLE tag signals a start of a table, and TR defines
starting of a new row. TH creates a header. TD starts a new column. Here we will create
a table with 2 columns.
1. Type <TABLE>.
2. Type <TR> to start the first row.
3. Create a header cell in the first row by typing <TH>.
4. Type the contents of the first header.
5. Create a regular cell after the header cell by typing <TD>.
6. Type the content of the regular cell.
7. Repeat steps 2-6 to add new rows.
8. Finish the table with </TABLE>.
Optional: You can close the row with </TR> and each cell with </TH> or </TD>.
See blow the example with source code.

- 27 -
Chapter 5 Lists and Tables
________________________________________________________________________
Table Borders:
So far the tables had no borders. The thickness of the border is controled by BORDER
tag.

1. Inside the initial TABLE tag, type BORDER.

2. Type =n, where n is the thickness of the border in pixels. For no border, use 0.
3. **IE only** If desired, use BORDERCOLOR = "hex_number or color_name" to
control the color of borders.
You can also decide which sides of the external borders are displayed. In the TABLE tag,
after the BORDER attribute, type FRAME = location, where location is one of the
following values:
void, for no external borders
above, for a single border on top
below, for a sigle border on bottom
hsides, for a border on both the top and bottom sides
vsides, for the both the right and lef sides
rhs, for a single border on the right side
lhs, for a single border on the left side
box or border, for a border on all sides (default)
Spanning a Cell across Multiple Cells:
Suppose you want to create a table that looks like this:
Summer Winter You will notice that there are two
Hot Warm Cold Chilly sub-rows in the 'Adjective' row, and
Adjective two columns under 'Summer' and
Active Dormant 'Winter' columns. You can do this by
COLSPAN or ROWSPAN tags.

To span a cell across two columns:

1. When you get to the poin in which you need to define the cell that spans more than one
column, either type <TH or type <TD, depending on whether you are working with a
header cell or regular cell.
2. Type COLSPAN = n>, where n equals the number of columns the cell should span.
To span a cell across two rows, you do the same as above except instead of COLSPAN,
type ROWSPAN.

- 28 -
Chapter 5 Lists and Tables
________________________________________________________________________
Changing sizes:
You can use the WIDTH and HEIGHT attributes to resize the whole table, or to define
the dimensions of particular cells.
To change a table's size, within the TABLE tag, type WIDTH=x and
HEIGHT=y, where x and y are the pixel sizes. You can also center the table by
adding ALIGN=center in the TABLE tag.
To change a particular cell size, type WIDTH=x or HEIGHT=y inside the cell
tag (either TH or TD).
Aligning Contents:
You can refine the look of a table by aligning the contents in different ways with ALIGN
and VALIGN tags.
1. Place the cursor in the initial tag for the cell, row, or section, after the name of the tag
but before the final >.
2. Type ALIGN=direction, where direction is left, center, right, justify (flush both
sides), or char(aligned with a given character).
3. If you've used char in step 2, type CHAR="a", where a is the character to be used for
alignment (such as a decimal point or a comma).
The above steps align the contents horizontally. To align them vertically,
1. Place the cursor after <TH or <TD tag.
2. Type VALIGN=direction, where direction is either top, middle, bottom, or baseline.

- 29 -
Chapter 5 Lists and Tables
________________________________________________________________________
Lab Exercise 5: ** Expanding Your Web Page

1. Modify the table created in the chapter. Merge the two cells in the first row so
that your table looks like this:
A
B C
- Cell A should have the "New Product" text and the image. Dimension:
420 (width) x 50 pixels.
- Cell B's dimension: 30x140 pixels.
- Cell C's height: 140 pixels. This cell should also be vertically aligned to the
top.
- Also vary the color of each cell.
- The border should be set to 1.
The final version of your table should look like this:

- 30 -
Chapter 6 Frames
________________________________________________________________________

Frames
When your web site grows to be multiple pages with complex layouts, the viewer may be
confused by all the information. Also it is hard to tell when one is inside your domain or
outside of it. A nice way of organizing and presenting your entire site is by using frames.

Each frame acts just like their own window. In fact, they are equivalent in their
functionality. So far you've been building sites that contain only one frame. Who says
you have to be happy with one? In this chapter you will learn how to create multiple
frames and control their actions.

Simple Frameset:
First you will learn to create a simple frameset with three horizontal rows in the same
column.
1. Type <FRAMESET after the </HEAD> tag on the framset page.
2. Type ROWS= "a, where a is the height of the first row. The value may be either by a
percentage (20%), fixed pixel size (20), for completely variable (asterisk sign, *).
3. Type , b where b is the height of the second row.
4. Repeat step 3 for the third row.
5. Type "> to complete the row definition.
6. Type <FRAME to assign a URL and other attributes.
7. Type NAME="name" where name is a word that identifies the frame, such as index,
top, etc. This word will be used in targetting later.
8. Type SRC="[Link]" where [Link] is the URL for the page that will be
initially displayed in the frame.
9. Repeat steps 6-9 for the other two ros.
10. Type </FRAMESET> to finish.
You need to have the pages that will be shown in frames ([Link]). BODY tag is not
used at all in the framset page.
To create frames that are in columns, type COLS instead of ROWS in step 2. All others
are the same.
Combining Framesets:
If you want to make your page look like the DevEdge JavaScript Guide, where they have
a vertical and a horizontal frames, you need to combine the framesets. You are inserting a
frameset in a frameset. Here, you will learn how to create a page layout that looks like
this:
Frame 2

Frame 1
Main Frame

- 31 -
Chapter 6 Frames
________________________________________________________________________

1. Type <FRAMESET.
2. Type COLS="a, b"> where a and b represent the widths of the two columns.
3. For the first column, type <FRAME NAME="name" SRC="[Link]">, similar
to steps 6-8 in the previous section.
4. For the second column, thich is divided into two rows, type <FRAMESET COLS="a,
b">.
5. Type <FRAME NAME="name" SRC="[Link]"> for the top frame and the
bottom frame.
6. Finish the two-row frameset with </FRAMESET>.
7. Finish the two-column frameset with </FRAMESET>.
Frame Margins and Borders:
Both IE and Netscape insert 8-pixel margin on the top and the left. You can adjust this to
a different size.
1. In the FRAME tag, before the final >, type MARGINWIDTH=w, where w is the pixel
amount between the left and right edges of the frame and the frame's contents.
2. Similarly, type MARGINHEIGHT=h for the top margin space.
To make the border of the frame disappear, type FRAMEBORDER=0 inside the
topmost FRAMESET tag.
Scrollbars; Resize option:
You can control the display more precisely by specifying how the user can view frames.
To show the scrollbar all the time, type SCROLLING="YES" or
SCROLLING="NO" inside the FRAME tag of the particular frame you wish to control.
YES will show the scrollbar at all times, and NO will hide the scroll bar at all times. The
default setting is "AUTO", which makes scrollbars appear only when necessary.
If you don't want the user to resize a particular frame, type NORESIZE in the FRAME
tag for the desired frame.
Targeting links:
1. Make sure the target frame has a name. (Refer to step 7 in "Simple Frameset" section.)
2. On the page where the link should appear, type <A HREF="file_name" where
file_name is the file that should be displayed in the target frame.
3. Type TARGET="name", where name is the reference given to the target frame
within the FRAME tag.

- 32 -
Chapter 6 Frames
________________________________________________________________________
Lab Exercise 5: *** Framing Your Pages

1. Create a file named "[Link]". This page should be divided into frames like
this:

B C

Frame A -- The source file in this frame should say a greeting, such as "Welcome to My
Page!
Frame B -- Create a file called "[Link]" and make this the source file for Frame
B. [Link] should have links to at least these pages: [Link]
(the one you've been working on so far) and my_secondpage.htm (one you
created in Chapter 4). If you'd like, make links to your other favorite web
sites.
Frame C -- When you click on the links in the "[Link]" file, the pages should
show up in this frame. Make your initial source file to be [Link].
Frame A should not be resizeable and not have scrollbars. Frame B & C
should be set to default. Feel free to play with margins and border colors.
When completed, your page should look something like this:

- 33 -
Appendix Final Exam
___________________________________________________________________________________

Final Exam
Sample Test

A sample test can be found at the web site [Link]

Click on quizzes.

Final Exam

Online exam is available at [Link] For password

and user name, please send an Email at ihsan1@[Link]

- 34 -