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/ Unordered list
Numbered/ ordered list
Definition list
4/5/2024 1
Unordered 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
4/5/2024 2
Unordered List (contd.)
The <LI> items can contain multiple
paragraphs.
Example:
<UL>
<LI> First item of the list</LI>
<LI> Second item of the list</LI>
<LI> Third item of the list</LI>
</UL>
4/5/2024 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>
<LI> Lotus</LI>
<LI> Daffodil</LI>
<LI> Marigold</LI>
</UL>
</h3>
</body>
</html>
4/5/2024 4
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>
<LI> Lotus</LI>
<LI type=circle> Daffodil</LI>
<LI> Marigold</LI>
</UL>
</h3>
</body>
</html>
4/5/2024 5
Ordered 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>
<LI> This is number two</LI>
<LI> This is number three</LI>
</OL>
4/5/2024 6
Cont…
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,…
The numeral 1 is the default value.
4/5/2024 7
Cont…
• Remember that the TYPE attribute within the
<OL> element sets the numbering scheme for
the whole list, unless it is overridden by a TYPE
value in an <LI> element.
• Each <LI> element may have a local TYPE
attribute set to a, A, i, I, or 1.
• Once an <LI> element is set with a new type, it
overrides the numbering style for the rest of the
list unless another <LI> sets the TYPE attribute.
4/5/2024 8
Cont…
Start attribute Lists
• You can use start attribute for <ol> tag to specify
the starting point of numbering you need.
• Example of type and start attribute
• <ol>
◦ <li type="1" > - Default-Case Numerals.</li>
◦ < li type="I“>- Upper-Case Numerals.</li>
◦ < li type="i“> - Lower-Case Numerals.</li>
◦ < li type="a“> - Lower-Case Letters. .</li>
◦ < li type="A"> - Upper-Case Letters.</li>
◦ </ol>
4/5/2024 9
Ordered 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>
<LI> Put in noodles and masala </LI>
<LI> Wait for 2 minutes </LI>
<LI> Serve in a plate </LI>
</OL>
</h3>
</body>
</html>
4/5/2024 10
Ordered 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>
4/5/2024 11
Ordered 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>
4/5/2024 12
Definition Lists
HTML and XHTML support a list style which is
called definition lists.
Definition lists are enclosed within <DL> and</DL> tags.
Each term being defined is indicated by a <DT> element,
which is derived from definition term.
Each definition itself is defined by <DD>.
Neither the <DT> nor the <DD> element requires a
close tag,
Definition List makes use of following three tags.
◦ <dl> - Defines the start of the list
◦ <dt> - A term
◦ <dd> - Term definition
◦ </dl> - Defines the end of the list
• The following is a basic example
4/5/2024
using <DL> 13
Definition List (contd.)
Example:
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
<DT> ICT
<DD> Information Communication Technology
</DL>
4/5/2024 14
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>
4/5/2024 15
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,
…).
4/5/2024 16
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>
4/5/2024 17
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>
4/5/2024 18
Specifying Hyperlinks
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.
4/5/2024 19
Hyperlinks (contd.)
Specified using the anchor tag:
<A> ……. </A>
◦ Requires an attribute called “HREF” which specifies
the path of the resource to be linked.
Anchors can be used to go to a particular section in a
document.
◦ Within the same (or different) document.
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>
4/5/2024 20
Relative versus Absolute URLs
Relative and absolute URL are both used to specify
the location of a resource on the internet, but they
differ in the way they describe the path to that
resource.
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>
means that the document is one folder down from the html
document that called for it. This can go on down as many
layers as necessary.
<a href=“../NEWS/cricket.html”> Cricket </a>
means that the document is in one folder up from the html
document that called for it.
These kind of links are 4/5/2024
called relative links. 21
Relative versus Absolute URLs (contd.)
Absolute URL
The complete path name of the document in the
server is specified including the scheme, domain
name, and path.
Necessary when linking to documents on other
servers.
It specifies the exact location of the resource from
the root of the web server
Example:
<a href=“https://www.iitkgp.ac.in/people/isg/paper5.pdf”> One
of my recent papers </a>
4/5/2024 22
Cont.…
You will commonly come across the following
types of links:
◦ Links from one website to another
◦ Links from one page to another on the same
website
◦ Links from one part of a web page to another part
of the same page
◦ Links that open in a new browser window
◦ Links that start up your email program and address a
new email to someone
4/5/2024 23
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.altavista.com"> Altavista</a>
<li> <a href= " /home.htlm"> Home</a>
</ol>
<hr>
<address>
Mr. Kebede BR> <BR>
<a href="mailto:xyz@gmail.com"> XYZ</a>
</address>
</body></html>
4/5/2024 24
Linking to other sites
Links are created using the <a> element which has an
attribute called href.
The value of the href attribute is the page that you want
people to go to when they click on the link.
Users can click on anything that appears between the
opening <a> tag and the closing </a> tag and will be taken
to the page specified in the href attribute.
When you link to a different website, the value of the href
attribute will be the full web address for the site, which is
known as an absolute URL.
Browsers show links in blue with an underline by default.
Example
<p>site Reviews:
<ul>
<li> <a href="http://www.google.com">google</a> </li>
<li> <a href=http://www.facebook.com>facebook</a> </li>
<li><a href=http://www.twitter.com> twitter</a> </li>
</ul> </p>
4/5/2024 25
Linking to other Pages on the same site
When you are linking to other pages within the same site,
you do not need to specify the domain name in the URL.
You can use a shorthand known as a relative URL.
If all the pages of the site are in the same folder, then the
value of the href attribute is just the name of the fie.
If you have different pages of a site in different folders, then
you can use a slightly more complex syntax to indicate
where the page is in relation to the current page. You will
see more about these on the next slides.
for example
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
4/5/2024 26
Linking to A specific Part of the same Page
At the top of a long page you might want to add a list of
contents that links to the corresponding sections lower
down. Or
You might want to add a link from part way down the page
back to the top of it to save users from having to scroll back
to the top.
Before you can link to a specific part of a page, you need to
identify the points in the page that the link will go to.
You do this using the id attribute (which can be used on
every HTML element).
The value of the id attribute should start with a letter or an
underscore (not a number or any other character) and, on a
single page, no two id attributes should have the same value.
4/5/2024 27
Cont…
To link to an element that uses an id attribute
you use the <a> element again, but the value
of the href ttribute starts with the # symbol,
followed by the value of the id attribute of the
element you want to link to.
In this example, <a href="#top"> links to
the <h1> element at the top of the page
whose id attribute has a value of top.
Example
<h1 id="top">Film-Making Terms</h1>
4/5/2024 28
Opening Links in A new Window
Target
If you want a link to open in a new window, you can
use the target attribute on the opening <a> tag. The
value of this attribute should be _blank.
One of the most common reasons a web page author
might want a link to be opened in a new window is if
it points to another website. In such cases, they hope
the user will return to the window containing their
site after finishing looking at the other one.
Example
<a href=http://www.imdb.com target="_blank">
Internet Movie Database</a> (opens in new window)
4/5/2024 29
Email Links
mailto:
To create a link that starts up the user's email
program and addresses an email to a specified
email address, you use the <a> element.
However, this time the value of the href attribute
starts with mailto: and is followed by the email
address you want the email to be sent to.
Example
<a href="mailto:jon@example.org">Email Jon</a>
4/5/2024 30
Inline Images and Other Documents
There are many reasons why you might want to add an
image to a web page: you might want to include a logo,
photograph, illustration, diagram, or chart.
A picture can say a thousand words, and great images help
make the difference between an average-looking site and a
really engaging one.
Images should...
Be relevant
Convey information
Convey the right mood
Be instantly recognizable
Fit the color palette (mixing of colors)
4/5/2024 31
Inline Images and Other Documents
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.
4/5/2024 32
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=xyz.gif>
<img src=tiger.jpg height=“80” width=“150”>
4/5/2024 33
Inline Images (Example 1)
<html>
<body>
<img src =xyz.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 =xyz.gif align ="right" width="48“
height="48">
A paragraph with an image. The image will float to the
right of this text.
</body>
</html> 4/5/2024 34
Inline Images (Example 2)
<html>
<body>
<img src= x.gif" width="20" height="20">
<img src= x.gif" width="45" height="45">
<img src= x.gif" width="70" height="70">
Resizing an image by changing the values in the
"height" and "width" attributes of the img tag.
</body>
</html>
4/5/2024 35
Where to place Images In Your Code
Where an image is placed in the code will affect how it is
displayed. Here are three examples of image placement that
produce different results:
1. before a paragraph
The paragraph starts on a new line after the image.
<img src="images/bird.gif" alt="Bird" width="100"
height="100" /><p>……………. </p>
2. Inside the start of a paragraph
The fist row of text aligns with the bottom of the image.
<p><img src="images/bird.gif" alt="Bird" width="100"
height="100" />…………… </p>
3. In the middle of a paragraph
The image is placed between the words of the paragraph that it
appears in.
4/5/2024 36
Where to place Images In Your Code(cont…..)
<p>same texts…. <img src="images/bird.gif" alt="Bird"
width="100“ height="100" />…same texts </p>
4/5/2024 37
html5: figure and figure Captions
<figure>
◦ Images often come with captions.
◦ You can have more than one image inside the <figure>
element as long as they all share the same caption.
<figcaption>
• The <figcaption> element has been added to HTML5 in
order to allow web page authors to add a caption to an
image.
• Before these elements were created there was no way to
associate an <img> element with its caption.
4/5/2024 38
Cont…
<figure>
<img src="images/03.jpg" alt="Photograph of two sea otters
floating in water">
<figcaption>Sea otters hold hands when they sleep so they
don't drift away from each other. </figcaption>
</figure>
4/5/2024 39
HTML Tables
Tables are made up of cells, arranged into rows.
Tags used in creating an HTML table:
<table></table> marks the start and end of table contents
<tr></tr> marks the start and end of each table row
<td></td> marks the start and the end of the contents of a data cell
<caption></caption> formats text to appear as a table caption
border is an attribute of <table> tag and it is used to put a border
across all the cells.
An example:
<table>
<tr>
<td> Good </td>
<td> Bad </td>
</tr>
<tr>
<td> Cute </td>
<td> Ugly </td>
</tr>
</table> 4/5/2024 40
The Table Tags
<TABLE> …… </TABLE>
◦ Defines the beginning and the end of a table.
◦ Can have several attributes:
bgcolor = #rrggbb or color name
border = number
height = number, percentage
4/5/2024 41
Cont…
<TR> …….. </TR>
◦ Defines a row of cells within a table.
◦ Can have several attributes:
bgcolor = #rrggbb or color name
align = left | center | right | justify
<CAPTION> …….. </CAPTION>
◦ Provides a caption for the table.
◦ Must immediately follow the “table” tag, and
precede all other tags.
4/5/2024 42
Cont…
<TD> …….. </TD>
◦ Defines a table data cell.
◦ A table cell can contain any content, like an
image, or even another table.
◦ Can have several attributes:
bgcolor = #rrggbb or color name
colspan = number
Specifies the number of columns the current cell should span
(default is 1).
rowspan = number
Specifies the number of rows the current cell should span
(default is 1).
4/5/2024 43
Cont…
<TH> …….. </TH>
◦ Defines a table header cell.
◦ Browsers generally display the contents of the
header cells in bold, and centered.
◦ Same attributes as the <TD> tag.
4/5/2024 44
Table attributes
cellspacing : defines the width of the border,
cellpadding: represents the distance between cell
borders and the content within a cell.
colspan :merge two or more columns into a single
column.
rowspan :merge two or more rows.
bgcolor : set background color for whole table or
just for one cell.
background :set background image for whole table
or just for one cell.
bordercolor : set border color
4/5/2024 45
Cont…
Height and Width :set a table width and height
using width and height attribute
caption tag will serve as a title or explanation for
the table and it shows up at the top of the table.
The three elements for separating the head, body,
and foot of a table are:
◦ <thead> - to create a separate table header.
◦ <tbody> - to indicate the main body of the table.
◦ <tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to
indicate different pages or groups of data.
4/5/2024 46
Table Example 1
<table>
<tr>
<td colspan=2> Hello </td>
</tr>
<tr>
<td> Good </td> Hello
<td> Day </td>
</tr> Good Day
</table>
4/5/2024 47
Table Example 2
<table>
<tr>
<td rowspan=2> Hello </td>
<td> Good </td>
</tr>
<tr>
<td> Day </td>
</tr> Hello Good
</table>
Day
4/5/2024 48
Table Example 3
<table border=1>
<caption> My Table </caption>
<tr> <th> Name </th> <th> Marks </th> </tr>
<tr> <td> Ayele</td> <td> 86</td> </tr>
<tr> <td> Kebede</td> <td> 65</td> </tr>
</table>
Name marks
Ayele 86
Kebede 65
4/5/2024 49
HTML Frames
What are frames?
◦ A method for dividing the browser window into
smaller subwindows.
◦ Each subwindow displaying a different HTML
document.
HTML frames, although less commonly used in
modern web development due to advancements in
CSS and JavaScript.
How does a page with frame look like?
4/5/2024 50
4/5/2024 51
The Frame Tags
<FRAMESET> …….. </FRAMESET>
◦ Defines a collection of frames or other
framesets.
◦ Attributes:
cols = list of lengths (number, %, or *)
rows = list of lengths (number, %, or *)
Establishes the number and sizes of columns
(vertical frames) or rows (horizontal frames) in a
frameset.
In number of pixels, percentage of total area, or
relative values (*) based on available space.
4/5/2024 52
Cont..
<FRAME>
◦ Defines a single frame within a frameset.
◦ Attributes:
frameborder = 1 | 0
src = url
scrolling = yes | no | auto
marginwidth = number
marginheight = number
name = text
4/5/2024 53
Cont…
<NOFRAMES> …… </NOFRAMES>
◦ Specifies the contents to be displayed by
browsers that cannot display frames.
◦ Ignored by browsers that support frames.
4/5/2024 54
Frame Example 1
<html>
<head><title> A
document with frame
</title> </head>
<frameset cols = “*,*”>
<frame src = “left.htm”>
<frame src = “right.htm”>
</frameset>
<noframes>
Browser does not
support frames.
</noframes>
</html> 4/5/2024 55
Frame Example 2
<html>
<head><title> Another one with frames
</title> </head>
<frameset cols = “100,2*,*”>
<frame src = “left.htm”>
<frame src = “right.htm”>
</frameset>
<noframes>
Browser does not support frames.
</noframes>
</html>
4/5/2024 56
Frame Example 3
<html>
<head> <title> Nested frames </title> </head>
<frameset cols = “25%, *”
<frame src = “one.htm”>
<frameset rows = “100,150,100”>
<frame src = “two.htm”>
<frame src = “three.htm”>
<frameset cols = “*,*”>
<frame src = “four.htm”>
<frame src = “five.htm”>
</frameset> </frameset> </frameset>
</html> 4/5/2024 57
Linking to a Framed Document
When a hyperlink is clicked, by default,
the new page is loaded into the same
frame.
We can load the linked page into new
frame also.
4/5/2024 58
Cont..
Assign a name to the targeted frame.
<frame src = “somepage.htm” name = “abc”>
Specify this frame in a hyperlink as
follows:
<a href = “newpage.htm” target=“abc”> … </a>
The document newpage.htm will load into
the frame names “abc”.
4/5/2024 59
Merits and Demerits
Merits:
◦ Allow parts of the page to remain stationary
while other parts scroll.
◦ It enables the simultaneous display of content
from various sources on a single page.
◦ They can unify resources that reside on
separate web servers.
◦ Frames can facilitate the reuse of code across
multiple pages.
4/5/2024 60
Cont…
Demerits:
◦ All browsers do not support frames.
◦ Documents nested in a frame is more difficult
to bookmark.
◦ Load on the server can be significantly
increased, if there are a large number of
frames in the page.
◦ Frames are very difficult to handle for search
engines.
4/5/2024 61
