Anchor Tags and Name Attributes in Expression Web - Bookmarks in Expression Web

Anchor Tag - HTML <a> Tag

HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to another html page, an image, a text document, or a pdf file among others.

Example of an anchor tag: <a  href="url">Text to be displayed as link</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

The example defines a link to the home page of this site.

Example:  <a  href="http://www.expression-web-tutorials.com/">Expression Web Tips, Tutorials, and Templates</a>

The default of the anchor tag is to go to the top of the document it points to.

Name Attribute

The name attribute is used to create a named anchor. When using named anchors you can create links to a specific section on a page, instead of letting your viewer scroll around to find what he/she is looking for. Named anchors are called bookmarks in Expression Web.

NOTE: Not supported in HTML5. Use the global id attribute instead. Specifies the name of an anchor

Example of a named anchor tag: <a  name="anchor">Text to be displayed as link</a>

The name of the anchor can be any text you care to use. However, it should not have spaces in the name. Use a hyphen or underscore and all lowercase letter. Expression Web uses an underscore as the default.

Example: <a  name="css-tutorials">CSS Tutorials</a>

A named anchor is not displayed in any special way.

To link directly to the "css-resources" section of the page on tutorials, add a # sign and the name of the anchor to the end of a URL, like this:

<a  href="http://www.genealogy-web-creations.com/tutorials.htm/#css-resources">Cascading Style Sheet Resources</a>

or like this if you are creating a link to a place in the same document

<a  href="#css-resources">Cascading Style Sheet Resources</a>

Bookmarks or Named Anchors in Expression Web

Named anchors are called bookmarks in Expression Web.

How to Add or Remove a Bookmark in Expression Web

A hyperlink can go to a particular location on a web page by linking to a bookmark (HTML anchor) at the location. The link can be to a bookmark on the same page or to one on a different page. You can add a new bookmark and manage existing bookmarks in the current web page by using the Bookmark dialog box.

When you bookmark a selection of text, the text displays with a dashed underline in Design view.

<a name="10-bible">10. Family Bible,</a> C. H. Davis, Pasadena, California.

If you insert the bookmark before the text you want without selecting it first, the text is no longer formatted as a link but the bookmark will still function

<a name="10-bible"></a>10. Family Bible, C. H. Davis, Pasadena, California.

Notice the placement of the closing tag within the code. Choose the method you use depending on how you want the bookmarked text to display.

When you bookmark an empty location, the bookmark is indicated in Design view by a bookmark icon when Show and Paragraph Marks are both selected under Formatting Marks on the View menu.

To create a bookmark

Step 1 - Open the web page in either Design view or Code view.

Step 2 - Select the text to which you want to assign a bookmark OR place your cursor in an empty space next to the text you want to use as a bookmark.

Step 3 - Insert | Bookmark or CTRL + G.  In EW4 use Ctrl + Shift + G.

Step 4 - In the Bookmark dialog box, under Bookmark name, type a name for the bookmark. If you have selected more than one word, the default for Expression Web is to use the selected text separated with an underscore.

To remove a bookmark

Step 1 - Open the web page in either Design view or Code view.

Step 2 - Insert | Bookmark or CTRL + G NOTE: This only worked when I first highlighted the bookmark  > Selected Go To and then

Step 3 - Under Other bookmarks on this page, click the bookmark you want to delete. Click Clear.

Tip - You can also remove a bookmark that's selected in your web page by pointing to the tag that appears in the Quick Tag Selector bar at the top of the web page, and then click the arrow next to the tag and select Remove Tag.

 

Copyright © 2007 Pat Geary of Genealogy Web Creations All Rights Reserved
Revised: January 2011