Web Technology – Lists, Images & Hyperlinks Chapter 8

WORKING WITH LISTS, IMAGES AND

HYPERLINKS

LEARNING OBJECTIVES
To understand the need for having lists
To study the various kinds of lists
To design pages containing images with different alignments
To appreciate the concept of image maps for easier navigability
To know about different types of Image formats
To be able to create links to other documents and within the same document
To be able to send mail through web sites

CONTENT OUTLINE
8.1 Introduction
8.2 Lists
8.3 The Image Tag
8.4 Image Formats
8.5 Image Maps
8.6 The <A> Tag – Anchor Tag
8.7 Turning an image into a hyperlink
8.8 Mailto attribute

83
Web Technology – Lists, Images & Hyperlinks Chapter 8

8.1 Introduction
As of now we have been able to create a basic web page. Now let us add some more
features which enable the web page to look more useful. Very often data has to be
organized in the form of lists. At other times it becomes necessary to consult other parts
of the same document or sometimes even other documents. Sometimes it is required to
display images so that descriptions become easier and more vivid. For achieving the
above tasks in this lesson we will learn about lists, images and hyperlinks. Hyper linked
text or images are those on which when clicked take you to other parts of the document.

8.2 Lists
There are three kinds of lists that can be made using HTML depending on the need. They
are
a) Unordered lists
b) Ordered lists
c) Data Definition Lists

8.8.1 Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small
black circles).

To make an unordered bulleted list,

1. Start with an opening list <UL> (for unnumbered list) tag

2. For every list item enter the <LI> (list item) tag followed by the individual item;
no closing </LI> tag is needed.
3. End the entire list with a closing list </UL>

<ul>
<li>coffee</li>
<li>tea</li>
</ul>

Here is how it looks in a browser:

• coffee
• tea

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Attribute of the Unordered List

The unordered list has an attribute called type. It can take values like disc, square and
circle. The default is the disc

84
Web Technology – Lists, Images & Hyperlinks Chapter 8

Eg. <UL type = “square”>

Nested Lists

Lists can be nested. You can also have a number of paragraphs, each containing a nested
list, in a single list item. Here is a sample nested list:

<UL>
<LI> A few states of North India
<UL>
<LI> Punjab
<LI> Haryana
<LI> Kashmir
</UL>
<LI> A few states of South India
<UL>
<LI> Tamil Nadu
<LI> Karnataka
<LI> Kerala
</UL>
</UL>

The nested list is displayed as

• A few states of North India

o Punjab
o Haryana
o Kashmir
• A few states of South India
o Tamil Nadu
o Karnataka
o Kerala

8.2.2 Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers. To make
an Ordered bulleted list,

1. Start with an opening list <OL> (for unnumbered list) tag

2. For every list item enter the <LI> (list item) tag followed by the individual item; no
closing </LI> tag is needed.

3. End the entire list with a closing list </OL>

85
Web Technology – Lists, Images & Hyperlinks Chapter 8

<ol>
<li>coffee
<li>tea
</ol>
Here is how it looks in a browser:
1 coffee
2 tea

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

8.8.8.1 Attributes Of Ordered List

There are three possible attributes of the ordered list

1. type = style-information
Type attribute is summarized in the table below (they are case-sensitive):
Type Numbering style
1 arabic numbers 1, 2, 3, ...
A lower alpha a, b, c, ...
A upper alpha A, B, C, ...
I lower roman i, ii, iii, ...
I upper roman I, II, III, ...

2. start = number
This attribute specifies the starting number of the first item in an ordered list. The default
starting number is "1". Note that while the value of this attribute is an integer, the
corresponding label may be non-numeric. Thus, when the list item style is uppercase latin
letters (A, B, C, ...), start=3 means "C". When the style is lowercase roman numerals,
start=3 means "iii", etc.

3. value = number
This attribute sets the number of the current list item. Note that while the value of this
attribute is an integer, the corresponding label may be non-numeric
Example Write the code for the following output

86
Web Technology – Lists, Images & Hyperlinks Chapter 8

Figure: 8.1

The code for the above is

<html>
<head>
<title>TYPES OF PLANTS</title>
</head>
<body >
There are many kinds of plants
<UL>
<LI> Herbs
<OL>
<LI> Corriander
<LI> Tulsi
</OL>
Apart from these common herbs there are some more like
<OL start="3">
<LI> Mint
<LI> Grass
</OL>
<LI>Shrubs
<OL>
<LI> Rose
<LI> Hibiscus
</OL>
</UL>
</body>
</html>

87
Web Technology – Lists, Images & Hyperlinks Chapter 8

8.8.3 Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms A
definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag.
Each definition-list definition starts with the <dd> tag.

<dl>
<dt><strong>coffee</strong></dt>
<dd>Hot drink preferred in South India</dd>
<dt><strong>tea</strong></dt>
<dd>Hot drink preferred in North India</dd>
</dl>

A good way to think of it is that <DT> stands for "Definition-list Term" and <DD>
stands for "Definition-list Definition." When the above list is displayed, it arranges the
elements such that each term is associated with the corresponding definition. The exact
arrangement of elements may vary from browser to browser. Here's how the above
markup comes out:

Coffee
Hot drink preferred in South India
Tea
Hot drink preferred in North India

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks,
images, links, other lists, etc. Similar to ordered and unordered lists, definition lists can
be arbitrarily long. Definition lists are perfect for creating glossaries

8.8.3.1 Attributes of definition List

The COMPACT attribute can be used routinely in case your definition terms are very
short. If, for example, you are showing some computer options, the options may fit on the
same line as the start of the definition.

<DL COMPACT>
<DT> Coffee
<DD>Hot drink preferred in South India
<DT>Tea
<DD>Hot drink preferred in North India
</DL>

The output looks like:

Coffee Hot drink preferred in South India

88
Web Technology – Lists, Images & Hyperlinks Chapter 8

Tea Hot drink preferred in North India

8.3 The Image Tag

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means
that it contains attributes only and it has no closing tag. To display an image on a page,
you need to use the src attribute. Src stands for "source". The value of the src attribute is
the URL of the image you want to display on your page.

The syntax of defining an image:

<img src="url">

The URL points to the location where the image is stored. An image named "dance.gif"
located in the whose URL: D:\Documents and Settings\Administrator\Desktop\dance.gif

The browser puts the image where the image tag occurs in the document. If you put an
image tag between two paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.

Figure: 8.2

89
Web Technology – Lists, Images & Hyperlinks Chapter 8

<html>
<head>
<title>Education Website of ABC </title>
</head>
<body>
<p>This is a ballroom dance class </p>
<img src="D:\Documents and Settings\Administrator\Desktop\dance.gif">
<p> Enrollment is going on
</body>
</html>

8.3.1 Attributes Of the IMG Tag

S.No. Attribute Explanation
1. ALT The alt attribute is used to define an "alternate
text" for an image. The value of the alt attribute is
an author-defined text. The "alt" attribute tells the
reader what he or she is missing on a page if the
browser can't load images. The browser will then
display the alternate text instead of the image. It is
a good practice to include the "alt" attribute for
each image on a page, to improve the display and
usefulness of your document for people who have
text-only browsers.
2. Align This attribute aligns the image. It takes the option
as top, bottom, center
3. Height This attribute sets the height of the image in pixels
4. Width This attribute sets the width of the image in pixels

<img src=”D:\Documents and Settings\Administrator\Desktop\dance.gif"> alt="Picture

of a dancing couple">

Different ways in which images can be placed

<html>
<head>
</head>
<body>
<p> An image in the text
An image
<img src="D:\Documents and
Settings\Administrator\Desktop\dance.gif"
align="bottom" width="48" height="48">
in the text
</p>
</body>

90
Web Technology – Lists, Images & Hyperlinks Chapter 8

</HTML>

<html>
<head>
</head>
<body>
<p> An image before the text
<img src="D:\Documents and
Settings\Administrator\Desktop\dance.gif"
width="48" height="48">
An image before the text
</p>
</body>
</html>
<html>
<head>
</head>
<body>
<p> An image after the text
An image after the text
<img src ="D:\Documents and
Settings\Administrator\Desktop\dance.gif"
width="48" height="48">
</p>
</body>
</html>

8.4 Image Formats

Though the WWW can handle a wide variety of image file formats GIF and JPEG
formats are the most common. GIF (Graphic Interlaced Files) are good for drawn
graphics and text because they produce a small file with a maximum of 256 colors.
JPEG(Joint Photographic Expert Group) Fine details of images are lost but for
photographs they produce a better looking image than gif files. JPEG files support 16
million colours.

8.5 IMAGE MAPS

An image map is a single image that contains multiple links. It is also called a clickable
image. When you click one part of the image it takes you to the link connected with that
part of the visual representation. Not all browsers can handle image maps. In order to
make image maps we follow some steps namely

