HTML, Javascript and Css

HTML, CSS, JavaScript
Unit 1 - HTML – Hyper Text Markup Language
1
Course Objective
To introduce the participants to
– Different HTML tags
– Cascading Style Sheets
– Client side Scripting with JavaScript
– Document Object Model
ER/CORP/CRS/LA39/003
Cop yright © 2005, Infosys 2
Technologies Ltd Version 1.00
2
Session Plan
Da y 1
HTML
Frames, Images and Forms
CSS
Day 2
Introduction to JavaScript
Document Object Model
3
References
Ivan Byross, “ Web enabled Commercial Application development
HTML,DHTML,JavaScript, Perl ,CGI “, BPB publications
David Flanagan, JavaScript The Definite Guide , Shroff Publishers.
Thomas Powell ,The Complete Reference – HTML, TATA McGRAW-HILL
www.w3schools.com
www.htmlgoodies.com
4
Unit Plan
What is HTML?
Where does it fit in?
HTML tags and attributes
Text formatting tags
Linking pages
Working with lists and tables.
5
WWW and HTML
The World Wide Web (WWW) is a network of the computers all over the world.
WWW is also knows as the web is a client-server network.
Communication on the web happens through HTTP.
Web information is stored in Web pages
Web Pages are stored on Web servers
Web clients view the pages in a Web browser.
Popular browsers are Internet Explorer and Netscape Navigator
Overview of www and HTML

• Internet is a communication network linking computers world wide.
• The World Wide Web is a way of accessing information over the medium of
Internet. It is an information sharing model that is built on top of the Internet.
• WWW is also known as the web.
• WWW is not a single entity it is a client-server network that includes web servers
that are designed to deliver files to the client.
• The web uses the http protocol to transmit data.
• A web site is a collection of files, linked together and saved on the web server.
These files are known as web pages.
• A Browser is an application that allows a user to find, view, hear, and interact with
World Wide Web
• Client utilizes browsers such as Internet Explorer, Netscape Navigator, Mozilla,
Opera etc to access web documents called web pages.
• First page which is displayed in the web browser when it connects to the web site
is called the home page.( The file name of the home page is normally index.html
or default.html)
• A Web server is the computer program (housed in a computer) that serves
requested HTML pages or files.
• Hypertext Transfer Protocol (HTTP) - The standard language that computers
connected to the World Wide Web use to communicate with each other.
6
What is HTML?
HTML stands for Hyper Text Markup Language .
It is used to design and develop Web Pages.
Tim Berners-Lee invented the World Wide Web and HTML
HTML is
– Simple
– Browser/Platform Independent
– Not Case Sensitive
– Different from other Programming Languages

– A medium for User Interface
Web Pages are coded in HTML. HTML documents are stored on the web server and
are downloaded as part of a response to a request from the client.
HTML stands for Hyper Text Markup Language and is used to create hypertext
documents that are platform independent. An HTML document is a text file that
contains the elements a browser uses to display text, multimedia objects, and
hyperlinks. A hyper link connects one document to another document. Hyper links in
text are easy to spot because they are usually underlined and a different color from the
rest of the text.
A markup language is a language that has codes for indicating layout and styling (such
as boldface, italics, paragraphs, placement of graphics, etc.) within a text file. Markup
language is entirely different from a programming language.
HTML is derived from Standard Generalized Markup Language (SGML). SGML is a

language used to define other languages.
Tim Berners-Lee invented the World Wide Web, HTML, HTTP and Universal
Resource Locators (URLs). He is currently the director of the World Wide Web
Consortium(W3C) the group that sets technical standards for the Web.
HTML tags are not case sensitive, <body> means the same as <BODY>
HTML using ASCII (plain text) format , hence platform independent
HTML is interpreted by the browser, not like other programming languages.
HTML form elements are used to create a GUI. 7

The HTML instructions are called tags, and look like
– <TAG> ….. Text here…….. </TAG>
Container tags :Tags that have starting as well as ending part.

– e.g.: <TITLE>Title of the Web Page </TITLE>
Empty tags : Tags that do not have the closing part.

– e.g. <BR> , <HR>
(HTML instructions + text to which the instructions apply)= HTML elements

An attribute is an additional feature you can use to configure the element
Attributes are optional. Element
e.g.: <H1 ALIGN = “CENTER”> This is a heading </H1>
Attribute
End tag
Start tag
An HTML file contains markup tags that tell the browser how to display the page.
HTML tags are used to mark the elements of a document for your browser. These
elements could be headings, tables, lists etc. and can contain plain text, other
elements, or both. The tags consist of a left angle bracket (<), a tag name, and a right
angle bracket (>). Tags could be paired (e.g., <H1> and </H1>) to start and end the
tag instruction.
Some tags don't need to have the closing part - these are called empty tags e.g. <BR>
whereas some tags necessarily need to have both the starting and ending part - these
are called container tags e.g. <H3> and </H3>. HTML tags are case insensitive.
Many HTML tags also have attributes assigned to them. An attribute is an additional
feature you can use to configure the element. For example, <H1> tag can also have an
attribute “ALIGN” assigned to it, so that <H1 ALIGN = “CENTER”> will generate a
center aligned heading. Attributes are optional, can be used depending on how you
want to modify the tag. Attributes always come in name/value pairs like this:
name="value" and are added to the start tag of an HTML element.
8
Structure of HTML Document
<HTML>
<HEAD> 
<TITLE>Title of the Web Page </TITLE>
</HEAD>
<BODY> 

