Chapter 01

Chapter 1-HTML Fundamentals
HTML Fundamentals
1
At the end of this chapter, you will get a thorough knowledge of the basic tags used in
HTML along with a fair idea of lists.
SCOPE
HTML Fundamentals
1.1 What Is Html?
1.1.1 The Birth Of Html
1.1.2 Significance Of Html In Today’s World
1.2 Basic HTML Tools
1.2.1 HTML Editors
1.2.2 Web Browsers
1.3 HTML Terminology
1.3.1 Tag
1.3.2 Attribute
1.3.3 Document Type Definition (DTD)
1.3.4 Element
1.4 Creating An Html Document
1.4.1 Getting Started
1.4.2 How An Html Document Is Organised
1.4.3 Basic HTML Tags: <!DOCTYPE>, <HTML>, <HEAD>, <TITLE>,
1.4.3.1 Basic Tags
1.4.3.2 Character Formatting Tags
1.4.3.2.1 Underlining Text And Printing It In Bold And Italics
1.4.3.2.2 Using The <BR> Tag
1.4.3.2.3 Some More Text Formatting Tags
1.4.3.3 Paragraph Formatting Tags
1.4.3.3.1 Using The <P> Tag
1.4.3.3.2 Headings And Alignment
1.4.3.3.3 <ADDRESS>, <BLOCKQUOTE> and <PRE> tags
1.4.3.4 Using Horizontal Lines
1.4.3.5 Specifying Fonts And Font Sizes
1.4.4 Comment Tags
1.4.4.1.1 Inserting Comments
1.4.5 Representing Special Characters
1
Copyright Tata Infotech Ltd: Copying of this document in part or full is not permitted without express authority
1.5 Hyperlinks And Anchors

1.5.1 What Is A Hyperlink?
1.5.2 The ANCHOR Element
1.5.2.1 Named Anchors
1.5.2.2 Adding Colours
1.5.3 Inserting Email Links
1.6 Working With Lists
1.6.1 Ordered List
1.6.1.1 Inserting Text In An Ordered List
1.6.1.2 The start Attribute
1.6.1.3 Nested List
1.6.2 Unordered List
1.6.3 Definition List
2
1.1 What Is Html?

The only constant thing in the world is change. Man has always craved for knowledge
from the time he has set foot on earth. This insatiable thirst has always guided him to
look for ways to facilitate the exchange of information culminating into the latest
buzzword for today – INTERNET.
The Internet, a network of networks, provides a lot of services related to exchange of

information, like FTP, e-mail and the World Wide Web. The World Wide Web is fast
emerging as the prime resource for exchange of information across the globe. And this is
where HTML (or HyperText Markup Language) has been able to make its contribution.
For WWW documents are created using the powerful, yet easy to learn HyperText
Markup Language.
1.1.1 The Birth Of Html
The word hypertext was first coined by a man by the name of Ted Nelson in the 1960s.
He also proposed the idea of non-sequential writing, saying that writing had always been
sequential as pages were sequential and there was no other option. He proposed using the
computer to take our vision into the hyperspace of thought. He called this domain of
immediately available text hyperworld and the storage system hyperfile.
The credit for developing the World Wide Web, as we know it today, however goes to an
English scientist Tim Berners-Lee. It was he who proposed the concept of distributed
hypertext, where people kept their data on the computer and the computers were linked to
a network so that the available data could be shared publicly.
Berners-Lee, when faced with many options to implement his concept, opted for
Standard Generalized Markup Language (SGML). This decision led to the independence
of the Web from any particular operating system or language. SGML being platform
independent required only a computer and an appropriate software to parse (analyse) the
data.
It was in 1990 that Berners-Lee and his colleagues used SGML to describe the rules for
hypertext markup language in a document type definition (DTD) to build Level 0 HTML.
Since then, many new versions of HTML has been developed – Level 1 HTML was
released on the Internet in 1992 followed by Level 2 HTML, HTML 3, HTML 3.2 and
finally to the latest version of HTML 4.
1.1.2 Significance Of Html In Today’s World
HTML’s popularity is mainly due to hypertext technology – the technology that enables
one to search for information non-sequentially instead of linearly. Nowadays, with the
3
click of a mouse one can send and receive e-mails, access huge repositories of
information and resort to online filling and submission of forms.
Using HTML one can create pages and sites that can be published on the Internet or a
corporate intranet. These pages or sites may contain tables, images, forms, frames just to
name a few. One can also include an image map, which is an image with multiple links to
different sites or pages. If one moves beyond pFigure HTML, one can also include
Multimedia, add JavaScript and bring pages to life with dynamic HTML. Other
applications for HTML include creation of online help files and developing kiosk
applications, which are stand-alone computers one sees in malls and museums.
1.2 Basic HTML Tools

The two basic HTML tools are:
¾ An HTML editor – It is the program that one uses to create and save HTML
documents. E.g. Notepad
¾ A Web Browser – It is the program that one uses to view and test the HTML
documents. E.g. Microsoft Internet Explorer
1.2.1 HTML Editors
HTML Editors fall into two general categories:
¾ Text-based or code-based which allows one to see the HTML code as one is
creating a document. Notepad for all Windows versions is a good example of this
category.
¾ WYSIWYG (What You See Is What You Get), which shows the results of code,
similar to the way it will appear on the browser. E.g. Netscape Composer.
1.2.2 Web Browsers
For surfing the Web, one needs a browser to view HTML documents. The most common
browsers are Netscape Navigator and Microsoft Internet Explorer. Browsers maybe text-
only browsers or graphical browsers. The former, as the name suggests, can display only
text whereas the latter can display elements other than text.
1.3 HTML Terminology

Before we take a peep into the structure of an HTML document, it is important to be
familiar with some of the most common terms used throughout the book.
4
1.3.1 Tag
A tag talks to the browser, or better yet gives it instructions. It is a piece of text that is
used to identify an element so that the browser realizes how to display its contents. Tags
are always written within angle brackets. For example, <HTML> tag tells the browser,
this is the start of an HTML document and </HTML> says, this is the end of an HTML
document. Most elements have an opening and a closing tag whereas some of tags may
not have closing tags.
1.3.2 Attribute
A <TAG> tells the browser to do something, whereas an attribute goes inside the <TAG>
and tells the browser how to do it. Attribute is the property of an HTML tag that is
specified in the opening angle brackets. It supplies additional information like color, size,
name, font-style etc. to the browser about a tag. Some of the most common attributes are
src, height, width and color.
1.3.3 Document Type Definition (DTD)
It is a collection of rules written in Standard Generalized Markup Language (SGML)

that defines the syntax and structure of a specific type of document. HTML is defined in
terms of its DTDs. All the details of HTML’s tags, entities and the related document
structure are defined in the DTDs. With HTML 4 there are now 3 DTDs.
1.3.4 Element
Element is the component of a document’s structure such as a title, a paragraph or a list.

It can include an opening and a closing tag and the contents within it.
1.4 Creating An Html Document

