1 / 12

HTML Links

HTML Links. 4 February 2014. Links. Links. Need to define two things: The destination Something to click on to get there Tag is <a href =…>click here</a> Can be text or image Text can be formatted to look different How do you know to click on an image?. The destination .

mahon
Download Presentation

HTML Links

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. HTML Links 4 February 2014

  2. Links

  3. Links • Need to define two things: • The destination • Something to click on to get there • Tag is <a href=…>click here</a> • Can be text or image • Text can be formatted to look different • How do you know to click on an image?

  4. The destination • Always link to ananchor point • Implicit anchor point at top of page • Adding other anchor points • Insert named anchor point • id=“anchor” on any tag • Can also act as a class • But notice that you can only use it once on any page • Can repeat it on multiple pages

  5. Referencing Ids • To point to an anchor point on SAME page <a href=“#anchor”>link text</a> <a href=“#”>top of page</a> • To reference an id in CSS • #idname instead of .classname • All the same forms (one element, any element, context) • Or limit ids to location and classes to format • can have both

  6. On Page Navigation • Long pages • Avoid too much scrolling • Links to subsections • Link to top • Lots of topics • Use a “table of contents” of links

  7. Linking to external pages • Use full url <a href=“http://www.unc.edu">Link text</a> • To force open in a new tab (window) <a href=“http://www.unc.edu” target="_blank"> Link text </a> GOOD PRACTICE REQUIRED IN THIS CLASS

  8. HTML Local Links • Other pages that are always kept with the current one • Not only the same machine, but the same folder • This is why we use folders! • Connect with the same access tag <a href=“other page">Link text</a> (same format as the link statement) <a href=“Page#AnchorPoint”>Link text</a>

  9. Pseudo-elements

  10. Pseudo-elements • Characteristics of tags that can have their own attributes • Not reflected in HTML • In CSS: tag:pseudo-element • Examples: • p:first-line, p:first-letter

  11. Link Pseudo-elements • Link states • a:link -- a normal, unvisited link • a:visited -- a link the user has visited • a:hover -- a link when the user mouses over it • a:active -- a link the moment it is clicked • Note: CSS order important • hover must come after link & visited • active must come after hover a:link { color: #FC5BD4; } a:visited { color: black; }

  12. a in CSS • Can change attributes for all states with a { Property: value; • inheritance rules are not easy to remember: add things explicitly!

More Related