Contents

1. Chapter I Introduction to Web Design

2. Chapter II Formatting Text
3. Chapter III Creating Lists
4. Chapter IV Creating Images
5. Chapter V Tables
6. Chapter VI Hypertext Links
7. Chapter VII Frames
8. Chapter VIII HTML Forms

Chapter I
Introduction to Web Design

DEFINITIONS
Computer: An electronic device with the ability to (1) accept user-
supplied data, (2) input, store, and execute programmed instructions,
(3) perform mathematical and logic operations, and (4) output results
according to user specifications.

Internet: a Computer communication network system.

Network: A computers linked to each other by cables (or satellite) in

order to share and exchange data or information.

Web (World Wide Web): A method of accessing the stored

information by anyone anywhere in the world by means of a computer
system.

Web page: One HTML document accessible from the World Wide Web.
Ore One page on a website.

Web site: A collection of web pages linked together on a single topic

or for a single business accessible from the World Wide Web.

Web server: a Computer, which serves other Computers on the

Internet.

Web host: A company, which keeps websites on their computers for

public access.

Web Browser: a program used to find and interpret HTML documents

on the Internet. Most popular browsers are Microsoft Internet Explorer
and Netscape Navigator.

1
Web master: Person who designs and/or manages websites.

Home page: The main or entrance page to a website.

E-mail (Electronic mail): Electronic transmission of message from

one party to another via computer and phone lines or computer and
cable.

HTML: "HyperText Markup Language." Is a collection of platform-

independent styles used to create a document for the world wide web
(WWW).

Tag (element): A special code that tells HTML interpreter how to

display the HTML document. (Container tag, and empty tag).

Attribute: Additional information about the tag.

Search engine: software that help you to access the required

information around World Wide Web.

Modem: A data communications device standing for "modulator-

demodulator" and which translates digital signals into analog ones
(and vice versa).

Benefits from using the Internet:

1. Sending and receiving electronic mail
2. Finding information on just about any topic
3. Retrieving information (e.g., text, data, images, sound, and
video)
4. Downloading free software
5. Conducting research
6. Accessing library catalogs and information databases
7. Keeping up to date with electronic news, journals,
government documents, and books
8. Participating in global electronic discussion groups
9. Finding new conservation partners

Communication on the Internet

2
What happens when a browser requests an HTML document over the
Internet?
Let’s take a look:
1. The user types a URL into the Web browser to identify which
Web page they would like to view.
2. The browser parses the URL and requests a DNS server using
broadcast IP. It then sends the URL to the DNS to resolve the IP
address. In other words, it converts appdev.com to
206.191.222.239.
3. The browser then uses the IP address to send the HTTP packet
to the browser’s ISP connection, which passes it to the next
server, routing it from server to server until it reaches the
destination Web server (see Figure 2).
4. The Web server locates the request page either on its hard drive
or cached in memory.
5. The Web server sends its contents back to the requested
browser. The route may not be the same as the sending route,
either (see Figure 3).
6. The browser interprets the HTML formatting instructions and
displays the content to the user.

The Building Blocks of a Web Page

You can create an HTML document by using any text editor, such us
notepad, WordPad and MS Word. You should save an HTML page
with .htm or .html extension.

HTML Tags
An HTML document, being part of the markup languages, is made up
of tags. These tags help the browser determine how to display or
format the content of the document.

A Tag (element): A special code that tells HTML interpreter how to

display the HTML document. There are two types of tags, container
tag, which has starting tag and ending tag such as <HTML> and
</HTML>, and empty tag, which has only starting tag such as <BR>.
A tag is simply a piece or pieces of text enclosed by angle brackets.
Take the following example:

<p>This is a <b>great</b> stock pick.</p>

The <p> and <b> are both tags. The <p> defines a new paragraph
and the <b> tells the browser to bold the font.

Tag Attributes

3
An attribute is Additional information about the tag. Some tags require
attributes to better describe the content. Attributes exist within the
tag’s angled brackets and are typically composed of a key and key
value pair. For example, look at the following statement:

<FONT FACE=″Tahoma″ SIZE=″2″>Hello World</FONT>

The FACE and SIZE are attributes of the font tag. They define the font
type and the font size that should be used for the text that appears
between the two font tags.

Fundamental Tags
The W3C specifications for an HTML document require at least four
tags in all HTML documents. These tags define the document type and
the location of the content. The following table shows the fundamental
tags with their descriptions:

Start Tag End Tag Description

