Scribd
Upload
11 views22 pages

More On HTML

The document provides an overview of HTML, focusing on essential elements for creating effective web pages, including lists, tables, images, forms, and hyperlinks. It details various types of lists (unordered, ordered, and definition lists) and their HTML syntax, as well as attributes for tables such as alignment, width, and cell spacing. The chapter emphasizes the importance of visual appeal, user-friendliness, and interactivity in web design.

Uploaded by

Ahisome Roy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views22 pages

More On HTML

The document provides an overview of HTML, focusing on essential elements for creating effective web pages, including lists, tables, images, forms, and hyperlinks. It details various types of lists (unordered, ordered, and definition lists) and their HTML syntax, as well as attributes for tables such as alignment, width, and cell spacing. The chapter emphasizes the importance of visual appeal, user-friendliness, and interactivity in web design.

Uploaded by

Ahisome Roy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

More on HTML

Chapter Focus
You are already familiar with the basic
concepts of HTML. You arc equipped to Lists
Tables
design a webpage with the help of the basic
Forms
tags like <HEAD>,<TITLE>, <BODY> and
<ADDRESS>, Attributes like BGCOLOR, / Image
/ Hyperlinks
BACKGROUND and TEXT help in adding
greater visual appeal to the webpage. You are
now also capable of adding formatting features in your webpage with the help of tags like <P>
<BR>, &nbsp, heading tags (<H]><H6>), <HR>, <B>, <>, <U>, <CENTER>, <FONT>
<SUP>, <SUB> and <S>,

HTML
Effective web pages have some unigue features that distinguish them. Some of the features of
a good website are:
/ It must be visually appealing.
The colour scheme selected must be simple.
/ The graphics that are used in the page must have relevance.
The text content must be read easily. amy
/ The font used must be commonly available.
The content must besegregated properly using lists and tables.
/ Images must be placed and linked properly.
There should not be too many images on the page otherwise, it may take a very long time to
load.
J Scrolling of the page must beavoided. In case of a larger content, the content must be divided
and loaded on request with a hyperlink.
J One should be able to navigate forward as well as backwards to the home page in a website.
/ The website must be interactive. It must be able to gather data forms from the user and store
them for Tater use.

86
Itshould be able to highlight any small text. In anutshell, the website must be impressive as
well as User friendly. Our chapter will introduce the concept of lists, tables, images, forms and
hyperlinksto enable you to create
effective webpages.
LISTS
(Alistis a number of connected items or names written or printed consecutively, typically one
belowthe other. In a webpage, a list may be created to make a piece of information more
[Link] the following kinds of lists:
Unorderedlists
/ Ordered lists
Definition lists

Unordered Lists (UL)


An unordered list lookS just like the list given above. It is also known as a bulleted list. It
starts
ith the <UL>tag and ends with the </UL> tag. Within a list, each item starts with a <LD tag.
IIhere is an unpaired tag that stands for aList Item. The TYPE attribute can be specified with
the UL tag. This specifies the type of bulletround or square.) )
TYPE = FILLROUND displays a solid round black bullet and
TYPE = SQUARE gives a solid black square bullet.
For example, the code:
<HTML>
<HEAD> ASCHOOL- Windows Internet Explorer
CAUsersLAnjit Desk
<TITLE> SCHOOL Adentty Safe- Exoired
x Norton - 2icense Expred -
e ELTS- Trainers Zone Boi0 AaMaR GoLaP BalL.
</TITLE> Favorites
Page Safety Tgols -
ESCHOOL
</HEAD> THE FOLLOWING ARE THE NTEGRAL COMPONENTS OF A SCHOOL

<BODY> TEACHERS
" STUDENTS
COMPONENTS
THE FOLLOWING ARE THE INTEGRAL
" MANAGEENT
-TEACHING
NON-TE STAFF
0F A SCHOOL
<UL TYPE = FILLROUND>
<LI> TEACHERS
Conputer |Protetted Mode Oft ,100%
<LI> STUDENTS Don

<LI> MANAGEMENT Fig. 7.1 Output of code


<LI> NON-TEACHING STAFF

</0L>
</BODY>
</HTML Figure 7.1.
gves the output as shown inthe