<H1> Contents </H1>
</BODY>
</HTML>
An HTML file can be created by using a simple text editor viz notepad, textpad, editplus.
HTML file must have an extension htm or html.
Every HTML program or document has a rigid structure. The entire web page is
enclosed within the <HTML> </HTML> tag. Within this tag, two distinct sections,
head and body are created. These sections are as described below.
Document Head
The text between the <HEAD> tag and the </HEAD> tag is header information.
Header information is not displayed in the browser window, it is necessary for the
internal working of the document. An exception to this is the <TITLE> </TITLE>
tag, which displays the document title in the browser’s title bar.
Document Body
The <BODY></BODY> tag encloses the body of the HTML document.
Comments
The  tag is used to insert a comment in the HTML source code. A
comment will be ignored by the browser. Comments can be used to explain your
code or earmark the areas that need improvement, which can help you when you
edit the source code at a later date.
e.g.: 
Note that you need an exclamation point after the opening bracket, but not before
the closing bracket.
You can easily edit HTML files using a WYSIWYG (what you see is what you get)
editor like FrontPage, Visual Interdev etc. However,
these tools do not generate very optimized HTML code because it may contain
Unnecessary tags.
9
HTML Document - Head
Enclosed in <HEAD> </HEAD> tag
Tags that can go in the document head
– <TITLE>Indicates the title of the document that is used as the window caption
– <BASE> specifies the absolute URL address
– <LINK> specifies the relationship between the current document and other documents.
– <META> element can be used to specify name/value pairs describing various properties of
the document
– <SCRIPT> specifies the client side script name.
– <STYLE> To Include CSS (Cascading Style Sheet)
<BASE> element specifies an absolute URL address that is used to provide server and
directory information for partially specified URL address called relative address.
e.g: <BASE HREF ="http://www.inf.com/file.html“>
Specifies the base URL of the document. This is used when dereferencing relative URLs in
the page.
<META> element uses name value pairs to provide meta information about the document. It
often provides descriptive information that is targeted by search engines.
Eg: .
1. To have your page automatically reloaded every X seconds
<META HTTP-EQUIV="REFRESH" CONTENT=X >
2. To have a different page automatically loaded after X seconds
<META HTTP-EQUIV="REFRESH" CONTENT="X; URL= http://address/file.html">
3. To specify an expiration date for the page so that it will be reloaded after a certain date.
<META HTTP-EQUIV="Expires" CONTENT="Mon, 23 Sep 2001 01:21:00 GMT">
4. To specify keywords for certain search services to use.

<META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2, ...">
5. To specify a description of your page for certain search services to use

<META HTTP-EQUIV="Description" CONTENT="Describe your site here....“
<LINK> element is used in linking external CSS which will be discussed in later chapters.
10
HTML Document – Body
Enclosed in <BODY> </BODY> tag.
Some important attributes of the BODY tag

– BGCOLOR = “color” / “#rrggbb”
– BGPROPERTIES=FIXED
– BACKGROUND = “url of the image”
– TEXT = “color” / “#rrggbb”
– LEFTMARGIN = n
– LINK = “color” / “#rrggbb”
– ALINK = “color” / “#rrggbb”
– VLINK = “color” / “#rrggbb”
– TOPMARGIN= n
– Colors are defined using a hexadecimal notation for the combination of Red,
Green, and Blue color values (RGB).
<BODY > tag attributes

BACKGROUND=x.jpg - Specifies an image to be tiled as background.
BGCOLOR=color - Specifies the background color
BGPROPERTIES=FIXED -Fixes the background image so that it doesn't scroll.
LEFTMARGIN=n -Specifies the left margin for the entire page
TEXT=color -Specifies the color of text in the page
TOPMARGIN=n -Specifies the top margin for the entire page.
LINK -Specifies the link color.
ALINK -Specifies the active link color.
VLINK -Specifies the active link color.
RGB Color Components.

Color attribute values give a color definition. Colors are defined using a hexadecimal
notation for the combination of Red, Green, and Blue color values (RGB). The lowest value
that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). A
collection of color names like blue, green, cyan etc. are also supported by most of the
browsers.
<html><head>
<title>Background color</title>
</head><body bgcolor="cyan">
<h1> Contents </h1>
</body></html>
11
Formatting the web page
<FONT> tag
– Allows you to specify the font face and font size.
– Some common attributes are

• FACE specifies the font type.
Defaults fonts like “Arial”, “Times New Roman”, and “Cou rier” are available in all Systems.
• SIZE specifies the font size. Value can range from 1 to 7. The default is 3.
SIZE can be set as a relative value using + or – .
• COLOR- The color of a font can be specified using a hexadecimal number value six characters
long.
– E.g.: <FONT FACE=“Helvetica, Arial” SIZE=“7” COLOR=“#FF0000”>
The Written Word</FONT>
Formatting tags are used inside the <BODY> of the document to format your text
This is the largest category of tags and you will be using these tags most frequently.
<FONT> tag is a physical tag that describes the display attributes of the text inside.
E.g:
<FONT FACE="Comic Sans MS" SIZE=“2“ COLOR="Red">
This is comical and red and small</FONT><BR>

<FONT FACE="Comic Sans" SIZE="+2" COLOR="Red">
This is red and big. Is it comical?</FONT><BR>
If the font face is not specified correctly or not available in the system , the text will be displayed in the
default font.
In HTML the font size is limited to 1 to 7. In future you can use CSS (Cascading Style Sheets) for
changing the properties.
ie you can have a font with size 10 cm .
12
Text Formatting tags
Header Tags
– HTML has six level of headings.
– Displayed in larger and bolder fonts.
– Different level heading tags
• <H1> Heading 1 </H1>
The font size of the heading will go on decreasing from H1 to H6.

Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the largest.
Headings are typically displayed in larger and/or bolder fonts than normal body text.
The first heading in each document should be tagged <H1>. The syntax of the heading
element is: <Hy>Text of heading </Hy> where y is a number between 1 and 6.
HTML automatically adds an extra blank line before and after a heading.
HTML elements permitted within the BODY are classified as either block-level
elements (or) inline elements.
Block-level elements typically contain inline elements and other block-level elements.
Block-level elements usually begin on a new line.
13
Text Formatting tags
Paragraphs
– <P> </P> - used to create paragraphs.
Line Breaks
– <BR> - to insert returns or blank lines in the document.
– e.g. :<P>This <BR> is a para<BR>graph with line breaks</P>
Horizontal Lines
– <HR> - used to draw a horizontal line across the web page.
– e.g: <HR ALIGN = “right” WIDTH = “50%” NOSHADE >
Paragraphs
Unlike documents in most word processors, HTML document ignore multiple spaces, tabs
and carriage returns. Word wrapping can happen any time in your source file and
multiple spaces are collated into a single space. To preserve some text formatting we
use the <p> tag which created paragraphs. Normally the browser places a blank line
before the paragraph
Some elements do not have closing tags (known as empty tag).
<BR> is an empty tag used when you want to end a line, but don't want to start a new
paragraph. The <BR> tag forces a line break wherever you place it.
e.g. : <P>This <BR> is a para<BR>graph with line breaks</P>

