Introduction to Hyper Text Markup Language (HTML)

1.Communication Between Browser and Server

1.1 The Client/Server System

The web is the client/server system. A client/server system is a very keen way of distributing
information across information system like a local area network (LAN), a wide area network (WAN), or
the Internet.

A client/server system works something like this:

A big hunk of computer (called a server) sits in some office somewhere with a bunch of files that people
might want access to. This computer runs a software package that listens all day long to requests over
the wires.

Typically, these requests will be in some language

and some format that the computer understands, but in
English sound something like, "hello software package
running on a big hunk of computer, please give me the
file called "mydocument.txt" that is located in the
directory "/usr/people/myname".

The "server software" will then accesses the server

hardware, find the requested file, send it back over the
wires to the "client" who requested it, and then wait for
another request from the same or another client.

Usually, the "client" is actually a software program,

like Internet Explorer, that is being operated by a
person who is the one who really wants to see the file.
The client software however, deals with all the
underlying client/server protocol stuff and then displays
the document to the human user.

1.2 HTTP
So if the web is a huge client/server system, what is the underlying client/server protocol that is used
by the client software and the server software for communication? Well, the client/server protocol used
by the web is HTTP (Hyper Text Transport Protocol).

HTTP is a protocol that is defined in several RFC´s (Request for Comments) located at the Internic
and has had several generations worth of revisions (HTTP/09, HTTP/1.0 and HTTP/1.1).

HTTP is a "request-response" type protocol that specifies that a client will open a connection to a server
then send a request using a very specific format. The server will then respond and close the connection.

2.Creating and Displaying a Formatted HTML Document

2.1 Hyper Text Markup Language

So what does a web browser (client software) do with a file it receives from a web server (server
software)? If the document is an HTML document, the web browser will "interpret" the HTML and display
it according to the instructions contained within the HTML code.

-1-
 HTML (Hyper Text Markup Language) is a very simple language used to "describe" the logical
structure of a document. For example, it can describe which text the browser should emphasize, which
text should be considered body text versus header text, and so forth.

¾ Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion.
This before this, this before this, and so on. HTML does not hold to that pattern and allows the
person viewing the World Wide Web page to go anywhere, any time they want.
¾ Text is what you will use. Real, honest to goodness English letters.
¾ Mark up is what you will do. You will write in plain English and then mark up what you wrote.
¾ Language because they needed something that started with "L" to finish HTML and Hypertext
Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain
English.

2.2 The Basics of HTML Tag

Firstly, document description is defined by "HTML tags" that are instructions embedded within a
less-than (<) and a greater-than (>) sign. To begin formatting, you specify a format type within the < and
the >. Most tags in HTML are ended with a similar tag with a slash in it to specify an end to the formatting.
For example, to emphasize some text, you would use the following HTML code:

<EM>this text is bold</EM>

this text is not bold

It is important to note that the formatting codes within an HTML tag are case-insensitive. Thus, the
following two versions of the bold tag would both be understood by a web browser:

<em>this text is bold</em>

this text is not
<EM>this text is bold</EM>

You can also compound formatting styles together in HTML. However, you should be very careful to
"nest" your code correctly. For example, the following HTML code shows correct and incorrect nesting:

<CENTER><EM>this text is bolded and centered

correctly</EM></CENTER>
<EM><CENTER>this text is bolded and centered
incorrectly</EM></CENTER>

In the incorrect version, notice that the bold tag was closed before the center tag, even though the bold
tag was opened first. The general rule is that tags on the inside should be closed before tags on the
outside.

Finally, HTML tags can not only define a formatting option, they can also define attributes to those
options as well. To do so, you specify an attribute and an attribute value within the HTML tag. For
example, the following tag creates a heading style aligned to the left:

<H2 ALIGN = "LEFT">this text has a heading level two style

and is aligned to the left </H2>

-2-
 There are a few things to note about attributes however. First, it is not necessary to enclose attribute
values within quotes unless white space is included in the value. Secondly, it is not necessary to have a
space before or after the equal sign that matches an attribute to its value. Finally, when you close an
HTML tag with an attribute, you should not include attribute information in the closing.

Finally, you should know that web browsers do not care about white space that you use in your HTML
document. For example, the following two bits of HTML will be displayed the exact same way:

This is some text that is displayed as you would expect

This is some text that is displayed in a way

you would not expect: exactly the same as the above

2.3 The Structure of HTML Documents

There are some rules to make HTML documents. The most basic HTML tags are those which let the
browser know important things about the document itself rather than how to display the body of the
document.

Opening Tag / Closing Tag Description

