Class X

Chapter -4- Images, Links and Tables

Aim: In this chapter we will learn how to insert images, graphics and Audio-Video files in webpage to make it more
attractive.
Topics covered in the chapter-
1. Insert image 4. Internal and external linking
2. Inline and external image 5. Tables
3. Linking of webpages 6. Table properties

A. Inserting Images-Images are used to beautify as well as to depict many concepts easily on our webpages.
Images can improve the design and the appearance of a web page.
There are two types of images – Inline and External images.
Inline image
Inline image is displayed when the web page is opened and is inserted within a line of text. The simplest way to
add an inline image in HTML is to insert the <img> tag into the text exactly you want the image to appear.
The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web
page, images are linked to web pages. The <img> tag creates a holding space for the referenced image.
External image
The external image is not displayed automatically with other content on the web page. Instead, it is referenced
externally and viewed separately by clicking on a link. To add an external image in HTML document the anchor
<A> tag is used.
The <img> tag
The <img> tag is used to embed an image in a web page. The <img> tag is an empty tag (Not required closing tag),
and requires different attributs to be specified it.
The <img> tag has two required attributes:
 src - Specifies the path or source of the image (While specifying image address, one should be well aware
of its location, i.e. where the file is stored.)
 alt - Specifies an alternate text for the image
If the browser of the user’s computer does not displayed images due to some reason (due to slow
connection, an error in the src attribute, unsupportive browser, heavy traffic, or large size of an image), in
that case we can display the text to describe the image.
 We can use the width and height attributes to specify the size of an image.
Example
<img src="myhouse.jpg" alt="This is my house" width="500" height="600">
Aligning inline images inline images are placed middle of the line f text. The align attribute specifies the
alignment of an image according to the surrounding element.
Aligning floating image: It will place the image against left or right margin.
To change its position we can use
Align=Top | Middle | Bottom | Left | Right
 Image Floating Use the CSS float property to let the image float to the right or to the left of a text:
Like:<P> <img src=”smiley.gif” style=Float:right> The image is right to the text</p>
<P> <img src=”smiley.gif” style=Float:left> The image is left to the text </P>
 To make image in center we can use <Center> element.
 Use the HTML< border> attribute to add border to the image.
 Use the HTML Hspace and Vspace to edit the amount of horizontal or vertical space respectively around the image.
<center>
<img src=”myhouse.jpeg” align=”right” hspace=30 vspace=40 height=200 width=200 border=4>
</center>

B. Linking Web Pages

A website consists of many webpages that give us access to the related information. HTML renders the
feature of linking the webpages together, it is called Hyperlinking.
These Hyperlinks are the backbone of webpages. Without a hyperlink they are just a document.
 In HTML an icon, text, or graphic can be used to link another file or an object.
 In HTML , the Anchor tag <A> is used to mark the text as a hypertext link.Anchor tag is a container tag, thus is required
to open<A> and close </A> tags at the starting and end of the text or image respectively.
 Types of Linking:-
There are two types of images – Internal and External
1. Internal Linking: When one part of a web page is linked to another section of the same page.
2. External Linking: When one page is linked to another web page or website.
External Linking: An external link is used to interconnect two html webpages. When you want to navigate to
some other page or any other URL by clicking on a link on webpage, external links are created.
<a> can be used in two ways:
a. The text or image that is clicked to activate the defined link.
b. The address that will be opened using the defined link.
We can use it in following ways:
a. To jump from one section to another setion within the same page.
b. To link to another page within the same website.
c. To link another page or website anywhere in the world.
The <A> tag has two attributes, Href and Title
HREF Attribue
<A Href> is used to define the document to which the link leads.
Syntax: <A Href= “value”> Click here </A>
values = URL of a website (Ex. <A href=”www.google.com”>)
Name of a file (Ex. <A href=”click.html”>)
E-mail address (Ex. <A href=”mailto:info@gmail.com”>)
Here, in the syntax the text “Click here” is called Hypertext. Hyper text is a text which contains links to information on the
same webpage or some other webpage.
Title Attribute
The Title attribute is used to give title to the document to which you are linking. It contains some information about
the link in textual format that is enclosed n double quotes. The text appears when a user moves his mouse over that
link.
Example:- <A Href= www.google.com, Title= “Let us google”>
Internal Linking
To create linking within the same document/webpage, Anchor tag requires two instances:-
 One that servers as a hyper text link i.e. the command that leads the browser to another section on web page
Syntax: <A Href = “#linkname”> Link to another section of the same document </A>
Here # sign tells the anchor that it is looking for the section within the same document and ‘linkname’ is the
name of the section which you are linking to.
 Another instance acts as a reference i.e. the place on the page you want the browser to jump to.
Syntax: <A Name= “Linkname”> New section </A>
 Name Attribute The name attribute allows user to create links within the same document.The value of the name
attribute is an identifier for the anchor and this should always be unique.

Linking to a specific section of another webpage

When we want to link some specific section of another web page we use name or id attributes.
The process has two steps:-
Step 1: Creating a named anchor
Syntax: <A Name= “anchor”>keyboard </A>
Step 2: Linking to the named anchor
Syntax: <A Href= “document_name.html#named_anchor”> keyboard </A>

 To make image as a link To make an image to act as a link use <img src> tag within the <A Href> tag.
 To create an e-mail link Syntax <A Href = “mailto:mail address”>kips learnig Solution </A>
 To insert audio
