UNIT III
HTML Lists
An HTML list is a record of related information used to display the data or
any information on web pages in the ordered or unordered form.
There are three types of lists in HTML:
HTML Unordered List or Bulleted List
HTML Ordered List
HTML Description List
HTML List Tags
Here is the list of all lists tags HTML:
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Details the term in a description list
The HTML Unordered List or Bulleted List
The unordered list items are marked with bullets. It is also known as bulleted
lists. An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.
Syntax:
<ul> list of items </ul>
Attribute: This tag contains two attributes which are listed below:
compact: It will render the list smaller.
type: It specifies which kind of marker is used in the list.
Example: This example describes the unordered list.
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Output:
Unordered List
HTML Ordered List
In an ordered list, all list items are marked with numbers by default. An
ordered list starts with the <ol> tag. Each list item starts with the “li” tag.
Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
compact: It defines the list should be compacted (compact attribute is not
supported in HTML5. Use CSS instead.).
reversed: It defines that the order will be descending.
start: It defines from which number or alphabet the order will start.
type: It defines which type(1, A, a, I, and i) of the order you want in your list of
numeric, alphabetic, or roman numbers.
Example: This example illustrates the use of the reverse attribute, control list
counting & type attribute.
<html>
<head>
<title>HTML ol tag</title>
</head>
<body>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
Output:
Ordered List with different list style
HTML Description List
A description list is a list of terms, with a description of each term. The <dl>
tag defines the description list, the <dt> tag defines the term name, and the <dd>
tag describes each term.
Syntax:
<dl> Contents... </dl>
Example: This example describes the HTML Description List.
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Output:
Nested List in HTML
A nested list in HTML is a list that contains other lists within its list
items. This creates a hierarchical structure, where each sublist is indented to
visually represent its relationship to the parent list item. It’s commonly used for
organizing and presenting information in a structured manner, enhancing
readability and clarity of content.
Nested Unordered List in HTML
Nested Ordered List in HTML
Nested Unordered List in HTML
An unordered list in HTML is a collection of items represented by bullet
points, providing a flexible way to display information without a specific order.
Approach:
Use the <ul> tag to create an unordered list.
Utilize the <li> tag to list individual items within the <ul> tag.
The <ul> tag serves as the parent container for <li> tags, establishing the
structure of the list.
Nested lists can be created by placing additional <ul> or <ol> tags within <li>
tags, enabling the creation of hierarchical structures.
Example: Implementation to create a nested unordered list.
<html >
<head>
<title>Nested Unordered List</title>
</head>
<body>
<ul>
<li>
<h2>Frontend</h2>
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>onsubmit Attribute</li>
<li>onclick Attribute</li>
</ul>
</li>
<li>JavaScript</li>
</ul>
</li>
<li>
<h2>Library/Framework</h2>
<ul>
<li>ReactJS
<ul>
<li>Hoisting</li>
<li>Props</li>
</ul>
</li>
</ul>
</li>
</ul>
</body></html>
Output:
Nested Ordered List in HTML
In HTML, an ordered list organizes items in a numbered sequence,
providing a structured way to present information.
Approach:
Use the <ol> tag to create an ordered list.
Employ the <li> tag to list individual items within the <ol> tag, which are
automatically numbered.
The <ol> tag acts as the parent container for <li> tags, defining the sequential
order of the list.
To create nested ordered lists, nest additional <ol> <ul> tags within <li> tags,
facilitating the creation of hierarchical lists.
Example: Implementation to create a nested ordered list.
<html >
<head>
<title>Nested Ordered List</title>
</head>
<body>
<ol>
<li>Subjects</li>
<ol>
<li>Mathematics</li>
<li>Science</li>
<li>Literature</li>
</ol>
<li>Programming Languages</li>
<ol>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>Swift</li>
</ol>
<li>Computer Science Concepts</li>
<ol>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Operating Systems</li>
<li>Database Management</li>
<li>Networking</li>
</ol>
<li>Web Technologies</li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<ol>
<li>React</li>
<li>Angular</li>
<li>Vue</li>
</ol>
<li>Bootstrap</li>
</ol>
</ol>
</body>
</html>
Output:
HTML <marquee> Tag
The <marquee> tag in HTML creates a scrolling text or image effect
within a webpage. It allows content to move horizontally or vertically across the
screen, providing a simple way to add dynamic movement to elements. Although
this tag is deprecated in HTML5, it is still useful to understand its functionality
for legacy projects.
What is the HTML <marquee> Tag?
The <marquee> tag is used to create a scrolling effect for text or images.
This tag can make content move left, right, up, or down, adding an interactive
element to your web page.
Syntax and Attributes
Basic Syntax
<marquee>
<!-- contents -->
</marquee>
Attributes of <marquee>
Attributes Values Description
Define the background
bgcolor Color Name
color of the marquee.
direction Top, Down, Left, Right Define the direction of
Attributes Values Description
scrolling the content
Number Specifies how many
loop times content moves. The
default value is infinite.
Define the height of
height px or %
marquee
Define the width of
width px or %
marquee
Specify horizontal space
hspace px
around marquee
Specify vertical space
vspace px
around marquee
Methods for <marquee>
Method Description
Starts the scrolling of the <marquee>
start()
tag.
Stops the scrolling of the <marquee>
stop()
tag.
Event Handlers
Event Handler Description
Triggered when a scrolling <marquee>
onbounce reaches the end (exclusive to ‘alternate’
behavior).
Event Handler Description
Activates when the <marquee>
onfinish completes the scrolling loops specified
by the ‘loop’ attribute.
Fired at the initiation of scrolling for
onstart
the HTML <marquee> tag.
<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee class="marq" bgcolor="Green"
direction="left" loop="">
<p> GeeksforGeeks
<br> A computer science portal for geeks</p>
</marquee>
</body>
</html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<h3>From down to up Scrolling</h3>
<marquee height="100"direction="up">Tutorialpoint</marquee>
<h3>From up to down Scrolling</h3>
<marquee height="100"direction="down">Tutorialpoint</marquee>
</body>
</html>
HTML Images
The HTML <img> tag is used to embed an image in web pages by linking
them. It creates a placeholder for the image, defined by attributes like src, width,
height, and alt, and does not require a closing tag.
There are two ways to insert the images into a webpage:
By providing a full path or address (URL) to access an internet file.
By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image into the webpage & simultaneously, we
will understand both the above approaches.
Adding Images on a Webpage
The <img> tag embeds images in web pages, requiring only attributes
without a closing tag. Images enhance design and content quality, linked via the
<img> tag to preserve space and optimize webpage performance.
Syntax
<img src="url" alt="some_text" width="" height="">
Attribute: The <img> tag has following attributes:
Attribute Description
src Specifies the path to the image file.
Provides alternate text for the image, useful for accessibility and
alt
when the image cannot be displayed.
height Specifies the height of the image.
width Specifies the width of the image.
HTML img src Attribute
The src attribute in <img> tag specifies the image’s location. If the URL is
correct, the browser retrieves and displays the image; otherwise, it shows a broken
link icon.
Example : In this example we displays an image using the <img> tag with src
attribute pointing to a GeeksforGeeks logo. It enhances content by visually
representing the website’s identity.
<html>
<head>
<title>Welcome To GFG</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>This is the demo of <img /> tag.</p>
<img src="[Link]
alt="GFG image" />
</body>
</html>
Output:
HTML Images Example Output
HTML img alt Attribute
The alt attribute in <img> tag provides a text alternative if the image fails to load.
It aids accessibility for users unable to view images due to slow internet, src errors,
or screen reader usage.
Example : The example illustrates the use of the alt attribute in the <img> tag.
<html>
<head>
<title>Alt Attribute Example</title>
</head>
<body>
<p>Using Alt Attribute</p>
<img src="[Link]
alt="This is GeeksforGeeks logo" />
</body>
</html>
Output:
This is GeeksforGeekslogo
Setting Width and Height of an Image
The width and height attributes are used to specify the width and height of
an image. The attribute values are specified in pixels by default. The width and
height attributes are always declared in pixels.
Example:
<html>
<head>
<title>
Setting width and height of image
</title>
</head>
<body>
<p> Setting width and height of image</p>
<img src="[Link]
alt="GeeksforGeeks logo"
width="300"
height="300" />
</body>
</html>
Output:
Adding Titles to an Image in HTML
To add a title to an image, include the title attribute in the <img> tag,
providing descriptive text for enhanced user interaction.
Example: In this example we are showing an image with width, height, and title
attributes using the <img> tag. The title attribute provides descriptive text for user
interaction.
<html>
<head>
<title>
Inserting an image using "img" tag
</title>
</head>
<body>
<p>Inserted image using image tag</p>
<img src=
"[Link]
[Link]"
alt="GeeksforGeeks logo"
width="200"
height="200"
title="Logo of GeeksforGeeks" />
</body>
</html>
Output:
HTML Links Hyperlinks
HTML links, or hyperlinks, connect web pages and are created using the
`<a>` tag with the `href` attribute. They enable users to navigate between pages or
resources. Links can be text, images, or other elements, enhancing web navigation
and interactivity. Users can click on links to navigate between different pages or
resources.
Note: A hyperlink can be represented by an image or any other HTML element,
not just text.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Syntax
<a href="url">link text</a>
Target Attribute
Attribute Description
_blank Opens the linked document in a new window or tab.
Opens the linked document in the same frame or window as the link.
_self
(Default behavior)
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
framenam Opens the linked document in a specified frame. The frame’s name
e is specified in the attribute.
HTML Links Examples
Example 1: Basic Hyperlink
In this example we contains a paragraph instructing users to click on the link
labeled “GeeksforGeeks,” which directs to the website
“[Link]
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="[Link]
GeeksforGeeks
</a>
</body>
</html>:04
Example 2: Using target Attributes
In this example we demonstrates the use of target attributes in links. Each
link opens in a different context: _blank opens in a new window or tab, _self in the
same frame, _parent in the parent frame, _top in the full window body, and
framename in a specified frame.
_blank
<p>
If you set the target attribute to
"_blank", the link will open in a new
browser window or tab.
</p>
<a href="[Link]
target="_blank">
GeeksforGeeks
</a>
_self
<p>
If you set the target attribute to
"_self", the link will open in the
same window or tab.
</p>
<a href="[Link]
target="_self">
GeeksforGeeks
</a>
_top
<p>
If you set the target attribute to
"_top", the link will open in the full
body of the window.
</p>
<a href="[Link]
target="_top">
GeeksforGeeks
</a>
_parent
<p>
If you set the target attribute to
"_parent", the link will open in the
parent frame.
</p>
<a href="[Link]
target="_parent">
GeeksforGeeks
</a>