<HTML> </HTML> Defines the beginning and the end of the entire
HTML document. These tags should be the first and
last HTML tags in your document
<HEAD> </HEAD> Statements between these tags provide information
to the browser about its content. This includes: the
title, the author, the base URL, the document style,
etc.
<TITLE> </TITLE> Defines the title of the HTML document. No other
tags should exist between these two tags. Most
browsers display the title in the browser’s title bar.
<BODY> </BODY> Defines the content of the HTML document. This is
where the data that is to be displayed by the
browser should reside.

A Simple HTML Document

Below is a simple HTML document that uses the minimum number of
tags necessary in order to be viewed by a typical browser.

<HTML>
<HEAD>
<TITLE>Sample Page</TITLE>
</HEAD>
<BODY>
Call me Ishmael. Some years ago-never mind how long
precisely-having little or no money in my purse, and
nothing particular to interest me on shore, I thought I
would sail about a little and see the watery part of the

4
world.
</BODY>
</HTML>

The <BODY> Tag

Attribute Description
BGCOLOR Sets the background color for an HTML page. You can
specify by color name or hexadecimal value.
TEXT Sets the text color for an HTML page.
LEFTMARGIN Sets the left-hand and right-hand margins for an HTML
page.
TOPMARGIN Sets the top and bottom margins for an HTML page.

Chapter II
Formatting Text

5
The following table shows some of the text formatting tags that are
available.

Start Tag End Tag Description

<H1>…<H6> </H6> Six headings that affect the font’s face, size,
</H1>… and color. <H1> will have more emphasis
than <H2> and so on until <H6>.
<B> </B> Makes the current font bold.
<I> </I> Makes the current font italics.
<U> </U> Underlines the current font.

HTML Headers
HTML supports six header levels. The syntax is simply:
<Hn>some text</Hn>
where n is a digit one through six. The following code demonstrates
each of the headers.

<HTML>
<HEAD>
<TITLE>The Header Tag</TITLE>
</HEAD>
<BODY>
<H1>Header 1</H1>
<H2>Header 2</H2>
<H3>Header 3</H3>
<H4>Header 4</H4>
<H5>Header 5</H5>
<H6>Header 6</H6>
</BODY>
</HTML>

Bold, Italics, and Underline

Here is a page that demonstrates many of the most popular tags:

<HTML>
<HEAD>
<TITLE>The Bold, Italic, and Underline Tags</TITLE>
</HEAD>
<BODY>
This text is <B>bold</B>. This is <I>italics</I>. This is
<U>underlined</U</BODY>
</HTML>

6
Paragraphs and Line Breaks
HTML provides the paragraph tag, <P>. This tag requires an end tag
defining the end of the paragraph, </P>. You can align a paragraph at
the left, right, center, or justify of an HTML page by using ALIGN
attribute which takes one the following values:
LEFT (is default), right, center, and justify. HTML offers the <BR> or
line-break tag and it is empty tag.
The following HTML statement block demonstrates these tags:

<HTML>
<HEAD>
<TITLE>Paragraphs and Line Breaks</TITLE>
</HEAD>
<BODY>
<P><B>Southern Times Classified</B></P>
<P>1991 Acura Integra, black, slight hail damage,
11#,###.<BR>Willing to trade for a Mazda Miata.</P>
<P ALIGN=″right″>Call 555-1212 for more info.</P>
</BODY>
</HTML>

NOTE: For centering text, HTML includes a <CENTER> … </CENTER>

tag in addition to the <P align=″center″> … </P>.

Adding Comments
Adding comments helps make your Web pages self-documenting. If
you are planning on maintaining a collection of Web pages, comments
provide a way to remind you about your state of mind at the time of
that page’s creation. Comments are in the following form:

<!-- This is a comment -->

Comments can also be multi-lined like the following:

<!--
Page: MySample.htm
Date: Apr-01-00
Copyright: 2000, AppDev Training Co
-->

Horizontal Rule:

7
You use the horizontal rule tag <HR> to divide different sections of
text in an HTML page. The following table shows the attributes of
<HR>.

Attribute Description
SIZE Sets the size for the horizontal rule. Default is 3.
COLOR Sets its color.
ALIGN Sets the alignment of horizontal rule. Valid values include:
left, right, and center.

Marquee
You can use the <MARQUEE> tag to create a scrolling effect for the
selected text in an HTML page. The selected text is scrolls from right to
left or vice versa.

Attribute Description
BEHAVIOR Sets the behavior of the marquee text. Valid values include:
scroll, slide, and alternate.
BGCOLOR Sets the background color for the marquee text.
DIRCETION Sets the direction in which the marquee text scrolls. Valid
values include: left and right.
LOOP Sets the number of times a marquee will loop. Valid values
include: -1 or INFINITE for infinite number of times and n for
specific number of times.

