Scribd
Upload
4 views11 pages

Introduction To Web Design

The document provides an introduction to hyperlinks in web design, explaining how to create them using the <a> tag in HTML. It covers opening links in new tabs, using the title attribute, and incorporating images as links. Additionally, it emphasizes the importance of using clear anchor text and illustrates relative paths for linking based on the current page's location.

Uploaded by

Eman Seguido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views11 pages

Introduction To Web Design

The document provides an introduction to hyperlinks in web design, explaining how to create them using the <a> tag in HTML. It covers opening links in new tabs, using the title attribute, and incorporating images as links. Additionally, it emphasizes the importance of using clear anchor text and illustrates relative paths for linking based on the current page's location.

Uploaded by

Eman Seguido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

INTRODUCTION TO WEB DESIGN

ITC 122
HYPERLINKS
Hyperlinks, or simply links, are an important element of the web, connecting one webpage to another.
This ability to link between pages is what distinguishes HTML from most other markup languages.
HTML LINKS

We use the <a> tag to create a link. For example,


<a href="https://www.arellano.edu.ph/">Visit Arellano University</a>

<a href="https://www.arellano.edu.ph/">Visit Arellano University</a>

The destination link is provided inside the href attribute, which stands for hypertext reference.
PROBLEM

Write HTML code to create a hyperlink.

The visible text of the link should be The Imitation Game - IMDb.
When clicked, this should take the user to the following URL: https://www.imdb.com/title/tt2084970/
Note: Be careful with spelling mistakes, as they can cause this practice problem to fail.
OPEN LINKS IN NEW TAB

The code above creates a link that opens in the same tab:
If we want to open the link in a new tab, we need to use the target attribute with value the _blank.

<a href="https://www.arellano.edu.ph/" target="_blank">


Visit Arellano University website
</a>
This time if you run the code and click the link, the link will open in a new tab (or window, depending on
your browser settings).
THE TITLE ATTRIBUTE

We can also use the title attribute with the <a> tag, which appears when the user hovers over the hyperlink.
For example:
<a href="https://www.arellano.edu.ph/" title="Arellano University Website">Visit Arellano University</a>
PROBLEM

Write HTML code to create a hyperlink.

The visible text of the link should be Learn Python.


When clicked, this should take the user to the following URL:
https://www.w3schools.com/python/default.asp.
The link should open in a new tab.
When the link is hovered over, it should display Python.
MORE ON LINKS

Images as Links
It is also possible to use images as links.
To use images as links, simply replace the visible text of the link with an image. For example,
<a href="https://en.wikipedia.org/wiki/Bengal_tiger">
<img src="tiger.png" alt="A Bengal tiger">
</a>
When you run the code and click on the image, you will be redirected to the Wikipedia page about bengal
tigers.
…

Use good anchor text (visible link text).


Avoid using vague anchor texts like "click here" or text that doesn't provide clear information about the link's
destination:
Bad example
<p>To learn coding, <a href="https://www.w3schools.com">click here</a></p>

Good example
<p>To learn coding, visit <a href="https://www.w3schools.com">W3SCHOOLS</a></p>
EXAMPLES: RELATIVE PATH

As mentioned earlier, a relative path can change depending on where the current page is located.
Suppose we have a directory structure like this
www.w3schools.com/

And, we want to link to the master-python.html resource.


EXAMPLE 1

If the current page is https://www.w3schools.com/learn/master-java.html, the relative path becomes


<a href="master-python.html" target = "_blank">Python Course</a>

If the current path is https://www.w3schools.com/index.html, the relative path becomes


<a href="learn/master-python.html" target = "_blank">Python Course</a>

If the current page is https://www.w3schools.com/about/team.html, the relative path becomes


<a href="../learn/master-python.html" target = "_blank">Python Course</a>
Here, .. in the path is used to navigate one level up in the directory.

You might also like