Scribd Logo
Upload

Welcome to Scribd!

  • HTML - Lists, Images and Hyperlinks

    Uploaded by

    Jyoti Gupta
    9 views9 pages
    The document discusses various HTML elements used for lists, images, and hyperlinks. It describes unordered lists created with <ul> tags, ordered lists created with <ol> tags, and definition lists created with <dl>, <dt>, and <dd> tags. It also covers inserting images with <img> tags and its attributes like src and alt. Finally, it discusses creating hyperlinks within pages using <a> tags and linking to other pages, files, email addresses, and specific page locations.

    Original Description:

    It gives a complete information of how to add list and images in html pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various HTML elements used for lists, images, and hyperlinks. It describes unordered lists created with <ul> tags, ordered lists created with <ol> tags, and definition lists created with <dl>, <dt>, and <dd> tags. It also covers inserting images with <img> tags and its attributes like src and alt. Finally, it discusses creating hyperlinks within pages using <a> tags and linking to other pages, files, email addresses, and specific page locations.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views9 pages

    HTML - Lists, Images and Hyperlinks

    Uploaded by

    Jyoti Gupta
    The document discusses various HTML elements used for lists, images, and hyperlinks. It describes unordered lists created with <ul> tags, ordered lists created with <ol> tags, and definition lists created with <dl>, <dt>, and <dd> tags. It also covers inserting images with <img> tags and its attributes like src and alt. Finally, it discusses creating hyperlinks within pages using <a> tags and linking to other pages, files, email addresses, and specific page locations.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    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:someone@example.com">Send email</a>

    *******

    You might also like