Internet Applications Development

Lecture 5

L. Obead Alhadreti

Lecture Outline:

• Links with HTML.

• How do we move from a web page to another ?!

• We can move between web pages by clicking on a hyperlink.

• A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new destination.

• Hyperlinks are the spirit of the Web. If the web is a spider as a whole, these links are the threads that make up this network and link between millions of addresses.

• The question now is: How to insert a hyperlink?

• Links inserted using the a (anchor) tag:

<a> </a>

• href (Hypertext Reference) attribute:

href specifies the address you would like to link to.

< a href=“address”> text/image </a>

• Example:

<a href=“index.html”> home page </a>

• Display:

home page

• Example:

<a href=“index.html”> <img src=“1.jpg”> </a>

• Display:

• There are several options for hyperlinks:

it can be a link to another site, another page within the site itself, a place in the same page (up or down), or an email address.

• 1st Type : Insert a hyperlink to an external web site.

Example:

<a href=“http://www.uqu.edu.sa”> Uqu </a>

Display:

Uqu

Example:

<a href=“http://www.uqu.edu.sa”>

<img src=“uqu.jpg”> </a>

Display:

• 2nd Type : link refers to an existing file in the same website (i.e. a local file), whether html file, image, or otherwise:

Example:

<a href=“timestable.html"> times table </a>

Display:

times table

Example:

>a href="http://www.uqu.edu.sa/images/1.jpg<"

first image </a<

Display:

first image

• 3rd Type : the link refers to a place within the same page,( for example at the beginning or at the end of the page or any other place you want)

• To link to a place within your existing page, firstly, a name must be given to the anchor using the name attribute.

example:

<a name=“abc”> top </a>

• Secondly, we create the links by placing the hash symbol followed by the name of the anchor in the href of the new link.

example:

<a name=“abc”> top </a>

<a href=“#abc”> top </a>

• Fth Type : the link refers to email address, using

<a href=“mailto: …….@....... ”> </a>

example:

<a href=“mailto: ahmed@yahoo.com”> ahmed </a>

Display:

ahmed

Questions ?

Be active !