tag for images and the tag for hyperlinks. It explains attributes related to images, such as src, height, width, and alt text, as well as the distinction between internal and external hyperlinks. Additionally, it covers the structure of HTML tables, including the use of , , and tags, along with formatting options and merging cells with colspan and rowspan attributes."> tag for images and the tag for hyperlinks. It explains attributes related to images, such as src, height, width, and alt text, as well as the distinction between internal and external hyperlinks. Additionally, it covers the structure of HTML tables, including the use of , , and tags, along with formatting options and merging cells with colspan and rowspan attributes.">
Address: [go: up one dir, main page]
Scribd
Upload
2 views9 pages

Image, Hype

The document provides an overview of HTML elements, specifically focusing on the <IMG> tag for images and the <A> tag for hyperlinks. It explains attributes related to images, such as src, height, width, and alt text, as well as the distinction between internal and external hyperlinks. Additionally, it covers the structure of HTML tables, including the use of <TR>, <TD>, and <TH> tags, along with formatting options and merging cells with colspan and rowspan attributes.

Uploaded by

satvinderdhiman31
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
2 views9 pages

Image, Hype

The document provides an overview of HTML elements, specifically focusing on the <IMG> tag for images and the <A> tag for hyperlinks. It explains attributes related to images, such as src, height, width, and alt text, as well as the distinction between internal and external hyperlinks. Additionally, it covers the structure of HTML tables, including the use of <TR>, <TD>, and <TH> tags, along with formatting options and merging cells with colspan and rowspan attributes.

Uploaded by

satvinderdhiman31
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
You are on page 1/ 9

Now, let us see the HTML code of this web page.

htn
<head
Notice line 7. <title Images /title
</head
<0MG src="aerialview.jpg" height-"650" <body
width="1200"> H1 aligna"center"-The Perfect Aerial View-/H
IMG srcR"aerialview.jpg" heighta"650" widthe1200".
/body
IMG Element /htm

IMGelement is represented by <IMG> tag. IMGis an empty element. It inserts the image at the poirt
where it is mentioned in the web page. One <IMG> tag inserts one image. The src attribute is given the
path and name of the image tobe displayed.
Notice how src is given the image name aerialview.jpg which is stored in the sarne folder as the HTML
file hence no path is given.

Attributes of IMG Element


ATTRIBUTE EXPLANATION VALUES
Src Path and name of the image to be displayed.
Height Height of the image. Numbers in pixels or percentage of
screen height.
Width Width of the image. Numbers in pixels or percentage of
Screen width.
Alt Some relevant text. If image is not displayed| E.g. Image not available.
due to Some reason, thenthis is displayed in
place of the image. This text is also displayed
on hovering mouse pointer over the image.
HSpace Adds some padding to the left of the image.Numbers in pixels or percentage of
screen height.
VSpace Adds some padding to the top of the image. Screen
Numbers in pixels or percentage of
width.
Border Sets a border of specified thickness around Number
the image.
Align Arranges the text and image with respect to Left, right, top, bottom, middle.
each other. Default is inline.

NOTE Pause N Think

Some common image file types are If we do not mention the height and width of the
jPg, png, gif, .bmp, .ico and tiff, etc. I image then what size of the image would be displayed
by the browser?
Elephanh are the largeet Lard mammals on eth and hate dstinctly masite bodies. Large ears, and long trunks They use her trunks to prck up objects, rumpet v arnungs greer od

elephann, ar ukt up warer for drnnking or barhung, among ofher uses Both male and female Afscan elephants
uually maller becasae of meer and tear
grow rusks and each indrvidual can either be lef. o nghtukd, and the one hey oe more m
extended teeth can be used ro protect the elepherfs trunk, lit and moe ob,ects, gather fod
Elephant ruska sere many purposes These

hñ berk trom trees The can also be uned for defense Dunng tmes of drought, elephanth even use their tuska to dig holes to fund waier underground

Interactive Worksheet
Go to https://playground.edusoft.co.in/worksheets-html-images-links-tables/ or scan
and test yourself with this quiz on Worksheet-1

Linking the web pages


