Access all In Easy Steps books for just £5 a month
Menu
Access all In Easy Steps books for just £5 a month
March 7, 2017
– please note, colour references have not been included in this extract. For full colour specifications, see either print or digital copy.
Hyperlinks can target a specific point in a document that has been created with a “fragment” identifier – an element with a unique identifying name assigned to an id attribute in its opening tag. Within the hyperlink, the fragment identifier is specified to a href attribute in the opening <a> tag prefixed by a # hash character. For example, the tag <a href=”#top”> targets an element within the same document that contains the unique fragment identifier name of “top”.
A hyperlink can also target a specific point in a different document using the document’s URL, followed by a # hash character, then the fragment identifier. For example, the tag <a href=”index.html#top”> targets an element within a document named “index.html” that contains the unique fragment identifier name of “top”.
Following a hyperlink to a fragment identifier displays the document from the point where the fragment identifier appears:
Start with the HTML5 document type declaration
<!DOCTYPE HTML>
Step 2
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<link rel=”stylesheet” href=”fragment.css”>
</head>
<body> <!– Content to go here –> </body>
</html>
Step 3
Within the body section, insert two hyperlinks that contain fragment identifiers and also target different fragments
<a id=”top” href=”#btm”>Skip to Page Foot</a> |
<a id=”next-btm” href=”next.html#btm”>
Skip to Next Page Foot</a>
Step 4
Next, in the body, insert a content paragraph followed by a hyperlink containing a fragment identifier and targeting the first hyperlink in the document
<p class=”yellow-block”>Content…</p>
<a id=”btm” href=”#top”>Skip to Page Head</a>
Step 5
Save the HTML document, then create a second similar document with hyperlinks both above and below content
<a id=”top” href=”#btm”>Skip to Page Foot</a>
<p class=”red-block”>Content…</p>
<a id=”btm” href=”#top”>Skip to Page Head</a> |
<a id=”prev-top” href=”fragment.html#top”>
Skip to Previous Page Head</a>
Step 6
p.yellow-block { height : 700px ; background : yellow ; }
p.red-block { height : 700px ; background : red ; }
Step 7
Save the style sheet, then open the first web page in your browser and follow the hyperlinks to each of this document’s fragments below and above its body content
At the end of lengthy pages include a hyperlink to a fragment at the top of the page so the user need not scroll back up.
Step 8
Now, follow the hyperlink to the fragment in the second document, then return to the top of the first document
For the complete HTML5 guide, all in the trusted In Easy Steps style, click here. In full-colour and straightforward, jargon-free language, HTML5 in easy steps, 2nd edition instructs you how to employ the latest development for web page design with HyperText Markup Language (HTML5). This second edition is based upon the full W3C Recommendation of the HTML5.1 specification that was released on November 1, 2016. This means that ALL features of the latest specification are accurately included and fully demonstrated in this second edition.
Our newsletters inform you of new and forthcoming titles, handy tips, and other updates and special offers. You can opt out anytime.
"*" indicates required fields
By anniemcg
Share
In Easy Steps Ltd 16 Hamilton Terrace Holly Walk, Leamington Spa, Warwickshire, CV32 4LY, UK.
Join as a member and get access to all of our books in digital format for just one small monthly fee.
Copyright © 2023 In Easy Steps Ltd. All Rights Reserved.
Would you mind giving us your feedback or reason of cancelling the subscription?
"*" indicates required fields
