NHS Designs
Web Design
HTML

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.

lounge.html
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.

directions.html
The "detailed directions" text will lead to an HTML page with driving directions, called directions.html, shown above.

elixir.html
The "elixirs" text will lead to an HTML page with a full list of elixir selections, called elixir.html, shown above.

 

Instructions

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.

lounge.html
directions.html
elixir.html

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.

blue.jpg
drinks.gif
green.jpg
lightblue.jpg
red.jpg

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.

<html>
   <head>
      <title>Head First Lounge</title>
   </head>
   <body>
      <h1>Welcome to the New and Improved Head
      First Lounge</h1>
      <img src="images/drinks.gif">
      <p>
      Join us any evening for refreshing
      <a href="elixir.html">elixirs</a>,
      conversation and maybe a game or two of
      <em>Dance Dance Revolution</em>.
      Wireless access is always provided;
      BYOWS (Bring Your Own Web Server).
      </p>
      <h2>Directions</h2>
      <p>
      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!
      </p>
   </body>
</html>

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:

<a>elixirs</a>

<a>driving directions</a>

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:

<a href="elixir.html">elixirs</a>

<a href="directions.html">directions</a>

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.

 

Key Points

  • 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.

 

Understanding Attributes

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:

<style type="text/css">
The type attribute specifies which style language we're using, in this case CSS.

<a href="irule.html">
The href attribute tells us the destination of the hyperlink.

<img src="sweetphoto.gif">
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?

red Mini CooperIf <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.

 

Assignment

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.

Label

Destination

What you write in HTML

Hot or Not?

hot.html

<a href="hot.html">Hot or Not?</a>

Resume

resume.html

 

 

candy.html

<a href="___________">Eye Candy</a>

See my mini

mini-cooper.html

 

let's play

 

<a href="millionaire.html">
__________________</a>

About Us

about.html

 

  • 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


ABOUT MRS. PEDERSEN ·
resources · copyright information · Natomas High School Design Department