CREATE

HYPERLINKS
AND ANCHORS
 HYPERLINK
This is any graphic or piece of text document that can connect
readers to another web page, or another portion of a document.
Web users will usually find at least one hyperlink on every web
page.
In HTML, no matter what type of hyperlink you want to create, the basic syntax would be the
same. It starts with the <a> tag, and then uses the href= attribute, which direct the URL or the
path to the destination. It then closes with the </a> tag.

Example:
<a href= http://www.itworkscentral.com> www.itworkscentral.com<a/>

When viewed in a browser, this will display a text-based hyperlink similar to the example below:
Hyperlinked text

To find more please visit www.itworkscentral.com web site.

Hyperlinks are underlined by default.
 LINKING TO
ANOTHER WEB
PAGE
The essence of a web page is to create a link from
one page to another and back again. You can also
link to pages on other sites, whether they are your
own or from others.
To create a link to another page, you should use the <a> tag, as
mentioned earlier. This tag defines the hyperlink. By default, links
will be displayed in all browsers as follows:
• Unvisited link is blue with an underline
• Visited link is purple with an underline
• Active line is red with an underline
 HREF ATTRIBUTE
The href attribute specifies the URL of the page that the link goes to.
The <a> tag is not a hyperlink of there is no href attribute, but rather
as a placeholder for a hyperlink.
Syntax: <a href= “URL”>… </a>
 USING RELATIVE
AND ABSOLUTE URL
VALUES
ABSOLUTE URL
VALUE
This value has a path that contains the complete address that the user can use to go to a
specific page. This value is very reliable, but it is sometimes too long and difficult to type.

Example:
< a href= http://science.nationalgeographic.com/science/archeology/lost-city-petra.html>
Lost City of Petra </a>
This will link you to “lost-city-petra.html” page of nationalgeographic.com site
RELATIVE
URL VALUE
This value has a path in which the destination is relative to the current file
location. For instance, when you are linking to a file in the same website as the
link itself, you simply provide the name. If it is in the same folder, you just
provide the file name.

Example:
For comments, <a href=“contacts.html”> Contact Us </a> please.

This should be in the same location relative to your website location.

 SETTING A TARGET
WINDOW
By default, a hyperlink opens a new page in the same browser window and replaces the
previous page in the browser, but in some cases, you may want to specify where the hyperlink
will open. For example, perhaps you want to recommend that the viewer check out a page on
another site, but don’t want them to leave your site.
 To direct the hyperlink to open a page in a new window, add the
attribute target= “_blank” to the <a> tag similar to this:

For video about the City of Petra, visit

< a href= “natgeotv.com/ca/ancient.../video/petra-ancient-city” target=“_blank”>City of
Petra </a>

The target= attribute will specify where to open the target URL. Aside from “_blank” value,
the “target” = attribute has three more possible values; “_self”, ”_top”, and “_parent.”
HYPERLINK
USED AS
ANCHORS
 An anchor is a maker within an HTML document. When you
define a specific location in the document with an anchor
name, you can jump directly to that anchor. Anchors are most
valuable in long documents with multiple sections, so the users
will not have to read or scroll the entire document before they
can reach to their topics or articles of interest.
To define an anchor, create an <a> tag to the text, then include an id= attribute.
It is advisable to name the id value appropriately.

For examples, suppose you have a sub-heading in an article named

“Achievements” you should create an anchor point with that same name similar
to this:

<a id= “achievements”> Achievements </a>

Then, to refer to this anchor point, include its name in the href= attribute. The
name should be preceded with a pound (#) sign. You may use a relative
reference if the anchor point is in the same page document as the hyperlink:

Example:
< a href= “#achievements”> Achievements </a>

Otherwise, include the file name of the file in which the anchor is placed.
< a href= “biography.html#achievements”> Achievements </a>
 LINKING TO AN EMAIL
ADDRESS
Since hyperlinks can point to anything, you can also create an email hyperlink. For example,
if you want the web user to contact you or a particular person through electronic mail, create
hyperlink to an type mailto: followed by the email address similar to this:
<a href= mailto:support@scienceworld.com>Contact Us</a>
If in case there is someone who cannot use your email hyperlink, it is a good idea to also
include the actual email address in text form on the page. The text would mirror the
address as follows:
Contact Us at<a href= mailto:support@scienceworld.com>support@scienceworld.com</a
>

To add a default subject line to the email, add an “?subject=“ attribute, after the email
address similar to this:
<a href= mailto:support@scienceworld.com?subject=Comment>Contact Us</a>
NAVIGATION
BARS
 You will surely notice a sort of menu bar in all web pages.
This is what is called a navigation bar. A navigation bar is a
section of a website or online page intended to help visitors in
exploring through the online document.
Usually, web pages will have a primary and a secondary navigation
bar on all pages of the web document. These sections of the web
page will include links to the most important sections of the site.
The application and design of navigation bars is a vital aspect of
web design and usability.
 CREATING A
TEXT-BASED
NAVIGATION BAR
This is the simplest and the easiest form of
navigation bar. It is usually located at the
bottom of a web page.
 In HTML5, you can use the <nav> tag to hold your code
for the navigation bar. The <nav> tag was designed to the
help browsers and style sheets identify sets of link in
navigational elements and handle them properly.
To create a simple text-based navigation bar, you can use the unordered list <ul> tag. This will
make more it semantic as most modern navigation does, since the navigation bar is simply a list
of links leading to your pages in your website.
Here is an example:
<nav>
<ul>
<li> About Us</li>
<li> Weather</li>
<li> Solutions</li>
<li> Contacts</li>
</ul>
</nav>
 The traditional horizontal orientation is simply a
suitable means to get the most important list of items
clearly displayed above, so the user can see them
without having to scroll down the page.
To make it aligned horizontally, add the following style= attribute
for both <ul> and <li> tags:

Add this style for <ul> - style= “float: left; margin: o”

Add this style for <li> - style= “float: left; list-style: none; text-
indent: 350px
You can now put hyperlinks to each item list as follows:
<li style= “float: left; list-style: none; text-indent: 350px”>
<a href=“about.html” style= “text-decoration: none”> About </a>
<li style= “float: left; list-style: none; text-decoration: none; text-indent: 40px”>
<a href= “weather.html” style= “text-decoration: none”> Weather</a>
<li style= “float: left; list-style: none; text-decoration: none; text-indent: 40px”>
<a href= “solution.html” style= “text-decoration: none “> Solution</a>
<li style= “float: left; list-style: none; text-decoration: none; text-indent: 40px”>
<a href= “contacts.html” style= “text-decoration: none”> Contacts </a>
Tip:
To remove the underline in the hyperlinked text, the style= “text-
decoration:none” can be inserted inside the <a> tag.
GOD BLESS