Links are key to making the web work, by interconnecting pages from one section to another.
Link Format
A link in an HTML document uses an anchor tag, and follows the basic form
[link text]
That is, a link tag is <a>. It have a required attribute, href, which is a hyperlink reference to a file, or the file we want to go to when the link is clicked.
The link text, is what is shown to the end-user. It can be plain text or an image.
External Links
External links are links to other websites.
External links must have the entire address listed, including the http:// or https:// protocol.
To create select an element (image or text) and in property panel, insert into the link box the website address you need to link to.
Email Links
You can create a link to an email address by using the mailto: prefix to an email address in a link.
Warning: This could cause you to get more spam (yes more) because your address is not “protected” and can easily be read by bots. That is why a lot of companies have gone to using contact forms, and even those forms need to have spam protection.
One Method
- Go to the “Common” tab of your Insert Bar
- Select the email icon
- Enter the “text” – this is what text will display as the linkable text
- Enter the address – this is the email address that the message will go to.
Alternative Method (if linkable text or image already exist)
- Select the text or image you want to use as your link
- In the Link text box for the linkable item, type: mailto:<email address>
- Obviously <email address> will be replaced with a real email address
Styling a Link with CSS
To define how a link looks make sure to define your a tag.This could cause it to look something like:
a {
font-weight: bold;
/* other styles as necessary */
}
This selector will cause you to style every link. You may want to define some extra tags to be more specific, because they are used in navigation, side links, footers, etc. Therefore you would want to make a compound selector.
Some examples of these CSS selectors would be:
- #footer a – for those in the footer section, which might need to be smaller, or subdued.
- #nav a – for navigation menu links (assuming they are contained within an element called #nav)
Named Anchors (Targeting a Links within a Page)
Named anchors allow you to jump to a different place on the page. They act as a target for you to jump to. Here you simply type an anchor tag, and then use the name attribute. Don’t put anything between the opening a closing tags, so it doesn’t show.
But it’s not perfect, especially with styles. Luckily there is a better way now to create internal links.
- Take the tag you want to link to
- switch to code view
- inside that tag, add an id attribute (e.g. <h1> becomes <h1 id=””>)
- as the value of the id attribute, give it a name (e.g. <h1 id=””> becomes <h1 id=”blackteas”>
To access one of these attributes, and jump within the page, use the link #<internal anchor name> (e.g. #blackteas) in the link text box of the property inspector.
How to Build a Link in a Webpage was originally found on Access 2 Learn
