Scribd Logo
Upload

Welcome to Scribd!

  • Lab 5 HTML Links: Objectives

    Uploaded by

    Eisha ter raazia mir
    22 views5 pages
    open new tab and go to google assistant page. Home: go back to home page. Q3. Write the code to create image map with 5 areas to open different pages when click on each area. The image should contain map of university with 5 areas: 1. Administration building 2. Library 3. Faculty of IT 4. Cafeteria 5. Sport field Each area when clicked should open related page about that location.

    Original Description:

    Original Title

    Lab 5

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    open new tab and go to google assistant page. Home: go back to home page. Q3. Write the code to create image map with 5 areas to open different pages when click on each area. The image should contain map of university with 5 areas: 1. Administration building 2. Library 3. Faculty of IT 4. Cafeteria 5. Sport field Each area when clicked should open related page about that location.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views5 pages

    Lab 5 HTML Links: Objectives

    Uploaded by

    Eisha ter raazia mir
    open new tab and go to google assistant page. Home: go back to home page. Q3. Write the code to create image map with 5 areas to open different pages when click on each area. The image should contain map of university with 5 areas: 1. Administration building 2. Library 3. Faculty of IT 4. Cafeteria 5. Sport field Each area when clicked should open related page about that location.

    Copyright:

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

    Lab 5

    HTML Links
    Objectives:

    1. Learn how to Creating Links in HTML


    • The a Element and the href Attribute
    • The target Attribute
    • Going from one Location into another within the Same Web Page
    • Going from a Location in a Page to a Specific Location in another Page
    • Linking to E-mail Addresses
    • Image Maps
    • Absolute and Relative URLs

    HTML Links

    HTML links are hyperlinks. You can click on a link and jump to another document.
    A link does not have to be text. It can be an image or any other HTML element.

    HTML Links - Syntax

    In HTML, links are defined with the <a> tag:

    <a href="url">link text</a>

    href attribute specifies the destination address (http://www.w3schools.com/html/) of


    the link.

    The link text is the visible part, clicking on the link text will send you to the specified
    address.

    Try this:

    <html>

    <body>

    <p><a href="http://www.w3schools.com/html/">Visit our HTML


    tutorial</a></p>

    </body>

    </html>
    Absolute and relative Links
    1. An absolute URL points to another web site ex.
    href="http://www.yahoo.com” A full web address
    2. A relative URL points to a file within a web site without http://www....
    Such as:
    <a href="html_images.asp">HTML Images</a>
    Or ex. href="/themes/theme.css" if the page in a folder in the
    same web site.

    The target Attribute

    The target attribute specifies where to open the linked document.

    The target attribute can have one of the following values:

    • _blank - Opens the linked document in a new window or tab


    • _self - Opens the linked document in the same window/tab as it was clicked
    (this is default)

    This example will open the linked document in a new browser window/tab:

    Try this
    <a href="http://www.bau.edu.jo/" target="_blank">Visit BAU!</a>

    <a href="http://www.bau.edu.jo/" target="_self">Visit BAU!</a>

    Going from one Location into another within the Same Web Page
    <html> <body>

    <p><a href="#C4">Jump to Chapter 4</a></p>

    <h2>Chapter 1</h2>

    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 2</h2>

    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>

    <h2 id="C4">Chapter 4</h2>

    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 5</h2>

    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 6</h2>

    <p>This chapter explains ba bla bla</p>

    </body>

    </html>

    Image as Link
    Try this
    <a href=" >

    <img src="smiley.gif" alt="BAU University" width="42 " height="42 " ">

    </a>

    Image Maps
    <area shape ="rect|circle|polygon" coords="value">

    coords Attribute Values

    Value Description

    x1,y1,x2,y2 Specifies the coordinates of the left,


    top, right, bottom corner of the
    rectangle (for shape="rect")

    x,y,radius Specifies the coordinates of the circle


    center and the radius (for
    shape="circle")

    Try this
    <html>
    <body>

    <p>Click on the sun or on one of the planets to watch it closer:</p>

    <img src="planets.gif" width="145" height="126" alt="Planets"


    usemap="#planetmap">

    <map name="planetmap">

    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

    </map>

    </body></html>

    Linking to E-mail Addresses


    Try this
    <html><body>

    <p>This is an email link:

    <a href="mailto:asmakhtoom@yahoo.com?Subject=Hello
    again">SendMail</a>

    </p></body></html>

    TASKS
    Q1 .Write the code to view the next page.

    You should create four pages:

    Home page : include image and welcome message

    News page: include nested lists (orderd and unordered list) about any news.

    Contact: include an email link

    About: contain paragraph about you (name,id,mobile number,university name)

    Q2. Write the code to view the next page. Each link open
    location as follow:
    Pictures: open your computer picture folder.

    Projects: open html page contain definition list of 3 project.

    Social: open html page contain three ordered list with three images about social
    media sites.

    You might also like