In Order To Format An HTML Document

In order to format an HTML document, we use HTML tags.
The HTML tag is case

insensitive, <HTML> and <html> are the same. Most tags must start with an
open tag and an end with a closing tag. For example: <H1>Heading 1</H1>.
However, some of the tags such as <IMG> do not required a closing tag.
Here is the summary of some basic tags:

Tags Desciption
Tags which create the HTML document.
<html></html>
Tags which denote the first part of the HTML document.
<head></head>
Tags which define the title of the web page.
<title></title>
Tags which define the main contents of the HTML document.
<body></body>
Tags that indicate the headings. There are 6 headings, from h1 to
<h1></h1>
h6.
<b></b>
Tags that display bold text.
<i></i>
Tags that display italic text.
<u></u>
Tags that underline the text.
<br>
Tag that indicate line break. No closing tag is required here
Now, open the notepad in windows and type the following

codes:
[You might also copy the codes and paste them into your
notepad]

<html>
<head>
<title>My sample HTML document</title>
</head>
<body>
<h1><u>My sample HTML document</u></h1>
<h1>This is heading 1</h1>
<b> Bold text</b>
<br>
<i>Italic text</i>
<br>
<u>Underlined text</u>
<b><i>Bold and italic text</i></b>
<b><i><u>Bold, italic and underlined text</u></i></b>
<h1><i>Italic heading</i></h1>
<h3><u>Underlined heading</u></h3>
</body>
</html>
To save the file, click on the file menu and select Save As, change file type to All
files, save the file as sample1.html in My document. (You might use different
file name and folder)
To view the web page, start Netscape communicator or IE

and open the above file
Tags Description
<h1 Tags which aligns the heading to the left, right and
align=position</h1> the centre
<strong></strong> Tags which strongly emphasize the bold format.
<em></em> Tags which gives more emphasis to the italic text.
<pre></pre> Tags which preserves the original text.
<sub></sub> Tags which format text as subscript.
<sup></sup> Tags which format text as superscript.
Tag which insert a horizontal ruler. Closing tag is not
<hr>
required here.
<hr width=n%> Tag which sets the width of the horizontal ruler.
<hr size=m> Tag which sets the height of the horizontal ruler.
<hr nonshade> Tag which creates the ruler without the shadow.
<p></p> Tags which define the paragraph.
<p Tags which align the paragraph to the left, right or
align=position></p> centre.
<blink></blink> Tags which create a blinking text.
Example:
Now, copy the following paragraph and paste it into your
notepad or any suitable text editor.
Save the file as bean.html.

<html>
<head>
<title>Mr Bean</title>
</head>
<body>
<h1 align=center><u>All about Mr. Bean</u></h1>
<hr>
<h2 align=right>Date: Nov 30,2000</h2>
<hr width=50% size=10>
<p> <strong>Mr. Bean</strong>is a 50 years old boy, currently studying at
<em>Cambridge</em>. His lecturer is <b>Mr. Mike Tyson</b>. There are 33
students in his class.</p>
<p align=center> Here are some facts about Bean</p>
<pre>
Date of Birth :01011900
Height : 100 cm
Weight : 100 kg
Marital Status : Single
Address : 1, Wall street, London,UK.
</pre>
<hr nonshade>
<P align=center> If you wish to match make for Mr. Bean, please contact him through
the following phone number:<blink>911</blink></p>
<hr>
</body>
</html>
Lesson 4: Types of List

In HTML, If you wish to list out a number of

items, you can use the following types of
listing:
4.1 The Unordered List

Also called unnumbered list or bulleted list. The HTML tags are shown as
follow
<UL>
<LI>item 1
<LI>item 2
<LI>item 3
</UL>
*Note that <LI> tag does not require a closing tag.
¡¡
Example 4.1:

