Scribd Logo
Upload

Welcome to Scribd!

  • Links and Navigation

    Uploaded by

    Jbr Raheem
    2 views16 pages
    The document discusses various types of links and navigation elements that can be used on web pages. It describes internal and external links, and how to link to other pages, emails, images, and buttons. It also provides examples of how to create vertical and horizontal navigation bars using HTML and CSS, including the use of lists, floats, and inline elements.

    Original Description:

    Original Title

    links and navigation

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various types of links and navigation elements that can be used on web pages. It describes internal and external links, and how to link to other pages, emails, images, and buttons. It also provides examples of how to create vertical and horizontal navigation bars using HTML and CSS, including the use of lists, floats, and inline elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views16 pages

    Links and Navigation

    Uploaded by

    Jbr Raheem
    The document discusses various types of links and navigation elements that can be used on web pages. It describes internal and external links, and how to link to other pages, emails, images, and buttons. It also provides examples of how to create vertical and horizontal navigation bars using HTML and CSS, including the use of lists, floats, and inline elements.

    Copyright:

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

    LINKS AND NAVIGATION

    10/09/2023 1
    Links
    • What really distinguishes the Web from other mediums is the way in which a web page can
    contain links (or hyperlinks) that you can click on to be taken from one page to another page. The
    link can be a word, phrase, or image.
    • There are two types of links.
    internal link
    external link.
    Internal link :
    When you link to another page in your own web site, the link is known as an internal link
    External link:
    When you link to a different site, it is known as an external link .

    10/09/2023 2
    Linking to other web page
    • To link to another web page, the opening < a > tag must carry an attribute called href the value of the href attribute is the
    name of the file you are linking to.
    Example:
    <html><body>
    <h1>HTML Links</h1>
    <p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
    </body>
    </html>

    10/09/2023 3
    Use an image as a link
    • To use image as link,just put the <img> tag inside the <a> tag.
    Example:
    <html><body>
    <h2> image as a link</h2>
    <p> the image as a link.try to click on it.</p>
    <a href=“default.asp”><img src=“smiley.gif” alt=“HTML tutorial” style=“width:42px;height:42px;”></a>
    </body>
    </html>

    10/09/2023 4
    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:
    <html>
    <body>
    <h2>Link to an Email Address</h2>
    <p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href
    attribute:</p>
    <p><a href="mailto:abdulraheema20ug0375@drngpit.ac.in">Send email</a></p>
    </body>
    </html>

    10/09/2023 5
    10/09/2023 6
    10/09/2023 7
    Button as a Link
    • To use an html button as a link,you have to add some javascript code.
    • Javascript allows you to specify what happens at certain events,such as a click button:
    Example:
    <html><body>
    <h2>Button as a Links</h2>
    <p>Click the button to go to the HTML tutorial.</p>
    <button onclick="document.location='default.asp'">HTML Tutorial</button>
    </body></html>

    10/09/2023 8
    Navigation Bar
    • Having easy-to-use navigation is important for any web site.

    • With CSS you can transform boring HTML menus into good-looking navigation bars.

    • A navigation bar needs standard HTML as a base. we will build the navigation bar from a standard
    HTML list.

    • A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect
    sense.

    • In navigation bar there are two bars are there


    • Vertical bar.
    • Horizontal bar.

    10/09/2023 9
    Example for Navigation Bar
    <html>
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    <p>Note: We use href="#" for test links. In a real web site this would
    be URLs.</p>
    </body></html>

    10/09/2023 10
    Vertical Bar
    • To build a vertical navigation bar, you can style the <a> elements inside the list. in addition to the
    code from the previous page

    li a{
    display: block;
    width: 60px;
    }

    display: block; - Displaying the links as block elements makes the whole link area
    clickable (not just the text), and it allows us to specify the width (and padding, margin,
    height, etc. if you want)

    width: 60px; - Block elements take up the full width available by default. We want to
    specify a 60 pixels width.

    10/09/2023 11
    Example for vertical Bar
    <html><head>
    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px; }
    li a {
    display: block;
    background-color: #dddddd; }
    </style></head>
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    • <li><a href="#about">About</a></li>
    • </ul>
    <p>A background color is added to the links to show
    the link area.</p> 12
    </body></html>
    Horizontal Bar
    There are two ways to create a horizontal navigation bar. Using inline or floating list
    items.

    Inline List Items :


    One way to build a horizontal navigation bar is to specify the <li> elements as inline, in
    addition to the "standard" code from the previous page.

    Example:
    li {
    display: inline;
    }
    display: inline; - By default, <li> elements are block elements. Here, we remove the
    line breaks before and after each list item, to display them on one line

    10/09/2023 13
    Floating List Items
    Another way of creating a horizontal navigation bar is to float the <li> elements, and
    specify a layout for the navigation links.
    Example:
    li {
    float: left;
    }

    a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
    }

    float: left; - Use float to get block elements to float next to each other.
    display: block; - Allows us to specify padding (and height, width, margins, etc. if you want)
    padding: 8px; - Specify some padding between each <a> element, to make them look good.
    background-color: #dddddd; - Add a gray background-color to each <a> element

    10/09/2023 14
    Example for Horizontal Bar

    15
    Thank You !

    10/09/2023 16

    You might also like