Adding Links
You probably have already noticed that most, to not say all, the websites have links, not just text. You need to them to direct your users to another page, whether within your site, or outside your site. In fact, downloads are links to files that browsers to read. Here, you will learn the HTML behind links, and how to link.
To provide a link, there is a specific element: the a element. The <a> element is not an empty element, as the text it encloses will be the clickable text. Here is an example we will examine:
<a href="http://www.apple.com" title="Official Apple Homepage">Click here to visit the Apple homepage</a>
This yields something that looks like this:
Lets examine the example. After the a element initiation, you need to enter href="" This tells the browser the url of the link. In this case, it was http://www.apple.com .
After that, there is a space, and there is a title attribute. An attribute describes the properties of a specific elements. The href is an attribute of the <a> element. title is also an attribute of the <a> element.
The title attribute tells you the text that will appear when the user hovers over the link. Hovering is when the user passes the cursor of the mouse over a specific point on the website.
The <a> element can be easily nested inside other elements.
Properties of the <a> element
Destination Anchors are what reference a specific part of the page. For more info on destination anchors, click here.
New Window
If you would want to a link open in a new window so as to not disturb the visit to your page, you add another attribute, the target attribute. Using the sample same sample code above, it would look like this:
<a href="http://www.apple.com" title="Apple's Official Website" target="_blank">Click here to visit Apple's Website</a>
The State of the <a> element
There are other embellishments in intertwining HTML and CSS code so as to make it more of a customized experience. By default, links are in blue. An once somebody has clicked on that link, the link will appear a purplish color. To learn how to use CSS to customize it, click here.
