1 / 14

Adding Hyperlinks

Learn how to create and customize hyperlinks on web pages. Understand hyperlink types, colors, image links, email links, and absolute linking. Improve user experience with enhanced webpage interactions.

gurule
Download Presentation

Adding Hyperlinks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding Hyperlinks To a Web Page

  2. 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.

  3. 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

  4. (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>

  5. 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”>

  6. Finish the Following • Exercise 10 & 11 • Project • Project Sketch • MicroType Pro

  7. 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>

  8. 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

  9. Hyperlink using an Imageor Image Link • 1st Find & Save the Image. • 2nd Use the hyperlink tag as normal butinstead 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.

  10. 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

  11. 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:me@yahoo.com”> e-mail me@yahoo.com </a>

  12. 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 NameAND • the Web Page.html or Filename.ext

  13. drive webpage folder Absolute Linking Cont’Appearance • Each are followed by \ <a href=”a:\Picture\Image1.html”> Me </a>

  14. Don’t Forget to Combine When Possible <body bgcolor=”green” text=”blue” link=”red”vlink=”pink”>

More Related