CH 4 Advanced HTML

Introduction
PiTML (Hypertext Markup Language) is a standard markup language that is designed to develop
web pages. In the previous chapter we have discussed about HTML basics, different HTML tags and
how to use these tags to create simple web pages containing only textual contents. HTML allows us to
insert and use images in a web page to make it attractive and more meaningful.lt also provides us tags
to insert tables in the web. documents to present the text on them in a concise manner. One of the
rnost important features of HTML is that we can connect web pages with each other by using the
hyperlinks in it. In this chapter we will learn about inserting images and tables and creating hyperlinks in
the HTML documents.
Using Images on Web Page
When we visit web sites \'v"2 observe that besides text, web pages contain other components such as
images, illustrations, charts, maPs, etc. 1mages,therefore,form a very important component of web pages.
They not only make the web pages more attractive,but also make the content more meaningful.
QBASIC Progmminiug for Kids
1)\ T.d Frhx
Sources of Images
For inserting an image into a web page we should first create an image or obtain it from some authentic
source and store it in the form of a file on our computer or in a portable storage medium like a CD, DVD or
USB drive.Here are a few important sources from where we can get the images for our web pages.
I. Internet: Many web sites offer 'free' downloads of images that we can use in our Webpages. For
example:google.co.iri and f1ickr.com.
2. CIipArts:Collection of ready made images are available at stores in the form of ClipArts.
3. Scanned Pictures: If we have images - photograPhs, drawings, il|ustrations;etc.- that we need to insert
in our web page,al1 we need to do is simply scan them and they are ready or use.
4· Self Created Images: Photographs and videos taken from a digital camera or mobile phone can be
inserted on a web page.You can also create images in Image Editing Programs such as Corel,PhotoshoP etc.
`Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
vÝÊ*ÀÊ*Ê `ÌÀÊ
W /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê
ÜÜÜ°Vi°VÉÕV°Ì
lV
Fastrack - 10
Image File Formats

A File format defines the structure and type of data stored in a file.An image file can be saved in
different file formats such as .GIF (Graphical Interchange Format), .JPEG (Joint Photographic Experts
Group),.BMP (Bitmap Images), .TIFF (Tagged Image File Format),.PNG (Portable Network Graphics),
etc.that help us to compress the data and reduce the size of an image flle.We can use any of these imagc
file formats as per our requirements. Howeveq .JPEG (also .jpg) is the most suitable hie format for
saving images for use on web pages.
Adding Images toWeb Pages

There are many HTML tags and attributes that enable us to add images and format them for placing on
web pages. Also,we can add images to the background and/or the foreground of the web pages.
I. To add an image to the background of web page we use the BACKGROUND attribute with the
"BODY" tag.
2. To add an image to the foreground we use the SRC attribute with the <1MG> tag.
Let us now learn to add images to web pages and use the different attributes of these tags to create
attractive web pages.
Adding an Image in the Background

So far we have been adding a PlainWhite or Coloured Background in a web page with the Text written on it.
To make web pages more effective we do many things,one of which is to add a Pictorial Background to a
Web Page.The syntax for setting an image as the background in a webpage is given below.
Syntax: <body background="picture name and 1ocation">
Steps to set a picture as the background of a web page
]. Write the body tag with the background attribute. 2. Save the file using the Save As command and view
Assign it the name and location of the image file that the page in the web browser.
you wantto set as the background of the web page.
I
Fb Eek FMMt ~ Hejp
<KTML>
<HEAD>
<title> use crf Backgrou*Ar[r1bu[e </TITLE> </p1EAD>
<body backgroundµ"irrf1atab]e_boar.jpg">
<h1>Some mrals to Remember</h1>
<basefom facej'camic sans ms" color-"red" sjzem5>
<p>-"An ounce of prevention is worth a pound of cure"-</p>
<p>-"a man Is known by che company he keeps"-</p>

<p>-"Mf5fonune tests the sincer'lry of friends"-</p></font>
<p>-"precaur'lons are useless after The crisis"-</p>
</BDDY>
</HTML>
HTML code in the Notepad window
_REMEMPER""
Give the location orpath of the picture file before its name in the HTML code. Itwould be prefera e
to store the picture file in the same folder as the HTML document. Then you will not be required to
give the location of the file. You can simply give its name with the background attribute.
Q)" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
/ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê
4
Ad,mc.dHTMLI
Adding an Image in the Foreground

As you know, to set an image in the foreground on a web Page we can use the <img> tag with the 'src'
attribute.The URL or path of the image is specified with the src attribute.lf the image file is kept in the
same folder as the HTML document,we need to give only the name of the file with the src attribute.
Syntax: <img src="path of the image file">
Steps to insert an image on the web page
I, Write the "img" tag with the'src' attribute.Specify 2. Save the Notepad hie using the Sa'veAs command
the path ofthe image file with the'src' attribute. and view the page in the web browser.
m UK ~
n %"m~r~
<KTML>
<nEAD>
<TITLE> use of image ra ro Display an 1magek/TITLE> </HEAD>
<BQDV7 W
,1mg src-"¶nf7uab)e_bo r.jpg">
<rlL>smeMc7ral$ ro Renenber</hl>
.
<p><fom facew"M¶srrdr co1or-"red">-"m ounce of prevention 'Is worrh a

pound of cure"-</p></fom> ,
<p><fonr facej'cmfc sans ms" size-4>-"A man is knom by rhe company he
keeps"-'/p></fom>
<p><fom face·"a1bertus" s¶ze-2 co)orb"navy">-"M15forrune rem rhe sfncer¶ry of

frlems'"</p·<rfo·T[>
<p>-"precaur'lons are use7ess after rhe Crfs1s"-</p>
HTML code in the Notepad window Page as seen in the browser window
Changing the Width and Height of the Image

We can use the height and width attributes with the <img> tag to inform the browser to reserve that
much space for the image (in pixels).The Browser will shrink or expand the image according to the size
(heightand width) mentioned.
Syntax: <imgsrc="path ofthe image hle"width = no.of pixels height = no.of pixels>
Steps to set the size of the image to be displayed on the web page
I. Write the height,width attributes in the <img> tag 2. Save the Notepad file using the SaveAs command
and give them values in pixels as required. and view the page in the web browser.
I
<KTML>
<HEAD>
<title> use uf Image to Dfsp1ay an Smage</TTTLE> </HEAD>
·%Uy> V'
·1mg src·"frrflarab1e,boar.jpg" hefghr.300 wldrhM0Q>

<R>sanemra1s iq Rmenber</hl7
<p><fonr facem"Mfsrra]" slze·6 c0)orj'red">-"An ounce of prevem¶on Is worth
d pound uf cure"-</p></fom>
<p><font face-"cw1c sans ms" sfzeM>-"A man ¶5 knum by the cwpaqy he
keeps"-</p<ffonr>
·p><fom facej'aiberrus" sfze-2 colorj'navy'>-'N1sforrune rests the sincerity
of fr1ends"-</p</font>
<p>-"precaur¶ons are useless after the crfs1s"-</P>
Some Morals to Remember
</%Dy> -"A^ 4 ruuj:ah :s ucntC fokf4( 4 "-'"-
'/KTML>
HTML code in the Notepad window Page as seen in the browser window
REMEMPER °i
Specify the height and width of the image in pixels with the respective attributes in the <img> tag.
Specify the height and width such thatitdoes not distort the image.
a)" /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê
V "
Fastrack - 10
Using the Alt Attribute

The 'alt' attribute can be used to display an alternative text string in case the browser does not find
an image to display or the user has disabled the display of an image.The syntax of using this attribute
within the <img> tag is as follows:
Syntax: <img src="image file path" height= 150 width=200 alt="alternate text string" >
Steps to use of the alt attribute to display an alternate text in lieu of the image
I. Write the tag "img src= "happy_holij'Pg" height=l50 width=200 align="right" ait="the image is currently
' unavailable for disphf'> in the code as shown below.Save the notepad file using the SaveAs command.
<HTML>
<HEAD> .
<title> use hspace atrr'ibute to space out "lmages</TITLE> </HEAD>
<BODY>
<fonr face="Misrra1" size=6 co1or="red">
<hi>m1i- TPie festival of Colours</h1>
</'fonr>
<'img src="happy,ho1i.jpg" he'ight=150 widch=250 a1ign="righr"
a1t="che image is currenrly unavailable for disp1ay">
<font face="com'ic sans ms" s'ize=3>

India is a land of rich culrure and fesr'ivals are an iriregral parr
cjf every Indian's life. holi 'is one of thar. rndian festivals are
source crf celebration and.joy. holi means fesriva1 of different
colours. The festival of joy.and happiness. The Mndu festival of
colors celebrated 'in mid spring every year.
</'forrc>
</BODY>
</HTML>
Alt attribute of <img> tag
a iel-k·dm:ce:trbut:t:sp .. i @ @ " u" O'Qds - "

