1 / 14

XHTML

XHTML. Hyperlinks. Creating Links to Other Web Pages. A link, or hyperlink, is a specially formatted Web page object that the user can click to open a different Web page, known as the target. Creating Links to Other Web Pages. Links are created using the anchor tag pair. <a> … </a>.

althea
Download Presentation

XHTML

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

  2. Creating Links to Other Web Pages • A link, or hyperlink, is a specially formatted Web page object that the user can click to open a different Web page, known as the target.

  3. Creating Links to Other Web Pages • Links are created using the anchor tag pair. • <a> … </a>

  4. Creating Links to Other Web Pages • Type of links: • external • file located on a network, such as the Internet • file in the same location as the current file • internal (jump link) • e-mail

  5. External Links • Example 1 <a href=“http://www.garlandisd.net”>GISD</a> • Example 2 <a href=“page2.htm”>Page 2 of My Site</a>

  6. Internal Links (Jump Links) Part 1: href=”#linkname” Links different parts of your HTML document. “linkname” is the name of the section you are jumping or linking to. <a href=”#top”>Top of Page</a> Part 2: name=”????” Marks the place or point on the page where you want the browser to jump to. “????” is the name you assign to the location in the document. <a name=”top”></a>

  7. E-mail Links • E-mail links require using mailto: in front of the e-mail address on the href attribute. • Example: <a href=“mailto:kstair@garlandisd.net”>Mrs. Stair’s Email Address</a>

  8. Absolute vs. Relative Links • An absolute link includes the page’s full Web site location and directory information. • Absolute links should only be used when linking to another site<a href=http://www.w3schools.com> Tutorials </a>

  9. Absolute vs Relative Link • A relative link, on the other hand, includes only the information about the target page’s location relative to the current Web page. • Allows entire sites to be moved without breaking links.<a href=“page2.htm”><a href=“folder/page5.htm><a href=“../index.htm”>

  10. Linking Graphics • To link a graphic, surround the <img /> tag with the <a>..</a> tag pair referencing the target Web page.

  11. Linking Graphics • Example: <a href=“index.htm”><img src=“house.jpg” /></a> Displays a photo of a house that will take the user to the home page after they click the house photo.

  12. Linking Graphics • Linked graphics display by default with a blue border • Blue border provides a clue to users that the image contains a link

  13. Linking Graphics • A user can test a graphic by moving the mouse pointer over it – the pointer changes to a pointing hand if the image is formatted with a link.

  14. Assignment • Creating Links worksheet • Refer to the pages on Hyperlinks in the notebooks for help

More Related