1) Create an imagemap map file

2) Referencing the imagemap in the HTML file.

8.5.1 Creation of an Imagemap File

91
Web Technology – Lists, Images & Hyperlinks Chapter 8

An imagemap is a collection of points, polygons, rectangles and circles, each containing a

short text description of some piece of information or some information server;
interconnections are conveyed through lines or arcs. Always try to keep the individual
items in the map spaced out far enough so a user will clearly know what he or she is
clicking on.

The MAP Tag

The MAP Tag has two parts to it. First every MAP tag must have a NAME attribute.
Second it contains a number of AREA tags. The syntax is
<MAP NAME=”mapname”>
<AREA …>
<AREA …>
<AREA …>
<AREA …>
</MAP>

The AREA tags

Each AREA tag within the MAP tag has 4 attributes
1) SHAPE Æ can be RECT, CIRCLE, POLYGON and default

2) COORDS Æ Depending on the shapes selected there are different coordinate

parameters
circle - For a circle Coordinates: centerx, centery and radius
poly - For a polygon of at most 100 vertices Coordinates: Each coordinate pair
for every point is to be provided.
rect - For a rectangle 4 coordinates: x1,y1,x2,y2
default – This shape will not take any parameter and it indicates the portion of the
image not specified under any Area tag

3) ALT Æ Its value is a string which is displayed when you point at that area.
4) HREF ÆTakes the name of the .html file that is linked to the particular area in the
image

8.5.2 Referencing the imagemap in the HTML file.

This deals with applying the image map to a particular image. We use the <IMG> tag
with the USEMAP attribute. Syntax of the IMG tag
<IMG SRC =”xyz.gif” USEMAP=”#map_name”>

Example

Each button in the image below will cause a different page to be displayed. Clicking on
an area outside of a button will cause the default page to be displayed.

92
Web Technology – Lists, Images & Hyperlinks Chapter 8

The code to display the image and make it clickable is shown below.

<A HREF="http://www.webcom.com/webcom/imap/hpbar.map">
<IMG SRC="http://www.webcom.com/webcom/graphics/hp.gif" ISMAP></A>

The map file for this graphic image is displayed below.

rect http://www.webcom.com/webcom/imap/overview.html 8,5 81,34

rect http://www.webcom.com/webcom/imap/news.html 86,7 139,34
rect http://www.webcom.com/webcom/imap/products.html 145,6 215,35
rect http://www.webcom.com/webcom/imap/contacts.html 221,8 291,37
rect http://www.webcom.com/webcom/imap/other.html 299,6 437,35
default http://www.webcom.com/webcom/imap/empty.html

8.6 The <A> Tag – Anchor tag

This tag is used to link one document or one part of the document to another. Searching
information on the web is easy because we can define links from one page to another,
and can follow links at the click of a button. Links are defined with the <a> tag.
Whenever we click on a hypertext we get linked to other documents or to some other part
of a document. To include an anchor in your document:

1. Start the anchor with <A (include a space after the A)

2. Specify the document you're linking to by entering the parameter HREF="filename"
followed by a closing right angle bracket (>)
3. Enter the text that will serve as the hypertext link in the current document
4. Enter the ending anchor tag: </A> (no space is needed before the end anchor tag)

Basically we can use this tag in three different ways

1. To link one document to another document on the same server
2. To link one part of the document to another part of the same document.
3. To link one document on one server to another document on a different server

8.6.1 To link one document to another document on the same server

Lets define a link to the page defined in the file "new.html":
This is a link to <a href="new.html">a file called new</a>.
This entry makes the phrase “a file called new “ the hyperlink to the document new.html,
which is in the same directory as the first document.

Relative Pathnames Versus Absolute Pathnames

You can link to documents in other directories by specifying the relative path from the
current document to the linked document. For example, a link to a file Delhi.html located
in the subdirectory India
would be:

93
Web Technology – Lists, Images & Hyperlinks Chapter 8

<A HREF=" India/Delhi.html">Details about Delhi</A>

These are called relative links because you are specifying the path to the linked file
relative to the location of the current file. You can also use the absolute pathname (the
complete URL) of the file, but relative links are more efficient in accessing a server. If
you were in the Delhi.html file and were referring to the original document India.html,
your link would look like this:
<A HREF="../India.html">About India</A>
In general, you should use relative links because:
1. It's easier to move a group of documents to another location (because the relative path
names will still be valid)
2. It's more efficient connecting to the server
3. There is less to type
However use absolute pathnames when linking to documents that are not directly related.
For example, consider a group of documents that comprise a user manual. Links within
this group should be relative links. Links to other documents (perhaps a reference to
related software) should use full path names. This way if you move the user manual to a
different directory, none of the links would have to be updated.