<P> tag has a ALIGN attribute which aligns the paragraph to LEFT, RIGHT, CENTER
or JUSTIFY (justified)
Horizontal rules
The <HR> tag draws a horizontal line across the page. It is useful to separate different
sections of a single page.
Some attributes are
SIZE - Sets the line thickness
WIDTH - Sets the width of the of the line
ALIGN - sets the alignment to LEFT,RIGHT or CENTER.
NOSHADE - renders the bar without surrounding shadow.
14
Text level elements
Basic two flavors
– Physical tags : dictates the presentation

• E.g.: <B> </B>
– Logical tags : indicates the contents

• E.g.: <STRONG> </STRONG>
Logical tags
A logical tag gives some kind of indication about the content but does not dictate the presentation.
For e.g. Level 1 heading i.e. <H1> - this indicates the highest level heading in the page. However it
does not specify whether this should be Arial or Times New Roman, 20 pt or 24 pt.
Advantage of logical tags is that they help enforce consistency in your documents.
For example, consider the <STRONG> tag. Most browsers render it in bold text.
Logical styles offer the flexibility of changing the display attributes while making minimum changes
to code
Physical tags
Physical tags are used to specify how text should be rendered.
15
Physical text formatting tags
Tag Description
<B>….</B> - Bold
<I>……</I> - Italic
<U>….</U> - Underline
<STRIKE>…</STRIKE> - Strikethrough
<TT>….</TT> - Typewriter (monospaced)
<CENTER></CENTER> - Centers the text on the screen.
<SUB>….</SUB> - Subscript
<SUP>….</SUP> - Superscript
<BIG>….</BIG> - Bigger font (one font size bigger)
<SMALL>….</SMALL> - Small font (one font size smaller)
The following example shows the basic use of the physical text formatting tags:
<HTML>
<HEAD>
<TITLE> Physical tags </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF“ TEXT =“red”>
<H1 ALIGN ="center"> Physical tags </H1>
<HR>
This is <B> bold </B> <BR>
This is <I> Italic </I> <BR>
This is <U> underline</U> <BR>
This is <TT> Monospaced</TT> <BR>
This is <STRIKE> Strike-through</STRIKE> <BR>
This is <S>Strike-through</S> <BR>
This is <BIG> Big</BIG> <BR>
This is even<BIG><BIG> Bigger </BIG></BIG> <BR>
This is <SMALL> small</SMALL> <BR>
This is even<SMALL><SMALL> smaller</SMALL></SMALL> <BR>
This is <SUP> superscript</SUP> <BR>
This is <SUB> subscript</SUB> <BR>
</BODY>
</HTML>
16
Logical text formatting tags
Tag Description
<DFN> - A definition
<CODE> - Represents computer code
<KBD> - keyboard characters
<VAR> - Program variable
<CITE> - A citation
<EM> - Emphasized
<STRONG> - Strongly emphasized
Logical Formatting Tags
The formatting of this logical unit may in some cases be the same as produced by
other formatting tags. Remember, the tags specify logical units of the document,
software other than the web browser may need this information.
17
Linking Pages
Used to link text with other documents
<A></A>
– HREF
– NAM E (bookmarks inside the page)
– TITLE (balloon help in IE)
– TARGET (Define where the linked document will be opened)
e.g.: <A href=“next.html”> Click here </A>
Used to link text with same documents
e.g.: <BODY link=“blue” alink=“green” vlink=“red”>

<A name=“top”> Top of the Page </A>
……………………………………………………
<A href=“#top”>Top</A> </BODY>
Linking the pages

A link is a unidirectional pointer from a source document that contains the link to the
some destination. Links help the user to navigate across pages as well as within a
page. The text or an image that provides such link(s) is called hypertext or hyperlink.
Hyperlinks can be created by using a <A> tag, which stands for anchor and has the
following attributes.
• HREF - Hypertext Reference: This attribute points the link to a
bookmark, another file, either within the same webs site or
elsewhere on the internet.
• NAME - Name: The name of the bookmark. This attribute lets you
“bookmark” a location on the web page. An HREF anchor can point
a link to that area on the page.
•TITLE - Displays balloon help in IE
•TARGET - With the target attribute, you can define where the
linked document will be opened.
You can use HREF to point to a URL and allow the reader to view the page from the
beginning. Or, you can use HREF to point to a specific area of that page, indicated by
a NAME bookmark, so that the user goes straight to that section of the document.
Formatting the Link

The following attributes of <BODY> tag is used to provide color for the link.
LINK - Specifies the link color.
VLINK - Specifies the visited link color
ALINK - Specifies the active link color. 18
Lists
UnOrdered Lists - Bullets appear
– <UL> </UL> tag
– <LI> tag
– TYPE attributes specifies the type of bullet
– TYPE = “disc” | “circle” | ”square”
<UL TYPE = “disc”>

<LI> Item 1
<LI> Item 2
<LI> Item 3
</UL>
O/P :
•Item 1
•Item 2
•Item 3
HTML has many ways to format lists information. Lists actually require two tags:
The list tag itself, and the tag or tags used to define individual list items. Different
types of list formatting available are discussed below.
Unordered Lists
• Unordered lists, are enclosed between the <UL > and </UL > tag.
• Each item starts with the <LI> tag .
• The attribute that can be specified with <UL> tag is
TYPE= DISC will give a solid round black
TYPE= SQUARE will give a solid square black bullet
TYPE= CIRCLE will give a circle black bullet
19
Lists
Ordered Lists - serial numbers appear
– <OL> </OL> tag
– <LI> tag
– TYPE attribute controls the numbering scheme
• TYPE = 1 | A | a | I | i
<OL TYPE = “1”>

<LI> Item 1
<LI> Item 2
<LI> Item 3
<OL>
O/P : 1. Item 1
2. Item 2
3. Item 3
Ordered Lists
An Ordered list starts with a <OL> tag and ends with a </OL> tag.
Each list item starts with the tag <LI>
The attribute that can be set with <OL> are:
TYPE - Controls the numbering scheme to be used
TYPE= “1” will give counting numbers (1, 2, 3….)
TYPE= “A” will give uppercase letters (A, B, C….)
TYPE= “a” will give lowercase letters (a, b, c….)
TYPE= “I” will give uppercase Roman numerals (I, II, III…..)
TYPE= “i” will give lowercase Roman numerals (i, ii, iii,……..)
START - Alters the numbering sequence. Can be set to any value
VALUE - Can be set with the <LI >tag to changes the numbering sequence
in the middle of an ordered list.
20
Lists
Definition List - defines a definition list
<DL> </DL> tag
<DT> - Definition Term
<DD> - Definition Data
<dl>
<dt>Java</dt>
<dd>An Object Oriented Language</dd>
<dt>HTML</dt>
<dd>A Markup Language</dd>
</dl>
O/P: Java
An Object Oriented Language
HTML
A Markup Language
A definition list is not a list of items. This is a list of terms and explanation of the terms.
A definition list is a list of terms paired with associated definitions- in other words, a
glossary.
Definition list are enclosed with in <dl> and </dl>