We have learnt that a website is a collection of web pages linked with each other. How
are these pages linked? The technique of linking one web page with other web pages is
called hyperlinking. Hyperlink is a part of web page content which user can click on to
jumpto the linked page. Such part of content in a web page which is linked to another
web page is called hyperlink. Hyperlink could be text or an image.
The significance of hyperlinks is that we do not need to keep allthe content in one
web page. We can
divide our web content in several separate web pages which can be interlinked
together in a planned
way to help user navigate through them.

Types of Hyperlinks
Dependingon the location of the linked content, hyperlinks are of 2 types:
External hyperlink: The linked page is separate from the page that contains the hyperlink
Internal hyperlink: The linked content and the hyperlink are located in the same web page.
External Hyperlink
When a part of the content of aweb page is hyperlinked tO point to a web page or any
resource at a
web address then such hyperlink is called external hyperlink.
Let us learn how to create an external hyperlink. Both types of hyperlinks are created using ANCHOR
element denoted by <A></A>.
Consider the HTML code and its output given here.
1 <html>
<head>
3
title>HYPERLINKS</title>
</head>
55 <body>
6 <A href="lesson1.html">Go to Lesson 1</A> otoLesson 1
7 </body>
s </html>
Notice line6 in the code. Anchor element encloses the text Go toLesson 1. This text is made a hyperlink
to another web page lesson1.html. How? See the attribute href (hypertext reference). Href is taking the
web address (URL) of the web page to be linked. So, what will happen if user clicks on Go to Lesson 1?
Simple! Browser will display the web page lesson1.html.

APPLY
index.html, create
Create 3 html files named index.html, chapter1.html and chapter2.html. In
and chapter2.html to
hyperlinks to chapter1.html and chapter2.html. Then, link chapter1.html
index.html.

Internal Hyperlink
the content of a web page is hyperlinked to another part in the same web page then
When a part of
such hyperlink is called internal hyperlink.
here.
Consider the HTML Code and its output given
5 <body>
6 <H1>LESSON 1</H1>
7 <A href#topic1">Go to Topic 1</A>
8 <hr
<|MG srce'aerialview.jpg'"'>
10
|11 <Aname="topic1 ">TOPICONE</A> <BR>
12 Topic 1Is talking about....
13 </body>
59
it vertee
that <IMG>
writeclicking Let
same target
attribute browser an Below, in table.
made arranged
the the thatUse a
creating
an but
the Is
of
VALUES top.so [Hint:
name way
Here, address 1
tell lopiC thefactsanimal.
Any
relevant
name
in
symmetrical
to or at the
tags. animals help
web signto address
Go to that
<A></A> TR
about.. a # images
Not by text of and
Web 3
talking preceded
the
any facts a
in TD
ONE
TOPIC it? the
is in of the dataTH,
ITopic
enclosedis way, resource
resource link
pictures
Same
within
page What TABLE,
displayed displaying
is This Then, Format bers
hrefvaluecontent. linked
0s target the elements
ONEas animals.
attribute
topic1. The EXPLANATION display be of given
TOPIC 11. some 1
TopicTOPIC the
internal should Tabular
way
table
ONE HIML,
to to these popular
textONE of lineof you to
learn?
#topic1
topic1 Elementreference
the wildelife.html
user the
value
in Go about In Consider
The TOPIC ONEidentifier of animal,in androws.
the ldentification
11. text TOPIC Internal
hyperlink: Data common
Anchor Hypertext facts
Notice target Target
reference
line an did Hyperlink
file any
horizontal
use.
the
LESSON
1 notice butwhat Target
name of <A></A>]
interesting
Presenting
text html
to
identify
7. of image very their
understa
linethelinkSo, Attributes
ATTRIBUTE APPLY
all,
ofFirst an a and
see webhyperlink. Create
to the within are
some lunmns
used Now,gIven a HrefName on Tables
not
60
FRUIT CALORIES PER 100 GM
TD
Banana 85 kcal TR

Apple 50 cal
|Avocado 160 kcal
TABLEJ
Watermelon 30 kcal
Orange 38 cal

Source: Healthwaymag.com
Fach HTML table has 2 basic components:
i. Table Row : Denoted by container element TR.(There are 5 TRs in the example.)
ii. Table Data : Each column in the table is denoted by element TD. (There are 2 TDs in the example.)
<HTML>
Now, let us understand the HTML code for asimple <HEAD> <TITLE>TABLES</TITLEx/HEAD>
table. H<BODY>
<H3>FRUT CALORIES PER 100 GM</H3>
5 feTABLE border
Notice table definition with <TABLE></TABLE> tags from <TR <TD>Bananas/T tD>as lkcak/t> <fTR>
<TR <TD>Apple</TD> <TD>50 al</T> TR>
line 5 to line 11. How many <TR></TR> do you see? Yes, B <TR <TD>Avocado</TD> <TDº160 kal</TD </TR>

5!.Each <TR> <TR> is constituting a table row. Enclosed 9


10
<TR>
<TR
<TD>WatermelonKTº TD>30 kcal</T
<TD>Orange</TD <TD>38 ak/TD>
{TR
<TR
within each <TR></TR> are two <TD></TD> which in 11 </TABLE>
12 s/BODY>
turn, contain the data. 13 </HTML>

This constitutes a symmetrical table of 5rows and 2 columns. Also, notice the border attribute
mentioned in the <TABLE> tag. This shows the borders around the table and each cell.

The Special<TH></TH> Table Heading


with
You can also use the first row to show the headings of table columns. This can be done
<TH></TH> tags. Text within <TH></TH> tags is displayedin bold and center aligned automatically. See
the example.
5 G<TABLE border> FRUIT ENERGY
6 <TR> <TH>FRUIT</TH> <TH>ENERGY</TH> </TR> 85 kcal
<TD>85 kcal</TD> <TR>
Banana
7 <TR> <TD>Banana</TD>
8 <TR> <TD>Apple</TD> <TD>50 cal</TD> </TR> Apple 50 cal
<TR> <TD>Avocado</TD> <TD>160 kcal</TD> </TR> ||Avocado |160kcal
10 <TR>
<TD>Watermelons/TD> <TD>30 kcal</TD> </TR |Watermelon 30 kcal
11 <TD>Orange</TD> <TD>38 cal</TD> </TR>
<TR> 38 cal
12 </TABLE> |Orange
Output
used. In output, the content
NOhce line 6 i.e. the first row of the table. Instead of TD, the element TH is
of TH is automatically in bold and center.
61
CRACKER
CODE
A.
Find the calorie values of per 100 grams of 2 more fruits and insert
one of therm before apple and
t

one in the end, after orange.

Formatting HTML Table


TABLES TR>
ATTRIBUTE EXPLANATION 4D> or
TH
Yes Yes Yes
Border Sets cell and table borders. Takes a number for
thickness.
Yes Yes Yes
BordercolorSets the colour of the border. Takes a colour value.
Yes No No
Background Sets an image in the table or cell background.
Takes URL of the image.
Yes No No
Cellspacing Sets space between the adjacent cells.
Takes a number.
Yes Yes Yes
Cellpadding Sets spacing between the content and cell border.
Takes a number.
Align Yes Yes Yes
Alignsthe table right, left or center.
Aligns cellcontents in TR or TD in right, left or center.
Height and Sets table, row or cell height and width in pixels or Yes Yes Yes
Width window percentage. Takes a number or percent value.

Acomplete example of formatted table


5 TABLE border=5 bordercolor="#3355dd" cellspacing=2 cellpadding=2 align="center width="30%">
6 TR bgcolor="aqua' <TH>FRUIT</TH> <TH>ENERGY</TH> </TR>
7 <TR> <TD>Banana</TD> <TD>85 kcal</TD> </TR>
<TR>
<TD>Apple</TD> <TD>50 cal</TD> /TR>
<TR> <TD>Avocado</TD> <TD>160 kcal</TD> </TR>
10 TR>
<TD>Watermelon</TD> <TD>30 kcal</TD> </TR>
11 <TR>
12 TD background="flowersjpg'">Orange/TD> <TD>38 cal</TD
|13 </TR>
14 STABLE>

FRUIT
ENERGY
Banana 85 kcal
Apple 50 cal
Avocado 160 kcal
Watermelon
30 kcal
Orange 38 cal

Output
Notice line 5 that contains the table attributes. Due to these, blue border of thickness 5 is set for
the table, table is center aligned, spans in 80% of browser window width and cellspacing as well as
cellpadding is 2 points.
In line 6, to make the first row look different, <TH> is given bgolor as
aqua.
In line 12, in first <TD> of last <TR>, image flowerjpg is set using background
attribute.
CODE
CRACKER
Try doing the following?
1. Center align the data in each cell.
2. Set flower.jpg as background image of entire table.
3. Set height of the table to 50% of the browser window.
4. Set font style of FRUIT and ENERGY to navy colour, arial family.

Merging Cells Using COLSPAN and ROWSPAN


Colspan and Rowspan are two very interesting attributes used with <TD> and <TH>.
Colspan :It merges the adjacent cells across the columns in a row.
Rowspan : It merges the adjacent cells across the rows in acolumn.

Let us understand them with an example. Consider the table given here. There are 3 columns and 8
rows in it: 1 top header row and7 rows for data.

Top header row TH is spanned across all3 columns. spanning across all 3 columns
Row 1 : Normal 3 cells.
Row 1 Row 1 Row 1
Row 2 :3 cells but first TDis spanned on 2rows. Row 2 Row 2
Row 3: Due to span of first TD of Row 2, there are only 2 Row 2
Row 3 Row 3
TDs in it.
Row 4
Row 4: Second TD spans across 2 columns and 2 rows. Row 4
Row 5
Row 5: Due to second TD of Row 4, there is just one cell in Row 6 Row 6
it.
Row 7 Row 6 Row 7
Row6: Second TD spans across 2 rows.
Row 7: Due to second TD of Row 6, there are only two TDs in it.
Remember

Shape of the table is usually kept symmetricalthat is why space for some
cells is eaten up by rowspan and colspan.
63
The code for this table is given
here.
<TABLE borderl cellspacing=0
7
<CAPTION-Demo of rowspan and colspan/CAPTION
<TR
<THcolspan=spanning across all 3columns/ TH </TR>
<TRbgcoBor="#adff2f"> <TD>Row 1</1D> <TD Row 1</TD> TD-Row 1</TD> /TR
<TRbgcolor="#ffd 700"> <TDfowspan=} Row2</TD> <TD- Row 2-/TO> TD-ROw 2/TD> </TRo
10 <TR bgcoBor="#fe68c"> <TD>Row 3</TD> TD-Row 3</TD </TR
11 TR bgcolor="#ffdead"> <TD-Row 4</TD> <TDrowspan=2 coispar=Row4</TD> </TR
12 <TR bgcolor="#ffa 500"> <TD>Row 5</TD> /TR
13 <TRbgcolor="#48dlcc"> <TD>Row 6</TD> <TDrowspan=Row 6-/T> <TDRow 6-/TD |TR
14 <TRbgcolor="#ffeAe1"> <TORow 7</TD> TD-Row 7</TD> </TR
15 </TABLE>

spanning across all3 columns


Notice:
Row I Row 1 Row I
Line 5 to 7 : Top row TH colspan=3, spans al| 3 columns. Row 2 Row 2
Row 2 Row 3
Line 7 to 9 :Row 2, first TD rowspan=2. Row 3
Line 9 to 11 :Row 4, second TD colspan=2, rowspan=2. Row4
Row 4
Row 5
Line 11 to 13 : Row 6, second TD rowspan=2.
Row 6 Row 6
HRow 6
Row 7 Row 7
Output
Table Caption
We can use container element CAPTION togive a caption to describe the table.
<CAPTION></CAPTION>
tags can be used anywhere inside <TABLE></TABLE> tags but usually we keep them at the
top. See the
example.

bKTABLE border=1 cellspacing=0>


<CAPTION>Demo of rowspan and colspan</CAPTION> Demo of rowspan and colspan
7 <TR> <THcolspan=3>spanning across all 3 columns</TH> spanning across all 3 columns
APPLY

Create the following HTML table. Use any other image on your
computer to save time.
OH! PENGUINS
Habitat: Southem Henisphere &Galapagos Islands
|Lifespan: 6- 25 Years
Size: I.3-3.7 ft
Weight: I - 35 kg

64
Row I Row I
Row2
Row 2
Row 3
|RowRowcOlnm2n
Row 4
HRow 4
|Row 3
ow 5
ow 6
OW 7
Row6 Row 6
Row 7
Output

cable. <CAPTION></CAPTION>
keep them at the top. See the

of
rowspan and colspan

You might also like