CHAPTER - 3
DEEPER INTO HTML
Introduction
This chapter explains how to insert pictures, to create links between different web
pages, displaying the content in list format and to design tables using HTML.
Inserting images in documents
You can insert an image into a web page using <IMG> tag. The SRC attribute of the
<IMG> tag is used to specify the location of the picture file. <IMG> tag is an empty
tag.
Syntax: <IMG SRC=”path of the picture file”>
Example:
<html>
<body>
<img src="C:\Users\Public\Pictures\Sample\Pictures\penguins.jpg"width=150
height=100 vspace=50 hspace=50 align=right> This is demo</img>
</body>
</html>
The above example will help you to insert an image in a HTML document.
Height, Width, Hspace and Vspace are attributes of image tag.
Width – This attribute specifies width of the image.
Height – This attribute specifies height of the image.
Hspace – This attribute specifies margins between the image and text
appearing on the left and right sides.
Vspace –This attribute specifies margins between the image and the text
appearing on the top and bottom.
<img src=” cat.gif” width=100 height=150 vspace=50 hspace=50>
Similarly, alignment can also be changed using the align attribute.
<img src=”cat.gif” align=right>
Inserting video
A video clip that is inserted in the page would also play when the page is
displayed. To display a video clip
Syntax: <IMG DYNSRC=”path of the video file”>
Example:
<HTML>
<BODY>
< IMG DYNSRC=”C:\clock.avi”>
</BODY>
</HTML>
Other attributes of IMG tag used for displaying a video clip.
Loop=n: This plays the video n times. If loop=-1 then the video clip will be played
infinitely.
Start= fileopen /mouseover: This plays the video clip on opening the file or when the
mouse is moved over the video clip
Inserting audio
An audio clip can be inserted into the document using the <BGSOUND> tag. The
src attribute of the <BGSOUND> tag is used to specify the location of the sound
file. <BGSOUND> tag is an empty tag.
Syntax: <BGSOUND src=”path of the audio file”>
Example:
<HTML><BODY>
<BGSOUND src=”C:\MUSIC.WAV”>
</BODY></HTML>
Do the following:
1.Create a greeting card for Birthday.Add a picture and a sound file to your web
page.
2.Select an Indian personality you admire. Design a HTML page about him/her.
3.Download his/her picture from the internet and add it to your page.
4.Write HTML code to display the following text with pictures in attractive and
colourful manner.
SALE SALE SALE
OF
T-SHIRTS, PANTS, DRESSES
Discounts that you have never seen before
Rush!!!!!!!!!!
At,
The ABC HALL
Mount Road
Chennai.
Linking to web pages
Web site is a group of related web pages linked together. We can link one web page
to another in the following ways:
1. Creating a link to another web page.
2. Creating a link to another web site.
3. Creating a link with in the page.
1. Creating a link to another web page
If “first.html” document is opened in the browser and it is required to move to
“second.html”, a link has to be created in the “first.html” to move to the
“second.html”.
For this the anchor tag <a> is used.
To create the link the command used is,
<a href=”second .html>click here</a>
“click here” is the hypertext, that acts as a hyperlink to open the second.html
first.html second.html
<html><body>
<pre>
To day is beautiful day
and
<html> I Can See it.
<body> Pray as though everything depended
This page is used to link to on God Work as though everything
second.html page. depended on YOU.
<a href="second.html">click here </pre>
</a> </body>
</body></html> </html>
Note: Both the files should be stored in the same folder. Otherwise full path/location of the
file should be mentioned.
The color of the link can be changed by using attributes, which has to be given
within body start tag.
Body Function of the
attribute attribute Remark
link color of the link color with which the content will be displayed
alink color of the active color at the time of clicking the link
Link
color of the
vlink visited color when you move back to the same page after
Link visiting the link
Example:
<body link= blue alink= green vlink=red>
2.Creating a link to another web site
A link to another website can also be created using the following syntax:
<a href=”web page address”>Text for display</a>
Example:
<html><body>
This page is used to open the school website.
<a href=http://www.balavidyamandir.org>BVM web site</a>
</body></html>
This link when clicked will take the user, from the current website to Bala Vidya
Mandir website.
3. Creating a link within the page
Links can also be created to target a specific part of the page. Large amount of
information can be displayed by splitting it into smaller parts and creating links
within the page. This involves two steps
Step1: Hyperlink the phrase leading to the content
Step2: Label the content to which the hyperlink targets.
Example:
</html>
<body link=blue alink=green vlink=red>
<a href=”#email”>About Email</a><br>
<a href=”#engines”>Search Engines</a><br>
<a href=”#chat”>Chatting</a><br>
<a href=”#video>Video Conferencing</a><br><br>
<p>
<a name=”email”>
<h1 align=center>About Email</h1>
Email is one of the most important and useful facilities on the internet. Emails reach
the recipient in seconds and are most useful to send text, pictures, sound ,video clips
etc., Email can transfer data to any person anywhere in the world in few seconds.
Data can be transmitted from one computer to another computer anywhere. <br>
<p>
<a name=”engines”>
<h1 align=center>Search Engines</h1>
The latest and most popular method of searching for information is by using search
engines. A search engine is a program which has a database of all the available
Webpages on the Internet. Periodically, it also visits all the websites and updates its
database. Some of the popular search engines are www.yahoo.com,
www.google.com, www.altavista.com<br>
<p>
<a name=”chat”>
<h1 align=center>Chatting</h1>
The Internet chat is one of the most exciting things about Internet. It provides a
forum for all around the world to express their opinions and views on a variety of
topics, be it political developments, the latest breakthrough in technology or any
other topic. You can talk with the other users by simply typing your conversation on
the keyboard. It is immediately delivered to the recipient and the reply is sent back
to you in a minimum interval of time thus giving you a feeling of carrying out a real
conversation.<br>
<p>
<a name=”video”>
<h1 align=center> VideoConferencing</h1>
Video Conferencing is a type of communication between two or more users wherein
the users can see each other on the computer screen. To make use of video
conferencing you need a system with a video camera, special software to enable
video conferencing, a modem and a dedicated internet connection.
</body>
</html>
When you view the above code in the browser, you will be getting an output as
follows
Linking images
Links can also be created using images. It is similar to the links created previously,
instead of the text to be displayed the <img> tag is inserted between <a> and </a>.
The syntax is as follows:
<a href=”web page address”><img src=”image file”></a>
Example:
<html><body>
<a href="second.html">
<img src="C:\Users\Public\Pictures\Sample Pictures\penguins.jpg" width=150
height=100>
</a>
</body>
</html>
Output:
Do the following
1.Write a HTML code to display some information about the Indian Elephant. Create a link
to display a picture of elephant.
2.Create a HTML document to display a list of five trees and link each one to another
document displaying a brief description of the tree.Add pictures wherever possible.
3.Create a list as shown below.Link each item on the list to the website given on the right
side.
Presenting lists
One of the most popular methods of organizing information is by using lists. HTML
presents two basic kinds of lists: unordered lists and ordered lists. In unordered lists,
the list items are marked with bullets. In ordered lists, they are marked with numbers,
Roman numerals or letters.
Ordered list
Ordered list are specified with the <OL> tag. The list items are represented by <LI> tag.
They are used when the order of the list items is significant. See the following list that
shows the step to draw a circle.
Example:
<html><body>
<OL>
<LI>Get the radius with which the circle has to be drawn. </LI>
<LI>Use compass and measure the radius with a scale. </LI>
<LI> Fix the compass in a paper and draw the circle. </LI>
</OL>
</body>
</html>
OUTPUT:
OL elements have the attribute type. In addition, there is the start attribute.
The following code illustrates the use of start and type
attribute.
Example:
<html><body>
<H3>Northern States<H3>
<OL type=a start=10>
<LI>Jammu & Kashmir
<LI>Himachal Pradesh
</OL>
<H3>Eastern States</H3>
<OL type=A start =10>
<LI>West Bengal
<LI>Assam
</OL>
<H3>Southern States</H3>
<OL type=i start=10>
<LI>Tamil Nadu
<LI>Andra Pradesh
</OL>
<H3>Western States</H3>
<OL type=I start=10>
<LI>Maharashtra
<LI>Gujarat
</OL>
<H3>Central States</H3> <OL type=2 start=10>
<LI> Madhya Pradesh
<LI> Bihar
</OL> </body></html>
Unordered list
Unordered lists are specified with the <UL> tag.
Unordered lists are used when the order of the list
items is unimportant.
Example1:
<html>
<body>
<UL>
<LI >APPLE</LI>
<LI>ORANGE</LI>
<LI>PINEAPPLE</LI>
</UL>
</body>
</html>
Example2:
<html><body>
<UL type=disc>
<LI> Baseball cap</LI>
<LI> Cowbow hat</LI>
</UL>
<UL type=circle>
<LI>Baseball cap</LI>
<LI>Cowboy hat</LI>
</UL>
<UL type=square>
<LI>Baseball cap</LI>
<LI>Cowboy hat</LI>
</UL></body>
</html>
Designing tables
HTML tables begin and end with the tables tags, <TABLE> and </TABLE>.They contain
rows defined with the row tags <TR> and </TR>, and cells or columns defined with cell
tags, <TD> and </TD>. Captions for tables are created with the captions tags, <CAPTION>
and </CAPTION>.
Some cells can be designed as table row headers with the use of the <TH> and </TH> tags.
These cells then display using a bolder script than the other table cells.
Table element attributes
ATTRIBUTES DESCRIPTION
Align To align table with other elements in the webpage
Bgcolor Background colour of the table
Width Width of the table
Height Height of the table
Cellspacing The space between cell border and table frame
Cellpadding The space between cell border and cell contents
Border Border on all four sides
Border-color Colour of the border
Now we will see how to design a table with all these attributes.
<html><body
<table align=center cellspacing=10 cellpadding=20 border=2
style="border-color:red; bgcolor:pink">
<caption align=top> Table </caption>
<tr>
<th> Attributes </th>
<th>Description</th>
</tr>
<tr> Output:
<td>Align</td>
<td>Align Table</td>
</tr>
<tr>
<td>Bgcolor> </td>
<td Background color of the table </td>
</tr>
</table>
</body>
</html>
Apart from this, <TD> has the following attributes.
Nowrap – disables text wrapping
Rowspan – specifies the number of rows spanned by the cell
Colspan – specifies the number of columns spanned by the cell
The following example will illustrate the above attributes.
<html><body>
<table align=center border=2>
<caption align=bottom> CAR
SALES 2011 </caption> <tr>
<th rowspan=2 >Product <br>no </th>
<th rowspan=2 >Name</th>
<th colspan=4>Sales in
Crores</th>
</tr>
<tr>
<th> qtr1 </th>
<th>qtr 2</th>
<th>qtr 3</th>
<th>qtr4</th>
</tr>
<tr>
<td>1001 </td>
<td>Steering Wheel</td>
<td>7</td>
<td>5</td>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td rowspan=2>1002 </td>
<td rowspan=2>Cylinder Head<br>Assembly</td>
<td rowspan=2>1</td>
<td rowspan=2 >2</td>
<td rowspan=2>3</td> <td rowspan=2>4</td>
</tr>
<tr>
</tr>
<tr> output:
<td>1003</td>
<td> Wheel</td>
<td>2</td>
<td>3</td>
<td>7</td>
<td>6</td>
</tr>
</table></body></html>
EXERCISES
I. Fill in the blanks:
1. tag is used for displaying images in the document.
2. Two types of list are _________________ and_________________.
3. To create a link between two documents _________________ tag is used.
4. The row headers for a table can be specified using _________________ tag.
5. _________________ is the space between the cell border and the table frame.
II. State whether the following statements are true or false:
1. An orderly list contains numbers.
2. You can align the table using the “align” attribute in the <table> tag.
3. To disable automatic text wrapping nowrap is used.
4. Link attribute is used to indicate the color of the text after the link is clicked.
5. The type of the bullet can be changed using the “type” attribute in the <ul> tag.
III. Lab activity:
1. Create an ordered list as given below:
Types of Networks
1.Point-to-point Topology
2.Bus Topology
3.StarTopology
4.Ring Topology
5.Mesh Topology
6.Fully connected Topology
Add a picture of network to the list in the HTML Document.
2. Create an unordered list as given below:
Components of networks
▪ Servers
▪ Workstations
▪ Hubs
▪ Peripherals
3. Create a table as shown below:
Subjects
Name Maths Physics Chemistry
Dhanasekar 88 85 89
Sakthivel 92 90 91
a. The heading row should have a light blue background.
b. The rest of the rows should have red background.
c. The font should be in Courier.
d. The font size should be 10.
4. Create a Nested list as given below:
1. VEGETABLES
1.Tomato
2.Beans
3.Onion
2. FRUITS
• Apple
• Orange
• Grapes
5. Create a table as shown below:
Storage Position
Reservoir Capacity October27 October 28
Satyamurthi Sagar 3,231 8741 1,211
Cholavaram 881 139 361
6. Create an Html document, which contain links for the documents that contain
the tables created using previous question.(Reservoir only).