A markup language is used to describe the relation each piece of document has with
others. It indicates that one piece of text is a heading, the section following it is an
address and the last section is a paragraph. Within the paragraph one might have text
written in italics, or in bold and other similar pieces of text. We thus get a document
where we can visualize the purpose of each piece of text instead of the intended
appearance.
The Hypertext Markup Language similar to other markup languages is therefore

concerned more with structure of a document rather than the document’s appearance
unlike publishing programs like Microsoft Word where authors can directly select type
faces, borders, margins and colours to determine how the final page will look.
5
1.4.1 Getting Started
Before we proceed on the different tags and attributes, lets first discuss some of the basic
steps required to develop an HTML document.
¾ Open Notepad and write the HTML code in a new file. The following Figure
shows an HTML document written in Notepad.
1.1a
HTML document written in Notepad
¾ Now you need to save this document with some file name. Up till now it is just an
untitled plain text document. To save it as an HTML document, you need to give
this file an html extension. So click File and then click Save as to save the above
file as start.html (just for example).
1.1b
Saving the HTML document
6
In the above Figure, the file is saved under the folder html-examples. You can also create
your own folder by clicking Æ . Name it whatever you want. Then double click on it
to open it up. Now save the file with some name and html extension. The final window
will be as below.
1.1c
Saving the HTML document
Note that the Save as type: field is taken as “All files”. Now hit return to save the file.
¾ To see the page in Internet Explorer, open Internet Explorer and give the path of
the file created above. Now press Enter and you will see the page as below:
1.1d
Seeing the HTML document in browser (IE)
7
1.4.2 How An Html Document Is Organized
A head and a body are the two main parts that comprise an HTML document. Even if the
two parts are not mentioned explicitly, HTML assumes their existence. The head element
includes information like a title for the document, keywords, link information and other
information that is not absolutely essential to be supplied.
The only mandatory information to be given in the head is a title. The body is what the
end user sees when the document is rendered on the browser. It includes text and objects
along with tags.
1.4.3 Basic HTML Tags: <!DOCTYPE>, <HTML>, <HEAD>, <TITLE>,

<BODY>
Ideally, <!DOCTYPE> should be the first tag in every HTML document. This tag tells
the browser the version of HTML it is dealing with. The main part of the <!DOCTYPE>
tag is the DTD element which tells browsers that the document compiles with a particular
version of HTML. The syntax of the tag is:
<!DOCTYPE HTML string>
where string specifies the version of HTML used in the document.
Note that HTML is not case-sensitive. So <!DOCTYPE>, <!Ddoctype>, <!DoCtype> etc

are all same.
As discussed earlier, the DTD contains a collection of rules written in SGML. All the
standards relating to the tags, attributes and other featFigures are given in these DTDs. As
newer versions of HTML are released in the market these standards get changed.
Changing the <!DOCTYPE> tag to include these latest standards for every new release of
HTML is not mandatory. In fact, if someone has written a document conforming to one
version of HTML, say 3.2 standard, then it’ll conform to that standard regardless of more
recent HTML versions. So one need not rewrite the documents to revise the
<!DOCTYPE> tag. A <!DOCTYPE> tag may look like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”>
In reality using the <!DOCTYPE> tag is very difficult. Most browsers ignore this tag
while parsing the code. In fact, this tag is optional though it maybe a good practice to
provide this tag in every HTML document.
¾ The <HTML> tag
This tag comes just after the <!DOCTYPE> tag and identifies the document as an HTML
document. This tag is optional and even if it’s not explicitly included, most browsers
8
assume its existence. However it is a good practice to include this tag as some browsers
may be confused while handling a document without this tag and display the page
erroneously or not display at all. All other tags are included within <HTML> and
</HTML> tags.
¾ The <HEAD> tag
The <HEAD> tag contains information about the document, which includes its title,
scripts and other descriptions related to the document. The portion enclosed between the
<HEAD> and </HEAD> tags is called the header. The header of a document is where
global settings are defined. Using HTTP protocol one can also download information
given in the header only. This technique is used mainly by search engines
to find basic information about a page like its title and keywords without going through
the entire text and wasting time.
¾ The <TITLE> tag
The title of the page is given between the tags <TITLE> and </TITLE>. Only one title is
allowed per page.
¾ The <BODY> tag
This tag encloses all tags, attributes and information that one wants the browser to
display. Let us now write the code for an example, which uses all the above tags.
9
1.4.3.1 Basic Tags

As you must have observed the code has been written in Notepad. The output viewed on
the browser is:
1.1
1.4.4 Character Formatting Tags
You have already been introduced to the <BODY> and </BODY> tags which
encapsulate the body of the HTML document. Body text tags are divided into two
categories:
¾ Character-level tags and attributes which applies to formatting of individual

letters or words
¾ Paragraph-level tags and attributes which applies to formatting of sections of text
We will first take up character formatting tags.
Learning to underline text and to print it in bold and italics using character formatting
tags one can make a word appearing in a document italic, bold or underlined. Although
many different tags are available to make the text appear bold or italics, the most
commonly used are <B> (for boldface) and <I> (for italics). Given below is the code for
a small program which prints the text in bold, italics and also underlines it. You will see
that to print in bold the <B> and </B> tags are used , to print in italics <I> and </I> and
to underline text <U> and </U> are used.
<HTML><HEAD>
<TITLE>Making words appear italic, bold or underline</TITLE>
</HEAD>
<BODY>
When <B>Apple</B> introduced the <B>iMac</B> personal computer in
1997,it embraced a five-colour scheme:<I> blueberry, strawberry,
tangerine,grape</I> and<I> lime.</I> It was a revolution of sorts, as
PCs so far were only dull <U>beige</U> or <U>grey</U>.
</BODY></HTML>
Listing 1.2
10
The output for the above code as viewed on a browser is:
Figure 1.2
Using the <B> tag
1.4.4.1 Underlining Text And Printing It In Bold And Italics
We can use tags in combination if we want to. For example we can combine <B>,<I>,
and <U> tags to get something like this: Bold, italics, and underline. The required code
to get the above formatting is like below:
<B><I><U>Bold, italics, and underline</B></I></U>
This is an example of nested tags. If you are going to use tag pairs in combination, then to
avoid confusing the browser, they should be nested, not overlapping. So always write
<TAG1><TAG2><TAG3>::::</TAG3></TAG2></TAG1> Nested tags (good)
instead of
<TAG1><TAG2><TAG3>::::</TAG1></TAG2></TAG3> Overlapping tags(bad).
1.4.4.2 Using The <BR> Tag
Sometimes you may wish to break a line at a particular place without resorting to start a
new paragraph. This can be done by using the <BR> tag. Let us write the code for listing
1.2 and format the text using <BR> tag.
<HTML>
<HEAD>
<TITLE>Making words appear italic, bold or underline</TITLE>
</HEAD>
<BODY>
11
When <B>Apple</B> introduced the <B>iMac</B> personal computer in

1997,it embraced a five-colour scheme:<I> blueberry, strawberry,
tangerine, grape</I> and<I> lime.</I> <BR>
It was a revolution of sorts, as PCs so far were only dull <U>beige</U>
or <U>grey</U>.
</BODY>
</HTML>
Listing 1.3
Using the <BR> tag
Notice the use of <BR> tag after the first sentence. The effect of <BR> tag can be seen
in the output of the above listing – listing 1.3.
1.3
1.4.4.3 Some More Text Formatting Tags
Other common text formatting tags are listed below.
<BLINK> - Makes the text blink

<EM> - Emphasizes the text, provides same visual effect as the <I> tag
<S> - Applies strikethrough to text
<STRONG> - Strong emphasis tag, provides same visual effect as the <B> tag
<SUB> - Formats text as subscript
<SUP> - Formats text as superscript
Let us take an example where all the above mentioned tags are used.
<HTML>
<HEAD>
<TITLE>Breaking the text, using subscript and superscript and applying
emphasis</TITLE>
</HEAD>
<BODY>
For a <EM>right angled </EM><I>triangle </I><BR>
12
<STRONG>BASE<SUP>2</SUP> + HEIGHT<SUP>2</SUP><STRONG>
<B>HYPOTENUSE<SUP>2</SUP></B><BR><BR>
We represent water as <STRONG>H<SUB>2</SUB>O<BR><BR>
<BLINK>This part of the text will blink</BLINK><BR><BR>
<S>This part of the text has been struckthrough</S><BR><BR>

</BODY>
</HTML>
Listing 1.4
Figure 1.4 shows how the above tags appear on the Internet Explorer.
1.4
You can also take the help of <DEL> and <STRIKE> tags to strikethrough text.
Another interesting tag used for formatting text is the <marquee> tag. This tag is used
to scroll text horizontally across the screen. It is mainly used to deliver a specific message
to the visitor or to scroll ads on a page. It is not a standard HTML tag and so the browser
support for it is typically limited to Internet Explorer. If the following line of the above
listing:
<S>This part of the text has been struckthrough</S>
is included within the <marquee> and </marquee> tags, we get:
<marquee><S>This part of the text has been struckthrough</S>

</marquee>
The text within the <marquee> and </marquee> tags will scroll across the screen from
right to left as shown in Figure 1.5.
13
1.5
<MARQUEE> tag
Let’s now see the attributes used in the <MARQUEE> tag.
Attribute Possible values Functional details

Bgcolor Any standard color name or Specifies the background color of the
hexadecimal color value marquee.
Direction Left, right Specifies the direction in which the
marquee content scrolls
Height Any valid percentage or no. of Specifies the vertical dimension of
pixels the marquee
Width Any valid percentage or no. of Specifies the horizontal dimension of
pixels the marquee.
Hspace Any valid percentage or no. of Specifies the left and right margin of
pixels the marquee
Vspace Any valid percentage or no. of Specifies the top and bottom margin
pixels of the marquee
Loop Any positive integer of Controls the number of appearance of
INFINITE the marquee content
Scrollamount Number of pixels Specifies the shift of marquee text
Scrolldelay Number specifying the delay in Specifies how often the marquee text
milliseconds redraws
1.4.5 Paragraph Formatting Tags
Paragraph-level formatting applies to formatting of an entire portion of text unlike

character-level tags where only individual letters or words are formatted.
1.4.5.1 Using The <P> Tag
The most common paragraph-level formatting tag is the <P> tag. In listing 1.4 you must
have observed that we have used two <BR> tags to write on a new paragraph.
14
Using <P> tags we can begin writing on a new paragraph and avoid writing two <BR>
tags, which can prove to be very cumbersome. Let us re-write listing 1.4 but this time
using the <P> and </P> tags.
<HTML>
<HEAD><TITLE>Breaking the text into paragraphs</TITLE></HEAD>
<BODY>
Creativity is the force that pushes the world forward, and colour is
the hallmark of creativity. So, it's natural that cutting-edge gadgetry
and sophisticated gizmos take on the colours of the rainbow.
<P>The floodgates were opened by Apple's iMac. Now we have notebooks,
palmtops, cell phones and even printers in colours normally associated
with candies and crayons.</P>
</BODY>
</HTML>
Listing 1.5
The <P> tag
The output viewed on a browser is:
1.6
Note that <P> tag is a block-level tag i.e. it creates a block within the browser’s window.
In order to clarify, just replace <P> tag by <P style=”background-color: blue”> and you
will see the paragraph block appear distinctly from the others. The style attribute will be
discussed later on in Chapter-6.
1.4.5.2 Headings And Alignment
Headings break up large pieces of text, give an insight into the topics to follow and
arrange information according to logical hierarchy. HTML provides six levels of heading;
from <H1> which is the largest to <H6> which is the smallest. The text inside heading
tags are automatically formatted depending on the level and always appears in boldface.
These tags are also block-level tags.
<HTML>
<HEAD><TITLE>Using Headings</TITLE></HEAD>
<BODY>
<H1>Heading - level one</H1>
15
<H2>Heading - level two</H2>

<H3>Heading - level three</H3>
<H4>Heading - level four</H4>
<H5>Heading - level five</H5>
<H6>Heading - level six</H6>
</BODY>
</HTML>
Listing 1.6 Headings
Viewed on a browser we see:
1.7
Headings
Alignment attributes are often used with the paragraph formatting tags. The attributes
include ALIGN=LEFT, ALIGN=CENTER and ALIGN=RIGHT. To apply these attributes,
they are to be included in any of the opening paragraph tags, like this:
<P ALIGN=CENTER>
text……
text……
text……
</P>
Listing 1.7 shows how to align headings
<HTML>
<HEAD>
<TITLE>Using Alignment Attributes</TITLE>
</HEAD>
<BODY>
16
<H1 ALIGN=LEFT>Left Alignment</H1>

<H1 ALIGN=CENTER>Center Alignment</H1>
<H1 ALIGN=RIGHT>Right Alignment</H1>
</BODY>
</HTML>
Listing 1.7
1.8 shows the output
1.8
HEADINGS AND ALIGNMENT

1.4.5.3 <ADDRESS>, <BLOCKQUOTE> and <PRE> tags
All these tags are block-level tags. The <ADDRESS> tag is used to write addresses and
contact information in a document. It generally appears in italics.
The <BLOCKQUOTE> tag creates a separate paragraph for the text and in most browsers
indents the entire paragraph from the left as well as the right. It is mainly used to write
quotations.
The <PRE> tag displays the text exactly in the same way, as you typed it. It is mainly
used for displaying program code or some similar information.
Listing 1.8 shows a code where the tags are used.
<HTML>
<HEAD><TITLE>Some more paragraph formatting tags</TITLE>
</HEAD>
<BODY>
<H1> Using the ADDRESS, BLOCKQUOTE and PRE tags</H1>
We have used the ADDRESS tag to write this portion:-<BR>
For furthur details please contact:<BR>
<ADDRESS> Mr Jojo Banerjee <BR>
GC 231/6, Salt Lake, Sector 3. <BR>
Calcutta - 700091. <BR>
17
West Bengal.<BR>
(033)321-3456
</ADDRESS>
<BLOCKQUOTE>This part has been written using the BLOCKQUOTE tag:-<BR>
She walks in beauty like the nights,
Of cloudless climes and starry skies.
And all that's best of night and dark,
Meet in her aspect and her eyes.
</BLOCKQUOTE>
<BR>
<PRE>
As you see, PREformatted text looks like this:-
She walks in beauty like the nights,

Of cloudless climes and starry skies.
And all that's best of night and dark,
Meet in her aspect and her eyes.
</PRE>
</BODY>
</HTML>
Listing 1.8
<ADDRESS>,<BLOCKQUOTE> and <PRE> tags
Listing 1.8 on the browser will look like:
1.9
<ADDRESS>, <BLOCKQUOTE> and <PRE> tags
18
Now carefully take a look at listing 1.8. You’ll see that the excerpt from the poem (Yes,
you’ve guessed it right – It’s “She walks in Beauty” by Lord Byron) has been written in
the same way between the <BLOCKQUOTE> and the <PRE> tags. But, notice the
difference in outputs. The portion between the <BLOCKQUOTE> tags is written in one
paragraph with indentions from the left as well as the right. On the other hand, the portion
between the <PRE> tags is written exactly as is given in the listing.
1.4.5.4 Using Horizontal Lines
Horizontal lines are used to divide a page into sections. Generally, long passages of text
are broken using horizontal lines. This may be done to make the design of the document
more presentable or to indicate a shift in information. The syntax for drawing a horizontal
line along with its attributes is given below:
<HR [width = …][align = …][size = …][noshade]>

All the above attributes are optional.
For a horizontal line, the width maybe given in pixels, such as width=8 or as a percentage
of the browser’s available window width. To use the percentage value a % sign after the
value has to be included. The default value for the width is 100% of the
page width. The height (or the size), however can be set only in pixels. The default value
for this is 3 pixels.
Let us take up a few examples.
19
1.10
Horizontal Lines
Let us see the code for any two of these lines, say the second and third horizontal lines.
The second line can be obtained by writing the following line in the body of a program
next to the line after which you want the horizontal line.
<HR WIDTH=100% SIZE=10 >
and the third can be obtained by writing:
<HR WIDTH=100% SIZE=10 noshade>
As you must have noticed from the syntax for horizontal lines, alignment can also be
done for horizontal lines. To align a horizontal line, just add the align attribute in the
syntax to get something like:
<HR WIDTH=300 ALIGN=RIGHT SIZE=15 noshade>
Instead of ALIGN=RIGHT you can also write ALIGN=LEFT or ALIGN=CENTER.

Figure 1.11 how horizontal lines after alignment looks on the screen.
20
1.11
Horizontal Lines
1.4.5.5 Specifying Fonts And Font Sizes
The following table describes the tag and attributes one may use to set font
characteristics.
Tag/Attribute Description
<FONT> Sets font characteristics for text

SIZE=”...” Specifies relative font sizes on a scale of 1 through 7. 3 is
the default size. One can also specify the relative size by
using + or -. e.g. +4.
COLOR=”...” Specifies font colour in the format #RRGGBB using
numbers. Colour names may also be used. This colour
applies only to the text surrounded by <FONT> tags.
FACE=”...” Specifies type faces. Sometimes type faces as a list of
possible type faces maybe used, in order of preference,
separated by commas. e.g. “Technical, Times New
Roman”.
Let us see listing 1.9 to clear the concepts.
<HTML><HEAD>
<TITLE>Font properties</TITLE>
</HEAD><BODY>
<FONT FACE="Arial" SIZE="+2" COLOR="#FF0000">

Arial Font ; size = +2 ; color = #FF0000</FONT> <BR>
21
<FONT FACE="Courier New" SIZE="5" COLOR="#0000FF">

Courier New Font ; size = 5 ; color = #0000FF</FONT> <BR>
<FONT FACE="Times New Roman" SIZE="2" COLOR="#000000">

Times New Roman Font ; size = 2 ; color = #000000</FONT> <BR>
<FONT FACE="Arial" SIZE="-1" COLOR="gray">

Arial Font ; size = -1 ; color = gray</FONT> <BR>
<FONT FACE="Helvetica, Courier New" COLOR="blue">

Courier New Font ; size = 3(default) ; color = blue</FONT> <BR>
</BODY>
</HTML>
Listing 1.9
SPECIFYING FONTS AND FONT SIZES
Listing 1.9 gives the output
1.12
You’ll see that in listing 1.9 for the last line we have written
<FONT FACE="Helvetica, Courier New" SIZE="3" COLOR="blue">Courier

New Font ; size = 3 ; color = blue</FONT>
As the font type Helvetica is not supported by windows, the font adopted while
printing is the one specified after the comma, which is Courier New.
1.4.6 Comment Tags
A comment must start with . A comment can be placed
anywhere in the document and the browser will ignore everything within the brackets.
You can insert hidden messages, notes to yourself, write a helpful message or you can
22
even put HTML tags in a comment and they will be ignored. The browser will just keep
ignoring everything until it sees a -->.
Let us see listing 1.9a to clear the concepts.
<HTML>
<HEAD>
<TITLE>COMMENT TAGS</TITLE>
</HEAD>
<BODY>
<H2>Understanding comment tags: </H2>

</BODY>
</HTML>
Listing 1.9a
Listing 1.9a gives the output
1.4.6.1 Inserting Comments
1.12a
Output of listing 1.9a
1.4.6.2 Representing Special Characters
The browser doesn’t recognize more than one space. Suppose if you want to display
“HTML is really cool!”, the browser will display it as “HTML is really
cool!”. So how to add those extra spaces!. The trick is to use (non- breaking
space) in place of space character. An example:
<HTML>
<HEAD>
<TITLE>Representing special characters:</TITLE>
</HEAD><BODY>
HTML
is
Really
23
Cool!
</BODY></HTML>
Listing 1.9b
Inserting special characters
Listing 1.9 b gives the output
1.12b
Output of listing 1.9 b
The & means the beginning of a special character and the ; means ending a special
character and the letters in between them are sort of an abbreviation for what it’s for.
There are quite a few of these special characters. Here are some more:
Symbol Special Character Example
Non-breaking space

Less than < A<B
Greater than > A>B
Ampersand & A&B
Quotation mark " “A”
Soft hyphen A-B
Some of the characters like “<” shown above may be used directly in an HTML
document, but it may lead to a confusion for the browser. So it’s better to use the special
characters.
For copyright notices, or trademarks it is customary to include the appropriate signs:
Special
Symbol Example
character
Copyright © 1999
Copyright sign ©
W3C
Registered ® MagiCo ®
24
Trademark
Trademark ™ Webfarer™
1.5 Hyperlinks And Anchors

