Scribd
Upload
18 views

Lesson 8 Advanced Web Development

1. The document discusses creating hypertext links and image links in HTML. It provides the syntax for linking text and images to other pages or locations using the <a> and <img> tags. 2. The <a> tag is used to create links and can link to another document using the href attribute or bookmark a location within the document using the name attribute. 3. Examples are given for linking text and images to other pages using the <a> href syntax, as well as linking to locations on the same page using <a name> and <a href=#name>.

Uploaded by

Liam Justine Alamado
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views

Lesson 8 Advanced Web Development

1. The document discusses creating hypertext links and image links in HTML. It provides the syntax for linking text and images to other pages or locations using the <a> and <img> tags. 2. The <a> tag is used to create links and can link to another document using the href attribute or bookmark a location within the document using the name attribute. 3. Examples are given for linking text and images to other pages using the <a> href syntax, as well as linking to locations on the same page using <a name> and <a href=#name>.

Uploaded by

Liam Justine Alamado
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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.

You might also like