Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Define Links in HTML Web Page Content

Links, those clickable objects that make the web what it is, are defined with the HTML <a> element. We complete our survey of the most essential HTML tags with an examination of this vital link in web page design.

The most essential attribute of any <a> element is the href attribute, which defines the link's destination. But <a> elements also must include some content — for example, some text — that displays in a browser and enables the link to work. For example, the following HTML code displays Search Google and links to www.google.com:

<a href="http://www.google.com">Search Google</a>

Note that the entire link, including the display text, is enclosed within <a> and </a> tags. However, there is also a closing > after the actual link and before the displayed text.

Links can have defined targets, like the "blank" parameter used to open a link in a new browser window. To edit the preceding example to open in a new browser window, you would use this code:

<a href="http://www.google.com" target="_blank">Search Google</a>

Absolute and relative links

Links can be absolute or relative:

  • Absolute links, like the one in the preceding examples, are defined with http:// at the beginning and include the entire URL for the link.

  • Relative links are used within a website. So, for example, if you were linking to a page called about_us.html, you could use

    Visit my <a href="about_us.html">About Us </a>page!

    However, the preceding code would work only if the about_us.html page is in the same folder as the page from which it was linked.

You can also define more complex relative links, using / to chart a path to the folder with the link. For example, to link to a file called slideshow.html in a subfolder (relative to the original page) named presentations, you would use this code:

Visit my <a href="presentations/slideshow.html">Slideshow</a> page!

How links look

When you build a style sheet for your site, you define how links appear in different states: unvisited, visited, active (in the process of being opened), or hovered (hovered over by a mouse cursor). By default, until you create a style sheet, links appear like this in all browsers:

  • Unvisited links are underlined and blue.

  • Visited links are underlined and purple.

  • Active links are underlined and red.

    There is no default hover state. And until you create one in a style sheet, hovered links do not change appearance.

blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!