Example Use Notepad and in the desktop enter two files main.html and intro_html.html
whose contents are given below in the following table.
main.html intro_html.html
<html> <html>
<head> <head>
</head> </head>
<body> <body>
<H1>Welcome to the Website OF ABC <H1>Welcome to the Website OF ABC
Tutorials</H1> Tutorials</H1>
<H2> The following are the tutorials <H2> The following few pages will teach you
provided by ABC Tutorials</H2> something about HTML</H2>
<p><A Href="Intro_html.html" >Tutorial <p><b>What is HTML<b>
on HTML </A> <p>Hyper Text Markup Language is a
<p><A Href ="scripting.html" > Tutorial “markup language”. It is a set of instructions
on Scripting Languages </A> to your web browser to display the text in a
<p><A Href ="asp.html" > Tutorial on certain way. It allows the easy presentation
Active Server Pages </A> and navigation of information over multiple
</body> computers. HTML is a subset of SGML,
</html> Standard Generalized Markup Language,
which is a generic way of representing any
document.
SGML is more or less too complicated to be
useful, but it has spawned two important
subsets, HTML and XML. HTML was
invented for the Internet by Tim Berners-Lee
at CERN( European Laboratory for Particle
Physics) in Geneva.
</body>

94
Web Technology – Lists, Images & Hyperlinks Chapter 8

</html>

Now open the Internet Explorer and enter in the address bar D:\Documents and
Settings\Administrator\Desktop\main.html

Output of main.html When clicked on the option Tutorial on

HTML we get linked to file
intro_html.html

Welcome to the Website OF ABC Welcome to the Website OF ABC

Tutorials Tutorials
The following are the tutorials provided by The following few pages will teach you
ABC Tutorials something about HTML

Tutorial on HTML What is HTML

Tutorial on Scripting Languages Hyper Text Markup Language is a “markup

language”. It is a set of instructions to your
Tutorial on Active Server Pages web browser to display the text in a certain
way. It allows the easy presentation and
navigation of information over multiple
computers. HTML is a subset of SGML,
Standard Generalized Markup Language,
which is a generic way of representing any
document. SGML is more or less too
complicated to be useful, but it has
spawned two important subsets, HTML
and XML. HTML was invented for the
Internet by Tim Berners-Lee at CERN(
European Laboratory for Particle Physics)
in Geneva.

8.6.2 To link one part of the document to another part of the same document.
Anchors can also be used to move a reader to a particular section in the same document.
This type of an anchor is commonly called a named anchor because to create the links,
you insert HTML names within the same document.
Example
In the following example if you click on the hypertext Tutorial Section Headings then
automatically the control goes to the place in the tutorial where section headings are
explained. The reason being that named anchor called section has been used.

95
Web Technology – Lists, Images & Hyperlinks Chapter 8

<html>
<head>
</head>
<body>
<H1>Welcome to the Website OF ABC Tutorials</H1>
<p><A Href="#section" >Tutorial Section Headings </A>
<p><A Href ="#title" > Tutorial on Scripting Languages </A>
<p> Introduction
Hyper Text Markup Language is a “markup language”. It is a set of instructions to
your web browser to display the text in a certain way. It allows the easy
presentation and navigation of information over multiple computers. HTML is a
subset of SGML, Standard Generalized Markup Language, which is a generic way
of representing any document. SGML is more or less too complicated to be
useful, but it has spawned two important subsets, HTML and XML. HTML was
invented for the Internet by Tim Berners-Lee at CERN( European Laboratory for
Particle Physics) in Geneva.<p>The basic feature in HTML documents is the “tag”. Tags
are set off by angle brackets (“<“ and “>”), with the tag name between them. Most tags
occur in pairs,
indicating what is supposed to happen to whatever text is between them. The
closing tag has the same name as the opening tag, but the closing tag starts with a
slash (/).
<p><b>Note on HTML Editors</b>
You can easily edit HTML files using a WYSIWYG (what you see is what you
get) editor like FrontPage, Claris Home Page, or Adobe PageMill instead of
writing your markup tags in a plain text file but in order to be a skillful Web
developer, it is suggested that a plain text editor is more helpful.
<H2> The following are the tutorials provided by ABC Tutorials</H2>
<h2> <A NAME="section"> Section Headings</A></H2>
<p>Headings are defined with the h1 to h6 tags. h1 defines the largest heading. h6
defines the smallest heading. HTML automatically adds an extra blank line before
and after a heading.
<p>
<h2> <A NAME="title"> Title Element</A></H2>
This container is placed within the HEAD structure. Between the TITLE tags, is
the title of your document. This will appear at the top of the browser's title bar,
and also appears in the history list. Finally, the contents of the TITLE container go
into your bookmark file, if you create a bookmark to a page. What you type
should probably be something which indicates the document's contents. If you
don't type anything between the TITLE tags, or don't include the TITLE tags at all
then the browser will typically use the actual file name for the title. You should
only have one TITLE container per document.
</body>
</html>