Fonts
To set certain characteristics of the font, HTML provides the <FONT>
tag. The following table shows the attributes that it supports.

Attribute Description
SIZE Sets the font size. Valid values are between 1 and 7.
COLOR Sets the font color.
FACE Sets the font face(s). Multiple faces can be separated by
commas.

Study the following example:

<HTML>
<HEAD>
<TITLE>The Font Tag</TITLE>
</HEAD>
<BODY>
<FONT SIZE=″4″ FACE=″Tahoma″ COLOR=”Orange”>
Call me Ishmael. Some years ago-never mind how long precisely-
having little or no money in my purse, and nothing particular to

8
interest me on shore, I thought I would sail about a little and see the
watery part of the world.
</FONT>
</BODY>
</HTML>

Understanding HTML Colors

Before you learn about color settings it is important that you learn
about colors. HTML supports 16.7 million unique color definitions.
HTML also supports 16 color names (listed below) that you can use to
reference some of the most common colors.

Black Purple
Navy Olive
Blue Gray
Green Silver
Teal Red
Lime Fuchsia
Aqua Yellow
Maroon White

To access the other 16,699,984 colors, it is necessary to manually

define each color using the following syntax:
#rrggbb
Valid values for rr, gg, and bb are between 00 and FF. The values you
choose determine the brightness of red (rr), green (gg), and blue (bb)
respectively.
For example, for the color red, you would use 100% red, 0% green,
and 0% blue or:#FF0000
Table 5 shows some more examples of creating a color.

Value Color
00FF00 Green
FFFFFF White
FFFF00 Yellow
00FFFF Cyan
0000FF Blue
000000 Black
FF00FF Magenta
808080 Gray

Defining Colors

9
You can use attributes of various HTML tags to specify colors in an
HTML page, for example, the background of the page, the text color of
the page, and the color of the links to another page. But HTML does
not provide separate tags for specifying colors
Use the <BODY> tag to create custom backgrounds for your Web
pages. The following table lists some useful <BODY> tag attributes.

Attribute Description
BGCOLOR Sets the color of the browser’s background.
TEXT Sets the color of the text.
LINK Sets the color of the text marking unvisited link.
VLINK Sets the color of the text marking visited link.
ALINK Sets the color of the text marking normal link.

To define white text on a blue background, your <BODY> tag would

appear as follows:

<BODY BGCOLOR=″blue″ TEXT=″white″>

<H2>This is white text on a blue background</H2>
</BODY>

Chapter III

10
 Creating Lists
It would be tough to create a Web site that didn’t need to display a list
whether it was a list of products, a list of employees, or a top ten list
of students. The HTML specifications provide tags specifically for
creating lists.
There are two fundamental types of lists:
1. Ordered list: A list that defines an order or a series of events.
2. Unordered list: A list that defines a group of items that are
related to one another but the order in which they appear is
irrelevant.

Ordered Lists
There are two sets of tags necessary to create an ordered list. The
first, <OL> and </OL>, defines the beginning and end of the entire
list. The second, <LI> and </LI> defines each element within the list.
An example follows:

<BODY>
<P>Steps to purchase from the store</P>
<OL>
<LI>Choose a product</LI>
<LI>Enter your name</LI>
<LI>Enter your address</LI>
<LI>Enter your payment</LI>
<LI>Click the purchase button</LI>
</OL>
</BODY>

To change the character used as the index, add the TYPE attribute to
your <OL> tag.
The following table shows the values of TYPE attribute.

TYPE Description
TYPE=”1” Arabic numbers, such as 1, 2, and 3. This is the default value.
TYPE=”A” Upper case alphabets, such as A, B, and C.
TYPE=”a” Lower case alphabets, such as a, b, and c.
TYPE=”I” Upper case Roman numerals, such as I, II, and III.
TYPE=”i” Lower case Roman numerals, such as i, ii, and iii.

Below is an example showing Roman numerals used within a nested

list.

<BODY>

11
<P>Steps to purchase from the store</P>
<OL>
<LI>Choose a product</LI>
<LI>Enter your personal information</LI>
<OL TYPE="i">
<LI>Enter your name</LI>
<LI>Enter your address</LI>
<LI>Enter your phone</LI>
</OL>
<LI>Enter your payment</LI>
<LI>Click the purchase button</LI>
</OL>
</BODY>

