Mwyes LNKS: IN The Anohor A To

IMAGES S, FRAMES IN HTMLL5
C H A P T E R
IN THIS The Anohor A To

ARNINNG
mwyes Lnks
G8S nd Links
e r t gm a g o s
h eG s Tag
Links as Buttons Franes, der&tme
L t i gW e b P a
ages
esides that, yo9
uau learntaboutvarioustypes of listtags u6d in HTMI and their properties,
class you
l
This chapter explains some more essertial elemerds f
an
jous
a t e
p r e v i
oresent data
present in a tabular fornat,
how to
M L p a g e
died
I k em a g e
Images,
Anchohorelement, Links,Frarnes,
e like
INSERTING IMAGES
aN
in our vweh pages, Besides tep, you
allowusto incude variousgraphical elements
edia features te
M I ' sm u l t i m e d i a
or photographs on
web page, edements a
These make
hics, drawings, paintings, Charts,fmafps, trowse throun

also be used a5 a navigational tool to help users
p l a y
g r a p h i c s ,
nformative and appealing, Images can and JPEG

various graphic formats, The idely used formats are GiF, PNG,
gemore
b browsers
h e web
support
t e r n e t .
he
fomats
External images, The inline image is displayed when the web page
two types
mages:Inline and
of ima with other
Thereare the external image is not displayed automatically
inserte within a line of text,
is inserted
whereas
andis
and viewed separately by dicking on alink
referenced externally and
opened
web page.
Instead, itis
cOntento onthe
IMG> TAG
THE attributes to be
89 is an empty tag and requires different
u s e dtoadd imagesin
an HTML webpage, It fiow
is used
tagis
nd>tag browser how to layout the page
so that the text can
img> tell the
The for the <img tag
cified with it. Theseattributes
pecih
the image.
properlyaround
SOURCE OFAN IMAGE
DEFINING THE the src attribute is
used.
image on a web page,
source of an
fo add and definethe file"
src="Address or path of the image where the file is stored.
Let uS
SYNTAX: <img well aware of its location, í.e.,
one should be
While specifying theimage file,
we can refer
the following examples: HTMLfile exists, then
understand it with where the referring
the same folder
"pic1.jpg" lies in
Example1:Iftheimage file,
file by simply writing its namne.
tothe image
then we referte
<img src= "pic1.jpg">
in which HTML file exists,
other than the one
file "pic1.jpg" lies in a directory
Example2: If theimage of the file:
specifying the full path
theimage by
cimgsrc="C:|Users|KIPS|Pictureslpic1.jpg"> folder of the we
rather it exists in
the 'images'
not lie in your computer,
"pic1.jpg" does
dnple 3: If theimage file full of the file:
path
then we need to give
serverofGoogle,
c i m g s r c - " h t t p : / / w w w . g o o g l e . c o m / i m a g e s / p i c 1 . j p g "
SPECIFYING HEIGHT AND
The HEIGHT WIDTH FOR AN IMAGE
attribute specifes the pixels) of an image either in the form of an integ or a percent
The WIDTH attribute height
value. specifies the width (in pixels) of
pixeis an image either in
the form of an
integer or tagevalue,
<htmls
ercentag
<head>
ctitles height and D heght and wdth
width </title>
<body> </head> C00
fle//C/Users/Dineshs20ThakurfDesktop/cas he
H Aps For auidkacies gace your bookmais en on te booems b fnpot on
Kimg src=
p>
"camel.jpg" style= height: 70%; width: 50%>
Morphing is special effect in
a
animations that motion pictures ana

