Module 4

Module4
HTML AND WEB PAGE

HTML
HTML stands for Hyper Text Markup Language. It is the most
commonly used language for creating web pages. It was developed by
British scientist Tim Berners Lee.
HTML is not a programming language, but it is a markup language
containing a set of markup tags. Markup tags are usually called HTML
tags.
All HTML documents should be typed in any text editor like notepad
or word pad. Then it has to be saved with .html extension. A web browser
is required to display the web page that has been created. The purpose
of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML
tags, but uses these tags to interpret the content of the page. HTML
elements form the building blocks of all websites. HTML allows images
and objects to be embedded and can be used to create interactive forms.
HTML Essentials
To write HTML documents and to prepare web pages, the following
are essential.
Windows based computer system with a text editor like notepad or

word pad.
2 Internet Explorer 5.0 or any higher version.
Basic Concepts of HTML
Four key concepts of HTML are described below.
1) Elements
An element is a container in which a portion of a page is placed.
HTML is written in the form of HTML elements consisting of tags enclosed
inangle brackets (< >). HTML tags most
sh1> and
</hl>, But some tags are unpairedcommonly come inin puirs like I09
empty elements. Ex. <img>. The first
and they
are
sntain any type of
intormation, and
tag can include text, color,
tag and the second tag is the end
a
pair is known asown as graphics,
imation and sound.
tag. They are also
tags and closing tags. In between these known as atart
as opening
When
sOmeone gives
sor
you their web
address, it generally takes
comments and other tags, you can Wcbsite's home page, which you
types of contents. add tevt, to should
introduce
you to what that
2) Tags tags, ars in terms of intormation or other
services. From the home
y o u Can
out click on links to reach other
Tags sections of the site. A website
arecommands written in text pu
can consist of one page, or many pages,
Sist of
in the web
pages.
document. They are not depending on what the owner
the web
Tags specify how the web displaved is trying to accomplish.
browser. In other words, page should be
the web browser how tags are simple displayed in There are different types of websites. Based on the function, they
begins with a less than should look when itinstructions
the page
is
that tell can be categoriZed into personal web sites, commercial web sites,
greater than sign (). sign («), then the displayed.

element nanme, A tag aOVernment web sites, non-profit organization websites and educational
tag. A closing tag Example: <Body>, Such a tag is called followed by websites.
includes a back slash' an
Example: </Body>, There are two before the elementopening All publicly accessible websites collectively constitute the World
empty tags. Container types of tags container name. Wide Web. Why do people visit websites? Basically people visit websites
tags are those
part is used as tags which are used in tags and for two reasons.
Ex. <font> and starting tag and the other pairs. One
It has no </font> tag is a container part is used as closing tag. 1. To Flnd Information
end tag. Ex. <br> tag. Empty tag is a This could be anything from a student looking for pictures of frog
3) Attributes and tag. single tag. to getting the
Values for a school project to finding the latest stock prices,
An attribute admission data of a management institute.
defines the
inside the characteristics of an element.
opening tag. For example, 2. To Complete a Task
font element It is
is to be to
used with size' specify the size of the placed Visitors may want to buy the latest harry potter
book online,
<Font size "14"> attribute. font, the an online discussion
about a
=
download a software or participate in
Here 'size' is the favorite hobby.
value. In the attribute. The attribute between a website and a web
above exarnple, 14 is the should be
followed by its It is worth mentioning the difference
4) Nesting value that are under one domain
assigned to the attribute. page. A website is a collection of web pages
location that contains more than
other words, a website is a central
Nesting refers to the
n
there is no
overlapping of
arrangement
of
elements in such a one web page.
elements. When
are
contained inside one another. properly nested, the way that Web Page
Text Markup
Ex. <a>
elements document commonly
written in Hyper
<b> <c> A web page is a other network
</c> </b> </a> through the internet or
Website guage (HTML) that is accessible accessed by entering a URL

is
Sing an internet browser. A web page to other web
A website is graphics, and hyperlinks
a
collection of web
pages
dr and may contain text,
through the
internet) containing (doCuments that are pages and files.
audio, etc. A content such as
text,
accessed that is created in html
that
web page is what you images, video, as a document
a web see on the screen when A web page is defined in o r go to the web page's
address, click on a link, or you type in internet when you
type
put a
query in a search Snows up on the surf the internet. Every
engine, A web tcdress. It is any page that you
see when you
112 113
with .html
extension.
For
ing, click File
saving, cl.
Description
Now save the file
Give a
name to the file d V a l u e
3)
Save As.
Save As dialog
box appears.
atml c o l o r _ n a m e
Specifies the
background color with
Save'
button.
color name (like "red") aa
and click o n
extension
with the ".htm1".
".html"
file ends with
extensi
It is very
important
that our
type or 1ile our document is. In th n

