How to Link specific points on a page - Way Back Blogging

Home Top Ad

Responsive Ads Here

Sunday 2 July 2017

How to Link specific points on a page

Such links are most commonly used for jumping from a table of contents to the beginning of a chapter or section (as in Wikipedia).
To do this, you need two pieces of code (in the html editor, of course): one at the source point and one at the destination point.
• If the destination point is on the same post or page, the code model is:
Source (= link proper)
<a href="#UniqueName">LINK TEXT HERE</a>
Destination
<a id="UniqueName"></a>
Where I’ve written UniqueName you can write anything – just make sure it’s exactly the same in that source/destination pair (including capitalization), and it’s unique to that pair (for another link like that, you’ll need a different UniqueName).
For example, your table of contents might be:
<a href="#intr">Introduction</a>
<a href="#ch1">Chapter One</a>

etc. etc.
Then right before each section title you would write:
<a id="intr"></a>
<a id="ch1"></a>

etc. etc.
(You can also use a source/destination pair to link back from the end of each section to the table of contents, but this is superfluous if the table of contents is at or near the beginning of the page: readers can use the back-to-top keyboard arrow.)
• If the destination point is on another post or page, then the link proper must include the URL of that post or page:
<a href="URL HERE#UniqueName">LINK TEXT HERE</a>
For a live example, click the links in my left sidebar under “Lists of Posts”.
To make the links open in a new browser window or tab, you need to turn the beginning of the link proper to this:
<a target="_blank" [etc.]
• To style the link proper in a way other than the default of the theme you’re using, you need this beginning (see my posts on formatting text):
<a style="PROPERTIES AND VALUES HERE" [etc.]
• You can also add back-to-top links at the end of each chapter or section:
<a href="#top">Back to top</a>
But they aren’t really necessary, since one can use the back-to-top arrow of the keyboard.

No comments:

Post a Comment