87
Ordered Lists (OL)within the <OL> and </OL> tags. Each individual item starts
This is specified with the <Lb
possible inthistag.)(6)
tag. TYPE, START and VALUE are thethree attributes
1. TYPE--It selects the type of numbcringto be used.
series automatically, starting trom I. TYPE
sgenerates nunmbers in a
"A" scrics automatically, starting from A. TYPE= g"
SnateS Capital letters in a d.
generates small letters in aseries automatically, starting from from I
generates capital Roman letters in a series automatically, starting
DT automatically, starting fromni
in a series
e T generates small Roman letters
list. This 1s used ifone wants to
kARTItsclects the starting value of anumbered
give a value other than the starting values mentioned above.
change the numbering in the middle
(3. ALUE-It isgiven with the <L> tagthat helps to sCHOOt- Windows Internet Erplorer
A
For example, the code: () CAUzers Arijt Desk - ,X
Odentty Sste-Exees -
Nerton. Lcense Expred
<HTML> ir favorites
a t 1ELTS - Treiners Zone Bol OAMsR GoLaD Bt

ASCHOOL
<HEAD> following fac dities
Any school should hre the

<TITLE> SCHOOL 1. Library


2. Laboratones
atories

</TITLE> Cafeteria

</HEAD>
<BODY>

Any school should have the following facilities: Den


Computer | Protected Made C# 1

Fig. 7.2 Output of code


<OL TYPE="1 ">
ASCHOOL - Windows Internet Explorer

<LI> Library e - o
CAUsers\Ari1ti Desk
2License Expred O dentty Safe- Exered -
Norton
<LIS Laboratories Favorites e IELTS - Trainers Zone Bois OAsMaR GoLaP BaL
Pace
ASCHOOL

<LI> Playground Any school shold have the folowng faciities:

<LI> Auditorium 10 Library


11. Laboratories
12 PlaygIond
Auitoriun
<LI> Cafeteria 14. Cafeteria

</0L>
</BODY>
</HTML> Dons
Conputes | Proteted Mode Otf
J009%

Fig. 7.3 Output of code


generates the output as shownin Figure 7.2.
Ifthe <0L>statement was <O1. TVPE =*|"START = 10>, then the frst element ofthe list
uOuldhave started with a value of 10 instead ofT(Fig. 7.3). Consider the following example
<HTML>

<HEAD>

88
TITLE> SCHOoI,
SCHOOL - Windows Internet Explorer
</TITLES
-oi 7
e CUsers\ Aryjit\ Desh
Exored
</HEAD> Norton . License Expred O dentty Safe -
Favorites 1ELTS - Trainers Zone
<BODY>
ASCHOOL
should
Any school have the Any school should have the fotlowing facities

<OL TYPE="1 START = 4 >


following facilities: 4 Library
5. Labor atories
1 Playground
2 Auditor ium
<LI> Library 3 Cafeteria

<LI> Laboratories
Computer | Protected Mode: Of 10075

<LI value =1>


Playground Fig. 74 Output of code
<LIS Auditorium
<LI> Cafeteria
</0L> Info Hub
</BODY> START does not work
</HTML> with any value other than
numbers.
Here the list startswith number 4. But the 3rd valuein the
list starts with the value 1instead of
6andcontinues with 2 and 3. It will
generate the output as shown inFigure 7.4.
However, the code:
<HTML>

<HEAD>

<TITLE> SCHOOL

</TITLE>
</HEAD>
<BODY>

Any school should have the following facilities:


<OL TYPE="A" > SCHO0L - Windows Internet Explorer
e CAUsers\Anjit\ Desl
<LI> Library x Norton Lcense Expired O dentty Sate-ExOred
Favorites S e 1ELTS- Trainers Zone
<LIS Laboratories
esCHOOL
<LI value ="S"> Playground Anv school should have the following facihties

<LIS Auditorium A Librauy


B Labor atoies
A Plavgiouid
<LIS Cafeteria B Auditorium
C Cafeteria

</OL>
</BODY> Computer | Protected Mode: Off

Fig. 7.5 Output of code


1005%

</HTML>
89
generates the output as shown in Figurc 7.5.
The difference in outputs slhown in igures 7.4 and 7.5 mcans that in case of letters. the list
restarts from the beginning ITrespective of the value provided.

Definition Lists (DL)


(Definition list is specified within list contains adefinition term
<DL>and </DL> tags. This
followed by the description of that tern. )
VDTtag specifies the definition term
<DD> tag specifies thedefinition description.) Explorer
ASCHOOt - Window: Internet
For example. the code: e CaUsers\ Arijt Dest
?o
License Expired - denty Safe-Exorad
x Norton
<HTML> e IELTS -Trainers Zone
Favorites

<HEAD> A SCHOOL

<TITLE> SCHOOL Teacher the


A teacher is one who faciltates education for
students
</TITLE> Student
A student is a learner who attends an eucationai
institution
</HEAD>
<BODY>
Computer | Protected Mode Off 100%
<DL>
Fig. 7.6 Output of code
<DT> Teacher

<DD> À teacher is one who facilitates education for the students

<DI> Student

<DD> A student is a learner who attends an educational institution


