HTML

4
Introduction to HTML
4.1 INTRODUCTION
HTML (Hypertext Markup Language) is used to create document
on the World Wide Web. It is simply a collection of certain key
words called Tags that are helpful in writing the document to be
displayed using a browser on Internet.
It is a platform independent language that can be used on any
platform such as Windows, Linux, Macintosh, and so on. To
display a document in web it is essential to mark-up the different
elements (headings, paragraphs, tables, and so on) of the
document with the HTML tags. To view a mark-up document,
user has to open the document in a browser. A browser
understands and interpret the HTML tags, identifies the structure
of the document (which part are which) and makes decision about
presentation (how the parts look) of the document.
HTML also provides tags to make the document look attractive
using graphics, font size and colors. User can make a link to the
other document or the different section of the same document
by creating Hypertext Links also known as Hyperlinks.
4.2 OBJECTIVES
After going through this lesson, you would be able to :
72 :: Certificate in Web Designing

l
create, save and view a HTML document
format a web page using section heading tags
describe Ordered and Unordered lists
explain graphics in HTML document
describe hypertext links and making text/image links
4.3 CREATING, SAVING AND VIEWING A HTML

DOCUMENT
4.3.1 Creating a HTML document
The essential tags that are required to create a HTML document
are:
<HTML>.............</HTML>
<HEAD>.............</HEAD>
<BODY>.............</BODY>
Starting
Tag
HTML Tag <HTML>
The <HTML> tag encloses all other HTML tags and associated text
within your document. It is an optional tag. You can create an
HTML document that omits these tags, and your browser can still
read it and display it. But it is always a good form to include the
start and stop tags.
The format is:
<HTML>
Your Title and Document (contains text with HTML tags) goes here
</HTML>
Most HTML tags have two parts, an opening tag and closing tag.
The closing tag is the same as the opening tag, except for the slash
Introduction to HTML:: 73
mark e.g </HTML>. The slash mark is always used in closing tags.
An HTML document has two distinct parts HEAD and BODY.
The Format is:
<HTML>
<HEAD>
.............
.............
.............
</HEAD>
<BODY>
.............
.............
.............
Closing
Opening
</BODY>
Tag Tag
</HTML>
l
HEAD Tag <HEAD>
HEAD tag comes after the HTML start tag. It contains TITLE tag
to give the document a title that displays on the browsers title bar
at the top.
The Format is:
<HEAD>
<TITLE>
Your title goes here
</TITLE>
</HEAD>

l
BODY Tag <BODY>
The BODY tag contains all the text and graphics of the document
with all the HTML tags that are used for control and formatting
of the page.
The Format is:
<BODY>
Your Document goes here
</BODY>
An HTML document, web page can be created using a text editor,
Notepad or WordPad. All the HTML documents should have the
extension .htm or .html. It require a web browser like Internet
Explorer or Netscape Navigator/Communicator to view the
document.
Example: It is my first web page
Follow the steps to create and view in browser:
Step-1:
Open text editor Notepad (click on Start All

Programs AccessoriesNotepad)
Step-2:
Enter the following lines of code:
<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>
Step-3: Save the file as myfirstpage.html (go to File-Save Asgive File name: myfirstpage.html-choose save as type:
All Files-click save)
Step-4: Viewing document in web browser (open Internet
Explorer-click on File-Open-Browse-select the file
myfirstpage.html-click open-click ok)
Fig. 4.1 : Creating and Saving the HTML

document using Notepad
Fig : 4.2 Viewing HTML document

myfirstpage.html in browser
Attributes used with <BODY>

BGCOLOR: used to set the background color for the
document
Example:
<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
TEXT: used to set the color of the text of the document
Example:
<BODY TEXT="red">
Document text changed to red color

</BODY>
MARGINS: set the left hand/right hand margin of the
document
LEFTMARGIN: set the left hand margin of the document
Example:
<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side
of the page.
</BODY>
TOPMARGIN: set the left hand margin of the document
Example:
<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
</BODY>
BACKGROUND: It is used to point to an image file (the files
with an extension .gif, .jpeg) that will be used as the
background of the document. The image file will be tiled
across the document.
Example:
<BODY BACKGROUND="filename.gif">
Your document text goes here
</BODY>
Example: An HTML document attribute.html that shows the use of
attributes with the <BODY> tag
<HTML>
<HEAD>
<TITLE>
Use of Attributes with the Body Tag
</TITLE>
</HEAD>
<BODYBACKGROUND="computer.gif" text="blue"
TOPMARGIN ="75"
LEFTMARGIN="75">
Your document text will be indented 75 pixels from the
left hand and 75 pixels from the top of the page. The
background image computer.gif will be tiled across the
document. Your image and HMTL document should
present at the same place.
</BODY>
</HTML>
Fig. 4.3 : Viewing HTML document attribute.html in browser
Container and Empty Tags