Unordered Lists
Two sets of tags are used for unordered lists as well. The tag that
defines each item in the list is identical to that of the ordered list, the
<LI>. When defining the ordered list as a whole, you enclose it with
<UL>…</UL>.
Here is an example of an unordered list:

<BODY>
<P>Valid form of payment</P>
<UL>
<LI>Major credit card</LI>
<LI>Purchase order</LI>
<LI>Check</LI>
<LI>Cash</LI>
</UL>
</BODY>

HTML 4.01 supports three different bullet types: circle, square, and
disc. If a browser does not support the additional bullets, the default
will be used. To change the bullet type, add the TYPE attribute to the
<UL> tag.
Here is an example:

<BODY>
<P>Valid form of payment</P>
<UL TYPE="square">
<LI>Major credit card</LI>
<LI>Purchase order</LI>
<LI>Check</LI>
<LI>Cash</LI>

12
</UL>
</BODY>

Chapter IV

13
 Creating Images

Working with Images

Early in the life of the World Wide Web, images were very uncommon.
Most of the information was in ASCII text. Today, your Web site won’t
have much appeal without images and images to capture and keep
your visitor’s attention. So you need to use images to convince your
audience that they should stay at your site.

However, you don’t want to overburden your site with images either.
Visitors to your site are just as likely to leave because you have too
many images that take too long to load.
Two image formats are the most widely supported by Web browsers.
1. GIF (Graphics Interchange Format)
2. JPG, JPEG (Joint Photographic Experts Group)

Using an Image as the Background

You can use the BACKGROUND attribute of the <BODY> tag to specify
an image to display in the background of the browser.
Here is an example of a background image:

<BODY BACKGROUND="image.gif">
<H2><FONT FACE="Verdana">
JR's Business to Business Solutions</FONT></H2>
<H3><FONT FACE="Verdana">
Your ticket to Internet freedom</FONT></H3>
</BODY>

Watermarks
Watermarks are image-based backgrounds that do not move as the
user scrolls through text and images in your Web page.
To create a watermark out of a graphical image, use the
BGPROPERTIES attribute of the <BODY> tag.

<BODY BACKGROUND=″bkgrnd.gif″ BGPROPERTIES=″FIXED″>

Using Images with HTML

You can use <IMG> tag to creage images. <IMG> places the image
inline with the text and includes some alignment attributes to properly
arrange the text around it.

The Image Tag

14
Use the <IMG> tag to place a graphic image of GIF or JPEG format
inline with the surrounding text. The <IMG> tag does not have an
ending tag. The attributes for the image tag are shown in the following
table.

Attribute Description
SRC Sets the location of the image file.
ALT Text that displays if the browser does not support the image
type or while image is loading or in a tool tip.
BORDER Creates a border around the image.
HEIGHT Defines the height of the image. Setting it greater or less
than the original height causes the image to stretch or
shrink.
WIDTH Defines the width of the image. Setting it greater or less
than the original width causes the image to stretch or shrink.

The SRC attribute is required for all <IMG> tags and defines the
location of the image file. The file can be referenced with a physical
path.
Other attributes are optional.
Here is an example:

<HTML>
<HEAD>
<TITLE>Accounting</TITLE>
</HEAD>
<BODY>
<IMG SRC="Image.jpg" ALT="Company Logo">
<H1>Martin &amp; Gavin Accounting Services</H1>
<H3>Don't forget this is tax season!</H3>
</BODY>
</HTML>

Sizing and Borders

The <IMG> tag includes attributes that allow you to stretch and shrink
an image or add borders around an image.
Both GIF and JPEG images have a width and height embedded within
them, typically defined in pixels. The HEIGHT and WIDTH attributes of
the <IMG> tag allow you to define different height and width values
which in turn causes the image to stretch or shrink.
This example displays the same image with different width and height
settings.

<BODY>

15
<IMG SRC="Image.jpg" WIDTH="138" HEIGHT="93">
<IMG SRC="Image.jpg" WIDTH="250" HEIGHT="250">
<IMG SRC="Image.jpg" WIDTH="50" HEIGHT="50">
</BODY>

The BORDER attribute accepts a numeric value defining the border’s

width in pixels. Here are some border examples:

<BODY>
<IMG SRC="Image.jpg" BORDER="0">
<IMG SRC="Image.jpg" BORDER="2">
<IMG SRC="Image.jpg" BORDER="10">
</BODY>

Chapter V

16
 Creating Tables

Creating Tables
Tables can serve many roles within a given Web page. They may be
used simply to display data using a spreadsheet format, like Microsoft
Excel. They may also be used to break the browser’s display surface
into many sections allowing for advanced image and text layouts.
Before leaping into examples of layout, you will first learn about the
table tags shown in the following table.

