HTML - Lists, Images and Hyperlinks

HTML – Lists, Images and Hyperlinks
➢ HTML - Lists
HTML lists are used to present list of information in well
formed and semantic way. There are mainly two types of list in HTML and each
one has a specific purpose and meaning.
• Unordered list — Used to create a list of related items, in no particular order.

• Ordered list — Used to create a list of related items, in a specific order.
HTML Unordered Lists

An unordered list created using the <ul> element, and each list item starts with
the <li> element.
The list items in unordered lists are marked with bullets. Here's an example:-
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like.
By default, it is a disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then
HTML ordered list will be used. This list is created by using <OL> tag. The
numbering starts at one and is incremented by one for each successive ordered list
element tagged with <li>.
Example
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result −
The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like.
By default, it is a number. Following are the possible options –
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
HTML Definition Lists

HTML supports a list style which is called definition lists where entries are listed
like in a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
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
Example
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
This will produce the following result –
➢ HTML - Images
Images are very important to beautify as well as to depict
many complex concepts in simple way on your web page.
You can insert any image in your web page by using <IMG> tag. Following is the
simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <IMG> tag is an empty tag, which means that, it can contain only list of
attributes and it has no closing tag.
Let's see an example of HTML image.
<h2>HTML Image Example</h2>

<img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML
image tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It
is not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.
Use of height and width attribute with IMG tag

You have learnt about how to insert an image in your web page, now if we want to
give some height and width to display image according to our requirement, then we
can set it with height and width attributes of image.
Example :-
<img src="animal.jpg" height="180" width="300" alt="animal image">

Use <IMG> tag as a link
We can also link an image with other page or we can use an image as a link. To do
this, put <img> tag inside the <a> tag.
Example
<a href="https://www.technical.com/what-is-
robotics"><img src="robot.jpg" height="100" width="100"></a>
➢ HTML – Hyperlinks
A webpage can contain various links that take you directly to other
pages and even specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words,
phrases, and images. Thus, you can create hyperlinks using text or images available
on a webpage.
Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and
a user can click that part to reach to the linked document. Following is the simple
syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
Example :-
<a href="https://www.google.com/">Google Search</a>
The href attribute specifies the target of the link. Its value can be an absolute or
relative URL.
An absolute URL is the URL that includes every part of the URL format, such as
protocol, host name, and path of the document,
e.g., https://www.google.com/, https://www.example.com/form.php, etc. While,
relative URLs are page-relative paths, e.g., contact.html, images/smiley.png, and so
on. A relative URL never includes the http:// or https:// prefix.
Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):
Example
<a href="mailto:[email protected]">Send email</a>
*******

HTML - Lists, Images and Hyperlinks

Uploaded by

Copyright:

Available Formats

HTML - Lists, Images and Hyperlinks

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML - Lists, Images and Hyperlinks

Uploaded by

Copyright:

Available Formats

HTML – Lists, Images and Hyperlinks

• Unordered list — Used to create a list of related items, in no particular order.

HTML Unordered Lists

HTML Ordered Lists

This will produce the following result −

The type Attribute

HTML Definition Lists

• <dl> − Defines the start of the list

This will produce the following result –

Let's see an example of HTML image.

<h2>HTML Image Example</h2>

Attributes of HTML img tag

The location of image may be on the same directory or another server.

Use of height and width attribute with IMG tag

<img src="animal.jpg" height="180" width="300" alt="animal image">

<a href="https://www.google.com/">Google Search</a>

Link to an Email Address

<a href="mailto:[email protected]">Send email</a>

You might also like