</DL>

</BODY>
</ETML>
generates the output as shown in Figure 7.6.

TABLES
(A table is a collection of related data items (rows) that are logically arranged into vertical
columns and horizontal rows. It can be displayed in an HTML page using the <TABLE> and
</TABLE>tags. )
Fach row of atable is present within the TR and TR> tags. TR represents Table Row.
Cooh column of atable is present with1n the<TD> and TD>tags. TD represents Table Data.
A beederrow is aspecial kind of à row that Spans acrOss the columns of a table It is defincd
using <TH>and TH,<I>stands for Table Header row \ à

90
following
The
optional attributes can be
givenhorizontally
with the TABLE
1. ALIGN- This attribute aligns the table tag:three possible values-
and has
LEFT CENTER or RIGHT.
2. VALIGN. This attribute aligns the table vertically and has three pOssible values-
TOP, MIDDLE or BOTTOM.
3. WIDTH7 This attribute adjusts the width of the table to the percentage of available
SCreen width or to a given
number of pixcls. In absence of this attribute, the width is
adjusted according to the cell content.
4, BORDER- This attribute decides the border to be placed in a table. The thickness of
the border isgiven inpixels.
5. CELLPADDING- -This attribute
specifies the distance between the cell
boundary and the actual data in the Info Hub
cell. The value is specified in pixels. If ALIGN is present with <TD> or <TH> tags, then
KCELLSPACINGThis attribute it applies only to the current cell.
controls the spacing between adjacent Alignments specified by the TR tag applies to
cells in the table. The value is specified the entire row until specified by the <TH> and
<TD> tags.
in pixels. )()
IThe heading or caption of atablecan be specified by the <CAPTION> and </CAPTION>tag.
The ALIGN attribute of the <CAPTION> tag helps to place the caption of the table either to
the bottom (ALIGN=BOTTOM) or to the top of the table (ALIGN = TOP).) (2)
The following code explains allthe above mentioned attributes
<HTML>

<HEAD>

<TITLE> SCHOOL

</TITLE>
</HEAD>
<BODY>
<8ODY BGCOLOR = LIGHTYELLOW>
E> <CENTER>sTREAMS AVAILABLE</B></CENTER>

<BR><BR><BRKBR>
<CENTER> =1o
CELLPADDING =10 CELLSPACING
<TABLE BORDER=10 width = 25%
<CAPTION ALIGN=BOTTOM>
<B> SUBJECT GROUPS</B>
</CAPTION>
<TR>

<TH BGCOLOR= LIGHTGREEN>SCIENCE</TH>


H BGCOLOR= LIGHTGREEN>COMMERCE</TH
</TR>

<TR ALIGN=CENTER

<TD>MATHS</TD>
<TD>BUSINESs MATHS</TD>
</TR>
<TR ALIGN=CENTER>

<TD>PHYSICS</TD>
<TD>ACcOUNTS</TD>
</TR>
<TR ALIGN=CENTER>

<TD>CHEMISTRY</TD>
<TD>COMMERCE</TD>
ASCHOo.-Wndo lrtemet bplorer
</TR> ( e, CUzers Argi DeitopMore sbout HTMM47Mml
Nerton Lese Expres -

a e atS- Trares Zone Bei OAahtaR GclaP BalL YouTube- Seha Path in R Gooe
<TR ALIGN=CENTER sFaortes
6CHOoL

STREAIS AVAILABLE
<TD>COMPUTER SCIENCE</TD>
<TD>ECONOMI CS</TD> SCIEXCE cOMMERCE

</TR> MATHS BUSINEss


MATHS

PHYSICS ACCOUNIS
</TABLE> CHEMISTRY cOMMERCE

</CENTER> COMPUTER
SCIENCE ECONOMICS

StAJECT GROUPS
</BODY>
4Computer | Prctected hMode CH

</HTML> Fig. 7.7 Output of code


The code generates the output shown in Figure 7.7.

Colspan and Rowspan


Colspan and Rowspan are two other attributes that are used to
more than one column. assign more than one row or
1 (coLSPAN This attribute
instructs the browser to let the cell defined by the <TH>
orTD> columns to take up more than onc column. This is used when a table is
92
composed of more than once
columnsthe table has to column)It is assigned a value equal to the number of
accommodate.
2. ROWSPANThis attribute instructs the browser to take up more than one row. )
code:
For example, the
<HTML>

<HEAD>

<TITLE> SCHOOI

</TITLE>

</HEAD>

<BODY BGCOLOR =
LIGHTYELLOW>
<B> KCENTER>REPORT</B></CENTER>
CBR>XBR><BR><BRY

<CENTER>

<TABLE BORDER=10 WIDTH=25% ALIGN=CENTER CELLPADDING=10 CELLSPACING =10>


<CAPTION ALIGN=BOTTOM>

<B> SUBJECT GROUPS </B>


</CAPTION>

<TR>

<TH BGCOLOR = LIGHTGREEN ROWSPAN = 2> NAME </TH>

<TH BGCOLOR = LIGHTGREEN COLSPAN = 3> MARKS </TH>

</TR>
<TR>

<TH> MATHS</TH>
<TH> PHYSICS</TH>

<TH> COMPUTER SC</TH>

</TR>
<TR ALIGN = CENTER

<TD>RAVIK/TD>

<TD>87</TD>

<TD>83</TD>

<TD>95</TD>

93
</TR> sCHOOt -Windowt Intenet Erplorer .4,x|t
Atore abeut HTMLL8S htrnt
e CUters\ ArijiDetoet
<TR ALIGN = U
Lcense trnref -
Osty Ssfe . Expred
YouTube Sshaj Path in A

CENTER></TD> Nerton
Fontes s n tL TS - Trainers Zone J Boti OAstMaf
GoLsP Brt
pPaoe Sefety

<TD>TANIA</TD>
SCHOOL
REPORT

<TD>89</TD> MARKS
<TD>83</TD> NÁME
MATHS PHYSICS
COMPUTER

<TD>99</TD>
</TR> RAVI

99
89 83
TANIA

</TABLE> sUBJECT GROUPS

</CENTER>
Computer | Protected Mode C
</BODY> Dene

</HTML> Fig. 7.8Output of code

generates the output as shown in Figure 7.8.


fORMS
Arominawebpage helps to collect some information from the user ofthat pagesystematically.
The general syntax of a form is as follows:
<FORM NAME ="form name METHOD =<GET|POST> ACTION = "action after the
form has been submitted'> controls <FORM>
Here, form name is the user given form name which can be used to identify that form.
METHOD is either GET or POST.
I GET signifies that only the URL of the form is given to the application
data.
collecting the
/ POSTon the other hand signifies that the data has been sent to the
concerned. application
ACTION signifies the action that has to be taken after the submission of the form.
Controls are either text or items to be selected that have to be
controls have to be completed before submitting the form to a modified the user. These
by
is given ineach of these controls is the processing agent. The value that
default value that has to be given back to the processing
agent.
Controls help to interact with the information of the form, required by
control. The controls can be of the following types: providing avalue to the
1 RADIOBUTTONThis control helps to select only one
flls in this control. The general syntax of this control is: option out of agroup. Adot
INPUT TYPE=RADIO" name=*RBTN" value-*MALE">MALE
94
2. CHECK BOX-This control helps to selcct multiple options ina group. Acheckmark
fills in this control. The
general syntax of this control is:
ANPUTTYPE="CHECKBOX»
COMMERCE name=CBOX"value-COMMERCE">
, TEXT BOX-This control allows to type
in text in arectangular box. The genela
syntax of this control is:
ANPUT TYPE=*TEXTFIELD" nameTXT" value-« ">
Ifadefault valuc has to be given in the text box. then it maybe given
attribute. inside the value
Generally, whatever is typed by the user mav be seen, But this text may be masked SO
that ** appears instead of the letters typed. This can be done
by using the syntax:
<INPUTTYPE=«PASSWORD'" name-«pWp" value-default value">
Here the default value is given inside the value attribute. If the user does not want the
default value to be provided, then the attribute should be omitted.
If amultiline textbox is required, then it can be set by
using the syntax:
<TEXTAREA>You may enter the text here</TEXTAREA>
By using this command, a multiline text box is created which can be scrolled down
using the scroll bar. The text between the <TEXTAREA> tag is displayed as a default
text. If the user wants to enter something else then this default text has tobe deleted
and the new text may be entered.
4. BUTTONThese are the most important types of controls. There are two types of
button controls- submit and reset.
The submit button helps to send all the data of the form to the mail server or the web
server. The general syntax is as:
<INPUTTYPE=SUBMIT" name=SUB" value-«Submit">
The reset button helps to set all the controls of the form to their default initial values.
The general syntax is as follows:
<INPUT TYPE=«RESET" name-*RES" value=Reset">
The following code integrates forms and controls:
<HTML>
<HEAD>
eMale
O e mole
<TITLE>
<B> SCHOOL</B>
</TITLE>
P
</HEAD>
<BODY>
95
<FORM ACTION="submitted. html ">
NAME=" admission query METHOD=POST

<B>SEX</B>
<BR>

ANPOT TYPE="RADIO" name="RRTN value="MALE">MALE


<BR>

<INPUT TYPE-"RADIO" name="RBTN