the "Save
e x _ n u m b e r
Specifies the
background color with
what hex code (like a
This tells our computer
"All files". This
will e n s u r e v o t r "*ffo000"
a s type" box,
select the option
format. Now,
cick on 'Save' button.
cument rgb_number
Specifies the background color with
the correct an rgb code
is saved in (like
Flename: test.htm
"rgb(255,0,0)
Saveas type: All Fles (
Example:1
display the web page, perform the following stens <html>
In order to <body bgcolor="#ffo000">

Internet Explorer
1) Open <h1>Hello worldl«/hl>
File >Open. Open' dialog box appears.
2) Click on
.html extension and click the Open' button </body>

3) Locate the file with
web page on the screen. </html>
The file will open as a
Example:2
Microsoft Internet Explorer
3 Our University <html>
File Edit View Favorites Tools Help
<body bgcolor="rgb(255,150,200">
E sechFavori <h1>Hello worldl</h1>
AddressC:{Documentsand Settings1Dr. Antony Thomas1My Docunments </body>

MG is our Unaversity </html>
Inserting Images as Background
Changing Background Color Instead of having a plain background, you can add pictures to your
The background color of the webpage is white, by default, attribute.
if no color background, using the background'
is specified. It can be changed using the bgcolor' attribute.
<html>
Remember that the image should be saved in the same
then
folder where
your HTML file is saved. If the image file is in yet another folder,
the image file as value for
<body bgcolor =
"red"> K.E. College </body> you have to specify the complete path of
</html» background' attribute.
that both the files are in the
Now the example given below, assume
background changes from white to red. Try different
the
Green, Blue, etc. options same folder.
For inserting background color, <html>

you can use color name, hex
or rgb number.
numb Body background "college-jpE
K.E. College, Mannanam </Body»
</html>
114 115
for different alignments are
Tags
given below.
Paragraph Break
indicates
the
paragraph
separation. Each
separatic..
Left
<left>
The
container tag <p>
document
is
enclosed
within an
openin8
openine
<p> and
the pare. Right
<right>
in the
agraph
determines
paragraph <align>
attribute
<center>
closing </p>
tags.
The
values Left", 'Right' orr Center'. By
"Cent
defaul
C e n t e r
take
alignment.
It c a n Justify
justify>
left aligned.
paragraphs
are
In ord
ar to centralize heading, by
text, for
example, a
Drawing Horizontal Lines you can use the
horizontal lines. It is an em. ecenter> tag. Text, table, image etc. can be centralized placing within
is used
to draw
and color. Size
g. <center>
and </center> tags.
The < h r tag are size, width, the
<hr> tag
a t t r i b u t e s of a t t r i b u t e determines e
The main in pixels.
Width <body>
thickness
o r i n percentage of tos. <center> K.E. College, Mannanam </centers
line
specifies the can be e i t h e r in pixels
The value specifies the line coln:
line length. attribute lor. </body>
document. The color
width of the
2. Heading Tags
<Body> K.E. College
"20" color
= "Green"> Headings can be given in six levels from <hl> to <h6>. The heading
= "75%" size =
<hr width sfye reduces from <h1> to <h6:> sequentially. <hl> produces the largest
</Body heading and
<h6> produces the smallest heading. Align is the only
Microsoft inte
2 Our U n i v e r s i t y with these tags. The values of align attribute are Left,
File Edi Viev
Favoritss Tools attribute used
of all six levels used in example given
Right and Center. Headings
are
below.
E ] C:{Docurnernts arid Sstting,L
fadre
<BODY>
KE College <H1> K.E.COLLEGE </H1>
<H2> K.E.cOLLEGE </H2»
Text Formatting
-
Working with Text

to format text. A
<H3> K.E.cOLLEGE </H3»
In all the web pages
that you create, you have
<H4> K.E.cOLLEGE </H4>
available.
number of text formatting tags are
<H5> K.E.cOLLEGE </H5>
1. Alignment <H6> K.E.cOLLEGE </H6>
content
horizontal alignment of the
The align attribute specifies the </BODY
Centered,
in a page. Text can be aligned in ways Left aligned, four Our
University
Microsoft leternet xplorer
Right aligned and Justified Dc Thaesy

SettinoDr. Artoy
end
It means )C \Documants
Left aligned Left alignment is the most c o m m o n alignment.

res
K . E . C O L L L E G E
that text lines up with the left margin and has an uneven right edge K . E . C o L L E G E
Centered text
Centered Centering is generally used for headings. KE.CoLLEGE
is equally positioned between the left and right margins. KR.COLLEGE
rgin
KICOLLEGE
Right aligned - it means that text lines up with the right mas * I c o E L E G R
and has an uneven left edge.

Justified - Here the text lines up evenly with the left and right
iE
margins.
Tags
1bscript cha. aracters respectiveiy. The
and
Underline
airs are content closed
3. Bold,
Italics
bold face. Simil.
in bold displayed in in
superscript subscriptbetween the
The <b> tag display
the
italics and
content
enclosed
<u>
Similarly si
underlines the
or
form.
enclosed in Body
display the text
they need starting en
ed start and of birth is 21 <Sup> st
pate1 formula of water is </HSup>
and
are
container type tags July 2012
enclosed. These <br>
between them.
the text given in
Chemical
<sub> 2
ending pairs
to format
</Body>
</sub> O
<body>
Mannanam </b> <br> Our
<b> K.E. College,
Mannanam </j> <br> Edt
University Microsoft
Interne
<i K.E. College, File View
Favortes Tools Het
<u>K.E. College, Mannanam </u>
Ea
/body>
address ]C:}Documents and SettingsiDr. a
E Our University Microsoft Internet Explorer Dateof birth is 21 July 2012st
Fle Edt ew Favortes Toos Help Chemical formula of water is H,O
Animated Effects
Adessc:iDocuments andSettingsDr. Antony Thomas At its most basic level, an animation is nothing more than a
KE. College, Mannanam visualization of change a change that occurs over a period of time.
K.E. Colege, Mannanam Simple Text Animation
REColege, Mannanam In this lesson you will learn how you can add a simple text animation
to your html web pages.
4. Strike Through Marquee

To make the text appear strike
The marquee tag adds a kind of text or image animation to a web
through, we need to enclose it within
will
<strike> and </strike> tags. page. It is used to scroll text or image across a web page. Here we
be showing you how to scroll text using the Marquee tag.

strike>Price Rs. 999</strike>
5. Font Tags Start Tag: <marquee>
The font tag defines the font End Tag: </marquee>