Before we go on to explain hyperlinks, let us try to differentiate linear and non-linear
text. Linear, as the name suggests-relates to a straight line. So linear information is
information that progresses in a straight line, beginning at point X and ending at point Y
with a certain path in between. A linear text, therefore develops its context from
everything that has come before. Take the example of a novel. One begins at a certain
page and proceeds to the end, receiving the plot and characters in the order they were
intended so that by the end everything makes sense. Does that mean one cannot read a
novel in a non-linear fashion? Not necessarily. One can pick up pages
randomly until he has gone through the entire book. The novel will be read but the
chances are that no real concept of the book will be obtained.
The case is different for non-linear information. Magazines and dictionaries are good
examples of resources of non-linear information. One can randomly go through a
particular article of a magazine or look up for a particular word in the dictionary. This
form of reading is non-linear, as one does not have to read the intervening pages between
the commencements of the magazine to the point where the article starts off.
A musical cassette tape is an example of a resource of linear information whereas a

musical CD is that of a resource providing information in a non-linear format.
1.5.2 What Is A Hyperlink?
The World Wide Web is an example of non-linear system. In the world of hypertext,
information is chunked into small and manageable units called nodes. Links are
embedded in these nodes so that one can move from one hypertext document to another.
These links connecting different hypertext documents are called hyperlinks (hypertext
links). The process of navigating among the nodes by using their links is called browsing.
A collection of nodes interconnected by hyperlinks is called a web, which makes the
World Wide Web a global hypertext system.
Without hyperlinks ( i.e. hypertext links) the Web would be a bunch of separate and
unrelated files instead of the coherent and interlocking whole. Hyperlinks are often
used so that Web sites can be broken into several different HTML pages, all of which are
linked to each other.
In theory every hyperlink has two components: the source and the destination. For
instance, in the link denoted by <a href = “http://www yahoo.com/”> the
destination of the link is the Yahoo web site. The source end of the link is the HTML
document, which contains this code.
25
1.5.3 The ANCHOR Element
Anchors elements are used to link multiple HTML documents. It requires only one tag
viz. the <A> tag. It occurs only in the body of an HTML document. If an anchor is used
to turn text into a hyperlink, the text is usually coloFigured blue and underlined. The
general syntax for the anchor element is as follows:
<A href = ”…” >Content</A>
Here the href attribute accepts the URL of the linked page. If you want to create a
hyperlink, which will take the user to a different page, href or hypertext reference is
mandatory. For without it, the anchor will not function as a hyperlink. A valid hyperlink
maybe of the form:
<A href = “http://www.rediff.com”>…text…</A>
Lets now see a real life example on hyperlinks. The Figure given below shows the
hyperlinks used in the site www.rediff.com.
Hyperlinks
1.12a
showing the use of hyperlinks
1.5.3.1 Named Anchors
Named anchors are used to create links to a specific location within a page. For example
at the bottom of a long page, you can provide a link to the top by using named anchor.
Now the visitor won’t need to scroll the entire page and can jump directly to the top by
just using a mouse click. This method is illustrated in the following sample code which is
the part of a program..
26
<HEAD>
<TITLE>Hyperlinks - using named anchors</TITLE>
</HEAD>
<BODY>
<H4 ID="four">This is an example of hyperlinking using named

anchors. </H4>
<H1>Options</H1>
<P>Click on the highlighted text to visit the tutorial on <A
HREF="#one">E-Business segments</A></P>.
HREF="#two">Windows 2000</A></P>.
HREF="#three">Linux</A></P>.
<H2 ID="one">Tutorial on E-Business Segments</H2>

…….
<A HREF="#four">Goto start</A>
<P>
<H2 ID="two">Tutorial on Windows 2000</H2>
……
</P>
<H2 ID="three">Tutorial on Linux</H2>

……
</BODY>
</HTML>
The portions illustrated in the above example are where the text of the tutorial on the
three different subjects lies. The output is given in Figure 1.13.
27
1.13
Named Anchors
In this example, users who select an option from the menu choices will find those
sections of the page immediately displayed, without having to scroll the entire page to
reach them. For example in the above screen if one clicks on the highlighted text of E-
Business segments then he will be able to move to the portion on the Tutorial on E-
Business segments which is actually a part if the same page but the user do not have to
scroll through the entire text in between to reach there as observed from Figure 1.14.
28
1.14
Have you Figured out how this happens? Look at the program segment closely. You’ll
find that all the headings (i.e. Tutorial on E-Business Segments, Tutorial on Windows
2000 and Tutorial on Linux) are given an identification number – one, two or three
respectively. So when one clicks on the highlighted portion (see Figure 1.13) of say E-
Business segments the HREF attribute links the user to that part of the page which is
defined by <H2 ID =“one”> which is Tutorial on E-Business segments. To go back to
the earlier menu screen he has to click on the underlined portion Goto start. This will take
him to <H4 ID = “four”>.
1.5.3.2 Adding Colours
The browser has default settings for text color, link color, active link color and visited
link color in addition to the background color. You can change these if you need to.
HTML provides the facility of adding colours to links and document. To include the
background colour, one can open the BODY tag like this:
<BODY BGCOLOR=”#FF00FF”>
The above is an example where colours are specified using hexadecimal numbers, which
combine proportions of Red, Green and Blue – called RGB numbers. RGB numbers use
six digits, two for each proportion of red, green and blue (Please see the appendix.) The
following table shows the text and link colour attributes available in HTML.
Attribute Description
29
TEXT=”….” Sets the colour of all text within the document with a colour name or
#RRGGBB value
ALINK=”….” Sets the colour for active links, which are links at the time the visitor
clicks on them, with a colour name or #RRGGBB value
VLINK=”….” Sets the colour for links which the visitor has recently followed with a
colour name or a #RRGGBB value
LINK=”….” Sets the colour for unvisited links with a colour name or a #
RRGGBB value
Take the following example.

<HTML><HEAD>
<TITLE>Adding colours</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#000099"

ALINK="#FF0000">
This is an example of understanding text and link colour attributes .
<BR>
Click on this highlighted text to visit the site <A

HREF="http://www.rediff.com">http://www.rediff.com.</A>
<P>Or, click on this highlighted text to visit the site <A

HREF="http://www.indiainfo.com">http://www.indiainfo.com.</A></P>
<B>Note the change in colour of the visited site and the unvisited
one.</B>
</HTML>
Listing 1.10
The output will be:
1.15
30
After visiting any of these sites and coming back to this screen you’ll see that the colour
of the highlighted portion of the visited site has changed.
1.5.4 Inserting Email Links
An email works the same way as the links to web pages. Instead of specifying a page
address in the href attribute, we specify an email address. Also an email link uses the
mailto: protocol (used to invoke email programs). So to create an email link, add an
anchor link with the mailto: protocol indicator and the email address. An example:
<HTML>
<HEAD><TITLE>Inserting E-MAIL links</TITLE></HEAD>
<BODY>
<A href="mailto:padia_kunal@yahoo.com">SEND ME MAIL! </A>
</BODY></HTML>
Listing 1.10a
Inserting email links

The output will be:
1.15a
Output of listing 1.10a
As you see in the above listing, the mailto uses no double slashes after the colon as there
are in HTTP URL’s. As the visitor clicks on the hyperlink, an email program (like
Microsoft Outlook) will be invoked with the To field filled in with
“padia_kunal@yahoo.com”.
1.6 Working With Lists

