Adding Hyperlinks To a Web Page Hyperlink and
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 Sketch Micro. Type 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 Web. Page. Name. html or File’s. Name. 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 • 1 st Find & Save the Image. • 2 nd 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: email. URL”> email address or word to be linked </a> • example: <a href=“mailto: me@yahoo. com”> e-mail me@yahoo. com </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: PictureImage 1. html”> Me </a> drive webpage folder
Don’t Forget to Combine When Possible <body bgcolor=”green” text=”blue” link=”red” vlink=”pink”>
- Slides: 14