HTML - Part Ii

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>

<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.
<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>

<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

<html>

<h3>
<OL type =A>
<LI> Wait for 2 minutes
</OL>
</h3>
</body>
</html>
VIEW
6
<html>

<h3>
<OL type =I>
<LI type=1> Wait for 2 minutes
</OL>
</h3>
</body>
</html>
VIEW
Definition List

<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>

<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>
<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>
<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
<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
<html>
<body>
<img src="book.gif" width="20" height="20"> <p>
Resizing an image by changing the values in the
"height" and "width" attributes of the img tag.
</body>
</html>
VIEW
16
<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
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.
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
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

HTML - Part Ii

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML - Part Ii

Hochgeladen von

Copyright:

Verfügbare Formate

Indian Institute of Technology Kharagpur

Prof. Indranil Sen Gupta

Lecture 14: HTML – Part II

On completion, the student will be able to:

• There are a number of tags for building

• Used to display a set of related items that

Unnumbered List (contd.)

• The <LI> items can contain multiple

<body text=white bgcolor=blue>

Unnumbered List (Example 2)

<body text=white bgcolor=blue>

• Numbered or ordered lists are used when the

Numbered List (contd.)

• The list items are numbered sequentially

<body text=white bgcolor=blue>

Numbered List (Example 2)

<body text=white bgcolor=blue>

<body text=white bgcolor=blue>

• Specified using the tag:

Definition List (Example)

<body text=white bgcolor=blue>

• Any list can be nested within another

Nesting of Lists (Example 1)

<H3> My favorite languages are:

<H3> My favorite languages are:

• Chief power of HTML comes from its

• Specified using the anchor tag:

Relative versus Absolute URLs (contd.)

• Anchors can be used to go to a particular

<a href=“http://www.sunny.com/xyz.html #LAN”>

<html><head><title> Link to Other Sites </title></head>

My favorite search engines are:

• Supported image formats:

• The HEIGHT and WIDTH attributes tells the

Inline Images (Example 1)

Inline Images (Example 3)

Quiz Solutions on Lecture 13

1. What is a markup language?

3. What is a tag attribute? Give an example.

Quiz Solutions on Lecture 13

6. What is the difference between <BR> and

8. How do you display pre-formatted text

1. What are the tags used for unnumbered

Quiz Questions on Lecture 14

7. How can you provide a hyperlink to a

Das könnte Ihnen auch gefallen