All HTML tags are enclosed in angle brackets < and > i.e.
Opening Tag: <HTML> and closing tag: </HTML> same as
opening tag except a / (slash) mark. Tags are not case-sensitive
i.e. there is no difference in small and capital letters in tags.
There are two types of tags:
1.
Container Tags: Tags which have both the opening and

closing i.e. <TAG> and </TAG> are called container tags.
They hold the text and other HTML tags in between the
tags. The <HTML>, <HEAD>, <TITLE> and <BODY> tags
are all container tags.
Example:
<TAG> this is a container tag. It holds both the text and
HTML tag </TAG>
2.
Empty Tags: Tags, which have only opening and no ending,

are called empty tags. The <HR>, which is used to draw
Horizontal, rule across the width of the document, and line
break tags are empty tags.
INTEXT QUESTION
1.
Write True or False for the following:

(a)
The HTML language is used to create document on

the World Wide Web.
(b)
Head part of a web page should the <TITLE> tag.
(c)
HTML is a platform dependent language.
(d)
HEAD is a container tag.
4.4 FORMATTING WEB PAGE

HTML tags used for formatting a web page are:
SECTION HEADING: <H1>.............<H6>
HTML has six header tags <H1>, <H2>...........<H6> used to specify
section headings. Text with header tags is displayed in larger and
bolder fonts than the normal body text by a web browser. Every
header leaves a blank line above and below it when displayed
in browser.
Example: An HTML document, headings.html shows the different
section headings
<HTML>
<HEAD>
<TITLE>
Section Heading
</TITLE>
</HEAD>
<BODY>
<H1> This is Section Heading 1 </H1>
</BODY>
</HTML>
Fig. 4.4 : Viewing HTML document

headings.html in browser
Some peculiarities about the web browser on viewing HTML

document text: Browsers ignore extra space within HTML document
Browsers ignore any additional space you type, and
compress the text as if the space did not exist. For
Example: You can have text "My
First
Page"
in HTML document but in browser it display, "My First
Page".
Browsers ignore your extra line and paragraph breaks
Generally you press enter when you want to create line and
paragraph breaks, but they wont show up when you view
the document in browser.
In order to control your paragraph and line breaks, and
 tags are used.
Using paragraph tag: 

This tag indicates a paragraph, used to separate two
paragraphs with a blank line.
Example:
 Welcome to the world of HTML 
 First paragraph.
Text of First paragraph goes here 
Output:
Welcome to the world of HTML
First paragraph. Text of First paragraph goes here
Here, two paragraphs are separated with a line. But web browser
ignores the line breaks in the second paragraph that can be
controlled by putting tag.
Using Line Break Tag: 

The empty tag is used, where the text needs to start from
a new line and not continue on the same line. To get every
sentence on a new line, it is necessary to use a line break.
Example:
<BODY>
National Institute of Open Schooling 
B-31B, Kailash Colony 
New Delhi-110048
</BODY>
Output:
National Institute of Open Schooling
B-31B, Kailash Colony
New Delhi-110048
Using Preformatted Text Tag: <PRE>

<PRE> tag can be used, where it requires total control over
spacing and line breaks such as typing a poem. Browser
preserves your space and line break in the text written inside the
tag.
Example:
<PRE>
New Delhi-110048
</PRE>
Output:
New Delhi-110048
Example: An HTML document control.html shows the use of ,
 and <PRE>
<HTML>
<HEAD>
<TITLE>
Use of Paragraph, Line break and preformatted text Tag
</TITLE>
</HEAD>
<BODY>
HTML Tutorial

HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.

HTML stands for Hypertext Markup Language. 

It is used for creating web page. It is very simple 
and easy to learn. 

<PRE>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
</PRE>
</BODY>
</HTML>
Fig. 4.5
Using Horizontal Rule Tag: <HR>