characteristics of the text enclosead.
Its attributes are face, size and color.
Face
Simple Text Scrol1ling
Arial, Times New Roman, specifies the font face 1Ke
Courier,
etc. Size indicates the font size and marquee> MG University </ marquee
color specifies the font color. left to
result in the scrolling of the title MG University' from
Body will
<Font Face
right.
="Arial" Size =
3" color =
"Green"> K.E. College CToling Text in Both Directions (alternatively

/Body> </Fon
<ma behavior="alternate">MG University</marquee»
6.
Superscript and
Subscript both
University' in
<Sup> and <Sub> It wl the title "MG
result in scrolling of
tags are used for
framing superscript and
a directions, alternatively.
118
19
Text
of the Scrolling :olor "pink" directio
Changing
the Background
Color
<marqu ion="up" width="250"> <img
University</marquce>
<marquee bgcolor "pink">MG
attribute
determines the backgroum
/ m a r g u c e >
Using Whlte Space

src="logo.jpg'>
the bgcolor COlo
The value of "MG University' will scrolli
text. Here,
the title
pink In HTM. raultiple spaces normally
thescrolling created
by the
return key are
all
ignored when you write spacebar, the tab
sDaces.
key an
strip. code.
Loop A t t r i b u t e
HTML ignor Whether you type 1
In other words,
web browser space or 100
loop attribute can be used to specify
the number of tim
the
HTML,
the
tomatically collapses those
space in your
The
The value of the loop anattribute can be This is called
one. White Space Collapsing.
spaces down to
just
Forscroll.
text should
number. example if you want your text to scroll twice th 0le
you
a n t white space (extra blank
space) between pieces
must use 2' as its value. This
will tell the browser to scroll tho
text 2 word
characters, you have to code them
r
in HTML.
of text,
LOOP-"1" will scroll the text only once. re two methods to add white space Basically there
times.
line break (<br> Tag).
using the
non-breaking space
<marquee loop-"2" bgcolor=pink"> MG University/marquees and using
1. Writing a Non-breaking Space in HTML
Width
The width' attribute gives you control on the width of the marque A non-breaking space is a white space character that HTML will
The number of pixels, or a percentage of the screen can be used as t collapse. Non-breaking spaces are used to add
its spacing between
value. words. It is also common to use non-breaking spaces to indent the
first
line of a paragraph. For non-breaking
<marquee width-"250" bgcolor="pink"> MG University </marquee space, use the HTML
code or the numerical code
Direction
For example, if you wanted a
particular part of your text to read
This attribute defines the direction of the marquee. It can take the with three spaces after a period as in "Hello. How are you?" you -
valuesieft,Right, Up or Down. have to code as follows:

<marquee bgcolor-"pink" direction="up"> MG University </marquee»| "Hello. How are you?
Image Marquee Here is an example of how to add 5 spaces inside a line of text:
Image marquee works in the same way as the text marquee does. Body> Capital of India: &nbsp, New Delhi
The same marquee tag is used to scroll the image. However we replace /Body>
the text with the img' Let's see
tag. how it works.
marquee><img src="logo.jpg"></marquee>
It will result in
e cnuUsersiQaCIDoc
scrolling of the
image. EFavorites Sugsested Sites
Bcrolling Image in Both Directions (alternatively)
Our University
marquee behavior-"alternate"><img src="logo.jpg"></marque
New Delhi
Now the Capital of India
image will scroll in both
directions.
Direction
This attribute
defines the direction
values Left,
Right, Up or Down. of the marquee. It can take Non is also used
to indent the
first line of a
eaking spaces
paragraph.
120
121

n b s p ; To gUa. rranged as able. The <TABLE>
<Body> better periormance in teachihte
cified by <TR> tag forms the
and to achieve
involye
8 and are
tag. The container for table
higher quality
involvement and TD> encloses the normal <TH> tag specifies the
ws a
to encourage the
R o w s
cells and <TD»

it is necessary
learning process,
involved with t h e process like te.
e teachers, data cells. heading
commitment of all those TABLE> TAG
</Body>
management.
students and the <TABLE> is th
the
The container tag, which
Sug9gested Sites e Web Slice Gallery tags to table content are
form the encloses the whole table.
Favorites
<TABLE> tag hasgiven
Other
in between
Page /TABLE> pairs. The <TA <TABLE> and
Our University the genera layout of the
a
number of attributes
determine
table. Border that
To guarantee higher qualty and to achieve better performance of the
border lines around the table cells. The
lines specifies the thickness
border value zero
î is Decessary to encourage the table with
no border lines. Border color produces
specifies the color for border
i teaching and karning process, lines.
invobvement and comminent of l those ivolved with the process like Align specifies the tabie
alignment in the window.
The values that
teacbers, sudents and the management. can be assigned are lelt, right or center. Bgcolor
specifies background a
r table. Cell spacing specifies the
for the
space to be left between
2. Line Break using <br> Tag table cells. Cell padding specifies the space between cell
border and
ontent. Both cell padding and cell spacing are in specified
The <br» tag creates a break between one line and another. It is pixels.
the line break tag. lf you need more than one space between the two <TR> TAG
lines, use as many <br> <br> as you desire. It is an empty tag and Table rows are defined by <TR> tag. Each row cells are enclosed by
hence no ending tag is required. Whenever you use the <br> tag, the container tag pairs <TR> and </TR>. The <TR> tag is given within
anything following it starts on the next line. the <TABLE> tag pairs. Attributes of <TR> tag determine the
Body> Department of Commerce characteristics of the row enclosed. The align attribute determines
<br> K.E. College the horizontal alignment of the text in the row. The attribute values
<br> Mannanam that can be given are left, right, center or justify. Similarly, the Valign
<br> Kottayam District attribute specifies the vertical alignment of the cell content in the row.
<br> Kerala </Body> Possible values are top, middle, bottom and baseline. The Bgcolor attribute
can be used to set a background color for the row.
2Our University Microsoft internet
Ex <TH> TAG & <TD> TAG
Fle Ed View Favorikes Tools Help
Back <TH> tag defines the heading cells in the table. The content of
<TH> and </
Address neading cells in between container tag pairs
are given
C:Documents and Settings\Dr. Anton in boldface and centered. <TH>
. The heading cells are displayed
Department of Comrmerce 1s given within the <TR> tag pairs to form
the heading row.
K.E. College S
Mannanam The normal data
D1s the container tag enclose table data.
to
Kottayam District pairs.
Kerala elus of the table is given in between <TD> and </1D>
Tables in HTML for <TH> and <TD>, Align specifies
common
In a S t ofthe attributes are cell defined by the tag

document, tables content for the
noriz0ntal alignment of the
presentation of information. provide a
convenient method specifies vertical
dered
for justify. Valign
Tables arrange the ora of Values are left, right, center and bottom and
TOws and
content in are top, middle,
columns. In a the ro1" be and values
web page text, image, m e n t for the cell content
color for the
cell.
hyperlink, etc.
baseline. Bgcolor specifies background
below. Date of Birth </th>
given eth>
simple table
are
Codes for a th> Address </th»
<html> </tr>
<head> <tr>
<title> First Table

</title» <td> Bobby </td>
</head> <td> 22-10-1992 </td>
<body> <td> Flat No. 05, Vytilla,
<table> Cochin </td»
tr> </tr>
<th> Name </th> <str>
<th> Roll No </th> <td> Allen </td>
</tr> ctd> 31-10-1992 </td>
<tr> ctd> Flat No.10, Kalloor, Cochin </tdis
std> Terese </td>
<td> 1001 </td> </tr>
</ table>
</tr>
tr> </body>
<td> Thomas </td> </html>
<td> 1002 </td>
</tr>
</table>
2 Second table - Microseft Internet Expiorer
Fle Ed ew Favortes Tools Hep
</body>
/html Beck Favar
F i r s t Table Microsoft Address]c:Doruments and Settngspr. Antor Thomas Doune
Fle Edt Favorites
Name Date ef Hirt Address