2. Now go to the place where the image file is located.Cut
the image file from this location and paste it in another Hj:- Tk {e4u4vd 4 ejo~l
folder
India is a land of rich culture and : El tm cmege is ctmrkjy unavadath fcxc§$day
festivals are an integral part of ' A
3. Open the HTML file saved in the step I in your web every Indian's life. HOLI is one of '
browser. The image will not be displayed this time that. Indian f estivals are source of i
because you have removed it from the location specified celebration arid joy. holt means :
with the src attribute in step 2.lnstead the text specified festival of different cokurs. The i
festival of joy and happiness. The
with the alt tag will be displayed. Hindu festival of colors celebrated in mid Spnn9 every year.
Alternate text in lieu of the image

TIP
d
Qr 1CU$edhsp«bwrbAeto$p... ; ' h " Ej Q »
If you do not remove the picture from the location

specified with the src attribute, the image will be displayed Hj:- TLc L·azv^t q¢ ej~>*
despite the use of the alt attribute. The alternate text India is a land of rich culture and
festivals are an integral part of
becomes visible when the user (or you) hovers the mouse cvery Indian'c life HOU is ono of
that. Indion futivak Qrc Gocjrcc of
t cwroNy inmkbb tor
d, pointer over the image for a little while. cekbration and joy. HOLT mcans
festivd of differcnt colours. The
Alt text festival of joY °nd h"ppines$. Thc
Hindu festival of colorG celebrated in mid Spring ev"y yca'·
a" vÝÊ*ÀÊ*Ê `ÌÀÊ
V,
Ad,m,.dHTMLI
CREATINGTABLES IN AWEB PAGE

Tables are used on a web page to organize data in the form of horizontal rows and vertical columns.The use
of tables simplifies complex and bulky data making it easy to understand for visitors.When creating web
pages, we often want to Present data in the form of tables, In fact tables have become the most commonly
used means of creatingWeb page layouts as they give us additional control over layouts.
ables are rectangular in shape. Each table is made up of a Hxed number of rows and columns.The
rectangu|ar area formed at the intersection of a row and a column is called a cell.We enter data in the cells.
p4ostly a table contains a header row which specifies what items should come in the columns below.
I A Column A hmdor rail
A Row-
V 4
Monument s Name Image Features and Location
Lower floors are made of red sand

A data— Qutab Minar stone with beautiful carvings. Located in
cell the Southern part of NCT Delhi.
Located in New Delhi.Made up of pink

India Gate sand stone in memory of the Indian
martyrs of WorldWar-l & II.
In HTML, tables are created by using the <table" tag. The <table> tag is a container tag, therefore you need
to close it by using a closing tag </table>. Everything within a table is enclosed between these two "tags"
which are both required.
Syntax: <Table> .......................................................................................................................</Table>

The attributes of the <table> tag are listed in the table as given below:
Attribute Use Example
align
. window.T he value
Specifies th of thisposition
horizontal attribute
ofmay be 1eft,center
the table or web
within the right.page <table align ="1eft">
width Controls the width of the entire table. <table width ="100">
cellspacing
. in pixels.
Adds space between the cells.The spacing between cells is given <table cellspacing ="10">
cellpadding Adds space around cell contents. "table cellpadding ="20""

Lets you align the cell contents in the table to the top or to the <table valign= "top"l
vahgn
. .
bottom in the cells. "bottom">
Gives a border to a table.The thickness of the border specihed in <table border=2>
border pixels.
bordercolor Adds a colour to the border of a row or a cell. <bordercolor="nayy">
bgcolor Adds a colour to the background of a row or cell. <bgcolor="yellow">
ab" vÝÊ*ÀÊ*Ê `ÌÀÊ
V
Fastrack - 10
The <tr> , <th>, and <td>Tags

The <table> tag itself is of no use unless the <tr>, <th and <td> tags are used to create other elements of
the table.
I. The <tr> tag creates a new row in the table. The <tr> is a container tag and needs to be closed with
the </tr> tag.All the tags (<th> and <td>) that are used to create the data and header cells are
enclosed within the <tr>...</tr> tags.The syntax of using the <tr> tag within the table tag is as follows:
Syntax: <table border=2><tr>
... </tr></table>
2. The <th> tag is used within the <tr > tag and creates a header cell of the table. It is also a container
tag and needs to be closed with the </th> tag. It encloses the data that is there in a header celI.The
syntax of using the <th> tag within the < tr> tags is as follows:
Syntax: <tr>
<th> Header cell data forthe lst column </th>
<th> Header cell data for the 2nd column </th"
... </tr>
3. The <td> tag is also used within the <tr> tag and creates a data cell of the table.lt encloses the cjatzi
that is to appear in a data cell.The syntax of using the <td> tagwithin the <tr> tag is as follows:
Syntax: <tr>
<td>lst data cell value</td>
<td>2nd data cell value</td>
... </tr>
Steps to create a table on a web page
I. Open a Notepad file. Write the code as shown 2. Save the file using the Save As command and view
below to create a table. the page in the web browser.
0 X t- ' " -
<HTML>
<HEAD> -' C Q (D W1/Mpg-7&htmI g e i
<TITLE>Creating a table</TITLE></HEAD>
<BODY> tla« ih Lrjb, in, u mj u uS1 lo c4Lac ^ uuL
<font face="Mistra1" size=6 co1or="red">
<h2>Using the table, tr, th and td tags to create a
table</h2><(font> 1 N·m· tspom A&erem,.n
<p><table border=2> lSactm TenduUax Cnckec SI Tm md 49 qa OOh
jsmhd Kmar jsthm et Ue LoMm Ol"m k2 'nd Br=S medU al the GrwCnckm
<tr><th>Name</th><th>Sports/Game</th><th>Achievements</th><th> }AWa·" Budn L¶2£
Ch'mpn Grex Wrmkr
Remarks</'th></tr>
<tr><td>sachin Tendu1kar</td><td>cricket</td><td>51 centuries V Badmwroa ,SLl: ct Meaj m the 2016 Rio Olµnpin
in Test matches and 49 in 0oIs</td><td>Great cricketer</td> . Cre8

<tr><td>Sushi7 Kumar</td><td>wrestling</td><td>silver medal at
the London Olympics and Bronze medal at the Bcijing
olympics</td><td>Great wrest1er</td>
<tr><td>Abhinav Bindra</td><td>shooting</td><td>Gold Medal at
the 2008 Beijing olympic Games</td><td>Great Shooter</td>
<tr><td>p.v. sindhu</td><td>gadminton</td><td>si1ver Medal at
the 2016 Rio 01ympics</td><td>Great Badminton player</td>
Use of <table>, <tr>, <th>, <td> tags to create a table Table as seen in the web browser
m
Table data cells do not have to contain data. You can create a blank cell by coding
0 ' <TD> </TD>. The code is an HTML special character entity for non-breajdng
Y space. Use in place of datawhen the cell is to be empty.
ab" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
r"
Advanced HTML I
The Attributes of <td> and <th> Tags

The <td> and <th> tags have two main attributes — rowspan and colspan.The following table lists what
these attributes do and how to use them in the <td> and <th> tags.
Attribute Use Example

This attribute allows us to extend a row <td rowspan=3>
rowspan vertically by a given number of cells (specified will extend the current row down to
with it.) include the nextthree cells.
_
This attribute allows us to extend a column <td colspan=3>
coIspan horizontally by a given number of cells will extend the current column rightwards
(specified with it). to include the nextthree cells.
Understanding ROWSPAN and COLSPAN Attributes

Let us now understand in detail how the rowspan and colspan attributes work.
Rowspan
The ROWSPAN attribute of theTABLE tag is used to stretch a column vertically across two or more
rows of a table when coding HTML forWeb pages.The value of this attribute indicates the number of
rows the column will stretch across. If ROWSPAN="3" is used, it will stretch a column vertically across
three rows.
Steps to use Rowspan to stretch a column vertically
I. Open a new notepad file and write the following code in it.
<tab1e border=2> "
<tr>
<td rowspan=3><b>Fruits I like the MOST</b>citd>
<td>Mango</td><td>Guava</td>
<tr><td>ganana</td><td>Watermelon<ltd></tr>
<tr><td>Cherries</td><td>Blackberries<ltd>
</tab1e>
HTML code in Notepad
2. Save the file with .html extension and view it in the web browser.
"' I
^ I
rowspan=3 attribute "" " " Mdgo" ©ava""""

in the <td> tag extends ——>1Frults
. I like the MOST jBanana" N"atermelon
the first row downwards
jcheinries Blackberries
by 3 cells.
Output in aWeb Browser

m
The use of the "rowspan=3" attribute with the <td> tag in the firstrow causes the first column to
expand vertically to expand downward and cover the adjoining two cells to make one big data
cell. -
ab" vÝÊ*ÀÊ*Ê `ÌÀÊ
m"" " Fastrack - 10
It is used when we want to have a particular tab|e

i' Colspan
CoIspan
cell is an
span or attribute
cross of thethan
over more <th>one
andco|umn.The
<td> tags· syntax for uslng
' the co|span attribute within the
<th> or <td>
Syntax: <th tag is asnfollows:
colsp = no.of columns> or <td co|span = no.of co|umns>
The following example code shows the use of the co|span attribute:
:e C:\pocum'nts and 5«1~~ V ·? X ' " : P -
P _. _
r, :y V-
Fb inew Nip " F'm" . Kds
_. .N*' "' ' "' 9 " Gil Lu' PY " O kds ·
'hZ:,¢,,je)[jndors3tndlng oDlspan<ptltle></hHd> He E& Yew
:'md,, , Lspan & aw'
<h1>cfont facB"'NtsLx0j" color·"red">Thtrd rov of the table ue co
·""'w'·'"°m""""' . ~ at'u4u
""'" """"' "'"""""'" '
nr> <eh co]3pan·2> LEFT <t'th>cth cdIs»lj·2> RIGHT ¢1th)¢ftr>
I 1'hj ~ 0( 1/4 uuL "4l4
,tr>ctd)lHcrtd><td>OUT¢ftd)ctd>lKcptd> <td)OUT<ftd)c""' LEFI RIGFIT ,
7tr>ctd mlspan"4> TMs cell spans 4 columns c/td><ptr)

IN OUT IX OCT .
Thi' fdl spm 4 cobumn"
,~v>
u'htm1>
Effect of the use of colspan attribute

Use of colspan attribute
. in
. the code
You can see examples of the COLSPAN attribute in the table above,in row I and row 3.
In row Leach cell is a heading cell (the text is centered) and it spans two columns.lt was' coded as:
<TR> <TH COLSFAN=2> LEFT"/TH> <TH COLSPAN=2" RIGHT "/TH" "/TR"
The second row of the above table was coded like this:
<TR> <TD>IN</TD><TD>OUT"/TD>"TD>IN"/TD> "TD"OUT"/TD" "/TR"
The third row of the above table was coded like this:
<TR" "TD COLSPAN=4"This cellspans 4 columns </TD> </TR>
The use of the colspan = 2 attribute with the <th> tags in the hrst row of the table causes each header
cell to expand rightwards by two columns i.e., the width of these cells will be twice the width of any
normal cell of the table. Similarly, the use of colspan=4 attribute with the last <td> tag causes the last
column to extend rightwards by4 cells.
Understanding Cellpadding and Cellspacing in a Table

Cellpadding refers to the inner free space that each cell of a table has as
cell content
its "padded" bordet It is a cell border of "white space" inside the individual
,
cells'of a table.lt is the wh ite space padding around the cell contents.
Cellspacing,on thewant
other
dm."""
wall in a table.lf you nohand, refers
spaces to themust
at all,you space
setleft between each cell
CELLSPACING="0", Sachin TendliEar
otherwise the default setting is CELLSPACING="1", even if you do not celjdding
even mention the CELLSPACING. ce||spacing
Note:The space between the cells across the rows will only be contro||ed if you use the ce||spacing
attribute in combination with aWlDTH settingfor each cell in the first row.
¶¶
Advanced HTML I
(jNDERSTANDING HYPERLINKS
Hyper|inks or Anchors are the foimdation of theWorld WideWeb or theV\NV\N. They'link' the
web pages of the different websites together into a global network of information that allows users to
surffrorn page to page. Hyperlinks also link the various elements within a web page such as Graphics,
ext and Sound,etc.The major strength of HTML is its ability to link text and/or image/s to other web
page/s or to section/s of web page/s.
A Hyperlink is a text string or an image on a web page which when clicked on,takes visitors to
ano±er section on the same web page or to a differentlinked web page.
Hyper|inks work as references to otherWeb pages orWeb sites.Without Hyperlinks,the purpose of

theYVWW is defeated.ThenWeb pages will simply be like simple text and will leave us in want of more
information on the topic/s.
D'pes of Hyperlinks
Hyperlinks can be of different types depending upon the type of navigation they provide (Internal or
External navigation) and the web page element used as the hyperlink (1mage,Text or E-mail 1D).Some
common types of links that we come across on the web pages are as follows:
I. Internal Links:lnternal links are the links between different elements within the same web site.
2. Local Links: Local links are the links with otherWeb pages on the sameWeb server.
3. External Links:These are the links to other web pages anywhere on the\N\N\N orto an Email box.
The anchor tag

The <a> tag, also known as the anchor tag, is used for creating hyperlinks in HTML.We can use the
<a> tag to create a link that can direct a user to any resource present on the\N\N\N including,textua1
information, images, music Mes,video files and video clips,animation,etc.
The <a> tag is a container tag,i.e.,it has an ON tag as <a> and an OFF tag as </a>. It has two important
attributes:
I. The name attribute,which is used to create an anchor point in the HTML document.
2. The href attribute,which is used to create a reference point or hyperlink.
Let us learn to create different kinds of hyperlinks using the anchor tag.
a" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
"Y
WJY
Fastrack - 10
Creating INTERNAL LINKS

Internal Links are links within aWeb page (or .html document).These links when clicked uPon,|ead
to some other location on the sameWeb page.lnternal links help in the navigation of large documents,
An Internal link is a hyperlink which when clicked takes the visitor to another section on the sadi'
web page.
To create an internal link:

I. We should first identify the target section of the web page and create an anchor point at it usin2
the name attribute of the <a> tag.
2. Then we should create a reference point or a hyperlink to the named section using the href
attribute of the <a> tag at an appropriate location on the web page.
Syntax for using <a> tag, name and href attributes for creating an internal link is as follows;
Syntax:<a name="Anchor name"> </a> q Marks the section or part to be linked
<a href="#Anchor name">Click to go to the named point</a>"Creates the r"eference Pointfo,

the above marked sectjon
Let us perform the following activity and learn how to create an internal link.
' '"0
. "\;
.
"
':' Y4 ACTIVITY Creating the internal hyperlink

I. Create a new Notepad file.Write in it the code as shown below to create a web page with a lot of content
Save the web page using the SaveAs option. Give it any name as you want but do not forget to add the .html
extension to the file name.
Ftle Eek Ftmd Hew Help
<HT11L»
<HEAD>
<TITLE> Creating Defimtion Listsu'TITLE> Cr"HEAD>
cBODY>
<font face"Goudy stout>
<center><hl>Creating an Internal Llnk<njl>c/center)
<1font>
<d1 ccmpact>
<dt>keyboard
<dd>A typewriter like input device used very commonly with the computer to to enter data Ln the
form of text
<dt>Mouse
<dd>A pointing device used commonly vith the desktop computers to tnput data and instructions
<dt>CPU (Central Processing UnU)
<dd>The main processing device of the computer. It is responstble for controlKng and coorcAnattng
all the actions of the computer. and execute software programs
<dt>Monitcrr
<dd>The most CO!Ol1 output dmnce used vith the computer Shovs the output produced by the computer
after processing of data
<dt>Arithmttc and Logic Unit
<dd>The part of the central processing unit which performs operations such as addition. subtraction
and multlplicatLon of integers and bit-uzse AND. OR. LIOT. XOR and other Boolean operations
<dt>Elar code
<dd>A printed homzontal strip of vertical bars of varying vidths. groups of which represent
decimal digits and are used for identifying commercial products or parts Bar codes are read by a
bar code reader and the axle interpreted either through softvare or a harclvare decoder.
<dt>C language
<dd>A programming language designed by Dennts Ritchie at AT&T Bell Labs ca. 1972 tor systems
programming on the POP-ll and unmediately used to retmplement Unix
<dt>Oeep Blue
<dd>A super computer developed by researchers at IBK to explore the use of parallel processing to
solve complex computing problems It is knovn as the first computer to beat the current chess Vorld
Grand Kaster
</d1>
<center><tmg src""cpu jpg" height"300 vtdth"450>u'center>
<A3ODY>
<t'HTNL>
HTML code to create a web page

~
Qb" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
Advanced HTML I
2. Type on the top of the HTML document (just below the "body" cag) the code co create rhe firsc anchor
point as follows:
<a name= "point1"> <a>
3. Create a link referring to the above created anchor point at the bottom of the HTML document by cypi"g
the following code, just before the </body> tag as follows:
<a hre= "#Pointl">Click to go to the top of the page</a>
Anchor point
Reference point
HTML code to create a web page with an internal hyperlink
4. Save the HTML document using the

Save As command. View it in the
web browser.
5. Test the link by going to the bottom

of the web page and clicking on the
link It will take you at the top of the
document where you have created
the anchor pointj.e.,point1.
µ :j"
Output of the above HTML code
" 0
- a '
/The name text is case sensitive and the associated hreftext should use the same case for all letters as
does the name. If the href called for 'Super Computer' and the name is actually 'supercomputer', the
linkwil1 notwork.
K
a" vÝÊ*ÀÊ*Ê `ÌÀÊ
,py
Fa,t,a,k-lO
Linking two web pages on the same Website
A Loca| Hnk is a link that links two web pages residing on the same web server. Since web Pages ofthe
same web site almost always lie on the same web server,links that connect the two web pages of asan)e
web site are a|ways local in nature.
Let us learn how to create a local linkfor linking two HTML documents belonging to the same website,
. . . . ACTIVITY Creating local links using <a> tag