<dt> - Definition term.
<dd> - Data definition.
21
<PRE> tag
Different than other text formatting tags.
Does not ignore spaces.
Can display data in tabular format using <PRE> </PRE > tag.
Too much cumbersome if frequent changes are required.
PRE –table era

Imagine creating a bus time-table or a movie ticket booking chart in a HTML page with
whatever we know until now.
How can we place the elements correctly? When you code text into HTML format, browsers
will ignore excess blank spaces and indents.
One exception to this is the PRE tag, which indicates the enclosed text should be displayed in
the fashion it is entered.
To see how PRE works? Just try out the following code snippet.
<HTML>
<BODY>
<PRE>
Let's make a marksheet
Sr. Student ID CHSSC PF RDBMS
1 1234 A B C
2 5645 B C A
3 6837 C B B
4 9874 D C C
</PRE>
</BODY>
</HTML>
Did you see that the output looks identical to the HTML source?? However, it is not
advisable to use the PRE tag for various reasons.
The solution to this is using tables
22
Tables
Display data in a tabular format.
Helps in positioning the contents of the page in a more structured way.
<TABLE> ….. </TABLE> : define a table.
Some attributes
– ALIGN = LEFT | RIGHT | CENTER
– BORDER = n (Number of Pixels )
– BGCOLOR = “color” | “#rrggbb”
– CELLSPACING = n (Number of Pixels )
– CELLPADDING = n (Number of Pixels )
– WIDTH= % Of Parent | n (pixels)
Tables can be used not only to display tabular data but also to position the contents of the page in a
more structured manner. The page layout can be controlled very effectively with tables. Tables are
defined with the <table> tag.
Note: Tables are used on websites for two major purposes.

1) The primary purpose of arranging information in a table
2) The more widely used purpose of creating a page layout with the use of hidden tables. (border
attribute values set to “0”).
The Attributes and it values

ALIGN - Align the table in a web page. (LEFT | RIGHT | CENTER).
BORDER - Specifies the thickness of the border
BGCOLOR - The background color for the table.
CELLPADDING - Specifies the space between the cell wall and contents .
CELLSPACING - Specifies the space between cell.
WIDTH - Specifies the width of the table
The WIDTH attribute value can be in percent (or) pixels. Pixels can be thought of as the smallest
logical unit for display. Pixel resolution can vary from PC to PC. Tables built with percents will
occupy that percentage of the browser’s visible area or the container area.
23
Table structure
<TABLE BORDER=1> 
<CAPTION> caption contents </CAPTION> 
<TR> 

<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR> 

<TR> 
<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR> 

<TR> 
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR> 
Table structure
Tables are defined with the <TABLE> tag.
A table is divided into rows (with the <TR> tag), and each row is divided into data cells (with the
<TD> tag).
The letters TD stands for “Table Data", which is the content of a data cell. A data cell can contain
text, images, lists, paragraphs, forms, horizontal rules, tables, etc
<TH> specifies the table header cell. It should occur within a<TR> tag. Some browsers will
emphasize the text enclosed by this tag.
<CAPTION> tag is used to give heading to the table. By default caption is placed above the table.
<CAPTION ALIGN =“bottom” > will place the caption below the table.
24
Creating tables
Simple sample table
Heading1 Heading2
Cell 1 Cell 2
Cell 3 Cell 4
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=30%>
<CAPTION> Simple sample table </CAPTION>
<TR>
<TH>Heading1</TH>
<TH>Heading2</TH>
</TR>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
</TR>
</TABLE>
The <TD> Attributes.
ALIGN - Defines the horizontal alignment in cells and values can be left, right, center,
justify.
BGCOLOR - Specifies the background color of the table cell.
VALIGN - Specifies the vertical alignment of cell content and values can be top, iddle,
bottom, baseline
WIDTH - Specifies the width of the table cell.( % (or) pixels)
COLSPAN - Indicates the number of columns this cell should span
ROWSPAN - Indicates the number of rows this cell should span
25
Creating tables
This cell spans 2 columns! Cell
Cell Cell
This cell spans 3 rows!! Cell Cell

