HYPERTEXT MARKUP LANGUAGE

WEB ENGINEERING LAB-3

Overview

Working with links

Types of linking

External linking to another website

Internal linking to another webpage of the same website.

Fragment linking linking different sections of the same web page.

Using the ANCHOR tag

Attribute

Description

href Specifies the destination of a link.

title Allows an advisory title that explains the resource in more detail.

name Allows links to be able to point to a specific section within a document (instead of links always taking to the top of a document).

<a href=“url” title=“text”> description </a>

The anchor element <a> is used to create links.

External Link

<a href=“http://www.yahoo.com”> Yahoo! </a> Anchor element’s href attribute is

used to specify the Hyperlink Reference (that is, a reference to link’s address).

When linking to an external document, it is essential to provide http:// otherwise the link will not work.

TRY IT !

Observe the output

Observe the output

Did you notice that there is a space after heading but not after the links?

9

Internal Linking: understanding paths

prepared by: Meer Sadaf Naeem

There are two types of pathnames: relative & absolute.

course

htmlMs-office

class1

index.html

list.html intro.html

chem.html math.htmleng.html

Absolute path specifies a file’s precise location within a computer’s entire

folder structure.

C:/course/html/intro.html

course

htmlMsoffice

class1

index.html

list.html intro.html

chem.html math.htmleng.html

Absolute path specifies a file’s precise location within a computer’s entire

folder structure.

C:/course/html/class1/eng.html

course

htmlMs-office

class1

index.html

list.html intro.html

chem.html math.htmleng.html

Relative path specifies a file’s location in relation to the location of the

current document.

If the file is in same folder as the current document, you do not specify the

folder name.

contact.htmlcourse

htmlMs-office

class1

index.html

list.html intro.html contact.html

chem.html math.htmleng.html

class1/math.htmlcourse

htmlMs-office

class1

index.html

list.html intro.html contact.html

chem.html math.htmleng.html

If the file is in a subfolder of the current document, include the name of the subfolder followed by the file name.

To go one level up the folder tree, start the relative path with a double period (..) &

then provide the name of the file

../index.htmlcourse

htmlMs-office

class1

index.html

list.html intro.html contact.html

chem.html math.htmleng.html

To specify the same folder on same level (sibling folder), move up the folder tree using double period (..) & then down the tree using the name of the sibling folder.

../Ms-office/list.htmlcourse

htmlMs-office

class1

index.html

list.html intro.html contact.html

chem.html math.htmleng.html

Let’s do it

links

Create a folder named as “links”

Let’s do it

links

List.html

ul.html

Create two html documents named as “list.html” and “ul.html” in the folder “links”

Let’s do it

links

List.html

ul.html

course

Create a subfolder in “links” named as “course”

Let’s do it

links

List.html

ul.html

course

ol.html

Create an html document name “ol.html” in subfolder “course”

Code for ul.html

Code for ol.html

Code for list.html

Give the relative path to the appropriate pages

Let’s do it

links

List.html

ul.html

course

ol.html

Provide a link in “ul.html” and “ol.html” to go back to “list.html”

Internal Link

<a href=“file.html”> Go to next page</a>

In href , specify the relative path of the

document to which you want to link.

Linking fragments

<a name=“top”> Welcome to NED</a>

top

<a href=“#top”> go to top of the page</a>

Page is scrolled to the location named top

Go to top

Labeling sections with the name attribute

<a name=“top”> Welcome to NEDUET</a>

the name attribute allows links to be able

to point to a specific section within a document (instead of links always leading to the top of a document).

Once you have named a location in the document, you can go to that location taking a normal link tag & adding a number sign (#) & the name assigned to the URL.<a href=“#top”> go to top of the

page</a>

Creating titles for your links

<a href=“http://www.yahoo.com” title=“Yahoo website”> Yahoo! </a>

title attribute allows an advisory title that explains the resource in more detail.

Browsers may choose different methods of showing the advisory title attribute, such as displaying the title in a tool tip or balloon help.

Changing browser windows with target attribute

By default, each new page you open replaces the content of the previous page in the browser window.

To return the previous page, one has to click their browser’s Back button.

target attribute indicates the name of window where you would like the linked page to appear.

target attribute

<a href=“url” target=“window”> content</a> Here window is a name assigned to the

new browser window.

Target Name

Description

“target” Opens the link in a new window named target.

“_blank” Open the link in a new, unnamed, window.

“_self” Opens the link in the current browser window.

Linking to email addresses

Anchors can also link to email addresses.

When someone clicks on this type of anchored link, their default email program initiates an email message to the linked address.

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