Addres c:Documents and s Bobby 22-10-1992 Flat No. 05, yola, Cochin
Name R o l No Allen 31-10-1992 Fat No. 10, Kaloor, Cochm
Terese 1001
Thomas 1002
Cell Spacing and Cell Padding
Codes for a second table with
background color and table boarder
spacing specifies the space be left between table cells. Cell
to
attributes are given below. El and content. Both cel
padding specifies the space between cell border
<html>
Spacing and cell padding are specified in pixels.
<head
<title> Second table <html>
</title> head>
/head
<body bgcolor = "blue"> stitle> Table </title>
<table border =
*
1" align s/head»
=
"left">
str bgcolor =
"pink"> <body> * "left" bgcolor
=
"pink' cellpadding
=
"3
Dle border 1" alien
=
<th> Name </th> =
cellspacing = "6">
125
124
<table border-"1">
<tr>
Name </th>
"20%">
<th width = of Birth
</th>
<tr>
th>Column 1</th»
"20%"> Date
<th width Address </th> cth>Column 2</th>
= "60%">
<th width
eth>Column 3</th>
</tr>
<tr>
</tr>
an="2">Gender</td><td>Male</td><td>30</td></tr>
<td> Linu </td>
t d 22-10-1999 </td>
<tr><td
Cochin </td> ><td>Female</td>

d><td>35</td>«/tr>
<td> Flat No. 05, Vytilla,
<tr><td Ispan="3">Remarks
rks</td></tr
</tr>
<tr> </table»
td> Allen </td>
<td> 31-10-1972 </td> </body>
<td> Flat No.10. Kalloor,

Cochin </ td» </html>
</tr>
</table»
Favorites |
</body» Sggested Stes
/htmi HTML Table ColspanVR.
Column 1 jColumn 2 Co n3|

Adtess]cDocumentsand Settngsp.. Antoy ThomasMy Documents\3.htmm
Gender Male 30
Date of Birh Address Femal 35
Remarks
22-10-1999 Flat No. 05, Vytila, Cochin
31-10-1972 Flat No.10, Kalloor, Cochin Tables Backgrounds
You can set table background using one of the following two ways:
Merging Columns and Rows
(Colspan and Rowspan Attributes)
bgcolor attribute - You can set background color for whole table or
just for one cell.

You can use colspan attribute if you want to merge two or more
columns into background attribute You can set background image for whole
a single column. Similar way you will use rowspan if you
want to merge two or more rows.
table or just for one cell.
For You can also set border color using bordercolor attribute.
Example, in a table, <tr><td rowspan="2"> will merge 2 rOws
into one.
Similarly, <tr><td colspan="3"> will merge 3 columns into Or
example, you can set border color and background color as
one
follows:
<html>
<head table border="1" bordercolor="green" bgcolor="yellow"
stitle>HTML Table Colspan/Rowspan</title> TOu can set background image in the following manner
/head file
background="/images
<body ab border="1" bordercolor="green"
name>
127
126
</head
<body>
Bxample
<table order="1" width="1009
<html
<head>
s t i t l e > H T M L T a b l e B a c k g r o u n d < / t i t l e >
<caption>MA
HEET</caption»
<tr column 1</td><td>r
/head> bgcolor="yellow">
< t d > r o w w
1, columnn 2</td>
<body> b o r d e r c o l o r - " g r e e n "
</tr>
border="1"
stable
<tr>
<tr> column 1</td><td>row 2,

<th»Column 1</th> std>row columnn 2</td>
<th>Column 2</th> </tr>
<th>Column 3</th> </table»
1</td><td>Row Cell 2</td><td>Row </body>
</tr> rowspan="2">Row
1 Cell
str><td </html>
1 Cell 3</td></tr 2 Cell 3</td></tr>

2</td><td>Row
str><td>Row 2 Cell * ***
colspan="3">Row
3 Cell 1</td></tr> HTML Table Caption
str><td
</table»
</body MARKSHEET
/htmi> row 1.
colmn 1 Tow 1, colummn 2
row 2. co mn l row 2. colamon 2
Suggested Sites Wet
Favorites
HTML Table Background Nesting Tables
making one thing inside another and so on. If you

Nesting means
Colum 1 Column 2 Column 3 are creating a Web page in which you want to create many
different
a way that one table is inside another table,
Row 1 Cel 2 Row 1 Cel 3| types of tables, in such
Row 1 Cel11 c a n do nesting of tables.
Row 2Cel 2Row 2 Cell3| you
Row3 Cel1 Working with Links
Web pages. To go
HTML provides the facility to create links between
Table Caption link in which the
rom one Web page to another, click that particular
the table and
The caption tag will serve as a title or explanation for Teterence of the other Web page is stored.
it shows up at the top of the table. to another.
connect one Web page
n k s (or hyperlinks) are used to Web page
and redirected to the
Caption or title of the table is given in between <caption> er user clicks a link, the
u s e r is
HTML
caption> tags a for the link.
You can u s e
destination Web page between web
e d a s the of connection
Example: <caption> Marksheet </caption> e a t e links and thus provide a means
<html> pages.
<head>
stitle>HTML Table Caption«/title>
128 129
Save the document with the name that
Creating a Hyperlink
Web pages.
You can create a
hyperlink
4.
value in he
hyperlink document. In our has been given as href
example,
between
is a link
the <a> tag. give the ref he html document as Pagel.htm we have named
A hyperlink
tag (<a>).
Inside
attribute o f rence of th
using
the
Anchor
to open.
The hret
<a> he HTML
the HTML document named
by that you
want
he
The term "href stands tag 5.
Open
Hyperlink.html, in Internet
a Web page
takes the
reference of the Web
page.
pertext Explorer.
the hyperlink. IIn

Clic this
case, click on Go to
Reference. hyperlink: 6. Dept. of
steps to
create a The Page 1.html file opens in a new window. Commerce.
the following followi
Perform
d o c u m e n t in
notepad
and type the following code,
1. Create
a new,
College Microsoft Internet Explorer
create a hyperlink: View Favorites Too Hep
Edit
File
<html>
<head>
Eac Prch avortes
College </title> c:pocuments and settinosD. Artory ThomesMy
Documents\hyperink.htm!
<title> Our
/head K. E. College. Mannanan was estabished n the year 1964.

