Anchor
Part A
|
Part B
|
Part C
The <a> tag defines a hyperlink, which is used to link from one page
to another. An anchor can be used in three ways:
- To create a link to another document, by using the href attribute :
<a href="document.html"></a> [Internal (within site)]
- To create a bookmark inside a document, by using the href attribute :
<a href="top"></a> [Internal (within page)]
- To create a bookmark inside a document of another website, by using
the href attribute </a> [External (outside site)]
Attributes of Anchor Tag:
- href (link to object)
- id (link from object)
- ref (relationship between objects)
- hreflang - specify language of target document
- media - define media
- target
The most important attribute of the <a> element is the href attribute,
which indicates the link’s destination.
Part A
By default, hyperlinks will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
You need customize your own colors for your links, hover links, active
links, and visited links.
Tips of Using Anchor Tag:
- A linked page is normally displayed in the current browser window,
unless you specify another target
- Attributes cannot be present if the href attribute is not present
- Use CSS to style links
Different Anchor Usage Between HTML 4.01 and HTML5
In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5,
the <a> tag is always a hyperlink, but if it doesn't have href attribute, it
is only a placeholder for a hyperlink. HTML5 has some new attributes, and some
HTML 4.01 attributes are no longer supported.
Named Anchors in HTML5
The traditional way to create named anchors (bookmarks) on a page was to use
<a name="top">Top of page</a>. If you are working in HTML5 you'll find that your
html validator will indicate this as an error, although it will still work in
current browsers. In an HTML5 document, you need give the anchor/bookmark an
ID and target that in your link.
Top of page
Part B
Linking to a Specific Place in a Document
You can use the Properties inspector to link to a particular section of a
document by first creating named anchors. Named anchors let you set markers
in a document, which are often placed at a specific topic or at the top of a
document. You can then create links to these named anchors, which quickly take
your visitor to the specified position. Creating a link to a named anchor is a
two-step process. First, create a named anchor; then create a link to the
named anchor.
To Create a Named Anchor:
In the Document window's Design view, place the insertion point where
you want the named anchor
Do one of the followings
Choose Insert > Named Anchor
Press Control+Alt+A (Windows) or Command+Option+A (Macintosh)
Select the Common tab in the Insert bar and click the Named Anchor button
In the Anchor Name field, type a name for the anchor. For more information,
see Setting the Named Anchor option. The anchor marker appears at the insertion point.
Note: If you do not see the anchor marker, choose View > Visual Aids > Invisible Elements.
Top of page
Part C
To Link to a Named Anchor:
- In the Document window's Design view, select text or an image to create
a link from.
- In the Link text box of the Property inspector, type a number sign (#)
and the name of the anchor. For example:
- To link to an anchor named "top" in the current document, type #top
To link to an anchor named "top" in a different document in the same
folder, type filename.html#top
- Anchor names are case sensitive. To link to a named anchor using the
point-to-file method, open the document containing the named anchor you
want: Choose View > Visual Aids > Invisible Elements to make the anchor
visible if you don't see it.
- In the Document window's Design view, select text or an image you want to
link from.
- Do one of the following:
- Click the Point-to-File icon to the right of the Link text box in the
Property inspector and drag it to the anchor you want to link to: either
an anchor within the same document or an anchor in another open document
Shift-drag in the Document window from the selected text or image to the
anchor you want to link to:
either an anchor within the same document or an anchor in another
open document.
- In the Anchor Name field, type a name for the anchor. For more
information, see Setting the Named Anchor option. The anchor
marker appears at the insertion point.
Note: If you do not see the anchor marker, choose:
View > Visual Aids > Invisible Elements.
Top of page