<TABLE WIDTH="100%" BORDER=1 BGCOLOR=gray>
<TR ALIGN=CENTER > Cell Cell
<TD COLSPAN=2>This cell spans 2 columns!</TD>
<TD> Cell </TD></TR>
<TR ALIGN=CENTER >
<TD ROWSPAN=3>This cell spans 3 rows!!</TD>
<TD> Cell </TD>
<TR ALIGN=CENTER >
<TD> Cell </TD>
<TR ALIGN=CENTER >
<TD> Cell </TD>
<TD> Cell </TD>
</TR>
</TABLE>
The rowspan and colspan attributes.
By adding the rowspan and colspan attributes to the table elements, it is possible to create data
cells
that span a given number of rows or columns.
To set a cell to span three rows use <td rowspan=“3”> and to set a heading to span two columns,
use <th colspan=“2”>.
Setting the value of colspan and rowspan to more than the number of columns or rows in the table
Should not extend the size of the table.
26
Summary
What is HTML ? Where does it fit in?
Different text formatting tags like
– Paragraph
– Headings
– <FONT> tag
Linking pages : <A> tag
Working with Lists
<PRE> tag
Tables : Different table tags and attributes.
27
HTML, CSS, JavaScript
Unit2 – Images, Forms and Frames
28
Unit Objectives
To explain how to embed images in a HTML document and using images as links and
Image map.
To explain how to divide the page into frames.
To understand form designing and interaction using forms.
29
Unit Plan
Embedding Images in the HTML document
Images as links and Image maps
Interaction using forms
Different types of form elements.
Working with Frame and Framesets
Nested frames
“A picture is worth a thousand words”. Images probably are the most obvious part of a
a web site. Carefully used imagery can add to both the appeal and usability of a web
site.
An image-map is a large image that contains numerous hot spots that can be selected
, sending the user to a different anchor destination.
Forms enable users to submit information that can be used to create an interactive
web application ranging from an order entry system to an email application.
A frame divides a browser window into multiple panes, or smaller window frames.
Each frame can contain a different document.
30
Embedding Images
<IMG> tag
– SRC = “url”
– ALIGN = “TOP | MIDDLE | BOTTOM ”
– BORDER = n
– WIDTH=n (in pixels)
– HEIGHT=n (in pixels)
– ALT=“Alternate Text”
Supports JPG, GIF and PNG image formats.
ALT attribute was set to provide alternative text for browsers that did not display
images. ALT attribute can be used as a tool tip or placeholder information in image-
based browsers.
Most graphical browsers can display inline images. An Image can be embedded using
the <IMG> tag, which takes the name of the image file as an attribute. Lists below are
some attributes of the image tag.
Web pages require JPG (or) GIF (or) PNG image types. On the web, JPG is the best
choice (smallest file) for photo images, and GIF is common for graphic images
because GIF supports transparent color feature. PNG was designed recently, but it's
appeal is growing as people discover what it can do. Most of the Browsers can not
show BMP images.
JPEG: Joint Photographic Experts Group.
GIF: Graphic Interchange Format.
PNG: Portable Network Graphics Format.
31
Images as link
Images when put in the anchor tag act as hyperlinks
<A HREF=“Mypage.html">
<IMG SRC=“Littlejoe.jpg“ >
</A>
Another form of clickable images is the idea of an image map.
Client Side Image Maps.
<A> element is used to enclose a specially marked <img> element.
Server Side Image Maps.
<map> element that defines the image map’s active areas.
Images can be put inside the anchor tag (<A> </A>) to make them clickable images or
hyperlinks which the user can follow to link to different URL’s. The image will be
displayed with a border. If you don't like the border, add BORDER=0 to the IMG tag.
An image map is an image that contains many hyper links that might result in a
different URL being loaded, depending on where the user clicks.
32
Image Maps
An image containing numerous hotspots.
Each hot spot can load different URL’s.
Create an image map using <MAP> tag and <AREA> tag

eg:
– <MAP NAME="forMap">
<AREA SHAPE="circle" COORDS="20,20,40"
HREF="Page1.htm">
<AREA SHAPE ="rect" COORDS="100,100,50,50“
HREF="Page2.htm">
</MAP>
Apply the map created to an image.

– <IMG SRC=“in.jpg” USEMAP =”#forMap”>
forMap is the name of the map
AREA Description/Value
Attribute
SHAPE Shape of the hot spot can be set to RECT, CIRCLE,
POLYGON, DEFAULT
COORDS Sets the points that define a shape.
HREF Defines the destination of the link.
The name attribute of the <map> element is used to specify the identifier associated with the
map.
The map name is referenced with in the <img> element using the usemap attribute.
The <area> tag is used to define area’s inside the image so that the user can use that area as
a hyperlink.
The attributes of <area> element are href, shape, and coords.
Shape Coordinate Format.
rect left-x, top-y, right-x, bottom-y
circle center-x, center-y, radius
poly x1,y1,x2,y2,x3,y3,……
Eg:
<img src="clouds.jpg" usemap="#formap" height=200 width=200>
<map name="formap"> 
<area shape="circle" coords="20,20,40" href="hdj_page1.htm">
<area shape="rect" coords="100,100,50,50“ href="hdj_page2.htm">
<area shape=“polygon" coords=“225,112,309,35,336,53,445,78,556,89"
href="hdj_page2.htm"> </map>
33
HTML Character Entities
Some characters like the < character, have a special meaning in HTML, and
therefore cannot be used in the text. The most common character entities:
Result Description Entity Name
non-breaking space
< less than <
> greater than >
& ampersand &
“ quotation mark "
‘ apostrophe '
Some Other Commonly Used Character Entities
© copyright ©
® registered trademark ®
£ pound £
¥ yen ¥
Sometimes , you need to put special characters within a document, such as accented
letters, copyright symbols, or even the angle brackets used to enclose HTML
elements. To use such characters in an HTML document, they must be “escaped” by
using a special code.
All character codes take the form &code;
code is a word or numeric code indicating the actual character that you want to put
onscreen.
Eg:
<h1> All html tags should be inside the <HTML> Tag</h1>
34
Forms
Set of fields that can record information
To interact with the client
FORM by itself really cannot do anything
Forms become powerful when connected to a server application
A single HTML page can have multiple forms.
A form in HTML is enclosed between the <form> and <form> tags.

A form is an area that can contain form elements.
The form itself contains regular text, other HTML elements such as tables, and form
elements.
Form elements allow the user to enter information (like text fields, textarea fields, drop-
down menus, radio buttons, checkboxes, etc.) in a form.
Forms become a powerful tool when connected to a server application. When the user
clicks on the submit button the web browser transmits all the information in the fields to
the server and server side program is invoked.
JSP, ASP, and CGI are some examples of server side programs.
Form data can be manipulated by client side scripts like Javascript and VBScript.
35
Forms
Can be designed using <FORM></FORM> tag
<FORM NAME=“form1” ACTION="abc.asp" METHOD=GET>
<!– NAME is used for future manipulation of data by scripting