<HTML
<HEAD><TITLE>Unordered List</TITLE></HEAD>
<BODY>
<H2> Fruits</H2>
<HR>
<UL>
<LI> Apple
<LI> Grape
<LI> Orange
<LI> Pear
<LI> Pineapple
<LI> Water Melon
</UL>
</BODY>
</HTML>
Copy and paste the above codes to your notepad and save the file as
uorlist.html.
Click here to view the sample output.
4.2 The Ordered List

Also known as the Numbered List. It is very similar in structure to the
unordered list, except each list item has a number in front of it, instead of a
bullet. Also, the opening tag for the list is <OL> instead of <UL>, and the
closing tag is </OL> instead of </UL>. Modify the code in section 4.1 by
changing the tags <UL> to <OL> and </UL> to </UL> and change the title to
ordered list. Save the file as orlist.html.
4.3 The Nested List
This nested list contains lists within lists.
Example 4.2:

<HTML>
<HEAD><TITLE>Nested List</TITLE></HEAD>
<BODY>
<H1 align=center><U> Internet Club</U></H1>
<OL>
<LI>Advisers
<UL>
<LI> Mr. Liew
<LI> Mrs James
<LI>Miss Irene
</UL>
<LI>Committee Members
<UL>
<LI>Nick
<LI>George
<LI>Francis
</UL>
</OL>
<BODY>
</HTML>
¡¡
Copy the code above and paste them to your notepad. Save the file as
nested.html
Click here to view the output.

Adding colors to your web pages could achieve certain visual effect and make
them more attractive. However, you must select colors carefully and do not
overuse them. You can add color to your web page background and the text as
well.
5.1: Adding Color to the Background of the Web Page
You can specify the color of the page's background within the body tags using
the following code:
<body bgcolor=color>
The color attribute can be specified using normal words like red, yellow, blue
etc. or by hexadecimal codes. Hexadecimal is a base 16 number system.
Hexadecimal uses A for decimal 10, B for decimal 11, C for decimal 12, D for
decimal 13, E for decimal 14 and F for decimal 15. Every color code in HTML is
made up of 6 hexadecimal digits, from 000000 to FFFFFF. The hexadecimal
codes might seem very complex, however, they actually make up of
combination of three primary colors, i.e. red, green and blue(RGB). The last two
digits specify the amount of red color, the middle two digits specify the amount
of green color and the first two digits specify the amount of blue color.
For example:
0000FF=maximum red 00FF00=maximum green FF0000=maximum

blue.
For other combinations, click here for the RGB color codes.
Now, try out the following page:

<html>
<head>
<title>Background Color</title>
</head>
<body bgcolor=red>
The background color of this web page is red. You can change the background color
anytime by changing the color attribute specified by the bgcolor code. Try using the
hexadecimal codes like bgcolor=FF00CC.
</body>
</html>
Copy and paste the above codes to your notepad and save as bgcolor.html.

5.2 Adding color to the text.
5.2.1 Specifying the Color of the Normal Text
You can specify the color of the normal text (the default text is black) using
the following code within the body tags.
<body bgcolor=blue text=white>
You may use normal words for the color attribute or use hexadecimal notation.
Now, try the following

<html>
<head>
<title>Text color</title>
</head>
<body bgcolor=blue text=FFFFCC>
The text color can be formatted using the text=color code. It is important that the color
of the text is not the same as the background color, otherwise you won't be able to see
the words.
</body>
</html>
Copy and paste the above codes to your notepad and save the file as
txtcolor.html
Click here to see the sample output.
5.2.2 Formatting Individual Font Color with the Font Tag
If you wish to add color to an individual character, word, sentence or

paragraph, you may use the font tag. Font tag can also control font size and
type of fonts.
The codes are as follows:
<font color=red>Red color text</font>

<font size=1 color=blue>Blue text with font size 1</font>
<font type="Times New Roman">Text in Time News Roman</font>
Now, copy the following codes and paste
them into your notepad and save the file as
font.html.