value="FEMALE">FEMALE
<BR>

<BR><BR>

<B>STREAM</B>
<BR>

<INPUT TYPE="CHECKBOX" name="CBOX"

value="SCIENCE">SCIENCE
<BR>

<INPUT TYPE="CHECKBOX" name="CBOX"

value="COMMERCE">COMMERCE
<BR>

<INPUT TYPE="CHECKBOX name="CBOX"

value="ARTS">ARTS
<BR>XBR>

<B>ENTER YOUR NAME</B>


<BR>

<INPUT TYPE="TEXTEIELD" name="TXT" value=" "


<BR><BR>

<B>ENTER YOUR PASSWORD</B>


<BR>

KINPUT TYPE="PASSWORD" name=PWD" value="ASDEG"S


<BR><BR>

<B>Write about yoursel f<B>

<BR>

96
TEXTAREA>You
may enter the text
<BR><BR>
here</TEXTAREA> e 8> SCHOOL</B> - Windo.
e CAUsers\Arnjit\ Desl X
<INPUT TYPE="SUBMIT!! X Norton

<INPUT
name="SUB" value-"Submit"> Favorites eIELTS - Trainers Zone
TYPE="RESET" name="RES" A<8> SCHOOL</B>

</FORM value-"Reset" SEX


MALE
</BODY> FEMALE

</HTML STREAM
SCIENCE

Thegenerated output is shown in


jCOMMERCE
Figure 7.9. JARTS

sfore running the code given above, make


another html
ENTER YOUR NAME
Te t
document called [Link] and save it in
the same folder. ENTER YOUR PASSWORID
Tert
The code for submitted. html is as follows:
Write about yourself
<HTML> You may enter the
text here

<HEAD>
Submit Reset

<TITLE>
Computer | Protecte:g 100%
SCHOOL
Fig. 7.9 Output of code
</TITLE>

</HEAD>
SCHOOL - Windows Internet Explorer
<BODY>
cAUsers\Arijit\ Des Bing
Thank you your query has been submitted X Norton LicenseExpired - 6 identty Safe -Expired -
S Favorites eELTS - Trainers Zone
</BODY>
SCHOOL

</HTML
Thank you your query has been submitted
After clicking on the submit button, itopens another
webpage called [Link]. The output is shown
in Figure 7.10. Computer | Protected Mode: Off 100%

IMAGE Fig. 7.10 Output of code


animated
1e <IMG> tag helps to insert an image into the webpage. Theimage may be static or
the
l, JPg and .png are the three types of files supported by FHTML. The following are
attributes that can be used with the <IMG> tag:
image,
. ALIGN This controls the alignment of the text following the
ofthe inmage.
/ALIGN=TOP ensures that the text is Written on the top
the imoos
ALIGN=MIDDLE ensures that the text is written at the middle of
V
bottom of the imans
/ALIGN=ROTTOM ensures that the text iS written on the
97
ALIGN can also control the alignment of the image with respect to the display
This is donc by using the following attributes:
/
SCre n,
ALIGN=LEFT indicates that the image will be appearing to theleft of the screen.
/ALIGN=CENTER
SCTeeN1. indicates that theimage will be appearing at the center of the
NRIGHTindicates that the image willbe appearing to the rignt of the
SCreeIm.
2. BORDER
This attributecan be used to specifythe border size to be placed around
the imagc.
J. HEIGHTThis attribute canbe 1sed to specify the height of the image 1n pixels.
. WDTH-This attribute can be used to specify the width of the image in pixels.
S. VSPACEThis attribute can be used to specify the amount of space left on the top
and bottom of the image.
0. HSPACE -This attribute canbe used tospecify the amount of space left on the left
and right of the image.
I. SRCThis attribute can be used to specify the URL or path of the image file that has
to be embedded.
8. ALTThis attribute can be used to display the text if the image cannot be displayed.
For example, the code:
<HTML>

<HEAD>
Info Hub
<IITLE> " GIF stands for Graphic Interchange Format,
JPG for Joint Photographic Experts Group and
SCHOOL PNG stands for Portable Network Graphics.
</TITLE> The image should ideally be present within
the same folder, otherwise it must be referred
</HEAD> properly. height and width are not
If
then the image takes a normal size. mentioned,
<BODY>

<IMG WIDTH=450 HEIGHT= 400 SRC ="image2. SCHOU Window letecnet Explres

jpg">
*karates

</BODY>

</HTML>

generates the output shown in Figure 7.1 |.


The code:

Fig. 7.11 Image output of code


(without borders)

98
<HTML>
CIO Windes ntrtJeglitet

<HEAD>
roteso

<TITLE>

SCHOOL

</TITLE>