Nowadays lists are omnipresent. Whenever one jots down the items to be bought from a
grocery store, one goes through the telephone directory to look for a particular phone
number or looks up at the table of contents of a book, or is taking the help of lists to make
his task easier. In fact, lists are the best method of organizing information and presenting
it in a structured fashion.
31
Basically there are three kinds of lists. They are:-

¾ Ordered lists (also referred to as Numbered lists)
¾ Unordered lists (also referred to as Bulleted lists)
¾ Definition lists
1.6.1 Ordered List
An ordered list is one that is numbered and may also be used to indicate sequential form
of information. For ordered lists the opening and closing tags are respectively <OL> and
</OL>. Let us write a program using these tags.
<HTML>
<HEAD>
<TITLE>Code for ordered list - without numbers</TITLE>
</HEAD>
<BODY>
Steps in a software life cycle
<OL>
Software Requirement Specification
Design
Coding
Testing
Implementation
Maintenance
</OL>
</BODY>
</HTML>
Listing 1.11
Code for ordered list (without numbers)
Well the output is:
1.16
Ordered list (without numbers)
As we see from the above output, the text is indented during the actual printing of the
list. However, the listed items have not been printed on separate lines. The answer is
obvious as HTML does not recognize line breaks unless explicitly told to it by using the
32
<P> or <BR> tags. The list item tag <LI> is used to remove this problem. An example
will make it clear.
<HTML>
<HEAD>
<TITLE>Code for ordered list - with numbers</TITLE>
</HEAD>
<BODY>Steps in a software life cycle
<OL>
<LI>Software Requirement Specification
<LI>Design
<LI>Coding
<LI>Testing
<LI>Implementation
<LI>Maintenance
</OL>
</BODY></HTML>
Listing 1.12
Ordered list (with numbers)
1.17
Ordered list (with numbers)
Notice the difference in the two examples. When the browser encounters the tag <LI> for
each item, it starts a new line, indents, and adds a number. Thus we get the output as seen
in the above Figure. By this time it must have dawned upon your mind as to whether we
can number the lists by using only digits or whether we have the option of using
a,b,c,d....(English alphabets) or i,ii,iii,iv....(Roman numerals) as well. HTML provides
this facility. Let us therefore print a numbered list using a,b,c,d.... instead of 1,2,3,4.... At
first we will see the code for it.
<HTML>
<HEAD>
<TITLE>Code for ordered list - with alphabets</TITLE>
</HEAD>
33
<BODY>
<OL type=a>
<LI>Design
<LI>Coding
<LI>Testing
<LI>Implementation
<LI>Maintenance
</OL>
</BODY>
</HTML>
Listing 1.13
Ordered list (with alphabets)
And the output is:
1.18
Ordered list (with alphabets)
By default numbered lists use Arabic numerals (1,2,3,4....). So by writing <OL type=a>
instead of just <OL> we have overriden the default and created a numbered list which
uses alphabets for numbering.
To create a numbered list which uses capitals for numbering we just change
<OL type=a> to <OL type=A>. The program then becomes:
<HTML>
<HEAD>
</HEAD>
34
<BODY>
<OL type=A>
<LI>Design
<LI>Coding
<LI>Testing
<LI>Implementation
<LI>Maintenance
</OL>
</BODY></HTML>
Listing 1.14
Ordered list (with capital alphabets)
And here’s the output:
1.19
Ordered list (with capital alphabets)
By now you must have realised the utility of the type attribute. Here is its syntax:
<OL type=numbering_system>
In this attribute, numbering_system is one of the five characters:
1(or default), a, A, i, I.
35
The values and styles for the type attribute are given in the table below:
Value Style Example

1(or default) Arabic 1,2,3,4,…..
A Uppercase alpha A,B,C,D….
A Lowercase alpha a,b,c,d…..
I Uppercase Roman I,II,III,IV….
I Lowercase Roman i,ii,iii,iv…..
Let us see how the output looks when we use Lowercase Roman. Remember, such an
output is obtained by writing the type attribute as:
<OL type=i>
in listing 1.14 we get the output as shown in Figure 1.20
1.20
Ordered list (with lowercase Roman)
To get uppercase Roman we write <OL type=I> and the program becomes:
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL type=I>
<LI>Coding
<LI>Testing
36
<LI>Implementation
<LI>Maintenance
</OL>
</BODY>
</HTML>
Listing 1.15
Ordered list (with uppercase Roman)
giving the output:
1.21
Ordered list (with uppercase Roman)
1.6.1.1 Inserting Text In An Ordered List
Sometimes it maybe essential to interrupt an ordered list to add some explanatory text or
to organize the text into headings and subtext. Let us say we have added some
explanatory text after item 1 in the following example. The output looks like:
37
1.22
Inserting text in an Ordered list
The double-headed arrow in Figure 1.22 (No, it’s not a part of the output as viewed on
the browser) shows the indention of the text. We will refer to it later.
The code for the above output is:
<HTML>
<HEAD>
<TITLE>Code for organizing the ordered list into headings and
subtext</TITLE>
</HEAD>
<BODY>
ISO Open Systems Interconnection Reference Model
<OL>
<LI>Physical Layer<P>
This layer is concerned with transmitting raw bits over a communication
channel.<BR>
<EM>The questions that arise here are how many pins the network
connector has and the use of each pin, whether transmission will
proceed simultaneously
in both directions, how much time a bit lasts and how many volts
should be used to represent a 1 and how many for a 0.</EM>
<LI>Data Link Layer
<LI>Network Layer
<LI>Transport Layer
<LI>Session Layer
<LI>Presentation Layer
<LI>Application Layer
</OL>
</BODY>
</HTML>
38
Listing 1.15
Ordered list with inserted text
Notice that no new number has been given to the text written just after Physical
Layer is printed. As the entire explanatory note about Physical Layer starting from This
layer is concerned …. to .... for a 0 is written after one <LI> tag, the browser
considers it to be a part of the item number just preceding it. Thus, the browser
comprehends that the text, i.e. the explanatory note, is a part of item number 1 (in this
case Physical Layer). To explain it in other words, when a list begins with the <OL> tag,
only an <LI> tag can cause the browser to start on a new line with the next number. You
can, however, force other lines to begin with the line break tags, (as in the above
example) but because it doesn’t begin a new list item, the browser treats it like a
continuation of the current item and doesn’t add a number for the next item in the
sequence.
Now, notice the indentions (refer to the double headed arrow) where the text has been
written. In fact, whenever you write the code in the above format you will always get the
indentions. In the above example the text was an explanatory one and so presence of
indentions was desired. But what if someone wants to interrupt a list for some
explanatory text where indenting isn’t needed? Is it possible for him to get this desired
result? The answer is an emphatic YES, but, some alterations have to be made in the
above code.
Given on the next page is the code for getting an output where text is not indented.
<HTML>
<HEAD>
<TITLE>Code for interrupting the ordered list with text not meant
to be indented</TITLE>
</HEAD>
<BODY>
ISO Systems Interconnection Reference Model
<OL>
<LI>Physical Layer
<LI>Data Link Layer
<LI>Network Layer
<LI>Transport Layer
</OL>
<P>The main function of this layer is to accept data from the
Session Layer, fragment it into smaller units, transfer
these fragmented parts to the Network Layer and ensFigure that
these parts reach the other end correctly.</P>
<OL>
<LI>Session Layer
39
</OL>
</BODY>
</HTML>
Listing 1.16
Ordered list with unindented text
And lo! Here’s the output:
1.23
Ordered list with unindented text
Noticed the difference between this and the earlier example? I bet it’s a YES. If you
haven’t noticed the difference examine the two outputs closely. You’ll find that unlike
the previous example where the text of item number 1 was indented, no indentions are
there for the text after item number 4 in this example.
Observe the two codes closely to find out what caused this difference. You’ll see that
unlike the previous example where <OL> tag was used only once, here two sets of <OL>
tags are used : one encapsulating Physical Layer and Transport Layer ; and the other
encapsulating Session Layer and Application Layer. As each segment of the list is
contained within its own pair of ordered list tags, the browser treats each portion as a
separate list. Thus, no indentions have taken place.
But, a new problem has arisen. As the browser treats each portion as a separate list, it
begins numbering from 1 for the second list. The browser is unable to decipher that the
second list is actually a continuation of the first one and thus Session Layer is numbered
as 1 and not 5. To work around this problem, in order to start numbering from whichever
number one wants, the start attribute is used for the <OL> tag.
1.6.1.2 The start Attribute
40
As mentioned above, this attribute is used to override default list numbering when a list is
divided into multiple parts.
If we rewrite the code for the previous example using the start attribute we get:
<HTML>
<HEAD>
<TITLE>Code for resuming printing ordered list with appropriate
numbering</TITLE>
</HEAD>
<BODY>
ISO Systems Interconnection Reference Model
<OL>
<LI>Physical Layer
<LI>Data Link Layer
<LI>Network Layer
<LI>Transport Layer
</OL>
<P>The main function of this layer is to accept data from the
Session Layer, fragment it into smaller units, transfer
these fragmented parts to the Network Layer and ensFigure that
these parts reach the other end correctly.</P>
<OL start=5>
<LI>Session Layer
</OL>
</BODY></HTML>
Listing 1.17
Using the start attribute
The use of <OL start=5> instead of <OL> makes the browser understand that the
numbering of the second list is to start from 5 and not 1(the default value). The output is:
41
1.24
Using the start attribute
1.6.1.3 Nested List
One of the most important featFigures of ordered list is the nested list. So, what is a
nested list? A nested list is a list within a list that can extend up to several levels. One of
the most common places where we can see a nested list is in the contents of a book. To
create a nested list a new set of ordered list tags is to be included within the current list
tags (see listing 1.18).
<HTML><HEAD>
<TITLE>Code for creating a nested list</TITLE></HEAD>
<BODY>Tutorial on XML Table of Contents

<OL type=A>
<LI>Getting started with XML

<OL type=1>
<LI>The road to XML

<OL type=I>
<LI>Early Text Processing system
<LI>Evolution of the web
<LI>From HTML to XML

<OL type =i>
<LI>About HTML
<LI>Why we should switch to XML
</OL>
</OL>
<LI>Getting acquainted with XML
42


<OL type=a>
<LI>Design goals
<LI>W3C standard process
<LI>FutFigure of XML
</OL>
</OL>
<LI>Building blocks of XML
<LI>Designing your data
<LI>Putting it all together
<OL type=a>
<LI>Parsing and processing XML
<LI>Understanding Namespaces
</OL>
<LI>XML Toolbox and Applications
</OL></BODY></HTML>
Listing 1.18
Figure 1.25 shows how the code appears on the browser.
Figure 1.25
Nested List
1.6.2 Unordered List
Unordered lists are used to represent a set of items that have a relation among themselves
but do not follow a specific order. The syntax of unordered lists is very similar to that of
43
ordered lists except that we use the tag <UL> and </UL> instead of <OL> and </OL>.
Unlike ordered lists where the items of the lists are numbered (1,2,3,4.... or a,b,c,d....), the
items in the unordered list are represented using bullets. Let us write a code for an
unordered list.
<HTML><HEAD>
<TITLE>Code for unordered list</TITLE></HEAD>
<BODY>
<UL>
<LI>Design<LI>Coding<LI>Testing<LI>Implementation<LI>Maintenance
</UL>
</BODY></HTML>
Listing 1.19
On seeing the output given below, you’ll realize that an unordered list is represented in
the same way as that of an ordered one, the only difference being that bullets are used
instead of numbers to represent each item.
1.26
A point to be noted is that the actual appearance of bullet may vary from browser to
browser. Does that mean the choice of the type of bullets is completely with the browser
and the user has no control over it? Of course not. HTML does offer additional choices
for the bullet appearance using the type attribute. Let’s write down the HTML document
that uses different types of bullets. This code also shows how nesting can be done in
unordered lists. Note that we can have an ordered list as the list item for an unordered list
and vice versa. Also the nesting can be done to any number of levels.
<HTML>
<HEAD>
<TITLE>Code for using different types of bullets in an unordered
list</TITLE>
</HEAD>
<BODY>
<B>TIL's VISION , MISSION and VALUES</B>
<UL type=circle>
<LI>Vision<BR>
44
<P>To be India's most respected Information Technology Solution

Company</P>
<LI>Mission
<UL type=disc>
<LI>Achieve above industry average growth every year, at least 10
percent of it through higher productivity
<LI>Achieve JRD QV award and SEI maturity level 5
</UL><BR>
<LI>Values
<UL type=square>
<LI>Honesty, integrity and ethics
<LI>Respect and concern for people and community
<LI>Innovation and creativity
</P></UL></BODY></HTML>
Listing 1.20
Using different bullets
Observe the above program closely. You’ll see that the type attribute has the syntax:
<UL type=type_of_bullet>
where type_of_bullet takes one of the values: circle, square or disc.