'i'-;,"
I. Create the following two HTML documents in Notepad.
'" uk Fcvms9 v~
cHTMIn Fk E& Form& Y'ew Mp
<HEAD· <HTML>
<TITLE> Lmr'n to Local LtnksUTITLE> cHEAD> Learn to cregte Local [nnks</T1TLE>
<TITLE>
'"HEAD>
<BQDY bgcolor-"pink" topmmrgin-20 10ftma]rglnw20) <B0DY
A1EAD>bgcolor·"pink" topmargin·20 18ftmargln-20)
Cpj (font foce-"tUNBs new roman' siZO-5> 1">More facts about the humn body:"hl>wo
In our ongoing quest for wonderful facts about all msnner oF things. wo <hl><font Face·"mistra ' size"4> nt)
hsw put togethor this lj6t a groat ll6t of amzjng human facts. These (ol><font fbce-"comic sans ms '
are tho fifteen most wonderful things about our bodies thot. hopefully, cli>The largest organ in the body is tba skin. In an adulr nag It
are news to most of our readersi So. onwards: <iFcnt>c[p covers about ].9m2 (20sq ft). Tho skin constantly flakes away - Lb a
(dj >< font focg-"cQKllc sans ms" $ize-4> Kfetima oach person shods around 18kg (40 lb) of skin.
<1i>The stmach's digestnm acids am strong enough to dissolve zinc. <1UThe avemge porson jn the West CdtS 50 tonnes oF food 31id drjnka
For'tunotely For us. the cells ta tho stomoch lining maew so quickly 50,000 liters (11.000 gsllons) of liquid during hl3 life.
thot tbe acids don"t havo time to dl6solvg it. <1i>A single human blood cell takes only 60 seconds to make a
cji>Tbe lungs contajn over 300.1)00 mllion (tiny blood cmpjato circuit of the body.
wssels) . <11)Thg eyes receive approximate 1 y 90 p ercgnt of sll our
IF Chey were laid end to end, would strotch 2400km (1500 mlos). infomauon. mUing us basically visual creoturos.
<1i>A mans testzclm monufacture 10 milhon ngw sporm cells each doy " cli>The f omalo ovsrjes contain nearly half m -mllioa egS cells. yk
·nough that ho could mpopulote the entire planet in only 6 only 400 or so will ever get tho opportunity to create a new life,
mootbs |(1o17<lfont)
croi>C/font>
p href ""next.btml">Click hern to vlcw more amzing tact9 about human
ody</0> lo hrof- "first .html ") Click hero to go to homo pagocra>
<1BODY> C 'EODY)
'1KTML> UHTML)
first.html next.html ,
2. Open the document first.html. Insert the anchor tag in it as given below to link it to the document
next.html kept in the same folder. (If the document is kept in another folder specif)' the complete path with
the href attribute).
<a href= "next.htm1"> Click here to view more amazing facts about human body</a>
3. Save the document first.html by the i.r ca eLoa,n¢oue&.LQcd^ ·pw · j'ciok·

