Scribd
Upload
15 views

TOPIC 2.2 Hyperlink

The document discusses HTML hyperlinks and links. It covers the syntax for links, default styling of different link states, using the target attribute to control where links open, using images as links, and creating bookmarks within pages.

Uploaded by

SHARVENE SHARVENE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

TOPIC 2.2 Hyperlink

The document discusses HTML hyperlinks and links. It covers the syntax for links, default styling of different link states, using the target attribute to control where links open, using images as links, and creating bookmarks within pages.

Uploaded by

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

Topic 2: Hypertext Markup Languange (HTML)

HTML Hyperlink

Hyperlinks to navigate web page


HTML Hyperlink

HTML Links - Hyperlinks

• HTML links are hyperlinks. The link text does not have to be text.
It can be an HTML image or any
• A hyperlink is a text or an image you can click on, and jump other HTML element.
to another document.

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

<a href="http://www.w3schools.com/html/">Visit our HTML


tutorial</a>
HTML Hyperlink
HTML Links - Hyperlinks
By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue

• A visited link is underlined and purple

• An active link is underlined and red


4
HTML Hyperlink
HTML Links - Hyperlinks

<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>

5
HTML Hyperlink
HTML Links - The target Attribute

• The target attribute specifies where to open the linked document.


• This example will open the linked document in a new browser window or in a new
tab

<a href="http://www.w3schools.com/" target="_blank">Visit


W3Schools!</a>

6
HTML Hyperlink
HTML Links - The target Attribute
HTML Hyperlink
HTML Links - Image as Link

• HTML links are hyperlinks.


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

<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0">
</a>
8
HTML Hyperlink
HTML Links - Create a Bookmark

• HTML bookmarks are used to allow readers to jump to specific parts of


a Web page.
• Bookmarks are practical if your website has long pages.
• To make a bookmark, you must first create the bookmark, and then
add a link to it.
• When the link is clicked, the page will scroll to the location with the
bookmark.
HTML Hyperlink
HTML Links - Create a Bookmark

• add a link to the bookmark ("Useful Tips Section"),


from within the same page:

<a href="#tips">Visit the Useful Tips


Section</a>

<h2 id="tips">Useful Tips Section</h2>


HTML Hyperlink
HTML Links - Create a Bookmark

• add a link to the bookmark ("Useful Tips Section"),


from another page:

<a href="html_tips.htm#tips">Visit the Useful Tips Section</a>

Page 1

Page 2

11
Activity 2.5: HTML Links
Create a link to the google.com and
1. On click of the link it in the same page
2. On click of the link it should open it in a new page

You might also like