Html Tutorial Full PDF Book

ALPHA TECHNICAL EDUCATION Registered under “Trust” act Central Govt. Of India
Reg.No:-10898/06 1G
https://inranko.com
F-321, Lado Sarai, Old M.B. Road Opp:- Mother Dairy, New Delhi - 110030
Lesson -1 Page No.
HTML INTRODUCTION
▪ Introduction ……………………………………………………………………….. 3G
▪ Definition
▪ Understanding tags ………………………………………………………………………… 4G
▪ Understanding elements ………………………………………………………………………… 5G
▪ HTML & Head section ………………………………………………………………………… 9G
▪ Body section ………………………………………………………………………… 10G
▪ Tag Ending a Page ………………………………………………………………………… 11G
Lesson -2
HTML elements
▪ HTML Elements ………………………………………………………………………… 12G
▪ Logical Elements ………………………………………………………………………… 13G
▪ Block-Level elements & Section headings ………………………………………………………………………. 14G
▪ Paragraph ………………………………………………………………………… 15G
▪ Brakes ………………………………………………………………………… 16G
Lesson -3
Preformatted Text
▪ Preformatted text ………………………………………………………………………… 18G
▪ Horizontal Rules ………………………………………………………………………… 19G
▪ DIV(Divisions) ………………………………………………………………………… 20G
▪ Center ………………………………………………………………………… 22G
Lesson -4
Bullet & Numbering
▪ Unordered or bulleted list ………………………………………………………………………… 24G
▪ Order or numbered list ………………………………………………………………………… 25G
▪ Definition List ………………………………………………………………………… 26G
Lesson -5
Some other formatting styles
▪ Some other formatting styles ………………………………………………………………………… 29G
▪ Marquee ………………………………………………………………………… 30G
▪ Hypertext links ………………………………………………………………………… 31G
Lesson -6
Linking Between sections of Different Document
▪ Linking between sections of different documents
………………………………………………………………………… 35G
▪ URLS ………………………………………………………………………… 35G
▪ Hyper link image ………………………………………………………………………… 38G
▪ Thumbnails & image map ………………………………………………………………………… 39G
▪ HTML Table ………………………………………………………………………… 41G
▪ Using Suffixes ………………………………………………………………………… 42G
▪ Rules ………………………………………………………………………… 43G
▪ Spanning multiple row & cols ………………………………………………………………………… 44G

Reg.No:-10898/06 2G
https://inranko.com
Lesson -7
Setting Column Properties
▪ Setting column Properties ………………………………………………………………………… 46-50G
Lesson -8
HTML Forms
▪ The form Elements ………………………………………………………………………… 51G
▪ Form Controls ………………………………………………………………………… 51G
▪ The text area elements ………………………………………………………………………… 53G
▪ The button elements …………………………………………….............................. 55G
▪ Special tag ……………………………………………………………………….. 56G
▪ Meta tags ……………………………………………………………………….. 57G
▪ Dynamic documents ……………………………………………………………………….. 58G
▪ ID Form designing ……………………………………………………………………….. 59G
Lesson -9
Meta tags
▪ Meta Elements ………………………………………………………………………… 69G
▪ Keyword Elements ………………………………………………………………………… 69G
Lesson -10
Test your Knowledge
Test your knowledge……………………………………………………………………………………………. 71G

Reg.No:-10898/06 3G
https://inranko.com
Lesson-1
HYPERTEXT MARKUP LANGUAGE (HTML)
INTRODUCTION –
The World Wide Web has been expanding at a phenomenal rate. As the web grows, so does its
vehicle of communication- HTML.The world wide web is one of the most exciting and useful aspects of the
internet. It is a way to share resources with many people simultaneously, even though some of those recourses
may be located at opposite ends of the world.
Often it is wrongly assumed that the web and internet are identical.this, however, is not true. In fact, the
internet provides the medium for the web to run on. Just as a telephone line provides the medium for
transmission of voice, the web provides the technology for publishing, sending and obtaining information over,
the internet.
The World Wide Web is a collection of linked documents present in the millions of computers that can be
accessed through the internet. The pages are written in HTML-HyperText Markup Language-that defines their
appearance and layout and, more importantly, links them to other documents.
DEFINITION-HTML is a way of representing text and linking that text to other kinds of resources such as sound
files, graphics files and multimedia files.
HTML DOCUMENTS-HTML documents are of three.
➢ Static
➢ Dynamic
➢ Directory listing
Static pages
Static HTML pages are prepared in advance of the request.The web server returns the HTML pages to the
user,but takes no special action.The user requests a static page by typing in an URL(in the
illustration,http://www.company.com/home.htm)or by clicking a link pointing to an URL.The URL request is sent
to the server to the server.The server responds by returning the static HTML page.
Dynamic pages
Dynamic HTML pages are created in response to a user’s request. a web browser collets information by
presenting a page with text boxes, menus and check boxes that the user files in or selects. When the user clicks
on a button on a from, the data from the form is sent to the web server.

Reg.No:-10898/06 4G
https://inranko.com
The following illustration shows how a user can send a query to a server application that adds two numbers.
The user types the two numbers to be added, then clicks a button, which in turn sends the two numbers to the
web server.
Figure shows a user posting an order to database using the internet database conector.The user completes
aform, then clicks a button, which in turn sends the data in the form to the server. The server posts the data to
a database then confirms the order by sending HTML page.
Directory listing
If users send queries without specifying a particular file, you can either create a default document for a web site
or for a particular directory or you can configure is your server for directory browsing. If no default document is
created for a directory and directory browsing is configured, a directory listing (a hypertext version of a
windows explorer or file manager listing) is returned to the user in the from of HTML page. The user can then
jump to the appropriate file by clicking it in the directory listing.
Understanding tags
In HTML, tags help to identify the logical text document parts,that is the major structural components in a
document, such as the headings,paragraps and horizontal lines.To include a heading,paragraph or a horizontal
line in a text document,we must use appropriate tags.a tag consists of a left angle bracket(<),a tag name and a
right angle bracket (>).Tags are usally paired e.g a heading tag is written as <H1>and </H1>,to indicate
starting of and end of the tag instruction.The end tag looks just like the start tag except for a forward
slash(/)that precedes the text within the brackets.
While typing tags,one should be particularly careful not to include extra spaces.If the browser encounters a
space,it may not recognize the and consequently,may not disply the information correctly.
The correct way of writing: <TITLE> correctly written tag</TITLE>
The correct way of writing: <TITLE> incorrectly written tag</TITLE>
Tags are classified into two types
➢ Container tags
➢ Empty tags

Reg.No:-10898/06 5G
https://inranko.com
Container tags:It is define a section of text (or the document itself) and specify the formatting or construction
for all of the text between the start and end tags.A container tag has both a beginning and an end.for
example,to makea certain section of the text bold,<B>bold</B>is used.
Empty tags:A tag which has only the opening tag is called an empty tag.For example,a horizontal rule has only
the open tag<HR>.Empty tags represent formatting constructs,such as line breaks<BR>,horizontal rules
<HR>and paragraph marks <P>.These tags indicate one time instructions that viewers can read and execute
without concern for any other HTML construction.
Understanding elements
An element is a fundamental component of the structure of an HTML text document.An element comprises:a
start tag,content and an end tag.some examples of elements are paragraphs,horizontal rule and lists.
Understanding attributes
Some of the tags may include attributes,which provide additional information about an element,such as how
elements should align,how other files should be accessed or even the color of an element.For example,while
using the heading tag,the align attribute can be given.
Tag name attribute name attribute value
<H1 ALIGGN =” CENTER”>A Centered heading will be displayed</H1>
Affected content end tag
attribute
Start tag
HTML element
In this figure the first word between the brackets is the tag’s name.Any futher words and charaters are the
attributes.Thus,H1 is the tag name and ALIGN is the attribute which has the value CENTER.
Creating and saving an HTML document
There are basically two methods of creating an HTML web page- you can either type the text and HTML
commands yourself into a simple text editor or you use graphic-based software that generates the HTML coding
for you. These graphic - based software packages are often referred to as WYSIWYG editors,meaning,’what
you see is what you Get’ and of course, there are editors out there that are a combination of both.
In this section, we will be working with Notepad as an editor.
Let us begin:
Step1: fire of your editor
You can use almost any word-processor or create an HTML document. The only requirement is that you save
the file as text or ASCII file. Let us open the simplest editor on your system. It can be notepad on windows or
simple text on Mac or vi on UNIX.
To start notepad, click the start button, point programs, point to accssorises, and then click notepad.
Notepad

Reg.No:-10898/06 6G
https://inranko.com
Step2: A notepad window will appear.
Now, you you are ready to type the HTML code .Notice the blue bar on top-it says Untitled-Notepad.Also, note
that the course is blinking at the beginning of the file. this is where you will type.
Figure: notepad window
Step 3 : type the HTML code in your Notepad window as shown in figure
Figure: HTML code in notepad
Step 4 : save the file.
After you have typed the HTML code,you have to save it as an HTML file.Click on the file menu(in
Notepad).Select save As. Notepad will show a dialog box asking for a file name as shown in figure.

Reg.No:-10898/06 7G
https://inranko.com
(Figure: save as dialog box)
Step 5: In the file name text box, type first.html.Click on save button.
Step 6: check the file name.
You will notice that after saving the file, the Notepad title bar changes from Untitled-Notepad to first.html –
Notepad that the extension of the file must be.htm,(or.html)for windows to recognize that this is an HTML file.

Reg.No:-10898/06 8G
https://inranko.com
Step 7: fire up you web browser.
If your browser is not already open, double-click on the shortcut icon of internet explorer (or Netscape
navigator) on the desktop. If your browser is already open, press to open a browser window.
Step 8: select the file.
Once the browser window is opened, click on file menu. select open option. Your browser will now present open
dialog box. Click browser button. Locate the file you just saved. you will recall that it was first.html. Click ok,
after you select the file.
Figure Microsoft internet explorer open dialog box
Step 9: preview the file.
The HTML document will open and should look like an authentic internet document. You need not be connected
to the internet to view HTML document stored on your computer. Notice that the name of the file, in the
Address text box, showsC: first.html.
(Figure output as viewed in internet explorer)
If your browser did not open the file or it looked different, check:
➢ Did you save your work as a text file with an extension of .html or .htm?
➢ Did you type the HTML exactly as you saw in the example?
Remember small things like missing a <or typing a() instead of a(/),are enough to spoil the show! Check and
repeat the above steps if necessary.

Reg.No:-10898/06 9G
https://inranko.com
Already many questions must have crossed your mind regarding the HTML elements used, what if you want to
customize and design your own page. Be patient, you will get answers for all your questions by the end of this
chapter.
Document layout of an HTML page
Every HTML page should contain certain standard HTML tags. there are thee tags that are required for every
pages. They are:
▪ <html></html>
▪ <head></head>
▪ <body></body>
<Html>
<Head>
Heading not displayed
In the
Browser window
</head>
<Body>
Body what is in here
Is displayed in the
Browser window
……….
</body>
</html>
Figure outline of HEAD and BODY section of a web page
Each document consists of head and body text. The head contains the title and the body contains the actual
text that is made up of paragraphs, lists and other elements.
HTML section
<HTML>is the tag that starts every web page. It informs the browser that the page it is loading is formatted
using the HTML code. Every HTML document starts with the <HTML>tags and ends with the </html> tag.
Syntax:
<Html>……………. </html>
Head section
The head section is opened and closed by the <HEAD> and <HEAD>tags. Information belonging in the head
section should be placed between these two tags. the head of an HTML document is an unordered collection of
information about the document, A number of tags can be placed between the <HEAD>and </HEAD>tags
including <BASE>,<ISINDEX>,<LINK>,<META>,<SCRIPT>,<STYLE> and <TITLE>.A browser generally does
not display this information, except for text contained by the <TITLE> tag. The main head element is the
<TITLE> tag. The <TITLE> tag specifies the title of the HTML document. Every document should have a title –
it appears on the title bar of the browser window –and when a user bookmarks it or looks in their history list, it
is the text they will see. The title of the HTML document should be a meaningful one.
The <HEAD> and </HEAD> elements do not directly affect the look of the document when rendered.

Reg.No:-10898/06 10G
https://inranko.com
Syntax:
<HEAD>
<TITLE>the title is included here </TITLE>
</HEAD>
Body section
The body section specifies the main content of a document.It is opened and closed by the <BODY>and
</BODY> tags.The text and images of the document to bedisplayed by the web browser should be placed
within these two tags. The <BODY>tag should be placed immediately
after the closing head tag(</head>) and before any image or text include in the document.
A matching </body> tag must be placed at the foot of the page.This tag ends the body section and should be
placed before the closing HTML tag,</HTML>
Syntax:
<HTML>
<HEAD> ………</HEAD>
<BODY>the body is include here</BODY>
</HTML>
The body of HTML documents contains all the text and images that make up the page together with all the
HTML elements that provide the control or formatting of the page (unless the document uses a style sheet to
control presentation).
It is possible to control the document color schema and background by specifying certain attributes in the
<BODY……> declaration.However,it should be noted that most browsers provide the yser with a means to over-
ride color schemas and prevent images from loading.
The attributes associated with the <BODY> tag are:
Background: This attributes can be used to point to an image file that will be titled acrossthe browser window to
provide a background for the document.
Syntax:
<BODY BACKGROUND=”URL or path/filename.gif”>
Document here
</BODY>
This would causes text, images,etc., which appeared in that document to be placed on a background consisting
of the (filename.gif) graphics file being tiled to cover the viewing area.
Microsoft’s internet explorer supports the ability to watermark HTML documents, by fixing a background image
(if specified) so that it does not scroll as a normal background image does.
To give apage with a background image a watermark background. add <BODY BACKGROUND=”filename.gif”
BGPROPERTIES=”FIXED”>
NOTE: BGPROPETIES attribute is internet explorer specify.
Bgcolor: this attributes allows setting of the background color for the document.
Syntax:
<body bgcolor=”#rrggbb or color name”>
Document here
</body>
Where “#rrggbb” is a hexadecimal red-green-blue triplet used to specify the background color.Alternately,the
color can be set to one of the named colors supported by the browser.
For example,for a white background color,the hex code for the body tag is #FFFFFF.
That is because the hex number ‘FF’ translates into ‘255’ – the bright number of a single color,red=255,
green=’255’ blue=255.Thus the entire hex code for RGB=255 is #FFFFFF.
The darkest color available is ‘0’ which in hex, is ‘00’ .A bright RED page would be FF0000; a bright GREEN page
would be ‘00FF00’; and a bright BLUE page would be 0000FF.Each two digits of the hex code represents the
hex translation of each color component: RedRedGreenGreenBlueBlue.
Text:

Reg.No:-10898/06 11G
https://inranko.com
if a background image or color is used it will probably be necessary to alter the foreground colors in order to
establish a sensible contrast for the document.This attribute is used to control the color of all the normal text in
the document. This basically consists of all text that is not especially colored to indicate a link. The format of
TEXT is the same as that of BGCOLOR.
Syntax:
<BODY TEXT=”#rrggbb”>
Document here
</BODY>
Example:
<BODY BGCOLOR=”lightyellow” TEXT=”#000000”>
……….
</BODY>
LINK, VLINK and ALINK: These attributes allow control over the link text coloring. VLINK stands for visited
link and ALINK stands for active link. LINK changes the text color indicating a link in document. This is the
normal color for the link.VLINK changes the text color indicating a visited (followed) link in a document.ALINK
changes the color of text that indicates a link in a document. This is the color the link flashes to when the user
clicks it.
The default colorings of these attributes are:
LIKE = “blue” (#0000FF),VLIKE = “purple”(400040) and ALIKE = “red”(#FF0000).
Again the format for these attributes is the same as that for BAGCOLOR and TEXT.
Syntax:
<BODY LINK=”#rrggbb” VLINK=”#rrggbb” ALINK=”#rrggbb”>
Document here
</BODY>
Example:
<BODY LINK =”#0000FF” VLINK =”#00AA00” ALINK=”#FF0000”>
………
</BODY>
Example: background image
Important: make sure the background file is present at the specified location.
Write the following code in notepad and save as HTML file.
<HTML>
<HEAD>
<TITLE>BACKGROUND IMAGE </TITLE>
</HEAD>
<BODY BACKGROUND=”C:WINDOWSBACKGRND.GIF” TEXT=”#000000”>
This is the background image.
</BODY>
</HTML>
Tags Ending a Page
</BODY>
</HTML>
</BODY>ends the portion of the page containing the document itself and should be placed after any text or
image that will be displayed by the web browser.<HTML>ends the page itself. The head and body sections are
enclosed within the opening <HTML>and closing tags.

Reg.No:-10898/06 12G
https://inranko.com
Lesson-2
HTML Elements
HTML elements are broadly classified into categories.
➢ Text-level elements
➢ Block-level elements
Text-Level elements
Text-level elements are the elements that affect the text of the document. these elements are divided into two
types: physical elements and logical elements.
Physical Elements: physical elements are also known as character formatting elements. They used to specify
how text should be rendered. When working with the text, sometimes you want the text to have a particular
look, such as bold, italics or underlined. Elements that perform this type of formatting are physical elements
that produce strict rendering of the text.
The common physical elements are:
• Bold: The Bold element specifies that the text should be rendered in boldface.
Syntax: <B>…………</B>
• Italic: The Italic element specifies that the text should be rendered in italic font.
Syntax: <I>…………</I>
• Underline: The Underline element states that the enclosed text should be rendered as
underline text.
Syntax: <U>…………</U>
• Big: The Big element specifies that the enclosed text should be displayed using a bigger
font (compared with the current font).
Syntax: <BIG>…………</BIG>
• Small: The Small element specifies that the enclosed text should be displayed using a small
font (compared with the current font).
Syntax: <SMALL>…………</SMALL>
• Strike: The strike element states that the enclosed text should be displayed with a
horizontal line striking through the text.
Syntax: <STRIKE>…………</STRIKE>
• subscript: The Subscript element specifies that the enclosed text should be displayed as a
subscript using a smaller font (compared to the rest of the text).
Syntax: <SUB>…………</SUB
• superscript: the superscript element specifies that the enclosed text should be displayed as
a superscript and using a smalller font (compared with normal text).
Syntax: <SUP>…………</SUP>
• typewriter: the teletype element specifies that the text should berendered in fixed width
typewriter font.Syntax: <TT>…………</TT>
Example: Using Physical Elements
<HTML>
<HEAD>
<TITLE>Using physical elements</TITLE>
</HEAD>
<BODY>
<B>this text should appear bold. </B><BR>
<I>this text should appear in italics. </I><BR>
<U>this text should appear Underline. </U><BR>
<BIG>this text should appear bigger than the otherwise current font size. </BIG><BR>

Reg.No:-10898/06 13G
https://inranko.com
<SMALL>this text should appear smaller than the otherwise current font size. </SMALL><BR>
<STRIKE>this text should appear crossed out. </STRIKE><BR>
<S>this text should also appear crossed out. </S><BR>
This is normal text, but<SUB> this text should be shown as a subscript. </SUB><BR>
This is normal text, but<SUP> this text should be shown as a superscript. </SUP><BR>
<TT>this text should appear in a typewriter-like font. </TT>
</BODY>
</HTML>
Output: open the above file in the web browser and you will see the output shown below.
Logical elements: Logical elements indicate the type of content that the HTML document comprises of. They
suggest to the browser that the enclosed text should be rendered in a certain way he display rather than fixing
the display type .Examples of the logical elements are
emphasis,citation,code,strong,etc.
The common logical elements are:
• Cite: the citation element specifies a citation typically rendered as italics. It is used to highlight external
resource in a page to which the page is referring to. It has no attribute.
Syntax: <CITY>……………..</CITY>
• Code: The code element indicates an example of code; typically rendered as monospaced font.
Syntax: <CODE>…………………</CODE>
• Emphasis: The emphasis element indicates typographic emphasis typically rendered as italic.
Syntax: <EM>…………………</EM>
• Keyboard input: The keyboard element indicates text typed by a user; typically rendered as
monospaced. It might commonly be used in an instruction manual.
Syntax: <KBD>………………<KBD>
• Sample: The sample element indicates a sequence of literal characters; typically rendered as
monospaced.
Syntax: <SAMP>…………………</SAMP>
• Srtong: The strong element indicates strong typographic emphasis typically rendered in bold.
Syntax: <STRONG>…………………</STRONG>
• Variable: The variable element indicates a variable name; typically rendered as italics.
Syntax: <VAR>…………………</VAR>
Example: using logical elements
<HTML>
<HEAD>

Reg.No:-10898/06 14G
https://inranko.com
<TITLE> using logical elements</TITLE>
</HEAD>
<BODY>
This book title,
<CITE> internet and web design,</CITE>
Should look cited. <BR>
The last world in this sentence should appear styled to indicate an example of
Computer.
<CODE>code<CODE>.<BR>
This text contains an
<EM> emphasized</EM>
word. <BR>
The last word in this sentence should appear styled to look like text that a reader of
a web page might type in response to direction
<KBD>given</KBD>.<BR>
The last word in this sentence should appear style to indicate a sequence of literal
<SAMP> charaters </SAMP>.<BR>
<STRONG>this text should look strong. </strong><BR>
The last word in this sentence should appear style to indicate a.
<VAR>variable</VAR>.<BR>
</BODY>
</HTML>
Output: open the above file in the web browser and you will the output as shown below.
Block-level elements
Block-level elements define structural content blocks, such as paragraphs or lists. They are used for the
formatting of whole blocks of whole blocks of text within an HTML document, rather than single characters.
They should all (if present) be within the body of the document. If a document is written carefully in a block
style, it may be possible to improve its machine readability.
The common block-level elements are:
Section headings
The heading elements demonstrates the use of headlines in HTML documents. Six difference levels of heading
tags are there in HTML, <H1> to <H6>. The bigger the number prefixing the tag, the smaller the size of the
resulting text. Page in are used to logically organize a page into separate sections for easier comprehension.
Lower level

Reg.No:-10898/06 15G
https://inranko.com
Headings in turn subdivide each section. Headings automatically create space between them and any text
preceding or following them. ALIGN attribute can be used with the heading tag to position the heading on the
browser screen. It can be set equal to LEFT, RIGHT or CENTER.
Example: Various Heading Tags
<HTML>
<HEAD>
<TITLE>headings Demo</TITLE>
</HEAD>
<BODY>
<H1 ALLIGN = “CENTER”>headings display</H1>
<H1 ALLIGN = “LEFT”> This headline uses H1. </H1>
</BODY>
</HTML>
Paragraphs
The paragraphs element indicates the start of a paragraph in the text. Typically, paragraphs are surrounded by
a vertical space of one line or half a line. With some browsers the first line in a paragraph is indented.

Reg.No:-10898/06 16G
https://inranko.com
ALLIGN=”LEFT”,”CENTER”,”RIGHT”attributes have been added to the <p> element. Left setting is the default
alignment.
Example working with paragraph
<HTML>
<HEAD>
<TITLE>paragraphs Demo </TITLE>
</HEAD>
<BODY>
<P>this is the first paragraph of text that is to be displayed.
<P ALIGN=”LEFT”>this is the second paragraph align to the left side of the page layout.
<P ALIGN=”RIGHT”>this is the third paragraph align to the right side of the page layout.
<P ALIGN=”CENTER”> this is a centered paragraph.
</BODY>
</HTML>
BRAKES
To insert returns or blank lines in a document, the <BR> element is used. The line break tag,
<BR> moves any text following it to the text line.
Example: working with breaks
<HTML>
<HEAD>
<TITLE>working with breaks </TITLE>
</HEAD>
<BODY>
This line <BR> is broken.
</BODY>
</HTML>

Reg.No:-10898/06 17G
https://inranko.com
OUTPUT: open the above file in the web browser an you will see the output as shown
Below.

Reg.No:-10898/06 18G
https://inranko.com
Lesson-3
Preformatted text
The Preformatted text element presents blocks of text in fixed-width font and so is suitable for text that has
been formatted on screen.
The <PRE> element may be used with the optional WIDTH attribute. The WIDTH attributes specifies the
maximum number of characters for a line and allows the HTML user to select a suitable font and indentation. If
the WIDTH attribute is not present, a width of 80 characters is assumed. Where the WIDTH attribute is
supported, widths of 40,80,and 132 characters should be presented optimally with other widths being rounded
up.
Within preformatted text:
Line breaks within the text are rendered as a move to the beginning of the next line.
The <p> element should not be used. If found ,it should be rendered as a move to the beginning of the next
line.
Anchor elements and character highlighting elements may be used.
Elements that define paragraph formatting (headings, address, etc) must not be used.
Example: preformatted text
Write the following code in notepad and space as HTML file.
<HTML>
<HEAD>
<TITLE> preformatted paragraphs</TITLE>
</HEAD>
<BODY>
<PRE>
Department number of employees document codes
Finance 25 234
Marketing 27 235
Producing 35 236
Operation 32 275
HRD 24 278
</PRE>
</BODY>
</HTML>

Reg.No:-10898/06 19G
https://inranko.com
HORIZONTAL RULES
A horizontal rule element is a divider between sections of text such as a full width horizontal rule or an
equivalent graphic display. The <HR> tag specifies that a horizontal rule of some sort (the default being a
shaded engraved line) be drawn across the page. To this element recent browsers have added support for 4
new attributes which allow the document author to describe how the horizontal rule should look.
• <HR SIZE=”number”>: The SIZE attributes lets the author give an indication of how thick he wishes
the horizontal rule to be. A pixel value should be given. The default size is 1.
• <HR WIDTH=”number” “percent”>: The default horizontal rule is always as wide as the page. With
the WIDTH attribute the author can specify an exat width in pixels or a relative width measured in
percent of page width.
• <HR ALLIGN=”LEFT” “RIGHT” “CENTER” >: Now that horizontal rules do not have to be the width of
the page, it is possible to specify the horizontal alignment of the rule.
• <HR NOSHADE>: For those items when a solid bar is required the NOSHADE attribute specifies that the
horizontal rule should not be shaded at all.
• <HR COLOR=”name” “#rrggbb”>: internet explorer allows the specifying of the hard rule color.
Accepted values are any of the explorer supported color names or any acceptable ‘rrggbb’ hex triplet.
Syntax
<HR ALLIGN=”LEFT”>
Example: working with Horizontal rule
Write the following code in notepad and save as html file.
<HTML>
<HEAD>
<TITLE> Horizontal Rule Demo</TITLE>
</HEAD>
<BODY>
<hr width="500" size="10" color="blue">
<hr width="400" size="8" color="red">
<hr width="300" size="5" color="cyan">
<h1 align="center">check out the horizontal rule width</h1>
<hr width="300" size="5" color="cyan">
<hr width="400" size="8" color="red">
<hr width="500" size="10" color="blue">
</body>
</html>
Output: open the above file in the web browser and you will see the output as shown below

Reg.No:-10898/06 20G
https://inranko.com
• DIVISIONS :-
The <DIV> element is used to structure HTML documents into unique section or divisions Netscape has
implemented the <DIV> element to work as the <P ALIGN = ............> element Essentially, text
surrounded by the <DIV> … </DIV> elements will be formatted according to the description attached
to the ALIGN attribute within the <DIV> elements.
<DIV ALIGN=”LEFT” | “RIGHT” | “CENTER”> Section of text <DIV> elements.
<DIV ALIGN=”LEFT” “RIGH” “CENTER”> section of text </DIV>

Reg.No:-10898/06 21G
https://inranko.com
<html>
<head>
<title>Alpha</title>
</head>
<body>
<div align="left">
<h3>Left justify text by putting it within the DIV tags.</h3><br>
Many paragraphs and other block-level elements can be affected by a
DIV at once.<br>
Notice all the text should be left aligned.
</div>
<br><br>
<div align="center">
<h3>Center some text by putting it within the DIV tags.</h3><br>
DIV at once.<br>
</DIV>
<br><br>
<div align="right">
<h3>Center some text by putting it within the DIV tags.</h3><br>
DIV at once.<br>
</DIV>
</body></html>
OUTPUT:- Open the above file in the web browse and you will see the output as shown below.

Reg.No:-10898/06 22G
https://inranko.com
• CENTER
All lines of text between the beginning and end <CENTER> elements are centered between the current
left and right margins.
Syntax:
<center> ………..</center>
• ADRESS
The address element specifies such information as address,signature and authorship,often at the top or
buttom of a document.Typically,an address is rendered in an italic typeface and may be indented.It
carries an implied paragraph break before and the text enclosed.
Syntax:
<address>……..</address>
• BLOCKQUOTE
The blockquote element is used for including quotations in a document. A typical rendering would be a
slight extra left and right indent or italic font.The blockquote element causes a paragraph break and
typically provides space above and below the quote.
Syntax:
<blockquote>…………</blockquote>
EXAMPLE: USING BLOCK-LEVEL ELEMENTS
<Html>
<head>
<title>using block-level elements</title>
</head>
<body>
<address>mr.dalbir singh<br>
New delhi ,<br>
India<BR>
</ADDRESS>
<BR>
Here is a quote from p. erdos:
</BLOCKQUOTE>
“A mathematician is a device for turning coffee into theorems.”
</BLOCKQUOTE>
<CENTER> this text appears centered on the page. </CENTER>
</BODY>
</HTML>
LISTS

Reg.No:-10898/06 23G
https://inranko.com
Lists are a great way of provide information in a structured, easy-to-read format.They can be
‘nested’ within one another to create sub-lists (the effect of this on the appearance of a document differs with
the browser used). The text of a lists entry uses the same style and fonts as a normal text.
The types of lists supported by HTML are:
• Unordered or bulleted list
• Ordered or number list
• Definition list
But before discussing the different list tags, here is a brief discussion on list item<LI>tag. The <LI> denotes an
item in a list. It is only used as a sub-element of a list type. The <LI> does not require an end tag. Ordered and
unordered lists use it to mark a component of their structure.
The list tag can adopt these three attributes.
• Start: this attribute is used in ordered lists only. You can change the starting value of the numbering
sequence from the default of 1 to any other value you chose.
• Type (ordered and unordered lists): You can modify the numbering scheme in an ordered list or
the bullet character in an unordered list by setting TYPE to one of the list types available. Ordered list
types include Arabic numerals (1,2,……), Uppercase alphabets (A,B,……), lowercase alphabets (a,
b,……..), Uppercase roman numerals (I ,II,……….) and lowercase roman numerals (I, ii,…..).
The unordered list types include DISC (solid circular bullet), SQUARE (solid square bullet) and
CIRCULR (open circular bullet).
• Compact: Instructs the browser to render the list item in as small a space as possible.

Reg.No:-10898/06 24G
https://inranko.com
Lesson-4
Unordered or bulleted list
Using an unordered list tag causes bullets to be placed before the listed text. An unordered list is opened by
<UL> and closed by </UL>. The <LI> tags precede listed items between them. The basic bulleted list has a
default progression of bullet types that change according to the level of the list item from a solid disc to a circle
to a squre.Netscape allows the TYPE attribute to be used within the <UL> element so that irrespective of the
indent level, the bullet type can be specified. To give even more flexibility to lists, Netscape allows the TYPE
attribute to be used within the <LI> element as well.It takes the same values as <UL> and it changes the list
type for that item and all subsequent items, unless it is overridden by another TYPE specification.
Note: The TYPE attribute when used in the <UL> and <LI> elements is Netscape specific.
The three types which can be specified in a <UL> list tag are:
TYPE=”DISC”
TYPE=”CIRCLE”
TYPE=”SQURE”
SYNTAX:
<UL TYPE = “list type”>
<LI>……list item goes here……..
<LI>……list item goes here…….
</UL>
Example: Unordered list
<Html>
<Head>
<Title>unordered list demo </title>
</head>
<Body>
<h3> I am going to learn following packages: </h3>
<Ul>
<li> dream weaver
<li> adobe Photoshop
<li> adobe illustrator
<li> macromedia director
<li> macromedia flash
</ul>
<h3> an unordered list with different types. </h3>
<ul>
<li type=”disc”> disc item
<li type=”circle”> circle item
<li type=”square”> square item
</ul>
<p> internet explorer does not render type settings for unordered lists.
<h3> a nested unordered list </h3>
<ul>
<li> item 1
<ul>
<li> item 2
<ul>
<li> item 3
</ul>
</ul>
</ul>

Reg.No:-10898/06 25G
https://inranko.com
</body>
</html>
Order or numbered list
Using ordered list tag causes numbers (starting from one) to be placed the listed text. An ordered list is opened
by <OL> and closed by </OL>. The <LI> tags precede listed items between them. The average ordered list
counts 1,2,3, ……., etc
The five types which can be specified in a <OL> list tag are:
Type=”1”- Arabic numerals (default), e.g. 1,2,3….
Type=”A”-Uppercase letters, e.g. A,B,C, ……..
Type=”a”-lowercase letters, e.g.a, b, c,…….
Type=”I”-Uppercase roman numerals, e.g. I,II,III,……
Type=”i”- lowercase roman numerals, e.g. i,ii,iii,……
Remember that the TYPE attribute within the <OL> element sets the numbering scheme for the whole list,
unless it is overridden by a TYPE value in an <LI> element. Each <LI> element may have a local TYPE attribute
set to 1,A,a, I or i.Once an <LI> element is set with a new type, it overrides the numbering style for the rest of
the list, unless another <LI> sets the type attribute.

Reg.No:-10898/06 26G
https://inranko.com
For lists that need to start at values other than 1 the START attribute can be used. Whether the TYPE attribute
is a letter or a numeral, the START value is always specified in the default numbers and converted based on the
TYPE attribute before disply.
Thus, START =”5” would display either an ‘E’ ,’e’ , ‘V’ , ‘v’ or ‘5’ based on the TYPE attribute.
An <LI> element within an ordered list can override the current numbering of the list should continue from the
value set.
Syntax:
<OL TYPE=”list START=”start_value”>
<LI>…….list item goes here……….
<LI>……list goes here………
</OL>
Example:
<OL TYPE=”a” START=”2”>
Produces an ordered list beginning with the lowercase letter b.
Example: Ordered list
<Html>
<Head>
<Title>ordered list demo </title>
</head>
<Body>
<h4>An ordered list with default list type. </h4>
<Ol>
<li> one</LI>
<li> two</LI>
<li> three</LI>
</ol>
<h4> an ordered list with variety of types. </h4>
<ol>
<li type=”1”> Arabic numerals
<li type=”A”> Uppercase letters
<li type=”a”> lowercase letters
<li type=”I”> Uppercase roman numerals
<li type=”i”> lowercase roman numerals
</ol>
<h4> an ordered list with different types and different values. </h4>
<ol type=”A” strat=”4”>
<li> this should be D.
<li> this should be E.
<li value=”10”> this should be J.
<li> this should be K.
<li type=”1”> this should be 12.
</ol>
</body>
</html>
Definition list
A definition list is opened by <DL> and closed by </DL>. A definition contains terms and definitions. The
browser displays the terms left aligned and the definitions indented on the next line. The various tags
associated with the definition list are:
• <DL>: this tag defines a definition list in the HTML document.

Reg.No:-10898/06 27G
https://inranko.com
• <DT> this tag defines a term in a definition list in the HTML document.
• <DD> this tag defines a definition in a definition list in the HTML document.
Use of <DT> without <DD> or vice versa is non-standard. Neither the <DT> nor the <DD> element requires a
closed tag, but for long definition, it may be helpful.
COMPACT attribute can be used with the definition list. It compacts the definition list by placing the <DT> tag
on the same line as the definition defined by the <DD> tag, provide the term is short enough.
Example: definition list
<HTML>
<HEAD>
<TITLE>DEFINITION LIST DEMO </TITLE>
</HEAD>
<BODY>
<H4> A DEFINITION LIST </H4>
<DL>
<DT><B>JAVA</B>
<DD> IS A PROGRAMMING LANGUAGE BASED ON OOPS.
<DT><B>JAVASCRIPT</B>
<DD> IS A SCRIPTING LANGUAGE USED FOR DESIGNING WEB PAGES.
<DT><B>SQL SERVER </B>
<DD> IS AN RDBMS BY MICROSOFT.
</DL>
<BR><BR>
<H4> A DEFINITION LIST WITH THE COMPACT ATTRIBUTE. </H4>
<DL COMPACT>
<DT><B> ALPHA </B>
<DD> THE FIRSTN LETTER OF THE GREEK ALPHABET.
<DT><B>BETA </B>
<DD> THE SECOND LETTER OF THE GREEK ALPHABET.
<DT><B>GAMMA</B>
<DD> THE THIRD LETTER OF THE GREEK ALPHABET.
</DL>
</BODY>
</HTML>
Output: open the above file in the web browser and you will see the output as shown below.

Reg.No:-10898/06 28G
https://inranko.com

Reg.No:-10898/06 29G
https://inranko.com
Lesson-5
SOME OTHER FORMATTING STYLES
In HTML documents, you can also add some other formatting effects. In the following sections, we will show
you how to specify fonts and sizes and how to add scrolling and blinking text.
• Specifying fonts and font sizes
The font element lets you change the color, size and face (font family) of the font. The <FONT> tag overrides
any other font settings. In other words, text within the scope of the <FONT> tag is displayed in the color and
size you specify, regardless of any other settings.
The <FONT> tag has the following attributes:
• Color: This attribute sets the color of text that will appear on the screen. Colors can either be set by
using one of the color names supported by the browsers or as a hexadecimal ‘rrggbb’ triplet value.
Syntax:
<FONT COLOR=”#rrggbb or color name”>………. </FONT>
Example:
<FONT COLOR=”#FF0000”>This text is red. </FONT>
Or
<FONT COLOR=”red”> this text is also red. </FONT>
• Face: this attribute sets the typeface that will be used to display the text on the screen. The typeface
displayed must already be installed on the user computer. Substitute typefaces can be specified in case
the chosen typeface is not installed on the customer’s computer. If no match is found, the text will be
displayed in the default type according to the browser preference settings.
Syntax:
<FONT FACE =”name[, name] [, name]”>…….</FONT>
Example:
<FONT FACE =”arial, lucida sans, times new roman”> This text will be displayed in either arial, lucida
sans or times new roman, depending on which fonts you have installed on your system. </FONT>
Note: when using this element, care should be taken to use font types that will be installed on the users
computer if you want the text to appear as desired. Changing the font face is supported by internet explorer
and Netscape only.
• Size: This attributes defines the size of the font, in a range from 1 to 7, with a default size of 3.
Syntax:
<FONT SIZE=”7”>HUGE</FONT>.
EXAMPLE: WORKING THE FONT SIZE
<HTML>
<HEAD>
<TITLE>various font sizes</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE=”1”> This is font size 1. </FONT>
</BODY>
</HTML>

Reg.No:-10898/06 30G
https://inranko.com
• Scrolling text
The new marquee element allows the author to create a scrolling text (as the name suggests, a scrolling text is
much like the windows marquee screen saver).
Syntax:
<MARQUEE>………..</MARQUEE>
NOTE: the <MARQUEE>…….</MARQUEE> element is currently only supported by the internet explorer
browser.
Marquees can be left or right aligned and have a variety of attributes to control them.
• Align: this attribute can be set to either TOP,MIDDLE or BOTTOM and specifies that the text around
the marquee should align with the top, middle or bottom of the marquee.
• Behavior: this can be set to SCROLL, SLIDE or ALTERNATE. It specifies how the text should behave.
SCROLL (the default) means start completely off one side, scroll all the way across and completely off,
then start again. SLIDE means start completely off on side, scroll in and stop as soon as the text
touches the other margin. ALTERNATE means bounce back and forth within the marquee.
• Bgcolor: this specifies a background color for the marquee, either as a ‘rrggbb’ hex triplet or as one of
the internet explorer prenamed colors.
• Direction: this specifies in which direction the text should scroll. The default is LEFT, which means
scrolling to the left from the right. This attribute can be also be set to RIGHT, which would cause the
marquee to scroll from the left to right.
• Height: This specifies the height of the marquee, either in pixels (HEIGHT=”n”) or as a percentage of
screen height (HEIGHT=”n %”).
• width: This specifies the width of the marquee, either in pixels (width=”n”) or as a percentage of
screen height (width=”n %”).
Examples:
<MARQUEE> this text will scroll from left to right slowly.</MARQUEE>
<MARQUEE BEHAVIOR=”SLIDE”>This marquee will scroll in and “stick”. </MARQUEE>

Reg.No:-10898/06 31G
https://inranko.com
<MARQUEE BEHAVIOR=”ALTERNATE”>This marquee will bounce back and forth. </MARQUEE>
<MARQUEE HEIGHT =”50%” WIDTH=”PINK”> This marquee, is half the height of the height of the screen and
80% of the screen width. </MARQUEE>
Blinking text
Surrounding any text with this element will cause the selected text to blink on the viewing page. This can server
to add extra emphasis to selected text.
Syntax:
<BLINK>………</BLINK>
NOTE: The <BLINK>…….</BLINK>element is currently only supported by the Netscape navigator browser.
Example:
<BLINK> This text would blink on the page. </BLINK>
Comment tags:
If you want to leave notes for yourself in an HTML document, but don’t want those notes to show up in the
browser window, you need to use the comment tag.
Any text placed between the <COMMENT>and </COMMENT>elements will not render on the screen allowing
comments to be placed in HTML documents.
Syntax:
<COMMENT>……. </COMMENT>
Example:
<COMMENT> This text won’t render. I can say what I like here, it won’t appear. </COMMENT>
You can also include comments HTML document by surrounding the text that is to be ignored with <!—and -->.
After the comment delimiter, all text up to the next occurrence of → is ignored. Hence, comments can’t be
nested. White space is allowed between the closing – and>, but not between the opening <! and --.
Example:
</! – Hi, I am a comment.-->
Your comment would go where the next ‘Hi’ I am a comment’ appears. You need an exclamation point after the
opening bracket, but not before the closing bracket. Alsi, there is no end tag, i.e. a tag like </! – text -->
does not exist.
You can put comments pretty much anywhere, but you have to be aware of one important thing: You should
not put any HTML markup within a comment tag.
Hypertext links
Hypertext link is a link that provides a path that connects you form one part of an HTML document to another
part of the same document, a different document or another resource. HTML makes it possible to define
hyperlinks to other information across the globe. Linking is possible, as every document on the web as a unique
address known as URL. A link usually appears as a uniquely colored word that you can click to be transported to
another web page.
The main way of define hypertext links is with the anchor element, <A>. A link is simply a pointer from the
source document to the destination document. The link text is usually displayed as blue and underlined text.
Hyperlinks can do many things:
• Link to another document
• Link to another place within the same or different) document
• Link to an image, sound or moving picture
• Link to a gopher, FTP or telnet connection
• Link to an e-mail server
An Anchor element

Reg.No:-10898/06 32G
https://inranko.com
The Anchor element is marked text that is the start and or destination of a hypertext link. Anchor elements are
defined by the <A> element. Links can be used to moved to a named position with your page to open a page
in a particular frame within a frameset, to open a page in a new browser window or just to change pages.
The <A> tag can be used for one of the two things: external navigation (link to an external document) and
internal navigation (link to a specify place within the same document) depending on which attribute is used.
The attributes associated with the anchor tag are:
Href: for linking, the anchor tag requires one attribute HREF. This attribute is used to set the URL of the
destination document.
Name: specifies the name of the anchor being set up.
The <A> element accepts several attributes but either the NAME or HREF attribute is trequired. Let us dicuss
two attributes.
HREF ATTRIBUTE
If the href attribute is present,the text between the opening and closing anchor elements becomes hypertext. If
this hypertext is selected by the readers, can view the document specified by the value of the attribute.
Anchor tag attribute link text
See <A HREF=”http://www.yahoo.com/fashion.html/”> The yahoo site</A> for update info on the
fashions.
URL closing tag
(Anchor element)
In figure clicking on the text the yahoo site takes the reader to a document located at http://www.
Yahoo.com/fashion.html(which is the yahoo web site)
Example attribute
<A HREF=”Homepage.html”>. click here to view my home page.</A>
In this example, clicking on the text ‘click here to view my home page’ takes the reader to another HTML
document, i.e. homepage.html.
Name attribute
This attribute is used to link from one part of the document to the other part of the same document or another
document. The anchor marks a spot within the document and the link tags are tied to that specific anchor.
Syntax:
<A NAME =”whatever”> text or image </A>
This tag is called an ‘anchor’ tag. This tag names a section of the page.
<A HREF =”#whatever”> click here to go the text or image </A>
This is the ‘link’ tag. It directs the browser to the named anchor. It is the # character that identifies the link as
going to a portion of a document. The links shown above are within one document or web page. The same is
applicable to set up links to portions of other documents provide the document has anchors defined in it.
EXAMPLE: LINKING TWO HTML DOCUMENTS
Write the following code in notepad and save as ‘page-1.html’.
<HTML>
<HEAD>
<TITLE>page1</TITLE>
</HEAD>
<BODY>
This is page 1
<BR>

Reg.No:-10898/06 33G
https://inranko.com
<BR>
<A HREF=”C:page-2.html”>click here to go to page 2. </A>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>page 2</TITLE>
</HEAD>
<BODY>
This is page 2
<BR> <BR>
<A HREF=”C:page-1.html”>click here to go to page 1. </A>
</BODY>
</HTML>
In this document, click on the text ‘click here to go to page 2’. It will take you to another HTML document, i.e.
page-2.html and you will see the output as shown below.
From this window you can go back to the page-1. Thus, your HTML documents are linked using anchor tag.
EXAMPLE: USING THE NAME ATTRIBUTE
<HTML>
<HEAD>
<TITLE>using the name attribute</TITLE>

Reg.No:-10898/06 34G
https://inranko.com
</HEAD>
<BODY>
<H1>earth care concerns</H1>
<A NAME =”top”HREF=”#bottom”>click here to go to the bottom of this page. </A>
<P>
<BR>
<BR>
This is the official web site of earth care concerns. We are dedicated towards making this world a better place
to live in, through our creativity and innovation in the field of science and environmental studies. Hope you will,
like always, be supportive and encourage us.
<P>
<HR>
To assist us this endeavor we have a dedicated team of professionals who guide us through all the processes.
Our distinguished panel consists of individuals from varied fields.
<HR>
<H2>our panel</H2>
<H4>FROM FILM INDUSTRY</H4>
Vandana shiva<BR>
Arundhati roy<BR>
Gail Omvedt<BR>
Ramchandra guha<BR>
Ashis Nandy<BR>
<A NAME=”buttom” HREF=”#top”> click here to return to top. </A>
</BODY>
</HTML>

Reg.No:-10898/06 35G
https://inranko.com
Lesson-6
LINKING BETWEEN SECTIONS OF DIFFERENT DOCUMENTS
Suppose you want to set a link from one document say parent.html to a specific to a specific section in another
document say child.html. Enter the HTML coding for a link to a named anchor (here in parent.html).
Example: in addition to the many state parks, Corbett park is also home to <A HREF=”child.html#wt”>next
create the named anchor (in this example ‘WT’) in child.html.
<H2><A NAME=”WT”> white tiger </A></H2>
Thus, clicking on the hyperlink in parent.html, It takes the user to the section linked in child.html
File.
Example:
The <A HREF=”information.html # glossary”> glossary </A> defines terms used in the document.
In this example, selecting glossary takes the reader to another anchor(i.e. <A NAME=”glossary”> Glossary
</A> ) in the document information.html.
Linking between section of different documents
Suppose you want to set a link from one document say parent.html to a specific section in another document
say child.html. Enter the HTML coding for a link to a named anchor (here in parent.html).
Example:
In addition to the many state parks, Corbett park is also home to <A HREF=”child.html #WT”>
Next create the named anchor (in this example ‘WT’) in child.html.
<H2><A NAME=”WT”>white tiger </A></H2>
Thus, clicking on the hyperlink in parent, it takes the user to the section linked in child.html file.
Example:
The <A HREF=”information.html#glossary”>glossary</A>defines terms used in the document.
In this example, selecting glossary takes the reader to another anchor (i.e.<A NAME=”glossary”> glossary
</A>) in the document information.html.
LINKING TO AN E-MAIL ADDRESS
This can be accomplished using the MALLTO attribute in hyperlink. It launches the e-mail program with the to
filed filled with the value from e-mail address and subject field with the subject specified.
Example:
<A HREF=”mail to: feedback@msn.com? Subject=feedback”>send your feedback
</A>
Several other froms of the HREF attribute are permitted by browsers. They are given in table.
Forms of the HREF attribute
Tag description
<A HREF=”http ://....”> makes a link to another document located on a
World Wide Web server.
<A HREF=”ftp ://....”> makes a link to an FTP site. Within an HTML
document, normally a connection to an
anonymous FTP site would be made.
<A HREF=”gopher ://....”> makes a link to a gopher server.
<A HREF=”news ://....”> makes a link to a newsgroup. Care should be
taken in using such links because the author
cannot know what newsgroups are carried by
the local news server of the user
<A HREF=”nntp ://....”> can be used to specify a different news server to
that which the user may normally use.
<A HREF=”telnet ://....”> activating such a link would initiate a talent
Session (using an external application) to the
machine specified after the telent://label.
UNIFORM RESOURCE LOCATOS (URLS)

Reg.No:-10898/06 36G
https://inranko.com
URL, an abbreviation for uniform resource locator gives a WWW browser the location and means
to get a source on world wide web. It is referred to as address for a web page, i.e. the server and
the directory on which it is stored and how we can retrieve it.
The syntax for URL is:
Protocol://host domain name/<directory path>/<object name>#<named anchor>
Domain name directory path named anchor
http://www.itinfo.edu/it/index.html#quiz
Protocol host name object name
Protocol (http://) indicates ‘how’
Host domain name (www.itInfo.edu) indicates ‘where’
Directory path (it) and object name specify ‘what’
Let us study them in more details
▪ Protocol: A protocol specifies communication between computers in a network of computers. The most
popular protocol used for retriving HTML pages on the web is the hypertext transfer protocol or
http.The other protocols are FTP,Gopher,Telnet, Mailto, etc.
▪ Host name: The next part e.g. www.itInfo.edu specifies the web server where the page exits. The
server name holds certain clues about the web page. In our current example, it is obvious by its name
that server is located at some educational institute (.edu).
▪ Domain name: domain name gives you information about the www sites. In the current example of the
URL, ‘edu’ indicates educational institute web site. Other domain names can be .com, .gov, .mil, .org,
.net, etc.
▪ Path and file name: this part of the URL specifies to the web browser the location of the specified file
on the server.
▪ Named anchor: this part tells the browser to jump to a named spot within the web page. They can be
created by name attribute of anchor tag, e.g. <a name=”guiz”></a>.
IMAGES
The <IMG> element is used to incorporated in-line graphics in HTML document. This element cannot be used
for embedding other HTML text. Netscape can use images saved in formats: .gif and .jpeg or .jpg. In general,
the smaller the image size, in kilobytes, the better; since all images take longer than text to download and
display.
The image element which is empty (no closing element) has these attributes:
SRC: the value of the SRC attribute is the URL of the image to be ambedded. It’s syntax is the same as that of
the HREF attribute of the <A> element. SRC is mandatory.
Syntax: <IMG SRC =”fly. gif”>
ALIGN: This attribute is used to align an image on the web page. The ALIGN attribute could be set a value of
TOP, BOTTOM or MIDDLE. When an image is include within a block structure of text, the next line of text would
be aligned at the top, middle, or bottom of the image, depending on the value of the ALIGN attribute. The two
other possible values of ALIGN are LEFT and RIGHT. When ALIGN is set to LEFT, the image is aligned to the left
and the text flows around to the right. Correspondingly, when ALIGN is set to RIGHT, the image is aligned to
the right and the text flows around to the left.
ALT: This attribute specifies which alternative text should be displayed, if a selected image is not displayed.
Alternate text should be provided for whenever the graphic is not rendered, i.e. if the user has image loading
turned off. Internet Explorer also uses any ALT text set as a ToolTip to be displayed when the users mouse
pauses over the image.
Example: <IMG SRC=”triangle.gif” ALT=”warning:”> be sure to read these instructions.

Reg.No:-10898/06 37G
https://inranko.com
HEIGHT and WIDTH: If the WIDTH and HEIGHT attributes are used the viewer of the document will not have
to wait for the image to be located and size calculated. The browser can determine the layout of the text
around the image and display the text first. Netscape is the only browser that will scale the whole image if
either the WIDTH or HEIGHT attributes are specified maintaining the aspect ratio. If both are specified then
the image is displayed accordingly.
Example: working with image
Note: make sure the image file exists at the specified location
<HTML>
<HEAD>
<TITLE>working with images</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>
<B>
<FONT COLOR=”#000099”>
All these flowers are to wish you good luck!
</FONT>
</B>
</H1>
<IMG SRC=”C:flowers.gif” ALT=”FLOWERS” HEIGHT=”350”>
</CENTER>
</BODY>
</HTML>
Output: Open the above file in the web browser and you will see the output as shown below.
Example: image alignment
<HTML>
<HEAD>
<TITLE> image alignment</TITLE>
</HEAD>
<BODY>
<P><IMG ALIGN =”TOP” SRC=”C:flower1.gif”> this text should be aligned at the top of the image.

Reg.No:-10898/06 38G
https://inranko.com
<P><IMG ALIGN =”MIDDLE”SRC=”C:flower1.gif”> this text should be aligned at the middle of the image.
<P><IMG ALIGN =”BOTTOM” SRC=”C:flower1.gif”> this text should be aligned at the bottom of the image.
<P><IMG ALIGN =”LEFT” SRC=”C:flower1.gif”> this image should be aligned to the left and the text should
flow around to the right of the image. This image should be aligned to the left and the text should flow around
to the right of the image.
This image should be aligned to the left and the next should flow around to the right of the image.
<P><IMG ALIGN =”RIGHT” SRC=”C:flower1.gif”> this image should be aligned to the right and the text
should flow around to the left of the image. This image should be aligned to the right and the text should flow
around to the left of the image.
This image should be aligned to the right and the next should flow around to the left of the image.
</BODY>
</HTML>
HYPERLINKED IMAGES OR USING IMAGES AS LINKS
Text does not have a monopoly on being ‘hyper’, you can expand the versatility of your web pages by having
pictures act as hyperlinks. An image link can replace several words or lines of text, leaving valuable spaces act
for other page elements. You can also use thumbnails, which are smaller images that link to a larger one. By
doing so, you can let visitors get the gist of an image and choose whether they want to load the lager version.
To add an image as a link, put the HTML tags for image within the hypertext portion of the anchor tag:
<A HREF=”file.html”><IMG SRC=”graphic.gif”></A>
In the webpage, this HTML code will display an image which will act as hyperlink; clicking on the picture will
tell web browser to go to the HTML file file.html. A hyperlinked image generally is surrounded by a colored box
matching the color of hypertext on your web page, so you know that it is ‘active’.
Example: using image as a link
<HTML>

Reg.No:-10898/06 39G
https://inranko.com
<HEAD>
<TITLE>using image as a link</TITLE>
<BODY>
<P>
<A HREF=”http:www.multimedia.com”><IMG ALIGN=”LEFT” HEIGHT=”200” WIDTH=”206”
SRC=”C:computer.gif” ALT=”this image is a link to a multimedia site”></A>
<H1>multimedia</H1>
<p>
Multimedia can be defined as a woven combination of text, sound video clips, images, graphics, animation,
quick time movies. Or you can say that the combination of two or more media elements bound together to
signify a message is know as multimedia. When the user has some controls in the movie the presentation is
called an interactive multimedia.
</BODY>
</HTML>
THUMBNAILS
A thumbnails is a smaller version of an image, but it is also a link to the larger version. If we use large inline
images in our web pages, viewers might have to wait a long time for images to download to their computer.
One way around this is to create miniature-size copies of the graphic, or thumbnails which are displayed as
inline graphics. Then, you can make the thumbnail image act as a hyperlink that links to the full size image. In
this way, the large images are download only if the viewer decides to see it. First, you need to get a copy of the
two image files-the thumbnail and the larger version. Include the thumbnail image in your document as you’d
include any other image. The HTML code might look like this.
<A HREF=”photo.jpg”><IMG SRC=”photo-thumbnail.jpg” ALT=”link to large image” HEIGHT=”80”
WIDTH=”170”></P>
Image maps
An image map also referred to as clickable image, is a single image that represents multiple links. It can also be
considered as an extended version of an image hyperlink. Instead of having an image represent only one link,
the image can represent several different links depending on where in the image (links) you click.The areas on
an image map that viewers can click to open different URLs are called hot spots. For example, image a graphic
of a blow of fruit. When you click on a banana, the system displays the number of calories in a banana and

Reg.No:-10898/06 40G
https://inranko.com
when you click on an apple, it displays the number of calories in an apple. Image maps are the most popular
method for creating menus on World Wide Web.
There are two basic forms of image map: server-side and client-side. In the server-side image map , the user
clicks on an image but the server must decode where the user clicked before the destination page, if any is
loaded. With client-side image maps, all of the map information-which regions map to which URLs can be
specified in the same HTML file that contains the image. Including the map data with the image and letting the
browser decode has several advantages including:
▪ There is no need to visit a server to determine the destination so links are resolved faster.
▪ Destination URLs can be shown in the status box as the user’s pointer moves over the image.
▪ Image maps can be created and tested locally without requiring a server/system administration support.
▪ Client-side image maps can be created so that they present an alternate text menu to users of text-only
browsers.
To specify a client-side image map you need to specify te USEMAP attribute in the <IMG> element and
have it referenced to a <MAP> element that defines the image map’s links. The USEMAP attribute specifies
which map to use with the image, in a format similar to the HREF attribute on anchors. If the argument to
USEMAP starts with a “#”, it is assumed to be in the same document as the IMG tag.
Syntax:
<IMG SRC=”pic1.gif” alt=”image map” USEMAP=”#mymap”>
The USEMAP =”#mymap” command tells the browser to use a map on the page, which is named ‘mymap’.
The pound sign (#) before the map name indicates that the map data is found in the same html file. But if
the map data is in another file called maps.html then the syntax will be:
<IMG SRC=”pic1.gif” USEMAP=” http://www.server.com/maps.html#mymap”>
Note: It is possible to combine support for both server-side and client-side image maps into one file.
Let us see how to define the map. The map describes each region in the image and indicates where it links.
The basic format for the MAP element is as follows:
<MAP NAME=”name”>
<AREA [SHAPE=”shape”] COORDS=”X,Y…..”[HREF=”reference”] [NOHREF]>
</MAP>
The MAP definition can reside in the same file as the image that will use it,or in a completely separate file. Thus
way, all map definitions can be kept separate from the main documents easier maintenance.
The NAME specifies the name of the map so that it can be referenced by an <IMG> element. The SHAPE gives
the shape of this area. Currently the shapes “RECT”,”CIRCLE”,”POLY” and “DEFAULT” are supported, with RECT
being the default shape, if an explicit SHAPE attribute is not specified. The COORDAS attribute gives the co-
ordinates of the shape, using image pixels as the units. For a rectangle (SHAPE=”RECT”), the COORDS are
expressed as ‘left-x, top-y, right-x, buttom-y’.
For a circle, (SHAPE=”CIRCLE”), the COORDS are expressed as ‘center-x, center-y, radius’ and for a polygon
(SHAPE=”POLY”) (an irregular shape), the COORDS are expressed in pairs of coordinates polygonal image link.
The DEFAULT shape establishes a URL that will be activated if a user clicks inside the image map but outside
any of the other areas.
The NOHREF attribute indicates that clicks in this region should perform no action. An HREF tag specifies where
a click in that area should lead. Any region of the image that is not define by an area tag is assumed to be
NOHREF.
EXAMPLE:
To set up a circular hot region, the code will be:
<MAP NAME=”mymap”>
<AREA SHAPE=”circle” COORDS=”123, 89, 49” HREF=http://www.server.com/circle.html ALT=”circlelink”>
</MAP>
The preceding HTML sets up a map named mymap that has one hot spot. Now you can see where the
USEMAP=”#mymap”from the IMG tag comes from. The COORDS list comprises the co-ordinates of the center
point followed by a single number that represents the of the circle.
Note: you can have as many <AREA> tags as you like, but if the hot spots defined by two <AREA> tags
overlap, the <AREA> tag listed first has precedence.
Example: client-side image map

Reg.No:-10898/06 41G
https://inranko.com
<HTML>
<HEAD>
<TITLE>client-side image map</TITLE>
</HEAD>
<BODY BGCOLOR=”FFFFFF”>
<DIV ALIGN=”CENTER”>
<H1> click me!!!!!!!!!!!!!</H1>
<IMG SRC=”c:/html/imagemap.gif” USEMAP=”#MAP1” BORDER=”0”>
<MAP NAME=”map1”>
<AREA SHAPE=”RECT” CORDS=”50, 50, 150, 100” HREF=”e:webfirstmap.html”>
<AREA SHAPE=”CIRCLE” CORDS=”125,175, 30” HREF=”e:webSHOOTER.html”>
<AREA SHAPE=”DEFAULT” NOHREF>
</MAP>
</BODY>
</HTML>
HTML TABLES
Tables are intended for the display of columar data. The fundamental bulding blocks of HTML tables are cells,
which can contain a data element of the table or a heading for a column of data. Related cells are logically
grouped in a row of the table. The rows, in turn, combine to make up the entire table.
Basic table structure
The <TABLE> tag is used to generate a row or cell matrix within the document. Cells may contain objects
such as text, images and anchors. All table-related tags occur between the <TABLE> and </TABLE> cointer
tags. Any table related tags occurring outside of these tags are ignored. A simple table structure is like:
<TABLE>
<TR><!-table row->
<TD>content <!-table data-></TD>
<TD>content<!-table data-></TD>
</TR>
</TABLE>
The <TR>and </TR>tags are used to contain the HTML tags that define individual cells. As many
<TR>and</TR>tags are required can be placed inside the table, each pair accounting for one row.

Reg.No:-10898/06 42G
https://inranko.com
Table cells come in two verities: header cells for headers that appear over a column of data and data cells for
the individual entries in the table. A table header cell is define with the <TH>and </TH>tag pair. The contents
of the table header cells are automatically centered and appear in boldface. In a standard table, headers usually
compose the first row so that each column in the table has some type of heading over it. The data within the
cells is defined between <TD>and</TD>tag. Text in data cells is left justified by default. Any special
formatting, such as boldface or italic, has to be done by including the appropriate formatting tags inside
the<TD>and</TD>pairs.
The following table is a tabular listing of basic table tags:
The basic <TABLE>tags
Starting tag Ending tag Tag Description
<TABLE> </TABLE> containers for borderless table
<TR> </TR> establishes a row within the table
<TD> </TD> defines a cell within a table
<TH> </TH> centers a heading at a table’s top or side
<CAPTION> </CAPTION> places a title at the top of the table
The attributes associated with the <TABLE>tag are:
Summary: This attribute defines a text string that gives a brief description about the table’s content, purpose
and structure.
Align: this is the standard alignment attribute for aligning the content in an individual cell and the table itself.
Two types of alignment can be specified: horizontal and vertical.
Horizontal alignment: Is the alignment of an element across the width, such as the alignment of a header
across the width of a cell or alignment of a table across the width of a page. ALIGN attribute can be equal to
LEFT, RIGHT or center.
Vertical alignment: Is the alignment of an element between the top and buttom of a cell. Vertical alignment
of cell content is controlled by setting the VALIGN attribute to TOP, MIDDLE or BUTTOM.
Note: Vertical alignment for an entire table cannot be specified.
Width: the width attribute specifies breath of the table in the browser window. WIDTH attribute can be set to a
specific number of pixels or to a percentage of the available screen width. The percentage value is used to
ensure compatibility across a varity of displays and platforms.
The pixel value is useful when a fixed width is required for content such as images. It is also possible to set the
individual pixel widths of each cell within the table, using a WIDTH attribute for the <TD>or <TH>elements.
Cols: this attribute is new in HTML 4.0. It cells the browser how many columns are included in the table.
Frame: thus attribute, similar to the border attribute, determines where a frame surrounding the table should
display. It possible values are void (none), above (top side), below (bottom side), hides (horizontal sides), His
(left hand side), vsides (vertical sides) and box or border (all sides).
Border: this attribute specifies the width of a border around the table pixels. The default varies with each
browser but is typically two or three pixels. If a border is not required, it’s set to 0. The standard units for
widths are specified using the suffixes as given below in table.
The standard units for width specified using the suffixes.
Suffix unit
Pt points
Pi picas
In inches
Cm centimeters
Mm millimeters
em em units (eqal to the height of the default font)
px screen pixels (the default unit for no border)
Here is a sample BORDER attribute specifying a border width of two centimeters:
<TABLE BORDER=”2cm”>

Reg.No:-10898/06 43G
https://inranko.com
Rules: this attribute determines where lines are used to separate cells within the table itself. Its possible values
are none (no lines), groups (such as TBODY and THEAD), rows (between each row), cols (between each
column), and all (between all cells).
Cellspacing: identify in pixels, this attribute determines the amount of space between cells.
Cellpadding: similar to cellspacing and identified in pixels, this attribute sets the amount of space between the
edge of the cell and the actual cell content.
Example: creating table
Write the following code in notepad and save as HTML file
<HTML>
<HEAD>
<TITLE>working with tables</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=”75%” BORDER=”5PT” ALIGN=”CENTER” CELLSPACING=”5” CELLPADDING=”10”>
<CAPTION><BIG>A simple table</BIG></CAPTION>
<TR>
<TH>English </TH>
<TH>Spanish</TH>
<TH>latin </TH>
</TR>
<TR>
<TH>one </TH>
<TH>uno</TH>
<TH>primum</TH>
</TR>
<TR>
<TD>two </TD>
<TD>dos</TD>
<TD>secundum </TD>
</TR>
<TR>
<TD>three </TD>
<TD>tres</TD>
<TD>tertium</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Reg.No:-10898/06 44G
https://inranko.com
SPANNING MULTIPLE ROWS OR COLUMNS
By default,a cell occupies or spans one row and one column. But whentables are used for layout purposes, a
cell is supposed to span more than one row or column. The attributes of the <TH> and <TD> tags that permit
this effect are: COLSPAN and ROWSPAN.
Syntax:
<TD ROWSPAN =”numRows” COLSPAN=”numCols”>
COLSPAN: The COLSPAN attribute is used within the <TD> and <TH>elements to specify how many columns
the cell should span. The default COLSPAN is 1.
ROWSPAN: The ROWSPAN attribute is used within the <TD> and <TH> elements to specify how many rows
the cell should span. The default ROWSPAN is 1.
TABLE SECTIONS AND COLUMN PROPERTIES
The W3C has added several table related tags to the HTML 4.0 recommendation that enables the user to split
tables into logical sections and to control alignment properties of rows or columns of data.
TABLE SECTIONS
The <THEAD>, <TBODY> AND <TFOOT> container tags denote the start of a table header, body and footer
respectively. <THEAD> contains the rows that compose the table header and <TFOOT>
Contains the rows that compose the footer. In the absence of <THEAD> and <TFOOT> tags, the <TBODY>tag
becomes optional. In long tables, multiple <TBODY> tags are used to make more manageable chunks. All three
tags can take both the ALIGN and VALIGN attributes to control horizontal and vertical alignment within the
sections they define.
Note: All three tags are valid only between the <TABLE>and </TABLE>tag.
A typical table created with these tags might look like.
<TABLE>

Reg.No:-10898/06 45G
https://inranko.com
<THEAD>
<TR>…..</TR>
</THEAD>
<TBODY>
<TR>….</TR>
<TBODY>
<TFOOT>
<TR>……</TR>
</TFOOT>
</TABLE>
Note: according to the HTML 4.0 recommendation, the use of the </THEAD>, </TFOOT>, </TBODY>tags are
optional.

Reg.No:-10898/06 46G
https://inranko.com
Lesson-7
SETTING COLUMN PROPERTIES
The <TR>tag supports attributes that enable the user to specify all sorts of properties for an entire row of a
table. In particular, the alignment of row is specified by attribute ALIGN and VALIGN.HTML 4.0 takes this a step
further by making it possible to apply horizontal alignment properties to columns of data as well.
When applying alignment properties to columns, there are two options: COLGROUP and COL. The
<COLGROUP>tag is appropriate when applying properties over several columns. It takes four attributes: ALIGN,
which can be set to LEFT, CENTER or RIGHT; VALIGN which can be set to TOP< MIDDLR, BOTTOM or
BASELINE; WIDTH, which is set equal to desired width of the group and SPAN which is set to the number of
consecutive columns to which the properties apply.
EXAMPLE: SETTING COLUMN PROPERTIES
<HTML>
<HEAD>
<TITLE>setting column properties</TITLE>
</HEAD>
<BODY>
<B>table using the COLGROUP tag</B>
<BR>
<BR>
<TABLE BORDER=”1” ALIGN=”CENTER” WIDTH=”80%”>
<COLGROUP ALIGN=”LEFT” SPAN=”3”>
<COLGROUP ALIGN=”TIGHT” SPAN=”2”>
<COLGROUP ALIGN=”CENTER”>
<TBODY>
<TR>
<TD>first column group, left horizontal alignment</TD>
<TD>first column group, right horizontal alignment</TD>
<TD>first column group, right horizontal alignment</TD>
<TD>first column group, center horizontal alignment</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Reg.No:-10898/06 47G
https://inranko.com
The six columns are split into three groups. The first three columns are left-aligned table entires, the fourth and
fifth columns have entires horizontally aligned along the right and the last column has centered entires.
Now, if the columns in a group are to have differing properties, <COLGROUP>tag can be used to set up the
group and the individual properties can be specified with the <COL> tag. <COL>takes the same attributes as
<COLGROUP>, but these attributes only apply to a subset of the columns in a group. For example, the HTML
splits the five columns of the table into two groups.
Example: setting column properties
<HTML>
<HEAD>
<TITLE>SETTING COLUMN PROPERTIES</TITLE>
</HEAD>
<BODY>
<B>TABLE USING THE COLGROUP AND COL TAGS</B>
<BR>
<BR>
<TABLE BORDER=”1” CELLPADDING=”16”>
<COLGROUGP>
<COL ALIGN=”CENTER”>
<COL ALIGN=”RIGHT”>
<COL ALIGN=”LEFT”>
</COLGROUGP>
<COLGROUGP>
<TBODY>
<TR>
<TD>FIRST COLUMN IN FIRST GROUP, CENTER HORIZONTAL ALIGNMENT</TD>
<TD>SECOND COLUMN IN FIRST GROUP, RIGHT HORIZONTAL ALIGNMENT</TD>
<TD>THIRD COLUMN IN FIRST GROUP, LEFT HORIZONTAL ALIGNMENT</TD>
<TD>FIRST COLUMN IN SECOND GROUP, RIGHT HORIZONTAL ALIGNMENT</TD>
<TD>SECOND COLUMN IN SECOND GROUP, RIGHT HORIZONTAL ALIGNMENT</TD>

Reg.No:-10898/06 48G
https://inranko.com
</TR>
</TBODY>
<TABLE>
</BODY>
</HTML>
The first group’s column use center, right and left horizontal alignments, where as both columns in the second
group use only right horizontal alignment.
Note: the <COLGROUP>and<COL>tags attributes ALIGN, VALIGN and SPAN has default value as LEFT,
MIDDLE and I respectively. WIDTH attribute has no specific default value. Rather, the width is made as big as it
needs to be to accommodate the contents of the cell.
What elements can be placed in a table cell?
HTML tables were developed with the intent of presenting columns of information, but that information does
not necessarily have to be text-based . The types of elements that can be placed within a table cell are:
Text: text is the most obvious thing to put in a table cell, and it even allows to format the text with physical and
logical styles, heading formatting, line and paragraph breaks and hypertext anchor formatting.
Images: images can be placed within the table cell by enclosing an <IMG> tag between the <TD> and </TD>
tags that define the cell.
From fields: The ability to place from fields inside of a table cell is very important.
Blank space: A blank space in a cell can be accomplished by putting nothing between the cell’s defining tags
(<TD> </TD>) or by placing a nonbreaking space between the tags (<TD>$nbsp; </TD>). Use of
nonbreaking space is preferable because, if borders are turned on, a cell with a nonbreaking space picks up a
border, a cell created with <TD> </TD>may not.
Other tables: You can embed one table inside of another. Microsoft internet explorer or Netscape Navigator
supports tables within tables.
Given below is an example of displaying real tabular data with a table.
Example: creating table
<HTML>
<HEAD>
<TITLE>salary record </TITLE>
</HEAD>

Reg.No:-10898/06 49G
https://inranko.com
<BODY BGCOLOR=”#FFFFFF”>
<H1>salary structure</H1>
<TABLE BORDER=”0” WIDTH=”75%” CELLSPCING=”0” CELLPADDING=”0”>
<CAPTION ALIGN=”TOP”>prepared for the month of april 2002 </CAPTION>
<TR ALIGN =”CENTER” ALIGN=”CENTER”>
<TD WIDTH=”50%” NOWRAP>working days in april: 25</TD>
<TD WIDTH=”50%” nowrap>salary day: 3-may-02</TD>
</TR>
</TABLE>
<HR>
<TABLE COLS=”3” WIDTH=”513”>
<THEAD>
<TR>
<TH WIDTH=”83”>
<DIV ALIGN=”LEFT”>S. No. </DIV>
<TH WIDTH=”160”>
<DIV ALIGN=”LEFT”>employee name </DIV>
<DIV ALIGN=”LEFT”>employee grade </DIV>
<DIV ALIGN=”LEFT”>salary (in Rs) </DIV>
</THEAD><TBODY ALIGN =”LEFT” VALIGN=”TOP”>
<TR ALIGN=”LEFT”>
<TD WIDTH=”83”> 1. </TD>
<TD WIDTH=”160”> guarav luthar </TD>
<TD WIDTH=”134”> A </TD>
<TD WIDTH=”116”> 40,000 </TD>
</TR>
<TD WIDTH=”83”> 1. </TD>
<TD WIDTH=”160”> guarav luthar </TD>
<TD WIDTH=”134”> A </TD>
<TD WIDTH=”116”> 40,000 </TD>
</TR>
<TD WIDTH=”83”> 2. </TD>
<TD WIDTH=”160”> meena gupta </TD>
<TD WIDTH=”134”> B </TD>
<TD WIDTH=”116”> 25,000 </TD>
</TR>
<TD WIDTH=”83”> 3. </TD>
<TD WIDTH=”160”> kunal sehgal </TD>
<TD WIDTH=”134”> C </TD>
<TD WIDTH=”116”> 22,000 </TD>
</TR>
<TD WIDTH=”83”> 4. </TD>
<TD WIDTH=”160”> Rishabh singh </TD>
<TD WIDTH=”134”> C </TD>

Reg.No:-10898/06 50G
https://inranko.com
<TD WIDTH=”116”> 22,000 </TD>
</TR>
<TD WIDTH=”83”> 5. </TD>
<TD WIDTH=”160”>charu tehlan </TD>
<TD WIDTH=”134”> D </TD>
<TD WIDTH=”116”> 20,000 </TD>
</TR>
</TR>
</TBODY>
</TBALE>
<HR>
</BODY>
</HTML>

Html Tutorial Full PDF Book

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Html Tutorial Full PDF Book

Similar to Html Tutorial Full PDF Book (20)

Recently uploaded

Recently uploaded (20)

Html Tutorial Full PDF Book