Starting Tag Ending Tag Description

<TABLE> </TABLE> Defines the table.
<TR> </TR> Defines a new row.
<TD> </TD> Defines a new column of data.
<TH> </TH> Defines a table header cell.
<CAPTION> </CAPTION> Defines a caption for the table.

A Simple Table
To start a table within an HTML document, you must add the <TABLE>
tag. The <TABLE> tag also requires an ending tag to identify the end
of the table.
Between the two tags, rows are defined using a <TR> tag and the
columns of data are defined using a <TD> tag. Although the HTML
specifications require ending tags for <TD> and <TR>, most browsers
don’t enforce them.
Here is a simple table:
<HTML>
<HEAD>
<TITLE>Working with Tables</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

17
<TABLE> Tag
For better control over the table’s layout, the <TABLE> tag provides
the useful attributes listed in the following table.

Attribute Description
ALIGN Sets the alignment of the content within the cell. Accepts the
values: left, right, and center.
WIDTH Sets the width of the column. Units are in pixels or
percentages.
BORDER Sets the width of the border. Units are in pixels.
CELLSPACING Sets the distance between cells. Units are in pixels.
CELLPADDING Sets the distance between the border of the cell and the
cell’s contents. Units are in pixels.

The WIDTH attribute can be set using two different notations:

1. Pixels
2. Percent of available screen width
The WIDTH value must be a positive value. Using the percent format,
you are instructing the browser to make the width of the table a
percentage of the total width available.
Here is an example using these two formats:

<TABLE WIDTH="100%" BORDER="1">

<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
<TD>Row 1 Col 3</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
<TD>Row 2 Col 3</TD>
</TR>
</TABLE>

<TR> Tag
The <TR> tag defines the start of a new row. With each row, certain
attribute settings can be applied.

Attribute Description
ALIGN Sets the horizontal spacing within the row. Valid values
include: left, right, justify, and char.
VALIGN Sets the vertical placement of the cell’s contents. Valid
values include: top, middle, and bottom.

18
<TD> and <TH> Tags
After initializing a table using the <TABLE> tag and then defining a
row with the <TR> tag, it is now time to add some cells. Each <TD>
or <TH> tag will adds another cell to the current row. Does each row
need the same number of cells? Although it is recommended, the
answer is no. The between <TD> and <TH> is that the text in <TH>
is displayed in bold and at the center of the cell. Look at the following
example:

<TABLE WIDTH="100%" BORDER="1">

<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
</TR>
<TR>
<TH>Row 3 Col 1</TH>
<TH>Row 3 Col 2</TH>
<TH>Row 3 Col 3</TH>
</TR>
</TABLE>

The following table shows the attributes that each of these tags can support.
Attribute Description
ROWSPAN Specifies the number of rows the cell can span. The default is 1.
COLSPAN Specifies the number of columns the cell can span. The default is
1.
ALIGN Sets the horizontal alignment of the cell’s content. Valid values
include: center, left, and right.
VALIGN Sets the vertical alignment of the cell’s content. Valid values
include: top, bottom, and middle.

<TABLE WIDTH="100%" BORDER="1">

<TR>
<TH>Col 1 </TH>
<TH>Col 2 </TH>
<TH>Col 3 </TH>
</TR>
<TR>
<TD COLSPAN="2">Row 1 Col 1</TD>
<TD>Row 1 Col 3</TD>
</TR>

19
<TR>
<TD COLSPAN="3">Row 2 Col 1</TD>
</TR>
<TR>
<TD>Row 3 Col 1 </TD>
<TD COLSPAN="2">Row 3 Col 2 </TD>
</TR>
</TABLE>

From the source code you can see that as the columns are spanned,
additional <TD> tags are left out. The browser automatically absorbs
the column or columns into the column span.
The ROWSPAN attribute works in the same way except that it spans
cells going down the column. Here is an example:

<TABLE WIDTH="100%" BORDER="1">

<TR>
<TH>Col 1 </TH>
<TH>Col 2 </TH>
<TH>Col 3 </TH>
</TR>
<TR>
<TD ROWSPAN="2">Row 1 Col 1</TD>
<TD COLSPAN="2">Row 1 Col 2</TD>
</TR>
<TR>
<TD ROWSPAN="3">Row 2 Col 2</TD>
<TD>Row 2 Col 3</TD>
</TR>
<TR>
<TD>Row 3 Col 1 </TD>
<TD>Row 3 Col 3 </TD>
</TR>
<TR>
<TD>Row 4 Col 1 </TD>
<TD>Row 4 Col 3 </TD>
</TR>
</TABLE>