Syntax: <A Href = “URL of audio file”> Link text </A>
<Audio src=”url of audio file”></Audio>
<embed src=”URL of audio or video file”></Embed>
<embed src="video.mp4" width="400" height="300"> </embed>
<embed src="Audio.mp3"> </embed>
Attributes
Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is ready

controls controls Specifies that audio controls should be displayed (such as a play/pause button etc)

loop loop Specifies that the audio will start over again, every time it is finished

muted muted Specifies that the audio output should be muted

src URL Specifies the URL of the audio file

Ex.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
 To insert video Syntax: <AHref = “URL of vedio file”> Link text </A>
<Video src=”URL of Video file”></Video>
Attribute Value Description

autoplay autoplay Specifies that the video will start playing as soon as it is ready

controls controls Specifies that video controls should be displayed (such as a play/pause button etc).

height pixels Sets the height of the video player

loop loop Specifies that the video will start over again, every time it is finished

muted muted Specifies that the audio output of the video should be muted

src URL Specifies the URL of the video file

width pixels Sets the width of the video player

<html>

<body>
<h1>The video element</h1>
<video width="320" height="240" Controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>

Tables

To create a table on a web page

 Use <table> tag to start your table content.
 Use <caption> tag to specify the caption
 Use </caption> end the caption
 Use <tr> tag to insert a row
 Use <Th> tag to specify column heading
 Use </Th> tag to end the heading
 Use </Tr> tag to end a row
  Use <Td> tag to insert table data (cell content)
 Use </Td> tag to end table data
 Use </table> tag to end table

Attributes of Table

The table attribute are defined with the table tag itself.
Syntax: <Table attribute_name: value>
value is the possible values of the respective attribute.
To apply border use <Table border=value> , value is size of border in pixel
To apply border colour use <Table Bordercolor= value> , value is colour name or RGB code.
To apply effects to outerborders of table use <Table Frame = value> , values frame attribute value
To apply effects to inner borders of table use <Table Rule = value> , values rule attribute value
To apply background colour to the table use <Table Bgcolor= value> , value is colour name or RGB code.
To apply background image to the table use <Table Background = value> , value is path of image
The align attribute aligns the text within the cell either to the left, right or center.(default property-Left align)
To align the table on the web page use <Table Align= value> , values are various align attribute value.
To set margins within a cell. It sets the amount of space between the cell border and cell data. i.e. cell padding use
<table cellpadding= value>, value is size in pixel
Cell Spacing. Cell spacing is the space between each cell. By default the space is set to 2 pixels.
To set height and width of the table use <Table Height = value Width= value> , value is size in pixel

Colspan- it is used to combine cells horizontally. It Rowspan- it is used to combine cells

specifies the no. of columns that the cells span across vertically. It merges the no. of cells
and shows them as single cell. vertically and shows them as single
cell.
Attributes of <TR> <TD> and <TH>

To apply background colour to the table row use <Tr Bgcolor= value> , value is colour name or RGB code.
To apply background colour to the column heading use <Th Bgcolor= value> value is colour name or code.
To apply background colour to the table data <Td Bgcolor= value> , where value is colour name or RGB code.
To align the text within the cell use <Td align= value> , values are various align attribute value.
To set the vertical alignment(Top,bottom,middle) of data in a column use <Td Valign= value> values are various
Valign attribute value.
To merge(span) cells horizontally in a column use <Td Colspan= value> value is no of cells in span across
To merge(span) cells vertically in a row use <Td Rowspan= value> value is no of cells in span across
To set height and width of the table row use <Tr Height = value> <Tr Width= value> value is size in pixel
Frame-The frame attribute was used on the <table> element to control the display of the outside border. The value
frame="hsides" indicated that borders should be drawn on the top and bottom of the table. This attribute is
deprecated in HTML5 and should no longer be used. To achieve border effects on tables, use CSS.
Rules Attribute:- The rules attribute specifies which parts of the inside borders that should be visible. The purpose of the
HTML rules attribute is to specify which rulings (between rows and columns) are to be shown in a table. Value

Values Description

all All rulings are shown.

cols Only column rulings are shown.

groups Only group rulings are shown.

none No rulings are shown.

rows Only row rulings are shown.

THEAD> tag

It is used to group header rows that define the table’s header. This tag should appear inside the <table> tag.
It is useful in case of larger tables that span across multiple pages in a document. The table header defined using
<THEAD>tag will appear on each page of the document where the tables is displayed.It is also a continer tag
Various attributes of <THEAD> are:-
Align- To set horizontal alignment
Valign- To set vertical alignment
Char- To specify the character to which the content in the table header will be aligned
Bgcolor- To set the background colour
<TBODY>
The <TBODY> tag defines a table’s body. It allows you to group a block of table rows in HTML table. IF you use the <TBODY>
tag, it must be used as s childof a <Table> element.
<TFOOT> tag
The<TFOOT> tag defines a group of footer rows in a table. A table footer provide footnotes at the bottom of a table.A table
canhave only one <TFOOT> tag which must appear after the <THEAD> and <TBODY> tag.
 Revision Questions
1. Write the attributes of table tag?
2. Difference between<UL> and <Ol>?
3. What are frame boxes and rules?
4. Define rowspan and colspan.
5. What are the different attributes of table tag?
6. Which tag is used to change the type of ordered list?
7. Which property helps in specifying the placement of a table caption?
8. Define nested list. Which property helps in specifying space between the border and the cell content in a
table.
9. Write the uses of following tags:
<TD>, <TH>, <TR>, <DD>, <DL>