Department of ommerce started m 1930. Go to Dept of Commerce
<body» established in the year 1964. <br>
Mannanam was
K. E. College, 1980.
Commerce started in
Department of of Commerce
"Page1.html" > Go to Dept.
<a href Internet Explorer
</a> 2 Commerce Page - Microsoft
Fle Edit ew Favortes Toos Hep
</body
</html> Bac E search Fevortes
name and .html extension. Address cDocuments and SettingsDr. AntomyThomes Documents\pagei.htm
2. Save the document with an appropriate
In this case, we have named the HTML document as Hyperlink.html. omierce department was estabiisiied n che year 1980
Now that we have created hyperlink, let u s create a reference
a Pre deree stated n i980
o mStanted in 1982
page for the hyperlink, that is, the Web page to which this hyperlink Mcona Started 984
will take us when we click this hyperlink.
You can now
and type the following code in You can see how simple it is to create a hyperlink.
3. Create a new document in notepad Web page to another Web
CetE your own hyperlinks to move from one
the document, to create a reference page for the hyperlink: page.
<html Types of Hyperlinks
<head used to navigate
between pages
<title> Commerce Page are the primary method
perlinks sSites, grapnics,
pages, web
/title>
Web sites. Links can point to other web on the same wed
/head other locations
Sounds, e-mail addresses, and and
underlined
<body bgcolor = "blue"> usually
is
page. When hyperlink, it
Commerce text is used as nks.
hyperlink
department was established 1980 <br> four types of
in the year Ppears There a r e
Pre degree started in 1980 <br> as a different«color. visitors to
another
to take
B.Com Started in 1982 Text hyperlink - Uses word or phrase
<br> a
M.com started in 1984 page, file or document. another page.
/body image to
take visitors to
/html Image by
tile or document.
perllnk
-
Uses an
130 131
1. Unordered L i s t
o r a n image
take visitors
to take visitors to
Bookmark
hyperlink
-
Uses text
hyperlinks
are used to naviga. another Unordered
list arranges the items
Bookmark
1s long or
o r has
has etween
<ul> and
with
bullet
diffe </ul> tags. List marks. Unordered
web page. page
part of
a the lists are c r e a t e
when
are
useful
These item
list is
given along with items
Each
web page. are
sectionsS. an e-mail messaG by
<li> tag
the
6ems
items can be
list
changed specified
<li> tag. The
hyperlink
Allow's
VisitorS to send
to the
type
for
values 'square, 'circle or
using Type' attribute of <ul>bullet
E-mail It can take
'disc'. The
displayed e-mail address default type is disc.tag.
<BODY>
< u l Type "circle">
E-mail Links
added to web pages,
too. When people cli.
can be
<li> B.com
An email link On
software will start up. In the "T <li> B.A
link. their E-mail of
this e-mail appear. The
e-1mail address Wll code for <li> B.Sc
software. your an
the e-mail
this: /ul>
e-1nail link is
</BODY>
<A HREF
"Mailto:online@homeandlearn.co.uk">E-mail uss/A aVvOntes
=
ggetes as e
the HREF type. After the equals sien r u Our University
Notice that the link is
have this: Mailto:
B.coma
Mailto is all one word, and is followed by a colon. Then you put Our BA
e-mail address after the colon, without typing a space. You then type a .B.Sc
right angie bracket (>) before typing the text you want people to click
on to send you an e-mail. The Anchor closing tag </A> finishes it all 2. Ordered List
off.
In ordered list, the list items are numbered in
sequence. For
Linking to External Sites example, 1, 2, 3, . o r a, b, C... etc. are ordered lists. These lists are
In HTML we have two types of links - internal and external. Internal also known as numbered lists. Ordered lists are created between <ol>
links are links within the website, i.e., linking with different web pages and </ol> tags. The attributes used with <ol> tags are Type' and 'Start.
of the website. The type' attribute indicates the type of ordering in ordered list. Arabic
The external links are defined with the <a> called anchor tag. The number is the default type. The 'start' attribute specifes the starting
page is defined by assigning the relative or absolute path to the
number for the list items.
target
anchor tag's href attribute. For
that, the url of the required website
must be given as the value
of the href attribute. Ex. href "url" =
Value for Type Attribute Description
<Body Arabic Numerals 1,2, 3, 4, 5
<a href A, B, C, D, E
"http://www.google.com/">
=
Go to Capital Letters
/Body> Google </a
Small letters a,b,c.d.e
When you cick the
system is
hyperlink, the Google homepage appead, the
Large Roman Numerals
I,I,II.IV,V
connected to the net.
List Numerals 1,ii,ii,iv,v
Small Roman
List is a
group of related items.
There
here o ' ists
are
types of
different types
<LI>M.
lied
Sc A p p l i e d Statistics with Computer
Statistie
<BODY>
"2901">
< L I > M . C o m
Applications
=
<ol Type ="1" start </OL>

<li> Anandhan >Self financing Courses
<li> Annmaria
OL
<i> Boney LIB.Sc. Computer Applications
<li> Doney <LI>B. Sc. Electronic Equipment Maintenance
<li> Nimmy <LI>M.Sc. Biotechnology
/ol>
/OL>
</BODY>
Exporer
O u r University
Windows Internet /BODY>
C:Users\IQACIDoc >|x </HTML>
ESuggested Sites e Web Slic

Favortes CaUsenoACDocumertsheemm
Our Unversity
F o e s
Su9ested Setes ewet s n Geiere

ourses
Anandhan
2901 Annmaria Courses
2902.
2903 Boneyy Undergraduate
DoneY Engisha
2904. 2. BA. Psychooy
2905 Nimy
Post Grahate
BCom
3. Nesting List 12. MA Ecoaceaics

