Scribd
Upload
146 views5 pages

Lab 5 HTML Links: Objectives

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.

Uploaded by

Eisha ter raazia mir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
146 views5 pages

Lab 5 HTML Links: Objectives

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.

Uploaded by

Eisha ter raazia mir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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:[email protected]?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