UNIT I:

ADVANCED WEB
DEVELOPMENT
 INTERNE
WEB CODE EMAIL T
NOTEPA MOZILL
D TEXT A TAG
FIREFOX
IMAGE PAGE HYPERTE
IMAGE
LINK XT LINK
BROWSE WEBSITE
R FILE HTML S
LESSON 1

A HYPERTEXT LINK
and IMAGE LINK
OBJECTIVES:
At the end of this lesson, you should be able to:
1. Create a hyperlink and image link correctly; and
2. Use the image tag properly;
• A Hyperlink, also known as link, is a word, group of
words, or image that you can click to jump to a new
document or a new section within the current document.
• A Hyperlink can be determined when you move the
cursor over a link in a web page, when you click a
hyperlinked object or word, it will take you to another
page. Links are specified in HTML using the <a> tag.
The <a> tag
The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute; and
2. To create a bookmark inside a document, by using the name attribute
HTML LINK SYNTAX
<a href=“url”>L.+ink text</a>

Example: <a href = http://www.google.com> Click here to search </a>

Where:
 a stands for Anchor. It starts the link to another page
 href stands for Hypertext REFerence – href is a short way for saying “this is
where your message goes to.”
 http://www.google.com is the FULL ADDRESS (URL) of the link.
 “Click here to search” is the space where you write the text you want to appear on
the page.
 /a is an end tag used to end the entire link command
STEPS:
1. Go to Start/Windows Button.
2. Launch or open the NOTEPAD.
3. Type the given code.
4. Save your file in your own folder.
5. Run/launch the browser (Mozilla Firefox) to view your output.
6. Close the program/apps.
• Save your file as LASTNAME_link.html and run your
browser (Mozilla Firefox)to see the output.
A. An Image as a Link
• Aside from using text as your hyperlink, you can also use an image as your hyperlink.
• <a href = “default.asp”> is the last file location that you can find at the
task bar.
• <img src= “sunflower.jpg”> is an image where you can assign your
hyperlink.
“sunflower.jpg” is the complete name of the file.
• Alt = www.google.com/ when clicked, directs you to google.com site.
• Save your file as LASTNAME_image.html and run the
browser(Mozilla Firefox) to see the output.
B. Link to a Location on the same Page
Aside from assigning text and image as a hyperlink, you can also locate the
hyperlink on the same location or page.
• <a href = #c2> is the hyperlink that connects
<a name = “c2”> on the same page. C2 is a
name assigned by the user or it can be another
name depending on the name you prefer.

• Save your file as Samelocation.html

• Create a mailto link
You can also assign mailto href as your hyperlink, if you want to connect the link to
your personal email.