</HEAD>

<BODY> Fig. 7.12 Image output of


code (with borders)
<IMG WIDTH=450 HEIGHT= 400 BORDER=6
</BODY> SRC="[Link]'>
</HTML>

generates the same picture as the earlier one, but with


borders (Fig. 7.12).
The following code:
<HTML>

<HEAD>

<TITLE>

SCHOOL

</TITLE>
</HEAD>

BODY BGCOLOR= LIGHTYELLOW >

<CENTER>KHl> E-cIVILISATION SCHOOLS</H1></CENTER>


<IMG WIDTH=450 HEIGHT= 400 BORDER=6 HSPACE =50 vSPACE=30 SRC="[Link]'
ALIGN= RIGHT >

<BR><BR><BR><BR>
The the most popular group of
E-Civilisation
schools the
grouP of schools is one of
having its presence in 30 countries. Finding the
world over
*etent talent of the child is our main focus. The school emphasises on
ie value of education rather than focussing only on knowledge. We also
encourage social, emotional, intellectual and physical growth of child.
focussed on the child.
<BR><BR><BRKBR>
training 1n
The entire effort is
etracurricular activities is
Specialised
provided by the school from a
very early age. The library is equippéd very
well The playground is
very
computer labs
spacious. The school also has well -equipped and all other
facilities that make up a nodern
school.

99
</BODY>
</HTML>

generates the webpagc shown in Figure 7.13.

E-CIVILIZATION SCHOOLS

ats cre an fom The chocd erghs on


the sshe ec

w an fceed en the cha4 Specisadttine t

The Brm keard

My Corote

Fig. 7.13 Output of code

HYPERLINKS
Since HTML creates web documents that are supposed to be viewed on a computer screen, it
1S not advisable to increase the length of awebpage abnormally. It decreases the interest of the
browser and more importantly takes a longer time to download. Thus, it is suggested that one
must divide the information logically into a number of modules. Each module might contain
information that is independent of the other modules. So, the user has the freedom tochoose
what he wants to view. Each of these modules may be composed into an individual webpage.
Thus,there should be a way to link these pages so that they may belong to the same group and
be known as a website. This can be achieved by using a feature called hyperlink, or hypertext,
or hotspot.
Ahypertext is different from normal text as it links to other sections of the
website or an
external website. Itcan be distinguished from a normal text as by default a hypertext appears
blue, is underlined and the cursor shape changes to a hand when the
over it.
mouse pointer is placed

Thelinks present in an HTML document can be of the


following three types
1. LINKIt appears blue by default and specifies that the
text associated with it has an
embedded link.
2. ALINK Whenever a link is visited, it
becomes active link, Generallv, the colour of
this link should appear in a separate colour. The default is purple.
2 VLNK Once a link has been
Visited, it is known as a visited link. It should be
distinguished fronm the other twotypes of links so that the user may understand that the
link has already been visited. The default colour is red.

100
allowsto set the colours of these different tvpes of following
HTML oft links with the help of the
attributes fthe <BODY> tag:
LINK -COLOUR NAME to mention the colour of the
=COLOUR NAME to specify the colour ofthe hyperlink,
active link and
=COLOUR NAME to represent a visitcd link.
<A> ag may be used to create a hyperlink. <A> refers to an anchor which contains
the
The hypertext.
elernentto linked. The content within <A> and </A>tags become a hyperlink or
be
Clickingonthe hyperlink takes the control to a different section. The section to be navigated
whenthe hyperlinkis clicked has to be specified within the HREF attribute of the <A>tag as
showninthe following syntax:
A HREF= "target [Link]|'"
Basically, a hyperlink may navigate to either
/ Any other web document
, Anyother section within the same document.
Linking to an External Document
Eor linking to an external document, the following syntax may be used:
<A HREF= target [Link]'> text to be hyperlinked </A>
For example, the line of code:
<4 HREF= *[Link]'"> View our teachers </A>
clicked, the webpage called
makes *View our teachers'" as a hyperlink and when it is
of that webpage. The file
teachers html is opened and the control is taken to the beginning
present in the current
[Link] must be present in the current working directory. If it is not
drectory, then a relative path must be mentioned.
go toa particular section of the external document, then named anchors must be
Iwe want to
following steps can be used to take the control to a particular section of the target
usea. The
document: notepad.
Open the target document for editing in made.
which the jump has to be
* Ldentify the section to abel
before that section. use the named anchor to label the place as <A NAME=
O Just NAME="senior school>
Iame>. For example. <A current document.
4, Now save and close the target document and open the
with the filename in the current
5. To hyperlink, mention the label name along
enforce inthe
document the <A>tag as follows: hyperlinked.</A>
"[Link] #label name"> text toobe
<A HREF= school"> View our teachers</AS
[Link]#senior
For CXample, <A HREF=

