Links in HTML
Objectives
Lab
Practice
More Info.
Files

Links

To create a link to a file from a web page, we use the anchor element. The anchor element is applied using the a tag. The a tag uses an opening and closing tag pair and the text that users click on gets placed between the tags. This text will automatically be styled to be blue and underlined. The a tag has a required attribute of href. The href attribute should point to the target file (see Paths below for more information on how to set the href attribute). 
<a href='page2.html'>Go to Page 2</a>

creates a hyper link to the file page2.html (located in the same directory as the page). The clickable text on the page will be "Go to Page 2."

Styling Links

Links are styled using the a tag in internal styles. The can be altered like any other text. Additionally, we introduce the :hover pseudoclass to be used in CSS. The :hover class, most often used with a tags and tr tags, allows a set of rules to be written to change the appearance of an element while the mouse is hovering over the element. When the mouse leaves, the :hover styles turn off and return to the normal styling of that element.

Paths

There are two types of paths that can be written when pointing to an external file using the src or href attributes: absolute and relative. An absolute path is a direct path to a file from the main directory of the computer. A relative path is a path to a target file from the current file. Here is an example that may help:

You are at the mall in the food court. You ask a two passerbys how to get to Radio Shack. Person A responds "From the main entrance, go right. Then go up the escaltor. At the top, turn left and it is the 4th store on the right." Person R says "Go left and up the stairs. Then, turn right and it will be the 2nd store on the left."

Person A is giving absolute directions. They are taking you where you want to go, but you have to get to the main entrance to follow their directions. Person R is giving relative directions. They are getting you to Radio Shack from where you currently are.

Absolute paths to our files may look like this: C:\users\mengel\webSite\pages\page2.html. This will work in a web site, as long as you will only ever view the site on your computer, where it currently resided. But, if you move the site folder to a flash drive, that you computer reads as the F:\ drive, the page will be unable to find page2 because it will no longer exist at that address. Its new address may be F:\webSite\pages\page2.html. For this reason, it is important to write all file paths (src and href values) as relative paths. The rules for writing relative paths can be seen below:
  • If the files are in the same folder, just write the file name
    • path from about to contact: "contact.html"
  • If the target file is in a subfolder, write subfolder/filename
    • path from about to icon: "images/icon.jpg"
  • If the target file is up a level, write ../filename
    • path from carousel to about: "../about.html"
  • If the target file is in a sibling folder, write ../folderName/filename
    • path from carousel to navStyle: "../styles/navStyle.css"

Navigation Bars

Once you are able to link to external and internal sites, navigation bars can be built using many of the skills you already possess. While possible to build a nav bar inside a div tag, HTML5 introduced a structure tag called nav to be used for this purpose.

Often, when styling a nav bar, designers use li tags to segment the information. This is accomplished by setting the style of the li tags to have a display of inline-block and the desired width. So, the li tags are inside a single nav tag and the a tags are inside the li tags. <nav> <li><a href='link to file 1'>Link 1</a></li> <li><a href='link to file 2'>Link 2</a></li> <li><a href='link to file 3'>Link 3</a></li> </nav>