language
ACTION indicates a program on the server that will be executed
when this form is submitted. Mostly it will be an ASP or a CGI
script.
METHOD indicates the way the form is submitted to the server -
popular options are GET/POST -->
(form elements go here)
</FORM>
The differences between the two methods of submitting data GET/POST are
summarized below:
GET method.
1) The GET method is the default method for browsers to submit information.
2) GET is easy to deal and fast.
3) All the information form the form is appended onto the end of the URL.
4) It is not secure because the data input appears in the URL.
5) Most browsers limit a URL to several thousand characters.
POST method.
1) Used to pass large amount of information to the server.
2) Contents are sent with HTTP request body not with URL.
36
Form elements
<INPUT> tag is used to add elements to the form.
– NAME = “controlname”
– TYPE = text / password / checkbox / radio/ submit / reset /
button / hidden / file
– VALUE
– MAXLENGTH
– SIZE
All elements should be named by setting a unique value to the name attribute.
The value attribute is used to set a default value for the control.
Elements on a form
A form is made up of fields or controls. Form controls include text fields,
password fields, multiline text fields, scroll lists etc.
All form elements should be enclosed in <form> and </form> tag.
<html>
<body>
<form name=form1>
Name <input type="text" name="nam"><br>
DOB <input type="text" name="dob"><br>
</form>
</body>
</html>
37
Text Box/Password
A text field can be added to the form by typing
– <INPUT TYPE=“TEXT" NAME=“txtcompany" VALUE=”INFOSYS” SIZE="10"
MAXLENGTH="15">
A password field can be added to the form by typing
– <INPUT TYPE=PASSWORD NAME=pwdLogin SIZE=50 MAXLENGTH=12>
– Input to the field will not be revealed.
Attributes are
– VALUE is the default value loaded
– SIZE sets the size of the field in no. of characters.
– MAXLENGTH specifies max number of characters that can be entered to the control.
Text field.
Text is the default attribute for the <input> element type attribute.
<input name=“t1” value=“ok”> will create a a textbox.
Examples
• <INPUT TYPE=“TEXT" NAME=“txtCustomerName“>
Will create a text box. Since the above statement does not specify the size of the
field or the maximum number of characters the field will generally be 20
characters.
• <INPUT TYPE=“TEXT" NAME=“txtCustomerName“ SIZE =“40” >
Will create a text box of size 40 .The user can type any number of characters.
To restrict the number of characters use attribute MAXLENGTH
• <INPUT TYPE=“TEXT" NAME=“txtCustomerName“ SIZE =“40” MAXLENGTH
=“30”>
Will create a text box of size 40 .The user can type 30 characters.
Password field
The password field are same as the text field, except that the input to the field is
not revealed. All the attributes of the text filed are applicable to the password field.
38
Text Area
Multiline text input
– <TEXTAREA NAME=“feedback” ROWS=3 COLS=40> Default text

goes here
</TEXTAREA>
ROWS is the number of rows desired.
COLS is the no of characters per line.
Default text is optional
It is not possible to set the default text using the VALUE attribute
The default text is to be put into
<TEXTAREA> </TEXTAREA> tags

When it is necessary to enter more than one line of text in a form field we can use
<textarea>
The information enclosed within the <textarea> element must be plain text and should
not include any HTML markup.
Internet explorer will wrap the text by default.
Some old versions of Netscape Browser will not support word wrap.
39
List Box
<SELECT NAME=“Hobbies” MULTIPLE SIZE=“3”>
<OPTION VALUE=“TR”>Travel
<OPTION SELECTED>Reading
<OPTION>Sleeping
<OPTION>Walking
</SELECT>
SIZE number of lines to display
VALUE indicates what will be sent to the server
SELECTED sets the default selected item
Lists let the user select one choice out of many possible choices. The SELECT
element contains one or more OPTION elements to provide a menu of choices for the
user. Its attributes are
•NAME attribute provides the key sent to the server with the value of the selected
option. By default, the user can only select one option. The MULTIPLE attribute allows
the user to select multiple options, which are submitted as separate name/value pairs.
•The DISABLED attribute makes the SELECT element unavailable. The user is unable
to edit the disabled selection, no value is submitted with the form, the SELECT
element cannot receive focus, and the element is skipped when navigating the
document by tabbing.
•The SIZE attribute of SELECT hints that visual browsers should display the element
as a list box with the specified number of options visible at any time. A scroll bar would
allow access to any non-visible options.
•The value enclosed by the OPTION element is submitted to the server.
•The attribute SELECTED in the OPTION element sets the form control to select this
item by default.
• With the scroll list, it is possible to select multiple items out of a large group of items.
But all items are not presented to the user at once.
40
Check Box
<INPUT TYPE="checkbox" NAME=”contact" VALUE=“email” CHECKED>Notify by

email<P>
Can have multiple checkbox where checked is true
VALUE indicates the value to be transmitted to the server.
– e.g: contact=email will be sent to the server.
CHECKED sets the text box to be selected by default.
Here “Notify by email” is visible to the user and the value “email” is not visible
to the user.
•If there are a few options to choose from that are not mutually exclusive, it is probably better
to use a group of check boxes that the user can check off.
• For example, to display a check box whether the user wants the facility of Internet banking
use
<INPUT TYPE="checkbox" NAME=”InternetBanking“ > Internet Banking
In this example, if the checkbox is selected, value InternetBanking =no will be transmitted to
the server.
• Setting a value for the checkbox might make more sense.
<INPUT TYPE="checkbox" NAME=”Facilities“ VALUE= “InternetBanking”>

If the above check box is selected Facilites = InternetBanking will sent to the server
• It is also possible to have multiple check boxes with the same name.
The code
<INPUT TYPE="checkbox" NAME=”Facilities“ VALUE= “InternetBanking”>
•<INPUT TYPE="checkbox" NAME=”Facilities“ VALUE= “DebitCard”>
•Would send multiple entries like the following to the server when both the facilities were
selected
•Facilities= InternetBanking&Facilities=DEbitCard
41
Radio Buttons
<INPUT TYPE="radio" NAME="output" VALUE="screen“ checked> Screen
<INPUT TYPE="radio" NAME="output" VALUE="printer">Printer
Radio buttons with the same NAME are grouped together.
Only one button can be selected in a group.
VALUE data to be sent to the server.
CHECKED will preselect the button.
The second mechanism for selection is a set of radio buttons. In a set of radio
buttons only one can be selected at a time - to do this all the buttons should be given
the same value for the NAME attribute. Which is known as a radio group.
e.g.
<INPUT TYPE=RADIO NAME=rdbAgeGroup VALUE=1>
<INPUT TYPE=RADIO NAME=rdbAgeGroup VALUE=2>.
You can select only one of the two radio buttons. Since they form a group.
• It is important to set the VALUE attribute for each radio button.

• Value will not be displayed to the user.
•If you are used “Checked” attribute the button will be selected by default.
42
Hidden text field
<INPUT TYPE=“hidden” NAME=“useinformation” VALUE =“form1”>
Can be used to transmit default or previously specified data.
Can be used to pass data from one form to another.
Cannot be modified by the user
So it must have a VALUE attribute set
VALUE data to be sent to the server.
Hidden Text field

