LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Explain the importance of links to the web. Identify a link's destination and label. Create a link to another webpage. Use block-level links to wrap a link around an element or group of elements. Use a target attribute to open a link in a new window or tab. Create anchors. Target specific anchors. Link thumbnail images.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Links Links are the lifeblood of the web. Without links, every page would just exist on its own, completely disconnected from all the others. Most links connect to other webpages or to specific locations on other webpages.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Destinations and Labels A link has two main parts: a destination and a label. Destinations: –Defined by a URL. –Only visible to the visitor in browser’s status bar. Label: –What visitors see or hear and then activate to reach the destination. –Can be text, image, or both. –Label text appears underlined and in blue.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating a Link to Another Webpage If you have more than one webpage, you should create links between them. You can also link to pages on other sites, whether your own or someone else’s.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create a Link to Another Webpage Type –page.html is the URL of the destination webpage. Type the label text. –You can also label it with an img element. Type to complete the definition of the link.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Linking Blocks of Content Block-level links are new with HTML5. –Previous versions only allowed linking text, images, and inline elements, but supported by older browsers anyway. Block-level links wrap a link around most elements or groups of elements. –Use on paragraphs, lists, entire articles, and sections. –Exceptions include interactive content: Links, audio, video, form elements, and iframes.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Improving Accessibility with Block-Level Links To improve accessibility: –Put most important content at beginning of link. –Don’t put too much content in one link. –Narrow the focus of the link to the most relevant content. –Stick with simpler, traditional links most of the time. –Accessibility issues are likely temporary.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Navigating Links with a Keyboard Press Tab to move to the next link, form control, or image map link in the HTML code. –Shift-Tab takes you to the previous link. The CSS layout may arrange items differently. HTML’s tab index attribute can change the tabbing sequence. Not recommended because it can disorient screen readers. Mark content so tabbing sequence is logical. –Test by tabbing through pages and adjust HTML. –By default, Mac disables keyboard navigation.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Linking Tips To link to someone else’s website, use an absolute URL with the server, full path, and file name. To link to the default file for a directory, specify the path, but omit the file name. To link to a site’s default (home) page, omit the path. To link to webpages on your site, use a relative URL. Use all lowercase letters for URLs, unless page or directory name has uppercase letters.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Linking Tips Don’t make the link’s label too long. Don't use “Click here” as a label. To apply style properties to a block-level link, set display: block on the link in your style sheet. Image maps can add a link to one or more regions of a single image. A list of rel values is maintained at: Each page needs navigation to key sections of your site, including the homepage.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE How to Use (and Not Use) the Target Attribute Target attribute can open a link in a new window or tab, but it is considered bad practice. –Should be up to user, not HTML developer. –Risks confusing users when results don’t open in current window. –Assistive device users will have to negotiate to new window. Target attribute can also be used to open a link in an iframe, but it is also discouraged. –Code the target the same way, except match its value to the id of the iframe.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating and Linking to Anchors To link to a specific section of the webpage, create an anchor and reference the anchor in the link. –The href value that begins with # anchors to the element with the corresponding id (sans the #). –You may apply an id to any element, as long as any given id exists only once in a page. –FAQ pages are most common use for anchor links.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create an Anchor Place cursor in start tag of element you wish user to jump to. Type id="anchor-name” –Use anchor-name text to internally identify that section of the webpage. –Be sure a space exists between the element’s name and the id. Example:.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create a Link to an Anchor Type –“anchor-name” is the value of the destination’s id attribute. Type the label text. Type to complete the definition of the link.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating Other Types of Links Linking is not limited to other webpages. Create a link to any URL. –RSS feeds, files for download, and addresses. All links look the same. Unless the link wraps around a photo.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create Other Types of Links Type <a href=“ Type the URL. –For a link to files on the web, type: –For address, type: –For a phone number, type: tel:+ (not preceded by followed by country code and phone number without dashes. Type ">. Type the label for the link. Type.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Linking Thumbnail Images Create a photo gallery page with several thumbnails linked to larger versions. For large galleries, consider splitting thumbnails over more than one page. –Each image is a separate server request. Slows down page. –Around thumbnails per page is good. –Depends on number and size of other assets on the page. –Mobile devices typically load assets more slowly. Mark up list of thumbnails with an unordered list (ul).