Viewed on a browser the output is:
1.27
The above example is also that of a nested list. Some browsers may automatically select a
different bullet style for each nested layer. However, if you want to get a particular effect,
you’ll have to specify the style explicitly by using the type attribute.
45
1.6.3 Definition List
As stated earlier, there are two broad kinds of lists namely ordered list and unordered list.
However there also exists a special list variant – Definition list (which cannot in the
strictest sense be called a list) – that is used to provide two levels of information: the term
and its definition. You’ll find this type of listing in dictionaries, in glossary of terms at
the end of a book and in Frequently Asked Questions pages. Just as we had used <OL>
and <UL> tags for ordered and unordered lists respectively, similarly we use <DL> tag
for definition list. The two levels of information, namely, the term and the definition, are
done with the <DT> and <DD> tags. Let’s see the code for a definition list.
<HTML>
<HEAD>
<TITLE>Code for definition list</TITLE>
</HEAD>
<BODY>
Glossary of terms
<DL>
<DT><B>applet</B>
<DD>It is the name given to dynamic Web pages written using the Java
technology
<DT><B>CGI</B>
<DD>It stands for <I>Common Gateway Interface</I>. It is a technology
that uses a computer program to assemble a Web page whenever a user
requests a page.
</DL>
</BODY>
</HTML>
Listing 1.21
Definition list
And here’s the output for the above example.
46
1.28
Inspect the listing and the output. The <DL> tag makes the browser understand that we
are dealing with a definition list. The <DT> tag defines the term of the definition list and
the <DD> tag defines the definition. Look at the way the browser has printed the term
and then has gone to print the definition from the next line, leaving a margin on the left.
47
SUMMARY
Key points covered in this chapter are:
¾ AThe word hypertext was first coined by a man by the name of Ted Nelson in the
1960s.
¾ The credit for developing the World Wide Web as we know it today, goes to an
English scientist Tim Berners-Lee.
¾ The two basic HTML tools are an HTML editor and a Web Browser.
¾ A head and a body are the two main parts that comprise an HTML document.
¾ <!DOCTYPE>, <HTML>, <HEAD>, <TITLE> and <BODY> are some of the

basic HTML tags.
¾ Some common character formatting tags include <B>, <I>, <U> and <BR> tags.
¾ <BLINK>, <EM>, <S>, <STRONG>, <SUB>, <SUP> and <marquee> are other
common text formatting tags.
¾ The <P> tag is used to begin a new paragraph.
¾ HTML provides six levels of heading – from <H1> which is the largest to <H6>
which is the smallest.
¾ Left, Center and Right are the three kinds of alignment that can be done for
headings as well as paragraphs.
¾ <ADDRESS>, <BLOCKQUOTE> and <PRE> tags are used for formatting a

paragraph.
¾ The syntax for drawing a horizontal line along with its attribute is:
<HR [width][align][size][noshade]>
¾ Information can be linear or non-linear. The WWW is an example of non-linear

system.
¾ Hyperlinks have made the Web a coherent and interlocking whole.
¾ Named anchors are used to create links within a document.
¾ There are mainly two kinds of lists – ordered lists and unordered lists.
48
¾ For ordered lists the opening and closing tags are <OL> and </OL>. The <LI> tag
is used to list each item.
¾ The most common attributes used in an ordered list are the type and start
attributes.
¾ For unordered lists the opening and closing tags are <UL> and </UL>.
¾ The type attribute can also be used in an unordered list.
¾ Another special list variant is the definition list. It contains two levels of
information: the term and the definition. The former is marked with the <DT> tag
and the latter with the <DL> tag.
49
SELF ASSESSMENT
I. Fill in the blanks:
a The --------------- is a collection of rules written in SGMLthat defines the syntax

and structure of a specific type of document.
b ---------------- and -------------- are the two main parts that comprise an HTML
document.
c Ideally the first tag in every HTML document is the -------------- tag.
d The tag that encloses all tags, attributes and information that one wants the
browser to display is the -------------- tag.
e The -------------- tag applies strikethrough to text.
f The most common paragraph formatting tag is the -------------- tag.
g HTML provides -------------- levels of heading.
h -------------- is a special list variant.
II. Q2) State true or false:
a Only one title is allowed in a HTML page.
b The <marquee> tag is used to scroll text horizontally across the screen.
c Alignment attributes cannot be used with the paragraph formatting tag.
d In theory, every hyperlink has three components.
e Named anchors are used to create links within the document.
f An ordered list is one that is numbered.
g To get uppercase Roman in an ordered list one can use the type attribute.
h Text cannot be inserted in an ordered list.
50

Chapter 01

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Chapter 01

Enviado por

Direitos autorais:

Formatos disponíveis

Chapter 1-HTML Fundamentals

1.5 Hyperlinks And Anchors

1.1 What Is Html?

The Internet, a network of networks, provides a lot of services related to exchange of

1.1.1 The Birth Of Html

1.1.2 Significance Of Html In Today’s World

1.2 Basic HTML Tools

1.2.1 HTML Editors

HTML Editors fall into two general categories:

1.2.2 Web Browsers

1.3 HTML Terminology

1.3.3 Document Type Definition (DTD)

It is a collection of rules written in Standard Generalized Markup Language (SGML)

Element is the component of a document’s structure such as a title, a paragraph or a list.

1.4 Creating An Html Document

The Hypertext Markup Language similar to other markup languages is therefore

1.4.1 Getting Started

1.4.2 How An Html Document Is Organized

1.4.3 Basic HTML Tags: <!DOCTYPE>, <HTML>, <HEAD>, <TITLE>,

<!DOCTYPE HTML string>

where string specifies the version of HTML used in the document.

Note that HTML is not case-sensitive. So <!DOCTYPE>, <!Ddoctype>, <!DoCtype> etc

¾ The <HTML> tag

¾ The <HEAD> tag

¾ The <TITLE> tag

¾ The <BODY> tag

1.4.3.1 Basic Tags

1.4.4 Character Formatting Tags

¾ Character-level tags and attributes which applies to formatting of individual

We will first take up character formatting tags.

The output for the above code as viewed on a browser is:

<B><I><U>Bold, italics, and underline</B></I></U>

<TAG1><TAG2><TAG3>::::</TAG3></TAG2></TAG1> Nested tags (good)

<TAG1><TAG2><TAG3>::::</TAG1></TAG2></TAG3> Overlapping tags(bad).

1.4.4.2 Using The <BR> Tag

When <B>Apple</B> introduced the <B>iMac</B> personal computer in

1.4.4.3 Some More Text Formatting Tags

Other common text formatting tags are listed below.

<BLINK> - Makes the text blink

We represent water as <STRONG>H<SUB>2</SUB>O<BR><BR>

<BLINK>This part of the text will blink</BLINK><BR><BR>

<S>This part of the text has been struckthrough</S><BR><BR>

<S>This part of the text has been struckthrough</S>

is included within the <marquee> and </marquee> tags, we get:

<marquee><S>This part of the text has been struckthrough</S>

Attribute Possible values Functional details

1.4.5 Paragraph Formatting Tags

Paragraph-level formatting applies to formatting of an entire portion of text unlike

1.4.5.1 Using The <P> Tag

1.4.5.2 Headings And Alignment

<H2>Heading - level two</H2>

Viewed on a browser we see:

<H1 ALIGN=LEFT>Left Alignment</H1>

1.8 shows the output

HEADINGS AND ALIGNMENT

Listing 1.8 shows a code where the tags are used.

She walks in beauty like the nights,

1.4.5.4 Using Horizontal Lines

<HR [width = …][align = …][size = …][noshade]>

<HR WIDTH=300 ALIGN=RIGHT SIZE=15 noshade>

Instead of ALIGN=RIGHT you can also write ALIGN=LEFT or ALIGN=CENTER.

1.4.5.5 Specifying Fonts And Font Sizes

<FONT> Sets font characteristics for text

Let us see listing 1.9 to clear the concepts.

Non-breaking space