Indian Institute of Technology Kharagpur
HTML – Part II
Prof. Indranil Sen Gupta
Dept. of Computer Science & Engg.
I.I.T. Kharagpur, INDIA
Lecture 14: HTML – Part II
On completion, the student will be able to:
1. Demonstrate how different kinds of lists may be
specified in HTML.
2. Demonstrate how hyperlinks may be specified in a
HTML document.
3. Demonstrate how inline images and other
documents may be embedded within a HTML
document.
1
HTML Lists
Types of Lists
• There are a number of tags for building
lists.
¾Serves the purpose of improving the
readability of the text.
• Depending on the way the list items are
displayed, lists may be divided into three
types:
Unnumbered list
Numbered list
Definition list
2
Unnumbered List
• Used to display a set of related items that
appear in no particular order.
¾Each item is indented with a preceding
bullet symbol.
• Specified using the tag:
<UL> ……… </UL>
• The individual items in the list are specified
using the <LI> tag.
• Attributes:
type = disc | circle | square
Unnumbered List (contd.)
• The <LI> items can contain multiple
paragraphs, specified using <P>.
• Example:
<UL>
<LI> First item of the list
<LI> Second item of the list
<LI> Third item of the list
</UL>
3
Unnumbered List (Example 1)
<html>
<head><title> Bulleted list 1 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL>
<LI> Rose
<LI> Lotus
<LI> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
VIEW
Unnumbered List (Example 2)
<html>
<head><title> Bulleted list 2 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL type=square>
<LI> Rose
<LI> Lotus
<LI type=circle> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
VIEW
4
Numbered List
• Numbered or ordered lists are used when the
sequence of the items is important.
• Specified using the tag:
<OL> ……… </OL>
• The individual items in the list are specified
using the <LI> tag.
• Example:
<OL>
<LI> This is number one
<LI> This is number two
<LI> This is number three
</OL>
Numbered List (contd.)
• The list items are numbered sequentially
as 1,2,3,…
• Attributes:
type = 1 | A | a | I | I
¾Specifies the style of numbering.
1,2,3,… or A,B,C,… or a,b,c,… or I,II,III,… or
i,ii,iii,…
5
Numbered List (Example 1)
<html>
<head><title> Numbered list 1 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
VIEW
Numbered List (Example 2)
<html>
<head><title> Numbered list 2 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =A>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
VIEW
6
Numbered List (Example 3)
<html>
<head><title> Numbered list 3 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =I>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI type=1> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
VIEW
Definition List
• Specified using the tag:
<DL> ……… </DL>
• Each definition comprises of a definition
term (<DT>) and a definition description
(<DD>).
• Web browsers format each definition on
a new line and indent it.
7
Definition List (contd.)
• Example:
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL>
Definition List (Example)
<html>
<head><title> Definition list 1 </title></head>
<body text=white bgcolor=blue>
<h2> Some important protocols: </h2>
<h3><DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL></h3>
</body>
</html> VIEW
8
Nesting of Lists
• Any list can be nested within another
list.
¾When unnumbered lists are nested, the
browser automatically uses a different
bullet symbol for each level.
¾When numbered lists are nested, by
default, every level is numbered using
the arabic numerals (1, 2, 3, …).
Nesting of Lists (Example 1)
<html><head><title> List Nesting 1 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</UL>
</UL> </H3>
</body></html>
VIEW
9
Nesting of Lists (Example 2)
<html><head><title> List Nesting 2 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</OL>
</OL> </H3>
</body></html>
VIEW
Specifying Hyperlinks
10
Hyperlinks
• Chief power of HTML comes from its
ability to link text and/or image to
another document or section of a
document.
• These links are called hyperlinks.
¾Browser by default highlights the
hyperlinks with color and/or underline.
Hyperlinks (contd.)
• Specified using the anchor tag:
<A> ……. </A>
¾Requires an attribute called “HREF” which
specifies the path of the resource to be
linked.
¾Example:
<A HREF=“face.jpg”> portrait </A>
<a href=www.google.com> search </a>
<a href=“mailto:isg@hotmail.com”> Mail me </a>
<a href=slides/ch5.pdf> download pdf </a>
11
Relative versus Absolute URLs
• Relative URL
¾Provides a link to another document relative
to the location of the current document.
¾Commonly used when referring to
documents residing on the same web site.
¾Examples:
<a href=“TENNIS/sania.html”> Sania Mirza </a>
<a href=“../NEWS/cricket.html”> Cricket </a>
¾These kind of links are called relative links.
Relative versus Absolute URLs (contd.)
• Absolute URL
¾The complete path name of the document in
the server is specified.
¾Necessary when linking to documents on
other servers.
¾Example:
<a href=“www.iitkgp.ac.in/people/isg/paper5.pdf”>
One of my recent papers </a>
12
Linking to Specific Sections
• Anchors can be used to go to a particular
section in a document.
¾Within the same (or different) document.
• Two steps involved.
¾Define a named section in a document.
<a name=“tennis”> <h2>About tennis</h2> </a>
¾Provide a link to the named section.
<a href=“#tennis”> Information on Tennis </a>
<a href=“http://www.sunny.com/xyz.html #LAN”>
Local Area Networks </a>
Hyperlinks (Example)
<html><head><title> Link to Other Sites </title></head>
<body text=white bgcolor=blue link=red vlink=green>
My favorite search engines are:
<ol>
<li> <a href="http://www.google.com"> Google </a>
<li> <a href="http://www.yahoo.com"> Yahoo </a>
<li> <a href="http://www.khoj.com"> Khoj </a>
</ol>
<hr>
<address>
Prof. Indranil Sen Gupta <BR> <BR>
<a href="mailto:isg@hotmail.com"> <img src="mbox.gif"
align=middle> </a>
</address>
</body></html>
VIEW
13
Inline Images and Other
Documents
Inline Images
• Supported image formats:
¾JPEG, GIF, PNG
• Specified using the standalone tag:
<IMG>
• Attributes of <IMG>:
¾SRC: specifies the URL of the image file
¾HEIGHT: height (in pixels) to be set aside
for the image.
¾WIDTH: width (in pixels) to be set aside for
the image.
14
Inline Images (contd.)
• The HEIGHT and WIDTH attributes tells the
browser to set aside appropriate space (in
pixels) for the image as it downloads the
rest of the file.
¾Some browsers stretch or shrink an
image to fit into the allotted space.
• Example:
<IMG SRC=blackrose.gif>
<img src=tiger.jpg height=80 width=150>
Inline Images (Example 1)
<html><body>
An image
<img src=book.gif align="bottom" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="middle" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="top" width="48"
height="48">
in the text
</body></html>
VIEW
15
Inline Images (Example 2)
<html>
<body>
<img src =book.gif align ="left" width="48"
height="48">
A paragraph with an image. The image will float to the
left of this text.
<p>
<img src =book.gif align ="right" width="48"
height="48">
A paragraph with an image. The image will float to the
right of this text.
</body>
</html>
VIEW
Inline Images (Example 3)
<html>
<body>
<img src="book.gif" width="20" height="20"> <p>
<img src="book.gif" width="45" height="45"> <p>
<img src="book.gif" width="70" height="70"> <p>
Resizing an image by changing the values in the
"height" and "width" attributes of the img tag.
</body>
</html>
VIEW
16
Inline Images (Example 4)
<html>
<body>
It is possible to use an image as a link. Click on the
image below to go to google.
<P>
<a href=“www.google.com">
<img src=book.gif>
</a>
</body>
</html>
VIEW
17
SOLUTIONS TO QUIZ
QUESTIONS ON
LECTURE 13
Quiz Solutions on Lecture 13
1. What is a markup language?
One that contains special formatting
commands or tags embedded in it.
2. Give one example each for the two
classes of tags.
Appear in pairs:
<body text=white> …….. </body>
Appear individually:
<hr size=25>
18
Quiz Solutions on Lecture 13
3. What is a tag attribute? Give an example.
Attributes define additional characteristics of a
tag. For example, text is an attribute in:
<body text=blue>
4. What does the “title” tag specify?
Specifies the title of a document; appears in the
title bar of the browser window.
5. How do you specify color using red, green,
blue components?
Either by specifying the red, green, blue
components of the color (in 8 bits each); or by
specifying the color by name.
Quiz Solutions on Lecture 13
6. What is the difference between <BR> and
<P> tags?
Both force the text following to appear
on a new line. The spacing before the
line is more in case of <P>.
7. How do you specify a solid horizontal rule
spreading across 60% of the window, and
having a width of 10 pixels?
<hr width=60% size=10 noshade>
19
Quiz Solutions on Lecture 13
8. How do you display pre-formatted text
document like a table of numbers?
By bracketing them inside <pre> and
</pre>.
9. How do you specify that a given image
file be used as the background in the
browser window?
<body background=imagename.jpg>
QUIZ QUESTIONS ON
LECTURE 14
20
Quiz Questions on Lecture 14
1. What are the tags used for unnumbered
lists?
2. What are the tags used for ordered lists?
3. How can you change the bullet style in an
unnumbered list?
4. Show hyperlink definitions that provide link
to a pdf file, and a jpeg image.
5. Can relative URL’s be used to provide link to
a different web site?
6. How can you provide a hyperlink to a section
in the same document?
Quiz Questions on Lecture 14
7. How can you provide a hyperlink to a
section in a document located on some
other web server?
8. What do the HEIGHT and WIDTH attributes
in the IMG tag specify?
9. How can you provide an image hyperlink?
21
BACK
BACK
22
BACK
BACK
23
BACK
BACK
24
BACK
BACK
25
BACK
BACK
26
BACK
BACK
27
BACK
28
