HTML/CSS: Links

The <a> Element

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.

Here are some examples of the anchor tag in action: 
<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." 
<a href='images/pic1.jpg' '>See the Image</a>
creates a hyper link to the file pic1.jpg (located in a folder called images). The clickable text on the page will be "See the Image." 
<a href='http://www.google.com'>Go To Google</a>
creates a hyper link that will go to Google out on the internet. When linking to an external page on the internet, we must use an absolute address, starting at the 'entrance' to the internet,http://. The clickable text on the page will be "Go To Google". 
<a href='mailto:webmaster@mypage.com'>Email Me</a>
creates an email hyper link that will open your mail tool and create a new message to webmaster@mypage.com. The clickable text on the page will be "Email Me". Note the use of mailto: prior to the address in the href attribute. This is required to make an email link effective.

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. It is not recommended to change font-size on hover as it can create a shifting effect on the rest of the page. 
<head>
	<style>
		a{
			color:white; 
			background-color:blue;
			text-decoration:none;
		}
		a:hover{
			background-color:red;
			text-decoration:underline;
		}
	</style>
</head>
<body>
	<a href='http://www.google.com'>Google</a>
Code Result: Google
Note that in the original styling of the a tag, we used text-decoration:none. This removes the default underline that is associated with most HTML links. We put it back in the hover style using text-decoration:underline.

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. Additionally, the li tags are styles to have a list-style of none, leaving no markers as a list might have. 
<head>
	<style>
		nav li{
			display:inline-block;
			width:150px;
			background-color:green;
			list-style:none;
			text-align:center;
		}
		nav li a{
			color:yellow;
		}
		nav li a:hover{
			color:white;
		}
	</style>
</head>
<body>
	<header>
		<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>
	</header>
Code Result: