HTML 101

By Scot Hacker, Lisa Pickoff-White
Published May 16, 2007 in Web Development

Creating Links

Let's create a link so the user can easily navigate to the favorite Web site. In HTML, links are created with the "anchor" tag, represented by <a>. But as with the img tag, an anchor without an accompanying URL is meaningless, so you'll need an attribute to go with it – the "href" attribute. The value of the href attribute will be the URL of the page you're linking to. Therefore, a hyperlink/anchor tag looks like this:

<a href="http://webpageaddress.com">Name of the Hyperlinked Page</a>

Remember to put double quote marks around all attribute values, and to close your link with </a>.

It's important to include the full URL when linking to an external site – that means you must include the http:// portion of the URL in your href.

Tip: To avoid typos that will break links, always copy/paste URLs into your links, rather than trying to type them by hand.

Linking to External Sites

We're going to use Google at http://www.google.com as an example and use "Web sites" as the linkable text. So we'll type:

<p>Here is one of my favorite <a href="http://www.google.com">Web sites</a>.</p>

Your document should now look like this:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<div align="center"><h1>Welcome to My First HTML Page </h1></div>

<p>
I'm learning <em>HTML</em> at the UC Berkeley <strong>Graduate School of Journalism.</strong><br />
Here is one of my <a href="http://www.google.com">favorite Web sites</a>.
</p>

</body>
</html>

External linksLinking to Another Page on The Same Site

Links can point either to external sites, or to other pages on your own site.

To link to another page on the same site, you don't need the full http://domain.com portion of the href attribute – you can simply refer to the destination page by filename (or by foldername/filename if the file is in another folder). If the other page is in the same folder as your main page, just enter the file name for that page. Assuming you had another page in your "site" folder named otherpage.html that you wanted to link to, on your main Web page you would type:

<a href="otherpage.html">My other page</a>

If the file is in another folder you would include that path:

<a href="foldername/otherpage.html">My other page </a>

However, working with relative paths like this can be tricky if you've never done it before. To learn more, search for information on "relative links." Here's a good reference.

Add your comment

Login to post a comment.