8.6.3. To link one document on one server to another document on a different server

96
Web Technology – Lists, Images & Hyperlinks Chapter 8

The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of
files on other servers. A URL includes the type of resource being accessed (e.g., Web,
gopher, WAIS), the address of the server, and the location of the file. The syntax is:
scheme://host.domain [:port]/path/ filename
where scheme is one of the following
Scheme Explanation
File a file on your local system
ftp a file on an anonymous FTP server
http a file on a World Wide Web server
Gopher a file on a Gopher server
WAIS a file on a WAIS server
News a Usenet newsgroup
telnet a connection to a Telnet-based service
The port number can generally be omitted. (unless specifically mentioned.)

To link to a page on another Web site you need to give the full Web address (commonly
called a URL), for instance to link to www.w3.org you need to write:
This is a link to <a href="http://www.w3.org/">W3C</a>.

8.7 Turning an image into a hyperlink

You can turn an image into a hypertext link, for example, the following allows you to
click on the company logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>
You can click on an image and get linked to another file also.
<a href=”abc.html”><img src=”dance.gif” alt=”picture of a dancing couple”</a>

8.8 Mailto Attribute

You can make it easy for a reader to send
electronic mail to a specific person or mail alias by including the mailto attribute in a
hyperlink. The format is:

<A HREF="mailto:emailinfo@host">Name</a>
Example <A HREF =”mailto:[email protected]”>Contact Me </A>

Exercises
1. What is the difference between JPEG and GIF image files ?
2. What are image maps and how are they different from simple images
3. If images are not visible on a browser then what should the web programmer do
to inform the surfer what the image is all about ?
4. When do we use absolute referencing and relative referencing
5. For making the following lists which kinds of lists would you use ? Justify .
a) Dictionary
b) Price list
c) Attendance Register

97
Web Technology – Lists, Images & Hyperlinks Chapter 8

d) Ingredients of a recipe
e) Stock Requisition List
f) Library Accession Register

Practical Exercises
1. Using lists design the following format

Uninstalling NetMeeting

1. In Control Panel, double-click Add/Remove Programs.

2. On the Install/Uninstall tab, click NetMeeting 3.0, and then click Add/Remove
Programs.
3. If a dialog box appears asking if you want to restart your computer, click Yes.

If you uninstall Windows NT Service Pack 3 after installing NetMeeting, you will receive
an error message each time you restart your computer. To prevent this, do the following:

1. Close the error message window.

2. In the Display properties dialog box, click Cancel.
3. In Control Panel, click Devices.
4. Click mnmdd, and then click Startup.
5. Change the Startup Type to Disabled, and then click OK.
6. Restart your computer so the change can take effect.

In Windows 98, the NetMeeting desktop shortcut and Quick Launch toolbar icons are not
removed when NetMeeting is uninstalled.

2. Using lists design the following format

98
Web Technology – Lists, Images & Hyperlinks Chapter 8

System Requirements and Setup

Microsoft(R) Windows(R) NetMeeting(R) enables real-time audio, video, and data

communication over the Internet. NetMeeting requires the following minimum
configuration:

• Microsoft Windows 95 or Windows 98

• 90 megahertz (MHz) Pentium processor and 16 megabytes (MB) of RAM
• Microsoft Internet Explorer version 4.01 or later
--or--

• Microsoft Windows NT version 4.0 (Microsoft Windows NT 4.0 Service Pack 3

or later

is required to enable sharing programs on Windows NT.)

• 90 MHz Pentium processor and 24 MB of RAM.

• Internet Explorer version 4.01 or later

3. Make the following clickable images. Example when the user clicks communication
the user should get the name of the network and it’s details and its communication pattern

99