<CAPTION> Tag

20
The <CAPTION> tag allows you to create a simple caption along one of
the sides of the table. The tag must be placed immediately after the
starting <TABLE> tag and prior to the first table row. For example:
<BODY>
<TABLE BORDER="1">
<CAPTION><B>My Table</B></CAPTION>
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
</TR>
</TABLE>
</BODY>

Nested Tables
When creating large complex layouts, you may get into trouble if you
rely purely on ROWSPAN and COLSPAN to create the layout you want.
In complex layouts it is typically better to use nested tables instead of
using the spanning attributes.
One way is through row and column spanning:

<TABLE BORDER="1" >

<TR>
<TD COLSPAN="4">&nbsp;</TD>
</TR>
<TR>
<TD ROWSPAN="2">&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD ROWSPAN="2">&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD COLSPAN="4">&nbsp;</TD>
</TR>
</TABLE>

Another way is through table nesting:

21
<TABLE BORDER="1">
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD ALIGN="center">
<TABLE BORDER="1">
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>

Rule Precedence
If you understand how precedence works in HTML you can create more
efficient markup. Precedence refers to situations where content is
affected by multiple settings of the same attribute. For example, look
at the following code:

<TABLE ALIGN=″left″>
<TR ALIGN=″right″>
<TD ALIGN=″center″>
Hello World
</TD>
</TR>
</TABLE>

All three levels attempt to define the alignment of “Hello World.” As a

rule of thumb, browsers typically accept the attribute setting from the
innermost tag; in the above example it would be the <TD> tag.

Chapter VI
Hyperlinks
22
For a Web site to be successful, it must group common information on
individual pages. It would be poor design to have your company’s
entire Web site made up of only one page. One of the powers behind
the World Wide Web is in its ability to link together millions of pages,
so that the single page of information you need is only a few simple
mouse clicks or keystrokes away.

Working with Anchors

To create a hyperlink in your HTML document you will need to use an
anchor tag <A>. Anchor tags allow you to create hyperlinks out of any
text or image on your page.

The Anchor Tag

The following table lists some of the attributes supported by the <A>
or anchor tag.

Attribute Description
HREF Sets path of the page to load when the user activates the
hyperlink.
NAME Creates a named anchor to allow jumping within a page.
TARGET When your Web page utilizes frames, this attribute sets the
frame to update with the page referenced in the HREF.
Target Specifies the target window where the linked HTML page is to
be displayed. Valid values include: _self (default), and _blank
Name Enables you to create an anchor within an HTML page.

The anchor tag needs both a starting and ending tag. Nesting
anchors is not allowed.

A Simple Example
Here is a sample page that includes a hyperlink:

<HTML>
<HEAD><TITLE>Hyperlinks</TITLE></HEAD>
<BODY><FONT FACE="Verdana">
<H2>Welcome to SIMAD</H2>
<H3>Choose one of the following departments:</H3>
<A HREF=”IT”>Information Technology Department</A><BR>
<A HREF=”ACC”>Accounting Department</A><BR>
<A HREF=”BA”>Business Administration Department</A></FONT>
</BODY>
</HTML>

Other Hyperlinks

23
This chapter so far has limited its use of hyperlink to include only
those links that jump to another HTML document. As you might
expect, hyperlinks can be used to do more than simple page jumping,
they can:
1. Jump within a page
2. Send e-mail
3. Play music

Links within a Page

Named anchors were added to the HTML specification to allow
hyperlinks to jump to a certain section within the same page.
Before creating this type of hyperlink, you need to create what is
called the named anchor. A named anchor is an anchor tag that uses
the NAME attribute as shown here. This marks a place to jump to.

<A NAME=″MyLabel″></A>

To create a hyperlink that goes to this named anchor, add a pound

sign followed by the anchor name. Here are some examples:

<A HREF=″#MyLabel″>

The named anchor, in this case MyLabel, can be any combination of

characters, numbers, and underscores. The named anchor tags can be
anywhere within the body of your HTML document.

E-Mail Links
Many sites include hyperlink that will launch a user’s e-mail application
and create a new e-mail message. The new e-mail message will be
automatically addressed to the individual(s) defined by the hyperlink.
An anchor tag for an e-mail address looks like the following:

<A HREF=″mailto:webmaster@simadsom.org″>Click Me</A>

The Click Me text appears just like any other text-based hyperlink.
Often in practice, e-mail hyperlinks include the e-mail address within
the text itself.
This allows the user to jot down the e-mail address for later use. For
example:

<A HREF=″mailto:info@simadsom.org″>info@simadsom.org</a>

At the bottom of each and every Web page, it is customary to include

at least one e-mail address. This is where users typically look to find

24
either the Webmaster’s e-mail address or some type of support
address to send questions or comments to.

Chapter VII: Creating Frames

You can use frames in an HTML page to manage the layout of the
page. Frames divide the browser window into sections, horizontal or
vertical.
Each frame within a web page has the following properties:

25
 1. It displays an HTML document independent of the other frames.
2. It has a unique name that is used by other web pages to refer to
refer to the frame.
3. Its size can by dynamically changed according to the size of the
content that is displayed therein.

Starting Tag Ending Tag Description

<FRAMESET> </FRAMESET> Specifies the size and the number of the
frames to be created in an HTML page.
<FRAME> </FRAME> Specifies the name of a fames and HTML page
that you need to display in the farme.

Creating a Frameset Document

Before you can create frames, it is necessary to create the frameset
document. The frameset document is the HTML document that is
initially referenced by the browser and it contains all the necessary
information to instruct the browser how to set up the client area for
using frames. Let’s begin by studying a frameset document.

Frameset Document
The frameset document starts out like any other HTML document. It
too has the <HTML>, <HEAD>, and <TITLE> tags. But instead of the
<BODY> tag, it uses a <FRAMESET> tag. The information relating to
the frame design is kept between the starting and ending
<FRAMESET> tag.
Study the following example:

<HTML>
<HEAD>
<TITLE>Frame Sample</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME NAME="contents" SRC="samp1b.htm">
<FRAME NAME="main" SRC="samp1c.htm">
</FRAMESET>
</HTML>

The <FRAMESET> Tag

The <FRAMESET> tag requires that you use at least one of two
attributes to define the frame layout: ROWS or COLS. The following
table shows all the attributes of the <FRAMESET> tag.

26
Attribute Description
COLS Sets the number of frames to create in column format as
well as their size. Its size, separated by commas, defines
each column.
ROWS Sets the number of frames to create in row format as well
as their size. Its size, separated by commas, defines each
row. Size can be set using either an absolute value or a
percentage. Rows may also use the asterisk character to
designate its size as the remaining portion of the screen
after all other rows are defined.
FRAMEBORDER Determines if the border is visible around the frames. Valid
values are 0 and 1 where 0 means not visible.

In the example, the COLS attribute is set to “150,*”. This defines two
columns where the first column is 150 pixels and the second column is
all the remaining space. You can define as many columns as you need.
To add more

The <FRAME> Tag

Once the rows or columns are defined, the next step is to define the
HTML page to be loaded into each frame. To do this, insert <FRAME>
tags between the opening and closing <FRAMESET> tags, one for
each defined row or column. When the frameset document is
processed by the browser, it takes the first <FRAME> tag it comes to
and applies its settings to the first defined
column going left to right (or in the case of rows, top to bottom). This
means the order of the <FRAME> tags determines how they are
assigned.
The following table shows the attributes of the <FRAME> tag.
Attribute Descriptions
SRC Defines the HTML document to load within that frame.
FRAMEBORDER Determines if the border is visible around the frames. Valid
values are 0 and 1 where 0 means not visible.
NAME Sets the name of the frame. This NAME is used by the
anchor tag to display the linked HTML page within the
frame.
NORESIZE Prevents the user from resizing the frame. This attribute is
not assigned a value. Its presence turns this feature on.
SCROLLING Sets whether scrollbars are used. Valid values are: yes, no,
and auto. With the value auto, the browser will add
scrollbars only if the data overruns the space provided.

At a minimum, it is good to always define a NAME attribute and an

SRC attribute. Below is the code used in the previous sections:

<HTML>

27
<HEAD>
<TITLE>Frame Sample</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME NAME="contents" SRC="samp1b.htm">
<FRAME NAME="main" SRC="samp1c.htm">
</FRAMESET>
</HTML>

Nesting Frames
<HTML>
<HEAD>
<TITLE>Frames Sample</TITLE>
</HEAD>
<FRAMESET ROWS="65,*" >
<FRAME NAME="banner" SRC="samp1a.htm">
<FRAMESET COLS="150,*">
<FRAME NAME="contents" SRC="samp1b.htm">
<FRAME NAME="main" SRC="samp1c.htm">
</FRAMESET>
</FRAMESET>
</HTML>

28
 Chapter VIII
HTML Forms
What Are Form?
A form is a collection of fields that you can use to gather information
from the people visiting your web site.
A form is made up of a collection of input controls. Each HTML
document can have zero, one, or many forms within its page.
When the submit button is activated, the data collected within the user
controls of that form are transmitted back to the Web server. Each
form within an HTML document defines its own URL that receives the
data.

Form Controls
Forms can contain a variety of controls. The various types of controls,
all derivatives of three tags (<INPUT>, <TEXTAREA>, and
<SELECT>), are listed in the following table.

Control Type Syntax Description

Text box <INPUT TYPE="text"> Allows the user to enter text.
Password <INPUT Allows the user to enter text but masks
TYPE="password"> each character with an “*”.
Checkbox <INPUT Allows users to send a True/False
TYPE="checkbox"> response.
Radio button <INPUT TYPE="radio"> Allows users to choose a single item
from a group of items.
Submit <INPUT TYPE="submit"> Creates a button that, when activated,
button sends the form data to the Web server.
Reset button <INPUT TYPE="reset"> Clears all controls on the form.
Text area <TEXTAREA> Allows users to enter multi-line text.
Dropdown <SELECT SIZE="1"> Allows user to pick from a list.
List box <SELECT SIZE="n"> Allows user to pick from a list.

29
<INPUT> Tag
The <INPUT> tag is used to create a number of controls. You use the
TYPE attribute to specify the specific type of control. This attribute and
others are summarized in the following table.

Attribute Applies To Description

TYPE All Sets the type of control. Default is text.
VALUE submit, and For submit and reset it sets the caption of
reset, the control.

SIZE Text and Sets the display width in characters.

password,
MAXLENGTH Text and Sets the maximum number of characters
password, the user may enter.
CHECKED checkbox and Sets the default state of the control. For
radio checkbox, it will be checked. For radio, it
will be selected.

<SELECT> Tag
HTML uses the <SELECT> tag to create both the combobox
(dropdown) control and the listbox control. What sets these two apart
is the value of the SIZE attribute.
Using the <SELECT> tag with the SIZE attribute of 1 will generate a
combobox (dropdown) control. Using a SIZE attribute greater than 1
will generate a listbox control.
Both the listbox and combobox controls are useful in providing the
user with a long list of options to choose from. Combobox controls
allow the user to select only one item from the list, while the listbox
controls can be configured to allow multiple selections.
The following table shows the attributes available for the <SELECT>
tag.

Attribute Description
SIZE Creates a combobox control if set to 1. Creates a listbox control if
set to greater than 1. Values greater than 1 set the number of
elements the listbox will show at one time.
MULTIPLE If present, allows the user to select more than one item. Only
valid if SIZE > 1.

Between the opening and closing <SELECT> tags exist one or many
<OPTION> tags. Each <OPTION> tag represents one item in the list.
Between the opening and closing <OPTION> tags is the string you
wish to include as that item and they will be ordered in the order they
appear between the <SELECT> tags.

30
To have an item default to being selected, include the SELECTED
attribute within the <OPTION> tag of that item. An example that
creates a combobox control follows:

<SELECT NAME="cboLogin" SIZE="1">

<OPTION SELECTED>Please Select...</OPTION>
<OPTION>AndreaK</OPTION>
<OPTION>DanaC</OPTION>
<OPTION>MartyS</OPTION>
<OPTION>SidH</OPTION>
<OPTION>ZacharyL</OPTION>
</SELECT><BR>

<TEXTAREA> Tag
The text control created by the <INPUT> tag cannot accept multiple
lines because it is a single-line control. If you need to allow your users
to enter multi-line text-based data, like for a comments field or for
shipping instructions, you need to use the TEXTAREA control.
The <TEXTAREA> tag includes ROWS and COLS attributes to allow you
to set the width and height of the control. These attributes do not limit
the number of characters the user can enter; it simply defines how
many characters the user can see at one time. Between the opening
and closing <TEXTAREA> tag, include any content you would like to
appear within the TEXTAREA control as a default.
The following code creates a TEXTAREA control:
<H4>Please enter any special shipping instructions?</H4>
<TEXTAREA NAME="Comments" ROWS="7" COLS="50">
Enter your comments here.
</TEXTAREA>

31
References
These are HTML references:
1. HTML and XML An Introduction, Prentice-Hall of India Private
Limited, New Delhi-110001
2. HTML Black Book, Steven Holzner, DreamTech Press, New Delhi-
110002
3. http://www.html.net
4. http://www.w3c.org
5. http://www.w3schools.com.
6. http://www.allhtml.com

32