<INPUT TYPE=“hidden” NAME=“userinformation” VALUE =“form1”>
•creates a hidden text field.
•With a hidden text it is possible to transmit default or previously specified text that is
hidden from the user.
•Since the hidden field cannot be modified by the user, its VALUE attribute must be
set.
•This hidden text can be utilized for handling programs.
43
Buttons
The Submit button
– Sends the form contents to the server when clicked
– <INPUT TYPE=submit NAME=cmdsubmit VALUE =“Submit”>
The Reset button
– Resets all the form c ontrols to the default state.
– <INPUT TYPE=Reset NAME=cmdReset VALUE="Reset">.
A button
– No predetermined action like submit or reset.
– Script should be written to make it work. (this will be covered in later chapters)
– <INPUT TYPE=Button NAME=cmdAdd VALUE=“Click Me">.

Types buttons
• The Submit button sends the form contents to the server when clicked.
<INPUT TYPE=Submit NAME=cmdSubmit VALUE="Submit">
• The Reset button : Contrary to popular expectations, it does not clear the form
but resets it to its original state. For e.g. if a textbox started off with a default value
of "Me" and it was subsequently changed to "You" by the user, clicking on the
Reset button will change it back to "Me".
<INPUT TYPE=Reset NAME=cmdReset VALUE="Reset">.
• A button <INPUT TYPE=Button NAME=cmdSubmit VALUE="Submit"> doesn't do

anything when clicked - you have to write some script (coming up in the next unit)
to make it work. Then why use it at all? There may be times when some action
other than submitting a form needs to be done on a button.
You will learn more about client-side validations in later part of this course.
44
File and Image
The File Control
– Available from HTML 4.0.
– This form control is used to upload a file to the server.
– <INPUT TYPE=“file” NAME=“load”>
– It is possible to set maxlength and size values to file control.
– Not suggested because the path name might be larger than the size specified.
– The file form control is not supported by all browsers.
The Image Control.
– The image control creates a graphical version of submit button.
– <INPUT TYPE=“IMAGE” SRC=“sub.gif” alt=“submit to server”
NAME=“flname”>
The file control generally consists of a text entry box and a button immediately to the
right of the field.
By clicking the “Browse” button enables the user to browse the local system to find a
file to specify for upload.
To upload a file to the server set the <form> element attribute enctype value as
“multipart/form-data”.
The image control creates a graphical version of submit button, which not only submits
the form but transmits coordinate information about where the user clicked in the
image.
The image is specified by the src attribute.
45
Form example
• To display the form elements in a visually appealing way, put them into table cells
as shown in the above form.
<html><body>
<form action="" method=post name=form1>
<table border=3 cellpadding=1 cellspacing=1 width="75%">
<tr> <td>enter your name</td>
<td><input name="first_name" value="smith" size="10" maxlength="15" ></td>
</tr> <tr> <td>enter your password</td>
<td><input name=password1 type=password></td>
</tr> <tr> <td>enter your hobbies</td><td><select name="hobbies" multiple size="2">
<option value="tr">travel
<option selected>reading
<option>sleeping </select> </td>
</tr> <tr> <td>notify by email</td>
<td><input type="checkbox" name="email" checked></td>
</tr> <tr> <td>output device </td>
<td><input type="radio" name="output" value="screen"> screen
<input type="radio" name="output" value="printer">printer </td>
</tr> <tr> <td><input type="submit" value="submit query" name=submit1></td>
<td><input type="reset" value="clear" name=reset1></td>
</tr> <tr> <td>text area</td>
<td><textarea name="feedback" rows =3 cols= 40> default text goes here
</textarea></td>
</tr>
</table></form></body></html>
46
Frames
Divides a browser window into number of panes.
Each frame may contain a different document.
<FRAMESET> element defines a set of frames.

– Should preclude the <BODY> element.
– <FRAMESET> </FRAMESET>
• ROWS
• COLS
<FRAME > element defines an individual frame

– NAME = “frame name”
– SRC=“url”
– SCROLLING = auto / yes / no
– NORESIZE
Frames
With frames, the browser window can be split into separate sections, showing
different but related information.
You can display more than one HTML document in the same browser window.
Each HTML document is called a frame, and each frame is independent of the
others.
Each frame has its own URL, thus one frame can stay visible while another
changes.
The Frameset and Frame Tag:

The <frameset> tag defines how to divide the window into frames.
Each Frameset can have number of frames defined by the frame tag.
The <frame> tag defines what HTML document to put into each frame.
The <frameset> requires a mandatory attribute of either COLS or ROWS that
decides the number and size of columns or rows in a browser window.
The disadvantages of using frames are:

• The web developer must keep track of more HTML documents
• It is difficult to print the entire page
47
Adding Frames
<HTML>

<FRAMESET COLS=“30%,*">

<FRAME SRC=“Frame1.htm">
<FRAME SRC=“Frame2.htm">
</FRAMESET>
<HTML>

Attributes of the FRAMESET/FRAME tag are as given below.

Frameset.
COLS : Defines the number of frame columns and
their widths.
R OW S : Defines the number of frame rows and
their heights.
FRAMEBORDER : Defines borders around each frame, A
value of “0” leaves no visible borders and a
value of “1” display the border.
FRAMESPACING : Defines the space in pixels between
frames.
SCROLLING : Determines weather or not scroll bars are
displayed on all the frames, value are YES,
NO and AUTO.
Frame.
N AME : Name of the frame.
NORESIZE : Prevents the user from resizing the
frame.
SCROLLING : Control the display of scrollbars.
The value are AUTO (or) NO.
SRC : Specifies the full or partial URL of
the document displayed in a frame.
48
Nesting Frames
<HTML>
<FRAMESET COLS="40%,*">
<FRAMESET ROWS="35%,*">
<FRAME SRC="Cell1.htm">
</FRAMESET>
</FRAMESET>
</HTML>
In the example above we have two framesets.

