Adding Hyperlinks
Download
Report
Transcript Adding Hyperlinks
Adding Hyperlinks
To a Web Page
Hyperlink and Its Add-Ons
• Main way to connect web pages and move
throughout a web site.
• Uses the Anchor Tag <a> which is a set.
<a> </a>
• Must have the href add-on (Hypertext
Reference) will appear as <a href=>
• The text after the <a href> is the Target or
Active Hyperlink & will become the color
Blue and Underline.
• After Clicking, the link it turn Purple.
2 Categories of Hyperlinks:
• External – going off your page
(linking) to:
– the Net, Files, Other Pages and/or
an E-mail.
• Internal/Page – staying on your
page (linking) to:
– Different Sections, Areas and/or
Locations on the Same Page
(External) Link to the Net
• <a href =”page’s URL”> Word to be
linked </a>
• The URL has to be the exact address
including the http://
example:
<a href=”http://www.yahoo.com”> Yahoo!
</a>
Coloring Hyperlinks
• The browser will use the default colors of blue for
unvisited links and purple for visited links
• To Set Hyperlink Colors – simply add to the
<Body> tag:
~link for Unvisited website (before you click)
~vlink for Visited website (after you’ve clicked)
~alink for Active (roll-over the link)
Combo of text, background & hyperlink colors:
<body bgcolor=”green” text=”blue”
link=”red” vlink=”pink”>
Finish the Following
•
•
•
•
Exercise 10 & 11
Project
Project Sketch
MicroType Pro
Linking to Pages or Files
(Relative Links)
• Relative (URL) Link means - All Pages/Files
must be in the Same Location.
• Simply type the <a href> and the
WebPageName.html or File’sName.ext
• Example:
<a href=”Marquee Play.html”>Marqueeplay</a>
Linking & Opening in a
Different Browser Window
To make the Web Page Open in a
Different Browser Window:
• put the add-on target=“_blank” after
the url in the anchor tag.
example:
<a href=“http://www.yahoo.com”
target=“_blank”> Yahoo! </a>
– Must use when linking to the Net
Hyperlink using an Image
or Image Link
• 1st Find & Save the Image.
• 2nd Use the hyperlink tag as normal but
instead of words put the Image source tag.
• Example:
<a href=”URL” or”filename.html”>
<img src = ”filename.ext”> </a>
• There will be a Blue Border to show this
image is a hyperlink.
Image Link Cont’
• To remove the border, add-on border = 0 to the
<img src>
<a href = “image’s URL”>
<img src = “imagename.jpg” border =0>
</a>
• Thumbnail is Smaller-Sized Image that links to
a larger-sized image
Link to an E-mail
• Automatically launch the user’s e-mail application,
open a new outgoing message and address it to a
specific email.
• Uses mailto: along with your email address
Such as <a href =”mailto:emailURL”> email
address or word to be linked </a>
• example:
<a href=“mailto:[email protected]”> e-mail
[email protected] </a>
Absolute Linking
• Means your files and/or your folders don’t
have to be in the same location because
you will tell the computer where to find them
by giving the “Exact” Location.
This type of linking requires:
• the Drive’s Name (a:\ or c:\ or e:\ or
f:\),
• the Folder’s Name
AND
• the Web Page.html or Filename.ext
Absolute Linking Cont’
Appearance
• Each are followed by \
<a href=”a:\Picture\Image1.html”> Me </a>
drive
webpage
folder
Don’t Forget to Combine
When Possible
<body bgcolor=”green” text=”blue”
link=”red” vlink=”pink”>