HTML 05: Making hyperlinks
Going Further with Hypertext
Remember the Head First Lounge? Great site, but wouldn't it be nice if customers could view a list of the refreshing elixirs? Even better, we should give customers some real driving directions so they can find the place.
Here's the original page that you are going to edit. You will add links to two new pages, one for elixirs and one for driving directions.
The "detailed directions" text will lead to an HTML page with driving directions, called directions.html, shown above.
The "elixirs" text will lead to an HTML page with a full list of elixir selections, called elixir.html, shown above.
1. Create Site Folders
Create a new folder called lastnamefirstinitial_lounge. Inside this fodler, create an images folder.
2. Grab the HTML Files
Now grab the HTML files below, already created for you. Right-click on each file below, selecting "Save Target As..." and saving them all to the your new lounge folder.
3. Grab the Image Files
Now grab the source files below, already created for you. Right-click on each file below, selecting "Save Target As..." and saving them all to the your new images folder.
3. Edit lounge.html
Open "lounge.html" in Notepad. Add the new text and HTML that is highlighted in yellow below. Go ahead and type this in; we'll come back and see how it all works soon.
<title>Head First Lounge</title>
<h1>Welcome to the New and Improved Head
Join us any evening for refreshing
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring Your Own Web Server).
You'll find us right in the center
of downtown Webville. If you need help
finding us, check out our
<a href="directions.html">detailed directions</a>.
Come join us!
To create links, we use the <a> element. More on this soon.
3. Save lounge.html and Give It a Test Drive
When you're finished with the changes, save the file "lounge.html" and open it in your browser. Here are a few things to try...
a) Click on the elixir link and the new elixir page will display.
b) Click on the browser's back button and "lounge.html" should be displayed again.
c) Click on the directions link and the new directions page will display.
What Did We Do?
Let's step through creating the HTML links. First we need to put the text we want for the link in an <a> element, like this:
The <a> element is used to create a link to another page. The content of the <a> element acts as a label for the link. In the browser the label appears with an underline to indicate you can click on it.
Now that we have a label for each link, we need to add some HTML to tell the browser where the link points to:
The href attribute is how you specify the destination of the link.
What Does the Browser Do?
First, as the browser renders the page, if it encounters an <a> element, it takes the content of the element and displays it as a clickable link.
Both "elixirs" and "detailed directions" are between the opening and closing <a> tags, so they end up being clickable labels on the web page.
Next, when a user clicks on a link, the browser uses the href attribute to determine the page the link points to.
- Use the <a> element to create a hypertext link to another web page.
- The content of the <a> element becomes clickable in the web page.
- The href attribute tells the browser the destination of the link.
Attributes give you a way to specify additional information about an element. While we haven't looked at attributes in detail, you've already seen a few examples of them:
The type attribute specifies which style language we're using, in this case CSS.
The href attribute tells us the destination of the hyperlink.
The src attribute specifies the file name of the picture an img tag displays.
Let's cook up an example to give you an even better feel for how attributes work:
What If <car> Was an Element?
If <car> was an element, then you'd naturally want to write some markup like this:
<car>My Red Mini</car>
With no attributes, all we can supply is a descriptive name for the car. It doesn't tell us the make, precise mdoel, whether it is a convertible, or a zillions other details we might want to know. So if <car> were really an element, we might use attributes like this:
<car make="BMW" model="Mini Cooper" convertible="no">My Red Mini</car>
Better, right? Now this markup tells us a lot more information in an easy to write, convenient form.
Attributes are always written the same way: first comes the attribute name, followed by an equals sign, and then the attribute value surrounded in double quotes.
You may see some sloppy HTML on the Web taht leaves off the double quotes, but don't get lazy yourself. Being sloppy can cause you a lot of problems down the road, as we'll see later.
Let's construct and deconstruct <a> elements. Given your new knowledge of the <a> element, fill in any information that is missing in the chart below. The first row is done for you. In each row below it you'll find some combination of the label, destination, and the complete <a> element.
What you write in HTML
Hot or Not?
<a href="hot.html">Hot or Not?</a>
<a href="___________">Eye Candy</a>
See my mini
- Please write out the entire chart on the paper you turn in.
- Turn in your lastnamefirstinitial_lounge folder too.
Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman