4

HTML.
INTRODUCTION
HTML is an evolving language,
and stands for Hyper Text Markup Language
It is a text file containing small
markup tags which are instructions given to
browser about how to display the
page.
An HTML file must have an
htm or html file extension.
An HTML file can be created using a
simple text editor (like Notepad in
windows).
HTML was invented by Tim Berners-Lee
while at CERN, the European Laboratory
for Particle Physics in Geneva.

4.1 WHY HTML

Hypertext is an ordinary text with formatting facilities
process of taking ordinary text and Markup is the
and adding extra features to it.
Thus the HTML documents are text files made up
define a document and guide its display. In
of HTML elements that
practical terms, HTML is a collection of
platforn-independent styles that define the various components
Web document. HTML provides the user of a World Wide
with a consistent interface and a highly
effective medium for presenting information to developers.
HTML is a set of instructions given to Web browser for
formatting and layout
of WebPages, so it may be possible that a look of the same HTML
code imay differ
Since different browsers may interprets
them differently.

Advantages of HTML
1) HTML is an easy to use,
learn, implement and flexible alternative to
traditional presentation and tedios software.
2) Contains powerful formatting facilities.
3) HTML documents are device and platform
independent. (Since it can be
designed to work on not only home PCs but also on graphical workstations,
dumb terminals, network computers, hand-held devices etc.)
4) You can traverse to any HTML document required because
of hyper linking
facility available, thus controlled navigation is possible.
) Required HTML pages can be updated easily, without changing whole
document.
O) lt is a kind of software, which has been called world ware.

) Independent work can be done and you need not rely cn application or
program vendor.
) No expensive license software or hardware required.
 HTML
126

9) If compatibility with user habits, expectations and multiple platforms is th

goal, then HTML is the only approach to delivering a web application.

Disadvantages of HTML
1) HTML doesn't offer programming languages features and capabilities.
2) It's easy to write "bad" HTML containing errors.
3) Complex HTML code is hard to read and understand and code complexity
increases to make interactive web page. So building comnplex pages is very
time consuming.
4) I's easy to make mistakes (e.g. leaving out a ">" or "/" character).
5) Special types of software like scripting languages (VB Script, Java Script) are
required for handling different events and validations.
6) Can't detect errors easily since no special debugging tool is provided.

4.2 HTML DOCUMENTATION

HTML documents are plain-text (also known as ASCI) files that can be
created using any text editor (e.g., Emacs or vi on UNIX machines; Simple Text on
a

Macintosh; Notepad on a Windows machine). You can also use word-processing

software if you remember to save your document as "text only with line breaks".

HTML Editors
HTML Editors are programming tools for Hyper Text Markup Language
(HTML) documents.
There are three categories of HTML Editors:
1. Text Editors

2. HTML Code Editors

3. HTML Design Tools

1)Text Editors
These editors only edit ASCII text. They offer no functionality to facilitate
better HTML development. They are tuseful if your knowledge of HTML is excellent.
Some examples Text Editors include Notepad (Windows), Simple Text
of
(Macintosh), and Pico (Unix).
They are typically WYSIWYG. WYSIWYG is an acronym for "what you se
is what you get"; it means that you design your HTML document visually, as if yo
were using a word processor, instead
of writing the markup tags in a plain-text
and imagining what the resulting page will look like.

2) HTML Code Editors

These editors may or may not be WYSIWYG.
 HTML 127

3) HTML Design Tools

These tools are intended for HTML development without exposing the code to
the author. They are typically WYSIWYG. Many of these tools do allow the user to
access the HTML code, however this is not usually apparent to the user. Some
examples of HTML Design Tools include NetObjects Fusion (Web Development),
and Microsoft Office 97 (Traditional Office/Design Tools that provide HTML
output).
You can concentrate on the content, rather than the syntax,of your Web site, You
can Create a Web site without learning HTML, You can Design Elegant and
Consistent Web sites with a few key strokes, since they are more user friendly

> HTML ELEMENT

a
An element is a fundamental component of. the structure of text
documnent.
can
Some examples of elements are heads, tables, paragraphs, and lists. Elements
contain plain text, other elements, or both.

HTML elements are defined using HTML tags.

> HTML Tags
HTML tags are used to mark-up HTMLelements.
< >
HTML tags are surrounded by the two characters and
The surrounding characters are called angle brackets. are usually paired
HTML tags normally comne in pairs like <b> and </b>they
to start and end the tag instruction.
tag.
The first tag in a pair is the start tag, the second tag is the end
content.
The text between the start and end tags is the element
means the same as <B>.
HTML tags are not case sensitive; <b>
Syntax is:
name>
<tag name> text (element content) <Jtag
content)
<tag name attribute name="argumnent/value> text (element
/tag name>
or just
<tag name>
For example:
</TITLE
<TITLE> WELCOME TO MY WEBSITE
<JA>
<A HREF-"URL"> CLICK HERE

AnHTML document is composed of a single element:

<HTMLS <HTML>
body elements:
nat is, in turn, composed of head and
<HEAD> <HEAD>
and <BODY>... </BODY>
128 HTML

> Tag Attributes

Tags can have attributes. Attributes can provide additional information about
h
HTML elements on your page, included inside the start tag.
Attributes always come in name/value pairs like this: name="value"
Syntax is
<tag name attribute name='value'>
c.g.<IMG SRC='c:la.jpg">
so here src is an attribute
for image tag. Normally its value is specified in quotes.

Some useful Tips while writing HTML document

HTML is not case sensitive. So <head> is
equivalent to <HEAD> or <Head
Also all tags are not supported by all World
Wide Web browsers. If a browser doe
not support a tag, will simply ignore it.
it
When you write HTML text, you can never
be sure how the text is displayed ir
another browser. The text will be
reformatted every time the user resizes hi
window. Never try to format the text your
in editor by adding empty lines and spaces
to the text.
HTML will truncate the spaces your text.
one. In HTMLanew in Any number of spaces counts as
line counts as one space.
Using empty paragraphs <p> to insert
tag instead. You might blank lines is a bad habit. Use the <br
have noticed that paragraphs can be
closing tag </p>. Don't rely on it. written without the
The next version of HTML might not allow you to
skip any closing tags.
HTML automatically adds an
extra blank line before and
like before and after a paragraph, after some elements,
and before and after a heading.
4.3 THE MINIMAL HTML
DOCUMENT
Every HTML document should
contain certain standard
document consists of head
and body text. The head HTML tags. Each
contains the actual text contains the title, and the body
that is made up of paragraphs,
Browsers expect specific lists, and other elements.
information
HTML and SGML specifications. because they are programmed according to

Simple html document

KHTML>
<HEAD>
<TITLE> HOME PAGE
STITLE>
<SHEAD>
<BODY> THIS
IS MY FIRST WEB
<BODY> PAGE
KHTML>
 HTML
129

(When yOu save an HTML file, you can use either the .htm or the .html extension.
Save the file as "firstpage.htm". Open this file through your Internet browser.)

Example Explained
The first tag in your HTML document is <HTML>. This tag tells your browser
that this is the start of an HTML document. The last tag in your document is
sIHTML>. This tag tells your browser that this is the end of the HTML document.
The text between the <HEAD> tag and the <HEAD> tag is header information.
Header information is not displayed in the browser window. The title is displayed in
your browser's caption.
The text between the <BODY> tags is the text that will be displayèd in your
browser.
The text between the <TITLE> tags is the title of your page

4.4 BASICHTML TAGS

The most important tags in HTML are tags that define headings, paragraphs and
line breaks.

1.<HTML>
The HTML tag identifies a document as
an HTML document. All HTML documents
should start with the <HTML> tag and end with the </HTML> tag.
Syntax
<HTML>......HTML>
e.g.
a
The following example begins and ends short document with
the HTML tag.
<HTMLS
<BODY
This is HTML file.
<BODY>
HTML>

Following tags appear in <HTML>tag.i-

HEAD or mneta-information, about the
The HEAD contains general information,
an HTML document header. It is the first thing in
document. The HEAD tag defines
any document, lying above the BODY and just after the
<HTML> tag starting the
are not displayed as part of the document.
document. The contents of the HEAD STYLE.
HEAD tag can contain TITLE, BASE, ISINDEX, META, SCRIPT,
The
and LINK tags.

Syntax
<HEAD>...SHEAD>
 HTML
130

C.g. <HTML>
<HEAD>
<TITLE>WELCOME TO FIRST WEBSITE<TITLE>
HEAD>
<HTML>

TITLE element, which should be

The title of a document is specified by the TITLE
can have only one title, which should
placed in the document HEAD. Each document
way.
identify the document content in a general
links or
The Title is not part of the document text and cannot contain hypertext
--
special markup commands it must be simple
text. Often th title is used to label the
a place in a browser's history or
window displaying the text, or is used to label
--
bookmark list. It therefore should be short less than 64 characters
Other tags can be placed are:

STYLE -- Stylesheet instructions, written in a stylesheet language. Styleshet

instructions specify how the document should be formatted for display. Very few
browsers currently support stylesheets.
SCRIPT -- Script program code -- for enclosing, within a document, scripting
program code that should be run with -- and that can interact with -- the
document. Example languages are JavaScript and VBScript.
E.g.<HTML>
<HEAD>
<SCRIPT language="VBSCRIPT"> VBscript </SCRIPT>
</HEAD>
<BODY>
... text
of the document
<BODY>
</HTML>

2.<BODY> Defines the document's body

The BODY element contains all the contents of a document
Various mark-up elements are allowed within the body to
indicate headings,
paragraphs, lists, hypertext links, images, and so on.

> Attributes in body tag

1) The BACKGROUND Attribute
This allows you to specify an image file to use as a
background (a bit like a
watermark) behind the displayed text and graphics.
E.g.<BODY BACKGROUND="c:la.gif"'>
Text....
<WBODY>
 HTML 131

So image a.gif will be set as a background to your web page.

2) Background color of the web page

Attribute is:BGCOLOR="#Iggbb"
Sets the background color to the specified RGB color value, where RR GG and BB
are the hexadecimal color codes for the Red, Green and Blue levels, ranging from 0 to
255 -- that is, 00 to FF. The color "000000" is black, while "FFFFFF" is white.

3) Setting the text color(TEXT Attribute)

Syntax: <BODY TEXT="#rrggbb">text in a body</BODY>

Sets the default text color to the specified RGB color value.

4) Setting color for hyperlinks (LINK Attribute)

Syntax: <BODY LINK="#rggbb">text in a body</BODY>
Sets the default text color of hypertext anchors to the specified
RGB color value.

5) Setting color for visited hyperlinks (VLINK Attribute)

a body</BODY>
Syntax: <BODY VLINK="#rrggbb">text in
to the specified RGB color
Sets the default text color of visited hypertext links
value.
as
> Elements in the BODY are categorized
A) Text Block Elements
content of a document. Structurally,
BODY element contains all the displayed
the document content is organized into
blocks of text, such as paragraphs, lists,
quotations, and so on. These are generically called block
headings, paragraphs, block
"block" chunks of text together into logical units. Block elements
elements, since they -- for example, a list item can contain paragraphs or
can often contain other blocks
block quotations, So that these
elements can often nest together.
The block-level elements are:

Hn (Headings) (hl to h6)

P
ADDRESS
BLOCKQUOTE
PRE
HR
FORM
TABLE
 HTML
132

B) Text Emphasis Elements

These are elements that mark text for special meanings, for example, that a particula
piece of text is emphasized (EM) or a citation (CITE), or that specifies the desirea
physical formatting, such as boldface (B) or italics (). These elements can usualy
appear anywhere inside a block element, with a few exceptions (you can't haye
images inside a PRE element).

C) Special Elements -- Hypertext Anchors

Analogous to the text-level markup is the anchor (A) element. This is the element that
marks hypertext links. Obviously you want to know a lot about this one.

D) Character-Level Elements
Then are what I call character-level elements, namely line breaks (BR) and images
(IMG). These are treated much like characters, and can appear wherever there is a

character in a document.

E) Character References
Finally there are character or entity references. These are special HTML "escape"
codes that can be used to enter special characters that are hard to type, such as
accented or other non-ASCII characters. You also need to use these to type angle
brackets or ampersand characters -- as these are otherwise interpreted as HTML tags
(<.. >)or as the beginnings of character or entity references (&).
Analogous to the text-level markup is the anchor (A) element. This is the element that
marks hypertext links. Obviously you want to know a lot about this one.

3. <P> Defines a paragraph

Paragraphs are defined with the <P> tag. Can contain align attribute for alignment of
the text within paragraph.
E.g.<P ALIGN="CENTER"> this is a paragraph</P>

HTML automatically adds an extra blank line before

and after a paragraph. You
must indicate paragraphs with <P> elements.
A browser ignores any indentations or
blank lines in the source text. Without <P> elements,
the document becomes one
large paragraph. The P> closing tag may be omitted.
understand that when they encounter a <P> tag, means
This is because browsers
it that the previous paragrapn
has ended. However, since HTML now allows
certain attributes to be assigned to the
<P> tag, it's generally a good idea to include it.

ADDRESS Elemnent
The ADDRESS element is used for address
information, signatures, statementsO
authorship, etc. It is often placed at the
bottom (or top) of a document. The renderin8
of the contents of the ADDRESS is left up to the
browser -- most browsers render
ADDRESS in italics. It may also be right
justified, or indented. th
 HTML
133
e.g.
ADDRESS><A HREF="c:ladd.html">X.Y.Z.</A><IADDRESS>
<P><ADDRESS> <P>
WEB DESIGNER<BR>
Tel (023) 122 123.
ADDRESS> <P>
These. are rendered as
X.Y.Z
WEB DESIGNER
Tel (023) 122 123.
An address cannot contain P, BLOCKQUOTE, FORM or other block elements, but
can contain text, text markup (emphasis, etc.), anchor elements or even images.

4. <BR> Inserts a single line break

Line Breaks:
The <BR tag is used when you want to end a line, but don't want to start a new
paragraph. The <BR> tag forcesa line break wherever you place it.
E,g. This <BR> is line breaks.
So here This and is line breaks will appear on two different lines.
The <BR> tag is an empty tag. It has no closing tag.

5. <HR> Defines a horizontal rule.

window.
Used to produce a horizontal line, the width of browser's
It allows to differentiate sections of your document.
you alter the thickness
SIZE and WIDTH attributes will let
covered by it.
And the percentage of the windows

e.g.<BODY>
<H1>This is my first web page</Hl>
WIDTH="20%">
<HR SIZE=5
<BODY>
HTML source code Comments in HTML.
O. <! Defines a comment in the your
a comment. You can use comments to explain
The browser will ignore a date.
can you when you edit the source code at later
Code, which help

E.g.<-- This is a comment -->

point after the opening bracket, but not
an exclamation
Note that you need
before the closing bracket. sequence "-" may not appear
double-dash
and the sure that
Comments do not nest, ->
closing tag. You must also make
inside a commnent except as part of the
start-of-comment string.
there are no sppaces in the
 HTML
134

For example, the line

<!-- This is a valid comment -->
<!- This is not valid comment -->
is not, since there is a space between the left angle bracket and the exclamation mark.

7. Headings
<HI>---<H6> Defines heading 1 to heading 6.
Headings are defined with the <HI> to <H6> tags. <Hl> defines the largest
heading. <H6> defines the smallest heading (as shown).

Heading Size 1 Heading Size 2

Heading Size 3 Heading Size 4

Heading Size 5 Heading Size 6

E.g.
<H1STYLE="COLOR: blue">THIS is displayed in large font with blue color </HI>
<H1 STYLE="FONT-FAMILY:verdana">This is displayed in verdana font style
</H1>
<HISTYLE="FONT-SIZE:150%">You can define size in percentage also.</HI>
HTML automatically adds an extra blank line before and after a heading.

8. <PRE> tag
This tag preformats the text. The text appearing between <pre> and </pre> is
displayed in monospace form. Using this tag, we can position the characters. It can
also be used for columnar lists.
Eg. <PRE> Employee_name Employee_number Employee_address </PRE>
So output is displayed as :
Employee_name Employee_number Employee_address
4.g FONT TAGS IN HTML
To have different size and color to the text, rather than using headings tags,
many people uses <FONT>tag.
The <FONT> tag in HTML is deprecated. It is supposed to be removed in a future
version of HTML..
Font attributes:
Attribute Example Purpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
|face="face-name" face=*Times new Roman' Defines the font-name
color="color-value" color="#eeff00 Defines the font color
color="color-name" color="red" Defines the font color
 HTML 135

C.g•
<P>
RONT SIZE=*5 FACE=VERDANA" COLOR="#AA0OFF"s
This is example of demonstrating fonts. <FONT>
<P>
<MARQUEE> TAG
MARQUBE, Supported only by the Microsoft Internet Explorer 2 (and later)
hrowser., is used to create a scrolling text marquee.

e.g. <MARQUEE ALIGN=top'">Scrolling text <MARQUEE>

creates a text marquee with the enclosed text scrolling along the frame.
The another attribute is DIRECTION defining direction of the marquee text.
e.g.<MARQUEE DIRECTION=RIGHT">WELCOME<MARQUEE>
So here WELCOME scrolls from left towards right. The default direction is right
to left.
But other commercial browsers, including Netscape Navigator, do not support this
element.

Character Formatting
HTML has two types of styles for individual words or sentences: logical and
physical. Logical styles tag text according to its meaning, while physical styles
indicate the specific appearance of a section. For example, in the preceding sentence,
the words "logical styles" was tagged as “strong." The same effect (formatting those
words in italics) could have been achieved via a different tag that tells
your browser
to "put these words in bolds." Try to be consistent about which type of style
you use.

Logical Styles:
<EM>
cannot reset your
for emphasis. Typically displayed in italics. (Consultants
password unless youcall the help line.)

<CODE
for computer code. Displayed in
a
fixed-width font. (The <stdio.h> header
file)

<STRONG> your
strong emphasis. Typically displayed in bold. (NOTE: Always check
for
links.)

<VAR>
you will replace the variable with specific information.
for a variable, where file.)
displayed in italics. (rm filename deletes the
Typically
 136 HTML

Physical Styles
<B> bold text :It boldface text appearing between <B> and </B> tag.
e.g.<B>n Bold</B>
Output is In Bold

<>italic text : It italicize text appearing between <I> and </> tag.
e.g.<I>In Italics</>
Output is In Italics

<U>underline text : It underlines text appearing between <U> and <U> tag.
e.g.<U>Underlined<U>
Output is Underlined

<SUB> tag: It is subscript tag. The text encloed in <SUB>and </SUB is

displayed in subscript form. This is useful in representation of mathematical
formulae or chemical equations.
e.g. H<SUB>2</sub>S0<SUB>4</SUB>
output displayed as :H,SO4

<SUP> tag:- It is superscript tag. The text enclosed in <SUP>and SUP> is

displayed in superscript form. This is also useful in representation of
mathematical formulae or chemical equations.
e.g. volume of sphere is=(4/3)(3.14)r<SUP>3</SUP>
Output displayed as: volume of sphere is=(4/3)(3.14)r

4.6 DEALING WITH URLS

Hypertext Anchors
URL stands for Üniform Resource Locator, which may represent an
address
of document on web or Internet or simply a path to a document in a specific directory.
The World Wide Web uses Uniform Resource LOcators (URLS) to
specify the
location of files on other servers. A URL includes the type of resource
being accessed
(e.g., Web, gopher, FTP), the address of the server, and the location
of the file. The
syntax is:
scheme:/lhost. domain [:port]/pathl filename
HTML provides you to jump from a link to any document or image or any
local or WebPages by using special tag, called <a> i.e. Anchor tag.
Syntax is: <A HREF="URL'>name or image which can be treated as link</A>
Thus anchor is a piece of text or some other object (e.g. image), which
marks the
beginning and/or the end of a hypertext link. The <A> element is used to mark that
piece of text (or inline image), and to give its hyper textual relationship to
other
documents. The text between the opening and closing tags,
<A attributes> ...text..
JA> can act as start or a
destination (or both) of link. The HREF attribute (which IS
actually optional) marks the anchor as the start of a link to another document or
 HTML
137
resource (it could point, for example, to an image file), or to a
particular place in
another docunent.
Syntax is:
KA HREF="URL (absolute or relative path)">anchor name <A>
An absolute or parial URL can specify the address of the referenced document:
e.g.

1)Link to a page on tle World Wide Web.,

<A HREF="http://www.yahoo.com">Enter your email-id</A>
The string Enter your email-id ' is a hypertext link to the website indicated by URL
specified

2) Link to an image by image as a link.

<A HREF="image2.jpeg"> <iMG SRC="imagel.gif">dA>
The image `imagel.gif is a hypertext link to the image file located in the same
directory This will allow you to use a small icon that links the user to a larger version
of the same image.

3) Link to document located in different directory

<AHREF-"d:Asoftla.html"> Click Here.<lA>
Here by clicking on Click Here link, destination page will be displayed which is
specified in the path given.
a
4)Link to the same page(Links toa Particular Place in Document)
<P><A HREF="#samepage">This is link to the same page. <JA></P>
<A NAME="'samnepage"><H2>Yes You are in the same
,
page.</H2></A>
Particular places in an HTML document can be marked as specific
destinations of hypertext links via the NAME attribute. Linksto SpecificSections
a a
Anchors can also be used to move a reader to particular section in
document (either the same or a different document) rather than to the top, which is the
a to create
default. This type of an anchor is commonly called named anchor because
the links, you insert HTML names within the document.

5)Links Between Sections of Different Documents to a specific section in

.

Suppose you want to set a link from document A (fileA.html)

another document (fileB.html).
a a anchor:
Enter the HTML coding for link to named
fileA.html:-
<P>
This is link
<A HREF-" fileB.html
#differentlink">referenced to a specific section </A in

different document.
 HTML
138
as a tab wi. un the fileB.html file
Think of the characters after the hash (#) mark
at the top of the window when
This tab tells your browser what should be displayed
the link is activated.
Next, create the named anchor (in this example
"differentlink ") in fileB.html as:
<H2><A NAME=" differentlink "> to a specific section <Á><H2>
in place, you can bring a reader directly to , " to a
With both of these elements
specific section"word in fileB.html

Important Hint
You cannot make links to specific sections within a different documnent unless
or that
either you have write permission to the coded source of that document
document already contains in-document named anchors
Attributes for A and LINK :>The following are the attributes appropriate to
either Anchor or LINK elements. The other attributes are less common, and can be
omitted at an introductory reading.
1. HREF (link to object)
2. NAME (link from object
3. TITLE (TITLE of document)
4. METHODS (how to link -- this attribute has been dropped from the HTML
specification, and should not be used)

6) Link to Mail (Mailto)

Youcan make it easy for a reader to send electronic mail to a specific person or mail
alias by including the mailto attribute in a hyperlink.
Syntax is:
<A HREF="mailto:emaiid @host">Name</A>
e.g.
<A HREF="mailto:spc yahoo.co.in'">Mailme<A>
@

4.7 LISTSIN HTML

HTML supports ordered, unordered and definition lists.

Different List Tags are:

<OL> Defines an ordered list
<UL> Defines An Unordered List
<LI> Defines a list item
<DL> Defines a definition list
<DT> Defines a definition term
<DD> Defines a definition description
<DIR> Deprecated. Use <ÜL> instead
<MEN> Deprecated. Use <UL> instead
 HTML 139
1.Unordered Lists
An unordcred list is a list of items. The list items are marked with bullets
(typically smali black circles). To make an unnumbered, bulleted list,
1. Start with an opening list <UL> (for unnumbered list) tag Enter the <LI> (list
item) tag followed by the individual item; no closing </LID tag is needed
2. End the entire list with a closing list </UL> tag
Inside a list item you can put paragraphs, line breaks, images, links, other lists,
etc.
e.g. <HTML>
<BODYs
<H4>This is Unordered List</H4>
<UL type = "circle">
<LbSunday</L>
<LbMonday</LI>
<LbTuesday</LI>
<UL>
<BODY>
<HTML>
sooutput given by browser is:
This is Unordered List:
Sunday
Monday
Tuesday
tag you can change shape of the bullet.
By specifying type attribute in the <UL>
The standard shapes provided
are "disk", "circle", and "square"

2.0rdered Lists a list of items. The list items are marked with
An ordered list is also
an numbered is identical to an unnumbered list,
numbers. A ordered list also called a you can put paragraphs, line
except it uses <OL> instead of <UL>. Inside list item
lists, etc. You can specify style of numbering for the list
breaks, images, links, other can take values "I" for uppercase
<OL> tag and it
Items by giving type attribute in
uppercase letters, "a" for lower case alpha
roman, ";" for lower case roman, "A" for
start attribute in <OL> tag is used to start the list from the
numeric letter. The
e.g. <OL start = "6"> will start the list items from number 6.
Tequired number.
e.g. <HTML>
<BODY> List<B><H4
<H4><B>This is an Ordered
<OL type = "i">
<LIbSunday</LI
<LIbMonday</LI>
<LI>Tuesday</LI>
<JOL>
140

</BODY>
</HTML>
so output given by browser is:

This is an Ordered List:

i) Sunday
ii) Monday
iii) Tuesday

3.Definition Lists a list of terms and explanation of

list is not a list of items. This is
A definition a definition list (coded as
starts with the <DL> tag. Thus
the termns. A definition list as <DT>) and a
alternating a definition term (coded
<DL>) usually consists of
description (coded as <DD>). Web browsers generally format the
definition
definition on a new line and indent it.
e.g.
<HTML>
<BODY>
<H4>This is a Definition List</H4>
<DL>
<DT>VB</DT>
<DD>Programming Language<DD>
<DT>VB SCRIPTDT>
<DD>Scripting Language </DD>
<DL>
<BODY>
<HTML>
so output given by browser is:
This is a Definition List:
VB
Programming Language
VB SCRIPT
Scripting Language
Inside a definition-list definition (the <DD> tag) you can put paragraphs, line
breaks, images, links, other lists, etc.

4.Nested lists
Lists can be nested. You can also have a number of paragraphs, each containing a
nested list, in a single list item.
C.g.
<HTML>
<BODY>
<H4>This example of Nested List</H4>
 HTML
141
<UL>
<LIbScripted Programming</LI>
<LbStructured Programming.
<UL>
<LIbBasic</LI
<LI>Pascal</LI>
<SUL>
<LS
<LbObject Oriented Languages</LI>
<SUL>
<BODY>
<HTML>
ACWy Documentsla.html- Microsoft Inteinet Explorer
Help
Fe Edt View Go Favornes

Back Stop Reffesh Home SearchFavorikes Hislory Charnels Eullsaecn Edt

Foryard
Addressl)CMyDocumenlsla.hml

This example of Nested List

• Scripted Programming
• Structured Programming
o Basic
o Pascal
• Object Oriented Languages

4.8 TABLES IN HTML

tag, use the TR tag to define
The TABLE tag defines a table. Inside the TABLE use the TD
rows in the table, use the TH tag to define row or column headings, and
a CAPTION tag, which
tag to define table cells. The TABLE tag can also contain
specifies the caption for the table
you can specify the width of the border surrounding
(Individual rows and cells in
the table and the default background color of the table.
the table can have their own background color.)
You can use the CELLSPACING
in the table and the CELLPADDING
attribute to specify the distance between cells you
attribute to specify the distance between the border
and content of every cell. If
will do its best to make the table
Specify the width and height of the table, the browser
some cases this may not be possible. For example,
Iit the specified dimensions, but in
If the table contains cells that contain
non-wrapping long lines, the table may not fit in
a specified width.
Syntax :
<TABLE
ALIGN="LEFTRIGHTICENTER"
BGCOLOR="color"
BORDER="value"
CELLPADDING="value"
 HTML
142

CELLSPACING="value"
HEIGHT="height"
WIDTH="width"
COLS="numOfCols"
HSPACE-"horizMargin"
VSPACE="vertMargin"

STABLE,
> 'Table Elements
<TABLE> </TABLE> defines a table in HTML. If the BORDER
attribute is present, your browser displays the table with a border
...
<CAPTION> <ICAPTION> >defines the caption for the title of the table.
The default position of the title is centered at the top of the table. The
attributes ALIGN=BOTTOM can be used to position the caption below
the table.
<TR>...JTR>> specifies a table row within atable. You may define default
attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or
VALIGN (TOP, MIDDLE, BOTTOM).
...
<TH> <STH> > defines a table header cell. By default the text in this cell is
bold and centered. Table header cells may contain other attributes to
determine the characteristics of the cell and/or its contents.
TD> TD> >defines a table data cell. By default themay text in this cell is
aligned left and centered vertically. Table data cells contain other
attributes to determine the characteristics of the cell and/or its contents.

> Table Attributes

ALIGN
Specifies the horizontal placement of the table.
LEFT aligns the table on the left (the default).
RIGHT aligns the table on the right.
CENTER aligns the table in the center

BGCOLOR="color'"
sets the color of the background for the table. This color can be overridden by
a
BGCOLOR tag in the TH, TR, Or TD tags.

BORDER="value" indicates the thickness, in pixels, of the border to draw

around the table. Give the value as an integer. no border. means value 0

CELLPADDING="value"
determines the amount of space, in pixels, between the border of a cell and the
contents of the cell. The default is 1.
 HTML
143

CELLSPACING='value" determines the amount of space, in pixeIs,"

between individual cells in a table. The default is 2.

HEIGHT="height"
specifies the height of the table. The default is the optimal height determined
by the contents of each cell. Can be a number of pixels, or a percentage of the
height of the page or parent element.

WIDTH="width"
defines the width of the table. The default is the optimal width determined by
the contents of each cell. Can be a number of pixels, or a percentage of the
height of the page or parent element.

COLS="numberOfColumns"
Indicates how many virtual columns of equal width fit in the width of the
window. If the WIDTH attribute is supplied, the COLS attribute indicates how
many virtual columns fit in the specified width. Suppose that the WIDTH
case, each column takes
attribute is "80%" and the COLS attribute is 4. In this
up 20% of the width of the window. Note, however, that if the minimum
an actual column is greater than the
width needed to display the contents of
to fit its
width of a virtual column, then the width of the column is expanded
contents.

HSPACE-"horizontalMargin"
the table and any
Specifies the distance between the left and right edges of
surrounding content.

VSPACE="verticalMargin"
the top and bottom edges of the table and any
Specifies the distance between
surrounding content. or
<TD>... </TD>
within <THS </THS
Similarly you can define Attributes
cells as-- Horizontal alignment of a cell..
ALIGN (LEFT, CENTER, RIGHT)
(TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
VALIGN a cell spans.
COLSPAN=n The number (n) of columns
rows a cell spans.
ROWSPAN=n The number (n)of

are
Important Hint
always have end tags. Although the end tags
1. TH, TD and TR should formatting of the table if
many browsers will mess up the
formally optional, always use end tags if you
you should
you omit the end tags. In particular,
a html document.
have a TABLEwithin
 HTML
144

TABLE has no borders. By default, tables are drawn without borde.

2. A default
to the lines.
lines. Ycu need the BORDER attribute draw
a table is flush with the left margin. Most current browsers alsa
3. By default, values ars
ALIGN attribute. Allowed
supports table alignment, using the
"right", or "center", for example: <TABLE ALIGN="left">. The values
"left",
or right of the page, with text floy
"left" and "right" float the table to the left
allowed around the table.
4. Alignment atiributes
on TD or TH attributes override those alignments
specified by the TR:

> VARIOUS TABLE EXAMPLES

1.Table with no border and caption:
<HTML>
<BODY>
<TABLE>
<CAPTION>TABLE WITH NO BORDER</CAPTION>
<TR>
<TD>ABC</TD>
<TD>XYZ</TD>
<TD>PQR</TD>
STR>
<TR>
<TD>LMN</TD>
<TD>DEF</TD>
<TD>HYJ</TD>
<TR>
<JTABLE>
<BODY>
<HTML>

Output displayed by browser is:

TABLE WITH NO BORDER
ABC XYZ POR
LMN DEF HYJ

2.Table with background color and image no border:

<HTMLs
<BODY>
CH4>A BACKGROUND COLOR:</H4>
TABLE BORDER="T" BGCOLOR="BLUE">
<TR>
<TD>100</TD>
<TD>200</TD>
 HTML 145

<TD>300</TD>
STR>
<H4>A BACKGROUND IMAGE:<H4>
<TABLE BORDER="1"
BACKGROUND=".CADESKTOPXYZ.JPG">
<TR>
<TD>SUNDAY<TD>
<TD>MONDAY</TD>
<TR>
<TR>
<TD>TUESDAY</TD>
<TD>WEDNESSDAY<TD>
TR>
<TABLE>
<JBODY>
<JHTML>
output displayed by browser is:
A Background Color:
100206l306:
A Background Image:
SUNDAY MORDAN
TUESBDAYWEDNESSDAY

3.Table With Cell spacing

<HTML>
<BODY>
<H4>WITHOUT CELLSPACING:<H4>
<TABLE BORDER="1">
<TR>
<TD>SUNDAY<TD>
<TD>MONDAYTD>
<STR>
<TR>
<TD>WEDNESSDAY<JTD>
<TD>THURSDAY<TD>
JTR>
STABLE>
CELLSPACING:</H4>
<H4> WITH CELLSPACING="10">
<TABLE BORDER="1"
<TR>
<TD> SUNDAYTD>
<TD> MONDAY <TD>
146 HTML

<JTR>
<TR>
<TD> WEDNESSDAY </TD>
<TD> THURSDAY </TD>
<TR>
<TABLE>
<BODY>
HTMLs
so output displayed by browser is:

WITHOUT CELLSPACING:
SUNDAY
MONDAY
WEDNESSDAYTHURSDAY
WITH CELL SPACING:

SUNDAY MONDAY
WEDNESSDAY THURSDAY

4.Table with cell padding

<HTML>
<BODY>
<H4>WITHOUT CELLPADDING:<H4>
<TABLE BORDER-"1">
<TR>
<TD>SUNDAY<TD>
<TD>MONDAY</TD>
<TR>
<TR>
<TD>WEDNESSDAY</TD>
<TD>THURSDAY</TD>
<STR>
STABLE>
<H4> WITH CELLSPADDING:<H4>
<TABLE BORDER="1" CELLPADDING="20">
<TR>
<TD> SUNDAY <TD>
<TD> MONDAY <TD>
STR>
<TR>
<TD> WEDNESSDAY <TD>
 HTML 147

<TD> THURSDAY <TD>

<STR>
<TABLE>
<BODY>
<HTML>
so outputdisplayed by browser is:

WITHOUT CELL PADDING:

SUNDAY MONDAY
WEDNESSDAYTHURSDAY

WITH CELL PADDING:

SUNDAY MONDAY

WEDNESSDAY THURSDAY

5. Table showing use of colspan and rowspan.

<HTML>
<BODY>
<H4>WITHOUT CELLPADDING:<H4>
<TABLE BORDER="1">
<TR> LANGUAGE</TD>
TD COLSPAN=2 ALIGN=CENTER>PRGRAMMING
<TR>
<TR>
<TD ROWSAN=2>OBJECT ORIENTED LANGUAGE</TD>
<TD>JAVA</TD>
JTR>
<TR>
<TD>C++<TD>
</TR>
<TR>
ROWSPAN=2>STRUCTURED LANGUAGE</TD>
TD
<TD>CkTD>
<STR>
<TR>
<TD>BASIC</TD>
</TR>
<KTABLE>
 HTML
148

</BODY>
SHTML>
so output dispiayed by browser. is :-
PRGRAMMING LANGUAGE
JAVA
OBJECT ORIENTED LANGUAGE
C++
C
sTRUCTURED LANGUAGE
BASIC

4.9 IMAGES IN HTML

The IMG tag specifies an image to be displayed in an HTML document.
An image can be a plain image that simply appears on the page. An image
can be embedded in an <A HREF> tag so that the user can click it to open a URL. An
image can also be an image map, which has multiple clickable areas that each link
to different URLS. The HEIGHT and WIDTH attributes indicate the dimensions of
the image. If you specify these attributes, Navigator uses them to reserve a place for
the image on the page and continues loading any text and other page elements instead
of waiting for the image to load. Most Web browsers can display inline images (that
is, images next to text)
Images can be in the following types of formats:
GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)
XPM (X PixMap)
XBM (X Bitmap)

Syntax
<IMG
SRC="location"
ALT="alterntiveText"
ALIGN="alignment"
BORDER="borderWidth"
HEIGHT="height"
WIDTH="width"
HSPACE="horizMargin"
VSPACE="verticalMargin"
>
The SRC attribute is compulsory
SRC="location(URL)"
specifies the URL of the image to
be displayed in the document.
 HTML 149

ALT="alternativeText"
specifies text to be displayed if the browser does not support the IMG
tag or if the user has suspended image loading in the browser.

ALIGN
specifies the alignment of the image in relation to the surrounding text. If you do not
specify a value for ALIGN, browser uses BOTTOM as the default LEFT aligns
an
image with the left margin.
RIGHT aligns an image with the right margin.
TOP aligns the top of an image with the top of the tallest item in the
current
line.
text in the
TEXTTOP aligns the top of an image with the top of the tallest
current line.
text in the
MIDDLE aligns the middle of the image with the baseline of the
current line.
text in the
BASELINE aligns the bottom of an image with the baseline of the
current line.
BOTTOM is the same as BASELINE.

BORDER="borderWidth'"
image. The value must
Specifies the width, in pixels, of border around the
a

be an integer.

HEIGHT="'height"
or as a percentage of the
Specifies the height of the image, either in pixels
HTML that contains th image.
height of the window, frame, or positioned block of
value as an integer, for example, "100". To
To indicate a number of pixels specify the
a percentage, specify the value as an integer followed by the percentage sign,
indicate
for example "20%".

WIDTH='"width'"
the width of the image either in pixels or as a percentage of the
Specifies a
or positioned block of HTML containing the image. To indicate a
window, frame,
as an integer, for example, "100". To indicate
number of pixels specify the value
the value as an integer followed by the percentage sign, for
percentage, specify
Cxample, "20%".

HSPACE-"horizMargin"
a margin in pixels between the left and right edges of the image and
Specifies
value as an integer
Surrounding text and images. Give the
 150

VSPACE="verticalMargin" top and bottom edges of the image

Specifies a margin in pixels between the
as an integer.
and surTOunding text and images. Give the value

Dummy Images
an imnage that does not exist, your browser
When an <IMG SRC> tag points to your final review of
software substitutes a dummy image. When this happens during hyperlink
your files, make sure that the referenced image does in fact exist, that the
permission is set
has the correct information in the URL, and that the file
appropriately.

External Images, Sounds, and Animations

as a separate document when a user
You may want to have an image open
activates a link on eitherword or a smaller, inline version of the image included in
your document. This is called an external image, and it is useful if you do not wish to

slow down the loading of the main document with large inline images.
To include a reference to an external image:
<A HREF-"ExtImg.gif">text or link<lA>

You can also use a smaller image as a link to a larger image:

<A HREF="Biglmage.gif"><IMG SRC="Snialllmage.gi"'><lA>

The reader sees the Smalllmage.gif image and clicks on it to open the BigrImage.gif
file.
Youcan use the same syntax for links to external animations and sounds, The
only difference is the file extension of the linked file like:
<A HREF-"K3GtheFilm.mov">link anchor</A>
specifies a link toa QuickTime movie. Some common file types and their extensions
are:
1) plain text :--.txt
2) HTML document i-- html
3) GIF image -- -gif
X
4) Bitmap image --xbm
5) JPEG image --
JPg or jpeg
6) AIFF sound file .aiff
7) AUsOund file .au
8) WAV sound file .Wav
9) QuickTime movie :- „Imov

10) MPEG movie -- mpeg or .Impg

 HTML 151
> Examples
Inserting Image as an background:
Newer versions of Web browsers can load an image and use it as a background when
displaying a page. some people like background images and some don't. In general, if
you want to include d background, make sure your text can be read easily when
displayed on top of the image.
Background images can be a texture (linen finished paper, for example) or an image
of an object (a logo possibly). You create the background image as you do any image.
<HTMLs
<BODY BACKGROUND="background Image.jpg">
....text within a body
<BODY>
</HTML>

Both gif and jpg files can be used as HTML backgrounds.

If the image is smaller than the page, the image will repeat itself.

Different sized images:

<HTMLS
BODY>
<P>
<IMG SRC="c:\MyDoc\bulb.gif" width="12" height="20">
<P>
<P>
<IMG SRC="c: MyDoc\bulb.gif" width="50" height="70">
<P>
SBODY>
<HTML>
SO output displayed by browser will be:

values in the
you can make a picture larger or smaller changing the
Ihus
HEIGHT"
and "WIDTH"
attributes of the img tag.
 152 HTML

Images from different location:

You can insert images from different locations
either from web or fron
different directories on your local machine>Here you have to
attribute, where image lies. give the full path to src
<HTML
<BODY>
<P>
Image from local disk,but different directory....
<IMG'SRC="c:\MyDoc\vk\images\bulb.gif>

>
Image from net...
<IMG SRC="http://www.yah00.com/Logo.gif"
WIDTH="73"
HEIGHT="68">
P>
<BODY>
<HTML>

Image as a link:
You can have image as a link to some
other image or document.
<HTML>
<BODY>
Click on Icon.gif file to get your destination
document.
<A HREF="DestinationPage.htm">
<IMG BORDER"0" SRC="ICONT.GIF"
WIDTH="20" HEIGHT="38">
<JA>
<P>
Click on Logo.gif file to get
resultant image you want......
<A HREF="ResultantImage.jpg">
<IMG BORDER="0" SRC="ICONT.GIF"
WIDTH-"20" HEIGHT="38"'>
JA>
<BODY>
<HTML>

Alternate text:
Text-only browsers will only
"This is Alternative Text".(in display the text in the "alt" attribute,
this example) or Some World which is
as Lynx (text Wide Web browsers such
only browser) cannot
loading even if their software can display images. Some users turn off image
display images (especially
modem or have a slow connection). they are using a
HTML provides a mechanismifto
tell readers what
 HTML
153
they are missing on your pages if they can't load images The
ALT attribute lets you
specify text to bc displayed instead of an image. Note that if you hold
the mouse
nointer over the image it will display the text called tool tip.

<HTML>
<BODYS
<IMG SRC="ICON.GIF" ALT=" This Is Alternative Text " WIDTH="30"
HEIGHT="30">
<BODY>
<<HTML>

Images without Text

To display an image without any associated text (e.g., your organization's
logo), make it a separate paragraph. Use the paragraph ALIGN= attribute to center
the image or adjust it to the right side of the window

<HTML>
<BODY
<PALIGN=CENTER>
<IMG SRC = "ICON.GIF" ALT="NOTEXT">
</P>
<BODY>
SHTML>

4.10HTML SCRIPTS
HTML pages with scripts are used to make them more dynamic and interactive.

VBScript
Microsoft Visual Basic Scripting Edition brings active seripting to a wide
variety of environments, including Web client scripting in Microsoft Internet
Service.
Explorer and Web server scripting in Microsoft Internet Information

Easy to Use and Learn

If you already know Visual Basic or Visual Basic for Applications (VBA),
once you learn
VBScript will be very familiar. Even if you do not know Visual Basic,
VBScript, you are on your way to programming with the whole
family of Visual
VBScript
Basic languages. VBScript is integrated with World Wide Web browsers.
a general scripting language in other
and Windows Script can also be used as
applications.
With Windows
VBSCript talks to host applications using Windows Script.
Script, browsers and other host applications do not require special integration code
enables a host to compile scripts.
for each scripting component. Windows Script
 HTML
154

obtain and call entry points, and manage the namespace avail able to the developer,
With Windows Script, language vendors can create standard language run times for
scripting. Microsoft willprovide run-time support for VBScript

Insert a Script into HTML Page

A script in HTML isdefined with the <script> tag. Note that you will have to
use the type attribute to specify the scripting language
e.g.
<HTML>
<HEAD>
<TITLE>JAVA SCRIPT</TITLE>
<HEAD>
<BODY>
<SCRIPT TYPE="text/javascript">
document. write("Hello World!")
<<SCRIPT>
<SBODY>
<HTML>

The script above will produce this output:

Hello World!

A new browser willunderstand that the script should be executed, even comment
if
tags surTound it.

Various tags in VB seript

The <NOSCRIPT> Tag
In addition to hiding the script inside a comment, you can
also add a
<noscript> tag.
The <noscript> tag is used to define an alternate text if a script is NOT
executed. This tag is used for browsers that recognize the <script> tag,
support the script inside, so this browser will display the text
but does not
inside the <noscript> tag
instead. However, if a browser supports the script inside the
<script> tag it will ignore
the <noscript> tag.
e.g.
<SCRIPT TYPE="text/vbscript">
<!-

document. write("Hello World!")

-->
SCRIPT>
NOSCRIPT>Your Browser Does Not Support Vbscript!</NOSCRIPT>
 HTML 155

Seript Tags:
<SCRIPT> Defines A Script
<NOSCRIPT> :- Defines An Alternate Text If The Script Is Not Executed
<OBJECTS Defines An Embedded Object
<PARAM> Defines Run-Time Setings (Parameters) For An Object
<APPLET> Deprecated. Use <object>

The <SCRIPT> Tag

VBScript code is written within paired <SCRIPT> tags. For example, a
procedure to test a delivery date might appear as follows:
<SCRIPTLANGUAGE="VBScript">
<l-
Function CanDeliver(Dt)
CanDeliver = (CDate(Dt) - Now)) > 2
End Function
-->
<SCRIPT>
Beginning and ending <SCRIPT> tags surround the code. The LANGUAGE
attribute indicates the scripting language. You must specify the language because
function is
browsers can use other scripting languages. Notice that the Can Deliver
>). This prevents browsers that don't
embedded in comment tags (<! and
understand the <SCRIPT> tag from displaying the code.
page. You cn put them
You can use SCRIPT blocks anywhere in an HTML
in both the BODY and HEAD sections. However,
you will probably want to put all
in order to keep all the code
general-purpose scripting code in the HEAD section ensures that all code is read and
together. Keeping your code in the HEAD section
section.
decoded before it is called from within the BODY you may
want to provide inline
One notable exception to this rule is that
events of objects in your form. For
scripting code within forms to respond to the
to respond to a button click in a form:
example, you can embed scripting code
<HTMLs
<HEAD>
<TITLE>Test Button Events</TITLE>
SHEAD>
<BODY>
FORM NAME="Form1">
TYPE="Button" NAME="Button1" VALUE="Click">
<INPUT
FOR="Button1" EVENT="onClick" LANGUAGE="VBScript"
<SCRIPT
MsgBox "Button Pressed!"
JSCRIPT>
<FORM>
</BODY>
SHTML>
 HTML
156

Most of your code will appear in either Sub or Function procedures and
witt

be called only when specified by your code. However, you can write VBScript code
outside procedures, but still within a SCRIPT block. This code is executed only once,
when the HTML page loads. This allows you to initialize data or dynamically change
the look of your Web page when it loads.

e.g Random number generator using VB Script (Specimen paper)

<%@ LANGUAGE-"VBSCRIPT" %>

<%
X=0
y=0
dim xarr(9)
Do While x < 10
Randomize
Myval= nt(100 * Rnd) + 1)
Y=0
For y=0 to 9
If MyVal=xarray(y) then
Match = True
Exit for
Else
Match = False
End If
Next
If Match=False then
xarray(x) = MyVal
X=X+1
End If
Loop
%>
<HTML>
<BODY>
<TITLE>RANDOM GENERATOR</TITLE>
<%x=0'for x=0 to 9%>
<P<%response.write(x+1)%>) &nbsp:<%response.write(xarray())%> <P>
<%'next%>
<BODY>
<HTML>
 HTML
157

SOLVED EXAMPLES
1) Write HTMLcode to display a Message using different Font attributes.
<HTML>
<HEAD>
TITLE> HTML Document <TITLE>
</HEAD>
<BODY><FONT SIZE="7" face="Comic Sans MS">This is font size 7 with comic
sans ms font</FONT>
<p><FONT SIZE="5"COLOR="red">This is red colored text with font size
5</FONT><p>
<BODY>
<SHTML>
Output is:
eHTML Document Microsoft Internet Explorer
Eile Edit View Favorites Iools Help

Bedk Fovard Stop Refresh Home Seach Favates History Mal Prnt Discuss

Address DAONEne\hil fiesMonl htr eGo |Links

This is font size 7 with comic

Sans ms font
This is red colored text with font size 5
E My
Done CompateA
2) Write HTML code to explain Different leveis of headings with different
alignments.
<HTML>
<HEAD>
<TITLE>Headings <TITLE>
<HEAD>
<BODY>
<HI align="left">First level left aligned Heading</HI>
<H2align="center'>Second Level center aligned heading<H2>
<H3align="center">Third level center aligned heading</H3>
<H4 align="right'>Fourth level right aligned
heading</H4>
<H5 align="right">Fifth level right aligned headingH5>
heading</H6>
Hó align="left">Sixth level left aligned
SBODY>
JHTML>
158 HTML

Output is:
Headings Microsoft Internet Explorer
Elle Edit Vew Favorites Iools Help

Faspd Stop
Retesh Home SearchFavontes History Mal Pint Ed Discuss
Address DAONinehin! fleslheadngs.hl
GoLinks

First levei left aligned Heading

Second Level center aligned heading
Third level center aligned lheading

Fourth level right aligned heading

FIAh level right aligned heading

Strh Lavd
lt indttng
TDons

3) Write HTML code to explain

Different Lists in Html.
<HTML>
<HEAD>
TITLE> lists </TITLE>
<SHEAD>
<BODY BGCOLLOR="#FFFFFF">
<H3>Sample of Unordered lists</H3>
<UL type="disc">
<LILHI
<LILHELLO
<UL>
<H3>Sample of Ordered lists</H3>
<OL type="A" start=3>
<LISWELCOME
<LI>NAMASKAR
<JOL>
<H3>Sample of Definition lists</H3>
<DL>
<DT>HTML
<DD>HYPER TEXT MARKUP LANGUAGE
<DTSURL
<DD>UNIFORM RESOURCE LOCATOR
<SDL>/BODY>
<SHTML>
 HTML 159

Output is:
lists- Microsoft Internet Explorer
Eile Edit View Favorites Iools Help

Beck Foyard Stop Reftesh Home Seach Favontes Histoy 1

Mad Print

Address ] DAONine nm
htnd
lies\ists.htm EGoLinks
Sanple of Unordered lists

ELLO

Sanple of Ordered lists

C. WELCOME
D. NAMASKAR

Sample of Defiuition lists

HIML
HYPER TEXT MARKUP LANGUAGE
URL
UNIFORM RESOURCE LOCATOR
wy Computei
Done

(March 2002)
4) Write HTML code for the following:
YEAR
19981999 2000
UNITS 400 |1000
500
SALES
INCOME|1000|800 2000
<HTMLs
<BODY>
<TABLE BORDER>
<TR> COLSPAN="2">
<TH ROWSPAN="2"
COLSPAN="3">YEAR
<TH
<TR>
<TH>1998
<TH>1999
<TH>2000
STR>
<TR> ROWSPAN="2">SALES
<TH
<TH>UNITS
<TD>500
<TD>400
 160 HTML

<TD>1000
<TR>
<TR>
<TH>INCOME
<TD>1000
<TD>800
<TD>2000
<STR>
<TABLE>
</BODY>
</HTML>

5) Write the exact output of the following HTML code

with font specifications i
brackets: (March 2002)
<HTML>
<BODY>
<H1> LIST OF BOOKS </H1> <HR>
<UL TYPE = "CIRCLE">
<LI> How to solve it By computer
<LI> HTML in Easy Steps
<LI> C++ Programming
<UL>
<OL type = "A">
<Lb Microprocessor Programming
<LIb Networking Essentials
<LIL Microcontrollers
<IOL>
<BODY>
<HTML>

Output given by browser is:

List of books (text size hl)
How to solve it By computer
HTML in Easy steps
C ++ Programming

A. Microprocessor Programming
B. Networking Essentials
C. Micro Controllers
 HTML
161

QUESTIONS
Select the correct alternatives:
1) The tag contains general information,or meta-information,
about the documnent.
a) <HEAD> b) <MARQUEE> c) <TITLE> d)<BODY>
2) The block-level elements contain
tag.
a) <PRE> b)<BODY> c) <MARQUEE> d)<HTML>

3) Attribute is used for setting color for visited hyperlinks

a) VLINK b)LINK c)HLINK
4) specifies the distance between the left and right edges of the table and
any surrounding content.
a) CELLSPACING b)CELLPADDING c)HSPACE d)VSPACE
5) A, tag, specifies the title for the table
a) CAPMTION b)TITLE c)HEAD
6) In type of list, list items are marked with bullets.
a) ORDERED b)DEFINITION c) NESTED d)UNORDERED
7) attribute in the body tag specify an image file to use as a background.
a) BGCOLOR b) BACKGROUND c)BGIMAGAE d) BACKGROUNDIMG
8) <a> tag has attribute. which defines URL of the document to be linked.
a) SRC b) HREF c)VREF )REF
9) Bulleted list in HTML is created by tag. (March 2019)
a) <UL>, b)<0L>, c) <B>, d) <BR>
10) HREF attribute in <A>tag stands for (March 2002)
a) Horizontal reference b)Hypertext reference
c)Hyperlink reference d)Hypermedia reference
11)To place the image into an HTML file attribute is used in IMG tag.
a) < URL>, b)
<
ALT >, c),
<
SRC>, d)< HREF> (March 2007)
12) tag is used to put a line break in HTML Code. (March 2003,2017)
a)<HR> b) <BR> c) <P> d)<TR>
I3) <A> tag has attribute which defines URL of the document to be linked.
c) VREF d) REF (March 2008)
a) SRC b) HREF
14) BORDER is attribute used in tag of HTML. (March 2016)
>, c), <TABLE>, d) < CAPTION>
a) < PRE>, b)< ADDRESS
a table. (March 2020)
15) tag is used to create rOw in
c) <t> d) <tts
a) <t> b) <th>
162 HTML

2 What is HTML?Stac advantages and disadvantages of HTML. (Oct.2003)

3) What is ALT attribute? Why it is used?
4) Explain cellspacing, cellpadding, colspan and rowspan attributes.
5) How can you include image as an background and as an hyperlink? Explain
giving examples?
With syntax diagram explain the structure of html webpage. (March 2017)
7) What are comments in HTML? Why they are required?
8) How can youhave a link to a image by having image as a link?
9) Explain with example Nested lists in HTML.
10) Explain the following HTML tags with one example of each:
i) <PRE>, ii) <SUP>, iii)<MARQUEE> (Mar.2004)
11) Explain the use of following HTML tags with example: (Mar.2005)
i)<0L> i)<TR> i) <B>
12) Explain the following HTML tags with one example of each: (Mar.2007)
i) <P> ii)<Ls iii) <PRE>
13) Explain the following HTML tags with one example of each: (Mar.2008)
i) <MARQUEE> ii) <SUB> iii) <BODY>
14) What is character formatting HTML?
in
15) Explain following tags with example:
<sup> <marquee> <hr><br <p> <script> (March 2002)
16) What are types of ist? Explain with the example
17) What is script? Why it is required?
18) Explain changing color scheme of web pages.
19) Write advantages and disadvantages of HTML. (March 2019)
20) Explain general structure of HTML page. (March 2020)
> Write HTML code to do following:
1.Write HTML code to do following..-
a) Give title to your web page as "Exam".
b) Include background color as pink and text in green colour. Have a different
font for page title and contents of the page.
c) Have a hyperlink to different page having url as "Result1.htm"
d) The resultant web page of this hyperlink should contain scrolling text as “All
THE BEST" inbold, italic and black color and light blue as a background color.
2.Write HTML code to do following.:-
a) Give title to your web page as "TUTORIAL'".
b) Include background color as light blue and
c) Text in red color.
d) Have a image “IMAGE.JPG" as an hyperlink.
e) The resultant web page of this hyperlink should contain scrolling
text as"Best Of Luck" in bold, italic and green color. Ano
"IMGNEW.JPG" image as the background of the page.
 HTML
163
3. Write HTML code for following.:--
Collge Name:S.P.College.

Admission data.

Streams capacity
Commerce 150
Science 100
Arts 100
Here Admission data. Should be the scrolling text.
Collge Name:S.P.College should be in bold, italics and in red color.
It should be hyper linked with th page containing college information.

4,
Write HTML COde for following.:-..
Collge Name:Cummins College Of Engg.

CCOEW

Courses No.of students.

Computer 120
Instrumentation 80
E& TC 60

as: CCOEW
Where image LOGO.JPG" is shown

5. Write HTML code to do following:

Todays Special;--
With toppings Rs.150.
PIZZA Rs.125.
Without toppings
(Domino's) Rs.40.
Mashroom PavBhaji
Cheese PavBhaji Rs.42. (WithButter) Rs.40.
PavBhaji Jain PavBhaji Rs.40.

(Mar.2004)
Write the HTML code for the
following table:
Year
2000 2001
1999
750 1,200
300
Units Rs. 12,0J0
Sales Rs. 3,000 Rs. 7,500
Income
164 HTML

7. Write a the HTML code for

the following: (Mar.2006)

Faculty

Arts Science Commercel

Boys 100 400 500

Students
Girls 300 300 400

8. Write the exact output of the following HTML code with font spcification in
brackets: (Mar.2006)
<HTML>
<TITLE> Introduction </TITLE>
<BODY>
<H> <B> Computer Science </B></H1>
<HR>
<U> EBalaguru Samy </U>
<iHR>
<IA> Achut S Godbole </H4>
<BODY>
SHTML>
9. Write the HTML code for the following table.
(Mar.2008)

Year
2000 2001 2002
Units 500 1000 1500
Sale
Income Rs. 5,000
Rs. 10,000 Rs. 15,000

Answers Q. (1)
1) <HEAD>, 2) <BODY>, 3) VLINK, 4) HSPACE, 5)
UNORDERED,
6)BACKGROUND, 7) HREF,8) Uniform Resource Locator,
9) <UL> 10))<BR> 11) < SRC >12) <BR> 13) HREF
14)<TABLE> 15) <tr>

O00