Advanced
| |
INTRODUCTION
HTML (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. Italso provides us tags
to insert tables in the web documents to present the text on them in a concise manner. One of the
most important features of HTML is that we can connect web pages with each other by using the
erlinks 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 we observe that besides text, web pages contain other components such as
images, illustrations, charts, maps, etc. Images, 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.
Ie &
v=:
‘Aweb page with images is self-explanatory,
‘A web page without images looks boring
looks attractive and inviting
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 ofa file on our computer or in a portable storage medium likea 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.in and flickr.com.
2. ClipArts:Collection of ready made images are available at stores in the form of ClipArts.
3. Scanned Pictures:If we have images — photograpks, drawings, ilustrations, etc. that we need to insert
in our web page,all we need to do is simply scan them and they are ready for use,
4. Self Created Images: Photographs and videos tzken from a digital camera or mobile phone can be
inserted on a web page.You can also create images ir Image Edin Programs such as Corel Photoshop etc.
meFastrack - 19
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 file. We can use any of these image
file formats as per our requirements. However, .JPEG (also .jpg) is the most suitable file format for
saving images for use on web pages.
ADDING IMAGES TO WEB 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
tag.
2. Teaddan image to the foreground we use the SRC attribute with the 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 ina 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 toa
Web page:The syntax for setting an image as the background in a webpage is given below.
Syntax:
Steps to set a picture as the background of a web page
1. Write the body tag with the background attribute. ‘Save the file using the Save As command and view
Assign tthe name and location of the image file that the page in the web browser.
youwant to setas the background ofthe web page. ~The image will be set as background of the web page.
Some Moras to Remember
coer
a prdat ee
sasetore facen‘cote sine ne" eolor'ree™ eta
funce of prevention {¢ worth sound of creo
ise—'a man trou by tht company he bese=
contsfecune ests the sincerity of frnde"=
Jo>-"Precamtons are useless after the crists"=«/>
om
HTML code in the Notepad window Page as viewed in the browser window
Give the location or path of the picture fle before its name in the HTML code. It
to store the picture fle in the same folder as the HTML document. Then you will penne to
give the location of the file. You can simply give its name with the background attribute.
ayr
|
‘Advanced HTML
Adding an Image in the Foreground
‘As you know, to set an image in the foreground on a web page we can use the tag with the ‘sre’
attribute. The URL or path of the image is specified with the sre attribute. Ifthe image file is kept in the
same folder as the HTML document, we need to give only the name of the file with the sre attribute.
Syntax:
steps to insert an image on the web page
1, Write the tag with the'src’ attribute. Specify 2. Save the Notepad file using the Save As command
the path of the image file with the'src’ attribute. and view the page in the web browser.
Lees ur laat ee
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 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
(height and width) mentioned.
Syntax:
Steps to set the size of the image to be displayed on the web page
|. Write the height, width attributes in the tag -2._ Save the Notepad fle using the Save/As command
and give them values in pixels as required. and iew the page in the web browser.
heres” ste elena wafertre tests i ster
Fev veecuarons ae eas tar che ees" Somme Moral to Remeetier
"nent of ptaon 1 woth ed of ct
HTML code in the Notepad window Page as seen in the browser window
Specify the height and width of the image in pixels with the respective attributes in the tag.
Specify the height and width such thatt does not distort the image.
@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 tagisas follows:
india 4s 2 land of rich cutcure and festivals are an, incegral part
ngs tan Gus Soe SEEING oian Ces iza gre
eeeces oT aSe Fecal ot soy and happiness. the Hindu Festival of
Jesters’ celebrates in mic Spring every year
Alt attribute of tag
ee ee
Holi- Te festival of Colours
India ind of rich estire end |G) i ea
Festal aren itgrelpor of
very nr if HOLE soe of
tt Sndin fv are ere ot
cedlebration ond joy. HOLE weane |
fennel of citfre elu The
fetal of jy ond apie, The
Hinds frtivl ofelr eaabrate ia mi fing every yer
2. Now go to the place where the image file is located. Cut
the image file from this location and paste it in another
folder.
3. Open the HTML file saved in the step I in your web
browser. The image will not be displayed this time
because you have removed it from the location specified
with the src attribute in step 2.Instead the text specified
with the alt tag willbe displayed.
TIP
If you do not remove the picture from the location
specified with the src attribute, the image will be displayed
despite the use of the alt attribute. The alternate text | iisimtw shane ws
becomes visible when the user or you) hovers the mouse | s=7m=sit souvent
.). pointer over the image fora little while. ‘stony None
ewe —_ (eee
a‘Advanced HTML 1
CREATING TABLES IN A Wes Pace
id . =
eran ree ate a ‘Organize data in the form of horizontal rows and vertical columns.The use
eae oe a bulky data making it easy to understand for visitors, When creating web
ae ee sof create cena cata in the form of tables. In fact tables have become the most commonly
used me eM feb page layouts as they give us additional control over layouts.
sea poner oa ee Each table is made up of a fixed number of rows and columns. The
= oN rane ere e interse tion of a row and a column is called a cell: We enter data in the cells,
(0 reader row which specifies what items should come in the columns below.
‘A Column [A header cl
‘ARow-b Monument’s Name Image Features and Location
- Lower floors are made of red sand
Adata—> 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 & Il.
In HTML, tables are created by using the
tag. The
tag is a container tag, therefore you
need to close it by using a closing tag
. Everything within a table is enclosed between these two
"tags" which are both required.
Syntax:
....
Theattributes of the
tag are listed in the table as given below:
Attribute Use Example
‘ Species the horizontal position of the table within te web page |
align window-The value of this attribute may be left,centeror right.
width Controls the width of the entire table.
‘Adds space between the cells. he spacing between cells is given |
cellspacing | in pixels.
cellpadding | Adds space around cell contents.
bottom in the cells.
Gives border toa able: The thickness ofthe border speciiedin |
border | pixels.
valign
‘Adds colour to the border ofa row or acell.
ground ofa row or cell.
Q@
bordercolor
bgcolor ‘Adds colour to the baclFastrack - 10
The
,
, and
Tags
‘The
tag itself is of no use unless the
,
tags are used to create other elements of
the table.
|. The
tag creates a new row in the table. The
is a container tag and needs to be closed with
the
tag.Alll the tags (
and
) that are used to create the data and header cells are
enclosed within the
...
tags.The syntax of using the
tag within the table tag is as follows:
2. The
tag is used within the
tag and creates a header cell of the table. |
tag and needs to be closed with the tag. It encloses the data that is there in a header cell. The
syntax of using the
tag within the < tr> tags is as follows:
‘Syntax:
Header cell data for the Istcolumn
Header cell data for the 2nd column
3. The
tag is also used within the
tag and creates a data cell of the table. It encloses the data
thatis to appear in a data cell.The syntax of using the
tag within the
tag is as follows:
also a container
Syntax:
Ist data cell value
2nd data cell value
Shr
Steps to create a table on a web page
‘Open a Notepad file. Write the code as shown 2. Save the file using the Save As command and view
below to createa table. the page in the web browser.
Gittbcreating 4 eblecrrm einen Using le tale, t,t ao Ud tgs to crc tlle
Sfont facee’wisteal” sizee6 colora*rea’s
‘heist’ he table, tr th and 4 fags to create a
fepsctable Boraer=
cersethonanec/tho
Sports /canec/the
Jaenarkse/thos/ts
Jecractssachin Tendulkar/tdoctéscrickete/tdoctdoS1. centuries
fin'Tese matches and 49" {n Oofse/tapctascreat cricketerc/td>
etrsctasSusht sanarc/edoctipurestiingc/tdsetdosi Tver medal at
She tondon olympics and sronze nesal at the e}ing
olympiese/tanctarcrent wrestlere/ta>
Use of
,
,
,
tags to create a table Table as seen in the web browser
Table data cells do not have to contain data. You can create
4
&enbsp;
. The code &enbsp; is an HTML special character peer
space. Use &enbsp; in place of data whenthe cell isto be empty.
a“advanced HTML I
The Attributes of
and
Tags
The
and
tags have two main attributes — rowspan and colspan. The following table lists what
these attributes do and how to use them in the
and
tags.
‘Attribute Use Example
This attribute allows us to extend a row |
rowspan vertically by a given number of cells (specified | will extend the current row down to
with it.) include the next three cells.
This attribute allows us to extend a column |
will extend the current column rightwards
horizontally by a given number of cells
(specified with i). toinclude the next three cells.
colspan
Understanding ROWSPAN and COLSPAN Attributes
Let us now understand in detail how the rowspan and colspan attributes work.
Rowspan
The ROWSPAN attribute of the TABLE tag is used to stretch a column vertically across two or more
rows of a table when coding HTML for Web 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
1. Openanew notepad file and write the following code init
cer
[fed rowspan=3>Fruits I like the MOST
td >Mango
Guavac/td>
Ger)
Watermelon
ip)
Cherries /td>
Blackberries
HTML code in Notepad
Save the file with .html extension and view it in the web browser.
foe aon
Fruits I like the MOST [Banana |Watermelon
[Cherries Blackberries
rowspan=3 attribute
in the
tag extends
the first row downwards
by 3 cells.
‘Output in a Web Browser
TIP
‘The use of the “rowspan=3” attribute with the
tag in the first row causes the first column to
expand vertically to expand downward and cover the adjoining two cells to make one big data
Qa
cell.Fastrack - 19
hen we want tO have a particular table
e colspan attribute within the
ed wi
tags vis used wher
Colspan
yntax for
Colspan is an attribute of the
cell span or cross over more t
or
tagisas follows:
Syntax:
and
han one column. The $)
ed colspan=no.of olumns?
the colspan attribute:
The following example code shows the use of
ib
(Use of colspan attribute in the code Effect of the use of colspan attribute
You can see examples of the COLSPAN attribute in the table above,
Inrow I,each cell isa heading cell (the textis centered) and it spans (Wo
LEFT
RIGHT
The second row of the above table was coded like this:
IN
OUT
IN
OUT
in row | and row 3.
columns. |t was coded as:
The third row of the above table was coded like this:
This cell spans 4 columns
The use of the colspan = 2 attribute with the
tags in the first row of the table causes each header
cell to expand rightwards by two columns ie,, 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
tag?
a. SRC b. LINK
d. BOLD
c. CELLPADDING
Ans. CELLPADDING
Q.10. Whatis the correct syntaxin HTML for creating alinkona webpage?
a, b.
c. 4.
Ans,
Q.11. Choose the correct HTML code to create an email link?
a,
b.
c. xx@yy.com
d.
Ans. oe
(4) EXERCISE TIME
~
1 Multiple Choice Questions (MCQs):
1. Theuse of
and
add what to your tables?
a. columns b. rows
6 c. steps d. None of these
Which attribute do you use to change the size of an image in HTML?
liens
a. pi b. heightand width
c. biggerand smaller d. Allof these
3. Which tag will you use to create hyperlinks on a web page?
a. b.
Sanco 4.
4, Toaddrowsto yourtables which tagdo you use?
a,
tagis used to specify the alignment of thetable
on the web page.
The____ hyperlinks are used to create e-mail inks.
k. The attribute of the
tag specifies the span of acolumn.
Pom mp
2. Write “T’ for True and ‘F’ forFalsein the [_].
a. Youcannot use images s the background of the webpage. oO
b. You can use the ALT attribute to display the message when you point to an image
used asa hyperlink.
will place the image named mad,jpg at the place where
the tag has been mentioned.
d.
will import the image toon .jpg from the site coolsig.com.
Internal links are the links with other websites on the same Web server.
f Thetextinthe NAME and the HREF attributes is case insensitive. oO
g. andarecalled Anchor tags. oO
h. Using Internal linking a user can jump from one point to another, within the same oO
Webpage.
@‘Advanced HTML I
I Short answertype questions:
ty
2,
3
4.
5,
6.
15.
16.
i,
20.
21
22.
23.
24,
Name some different types of image formats available for storing the images in files.
Whatis the use of the Background attribute in the tag?
What will do?
‘What does the WIDTH attribute specify when used with the IMG tag?
‘What does the HEIGHT attribute specify when used withthe IMG tag?
Write down the HTML code to make MY PAGE, a hyperlink, which when clicked will open the
webpage www.mypage. htm.
‘Whatis the use of the SRCattribute?
What will the tag ?
. What is the difference between the BGCOLOR and the BACKGROUND attributes mentioned
with the tag?
Write theuse of the ALT attribute with the tag.
Which attribute allows to linkan E-mail address to a Webpage?
‘What are Hyperlinks? What is theiruse?
How many types of Webpage elements can be used to serve as Hyperlinks? Give examples of
creating hyperlinks usingeach type of element.
‘Whatis the use of the Named Anchors?
If the COLSPAN attribute ina
tag has a value 3, then what type of data cell will be created
inthe table?
If the ROWSPAN attribute in a