html hyperlinks

HTML Hyperlinks and HTML Bookmarks

Presented by Nobel Mujuji

(BSc Hons Information Systems )(WUA)

Html links Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML links are hyperlinks.

A hyperlink is an element, a text, or an image that you can click on, and jump to another document.

HTML Links - SyntaxIn HTML, links are defined with the <a> tag:

Link Syntax:

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

challenge

<html>

<body>

<p>

<a href=“www.facebook.com/Nokur technologies">visit us on facebook</a>

</p>

</body>

</html>

• The href attribute specifies the destination page/ address (www.facebook.com/Nokur technologies)

• The link text is the visible part (visit us on facebook).

Local Links

• The example above used an absolute URL (A full web address).

• A local link (link to the same web site) is specified with a relative URL (without http://www....).

<a href="html_images.asp">HTML Images</a>

http://www/

HTML Links - Colors and Icons

HTML Links - Colors and IconsWhen you move the mouse cursor over a link, two things will normally happen:

1. The mouse arrow will turn into a little hand2. The color of the link element will change3. By default, links will appear as this in all browsers:

4. An unvisited link is underlined and blue5. A visited link is underlined and purple6. An active link is underlined and red7. You can change the defaults, using styles:

The following are some of the things a hyperlink can link to

Function Sample Code

Web Page or Site<a href="http://www.webaddress.com/folder/page">Hyperlink Text</a>

Local Page <a href="pagename.html">Hyperlink Text</a>

Local Page in a Folder level Below <a href="foldername/pagename.html">Hyperlink Text</a>

Local Page in a Folder level Above <a href="../pagename.html">Hyperlink Text</a>

Open E-mail Program with E-mail address<a href="mailto:[email protected]">Hyperlink Text</a>

Bookmarked Section <a href="#bookmarkname"></a>

Bookmarked Section in Another Page<a href="pagelocation.htm#bookmarkname">Hyperlink Text</a>

html - email links

• Creating an email link is simple. If you want people to mail you about your site, a good way to do it is place an email link with a subject line already filled out for them.

• HTML Email Link Code:• <a href="mailto:[email protected]?subject=Feedback" >email

me</a>

First web project

NB create a folder name it SA Flag project*Save all your pages in this folder as follows(folder should contain 7 pages as follows)

1. Home.html2. Black.html3. Yellow.html4. Blue.html5. Red.html6. White.html7. Green.html

Home.html

<hr size="10" noshade color=blue>

<center><h1><font color="red"> WELCOME TO SOUTH AFRICA</H1></FONT></center>

<center>

<hr size="10" noshade color=green>

<a href="green.html"> green page| </a>

<a href="red.html"> red page| </a>

<a href="yellow.html"> yellow page| </a>

<a href="black.html"> black page| </a>

<a href="blue.html"> blue page| </a>

<a href="white.html"> white page|</a></center>

Black.html

<a href=“home.html"> go to home page| </a>

<body bgcolor=“black”>

Yellow.html


<body bgcolor=“yellow”>

Blue.html


<body bgcolor=“blue”>

Red.html


<body bgcolor=“black”>

White.html


<body bgcolor=“white”>

Green.html


<body bgcolor=“green”>

An Image Link

• Here's an image. Its name is sally.gif. I will use it as a link to the HTML Goodies page.• To replace the text above with the sally.gif image, you simply replace

the text that would appear on the page with an image command calling for the sally.gif image. Like so:

<A HREF="index.html"><IMG SRC="sally.gif"></A>

The HTML <hr> tag also supports following attributes:

Attribute Value Description

align leftrightcenter

Deprecated-Specifies the alignment of the horizontal rule.

noshade noshade Deprecated-Removes the usual shading effect that most browsers display.

size pixels or % Deprecated-Specifies the height of the horizontal rule.

width pixels or % Deprecated-Specifies the width of the horizontal rule.

Documents

html hyperlinks