same name using the Save As
comman d. Vi ew i n the web In ourput
have ongoing quest
together thisfor
listwonderful
a great listfacts about allhuman
of amazing manner of things.
facts. These we
are the,'
browser. When the page is , fifteen most wonderful thinµ about our bodies that. hopefully. are news to
displayed click on the link to test it. most of our readers! So. onwards:
When you click at the link it should 1, The stomach's digestive acids are strong enough to dissolve zinc. Fortunately for'
open the page next.html in the us, the cells in the stomach lining renew so quickly that the acids don't have time to
browser window. dissolve it.
2. The lungs contain over 300,000 milhon capillaries (t'ny blood vessels) If they were '
4. Now, open the file next.html in laid end to end, they would stretch 2400km (1500 miles).
Notepad and create in' It
' a link
' 3. A mans testicles manufacture 10 million new sperm cells each day - enough that he
,ould repopulate the entire planet in only 6 monthsl
using the <a> tag to link it to the
' ' ' Ckk hetr to \icw more amazing t'acrs about hmar. bod-.' '
first.html. Save the page,view It in ,'
the browser and testthe link.
)' Output of first .html document
.—
Q)" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
r" 4
Advanced HTML I
LINKINGWEB PAGES OF DIFFERENTWEB SITES

YVe know that the web pages of a web site are stored on a same web server. However it is possible that
tWQ different web sites (and the web pages that constitute these web sites) may be stored on different
web servers.The links between web pages of two different web sites are said to be external when they
are stored on different web servers.External links requires the Full URL orAbsolute path-names of the
web pages to which we want to link them (eg, http://www.nature.com). Let us learn how to create
different types of External links.
The syntax of using the <a> tag for creating a link to a web page on a different web site is as follows:
Syntax: <a href="complete URL of the web page">Linking text</a>

Steps to create Hyperlinks to web pages belonging to different websites
You can include hyperlinks to those web pages that belong to a different web site by using the steps as
given below:
I. Open a new Notepad file and type in the code as shown below. Specif)' the complete URL of the web page to which
you want to link to,with the href attribute as <a href= "http://www.pitara.com/"> followed by the linking text
CIickto read some Nice Stories.Putthe closing </a> tagatthe end.
k'e E& Kmat Yen Heb
<HTH1>
2. Save the HTML document by an appropriate
<HEAD> name such as externallinkhtml by using the Save
<TITLE> Use of <a> tag to create link to a web page
of a different web siteu'TITLE> u'HEAD> As command.
<B0DY>
<font face="Xistra1" size=6 color="red">
<h1>This page shows you an example code to create an
external link<h1> 3. View the HTML document created above in
</font>
<center><img sTc="happy.jpg"></=nter> the web browser. The linking text will be
<font farr="enmc" "nn" nr" "i"m' displayed as shown here. Click the link. It will
<center:<a href="http://www.pitara.com/"> Click to
read some Nice 5torles</a></center> open the linked web page,i.e.,www.pitara.com,
</font>
UB0DY>
in the browser window.
UHTKL>
'd CU ::3 a: R " i: Poqc - rock - "
m
pr"$ d Fw rp Pt
J m; " "
Tla //4' '4w' r" ~/L cah Lo ~u «tu~t m
I Xjr· J
mpstom ~ r.
, b The
"·P,jAll-New
3G ',',' F· ()"i/ " 'L!mlEL9
,
E! k Z' #d ffl 4h a¶ ! 1
' "TT ,'3i3. " E," """ ' ' " ' " " S'
" · ,::,,,. ""' ;e%hli':: 27 "===4 " , .,'9 C-|NP·- m r

:y ""u
',.
°U>y,,r
' ' , .?. , ". 0 · ,,:
y' NthActMton
Wd ,W Kncwr' to Eoad :ome Nice
, t
,,S,N ; i S, 1[XFh ·
j% '07 :S\:' ; - ".
% S.E. Sekncr for Kids ' (km " m C~ "
·'· d . - ;r' m·., I J t
' Y~ iN ,,Uy µ n «'.¥. i
T;e a:;c= w:b page wwwp"tara.com/ will open Click this link
REMEMPER j"j" ,,'
Here, "http://www.pitara.com/" is actually "http://www.pitara.com/index.)tm". Index.htm is y
ckfault the Home page of every website and the browser automatically searches for it and loads it.
Qr `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
,,,,I "¶
F%tr.,k.,0
(Jsing the Target Attribute

After linking two web Pages,when we click on the link on a web page to open another |lnked
. web P%e
it, by default, opens in the same tab or window. To overcome this problem, we can use the target
attribute with theAnchor tag (<a>).Hence,the Target attribute of <a> tag allows us to open the |inked
web page in a new tab or window of the browser. The syntax for using the target attribute is as fo||ows:
Syntax: <a href="complete URL of the web page" target="_blank">Linking text</a>

Steps to use the Target attribute
I- Open a new file in Notepad and type the code as shown below in it. Use theTarget attribute as shown with the <a>
tag.
2. Save the file using the SaveAs command and view the page in the web browser.
3. Click on the link to open the linked web page in the new tab/window of the browser.
T·'grt orimm. Nm
Erie Em Fq¢p·¶&t ytcw Wp
E'hwl><head>
TITLE>USC of TARGET artribute of <a> tag</TITLE></HEAD>
:·booy bqco7or-"or"ange" rexµ"b1ue">
'<H2><p><forit facej rirannic bo7d" colom"red"mbout ,vavdccp
'pub)icatiorl$</fontpr/p><r2>
<P><font face="1ucida Cd ligraphy" sfzc="3">
Navdeep publica[ion5, under the Pr%il:f?r:hiP of mIs Gur D?$ Kapur
and Sons Pvt. Ltd., 75 a premier pit n house speciatizing in
brnngir' out
·pproachg' and innovative educariona7
'student-cent·rcd' material based on a 'holisric
lcarning.</font></p><BR>
·fonr face-"comic sdns ms' 57ze="3">
<cenrer>
Mavdeep ~cahons. un&r the yrop"ietcm'Arp of Ml: Gur Du
·a hret~ Xayur mufSons Pvt LIL, u a fio·u" '.p""u'&m0
targer="_b1ank">c)ick here to visit the Navdeep Publicarions m b'mwmty out nuurvatrve educat mat~6asedcm a TuCStiC
website</a> kru&m-c eMEred"Carmmg.
·/centel>
</font></p></b></uj>
·/BOOY></HTML»{
Chck t:il'!·!' w.tutme w·bc:-·
0 I Com~| Prmrcmd Mode; ON (g " QL 103% -""
Use of Target attribute of the <a> tag Click this link to open the linked web page in a new tab
I P
r '
'" 'j"AcTIvITY Creating external links '"
Write down the HTML source code to generate the hyperlinks to the home page of the following
websites and use the mentioned text for the hyperlinks.
Websites Textforhyperlink
a. ht1r://www.google.co.in/ Effective search
, ' b. http://in.yahoo.com/ Fast search
c. http://dsc.discovery.com/ Discover the globe
d. http://www.nationalgeographic.co.in/ Explore your world
Creating Hyperlinks to an E-mail Box (Mailto link)

Not every link on a webpage leads you to another webpage. Some links are E-mail links (also ca||ed
Mailto links), which when clicked upon will open the 'default mail program' on the computer of the
'user' and the E-mail address mentioned in the HyPeriink will be automatically filled in the To text box of
the Mai/composing window. The syntax for creating an email link is as follows:
Syntax: <a href="mailto:emai1 address">Text for email 1inl<</a>

4ab"
4
Advanced HTML I
Step· 'o '"ea'· mailto link

I. Open a Notepad file. YYrite the code as shown below.VVrite the <a> tag to create an email link as <a href= "mail
to:info@navdeePublications.com">To send us message click here</a>
2, Save the file using the SaveAs command.Give it a name and then open it in the web browsek
n,
=: ~ ": """2""'--·---~n
" "" "" 4 ' Q C*
of cr7 t»q Lo a~LA Rh 1&nkc"TKLEr c'F1UD> m
TC·· r·s' 'L~ 7~· cAj4t k
,KGP C Lm m :"' ~L" ' CB' 0~"
._=Z"J · ·
Tq4 emapi0 qcUC to crmce mu 1= UA.Ab J ,
·rc·'mb )pq" bmqhc"QU0 ~

. t.' " · .
c4 hrel tom To s d
click bmre<^ 7cpmn¢oT7 en u Res m g Ilk
A
,1IQQC 7
,rHX)Y·
,,KML'
\
.
Tp_C d u
- ST-_._" here
coge to create mailto link Click ihe link

The Email program opens
3. The email link will appear in the browser window as shown here.Clicking this will open the default email program of
the user's computer to let you type and send a message.
r y . Summing Up >
0 ou can add images to a Webpage either as: Background Image, using the <BODY> Tag and
Foreground Image, using the <IMG> Tag.
· To display an image in the foreground on a Webpage, the MG tag with SRC attribute is used.
· To set an image as the background in a webpage, the <Body Background="picture name"> is used.
0 The ALT attribute specifies alternative text the browser may showif the image display is notpossible or
disabled by the user.
· The <tab1e> tag can be used for iiiSerting tables on the web pages with the help of the <th> <tr> and
<td> tags.
0 COLSPAN is an attribute of the <TH> and the <TD> tags. Itis used whenwe wantto have a particular
table cell span or cross over more than one column.
0 The ROWSPAN attribute of the TABLE element is used to stretch a column vertically across two or
more rows of a table.
0 Hyperlinks are the text strings or images on a Webpage which when clicked take a visitor to the linked
web page or section.
0 Hyperlinks can be classified into three types on the basis of the navigation they provide. These are:
Internal links, Locallinks and Externallinks.
0 Internallinks are links to differentsections in a Webpage.
0 Internallinks orBookmarks are created usingNAME and HREF attributes of the <A> tag.
0 Local links are links to different Wepages stored on the same Web Server. You need to specify the .html
file to which you wantto linkto.
0 External links are links to Web sites or Web pages stored on other Web servers. The absolute address of
the Webpage needs to be specified in the HREF attribute for creating a linkto an externalwebpage.
0 The mailto links provide access to the E-mail address mentioned through the default mail program on
\K the computer. " J
(a" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
Fastrack- 1q
S "
' '-: SOLVED MCQs

1· Which of these tags will add animage in the background of a web page?
a. · <body bgcolor="Green"> b. <body background="flowers.jpg">
c. <img src="f1owers.jpg"> d. None of these.
2. What are the <a> and </a> tags used for?
a. Auciio-voiced text b. Addinglinks to the web page
c. Aligning text d. Adding images to a page
3. Which format usually works best for photos?
.jpg b. .html
c. .gif
d. .png
4. What tag is used to add rows to tables?
"· "th" b. <td>
c. <tr> d, <tab1e>
5. What will increasing the cellpadding value do?
a. Increase the distance between the cell and the content.
b. Increase the space between cells.
c. Increase the softness of your site.
d. Decrease the size of the cell.
6. Which has higherpriority, cell settings or table settings?
a. Table settings b.
Cell settings
c. Neither d.
Both have the same priority
7. The Altattribute of the <img> tagis used for:
a. Displaying the images together.
b. Displaying no images.
c. Displaying an image within a table.
d. Displaying an alternate text in case the image is not found.
8. colspan=n can be Uded to on1ywhich tag?
a. <tab1e> b. <td>
C. <[r>
d. All of these
g. Whatis the correct HTML command for creating a hyperlink?
a. <a name="htiP://www.qualitypointtech.com">Quahtypoint Techno1ogies</a>
b. <a href="httP://www.qualitypoinuech.com">Qualitypoint Technologies</a>
c. <a>http://wwwqualitypointtech.com</a>
d. <a ur1="httP://www.qualityPointtech.com">Qualitypoint Techno1ogies</a>
10. Which of the following is not an attribute of the <table> tag?
a. align
b. iiref
c. border
d. width
*.
0
r""
Adwlnced HTML I
11, The emaillinks are also known as:

a, mailto links
b, internal links
c. external links 0
d. local links
12, VVhich attribute is used to create an anchorpointin the HTML document?
a. name b, href
c, mailto d. None of these
13, \Nhyshould you add alternative textto yourimages?
a. In case the user wishes to load a different picture.
b. So the user can save the image using the text as a name.
c, So the user can get an idea of what the image is before itloads.
d. None of these.
14. Whatisthe full form ofjpeg?
a. Jointphotocopy erasergroup. b. Jointphotographic experts group.
c. Jointpathnames export group. d. None of these.
15. Which tagis used to create the header cells in a table?
a. <table> b. <td>
c. "th" d. <tr>
Answers: I) b 2) b 3) a 4) c 5) a 6) b 7) d 8) b 9) b IQ) b
1l)a 12) a 13) c 14) b IS) c
&$olved QUESTIONS
Q.1. What doesIMG and SRC mean?

Ans. IMGis the image tag and SRC isits attribute to specifythename of the source image file.
Q.2. How can textbe displayed in place of an image forusers whose browsers do not support images?
Ans. The ALT attribute should be used with the text value to display text in place of the image for users
whose browsers do not supportimages.
Q.3. Name thetagthathelpsyouto create hyperlinks.
Ans. <a> tag
Q.4. Write the HTML code to setthe image "Pen.jpg" storedin the "MyPictures" folderin C:\as the
background of yourwebpage.
Ans. <bodybackground = "C:\MyPictures\Pen.jpg">
Q.5. What are the differentfileformats inwhichimagefiles canbe saved?
Ans. There are many file formats such as .GIF (Graphical Interchange Format), .JPEG (Joint
Photographic Experts Group), .BMP (Bitmap images), .TIFF (Tagged Image File Format), .PNG
(Portable Network Graphics), etc. in which image fies can be saved.
ab" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
V
7
Fastrack- 10
Q.6. Howls the NAME attribute different ffom the HREF attribute used with the <a> tag?
Ans. The NAME attribute is used to specify the word which will serve as the Anchor and the HREF '
attribute directs the Browserto that word in the We@agc.
Q.7. Write the HTML code to create the adjacent table: Column I Column II
Ans. <tab1e> Customer ID Customer Name
<tr>
"th> Columnl</th>
<th> Column II </th>
</tr>
<tr>
<td> CustomerID </td>
<td> Customer Name </td>
</tr>
</tab1e>
Q.8. State True andFalse:

a. No value is specified with the ALT attribute of the <IN1G> tag.
b. The ROWSPAN attribute with the <TABLE > tag is used to merge more than one cell row.
wise.
c. Align and Valign are the attributes used with the <TD> tag to set the alignment of the data
in a table.
d. BORDER is an attribute of the <A> tag.
e. The Target attribute with the <A> tag is used to open a link in a new window.
Ans. a. False b. True c. True d. False e. True
Q.9. Which of the following is an attribute of the <Table> tag?

a. SRC b. LINK
C. CELLPADDING d. BOLD
Ans. CELLPADDING
Q.10. Whatis the correctsyntax inHTML for creating alink on awebpage?

a. <LINKSRC= "abc.htni1"> b. <BODYLINK = "abc.htm1">
c. "A SRC = "abc.htm1" > d. <AHREF = "abc.htm1">
Ans. "A HREF = "abc.htm1">
Q.11. Choose the correctHTNIL code to create an emaillink?

a. <AHREF = "xx@yy.com"></A>
b. <AHREF = "mailto:xx@yy.com"></A>
C. <MAIL>xx@yy.com</MAIL>
d. <AMAILHREF = "xx@yy.com"></A>
Ans. "A HREF = "mailto:xx@yy.com"></A>
Qr vÝÊ*ÀÊ*Ê `ÌÀÊ
' =EXERCISE TIME
I Multiple Choice Questions(MCQs):
1. Theuse of <td> and </td> addwhatto yourtables?
0 a. columns b. rows
c. steps d. None of these
2. Which attribute do you use to change the size of an image in HTML?
a. pliers b. height and width
c. bigger and smaller d. All of these
3. Which tag will you use to create hyperlinks on a web page?
a. <img> b. <a>
c. <tab1e> d. "hyperlink"
4. To add rows to your tables which tag do you use?
a. <td> and </td> b. <cr> and </cr>
c. <tr> and </tr> d. None of these
5. Choose the correct tag to left-align the content inside a table cell.
a. <td va1ign="left"> b. <td1eft"
c. "td align="left"" d. <tdleftalign"
6. How do you add a link which will allow the visitorto send an email from yourpage?
a. Add an image of an envelope b. Add <a href="sendmailtoyouraddress">
c. Add <a href="mailto:youremaUaddress"> d. None of these
' 7. Which property tells how many rows a cell should span?
a. colspan=n b. Both rowspan=n and colspan=n

c. rowspan=n d. None of these
8. Which attribute of the <img> tag will you use to display an alternate text in case the user's
browser does notsupport the image?
a. height
. b. hspace
d. width
c. alt
9. Which of these tags are all <table> tags?
a. <thead><body><tr> b. "table><tr><td>
d. <table><tr><tt>
c. <table><head><tfoot> .
10. Which of the followingis usedto give non-breakingspaces?
b. href
a. alt
d. $nbsp
c. &nbsp
ab"
' V
""4
Fm'ack- 1q
II Objective Type Questions:
I. Fillintheblanks.
a. The .
.command will setthe image COMPUTER.JPG to coverthe background
of the webpage.
b. The tagis used to display animage in a Webpage.
. c. <IMG SRC= "Happy.jpg" ALIGN = LEFT> will make the text wrap to the
side of the image.
d. "A HREF= " "> click here to go to the next page </A> will make the
enclosed text, a hyperlinkto www.yahoo.com.
e. To display a message when a userpoints to an image, the attribute is used,
f. The and attributes are used to define the size of an image,
g. The pair of tags used for making a hyperlink are the andthe
h. The . and
will display "My Search Engine" as the hypertext
when clicked upon, will open the www.google.com website.
i. The attribute of the <table> tag is used to specify the alignment of the table
on the web page.
j. The hyperlinks are used to create e-maillinks.
k. The attribute of the <TD> tag specifies the span of a column.
2. Write 'T' forTrue and 'F' forFalse inthe
a. You cannot use images as the background of the webpage.
b. You can use the ALT attribute to display the message when you point to an image
used as ahyperlink.
c. "SRC IMG = "mad.jpg"> will place the image named mad.jpg at the place where
the taghas been mentioned. a
d. <A HREF = "www.coolsig.com"><IMG SRC = "toon.jpg" BORDER = 2></A>

will import theimage toon.jpgfrom the site coolsig.com.
e. Internallinks are the links with otherwebsites onthe same Web server. a
f. The text in the NAME and the HREF attributes is case insensitive. a
g. <A> and </A> are calledAnchortags. a
h. Using Internal linking a user can jump from one point to another, within the same
Webpage. [J
Qr `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
r"
Advanced HTML I
III Shortanswertype questions:

I. Name some different types of image formats available for storing the images in files.
2. Whatis the use of the Background attribute in the <body> tag?
3. Whatwill "IMG SRC="BAD.jPG"> do?
4. Whatdoesthe WIDTH attribute specifywhenusedwith the IMG tag?
5, Whatdoesthe HEIGHT attribute specifj'whenusedwiththe IMGtag?
6. Write down the HTML code to make MY PAGE, a hyperlink, which when clicked will open the
webpage www.mypage.htm.
7. Whatis theuse of the SRC attribute?
8. Whatwillthetag <IMG SRC="0017jPG"WIDTH=400HEIGHT=300> do?
9. What is the use of <IMG SRC= "mad.jpg"ALIGN = "LEFT"> ?
10. Whatis theuse of <IMG SRC= "mad.jpg" ALIGN= "RIGHT"> ?
11. What is the difference between the BGCOLOR and the BACKGROUND attributes mentioned
with the "BODY> tag?
12. Write theuse of theALT attribute with the <IMG> tag.
13. Which attribute allows to link an E-mail addressto a Webpage?
14. Whatare Hyperlinks? Whatistheiruse?
15. How many types of Webpage elements can be used to serve as Hyperlinks? Give examples of
creating hyperlinks using each type of element.
16. What is the use of the Named Anchors?
17. Ifthe COLSPAN attribute in a <TD> tag has a value 3, then what type of data cellwillbe created
in the table?
18. If the ROWSPAN attribute in a <TD> tag has a value 2, then what type of data cell will be
created in the table?
19. Which attribute of the <A> tagis usedto open alink in anewwindow?
20. Whatis the use of the anchortags?

21. Whatis the use of the HREF attribute?
22. What doesthe NAME attribute specifj'?
23. What are Internal links? How are theydifferent frorr! External links?
24. Whatis the differencebetweenthe following:
a. CELLPADDINGand CELLSPACING
b. COLSpANandROWSPANattributes
q" `Ìi`ÊÜÌÊÌiÊìÊÛiÀÃÊvÊ
Fastrack - 10
25. Write the HTML coding to create the following table in a web page
Workshop on Flash anirnation

(10 - 10:30 a.m.)
Day 1 Workshop on photoshop
, to(12
26. Write the HTML code - 12:30
provide pm.)
a link _
to the Email-ll) inf)@navdeepublications.com through the
hypertext "mail to us".

27. Write the HTML tags to add an image "CRV001.JPG" in atable cell, sized
. to 20 pixels
. helghtand
.
30 pixels width with alternate text "computer monitor".
28. Write the HTML tag to create an external link to wwwiechtarget.com through the hypertext "get
details of laserprinter".
IV Long answertype questions:

1. Explain how an image can be added in the Foreground or the Background of a Webpage. Give the
syntax and examples of the same.
2. How can you change the height and width of an image?
3. Whatis the use of the <Table> tag? Writeits attributes.
4. Write down the HTML code to create the following table:
Name Hindi English Maths

Aman 60 79 58
Khushboo 68 72 52
Sony 52 86 64
Timsee 84 64 61
5. Whatis the use of the Rowspan and the Colspan attributes?

6. Write the HTML code to demonstrate the use of href andname the attributes of the <A> tag.
7. Describe howyou can use an image as a hyperlink in a Webpage?
8. Describe the mailto links with an example.
&lab EXERCISES
Exercise I: Creatinga website ontravel andtourism.
Suppose you are Rajesh studying in class X. Your class teacher has asked you to prepare a website
highlighting some important tourist destinations of India. How will you create such a website using
HTML?
Note: To create a website you need to create web pages of the website separately and then link them with
each other using the linking tags.
Q" /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê

CH 4 Advanced HTML

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

CH 4 Advanced HTML

Uploaded by

Copyright:

Available Formats

Introduction

Image File Formats

Adding Images toWeb Pages

Adding an Image in the Background

<h1>Some mrals to Remember</h1>

<basefom facej'camic sans ms" color-"red" sjzem5>

<p>-"An ounce of prevention is worth a pound of cure"-</p>

<p>-"a man Is known by che company he keeps"-</p>

HTML code in the Notepad window

Adding an Image in the Foreground

<p><fom facew"M¶srrdr co1or-"red">-"m ounce of prevention 'Is worrh a

<p><fom face·"a1bertus" s¶ze-2 co)orb"navy">-"M15forrune rem rhe sfncer¶ry of

<p>-"precaur'lons are use7ess after rhe Crfs1s"-</p>

Changing the Width and Height of the Image

·1mg src·"frrflarab1e,boar.jpg" hefghr.300 wldrhM0Q>

Using the Alt Attribute

<hi>m1i- TPie festival of Colours</h1>

<font face="com'ic sans ms" s'ize=3>

Alt attribute of <img> tag

a iel-k·dm:ce:trbut:t:sp .. i @ @ " u" O'Qds - "

Alternate text in lieu of the image

Qr 1CU$edhsp«bwrbAeto$p... ; ' h " Ej Q »

If you do not remove the picture from the location

a" vÝÊ*ÀÊ* Ê `ÌÀÊ

CREATINGTABLES IN AWEB PAGE

Lower floors are made of red sand

Located in New Delhi.Made up of pink

Syntax: <Table> .......................................................................................................................</Table>

Attribute Use Example

cellpadding Adds space around cell contents. "table cellpadding ="20""

bordercolor Adds a colour to the border of a row or a cell. <bordercolor="nayy">

bgcolor Adds a colour to the background of a row or cell. <bgcolor="yellow">

The <tr> , <th>, and <td>Tags

in Test matches and 49 in 0oIs</td><td>Great cricketer</td> . Cre8

The Attributes of <td> and <th> Tags

Attribute Use Example

Understanding ROWSPAN and COLSPAN Attributes

HTML code in Notepad

rowspan=3 attribute "" " " Mdgo" ©ava""""

Output in aWeb Browser

It is used when we want to have a particular tab|e

7tr>ctd mlspan"4> TMs cell spans 4 columns c/td><ptr)

Effect of the use of colspan attribute

<TR> <TH COLSFAN=2> LEFT"/TH> <TH COLSPAN=2" RIGHT "/TH" "/TR"

Understanding Cellpadding and Cellspacing in a Table

Hyper|inks work as references to otherWeb pages orWeb sites.Without Hyperlinks,the purpose of

The anchor tag

Creating INTERNAL LINKS

To create an internal link:

<a href="#Anchor name">Click to go to the named point</a>"Creates the r"eference Pointfo,

':' Y4 ACTIVITY Creating the internal hyperlink

HTML code to create a web page

<a hre= "#Pointl">Click to go to the top of the page</a>

HTML code to create a web page with an internal hyperlink

4. Save the HTML document using the

5. Test the link by going to the bottom

a" vÝÊ*ÀÊ* Ê `ÌÀÊ

. . . . ACTIVITY Creating local links using <a> tag

I. Create the following two HTML documents in Notepad.

3. Save the document first.html by the i.r ca eLoa,n¢oue&.LQcd^ ·pw · j'ciok·

LINKINGWEB PAGES OF DIFFERENTWEB SITES

Syntax: <a href="complete URL of the web page">Linking text</a>

" · ,::,,,. ""' ;e%hli':: 27 "===4 " , .,'9 C-|NP·- m r

a" vÝÊÀÊÊ `ÌÀÊ

a" vÝÊÀÊÊ `ÌÀÊ