<html>
<head>
<title>Manipulaton of Fonts</title>
</head>
<body bgcolor=CCFFFF text=blue>
<font color=red size=4>Manipulation of </font><font color=brown
size=4>Fonts</font>
<hr>
<p>
<font color=green type="Arial" size=2>You can manipulate font color , size and font
type using
the font tags</font>.<font color=AA0000 size=2 type="Times New Roman">It can be
done fairly
easily by anybody. Most important you must try it out yourself and dare to experiment
with
anything.</font>
</p>
<hr>
This part of the text will appear blue.
</body>
</html>
¡¡
Click here for the sample ourput.
The tag for inserting graphics in a web page is
<img src="image filename">
Web page normally support two types of image file, image.gif and
image.jpg.There are countless graphics files that you might copy from the
World Wide Web and then insert them into your web page. You could also
create your very own own graphics using scanner and graphics tools like PC
Paint Brush, Corel Draw, Adobe Photoshop and etc.
You could control the alignment, size of the image using the align, width and
height parameter respectively as follows:
<img src="image.gif" align=position width=100 height=100 alt=image label>
* The alt parameter is to show the label of the image.
Graphics could also be used as background for your web pages using the tag as
follows:
<body background="image.gif"></body>
Now please type the text below and save the file as
graphic.html

<html>
<head>
<title>Inserting Graphics</title>
</head>
<body background=back.gif>
<center><font size=6 color=red>Inserting Graphics in Web Page</font></center>
<hr>
<img src=image1.gif>
<br>
<img src=image2.gif width=100 height=100 >
<br>
<img src=image3.jpg width=30% height=50% align=right alt="image3">
</body>
</html>
Click on the image below and save them as your local files. They must be in the
same folder as your graphic.html file.
back.gif image1.gif image2.gif image3.jpg
Links allow us to browse to another section of a web page, to view an in-line

image, another page within a web site, or another web site in the Internet.
7.1 Text Link
The tags are
<a href="filename">text</a> for linking to a local file.

<a href="URL">Web site</a> for linking to another web site.
7.2 Graphical Link
The tags are just the same, but use an image in the place of text.
<a href="filename"><img src="image.jpg"></a>

<a href="URL"><img src="image.jpg"></a>
7.3 Email Link
This link allows users to email the person whose email address is specified in
the link.
The tag is
<a href="mailto:lliew@vbtutor.net">Email Me</a>
Now, copy and paste the codes below into

your notepad and save the file as link.html.

<html>
<head>
<title>Links
</title>
</head>
<h1>This page contains various types of link</h1>
<hr>
<body background="back.gif" link=blue alink=green vlink=red>
<a href="image1.gif">Click to view image</a>
<br>
<a href="graphic.html">Click to view this web page</a>
<br>
<a href="http://www.yahoo.com">Yahoo!, the search engine</a>
<br>
<a href="http://www.vbtutor.net">Visual Basic Tutorial</a>
<br>
<a href="image3.jpg"><img src="image2.gif"><a>
<a>
<a href="http://www.geocities.com/vkliew"><img
src="image1.gif"></a>
<hr>
<center>
<a href="mailto:liew

@vbtutor.net">Email Me</a>
</body>
</html>
Note: link=blue specified within the <body> tag means the link text will appear
blue and vlink=red means the link text will appear red after a user has clicked
on it(vlink actually means visited link). This is yet another parameter called
alink which means active link that show the colour of the link text when a user
is clicking on it.
¡¡
Lesson 8: More on Links

8.1 Linking Within Document
Linking within a document enables readers to go to a particular section of the document

easily, instead of having to scroll up and down all the time.
<A HREF= "#section name"></A> Tag that create link to the targeted location
from elsewhere in the document.
<A NAME= "section name"></A> Tag that creates a target location within a document.

8.2 Example