101
the
Here, *View our teachers" becomes the hyperlink. This when clicked in section browser, opens
the
another existing document called [Link] and places the controlin labelled
senior school as mentioned before.

Linking to a Section in the Same Document


providedtothe
If the current webpage docs not fit one screen,then a link should be section
into the control tothat section instcad ofthe user manually
in the same webpage to directly transfer
down in the
scrolling to find out the exact location. Similarly, if the user has moved webpage,
then a link should be provided to move to the top of the webpage just by clicking on the link.

ror doing this, the same stens bave to be followed as before. The only difference is th¡t the
target filename should be mentioned as the current filename itself. The absence of any filename
before tlhe #signifies that the control has to be transferred to asection in the same webpage.

For example, <A HREF= abel name"> text to be hyperlinked <A


Using Images to Hyperlink
YOu may sometimes require an image to act as a hyperlink. This can be done simply by puting
the <IMG> tag within the <A> and </A> tags.
For example, <A HREF = target file [Link]> <IMG SRC= image name>VA>

By doing this, the image becomes a hyperlink which when clicked opens targei_file name.
html.

MARQUEE
The <MARQUEE> tag helps to display a scrolling text. The text within
<MARQUEE> </MARQUEE> tags scrolls, by default, from right to left in the screen.
Announcements that want attention should be placed within this tag. Excessive use of this tag
1S not recommended.

The list of attributes that go with the <MARQUEE> tag are as follows:
ALIGN: This attribute helps to position the marquee element to the TOP, MIDDLE or
BOTTOM of the webpage.
J BGCOLOR:This attribute helps to puta background colour to the marquee element.
J BEHAVIOR: This attribute helps to definethe behaviour of themarauee element. The
Values for this attribute can be set to SCROLL,SLIDE orALTERNATE.
DIRECTION: This attribute defines the direction of movement of the marquee
element. Though the default direction of movement of the marquee element is from
richt to left, it can be made to move from lett to right by
setting the direction to
RIGHT.

102
HEIGHT: This
attribute setsthe height of thc clement cither in pixcls or in
percentage. marquce
WIDTH: This: attribute sets the
percentage. width of the clement either in pixels or in marquce
exaiple, thecode:
Éor
HTMLS