Msc Appied Stasisics wih
Copne Applicmioas
M.Com
You can nest a list inside another list. Each nested list will be Sebf fnancingcorses
Co Puts APPcboas
numbered separately. List of different courses in a college is shown as c. Electronic quipment Maiotene
M.Sc. BiotechnokoS
a nested list.
<HTML>
Images
<HEAD» An image plays a very important role on a Web page. Images make
your Web page more attractive and enhance the overalil look and of
TITLE> Courses «/TITLE>
the Web page. They help to break the monotony of text in a page besides
feel
</HEAD>
<BODY> <FONT Color =
"red"> <H1> Courses </FONT> </H1> nga Visual element that might attract the user to a particular part
<UL> of the page.
<LI>Undergraduate MLsupports many image formats.
The most commonly used
OL used for photographic quality images
<LI B.A. English mats GIF
areand JPEG. JPEG is
a a GIF
<Ll-B.A. Psychology is used for other types of images.
<LIB.Com n8erting an Image on a Web Page attention of
/OL> draw the
By nserting an ima on a Web page, we can
the image.
<Ll>Post Graduate the in place of
user more easily than by providing s o m e text using the
OL HTML provides images in Web pages by
a fac to insert
<LI>M.A Economics takes an image
img» attribute, which
the src
ile h e <img> tag u s e s
as a
value.
135
134 /Body>
to the
browser that ana.
"image." It
announces
ima
right whe.ge
default the image appea: aligned to the
IMG stands
for
Yes, the image
will pop up ight where you By center,
we coul
place <center> tag left. If we want to see it
around the
<img> tag, as ||
on the page. in the
will go here
under:
tag.
write in the image attribute, a
fmmand
com.
is an
"source." This
again <center>
for where to go to
SRC stands browser
command. lt is telling
the the < i m g s r c = " l o g o . j p g " >
inside a
image.
Relative Path < / i m g >
Absolute and
web pages, we can
hen adding links
and images to our
absolute path
ecify / c e n t e r >
Size of an Image
in one of the two ways namely; and Changing t h e
their location or path
relative path. If you
not
are n ot satisfied with the size ot the image you can change
appearance size wit the help of width and
Absolute Paths
its height attributes of the
refers to the location
of the file with reference to tha
img> tag.
Absolute path web address in
or full the
root directory,
in the case of a file system,
gimg src="10go JPg Width="100" height="50
domain name.
case of a </img>
For example: C: \myWeb \images |logo.jpg Thumbnails
http://www.domainname.com/images/logo.jpg
Thumbnails are intended to give your readers quick previews of
The first one is the example of an absolute path of the image file in images (small images) and each image is linked to the full version of
is the example of an absolute
the local file system and the second
one
the real image.
of image file on a web server.
path an The basic idea of the thumbnail is that you have to create a low
Relative Paths quality version of a picture with smaller dimensions and when the
refers to the location of the file with reference to the user clicks this thumbnail image, the original image with higher quality
Relative path
current directory. For example, if you are currently working in a directory
opens. By crating thumbnail images, you
can
and real dimensions
named My documents and want to refer to the image file named logo.jPg reduce the download time of a web page, so you can save visitors waiting
documents You can create a thumbnail image link with
the help of HTML
located in a directory named images stored inside My une.
directory, you can point to it using its relative path as under: link tag
full ot
can offer a page
images\logo.jpg basic idea of the thumbnail is that you
ne
full version of the image,
linked to the
In this case you need not have to specify full file system path. g e s , and each one is they think ney
images
In short, if your image is in the same folder where your HTML ne y o u r readers the option to preview any reducing tne
like to see in their full splendour, thus aow
is stored, then there is no need to specify the full path of the image ne a
in the sre attribute. However, if your image is in some other folder, time of a
page. thumbnails offering
two images
then you must
specify the full path of the image file in the src
att wo methods of creating
of the <img> tag. and
offering one image.
<Body> .Offering Two Images You offer
two
set up.
<img src =
"College photo.jpg images

are
to the
s/img This is *the Way
way most
thumbnail
thumbnail
that is
attached
ges, one smaller to act as

the
arger one.
l e r
136 Rollover Images
SRC="pbl.gif">«/A
<IMG ollover Image' is image that can

A
HREF="paperboy.gif">
link with an AGE COmmand

IMAGE Cor
effect, an image web object

change when mouse
A HREF as is over
object (called changes (swaps itself
Notice this is a simple links to the larger. its In rollover
er
them.
image just eb
web
mouse out. The rollovers) and reverts

smaller on
a n o t h e r
link words.
The
over
o
to
riginal image on mous
back
use
attributes ofthe the link tag are used onMouseOver and

to the
functional,onMouseOut
the whole picture. to make this
Click to get
Itlooks like this:; made up ot two
image are
mages. One
Rollover
over and another after appears without

method is that it requires two images t mouse ove mouse over at
The downfall of this load. same
The first is the thumbnail image and the second 1s the larger imaage. same width eight). It gives rollover or place (normally of
the thumbnail image above, you
saw the larger versid
If
ereating rollover, always two changing effect in image.
vou click on images are
required. This is
we use to make the rollover effect.
1. Offering One Image the code
Here what you do is offer the same image as both the thumbnail a hre TARGET URL GOES
HERE"><img src="URL OF FIRST
and the larger image. This is done though the same link format as AGE GOES HERE onmouseover="this.src=URL OF SECOND
above except that the thumbnail is created through the use of HEIGHT TMAGE GOES HERE" onmouseout="this.src="URL OF FIRST IMAGE
and WIDTH commands. GOES HERE" /></a>
It looks like this: Target URL is the address of the page you want to
open while clicking
A HREF paperboy gif> over the image. Then place the URL of the first
image and second
<IMG HEIGHT-50 WIDTH=50 image in the tag.
SRC-"paperboy.gif>«/A>
And here is what you get: Audio and Video
You can add multimedia files to enhance the

appearance of the
web page.
Audio Files
Audio files are in different formats like Wav, .MP3, etc. Before
Remember that when ding audio file, make sure that the file is saved in the same
an
you are
resizing an image using the HEIGHl in which the HTML file is saved. Otherwise
and WIDTH
commands, you are denoting oer
the complete path.
you have to specify
or
percentage. There are no hard and fast pixels per inch, not any kind
to rules to this - you may navc
simply play around with <Body>
numbers until you get the size
Notice how much you wanl. Dg Sound
faster the one-image
src =
"Track1.wav">
the image that
the viewer method loads. The reaso /Body>
browser's cache. (A will receive is
cache is a small already loaded into the Dome file types in audio and video.
browsers keep browsers not support certain
appears much
images and pages whilesection of the hard drive w vhere
Video Files
may
they
quicker because you are not display them) ne
1age
picture, you are
just offering the bringing up whoie new
be added to web pages.
just pops up same
a
USing dynsrc attribute, video files can
onto the picture at the normal size. It
screen. This is
the better
way of doing i
*
Body>
<img dynsrc = "kolaver
eri.mpg"> </img>
/Body>
139
138 scription of the
server. A brief
attributes of the
Forms
<input> tag is
gven
passing inforn
below.
that provide a way for or

Forms are HTML sections
The order torms, guest
nation <html>
from web page

viewers to web
server.
etc that we s e e frequently inwel.books, < h e a d >
itle> College </title>