<HTML>…</HTML> Specifies that the document should be interpreted as an
HTML document. This tag should either be the first line in an
HTML document. Likewise, the closing tag should be the last
line in an HTML file.
<HEAD>…</HEAD> Specifies an area where the browser can look to for general
information about the document. It requires a <TITLE> tag at
the minimum.
<TITLE>…</TITLE> Specifies the text that will be used for the header of the
browser frame. Some search engines use this text for
keyword indexing and browsers will use this for naming
bookmarks if a user chooses to bookmark your site. So
choose your titles well. This tag goes between the <HEAD>
and </HEAD> tags.
<BODY>…</BODY> Specifies the information that should be displayed in the
browser window. This is the document itself rather than
information "about" the document. The <BODY> tag takes
several optional attributes.
<!-- --> You can create comment text that will not be displayed by the
browser by placing it between the <!-- and the -->.
2.4 How to write the HTML document
You will write the HTML document on the Notepad, WordPad, or Simple Text. When you are finished
creating the HTML document, you'll then open the document in a browser, like Internet Explorer. The
browser will interpret the HTML commands for you and display the Web page.

And keep this in mind: HTML documents must be text only. When you save an HTML document, you
must save only the text, nothing else.

What you name your document is very important. You must first give your document a name and then
add a suffix to it. That's the way everything works in HTML. You give a name and then a suffix.
-3-
Follow this format to name your document:

1. Choose a name. Anything. If you have a PC not running Windows 95, you are limited to eight letters,
however.
2. Change save as type to “All files”. Add a suffix. For all HTML documents, you will add either ".htm" or
".html". (".htm" for PCs running Windows 3.x and ".html" for MAC and Windows 95/98 Machines)

Add a suffix “.html” Change to “All Files”

<Exercise1>
Make an HTML document as follows and name it “ex1.html”.
After that display it by the Internet Explorer.

<HTML>
<HEAD>
<TITLE>Exercise1</TITLE>
</HEAD>
<BODY>

<!--This is a comment and comments

do not show up in the browser -->

This is a very simple web page

</BODY>
</HTML>

-4-
The figure below shows how a web browser would interpret the HTML code above. Notice that the
comment line does not show up in the browser window. Also, notice that the text between the <TITLE>
and </TITLE> tags is displayed in the browser title bar.

Text between <TILTLE> and </TITLE> tags

Text between <BODY> and </BODY> tags

One More Thing

If you are going to start writing HTML, I suggest you make a point of learning to look at other authors'
HTML pages. What I mean is for you to look at the HTML document a person wrote to present the
page you are looking at. Don't look at the pretty page, look behind it at the HTML document.

Why Would I Do That?

Well, look, I'm not telling you to steal anything, but let's be honest, if you see some landscaping
you like, you're going to use the idea. If you see a room layout you like, you will use the idea to
help yourself. That's the point of looking at another page's HTML document. It's also the best way
to learn HTML.

Here's how you look at an HTML document (known as the "source code"):
1. When you find a page you like, click on VIEW at the top of the screen.
2. Choose DOCUMENT SOURCE from the menu. Sometimes it only reads SOURCE.
3. The HTML document will appear on the screen.

-5-
2.5 Text Formatting Tags
z To specify a new paragraph, you will use the <P> tag and to specify a line break, you will use the
<BR> tag.
z You can also instruct the browser draw a line between text using the <HR> tag, but many design
theorists recommend against using the tag.
z The following table reviews the features of the tags

Opening Tag / Closing Tag Description

<P>…</P> Indicates a new paragraph and instructs the browser to add a
blank line. Takes optional alignment parameters of LEFT,
RIGHT or CENTER to align the paragraph.
<BR>None This BReaks the text and starts it again on the next line. In an
HTML document, you need to denote where you want every
carriage return with a <BR>. This tag works alone.
<HR> None This tag creates a horizontal line across the screen. By default
the line will span the entire width of the document according to
the specifications of BLOCKQUOTE and LIST tags. However,
you can modify the look of the line by using any of the
following attributes. ALIGN may equal LEFT, RIGHT, or
CENTER. SIZE may equal some pixel value. WIDTH may
equal some pixel value or some percentage of the document
width. NOSHADE will turn off the beveling look. COLOR may
equal some RGBcode. This tag works alone.

-6-
<Exercise2 ~Using P,BR Tags~>
Make an HTML document as follows and name it “ex2.html”.
After that display it by the Internet Explorer.

<HTML>
<HEAD>
<TITLE>Exercise2</TITLE>
</HEAD> Press “ENTER”
<BODY>
Even you press "ENTER" to start text on the new line,
the web browser does not pay attention to "ENTER". So you need to use tags to start text on the
new line, like this.<BR>
And If you make a paragraph, you should use P tag. P skips a line before starting the text
again<BR>
<P>This is the first paragraph.</P>
<P ALIGN="CENTER">This is the second paragraph. This paragraph is aligned center.</P>
<P ALIGN="RIGHT">This is the third paragraph. This paragraph is aligned right.</P>
</BODY>
</HTML>