(BODY>

AXU>DISPLAYING THE MARQUEE


MARQUEE ALIGN MIDDLE
ELEMENT</U></B><BR><BR>
BGCOLOR=GREEN
BEHAVIOR=SCROLL
KEIGHT=508 WIDTH=80%>THIS TEXT IS
</BODY>
SCROLLING</MARQUEE>
</HTML>

gIvesthe output as shown in Figure 7.14.


CDocuments and Settingslughosar 1 DesktopHTML CodesMarquee. html . . . a cDocume nts and Seltinga\ughosar1VesktoptTMIL CodesMarquee. htmf..
E CDocuments and Set v e
C CDocuments and Set
View Favorites Iools Help
Ele Ede Yie Favortes Lools tdelp
Asoftonic " The PC lost his head?
softonic Foc Registry Errorso
Favortes ECADocuments and Setting. Page - Safety r Favorkes Ac:pocuments and Settng... Poom Safety -

DISPLA1ING THE 1IARQUEE ELEAIENT DISPLAYTNG THE MARQUEE ELEMENT


STEXT IS SCROLLNG THIS TENT IS SCROLLIN

My Conputer 100%
My Computer 100%

(a) Start of Scrolling Efect (b)Text scrolled towards the right


Fig. 7. 14

Tech Bytes
Controls: textor items within a form that
List: a number of connected items present may bemodified by the user
consecutívely Hypertext: it is ditterent trom a normal text
Table: a collection of related data stored in as it links to other sections of he website or
vertical columns and horizontal rows an externalwebsite
Form: a structure to collect some
information from the user of that page
systematically

103
Bitsto Remember
lists.
Alist in HTML can be either Unordered (Bulleted), Ordered or Definition
/ Each item in a list
starts with the <L> tag.
/A bulleted list may be
by <UL> and </UL> tags.
createdwithin
/An ordered list is specified the <OL> and </OL> tags. within
definition term is given
A definition list is enclosed <DL> and </DL> tags. The
<DT> and the description is within
the
given witlhin <DD> tags.
Atable may be created usinp the <TABLE>... </TABLE> tags. represented within <TD>
/ Each row is represented by <TR>....</TR> tags and cach column is
<TD> tags.
V The header row can be specifed by the <TH>.../TH> tAgs
V<CAPTION>,..</CAPTION> helns togive aheading tothe tab
VThe <FORM>....<FORM> tags may be used to create aform.
or multiline text boxes are some of the controls
ooutonS, check boxes, text box. nassword text
that can be embedded in aform.
VA form may be sent toprocessing agentusing the submit button.
V Allthe values of the form can be set to the initial mode using the Reset buto
/ The <IMG> tag is used to insert an image.
Y LneSRCattribute may be used to Specify the URL or path
of the image that has to be embedded.
the same page or
Anyperlink may be created by the anchor tag<A>....<A>. It helps to link either to
to any other webpage.
The HREF attribute may be used to specifythe target file name.
/ The images may also be used to hyperlink.

ASSESSMENT ZONE

A. Choose the correct answer.


1. Which type of list is specified by the <OL> tag?
(a) Bulleted (b) Numbered (c) Definition (d) None of these
2. The attribute that displays the text when the image cannot be displayed is
(a) ALT (b)SRC (c) TITLE (d) TEXTFIELD
3. This attribute contains the target file name.
(a) NAME (b)<A> (c) HREF (d) LINK
4. Which is not a value of the VALIGN attribute of the <TABLE> tag?
(a) TOP (b) CENTER (c) MIDDLE (d) BOTTOM
5. Which is not the control of aform?
(a) Radio Button (b) Multiline Text Box (c) Reset Button (d) Image

104
whether the
[Link] following
statements
[Link] must be used area True
to jump to or False.
particular scction of the main document.
The ROWSPAN instructs the browser to take
2.
3. The <DD> contains the definition term.
un more than one column.
ALIGN= MIDDLE ensures that the
4. Image will appear in the centre of the Screen.
The value pWD ensures that the input given by the user is not
CFillinthe blanks using the words given in the box. displayed.
IMG Fillround POST Hyperlink VSPACE Row

The method in: a <FORM> tag has two options GET and
2. We may display a pictureusing the tag.
The <TR> tag describes each of a table.
4 may be used to specify the amount of space left on the top
and bottom of the image.
5, Around bullet may be specified by the type in the <UL> tag.
Atext that may link to other
sections of the page or website is known as a
D. Answer the following questions.
L. How many types of lists can be created in HTML?
Explain each type and its functionality.
) What is the difference between the type attribute
when used with <0L> and <UL> tags?
3. Name the two types of bullets that may be created.
4. Differentiate between:
(a) cell padding and cell spacing. (b) ROWSPAN and COLUMNSPAN
(c) VSPACE and HSPACE
5. Define the following tags-UL, OL, DL, TR, TD, TH, INPUT, IMG and A.
6. What is the use of HREF? How does it help to link to an external
document and an internal document?
7. Write the general syntax of a form tag. Give one example of an action that can be taken in a
form.
8. Define a control. What are button controls?
9. Give one example each where the following may be usedTEXTFIELD, PASSWORD,
TEXTAREA
RADIO BUTTON,CHECKBOX, SUBMIT and RESET.
10. What alignments are possible with the <IMG> tag? What is the use of the height and width
attributes
while entering an image?
11. How can
one use images to hyperlink?

105
E. Solve the
crossword using the given clues.
Crossword Zone ACROSS
alignment attribute
2. Top tobottom
with the
3. This attribute is presenttable
5. Describes the row of
a IMG tag
7. Helps us to give a name to the
table
9. Bulleted list
4
DOWN
5
6 1. Composed of rows and columns
3. Helps to mention the target file name
8 4. Caption of the table may be aligned here
6. An interactive tag
7. One may span this way to include more
than one column in a table
8. This may be used with lists

1. Design five linked webpages containing tables, images and lists on your favourite topic.
2. Design the visual round of a quiz show. Insert all the images as questions. Hyperlink them Zone
to their answers. Includea back switch to come back to the main page.

106
Lnage

Sudythe following image and


these questions.
Study
[Link] arethe features that have
been usedinthis image?
E-SCHOOL
CIVILISHOUSES
ATION SCHOOLS
Notethe tags used along with HOUSE
their attributes.
TAGORE COLOURS
coode to implement this YELLOW
Write a
GANDHI GREEN
page. BOSE RED
NEHRU BLUE

EVENTS
" FEST
" DEBATE
" TALENT HUNT
" QUIZ
" SPORTS

SCHO0L PRIZES
BEST PERFORMING HOUSE
BEST DISCIPLINED HOUSE
BEST HOUSE IN SPORTS
BEST HOUSE IN
ACADEMICS
BEST HOUSE IN
CO-CURRICULAR ACTIVITIES
HOUSE DUTIES
Yellow
January to March
Green
April to June
Red
July to September
Blue
October to December

107

You might also like