apE into
changes (or morphs) one image or
another through a
Most often it is seamless transition. Morphing is a specal cher
used to
depict One
one person
fhrOug
one image or shape into another through a seamless transition. Most ofhe
another turning into
turning
through technological means or as into one person turning into another through technological means
depict one pers
depict
fantasy or sureal sequence
or
as Dart of a
fantasy or surreal part of a
sequence. </p>
</body>
</html>
ALIGNING IMAGE
To align an image to the right or left
of the text, use the CSS
Example: <p>cimg src="
property-float.
imagl.jpg" style =
The image will float:right;width:50px;height:50px>
appear to the right of the text.
</p>
TIP
To align an image to top, bottom, or
middle, use the CSS property
vertical-align.
NOTE
In
previous versions of HTML, align attribute was
used to align the
images to left or right of the text.
ALTATTRIBUTE
The ALT attribute
displays text as an alternative to the
display images due to some reasons image. Sometimes a browser on the
(maybe because of slow
user's computer da
you can display the text to
describe the image. The connection or error in the
image file. It is only purpose of ALT

src
attribute). In tha
generally used in case the user has a text-basedattribute is to describe the content
to be useful when
the user is a blind surfer browser on his
for whom the
browser is
computer, such as Lynx. It also
programmed to read aloud the alternatu
Learning
Computers wn Kips 144
their browsers or use
disabled on
instea of displaying image. In many cases, people have the image display
the
attribute is used.
settingsthatado not support automatic loading of mages. In such cases as well the ALT
NOTE spaces
fo the ALT attribute is a text string of up to 1024 character
The valuefor enclosed in quotation marks including
or otherpunctuation.
<htmls
<head>
Image at top of the screen
the screen </title>

ctitle> Image at top of 2 C 0Ofile:///C/Users/DineshS620Thakur/Desk. e
<style type="text/css"' Apps For quick access, placeyour bookmariks
here on the bookmarks bar Impart bookmar.
mage of the Santa hut

body{background-color: RGB(255,251,214)}
Correct Source Value
</style></head>
<body> Santa Workshop.jpg Due to wrong

value for src attribute
alternate text is getting
<p>cimg src= "Santa VWorkshop.gif" alt= "image
displayed
of the Santa hut" style = float:right;width:200px;
height:150px> </p>
</body>
</htmls
IMAGES IN A TABLE CELL

You can also insert an image in a table cell. Let us understand it with an example:
<htmls bmageat top otte seen
C O teCUers/Dinesh 20Thuku( Desk e

<head>
title>Creating a Table</title>
Facilities in a school
<style type="text/css"'s
body{background-color:RGB(255,251,214)}
table,td,th{border:1px solid green ALibrary
BigPlayground
tablelborder-collapse:separate;
tdtext-align:center
A School
s/styles
roMpu
sheads
<body> AComputer Lab A Music Room
<center><tables
<caption><hl>Facilities in a schoole/h1>«/caption
Playgroundeh5
upctd cimg src="playground.jpg" stylewwidth:100%><h3 Big
ctdscimg srce "library.jpg" style=width:1003> <h3>A Library</h3»<jtd2s1
tpetd colspans2>cimg srca"school.ipg" style=width:100%>ch3oA Schoolnh3>4/to
</tr>
<tr
ctdbcimg src="complab.jpg" style=width:100%><h3>AComputer Labejn 971
ctdbcimg srca"music.jpg'" style=width:100%><h3>A Music Roome/h3></ta

</tr
</table></center>
</body></htmls
LINKING WEB PAGES

TML
A website consists of many web pages that give vou access to the related information. HiLrenders a powerf
feature of linking these web pages together. This feature is called Hyperlinking. Using these hyperlinks, one an
a y k e d web page on the Internet in no time. When you hover the

mouse pointer overalink, the pointerve
P
turn into a little hand.
TYPES OF LINKING
Internal Linking
External Linking
Internal linking: When one part of a web page is linked to another section on the same page, it is calledinterna
linking.
it is called external linking
External linking: When one page is linked to another web page or website,
THE ANCHOR <A> TAG

which a user can clickto display the
n HTML, the anchor tag <A> is used to mark the text or an image as hyperlink,
a
to mark the end of the link.Thi

veb page or website anchored to it. Being a container tag, it requires closing tag <IA>
agis generally used to specify the following:
The text or image that is clicked to activate the link.
The address that will be opened using the defined link.
oucan use hyperlinks in the following ways:

To jump from one section to another within the same web page.
To link to another page within the same website.
To link to another page or web site anywhere on the Internet.
REF ATTRIBUTE
REF is an attribute of <A> anchor tag, which defines the document to which the link leads.
Learning
Camputers wit Kips 146
e w r diapla
etondened adcoioed
e fsloeg codeand saveie fle oe tie sae,dii
afetypetaioa
wofikgoHOODORT5,T5,24
ae
hesd
THOHTOR THEDAI n p
gtfestetalgrijusnty
Lschnew
dayisanew
in there PS TEA
dhalerge,1otayfresh and alive sprt,
mstbe change,Findnew tactiks,methods, COD HELP THOSEWOHELPTHEELES
andmodesof operationthatarerigtfor
MWbeleft
toda/'ssituation,otherWse You
behindandeventually tbe forgotten.clp
do KIPSTEAM <bo dp
pstyletextaligpurightpolorred
Rermermber: <br
pstyle-textalignucenterpolortlueAlways
4boGODHELPSTHOSE WHO HELPTHEMSELVESlb
4fbody
htmly
Now, type the name link.html.
with the
following PIO8ram
6 program code in a new file and save the file
<html>
<head> Hyperlinik Example
C O file:l/C/Users/Dineshs.20Thakur/Desk
stitle> Hyperlink Example
the bookmariks
For quick access place your
bookmaris here on bar inpo bo
Apps
s/title></head><body>>
<a href =
"click.html"> CLICK HERE </a> CLICK HERE
s/body>
</htmls
NOTE
Remember, if the linked HTML document exists in folder, you must specify the complete path and the
a different
name of the folder.
CSS AND LINKS

Ssaffects the links differently depending on the state thev are in. We can divide the link states in Tfour categories:
a:link a normal, unvisited link
a:visited-a link, the user has visited

a:hover a link, when the user moves the mouse overit
a:active- a link, the moment it is clicked

and colours to them.
YOu can customise these link states by applying different text properties
NOTE the following rules should be keptIn

While doing so,
You can set the style for several link states in a single statement.
mind regarding the order in which the states are to be mentioned:
a:hover must come after a:link and a:visited

a:active must come after a:hover
Let us try using these link states:
<htmls
<head>
<title> The Link States </title>
<style type="text/css">
bodyftext-align:center;margin-top:50}
a:linkfcolor:red;text-decoration:overline
a:visitedfcolor:yellow}
a:hoverfcolor:purplej
a:activefcolor:green}
styles
heads
cbodys
Thisjsalink
Thg aink
http://channel.nationalgeographic.com"s
c ah r e f - " h t t
a link</h1>e/a>
ch1sThis is Hover
bodys</htmls Active
Visited
LINKS AS BUTTONS
linkS as buttons using CSS styling. The following example
demonstrates the same
e can also display
<htmis
chead>estyle type="text/css">
link, avisited {background-color: pink; color: white;
padding:14px 25px; cake.html X
C file:///C/Users/Dinesh%20Thakur/Desk... e
text-align: center
bookemarks here on the bookmariks bar Import
bookmar..
text-decoration: none Apps Forquick access, placeyour
display: inline-block;}
achover, a:active {background-color: red;}

Thought of the day
eistyle></head> <body>
ca href-"click.html">Thought of the
day</a>
</body></html>
IMAGES AS LINKSs
the following HTML code
Animage can also be used as a hyperlink to another document. Let us see an example, type
nthe file image.html:
DADCING INAGE LINK +
chtml> C 00file//C/Users/ Dineshs20Thakur/Desktop/cake.html

8
fApp For guck ccers, pioce your booumare here o0 the c o o a bar
chead>
Types of Computer
ctitle>ADDING IMAGE LINK</title>
s/head>
MInieomputer Personal computer
<body> Mierocomputer
<img src= "Types of Computer.jpg"

</body Tablet
Supercompater Laptop
s/htmb
Now type the fte
following HTML Code and define thelnkfor image he
htmls
cheadsctitlesimage inkettles
<heads
cbody
ca href-image tmls
Types
img srca Computer jpE of
height-95t width- 50%
la
Computer
<bodys
htmls
NOTE
HTML code written above, you must replace "Computer.jpg, and "Types of Lomputerpg'with
Note, that in the
name and path of the
images you have in your computer.
AUD10 AND VIDEO

Unti now, we discussed various tags, which help us in enhancing the appearance of our web page. In
have
Section, we will discuss the tags used to
incorporate multimedia in our web page and make it come alive. Multimed
reters to 'mutiplemediums- the ability to add bits of sound and moving pictures to the web page.
INSERTING AUDIO
HIMLS defines a new
tag, <audio> tag that specifies a standard way to insert an audio file in a web page.Itanbe
used for any file format like.mp3,.ogg, wav, etc.
The attributes of the <audio>
tag are given in the following table:
Attribute Purpose
src Specifies the URL of the audio file.
controls Displays the controls on the web page.
autoplay Plays the audio file automatically when the web page is loaded.
loop Replays the audio file.
The following example demonstrates some of the attributes of the <audio> tag:
chtml>
<head>
ctitle>Adding Audio Clip/title>
<style type"text/css">
ckeroundcolor RGB(250.214229))
esoes
hws
At
soleecolnbl
eblue> Music gives soul tothe
wings
to the nind, flight to the
mis
Music gives soul to the universe, wings fo fhe mind

nherse
life to everything, <h3> light to the imagination, and life to everything
tion and
e c o n t r o l s
NUsers|User
serlDesktop Kalimba.mp3" 001/5 48
rbrowser
rdoes not support the audio tag.
udios bodys
h e m s
ASERTINGVIDEO
sertvideofles in our HTML pages with the help of the Video tag. Supported file formats include: .mp4,
insertvide
can
e and.ogg.A Attributes
ttrib associated with the <video> tag are given below:
Attribute Purpose
STC Specifies the URL of the video file.
controls Displays the controls on the web page.
autoplay Plays the audio file automatically when the web page is loaded.
height Specifies the height of the video player displayed.

wicth Specifies the width of the video player displayed.
ple shows the HTMLcodeto indlude a video in an HTML page:

The allcwing
CO fie/CUsens/Dines2othakur/ Deskt e
t e Video d e A Video Clip
andp
dDA Video Cip hi>
idencantroissrc="C|Users|User|Desktoplvideo1.mp4"
wicth-720 heghe="540" autoplay
lnur browser does not support the video tag
ide
005/030
COTE
if the browser does not support <audio> and evideo>tags, then any text lying between
Let's Know More
You should alwep
<audios and <laudio> and will be displayed in
the browser as
pecify the
evide and </video> tags
video>
height ot anwidt and
dnd
Such
width and heightimae
specif the ars
FRAMES (icker while page w
We have seen so far that an HTML document takes up the entire size of a Drowser image.loading the
u t what if we want to display more than one HTML documents in a Drovw
d m e time?itcan beachieved by using the concept of Frames in HTML
Frames are a way of organising yourw

website as they enable the user to divide a page into
several rectangular
segments for different purposes.
diesdlOw us
multiple HTML documents as independent windows wit
to presents Know the Fact
By default, a
one orowser window, which gives greater flexibility in designing and maintaining your link w
appear as follows
erely simply dumping everything onto one page. Frames make your website browsers) n al
o An
tEresting as you can also include
the site theme (image, logo, banners, etc.) in
tnem. unvisited
nere is no need to underlined andlink
blue i
download the navigation menu each time you visit a new pa5 oA visited link
only have to change the contents of the
page. underlined and
purple.
CREATING FRAMES o An active
underlined andlink
redj
in HTMLS, frames can be created using ciframe> (Inline Frame) tag. An Inline frameis
a new HIML document embedded inside the current HTML document. The attributes
of <iframe> tag are:
SRC
Let's Know More
With the help of this attribute, we specify the path of the document that should be
Before HTML5, audio
displayed in the inline frame. and video files could
only
be played in a browser
SYNTAX: <iframe src=value> with plug-in (like
a
where value=path (URL) of the document Flash).
HEIGHT& WIDTH
With these attributes we can control the size of the inline frames.
Let's Know More
SYNTAX: width=value in pixels
An iframe can be usedas
height=value in pixels the target frame for alink
Let us use the inline frames in our HTML document. by using the target
attribute of the link. The
First, create two files with the name, 'frame_a.html'and 'frame_b.html'. target attribute must
refer to the name
Now, type the below given code for the main document. attribute of the iframe.
For example:
<iframe
<html> src="testfile.html
name="iframe_1'></lifra
<head> me>
<a href="http://www.
<title>Main Document</title> google.com"target="ifra
me_1"> Google</a>
<style type="text/css ">
d-coloryellow
estyles
eheads
e
cbodys
ing fmes
document containing below given Th is the mals ders
h sThisis
nlineframes </h3s
FRAME A FRAMEB
a.htm/"
s r c eframe
trame
ht-200wid
width=200> </jiframe>
ciframes
src="frame_b.htn height=-200
width-200></liframes
body
htmls
BORDER AND IFRAME

auanplving CSS property- Border, you can display an inline frame with orwithout border.
SINTAX: Border: valuefor border-width value for border-style value for border-colour
Vou can also apply individual border properties:
o border-width:value
where value=thin, thick, medium, or a numeric value indicated in pixels.
border-style : value
where value can be none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset
0 border-color: value
where value can be the name of the colour or its corresponding hexadecimal code.
Let us check out an example:
<html>
chead>
ctitle>Main Document</title>
style type="text/css">
body{background-color:yellow
iframefborder:10px dotted purple
cistyles
headbbodyo
ch> This is the main document
gven inline frameschas containing be e o
sing bebo e hoe

his he m doc
rame srce rame ahtmi"
height-200 e s o o s e o s o
FRAMEA FRAMEBFRAME
width-200b-frame>
came src=rame
bhtm" height-200 width-200
sthyle-"border-width:5pxcborder-style:solid;border-
colorngreen>crames
came src="rame
chtm" height-200 width-200
style="bordernone">ciframe>
body
htmb
Recap Web browsers support various graphic formats but the widely used formats areCi
PNG, and JPEG formats.
GIF
There are two types of images: Inline and Extermal images.
T h e inline image is displayed when the web page is opened and is inserted within a line of text, whereas an
extemal image does not
get displayed automatically with other content on the web page.
Aninine image is inserted using the <img> tag, whereas, to insert an external image, the anchor tag <a> is
used that establishes a link to the
image.
o There are two types of linking: Internal linking and External linking
When of a web page is linked to another section on the same
one part
page, it is called Internal linking,
whereas, when one page is linked to another web page or website, it is called External
linking.
In HTML the anchor tag <A>, is used to mark the text as a hyperlink, which a user can click to display the web
page or website anchored to it.
We can divide link states in four categories,

namely, Unvisited link, Visited link, Hover link, and Active link
We can also display links as buttons
using CSS styling.
We can insert audio and video files in an HTML document
using <audio> and <video> tags respectively.
Frames allow you to present multiple HTML documents as independent windows within one browser window
Which gives greater flexibility in designing and
maintaining your websit

Mwyes LNKS: IN The Anohor A To

Uploaded by

Document Information

Original Description:

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

Mwyes LNKS: IN The Anohor A To

Uploaded by

Copyright:

Available Formats

IMAGES S, FRAMES IN HTMLL5

IN THIS The Anohor A To

hics, drawings, paintings, Charts,fmafps, trowse throun

nformative and appealing, Images can and JPEG

animations that motion pictures ana

image file. It is only purpose of ALT

Image at top of the screen

the screen </title>

mage of the Santa hut

<body> Santa Workshop.jpg Due to wrong

IMAGES IN A TABLE CELL

<htmls bmageat top otte seen

C O teCUers/Dinesh 20Thuku( Desk e

ctdbcimg srca"music.jpg'" style=width:100%><h3>A Music Roome/h3></ta

LINKING WEB PAGES

a y k e d web page on the Internet in no time. When you hover the

THE ANCHOR <A> TAG

to mark the end of the link.Thi

The text or image that is clicked to activate the link.

The address that will be opened using the defined link.

oucan use hyperlinks in the following ways:

To link to another page within the same website.

To link to another page or web site anywhere on the Internet.

name of the folder.

CSS AND LINKS

a:link a normal, unvisited link

a:visited-a link, the user has visited

a:active- a link, the moment it is clicked

NOTE the following rules should be keptIn

a:hover must come after a:link and a:visited

Let us try using these link states:

link, avisited {background-color: pink; color: white;

padding:14px 25px; cake.html X

achover, a:active {background-color: red;}

chtml> C 00file//C/Users/ Dineshs20Thakur/Desktop/cake.html

<img src= "Types of Computer.jpg"

AUD10 AND VIDEO

Music gives soul to the universe, wings fo fhe mind

height Specifies the height of the video player displayed.

ple shows the HTMLcodeto indlude a video in an HTML page:

t e Video d e A Video Clip

d m e time?itcan beachieved by using the concept of Frames in HTML

Frames are a way of organising yourw

of <iframe> tag are:

where value=path (URL) of the document Flash).

BORDER AND IFRAME

sing bebo e hoe

We can divide link states in four categories,

You might also like