<HTML>
<HEAD><Title> MSC</Title></HEAD>
<BODY Bgcolor= blue link=yellow vlink=red text =white>
<A NAME= "main"><H1 align=center>Multimedia Super Corridor(MSC)</H1>
<UL>
<P>The MSC is a Mega project undertaken by the <STRONG>Malaysian
government</STRONG> to transform Malaysia into advance nation in the field of IT.
</P>
<H2>MSC includes the following projects:</H2>
<UL>
<LI><H3><A HREF= "#eg">Electronic Government</H3></A>
<LI><H3><A HREF= "#rd">Research and Development</H3></A>
<LI><H3><A HREF= "#tm">Telemedicine</H3></A>
<LI><H3><A HREF= "#ss">Smart School</H3></A>
<LI><H3><A HREF= "#mc">Multipurpose Card</H3></A>
<LI><H3><A HREF= "#it">IT infrastructure</H3></A>
<LI><H3><A HREF= "#bm">Borderless Marketing</H3></A>
<UL>
<DL>
<DT><A NAME= "eg"><B> Electronic Government</B>
<DD>A multimedia networked paperless administration linking government agencies
within
Putrajaya with government centres around the country to facilitate a collaborative
government and
efficient service to business and citizens. It will offers efficient, high quality
administrative on-line
services to citizens and businesses.
<A HREF= "#main">Back to the top</A>
<DT><A NAME= "rd"><B> Research and Development</B>
<DD>
<DT><A NAME= "tm"><B> Telemedicine</B>
<DD>To provide top class medical service especially for the rural people through
advance video
conferencing and other network techniques
<DT><A NAME= "ss"><B> Smart School </B>
<DD>To develop smart learning environment for all Malaysian students
<DT><A NAME= "mc"><B>Multipurpose Card </B>
<DD>Smart Card for all Malaysians supporting key government, financial, health care
and affiliated
applications.
<DT><A NAME= "it"><B> IT infrastructure </B>
<DD>Open multimedia for network for easy interconnect.
<DT><A NAME= "bm"><B> Borderless Marketing </B>
<DD>To make Malaysia a Regional Hub for companies to create and deliver marketing
messages,
customer services and information products to their multicultural and multinational
customers using
multimedia technology.
</DL>
</BODY></HTML>
Click here to view the sample output
Basic Table Tags

A table can be created using the following tags
<TABLE></TABLE> Tags that create a table
<TR><TR> Tags that set each row in a table
<TD></TD> Tags that define each cell in a row
Example:

<HTML>
<HEAD><TITLE>TABLE</TITLE></HEAD>
<H1 ALIGN=center>TABLE</H1>
<HR>
<BODY bgcolor=blue text=white>
<TABLE>
<TR>
<TD>Apple</TD>
<TD>Fruit</TD>
<TR>
<TD>Cabbage</TD>
<TD>Vegetable</TD>
</TR>
<TR>
<TD>Whale</TD>
<TD>Mammal
</TD>
</TR>
<TR>
<TD>Horse</TD>
<TD>Mammal</TD>
</TR>
<TR>
<TD>Shark</TD>
<TD>Fish</TD>
</TR>
<TR>
<TD>Mars</TD>
<TD>Planet</TD>
</TR>
<TR>
<TD>Sun</TD>
<TD>Star</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Copy the codes above and paste them into your notepad. Save the file as table1.html.
You can add other parameters to the table tags to control the outlook of the
table.
10.1 Table border
 <table border=0> The table has no border

 <table border=n> The table has a border with size=n
10.2 Table colours
 <table bgcolor=blue> The table has blue background.

 <tr bgcolor=green> The row has green background.
 <td bgcolor=yellow> The cell has yellow background.
 <table bordercolor=magenta> The table a magenta border
 <tr bordercolor=pink> The row has pink border.
 <td bordercolor=brown> The cell has brown border.
* you could use hexadecimal code for the color attributes.
10.3 Table Height and Width
The parameters are
<table width="40%" height="20%">
10.4 Spacing in a Table
 <table cellspadding=2> The amount of space between a cell's border

and its contents is 2
 <table cellspacing=1> The amount of space between the cells is 1.
10.5 Text alignment in a Table
 <tr align=position> Aligns the text in a row to the left, center or

