📖 Hyperlinks
Hypertext Links
Hypertext links or "hyperlinks" are the magic that makes the web accessible for most people. They give users the ability to find different web pages in a website by simply clicking the mouse on an associated word, phrase or image in your HTML document. Without hyperlinks, it would be very difficult (virtually impossible) to find additional pages on the web. Use these interactive hyperlinks to help visitors easily navigate and find information – in your own website and others.
When creating your website, design your work as a collection of several compact and succinct pages – each focused on a particular topic. These pages will load more quickly than longer pages and make it much easier for visitors to find the specific information they are looking for. Then use hyperlinks to link the pages together and make it easy for the visitor to move around through the website.
Give a great deal of thought as to how you want your hyperlinks to work. Provide links to make it convenient to move around the site, but don’t overwhelm the reader with every available option if you have a large number of pages. If your pages are long, provide [destination] links through out to reduce the amount of scrolling required. Consider carefully what links you want to provide to external websites. These should enhance the content and usability of your website – not detract from it. After all, you want to provide your readers with good information, but you also want to keep them on your site as much as possible, not lose them to the maze of information on the Internet.
Coding a Hyperlink
To create a hyperlink, you use the anchor or <a> </a> tags with the href attribute which points to the URL (Uniform Resource Locator) or web address of the document to be linked. You place the text that you want to serve as the clickable link between the <a>Clickable Link Text Here</a> tags:
Visit the<a href="https://www.nasa.gov/topics/journeytomars/index.html"> NASA</a> website for more information.
Results in:
Visit the NASA website for more information.
Absolute Addressing
The word NASA which is underlined above is the hyperlink. Click on it to go directly to the NASA website. In this example, since we are linking to an external website, we had to use the fully qualified URL beginning with https:// and including the domain name (www.nasa.gov) , path (/topics/journeytomars/) and filename (index.html). Using the complete domain name, path and filename is called an absolute address.
Hyperlink Errors
If we leave off the path and filename, we are automatically routed to the default home page for the site, called index.html, index.htm or index.php. Note that this is often case sensitive. If the page requested or an index page is not found, the server will return a 404 Not Found error.
Relative Addressing
If we want to create a hyperlink to a document in our own website, we can use a relative address. That is, we don’t have to specify the domain name and path, only the filename and the path relative to the current page.
- To link to a page that is in the same folder or directory as the current page, simply use the filename:
<a href="about.html">About Us</a> - To link to a page in a lower directory or subfolder:
<a href="courses/imed1416.html">IMED 1416: Web Design I</a> - To link to a page in a higher directory or folder:
<a href="../index.html">Home</a>
In the last example, the ../ in the filename indicated that you should go up one level in the directory structure.
Absolute vs Relative Addresses
Of course, we could fully qualify all the links using href="http://www.MyWeb.com/about.html" for example in the first link. This would take us to exactly the same place. However, many times it is advantageous to use relative links, particularly within your own website. If you need to move your website to a new server, a new drive, or a new folder, you do not have to re-code all your links if you used relative links. If you use the fully qualified name, you would have to go in and change every single link to the new address. This would be quite time consuming and error-prone.
Relative addressing applies to images as well. When you create an <img> tag, the src attribute points to an image file. If that image is stored in an images folder that is in the same folder as the web page, then the src attribute would look like this:
<img src="images/mypic.gif">Attributes
Attributes are properties that can be added to HTML elements to add information or functionality to the element. Each element has a specific list of available attributes that may or may not be available to other elements. For example, the class attribute is often used to apply CSS styling to elements and can be used on virtually every element that can have styles applied. Conversely, the href attribute is used to identify the location of HTML resources by specific URL. This is used exclusively by the anchor (link) tag. Some link attributes are described below.
href attribute
The href attribute is used to identify the location of a web resource (web page) used to find the target of a link.
<a href="http://www.nasa.gov">NASA</a>
target attribute
One attribute that you can include inside the tag is the target attribute. This tells the browser where to open the page. So if you wanted to keep the current page open, but open up another browser window for the linked page, you would add target="_blank" inside the tag. When the link is clicked, the current window is unchanged and a new browser window will open.
<a href="http://www.nasa.gov" target="_blank">NASA</a>
There are some other values that can be used with the target attribute. Many of these are associated with the use of frames pages which we will not go into here. However, you can assign a name to a window, such as target="window2". If a window named window2 is not already open, it will open up a new one. However, if there is already a window named "window2", then the linked page will open up in that window. This is handy if you have a number of links on a page that you are opening in a different browser window and you don't want the user to end up with 20 open browser windows on their computer screen. If you use target="_blank", then it will always open up a new window. One caution about the target attribute: it can cause problems for handheld devices that display Web pages.
rel and title attributes
Two other attributes that can be added to an html tag are rel="external" and title="title text".
rel stands for relationship. This tells the browser, screen-reader and search engines that this is an external link. rel can have other values as well: we've already seen it in the link to our favicon or touch icon, but external is the most commonly used value in the <a> tag.
The title attribute can be used to provide additional information about the element it is used with. It can be helpful if the name of the website/page or the clickable content is not self-explanatory. Title text will pop up near teh resource when hovered. It is optional and can be used on a variety of elements including images.
<a href="http://www.nasa.gov" title="Link to NASA Website">NASA</a>
id attribute
The id attribute is used on a variety of elements as a unique identifier of the element on a page. You should use the id value only once per page (no duplicates).
class attribute
The class attribute is used to group elements together into a "class". This is often used for applying CSS styles to page elements.
Image, Telephone and e-Mail Hypertext
To make an image into a hyperlink, you simply place the <a> tag before the <img> tag and the </a> tag after it:
<a href="topic1.html"><img src="image.png" alt="link to topic1"></a>
Then when the user clicks on the image, it works just like a text hyperlink to take them to another page or another location on the same page.
To create a link to an email address, use mailto:emailaddress@domain.com as the filename in the href attribute. To create a link to e-mail me, you would code the HTML as:
<a href="mailto:pburks@dcccd.edu">Mail the professor</a>
When this link is clicked, a window will pop-up which will allow the user to enter an e-mail message. The Recipient or To: field will already be filled in with the appropriate e-mail address. In order for the e-mail message to be sent, the user must have an e-mail program active on their computer.
For mobile devices, you can make a telephone number a link that when clicked will access the phone and allow the user to call the number directly by using tel:+18005551212 as the filename in the href attribute.
Phone: <a href="tel:19728604329"> tel:+19728604329 </a>
Linking to a Location on the Page
You can also link to a location in the current document called a destination anchor. To create a destination anchor, you use the id="idname" attribute. This can be added to any existing html tag. It will not change the appearance of the document in the browser in any way. However, it does allow you to then create links to that point in your webpage by using a hyperlink in the form <a href="#idname"></a>. Here’s one example of using destination anchors:
<p id="topic1">TOPIC 1</p>
Then somewhere else in the document I might have a hyperlink that looks like this:
<a href="#topic1">See Topic 1</a>
When "See Topic 1" link is clicked, the browser would automatically position the document so that the header line TOPIC 1 is at the top of the window. This is a good tactic to use when you have a long page with many topics on it. Place an index or navigation bar at the top of the page to allow visitors to go immediately to the area of interest without having to scroll down and look for it. It is also frequently used on long pages to allow readers to go back to the top of the page, and for FAQ's (Frequently Asked Questions) to allow immediate access to the question of interest.
You can also link to a destination anchor in a different HTML document by including the filename (relative or fully qualified) along with the destination anchor id like so:
<a href="contents.htm#topic1">.The pound sign (#) tells the browser that that is a destination anchor id. When the user clicks on the link, then they will be taken to the contents.htm page which will be positioned with TOPIC 1 at the top of their screen.
You can see how this works using the "Destination Links" menu on this page. You can also visit the W3C Recommendations page to see how they use this.
Navigation
Navigation is the most significant element in web design. Since web-layouts don't have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn't mess around with it. That's why in most cases it's where simple, intuitive and conventional solutions are usually the best option.
1. Navigation Should Be Easy to Find (Very Easy)
Web users are impatient, and they're not going to hang around a site very long if they can't find their way around. Navigation should be a prominent element of your design. Since it will often take up much less space than other elements, it should stand out enough so it doesn’t get lost amongst a sea of content. The most common location of a button bar is across the top of the page, as users should not have to scroll down to navigate further into your site.
2. Keep it Consistent
Site navigation should appear in the same location on every page of a site. It should also maintain the same style, type and colors. This will enable users to get used to a site and feel comfortable browsing it. If navigation were to jump from the top to the left, disappear, or change colors from section to section, frustrated visitors are more likely to go elsewhere.
3. Use Obvious Section Names
The section names of a site, especially as labeled in the navigation, should clearly state what lies behind them. Obscure, general words like “resources” and “tools” should be avoided when possible, as they only lead to users clicking on multiple buttons before finding what they are looking for. Stick to obvious link names such as “news” and “podcasts” to avoid confusion.
4. Less is More
Too many navigation elements, while leading into more sections, may just leave a user with too many choices. A long list of options keeps the visitor from getting into the most important content areas of your site. Generally, you should have only 1 navigation section and it should display a maximum of 8-10 links.
5. Remind the User Where They Are
Once a user clicks into a site section, it’s a good idea to remind them where they are. Use a consistent method to highlight the section a visitor is in, such as a change in color or appearance. If the site has more than one page per section, be sure to leave the button clickable so users can use it to get back to the main page of that area.
We will learn more about styling a navigation bar later in the course. For now, we want to create a simple navigation bar for our pages right under the header section. We can create a navigation section using the HTML5 <nav> tag and simply string our links across the page using a separator such as a vertical bar ( | ) or bullet (• •). If the links are too wide, you can split them into 2 rows using the <br> tag.