You can see ex2.html as the below figure.

Though you press ENTER, the sentence

doesn’t start on the new line.

The first paragraph

The second paragraph

The third paragraph is
is aligned center.
aligned right.

-7-
<Exercise3~Using HR Tag~>
Make an HTML document as follows and name it “ex3.html”.
After that display it by the Internet Explorer.

<HTML>
<HEAD>
<TITLE>Exercise3</TITLE>
</HEAD>
<BODY>
1.HR tag gives you a line across the page.
<HR>
2.You can change the width using WIDTH parameter and align line to left using ALIGN parameter.
<HR WIDTH="200" ALIGN="LEFT">
3.You can also change the line width with some percentage of the document width
<HR WIDTH="50%" ALIGN="CENTER">
<HR WIDTH="20%" ALIGN="RIGHT">
4.You can change the size using SIZE parameter.
<HR SIZE="5">
5.NOSHADE will turn off the beveling look
<HR WIDTH="200" SIZE="5" NOSHADE>
6.COLOR tag will change the color of the line.
<HR WIDTH="200" SIZE="5" COLOR="RED">
</BODY>
</HTML>

You can see ex3.html as the below figure.

-8-
<Exercise4>
Make an HTML document as you can see follows by the Internet Explorer and name it “ex4.html”.

Blue Line

2.6 Heading
Heading commands are used extensively in HTML documents to create headings.
There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest.

Although the heading tags do size text, their use solely for that purpose should be discouraged.
Headings are a good example of 'logical markup'. Note that some search engines give greater weight to
words in headings. It's generally recommended that heading tags increase by one for sub-headings, e.g.
h1, h2, h3, h3, h2, h2,... using h1 only once per page, matching the title.

Opening Tag / Closing Tag Description

<H*>…</H*> Creates heading text of varying sizes (from 1-6). To choose a
heading level, you replace the * with a number from 1 to 6. For
example, a heading level one tag would look like
<H1>heading Text level One</H1>
Headings create a block with space before and after and can
an take an optional alignment parameter of LEFT, RIGHT, or
CENTER

-9-
<Exercise5>
Make an HTML document as follows and name it “ex5.html”.
After that display it by the Internet Explorer.

<HTML>
<HEAD>
<TITLE>Exercise5</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">The Chapter One</H1>
<H2>1.Communication Between Browser and Server</H2>
<H3>1.1 The Client/Server System</H3>
The web is the client/server system.
<H2>2.Creating and Displaying a Formatted HTML Document</H2>
<H3>2.1 Hyper Text Markup Language</H3>
HTML (Hyper Text Markup Language) is a very simple language.
</BODY>
</HTML>
You can see ex5.html as the below figure.

- 10 -
2.7 Font Tags
To change font size, color, and face, you can use <FONT> tag.

Opening Tag / Closing Tag Description

<FONT SIZE=”*“>…</FONT> You may specify an absolute height (from 1 to 7) such as
<FONT SIZE = "4"> or you may specify a size relative to the
basefont using the increment notation such as <FONT SIZE =
"+2"> (from –6 to +6).
<FONT COLOR=”**”>…</FONT> Change a font color. To choose a color, you replace the **
with the name of the color (like RED or GREEN) or the
RGBcode*1.
<FONT FACE=”**”>…</FONT> Change a font face, To choose a face, you replace the ** with
the name of the face*2 (MS GOTHIC or ARIAL)

Notice that the end command for a <FONT SIZE="**"> tag only requires </FONT>. You can use SIZE,
COLOR and FACE tag in side a FONT tag. But even if you use all three inside a FONT tag, you still only
need one </FONT>. For example;

<FONT SIZE=”+2” COLOR=”GREEN” FACE=”ARIAL”> This is green text </FONT>

<FONT COLOR=”#0000FF”> This color is blue.</FONT>

*1 : Those 16 colors can be described by the name of the color. You can also use RGBcode which is in a
bracket beginning with #.

