Add Body Links
Users cannot browse to your page, and search engines cannot index it, until there is a link to the page somewhere. Links in the Breadcrumbs and LeftColumn navigation areas are covered in later tutorials. In this tutorial, we place links into the text body of a page.
Step 1: Add a link to your new page body
- Find a page in your browser to add the link to; your home page (index.html), for example
- Add an "absolute URL" link to an external site
- An absolute URL is the full URL, including http:// or https://; the browser can always find this item using the absolute URL, regardless of context
- Select a short range of text to link from
- Find the Link field in the properties inspector
- Type or paste in the full URL (beginning ) of any external site, such as http://www.stanford.edu/
- Press Enter or exit the Properties Inspector to set the link
- Add a "document-relative" link to an internal page using the Browse function
- Document-relative URLs begin without http:// or an initial "/"
- "my_page.html" tells the browser to look in the same directory as the linking page
- "education/my_page.html" tells the browser to look in the same folder as the linking page for a folder called education and the nested my_page.html
- "../my_page.html" tells the browser to back out of the linking page's folder and then look for my_page.html
- Select a short range of text to link from
- Find the Link field in the properties inspector
- Click the Browse icon (looks like a folder) next to the Link field; browse to a page file, such as "my_page.html" and select it
- Press Enter or exit the Properties Inspector to set the link
- Document-relative URLs begin without http:// or an initial "/"
- Add a "document-relative" link to an internal page using the Point to File function
- You must be sure the Local Files list is showing on your screen
- Select a short range of text to link from
- Find the Link field in the properties inspector
- Click and hold on the Point to File icon (looks like cross hairs) next to the Link field, and drag it over to the list of Local files
- Hover over a folder, such as Education; point at the index.html file inside and release to select it
- You can also point at any active document window to link to it, or to any anchor link within an on-screen page to link to the anchor
- Point to File is especially handy for creating "jumper" links to anchors on the same page
Step 2: Edit an existing link
Occasionally you will need to revise a link. You can edit the link text by selecting it or placing your cursor within the linked area and typing. To change the link URL:
-
Place your cursor anywhere within the linked text
- Find the Link field in the Properties Inspector
- Replace the link, using any of the techniques detailed above.
Links to avoid
- Unencrypted, or "naked" MailTo links are an open invitation to spam and so are not recommended; MailTos take the form (in code) <a href="mailto:somebody@someplace.edu"> See Step 3 for an alternative.
- Root-relative URLs
- URLs that begin with a slash, e.g. "/education/index.html" tell the browser to find the root of the domain and look for the indicated resource
- This type of URL is used extensively in the locked parts of the format, but is not recommended for use within your pages
Step 3: Add Spam-proof Email Links
Through a combination of text, link and CSS style, you can provide functional mailto links without risking spam.
To create a spam-proof email link to “youralias@stanford.edu”:
- Type in the text you want to link as a mailto, followed by the beginning of the email address, in brackets. Example: “Center Info [youralias]”
- Select all of this text, including the linking text and bracket text
- In the Properties Inspector, find the Link field and link to "#" -- this placeholder link will be replaced in the browser, by the script; the link can be to anything
- Click to the center of the link, to ensure the style you will apply is applied to the link tag and not some other element
- Select “link_SUmail” from the CSS Styles menu (see Edit Text and Apply Text Styles if you're not sure how)
- Finished example: Center Info [youralias]
When published, the browser will rebuild the link so that “Center Info” links to “mailto:youralias@stanford.edu" without exposing the address to Spam.
Variations
- Use the “link_SHCmail” style for “@stanfordmed.org” addresses
- Finished example: Center Info [youralias]
- If linking to an individual's email contact, and you want to include the address itself in a human-readable form, replace the at and dot characters with words, to keep the address from being harvested for spam
- Finished example: youralias at stanford dot edu [youralias]
- For any other email domain, use either style, but add a space and the email domain within the brakets, i.e. “Center Info [youralias gmail.com]” to create the mailto “youralias@gmail.com”
- Finished example: Center Info [youralias gmail.com]
Optional: Link to a Downloadable File
If desired, you can jump ahead to the exercise to Add Downloadable Documents, including a body link to the downloadable file.
« Previous | Home | Next »
IRT Confluence Wikis