© ezmacwebdesign

An anchor in html is defined by the <a> tag and this element is referred to as a link or hyperlink.

Anchors can be used in two ways...


[1] To create a link to another html doc - usually another web page...


<a href="http://www.website.com/page.html">Page Name</a>


[2]  To create a link to a specific point inside a document.


Link                <a href="#anchor-id">Link Name</a>

Target            <a name="anchor-id">Target Name</a>


Here's an example of an anchor which takes the visitor to a specific point in the page - the bottom...

Anchors - How to use the html <a> tag

Back to the TOPhttp://www.iwebformusicians.com/post-edit/anchors.html#http://www.iwebformusicians.com/post-edit/anchors.html#shapeimage_2_link_0

Before you rip stuff off this page, go look at the © notice. Use the "Back to the TOP" link to return here.

It is created using the iWeb Link inspector and is a hyperlink to the target's id...


http://www.domain-name.com/page-name.html#anchor-id


Getting the target anchor in the page code is not so easy since iWeb doesn't provide a way to insert HTML into the page document.

The HTML Snippet is no use to us since it uses a separate HTML doc.


The site has to be published to a local folder and the page-name.html opened in an editor application. In the example on this page, the target is "© ezmacwebdesign" at the bottom of the page.


The code produced by iWeb looks like this...


<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style">© ezmacwebdesign</p>


The text in white is replaced with...


<a name="copyright" style="font:inherit;color:#BDBDBD;text-decoration:none;">&copy; ezmacwebdesign</a>


Note that some CSS has been added to style the text the same as the original.


The HTML doc is then saved and uploaded to the server. Note that this has to be done every time you publish changes to a page.

If you only have one or two pages in a site that need to be post edited, you can create them on a new site in the same Domain file. That way, other pages can be updated without having to go through the post editing process.

Tooltips

A tooltip is a little yellow box that pops up when the mouse cursor is held over a hyperlink. By default, a hyperlink created with the iWeb Link inspector will use the URL (absolute or relative) to the file.

Hyperlinks can be created in an HTML Snippet so that the tooltip text can be customized using the "title" attribute.


<a href="http://www.domain-name.com/page-name.html" title="tooltip text">Link Text</a>

Code...


<p>Place the cursor over  <a href="Target file URL" title="This is the custom tooltip text."> this link </a>to see the tooltip text</p>


... and with the styles added


<p style="font: 1.0em 'Trebuchet MS', Arial, Sans-serif;color: #ccc; margin:0;padding:0";width:450px;">Place the cursor over  <a style="color:#FF0000;font:inherit;text-decoration:none" href="Target file URL" title="This is the custom tooltip text."> this link </a>to see the tooltip text</p>

Back to the TOP

The back to the top of the page link is created using the Link inspector. Enter the URL to the page followed by the hash (#) sign...


http://www.domain.com/Page-Name.html#