right
 <tr valign=position> Aligns the text in a row vertically (top,
bottom or middle)
 <td align=position> Aligns the text in a cell to the left, center or
right.
 <td valign=position> Aligns the text in a cell vertically(top, bottom
or middle)
10.6 Rowspan and Colspan
 <td rowspan=3> The cell spans over 3 rows

 < td colspan-2> The cell spans over 2 columns.
10.7 Table Caption
This tag set the caption of the table.
<caption align=top>Caption</caption>
Example :

<html>
<head>
<title>Advance Table Tags</title>
<body bgcolor=FFDDEE>
<table border=5 cellspacing=0 cellspadding=2 bgcolor=blue width=70% height=90%>
<caption align=top><h2>This is a colourful table</h2></caption>
<tr bgcolor=cyan bordercolor=green >
<td></td>
<td align=center valign=middle>Monday</td>
<td align=right valign=middle>Tuesday</td>
<td align=center valign=middle>Wednesday</td>
<td align=right valign=middle>Thursday</td>
</tr>
<tr>
<td rowspan=3 bgcolor=pink>Subject</td>
<td bgcolor=CC33FF>Management</td>
</tr>
<tr>
<td bgcolor=CC88BB>Finance</td>
<td bgcolor=BBFFEE>Business Law</td>
</tr>
<tr>
<td colspan=2></td>
<td bgcolor=9966CC>Economics</td>
<td bgcolor=88FFAA>HRM</td>
</tr>
</table>
</body>
</html>

¡¡
Copy the codes above and paste them into your norepad. Save as table2.html
Click here for the sample output.

In Order To Format An HTML Document

Uploaded by

Copyright:

Available Formats

You might also like

In Order To Format An HTML Document

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

In Order To Format An HTML Document

Uploaded by

Copyright:

Available Formats

In order to format an HTML document, we use HTML tags.

The HTML tag is case

Here is the summary of some basic tags:

Now, open the notepad in windows and type the following

To view the web page, start Netscape communicator or IE

Lesson 4: Types of List

In HTML, If you wish to list out a number of

4.1 The Unordered List

*Note that <LI> tag does not require a closing tag.

Click here to view the sample output.

4.2 The Ordered List

Click here to view the sample output.

4.3 The Nested List

This nested list contains lists within lists.

Click here to view the output.

5.1: Adding Color to the Background of the Web Page

0000FF=maximum red 00FF00=maximum green FF0000=maximum

Now, try out the following page:

5.2 Adding color to the text.

5.2.1 Specifying the Color of the Normal Text

<body bgcolor=blue text=white>

Now, try the following

5.2.2 Formatting Individual Font Color with the Font Tag

If you wish to add color to an individual character, word, sentence or

The codes are as follows:

<font color=red>Red color text</font>

Click here for the sample ourput.

The tag for inserting graphics in a web page is

<img src="image filename">

<img src="image.gif" align=position width=100 height=100 alt=image label>

* The alt parameter is to show the label of the image.

back.gif image1.gif image2.gif image3.jpg

Links allow us to browse to another section of a web page, to view an in-line

7.1 Text Link

The tags are

<a href="filename">text</a> for linking to a local file.

<a href="filename"><img src="image.jpg"></a>

7.3 Email Link

<a href="mailto:lliew@vbtutor.net">Email Me</a>

Now, copy and paste the codes below into

Lesson 8: More on Links

8.1 Linking Within Document

Linking within a document enables readers to go to a particular section of the document

from elsewhere in the document.

Click here to view the sample output

Basic Table Tags

<TABLE></TABLE> Tags that create a table

<TR><TR> Tags that set each row in a table

<TD></TD> Tags that define each cell in a row

Click here to view the sample output.

10.1 Table border

 <table border=0> The table has no border

10.2 Table colours

 <table bgcolor=blue> The table has blue background.

* you could use hexadecimal code for the color attributes.

10.3 Table Height and Width

The parameters are