The first frameset have two columns one of 40% width and the other of the
remaining width i.e 60% note that it is indicated by a *.
The second frameset set divides the first column into two rows. First row of width 35%
and the second row remaining width i.e 65% note that it is indicated by a *.
The HTML document “cell1.htm" is put into the first row and first column The HTML
document “cell2.htm" is put into the second row and first column.
The HTML document “cell3.htm" is put into the second column.
49
Frame targeting
Ensure frame naming
<FRAMESET COLS="*, 20%">
<FRAME NAME="Frame1” SRC="Cell_1.htm">
<FRAME NAME="Frame2” SRC="Cell_2.htm">
</FRAMESET>
Set the TARGET attribute for one hyperlink. Here the target value is case sensitive.
<A HREF="file.htm" TARGET="Frame1">Link Text</A>
<A HREF="file.htm" TARGET="_top">Link Text</A>
By specifying a BASE target, you can automatically set a default target for all links in a
Frame.
If the TARGET attribute is specified in the <A> tag then that target will be used.
– <BASE TARGET="Frame2">
Having made the frame structure, one would also be interested in doing things like
clicking on something in one frame and having some action in some other frame. So
here's how to do it. This involves two steps .
1. Ensure frame naming by setting the NAME attribute of the <FRAME> tag
e.g: <FRAME SRC="HDJ_Page1.htm" NAME="frame1">.
2. Use the TARGET attribute in the <A> tag to specify the target frame where the page
is to be displayed.
Target can be a name of the frame that you specified in the FRAME tag or one of the
following predefined values.
_blank : Loads the link into a new blank window
_parent : Loads the link into the immediate parent of the document the link is in.
_self : Loads the link into the same window. (default)
_top : Loads the link into the full body of the window.
Value Description
_blank Loads the page into a new window
_self Loads the page over the current frame
_parent Loads the link over the parent frame
_top Loads the link over all the frames in the window.
50
Floating Frames (Inline Frames)
Floating Frames
Floating frames are scrollable areas that appear in a HTML document. Unlike regular
frames they cannot be resized.
Not attached to the sides of the browser.

– Acts similar to an embedded object.
– Occurs within the <BODY> .
– <IFRAME> </IFRAME> tag.

<IFRAME SRC="bot.html" WIDTH=“450” HEIGHT=“400”></IFRAME>
Floating Frames
Up to this point all frames shown have been attached to the sides of the browser. Another
form of frame, called a floating frame also called as inline frame. These are used to
create an inline framed region, or window, that acts as any other embedded object.
An inline frame can be defined by a <IFRAME> tag and may occur anywhere within
the <BODY> tag. Unlike the <FRAME> element which should occur only within the
<FRAMESET> element.
The major attributes that can be set here are
• SRC is set to the URL of the file to load,
• HEIGHT and WIDTH are set in pixel or percentage value of the screen that the
floating –frame region should consume.
<html>
<head>
<title>floating frame example</title>
</head>
<body>
<h1 align="center"> floating frame </h1>
<iframe name="floatframe1 src="images.htm" height=100 width=100 align="left">
there will be a floating frame if your browser supports it
</iframe>
<p> this is a simple example of how floating frames are used.
</body>
</html>
51
<NOFRAMES> tags
<NOFRAMES> </NOFRAMES> tag

– Encloses text to be displayed when the browser does not support frames.
– There are some of the browser versions that do not support frames at all! They
will either get an error message or a blank screen.
<NOFRAMES>
<BODY>
<H1>Your Browser do not support Frames</H1>
</BODY>
<NOFRAMES>
– Some of the browsers do not support <IFRAME>
<IFRAME SRC="bot.html" WIDTH=“450” HEIGHT=“400”>

<H1> Your Browser do not support Inline Frame
</IFRAME>
For the browsers who don’t support frames

There are some of the browser brethren that do not support frames at all. They will
either get an error message or a blank screen. So how do we deal with them?
Simple!
After the first <FRAMESET> tag, put a message for such browsers between
<NOFRAMES> and </NOFRAMES> tags. You could also include a link to a non-
frames version of the page.
Usage:
<html>
<frameset cols="*, 2*">
<frame src=“frame1.htm">
<frame src=“frame2.htm">
<noframes> <p>this document uses frames. please follow this link for the <a
href=“noframes.htm”></a> version
<noframes>
</frameset>
<html>
52

HTML, Javascript and Css

Uploaded by

Copyright:

Available Formats

HTML, Javascript and Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML, Javascript and Css

Uploaded by

Copyright:

Available Formats

HTML, CSS, JavaScript

Unit 1 - HTML – Hyper Text Markup Language

To introduce the participants to

– Different HTML tags

– Cascading Style Sheets

– Client side Scripting with JavaScript

– Document Object Model

Frames, Images and Forms

Document Object Model

Ivan Byross, “ Web enabled Commercial Application development

HTML,DHTML,JavaScript, Perl ,CGI “, BPB publications

David Flanagan, JavaScript The Definite Guide , Shroff Publishers.

Thomas Powell ,The Complete Reference – HTML, TATA McGRAW-HILL

Where does it fit in?

HTML tags and attributes

Text formatting tags

Working with lists and tables.

WWW is also knows as the web is a client-server network.

Communication on the web happens through HTTP.

Web information is stored in Web pages

Web Pages are stored on Web servers

Web clients view the pages in a Web browser.

Popular browsers are Internet Explorer and Netscape Navigator

Overview of www and HTML

HTML stands for Hyper Text Markup Language .

It is used to design and develop Web Pages.

Tim Berners-Lee invented the World Wide Web and HTML

– Not Case Sensitive

– Different from other Programming Languages

HTML is derived from Standard Generalized Markup Language (SGML). SGML is a

HTML using ASCII (plain text) format , hence platform independent

HTML is interpreted by the browser, not like other programming languages.

HTML form elements are used to create a GUI. 7

Container tags :Tags that have starting as well as ending part.

Empty tags : Tags that do not have the closing part.

(HTML instructions + text to which the instructions apply)= HTML elements

e.g.: <H1 ALIGN = “CENTER”> This is a heading </H1>

– <BASE> specifies the absolute URL address

– <SCRIPT> specifies the client side script name.

– <STYLE> To Include CSS (Cascading Style Sheet)

4. To specify keywords for certain search services to use.

5. To specify a description of your page for certain search services to use

Enclosed in <BODY> </BODY> tag.

Some important attributes of the BODY tag

– BACKGROUND = “url of the image”

– TEXT = “color” / “#rrggbb”

– LINK = “color” / “#rrggbb”

– ALINK = “color” / “#rrggbb”

– VLINK = “color” / “#rrggbb”

<BODY > tag attributes

RGB Color Components.

– Allows you to specify the font face and font size.

– Some common attributes are

SIZE can be set as a relative value using + or – .

– E.g.: <FONT FACE=“Helvetica, Arial” SIZE=“7” COLOR=“#FF0000”>

The Written Word</FONT>

– Displayed in larger and bolder fonts.

– Different level heading tags

• <H1> Heading 1 </H1>