feedback forms, search pages sites
HTML forms. These pages accept data from the ivisitors
e
are essentially /head
and pass it to the
server.
<Body
contain standard input controls such a tevt.
Form pages usually
<form
select box, etc. for etering data. Forms "text" name "mark
checkbox. radio button.
=
also <input
type
Value "0
information to the server. An HTML Size =
includemethods passing for form "10>
is enclosed by <FORM> and «/FORM> tag pair and tags needed
to </form>
controls are given in between them.
create input /body>
<FORM>TAG </html
Form starts with <FORM> tag and ends with </FORM>. Action
E College AAicrosoft Internet Explorer
and method are two main attributes of the <FORM>. Favorites
Fle Edit View Toos Hetp
The visible part of a form is a set of controls to accept the inputs Batk
from the viewers. Different types of controls can be selected based on
address :\Documeres ard seangsD. Antony Thamasyy Doanentst
the nature of input. The <{NPUT> tag can be used to create a number
of input controis such as textbox, password box, check box, radio button,
submit button, etc.
When the user types in a mark it will become the input's value and
The Type value attribute determines the control type created by paired with the input's name (mark). The vaue that we have given
the tag
(i.e., o) is the default value unless the user changes it. The size of the
Text creates a textbox and be used for
can
accepting character
input box can be increased or decreased.
input.
Input Type = *text"> creates a textbox.
Radio Button
of several options. It
Radio buttons allow the u s e r to choose one
Password creates password box. As you know, in
a
characters will be
a
password bo0x places a button as the HTML form. To add a button on your web page
represented by coded symbols such
as asterisk (").
you need to add <input type =
*Tadio"> tag
<Input Type "password"> creates a
=
password box in the webpage.

form>
Checkboxes are useful for
accepting Yes/No
ticking the check box, the input value will inputs
from the viewers "A> CMS
prefer" value
=
On "College vou
put type "radio"
= =
name
passed be to the server.
<Input Type "checkbox"> creates a <br>
checkbox. prefer vaue = "5> SB
<Input Type "radio"> provides a
=
pe =
"radio" name
=
"College you
radio button. ch
<br>
The <input> Tag to Add
Controls value
=
Theprimary tag used in HTML to add inpu

pe
=
"radio" name =*College your prefer
The <input> tag defines the start controls is the <input NSS
enter data. The of an input field where the 5
<input> tag prompts the user
user to enter
can
Web
</ form
data on the
140
P a s s w o r d F ie
elld
Explorer
internet
College
Microsoft Tools elp
A Password field is likea text
field, the
Fe Edt
View F okes
Semch Favor typed character by
type difference being that
displaying an asterisk
each
THor
hides
this
Setngs}O.
Antony
rontrolc h a r a c t e r itself.
itself To add a passwor (") instead
dess
e ) C : O o c u m e n e s
nG
field to your
nut type =
Web page,
CMS
of
the
to
add
sinput
"passwora"> tag to your html code. you
SB need
O NSS < h t m l >
Check Box < h e a d >
<title> College < / t i t l e >

box with a The user can checkmark in it. The
is a small
A check box
check box by clicking the check box.
box. To add:
or clear the
/ h e a d >
select password <br>

either Enter
to add <input type "chet =
Web page, you need <body>

check box to your
<Form>
tag to your
HTML code.
<input type "password" Name =
user password">
<form> *Yes"> SB
</form>
name
=
"SB" value =
College <br>
<input type
=
"checkbox BCM
</body>
=
"checkbox" name
=
"BCM" Value
=
"Yes"> College <brs
<Input type =
"NSS" Value =
"Yes"> NSS College </html>
= "checkbox" name
<Input type
</form>
2 College
Microsoft internet Explorer address C:\Documents and settingsior.Antony Thomas\My Documents\z2
Edit View Favorites Tools Help
Fie
Enter p a s s w o r d
c
Tho
Address
| E C:\Documeents and SettingsiDr. Antony
D SB College
C M Collesze
N S S collegze
Select Box Adding Submit Button

to the
The select box provides a selection list from which the input option submission of the form inputs
Submit button is provided for the data entered
can be selected. Clicking on the box, the list of inputs will be opened, browser collects
server. On clicking the button, the ="submit"> creates
from which the needed item can be selected. <SELECT> and
<OPTION> <INPUT Type
in the form and passes it to the server.
are the main tags needed to create a select box.

a submit button.
<select>
<option > B.Sc
<option> BA <html>
option B.Com <head </title
submit Button
</Select> title> Adding a
2 Colieee Microsof lntornet txpi /head

Edt ew Favortes Toos
<body> ple.html
method
"post>
sform action "exampl =
<br>
drese C:\Documents and Setting=NDr First Name:
name">
"Enter
your
SelecT your College n a m e =
B.SC input type= "textt'

BA Last Name:
BCom
142 143
RAMESET> TAG
=
"last name"> <br>
"text" name
sinput type
=
The <framesets is the

Password:
pd container
tag 1or
sinput type= "password" name "password"> <br> sections
defined
are
within <frameset> irameset
<input type
=
"submit
*
value =
"Submit">
f r a m
main
ributes
attr i
for the
tag are Cols
and
and definition. The
frameset>
d etermines
The of vertica al frames in the Rows. tag pairs.
</form> The
frameset page. The Cols attribute
me is
is given in order
</body>
frame
separated
comma. The column width
percentage of totalbywindow
the
for
specified in
i n pixels
</html> width
(*)
ven to
can be
represent width. The can be
PAdding a submit Button
Fie EdR Vew Favortes
Microsoft
Toos Help
internet E symboi
"40%,
FRAMESET COLS ="4. 30%, variable
creates width. For asterisk
*">
attribu
dimension for horizontalthreeframes.
defines the vertical example
Search
in percentag Its
frames. Rows
of total
Adoress Ec:Documernts and Settings\Dr. Antony Thomnas in pixe
or
window value can be
Fxst Name:Terese
<FRAMESET ROWs 10%, *">
creates two height. For
example
Last Name: Thomes
ADY section 1s
horizontal frames.
notneeded for a
Password |
N O T E : < B O D Y
LSUBMIT FRAMESET> tag 1s given directly in the HTMLframeset page. The

Framess section.
<FRAME> TAG
HTML frames are used to divide your browser windoW into
multiple ORAME> tag defines the frame within
sections where each section c a n load a separate HTML
document. A a
frameset. Frame
collection of frames in the browser window is known a s a
are g i v e n
corresponding
cor to each Irame
section of the frameset tags
window.
frameset. RAME> is an empty tag and is given within <FRAMESET>
The window is divided into frames in a similar way the tables and </
are
organized: into rows and columns. FRAMESET> pairs. The SRC attribute
specifies the path of HTML Dage
to be loaded in the frame. For example <Frame src ="main.html>" loads
Frames allow you to divide the page into several
rectangular areas the page main.html in the frame.
and to display a separate document in each
rectangle. Each of those Creating Vertical Framess
rectanges is called a Frame. The browser window is divided into two
panes, showing page with hyperlinks in the left pane and content
a You can divide the window into vertical sections by using cols
page in right pane. It is done with the help of a special option in HTML attribute of the <frameset> tag. The cols attribute takes the values in
called Frameset. The <FRAMESET> and <FRAME> are the main percentage, separated by commas.
tags
for the creation of a frameset
page. <FRAMESET>tag
defines frame <html>
section and the <FRAME>
tags specify the pages to be loaded in each
frame. <head
<title> Frames </title>
Creating Frames
To use frames on a
s/head
page we use <frameset> tag instead of <body frameset cols = "60 %, 40 %">
tag. The <frameset> tag defines how to divide the
window into frames. irame src= "Framel.html'>
The rows attribute of
<frameset> tag defines horizontal frames trame src= "Frame2.html">
and cols attribute
defines vertical frames. Each frame is
indicated oy
<irame> tag and it defines
which HTML document shall
open into t e
/frameset>
frame. /html> pages nus
Note: Please r framesetpage, thejrameis storea
Ote that before viewing the framesetpage
be C in which
o r e d in the same folder
144 doing business
h your website, then the company
ou are do. security for your operations
Frames Microsoft Internet fxplorer
Ifyo o u l d g i v e m o r e
Fle Ed ew Favorkes Tocs He
the hosting features like disk space, e-mail service

give
will the user has to pay.
th
They usage,
each
Adtess]c:0ocuments and Settirns. Antorny homesy Documens\I.hbmd For
e t c .
website
your
Frst Name OSB College then the hosting company
shared web hosting plan,
Launching
Last Name O BCM Colege 2. a

.11 ioin
Password NSS College Once
facilities
such as:
SUBMIT the
you
how much nour the users use this site.
statistics, i.e.
Usage
Creating Horizontal Frames a) control panel for managing the site
based
You can divide the window into
bl Web hard drive that
horizontal sections area of the web server's
It is an
attribute of the <frameset> tag. The rows by using rou
ows Web space: etc. in the form of files.
attribute takes the data s u c h as text, images,
percentage separated by commas. values in
n etores your
It allows the user to use FTP
File T r a n s f e r Protocol.
<html> d) Accessing web
website file to the
space.
<head> to upload your
program
<title> Frames </title> a domain name
3. Setting up website o r computer
/head» name that identifies a
Domain name is a unique remember
sframeset rows "40%, 60 %"> =
have a simple
and easy to
better to
<frame src= the internet. It is
"Frame 1.html">
<frame src= "Frame2.html">
on
domain name.
/frameset» 4. Maintaining your

sites
condition, you
have to be
/html> website in working
factors such
In order to keep your o n certain
Note: Please note This depends
that before careful to maintain it properly.
pages must be created viewing the frameset page, the
and stored in
page is stored the frame as
same folder in which frameset website to a
new
server
aMoving your
Website Management name,
etc.
b) Transfer domain
Website
and the management deals with the . Uploading your
Website
software such as control of the website.
There are certain browsers, firewalls, etc. usedhardware devices ne next step is
uploading your
home page. It should be saved in
steps for website in the
website about your
Hosting service management.

1. careful
Selecting a Web a You should be
Now there index .html site

are so and
connect
to your
the users many web FTP program .html is in
choose the hosting
are
able to that your index
their needs and corres
companies on the internet. So O p e n your
home page
make sure
factors such as:

their ponding web hosts
financial position. It also according to C Upload your
y o u r hard disk. web browser and
depends on certain test the page. Open by using
a) Type of web these
steps,
website.
web space space that the d) fter

URL ot your
user needs, to t h e
server, etc. whether it should be then go
free

Module 4

Uploaded by

Module 4

Uploaded by

Module4

HTML AND WEB PAGE

Windows based computer system with a text editor like notepad or

greater than sign (). sign («), then the displayed.

Website guage (HTML) that is accessible accessed by entering a URL

type or 1ile our document is. In th n

display the web page, perform the following stens <html>

In order to <body bgcolor="#ffo000">

.html extension and click the Open' button </body>

AddressC:{Documentsand Settings1Dr. Antony Thomas1My Docunments </body>

Green, Blue, etc. options same folder.

For inserting background color, <html>

Working with Text

Right aligned and Justified Dc Thaesy

Left aligned Left alignment is the most c o m m o n alignment.

is equally positioned between the left and right margins. KR.COLLEGE

and has an uneven left edge.

E Our University Microsoft Internet Explorer Dateof birth is 21 July 2012st

Fle Edt ew Favortes Toos Help Chemical formula of water is H,O

4. Strike Through Marquee

be showing you how to scroll text using the Marquee tag.

The font tag defines the font End Tag: </marquee>

"Green"> K.E. College CToling Text in Both Directions (alternatively

Using Whlte Space

valuesieft,Right, Up or Down. have to code as follows:

cells and <TD»

In a S t ofthe attributes are cell defined by the tag

<title> First Table

Name Date ef Hirt Address

<th> Name </th> =

Cochin </td> ><td>Female</td>

<td> Flat No.10. Kalloor,

Column 1 jColumn 2 Co n3|

just for one cell.

<tr> column 1</td><td>row 2,

1 Cell 3</td></tr 2 Cell 3</td></tr>

making one thing inside another and so on. If you

Row3 Cel1 Working with Links

the hyperlink. IIn

/head K. E. College. Mannanan was estabished n the year 1964.

<ol Type ="1" start </OL>

C:Users\IQACIDoc >|x </HTML>

ESuggested Sites e Web Slic

Su9ested Setes ewet s n Geiere

3. Nesting List 12. MA Ecoaceaics

"College photo.jpg images

ges, one smaller to act as

<IMG ollover Image' is image that can

link with an AGE COmmand

effect, an image web object

mouse out. The rollovers) and reverts

attributes ofthe the link tag are used onMouseOver and

over and another after appears without

You can add multimedia files to enhance the

that provide a way for or

from web page

etc that we s e e frequently inwel.books, < h e a d >

itle> College </title>

password box in the webpage.

Theprimary tag used in HTML to add inpu

Check Box < h e a d >

<title> College < / t i t l e >

select password <br>

Web page, you need <body>

Select Box Adding Submit Button

are the main tags needed to create a select box.

2 Colieee Microsof lntornet txpi /head

sform action "exampl =

B.SC input type= "textt'

The <framesets is the

LSUBMIT FRAMESET> tag 1s given directly in the HTMLframeset page. The

Fle Ed ew Favorkes Tocs He

the hosting features like disk space, e-mail service

Last Name O BCM Colege 2. a

/frameset» 4. Maintaining your

Hosting service management.