■ Black (#000000) ■ Red (#FF0000) ■ Maroon (#800000)

■ Gray (#808080) ■ Yellow (#FFFF00) ■ Olive (#808000)
■ Silver (#C0C0C0) ■ Lime (#00FF00) ■ Green (#008000)
□ White (#FFFFFF) ■ Aqua (#00FFFF) ■ Teal (#008080)
■ Blue (#0000FF) ■ Navy (#000080)
■ Fuchsia (#FF00FF) ■ Purple (#800080)

Those 216 colors should be described by the RGBcode.

- 11 -
*2 The font faces, which are frequently used are follows;

FONT FACE Description

COURIER NEW Hyper Text Markup Language
MS GOTHIC
VERDANA Hyper Text Markup Language
ARIAL Hyper Text Markup Language
CENTURY Hyper Text Markup Language
TIMES NEW ROMAN Hyper Text Markup Language

- 12 -
<Exercise6>
Make an HTML document as follows and name it “ex6.html”.
After that display it by the Internet Explorer.

<HTML>
<HEAD>
<TITLE>Exercise6</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7">This font size is 7.</FONT><BR>
<FONT SIZE="6">This font size is 6.</FONT><BR>
<FONT SIZE="5">This font size is 5.</FONT><BR>
<FONT SIZE="4">This font size is 4.</FONT><BR>
<FONT SIZE="3">This font size is 3.</FONT><BR>
<FONT SIZE="2">This font size is 2.</FONT><BR>
<FONT SIZE="1">This font size is 1.</FONT><BR>
<FONT SIZE="5" FACE="COURIER NEW"> This font is COURIER NEW.</FOTN><BR>
<FONT SIZE="5" FACE="VERDANA"> This font is VERDANA.</FOTN><BR>
<FONT SIZE="5" FACE="TIMES NEW ROMAN"> This font is TIMES NEW ROMAN.</FOTN><BR>
<FONT SIZE="7" FACE="MS GOTHIC" COLOR="RED">This font color is red.</FONT><BR>
<FONT SIZE="7" FACE="CENTURY" COLOR="BLUE">This font color is blue.</FONT><BR>
</BODY>
</HTML>

You can see ex6.html as the below figure.

- 13 -
<Exercise 7>
Make an HTML document as you can see follows by the Internet Explorer and name it “ex7.html”.

Colored Red
Colored Green

Colored
Blue

2.8 Text Style

You can modify text style using following tags.
Opening Tag / Closing Tag Description
<B>…</B> Makes the text bold between the tags
<I>…</I> Makes the text italicized
<U>…</U> Underline a bit of text.

<Exercise 8>
Make an HTML document as follows and name it “ex8.html”.
After that display it by the Internet Explorer.

<HTML>
<HEAD>
<TITLE>Exercise8</TITLE>
</HEAD>
<BODY>
<B>This is bold font</B><BR>
<I>Italicized font</I><BR>
<B><I>Bolded and italicized font</I></B><BR>
<U>Underlined Font</U>
</BODY>
</HTML>

- 14 -
2.9 Aligning Text
You can align text using following tags.

Opening Tag / Closing Tag Description

<DIV ALIGN=”RIGHT”>…</DIV> Aligns the text to right.
<DIV ALIGN=”LEFT”>…</DIV> Aligns the text to left.
<CENTER>…</CENTER> Centers the text between the tags

<Exercise 9>
Make an HTML document as follows and name it “ex9.html”.
After that display it by the Internet Explorer

<HTML>
<HEAD>
<TITLE>Exercise9</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=”RIGHT”> This is right.</DIV><BR>
<CENTER>This is center.</CENTER>
</BODY>
</HTML>

You can see ex9.html as the below figure.

- 15 -
2.10 Lists
There are several types of lists that are used commonly. These include:

1. Unordered lists like this one

2. Ordered lists in which bullets keep track of the hierarchy
3. Definition lists that look like glossary entries.

2.10.1 Unordered Lists

¾ Unordered lists allow you to create lists with various bullet styles. However, those bullets are
images, and thus, do not reflect the level of hierarchy except visually.
¾ The basic unordered list involves three tags.
¾ The <UL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </UL>
tag is used to end a list.
¾ For example, the following code could be used to create a list:

<Exercise 10>
Make an HTML document as follows and name it “ex10.html”.
After that display it by the Internet Explorer

<HTML>
<HEAD>
<TITLE>Exercise 10</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<UL>
<LI>Vegetables

<UL>
<LI>Broccoli
<LI>Carrot
<LI>Pea
</UL>

<LI>Meat

<UL>
<LI>Chicken
<LI>Beef
<LI>Pork
</UL>

</UL>
</BODY>
</HTML>

- 16 -
Modifying the Bullet

¾ You can modify the look of the bullets by using the TYPE attribute in the <UL> tag.
¾ The TYPE attribute supports the following VALUES: CIRCLE, DISC, or SQUARE
¾ Below is some code that demonstrates the usage of the TYPE attribute.

<Exercise 11>
Make an HTML document as follows and name it “ex11.html”.
After that display it by the Internet Explorer

<HTML>
<HEAD>
<TITLE>Exercise 11</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<UL TYPE = "SQUARE">
<LI>Vegetables
<UL TYPE = "DISC">
<LI>Broccoli
<LI>Carrot
<LI>Pea
</UL>
<LI>Meat
<UL>
<LI>Chicken
<LI>Beef
<LI>Pork
</UL>
</UL>
</BODY>
</HTML>

- 17 -
2.10.2 Ordered Lists

¾ Ordered lists allow you to create lists with various bullet styles which reflect the level of hierarchy.
¾ The basic ordered list involves three tags
¾ The <OL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </OL>
tag is used to end a list.
¾ For example, the following code could be used to create a list:

<Exercise 12>
Make an HTML document as follows and name it “ex12.html”.
After that display it by the Internet Explorer

<HTML>
<HEAD>
<TITLE>Exercise 12</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<OL>
<LI>Vegetables

<OL>
<LI>Broccoli
<LI>Carrot
<LI>Pea
</OL>

<LI>Meat

<OL>

<LI>Chicken
<LI>Beef
<LI>Pork
</OL>

</OL>
</BODY>
</HTML>

- 18 -
Modifying the Bullet
¾ You can modify the look of the bullets by using the TYPE or START attributes in the <OL> tag.
¾ The TYPE attribute supports the following values: A, a, I, i, or 1.
¾ The START attribute specifies at what point to start counting from.
¾ Below is some code that demonstrates the usage of the TYPE and START attributes.

<Exercise 13>
Make an HTML document as follows and name it “ex13.html”.
After that display it by the Internet Explorer

<HTML>
<HEAD>
<TITLE>Exercise 13</TITLE>
</HEAD>
<BODY>
<B>Food</B>

<OL TYPE = "A">

<LI>Vegetables

<OL TYPE = "a">

<LI>Broccoli
<LI>Carrot
<LI>Pea
</OL>

<LI>Meat

<OL TYPE = "a" START = "2">

<LI>Chicken
<LI>Beef
<LI>Pork
</OL>

</OL>
</BODY>
</HTML>

- 19 -
2.10.2 Definition Lists
¾ Definition lists allow you to create lists that are more like glossary entries than hierarchies.
¾ The basic definition list involves four tags
¾ The <DL> tag is used to open a definition list. The <DT> tag is used to signify a definition term, the
<DD> tag is used to signify a definition term description, and the </DL> tag is used to end the list.
¾ For example, the following code could be used to create a definition list:

<Exercise 14>
Make an HTML document as follows and name it “ex14.html”.
After that display it by the Internet Explorer

<HTML>
<HEAD>
<TITLE>Exercise14</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<DL>
<DT>Vegetables
<DD>Vegetables contain all sorts of essential vitamins.
<DT>Meat
<DD>Meat contains lots of proteins that your body needs
</DL>
</BODY>
</HTML>

- 20 -
2.11 Image
2.11.1 Image Formats
¾ .gif (Graphics Interchange Format)
This file format was developed by CompuServe for storing bitmap images on disk. GIF images
can have up to 65,536 x 65,536 pixels and 256 colors. GIF is a common format for images on
the World Wide Web. Browsers can handle this format quite easily.
¾ .jpeg or .jpg (Joint Photographic Experts Group)
This file format is for storing bitmap images, including lossy compression. For example, if the
picture is 10K bytes when displayed, it may be only 4K bytes when stored. JPEG file format is
often used for high-quality photographic images.
¾ .bmp (pronounced "bimp")
This is a "bitmap." A graphical image represented as an array of brightness values. You will
probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A
bitmap is an image that a computer produces and places for you.

2.11.2 Load Images

You will use the <IMG> tag to load images into your HTML document.
The format is <IMG SRC=”image.jpg”>.
¾ IMG stands for “image”. It announces to the browser that an image will go here on the page.
¾ SRC stands for “source”. This is an attribute and it’s telling the browser where to go to find the
image. It’s best for you to place the images you want to use in the same directory as the page. This
way you can call for the image by name alone.
¾ imgae.gif is the name of the image. There is a name of image file then a dot and then there is a
suffix (In this case “gif”)

¾ One final note about referencing images. It is very possible that someone will be viewing your page
in a non-graphical way. Perhaps they are blind. Perhaps they have turned off image loading to
speed up their browsing (since images take a long time to load up).
¾ Whatever the case, it is considered good form to always include a value for the ALT attribute in the
IMG tag. The ALT attribute specifies some text that will be displayed if the image cannot be and
looks like the following:

The IMG tag has several other attributes.

Attribute Description Example
ALIGN Aligns text around an image in a word wrap style. Can be <IMG SRC=”**.GIF”
TOP, MIDDLE, BOTTOM, RIGHT or LEFT. ALIGN=”LEFT”>
ALT Specifies text that should be displayed if the user cannot see <IMG SRC=”**.GIF”
images. ALT=”**”>
BORDER Specifies the pixel size of the border that surrounds the <IMG SRC=”**.GIF”
image. BORDER=”10”>
HEIGHT Specifies the height of the image in pixels. <IMG SRC=”**.GIF”
HEIGHT=”200”>
HSPACE Specifies the horizontal margin around the image in pixels. <IMG SRC=”**.GIF”
HSPACE=”5”>
SRC Specifies the source of the image that should be displayed. <IMG SRC=”**.GIF”>
VSPACE Specifies the vertical margin around the image in pixels. <IMG SRC=”**.GIF”
VSPACE=”5”>
WIDTH Specifies the width of the image in pixels. <IMG SRC=”**.GIF”
WIDTH=”150”>

- 21 -
<Exercise 15>
Save an image file, which you want to use on your page in the “HTML” folder.
Then make an HTML document as follows and name it “ex15.html”.

<HTML>
<HEAD>
<TITLE>Exercise15</TITLE>
</HEAD>
<BODY>
This is normal.<BR>
<IMG SRC="****.jpg"><BR>
Use ALT attribute.<BR>
<IMG SRC="****.jpg" ALT="***"><BR>
Change width.<BR>
<IMG SRC="****.jpg" WIDTH="200" ><BR>
Change height.<BR>
<IMG SRC="****.jpg" HEIGHT="100"><BR>
</BODY>
</HTML>

)Type the file name of the image instead of ****

For instance if the file name is FLOWER and the file type
is JPEG, input <IMG SRC=”FLOWER.JPG”>

- 22 -
 2.11.3 Image Placement and Alignment
The ALIGN attribute specifies where text will be placed relative to an image and how it will wrap around
an image. You can specify an alignment of TOP, BOTTOM, LEFT or RIGHT. The attribute is applied
generically as follows:

<IMG SRC = "x.gif" ALIGN = "LEFT">

Let's take a look at an example since this is the easiest way to really understand image alignment coding.
Consider the following HTML code:

Notice the use of the <BR CLEAR = "ALL"> tag. By using this tag, you let the web browser know that
your alignment instructions have terminated. This allows you to return to normal alignment.
<Exercise 16>
Then make an HTML document as follows and name it “ex16.html”.

<HTML>
<HEAD>
<TITLE>Exercise 16</TITLE>
</HEAD>
<BODY>
<B>No alignment</B><BR>
<IMG SRC = "*.jpg">
Here is some text for the non aligned image<BR>
<B>left alignment</B><BR>
<IMG SRC = "*.jpg" ALIGN = "LEFT">
Here is some text for the left aligned image
<BR CLEAR = "ALL">

<B>right alignment</B><BR>
<IMG SRC = "*.jpg" ALIGN = "RIGHT">
Here is some text for the right aligned image
<BR CLEAR = "ALL">

<B>Middle alignment</B><BR>
<IMG SRC = "*.jpg" ALIGN = "MIDDLE">
Here is some text for the middle aligned image
<BR CLEAR = "ALL">

<B>top alignment</B><BR>
<IMG SRC = "*.jpg" ALIGN = "TOP">
Here is some text for the top aligned image
<BR CLEAR = "ALL">

<B>bottom alignment</B><BR>
<IMG SRC = "*.jpg" ALIGN = "BOTTOM">
Here is some text for the bottom aligned image
</BODY>
</HTML>

- 23 -
2.11.4 Image Margin
Image margins are controlled with the HSPACE and VSPACE attributes. Simply put, the HSPACE and
VSPACE attributes define the margin around your image in pixels.
<Exercise 17>
Then make an HTML document as follows and name it “ex17.html”.

<HTML>
<HEAD>
<TITLE>Exercise 17</TITLE>
</HEAD>
<BODY>
Here is some text that should wrap around this image
very snuggly. <IMG SRC = "*.jpg" ALIGN = "LEFT">
That is because we are using the default margins and the default margins are not
very large.

<BR CLEAR = "ALL">

This image on the other hand should have a decent margin around it
<IMG SRC = "*.jpg" VSPACE = "15" HSPACE = "15" ALIGN = "LEFT">
so that the image will seem displaced a bit.
This usually looks nicer.
</BODY>
</HTML>

- 24 -
2.12. Table
Tables in HTML have two main uses, layout and data representation.
The reasons why use tables for layout are as follows:
• HTML by default has no easy way to position elements on page.
• Sometimes, information has to be structured in a tabular way. (Think of a newspaper)
• It is often helpful to split the page up into logical sections, and then build the table around that.
The other use for tables is to display data. Usually this is data such as results from an experiment, or
something similar, but it can also be results from a database.

2.12.1 Basic Table

A table is composed of several tags that are outlined in the table below.

OPENING/CLOSING TAG DESCRIPTION

<TABLE>…</TABLE> Specifies an HTML table. (By default the table will have no borders)
<TR>…</TR> Specifies a Table Row
<TH>…</TH> Specifies a Table Header Cell
<TD>…</TD> Specifies a Table Data Cell

<Exercise18>

<HTML>
<HEAD><TITLE>Exercise 18</TITLE></HEAD> <TR>
<BODY> <TD>PRG</TD>
<H1>COMPUTER ROOM TIMETABLE</H1> <TD>-</TD>
<TABLE BORDER=2> <TD>PRG</TD>
<TD>HTML</TD>
<TR> <TD>-</TD>
<TH>MON</TH> </TR>
<TH>TUE</TH>
<TH>WED</TH> <TR>
<TH>THU</TH> <TD>UP(B)</TD>
<TH>FRI</TH> <TD>PRG</TD>
</TR> <TD>UP(C)</TD>
<TD>-</TD>
<TR> <TD>-</TD>
<TD>UP(A)</TD> </TR>
<TD>PRG</TD>
<TD>UP(A)</TD> </TABLE>
<TD>-</TD> </BODY>
<TD>UP(B)</TD> </HTML>
</TR>

- 25 -
2.12.2 Table Attributes
The <TABLE> tag comes with several attributes to make it look nicer. The attributes are shown in the
table below.

ATTRIBUTE DESCRIPTION
ALIGN Specifies the position of the table with respect to the document. This works the
same as the ALIGN parameter for images. Valid values include LEFT, CENTER
and RIGHT.
BGCOLOR Colors the table background just as it would when used with the <BODY> tag.
BORDER Specifies the pixel width of the border that divides table cells and the table itself.
CELLPADDING Specifies the amount of space between the borders of a table and the actual data
in the cell.
CELLSPACING Specifies the amount of space inserted between table cells.
HEIGHT Specifies the height of the table in absolute pixels or as a percentage of available
space.
WIDTH Specifies the width of the table in absolute pixels or as a percentage of the
available space.

<Exercise19>
Modify the ex18.html using table attributes.
1. Change the table with border of 6
Change <TABLE BORDER=”2”> <TABLE BORDER=”6”>

- 26 -
2. The table with a border of 2 and a CELLPADDING of 10
<TABLE BORDER=”2” CELLPADDING=”10”>

3. Change the table with border of 2 and CELLSPACING of 10

<TABLE BORDER="2" CELLSPACING="10">

4. Change the table with a border of 2 and colored cells

<TABLE BORDER="2" BGCOLOR="Yellow">

5. Change the table with a width of 400

<TABLE BORDER="2" WIDTH="400">

- 27 -
2.12.3 Table Cell Attributes
Just as you can define attributes for the table globally, you can also set the attributes for individual table
cells. There are two tags that of define table cells. These are <TH> for table headers and <TD> for table
cells. These tags have a set of attributes that allow you to apply formatting to individual cells. The
attributes are defines in the following table.
ATTRIBUTE DESCRIPTION
ALIGN Specifies the alignment of the text within the cell. Valid values include LEFT,
CENTER and RIGHT.
BGCOLOR Specifies the background color for the table cell.
BORDER Specifies the pixel width of the border that divides table cells and the table itself.
COLSPAN Specifies the number of columns that a single cell should span. The default value of
colspan is 1. A value of zero means the cell will span all columns from the current
column to the last column.
HEIGHT Specifies the height of the cell in absolute pixels or as a percentage of the total
area. Note that all cells in that row will be sized to match this height.
NOWRAP Soecifies that the text within the cell should not be word-wrapped.
ROWSPAN Specifies the number of rows the cell should span. The default value of rowspan is
one. A value of zero means that the cell spans all row from the current row to the
last row.
VALIGN Specifies the vertical alignment of text within the cell. Valid values are TOP,
BOTTOM, or MIDDLE.
WIDTH Specifies the width of the cell in absolute pixels or as a percentage of the total area.
Note that all cells in that column will be sized to match this width.

<Exercise20>
1. Change the cell color by subjects.

<HTML>
<HEAD>
<TITLE>Exercise 18</TITLE>
<TR>
</HEAD>
<TD BGCOLOR="ORANGE">PRG</TD>
<BODY>
<TD>-</TD>
<H1>COMPUTER ROOM TIMETABLE</H1>
<TD BGCOLOR="ORANGE">PRG</TD>
<TABLE BORDER="2">
<TD BGCOLOR="GREEN">HTML</TD>
<TD>-</TD>
<TR>
</TR>
<TH>MON</TH>
<TH>TUE</TH>
<TR>
<TH>WED</TH>
<TD BGCOLOR="BLUE">UP(B)</TD>
<TH>THU</TH>
<TD BGCOLOR="ORANGE">PRG</TD>
<TH>FRI</TH>
<TD BGCOLOR="BLUE">UP(C)</TD>
</TR>
<TD>-</TD>
<TD>-</TD>
<TR>
</TR>
<TD BGCOLOR="BLUE">UP(A)</TD>
<TD BGCOLOR="ORANGE">PRG</TD>
</TABLE>
<TD BGCOLOR="BLUE">UP(A)</TD>
</BODY>
<TD>-</TD>
</HTML>
<TD BGCOLOR="BLUE">UP(B)</TD>
</TR>

- 28 -
2. Use colspan to merge cells.

<HTML>
<HEAD>
<TITLE>Exercise 20-2</TITLE>
</HEAD>
<BODY>
<H1>COLSPAN</H1>
<TABLE BORDER = "1">

<TR>
<TH COLSPAN = "3">Colspan of 3</TH>
<TH>Normal</TH>
</TR>

<TR>
<TD COLSPAN = "2">Colspan of 2</TD>
<TD COLSPAN = "2">Colspan of 2</TD>
</TR>

<TR>
<TD ROWSPAN = "2">Rowspan of 2</TD>
<TD>Normal</TD>
<TD>Normal</TD>
<TD>Normal</TD>
</TR>

<TR>
<TD>Normal</TD>
<TD>Normal</TD>
<TD>Normal/TD>
</TR>

</TABLE></BODY>
</HTML>

- 29 -
2.13 LINK
A link is a bit of text or image that the user may click on in order to be transported somewhere else on the
web. Links (or more accurately Hyperlinks) form a symbolic link between:
‹ Two (or more) different documents or addresses (external links)
‹ Two (or more) places within a document (internal links)

What is a URL
Before we get into links, it would be wise to make sure we understand what a URL is, because URLs are
basic to creating links. A URL (Universal Resource Locator) is the most basic information about where a
web page is located on the web. It includes information about which web server the page is stored on, in
which directory it is located in, its name and the protocol we will use to fetch it.

Thus a URL will look like the following:

http://www.eeye.com.sg/Tutorials/Web_design/index.html

In this case, we will see use the HTTP protocol to contact the server named “WWW.eeye.com.sg”. We
will tell that server that we are looking for a document called “index.html” that is contained in the directory
“Tutorials/Web_design”.

Linking to another Document

To create a link, you will use the “anchor” tag that uses the standard opening and closing format such as
<A>…</A>. You will always include the HREF attribute that defines the location that the anchor points to.
You will also include some text or image that will be “clickable”. Thus, to create a link to The Electric Eye
Homepage, we use the following anchor tag

<A HREF=”http://www.eeye.com.sg”>Electric Eye</A>

Internal Links
To create a link that points to a location inside of a document, we will also use the anchor tag with an
HREF attribute. However, rather than setting the HREF value to a simple URL, we will define a location
within a page to link to.
Suppose html files (1.html and 2.html) are stored in a same folder (HTML) and another html file
(ex1.html) is stored in a different folder (image). Image folder is under HTML folder.
To create a link from “1.html” to “2.html”, we use the tag,
<A HREF=”2.html”>Click here</A>
We do not need to write the folder name, because “2.html” file is stored in the same folder as “1.html”.
To create a link from “1.html” to “ex1.html”, we use the tag,
<A HREF=”/image/ex1.html”>Click here</A>
The name of the folder, image, is needed, because “ex1.html” is stored in the different folder from HTML
folder.

<A HREF=”2.html”>Click here</A>

<A HREF=”/image/ex1.html”>Click here</A>

- 30 -
<Exercise 21>
Create a top page and create links to your exercise files.

<HTML>
<HEAD>
<TITLE>Exercise21</TITLE>
</HEAD>
<BODY>
<H1>HTML EXERCISES</H1>
<A HREF="ex1.html">Exercise1</A><BR>
<A HREF="ex2.html">Exercise2</A><BR>
<A HREF="ex3.html">Exercise3</A><BR>
<A HREF="ex4.html">Exercise4</A><BR>
<A HREF="ex5.html">Exercise5</A><BR>
<A HREF="ex6.html">Exercise6</A><BR>
<A HREF="ex7.html">Exercise7</A><BR>
</BODY>
</HTML>

- 31 -