An empty tag <HR> basically used to draw lines and horizontal
rules. It can be used to separate two sections of text.
Example:
<BODY>
Your horizontal rule goes here. <HR>
The rest of the text goes here.
</BODY>
Output:
Your horizontal rule goes here.
The rest of the text goes here.
<HR> accepts following attributes:
SIZE: Determines the thickness of the horizontal rule. The
value is given as a pixel value.
Example: <HR SIZE="3">
WIDTH: Specifies an exact width of HR in pixels, or a
relative width as percentage of the document width.
Example: <HR WIDTH="50%">, horizontal rule a width a 50
percent of the page width.
ALIGN: Set the alignment of the rule to LEFT, RIGHT and
CENTER. It is applicable if it is not equal to width of the
page.
NOSHADE: If a solid bar is required, this attribute is used;
it specifies that the horizontal rule should not be shaded
at all.
COLOR: Set the color of the Horizontal rule.
Example: <HR COLOR="BLUE">
Example of <HR> with its attribute:

<HR ALIGN=''CENTER'' WIDTH=''50%'' SIZE=''3" NOSHADE
COLOR="BLUE">
Character Formatting Tags

The character formatting tags are used to specify how a particular
text should be displayed on the screen to distinguish certain
characters within the document.
The most common character formatting tags are:
Boldface : displays text in BOLD
Example: Welcome to the Internet World 
Output: Welcome to the Internet World
Italics : displays text in Italic
Example: Welcome to the Internet World 
Output: Welcome to the Internet World
Subscript : displays text in
Subscript
Superscript : displays text in
Superscript
Small : displays text in smaller font as compared

to normal font
Big <BIG>: displays text in larger font as compared to
normal font
Font Colors and Size:
By using Tag one can specify the colors, size of the
text.
Example: Your text goes here 
Attributes of are:
COLOR: Sets the color of the text that will appear on the
screen. It can be set by giving the value as #rr0000 for red
(in RGB hexadecimal format), or by name.

Example: Your text goes here 
SIZE: Sets the size of the text, takes value between 1 and
7, default is 3. Size can also be set relative to default size
for example; SIZE=+X, where X is any integer value and it
will add with the default size.
Example: Font Size changes to 5 
 Font Size changes to 5 i.e. default size (3)
2
FACE: Sets the normal font type, provided it is installed on
the users machine.
Example: the text will be displayed
in Arial
Example: An HTML document formatText.html shows the use of
Character Formatting Tags.
<HTML>
<HEAD>
<TITLE>
Use of Character Formatting Text Tags
</TITLE>
</HEAD>
<BODY>
<H1> Welcome to the world of Internet</H1>
It is a

Network of Networks

</BODY>
</HTML>
Fig. 4.6 : Viewing HTML document formatText.html in browser
Using Some Special Characters

There are certain special characters that can be used while
creating document.
Following are some special character:
Symbols
Entity
&copy, &reg
, ,
&frac14, &frac12, &frac34
, <, >, ,
&divide, &lt, &gt, &le, &ge
&
&amp
&spades, &clubs, &hearts
All these special character must be ended with a semicolon;

Example: <PRE>
The copyright symbol is: &COPY;
The registered rank is: &REG;
</PRE>
Output:
The copyright symbol is:

The registered rank is:
4.5 USING LIST IN WEB PAGE

HTML Supports several ways of arranging items in lists. The most
commonly used are:
Ordered List (Numbered List)
Unordered List (Bulleted List)
Ordered List <OL>

Ordered list also called as Numbered list, is used to present a
numbered list of item in the order of importance or the item
(paragraph) is marked with a number.
An ordered list must begin with the <OL> followed by an <LI>
list item tag.
Example: An HTML document orderedList.html shows the use of
Ordered List
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
<H1> Various Terms Used In Internet</H1>
<OL>
<LI> WWW-World Wide Web
<LI> URL-Uniform Resource Locator
<LI> HTTP-Hypertext Transfer Protocol
<LI> FTP-File Transfer Protocol
<LI> HTML-Hypertext Markup Language
</OL>
</BODY>
</HTML>
Fig. 4.7 : Viewing HTML document orderedList.html in browser
Attributes of <OL> tag:

COMPACT: render a list in compact form.
TYPE : allows marking list items with different types. By
default the list Item markers are set to numbers 1,2,3 so
on.
Other values of TYPE attribute are:
Attribute
Description
Type = A
Capital letter eg. A, B, C
Type = a
Small letter eg. a, b, c,
Type = I
Uppercase Roman Numbers eg. I, II, III
Type = i
Lowercase Roman Numbers eg. i, ii, iii
Type = 1
eg. 1, 2, 3.
START: used for lists that need to start at values other than
1. START always specified in default numbers, and is
completed based on TYPE before display, For example, If
START =5 it would display either an E, e, V, v, or 5
based an TYPE attribute.
Nested Order List
One ordered list might contain one or more ordered list that is
called as Nested Order lists.
Example: An HTML document nested.html shows the use of Nested
Order Lists with attributes.
<HTML>
<HEAD>
<TITLE> Use of Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<OL TYPE = A START =3>
<LI> Fruits
<OL TYPE = I>
<LI> Apple
<LI> MANGO
<LI> Orange
</OL>
<LI> VEGETABLES
<OL TYPE = I>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato
</OL>
</OL>
</BODY>
</HTML>
Fig. 4.8 : Displaying Nested Ordered Lists with

attributes in browser
Unordered List <UL>

Unordered List also called as bulleted list, used to present list
of items marked with bullets. An unordered list starts with in <UL>
followed by <LI> (List Item) tag. Use of <UL> is very similar to <OL>
(ordered list).
Example: Use of Unordered List and Various Attributes
<HTML>
<HEAD>
<TITLE> Use of Unordered List </TITLE>
</HEAD>
<BODY>
<UL>
<LI> FRUITS
<UL>
<LI> Apple
<LI> Mango
<LI> Orange
</UL>
<LI> VEGETABLE
<UL>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato
</UL>
</UL>
</BODY>
</HTML>
Fig. 4.9 : Displaying Unordered Lists in browser
The unordered list also used the attributes COMPACT and TYPE
= CIRCLE or DISC (filled Circle used as a bullet)
INTEXT QUESTION
2.
Write True or False for the following:

(a)
<break> is a line break tag.
(b)
HTML has seven header tags <H1>..........<H7>
(c)
The <ULS> tag is used for bulleted, unordered list.
(d)
Special characters are not supported by HTML.
(e)
Ordered list can be nested.
4.6 USING GRAPHICS IN WEB PAGE <IMG>

Images can be placed in a web page by using <IMG> tag. There
are many image formats available today, but the most widely used
among them are gif and jpeg. The gif format is considered
superior to the jpeg format for its clarity and ability to maintain
the originality of an image without lowering its quality. Using tools
such as GIF constructor or Adobe Photoshop images can be
created.
It is an empty tag (only start tag, no end tag) and is written as:
<IMG SRC = image_URL>
SRC Source of the image file
image_URL represents the image file with its location.
Example: <IMG SRC=file:///C:/NOSlogo.GIF>
Here, image_URL =file:///C:/NOSlogo.GIF, it means image is
available in the Hard Drive C: on the local hard disk.
Example: <IMG SRC =http://planningcommission.nic.in/
images/planimg.jpg>
Here image _URL is = http://planningcommission.nic.in/images/
planimg.jpg. The image planimg.jpg, is taken from the images
directory of Planning Commission Web Server Planningcommission.nic.in.
If the location of the image and web page are in the same place
in the same directory/path then it is simply written <IMG
SRC=NOSlogo.GIF>
This SRC attribute is mandatory for the <IMG> tag.
Other attributes used with <IMG> are: q
ALIGN
HEIGHT AND WIDTH
VSPACE and HSPACE
ALT
BORDER
ALIGN: used to set the alignment of the text adjacent to the

image. It takes the following values:
l
ALIGN = LEFT - Displays image on left side and the

subsequent text flows around the right hand side of that
image
ALIGN = RIGHT - Displays the image on the right side and

the subsequent text flows around the left hand side of that
image
ALIGN = TOP - Aligns the text with the top of the image
ALIGN = MIDDLE - Aligns the text with the middle of the

image
ALIGN=BOTTOM - Aligns the text with the bottom of the

image
By default, the text is aligned with the bottom of the image

Example: Using <IMG> tag with attributes
<HTML>
<HEAD>
<TITLE> Use of IMG Tag With its ALIGN Attribute</TITLE>
</HEAD>
<BODY>

<IMG SRC=NOSlogo.GIF ALIGN=TOP>
Aligns the text with the Top of the image


<IMG SRC=NOSlogo.GIF ALIGN=MIDDLE>
Aligns the text with the Middle of the image


<IMG SRC=NOSlogo.GIF ALIGN=LEFT>
Displays image on left side and the subsequent text flows
around the right hand side of that image. Displays image
on left side and the subsequent text flows around the
right hand side of that image. Displays image on left side
and the subsequent text flows around the right hand side
of that image.


<IMG SRC=NOSlogo.GIF ALIGN=RIGHT>
Displays image on right side and the subsequent text flows
around the left hand side of that image. Displays image
on right side and the subsequent text flows around the left
hand side of that image.

</BODY>
</HTML>
Fig. 4.10 : Displaying Image with its attributes in browser
HEIGHT and WIDTH

Height and Width of an image can be controlled by using the
HEIGHT and WIDTH attributes in the <IMG> tag as follows:
Example: <IMG SRC= NOSlogo.GIF HEIGHT=320 WIDTH=240>
HSPACE and VSPACE

White space around an image can be provided by using HSPACE
(Horizontal Space) and VSPACE (Vertical Space) attributes of the
<IMG> tag. These attributes provide the space in pixels.
Example: <IMG SRC=NOSlogo.GIF VSPACE=30 HSPACE=25>
ALT (Alternative Text)

This attribute is used to give alternative text that can be displayed
in place of the image. This is required when the user needs to
stop display of images while retrieving a document in order to
make the retrieval faster, or when the browser does not support
graphics. It is also used a tool tips displaying description of the
image when the mouse is over the image.
Example: <IMG SRC=NOSlogo.GIF ALT = "NOSLogo">
BORDER
Border around the image can be controlled by using BORDER
attribute of <IMG> tag. By default image displays with a thin
border. To change the thickness or turn the border off, the value
in pixels should set to BORDER attribute.
Example: <IMG SRC=NOSlogo.GIF BORDER=0>
BORDER =0 to Turn the Border off
Example: <IMG SRC=NOSlogo.GIF BORDER=3>
BORDER=3 to make the border thickness to 3
Example: Showing the use of Image Attributes
<HTML>
<HEAD>
<TITLE> Use of Image Attributes </TITLE>
</HEAD>
<BODY>
<IMG SRC=NOSLogo.GIF HSPACE=5 VSPACE=5 BORDER=5 ALT=NOSLOGO ALIGN=LEFT>
National Institute of Open Schooling. National Institute of Open Schooling.
National Institute of Open Schooling. National Institute of Open Schooling.
National Institute of Open Schooling. National Institute of Open Schooling
</BODY>
</HTML>
Fig. 4.11 : Displaying Image with its attributes in browser
Understanding Image Maps

Image Maps as, the name suggests, means mapping/linking to
different URLs different portion of one image. Clicking on a
portion of an image, one can jump to the link connected with that
part.
For example: Different areas in the map of India may be linked
to the URL of website of the respective states.
Position of an image that acts as a link to different URL can be of
different shapes and sizes depending on one choice. Possible
shapes are circle, oval, rectangle, polygon and point. Image maps
are widely used in Web pages. They are mainly used with
geographic maps, organization charts, drawing of multicomponent structures and so on. Best view in the site: http://
planningcommission.nic.in. An image map can be created by
using Image Mapping Software MapThis. The software can be
freely downloadable from http://www.freedownloadscenter.com/
Web_Authoring/Image_Mapping_Tools/MapThis.html
4.7 WORKING WITH LINKS: <A> ANCHOR TAG

Web pages are linked to one another through Hypertext Links.
Section of text or image in the HTML document can be linked to
an external document or to a specific place within the same
document. The text or image that provides such linkage is known
as Hypertext or Hotspot.
HTML provides <A> Anchor Tag to create links. The format of
using anchor tag is as follows:
<A HREF ="URL"> Make Me The Link </A>
HREF (Hyper Link Reference) is a mandatory attribute used to refer
the URL of the resource. URL (Uniform Resource Locator) is an
address tells the browser about the file to link to. It identifies file
locations (Addresses) on the web or on the local hard drive. These
addresses can be those of HTML documents or elements such
as images, scripts, applets and other files. It is always enclosed
in quotes.
Linking a text to a web site / an external document
Example:
<A HREF ="http://www.nios.ac.in">Link to Website of NIOS</A>
OR
<A HREF="http://www.nios.ac.in/offices.htm">Links to Contact Us page of NIOS</A>
Opening
Address of the document
Anchor Tag
Link text
Closing Anchor Tag
In the above example the link text Links to Contact Us page of

NIOS would appear underlined and in a color different from any
other text in the document to distinguish a link from normal text.
Also you would find that the mouse pointer changes into a hand
like symbol when taken over the hyperlink.
Linking an image to web site

An image can be linked to a web site or HTML document.
Example:
<A HREF ="http://www.nios.ac.in"><IMG SRC=NOSlogo.GIF
BORDER=3></A>
Linking (jumping) to a specific place within the same

document
Sometimes, it is required to jump different sections in the same
document. For this it needs two steps, first; identify section with
a name and or second; use jumps to the location using the name
used.
The syntax is:
1.
<A HREF="#section_name"> link to another section of the

same document </A>
This link text jumps to the section named with HREF on click.
The # symbol before the section name is must.
2.
<A NAME="section_name"> Beginning of the section </A>
The NAME attribute is used to identify a section with a name. It

is a unique identifier within the document for the anchor.
One can also jump to a specific section of different document
specifying the path on HREF attribute.
Example:
Within the same document: <A HREF="#section_name">
Same folder, but different document: <AHREF="document.
html#section_name">
Different folder, different document:<A HREF="folder/
document. html#section_name">
A different server:
<A HREF="http://www.nios.ac.in/foldername/document.html
#section_name>
Example: Use of Anchor Tag
<HTML>
<HEAD><TITLE> Use of Anchor Tag</TITLE></HEAD>
<BODY>
<H2 align=''center''>National Institute of Open
Schooling </H2>
<A HREF=''http://www.nios.ac.in''><IMG SRC=''NOSlogo.GIF'' alt=''NIOSLOGO''
align=''left''></A>
The success of open learning and distance education very much depends on
the harnessing of the new and latest technology. The emerging Internet and
Web Technology helps in effective dissemination of information. The web site is
a demand source of latest information. One can access NIOS website by
clicking on <A
HREF="http://www.nios.ac.in" >http://www.nios.ac.in</A> OR on Clicking
NIOS logo 
Internet and Web Technology
Various Terms used in Internet are:
 
1. HTML (Hypertext Markup Language) 

2. WWW (World Wide Web) 
3. <A HREF=''#site''>Web site</A> (Linking within the document) 
4. Web page 
5. URL(Uniform Resource Locator) 
6. HTTP(Hypertext Transfer Protocol) 
7. Hyperlink


HTML (Hypertext Markup Language) <hr align=''left'' width=''24%'' noshade>
HTML (Hypertext Markup Language), Language used to create document on
the World Wide Web. It is simply a collection of certain key words called Tags
that helps to write the document. click<a href=''http://
en.wikipedia.org/wiki/Html''> http://en.wikipedia.org/wiki/Html</a> to read
more WWW(World Wide Web<hr align=''left''
width=''17%'' noshade> The World Wide Web (''WWW'' or
simply the ''Web'') is an information space in which the items of
interest, referred to as resources, are identified by global identifiers called
Uniform Resource Identifiers (URIs). The term is often mistakenly used as a

synonym for the Internet, but the Web is actually a service that operates over the Internet.
click<a href=''http://en.wikipedia.org/wiki/Www''>
http://en.wikipedia.org/wiki/Www</a> to read more

Web site <hr align=''left'' width=''6%'' noshade>
<A NAME=''site''>A website, web site or WWW site </A>(often shortened to just site)
is a collection of web pages, typically common to a particular domain name or subdomain on the World Wide Web on the Internet.
</BODY>
</HTML>
Fig. 4.12 : Display of an example using Anchor Tag <A> in

Browser
INTEXT QUESTION
3.
Fill in the blanks:

(a)
HTML _____________ a web page to include an image.
(b)
Web pages are linked to another through__________

links.
(c)
_______________ tag is used to add images to HTML

documents.
(d)
Border around the image can be controlled by using

___________ attribute of image tag.
4.8 WHAT YOU HAVE LEARNT

In this lesson you learnt how to create a HTML document. There
are three essential tags for creating a HTML document, namely,
HTML tag, HEAD tag and BODY tag. In addition, you learnt how
to format a webpage using section heading tags, hyperlinks,
graphics in HTML document and image links.
4.9 TERMINAL QUESTIONS

1.
Create a HTML file for the following web page as shown in

figure:
2.
Write a HTML file to create the following web page:
3.
What is the tag that is used to place images in a web page?

Give five attributes that you can associate with this type of
tag. Define Image Maps.
4.
Explain Hypertext links. What is the method to link a

specific place within the same document?
5.
Create a HTML file for the following web page:
N.B: Image should be linked to http://www.nios.ac.in. The Text

Yahoo, Hotmail, Times of India, Hindustan times should link to
http://www.yahoo.com,
http://www.hotmail.com, http://www.timesofindia.com and
http://www.hindustantimes.com respectively.
4.10 FEEDBACK TO INTEXT QUESTIONS

1.
2.
3.
(a)
True
(b)
True
(c)
False
(d)
True
(a)
True
(b)
False
(c)
True
(d)
False
(e)
True
(a)
allows
(b)
Hypertext
(c)
<IMG>
(d)
BORDER

HTML

Uploaded by

HTML

Uploaded by

4

72 :: Certificate in Web Designing

create, save and view a HTML document

format a web page using section heading tags

describe Ordered and Unordered lists

explain graphics in HTML document

describe hypertext links and making text/image links

4.3 CREATING, SAVING AND VIEWING A HTML

HTML Tag <HTML>

HEAD Tag <HEAD>

74 :: Certificate in Web Designing

BODY Tag <BODY>

Open text editor Notepad (click on Start All

Enter the following lines of code:

Fig. 4.1 : Creating and Saving the HTML

76 :: Certificate in Web Designing

Fig : 4.2 Viewing HTML document

Attributes used with <BODY>

Document text changed to red color

78 :: Certificate in Web Designing

Fig. 4.3 : Viewing HTML document attribute.html in browser

Container and Empty Tags

Container Tags: Tags which have both the opening and

Empty Tags: Tags, which have only opening and no ending,

Write True or False for the following:

The HTML language is used to create document on

Head part of a web page should the <TITLE> tag.

HTML is a platform dependent language.

HEAD is a container tag.

80 :: Certificate in Web Designing

4.4 FORMATTING WEB PAGE

Fig. 4.4 : Viewing HTML document

Some peculiarities about the web browser on viewing HTML

82 :: Certificate in Web Designing

Using paragraph tag: <P>

Using Line Break Tag: <BR>

Using Preformatted Text Tag: <PRE>

84 :: Certificate in Web Designing

HTML stands for Hypertext Markup Language.<BR>

Using Horizontal Rule Tag: <HR>

86 :: Certificate in Web Designing

Example of <HR> with its attribute:

Character Formatting Tags

Superscript <SUP>: displays text in

Small <SMALL>: displays text in smaller font as compared

(in RGB hexadecimal format), or by name.

88 :: Certificate in Web Designing

Fig. 4.6 : Viewing HTML document formatText.html in browser

Using Some Special Characters

&frac14, &frac12, &frac34

&divide, &lt, &gt, &le, &ge

&spades, &clubs, &hearts

All these special character must be ended with a semicolon;

The copyright symbol is:

4.5 USING LIST IN WEB PAGE

Ordered List (Numbered List)

Unordered List (Bulleted List)

Ordered List <OL>

90 :: Certificate in Web Designing

Fig. 4.7 : Viewing HTML document orderedList.html in browser

Attributes of <OL> tag:

Capital letter eg. A, B, C

Small letter eg. a, b, c,

Uppercase Roman Numbers eg. I, II, III

Lowercase Roman Numbers eg. i, ii, iii

92 :: Certificate in Web Designing

Fig. 4.8 : Displaying Nested Ordered Lists with

Unordered List <UL>

Fig. 4.9 : Displaying Unordered Lists in browser

94 :: Certificate in Web Designing

Write True or False for the following:

<break> is a line break tag.

HTML has seven header tags <H1>..........<H7>

The <ULS> tag is used for bulleted, unordered list.

Special characters are not supported by HTML.

Ordered list can be nested.