Lesson 3

Hyperlinks

Without hyperlinks, the World Wide Web would be utterly useless. Links form the basis of the web, because they are the means by which a user can navigate from page to page, or from site to site. For such a critical function, links are actually fairly easy to code, as we shall see. To create a link in XHTML, you need two things:

  1. The name of the file (or the URL of the file) to which you want to link.
  2. The text, or hotspot, that identifies the hyperlink on the page.

Here is an example of a hyperlink, in this case specifying a URL:

<a href="http://example.com/">Example</a>

The a is short for anchor because it is also used to create anchors for links - we will discuss that a little later. href is short for hypertext reference, which in the case of our example is the URL for an example website. This is always enclosed in quotes (""). Then comes the link text; the text that the browser will display as a hyperlink, instead of the actual URL. Finally, there is the closing tag </a> that tells the browser that it is the end of the link. The final result will look like this:

Example

The example above uses something called a remote pathname, in that it specifies its URL on the web. This is just one of three kinds of paths:

  1. Remote Path: specifies the web address of a file. These are sometimes erroneously referred to as absolute paths (which means something different). For example, "http://example.com/index.html"
  2. Relative Path: points to files based on their locations relative to the current file. For example, "../folder/filename.html"
  3. Absolute Path: points to files based on their absolute locations on the file system. These are also sometimes called relative-from-root paths. For example, "/folder/filename.html"

    4. Yeah, great. What the hell does that all mean then?

    It does sound a bit complicated, doesn't it? In practice it is easier than it looks. The type of link you use depends on where you are and where you are going. If you want to link to lesson two of these lessons, you could use either of the following two links:

    1. http://jessey.net/simon/xhtml_tutorial/two.php
    2. two.php

    The first link uses the remote path - you could type it straight into your browser and it would take you there. The second link is the path relative to the path of this page. On the other hand, if you wanted to link to the “about” page of this website, you would use either of the following two links:

    1. http://jessey.net/about/
    2. /about/

    Again, the first link is the remote path. The second link is an absolute path because it points to the top level of my web directory hierachy and works downward through intervening directories to reach the file. Absolute pathnames are really useful in that they are always the same, no matter where in your site you are linking from.

    Okay, that's enough theory

    Yes, that was all very boring, wasn't it? Let us do an example page that includes links. To make it a little more complicated, we will put the links into a list - something you will see often on web pages. Using the template you learned in lesson two, create a file called page08.html that includes the following code:

    <h1>List of relative links</h1>
<ul>
  <li><a href="page01.php">First Page</a></li>
  <li><a href="page02.php">Second Page</a></li>
  <li><a href="page03.php">Third Page</a></li>
</ul>

    Viewed in a browser, you should see the following:

    Anchors

    You can create links within pages as well. Let us suppose you have a very long page. A user would read the page from the top towards the bottom, getting further and further away from the top all the time. Using anchors, you can provide handy links back to the top. Likewise, you can create a list of links at the top of the page that send the user further down that page. This is achieved by giving names to points on the page, such as “top” and “section3“. The code for assigning an anchor looks like this:

    <a id="top">...</a>

    As usual, the easiest way to demonstrate this is by example. Create a file called page09.html with the code below. This listing is quite long, so you may prefer just to load the sourcecode instead. The length is necessary to demonstrate how anchors function:

    <h1><a id="title">Demonstrating Anchors</a></h1>
<ul>
  <li><a href="#sec1">Section One</a></li>
  <li><a href="#sec2">Section Two</a></li>
  <li><a href="#sec3">Section Three</a></li>
</ul>
<p>Up until now, the links you have created have been from one point in a page to another page. In XHTML, you can use anchors to create special elements that link from one part of the page to another.</p>
<h2><a id="sec1">Section 1</a></h2>
<p>You create an anchor in almost the same way you create a hyperlink. Instead of using "href" to specify a filename and location, you use "id" to identify a section.</p>
<p><a href="#title">back to top</a></p>
<h2><a id="sec2">Section 2</a></h2>
<p>Anchors require some amount of text (or a graphic) between the opening and closing tags, although they can point to just a single character. Unlike links, anchors do not show up on the web page.</p>
<p>To point to an anchor on the page, you use the same "href" attribute as you would normally use in a hyperlink, substituting the filename for the anchorname preceeded by the pound (#) sign.</p>
<p><a href="#title">back to top</a></p>
<h2><a id="sec3">Section 3</a></h2>
<p>You can also use point to places on a different web page instead of the same one. Amending "href" to read "filename.html#part4" would send the user to "part 4" on the new page.</p>
<p><a href="http://www.w3.org/TR/xhtml1/#xhtml">This link</a> sends you to the specifications for the second edition of XHTML 1.0 on the World Wide Web Consortium's website.</p>
<p><a href="#title">back to top</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

    All the <br /> elements at the end are there to create lots of line breaks, so that the browser window is much longer than the text. I will explain line breaks later in this lesson.

    Viewed in your browser, it should look like this:

    You can try clicking on the links on this page if you wish. They should work in the same way as they do in your saved file.

    Text formatting

    It is time to introduce you to the logical style elements. These are special elements that describe the meaning of the text between their tags, allowing the browser to understand how they should be presented. Below is a list of each element with an explanation and an example:

    <em>...</em>
    Tells the browser to emphasize text, usually resulting in italicized text.
    Example: I watched Lord Of The Rings at the cinema.
    <strong>...</strong>
    Tells the browser to emphasize more strongly, usually resulting in bold text.
    Example: Go down the avenue and then turn left at the light.
    <code>...</code>
    This element indicates the text inside is a code sample, and displays it in a fixed-width typeface (such as Courier).
    Example: Server Side Includes are called with <!-- #include virtual="filename.html" -->
    <samp>...</samp>
    Indicates sample text, and works much like the <code> element, being represented in a fixed-width typeface.
    Example: The URL is http://jessey.net/
    <kbd>...</kbd>
    Indicates text that is intended to be typed by the user.
    Example: Type the following command: ch dir a: at the command prompt.
    <var>...</var>
    Tells the browser to expect a variable, or something that will ultimately be replaced by an actual value. Usually in italics.
    Example: Open up filename.html and edit it.
    <dfn>...</dfn>
    Indicates a definition. The browser will usually italicize the text.
    Example: These kinds of elements are called logical elements!
    <cite>...</cite>
    This is to indicate a short quote or citation.
    Example: Cheeseburgers are fundamental components of my life (Jessey, 2002)

    In addition to these logical elements, there are also physical style elements. Elements like <b>...</b> for bold text and <i>...</i> for italicized text are perfectly legal tags, but other physical tags like <u>...</u> for underlining have been deprecated in XHTML in favor of Cascading Style Sheets. An XHTML page should always consist of structure and content only. Style and layout should really be performed with CSS and so I will not be giving any further explanation of physical style elements.

    Special Characters

    It is very difficult to show you how to create special characters on the page, because your browser will convert their codes into those characters. Certain characters such as the “©” symbol can only be represented on a webpage by using a special character entity, because ASCII text has limited support for these kinds of characters. A character entity consists of three parts; the ampersand "&", a shorthand version of the character you are trying to represent (such as "copy" for the copyright symbol) and the semicolon ";". There are also numbered alternatives that provide an even greater range of possible characters.

    The number of special characters is considerable so I shall not try to present them all here. I have compiled a relatively complete list for you to refer to if you wish.

    The Line Break

    Purists argue that the line break, created by using the closed <br /> element is not a good thing because it is really an element used for layout, and not structure or content. Although this is true, there are some occasions when it is very difficult to do without it.

    When a web browser encounters a <br /> tag it restarts the text at the left margin of the next line. In the Strict form of XHTML you should restrain yourself to putting the <br /> element within block level elements, such as paragraphs, headings, and lists. Using them outside of block level elements will mean that your code will not validate to the World Wide Web Consortium's XHTML 1.0 Strict standard.

    Time for another example. Create page10.html with the following code, to demonstrate the line break:

    <h1>The Line Break</h1>
<p>This paragraph will effectively demonstrate the line break, as used within a block level element.<br />This is a new line...<br />and this is another new line. The line break should only be used within block level elements. To achieve the same effect outside of such elements, one should make use of:-<br />Cascading Style Sheets.</p>

    Viewed in a browser, you should see the following:

    At last! A proper web page

    You are now armed with the basic knowledge you will need to create a proper web page. There are, of course, dozens of other elements that you haven't yet seen, but they are not necessary to get decent-looking results. We are going to create an imaginary “homepage” for a personal website. We will be using almost all of the elements you learned about in the previous lessons. Below is the code for our homepage. Type it in and save it as page11.html (or if you prefer, you can find it by clicking the source code link).

    <h1><a id="top">Jonathan Doe Home Page</a></h1>
<p>Hi! My name is Jonathan Doe and I'm a "newbie" web developer. I would like to tell you a little bit about myself,so I am going to break down my life into five sections for you to look at if you would like.</p>
<ol>
  <li><a href="#early">My Early Life</a></li>
  <li><a href="#teen">Teenage Years</a></li>
  <li><a href="#job">Getting My First Job</a></li>
  <li><a href="#life">Family Life</a></li>
  <li><a href="#hobs">My Hobbies</a></li>
</ol>
<h3><a id="early">My Early Life</a></h3>
<p>I was born in Providence, Rhode Island, in 1960. When I was four years old, we moved into an old house that was a bit run-down. My father purchased it as a "project", hoping to fix it up and sell it for a lot more money. He did exactly that, but not before I was quite a bit older. I can remember much about the old house. It was <em>huge</em>, with three floors and eight bedrooms. Four of the bedrooms had their own bathrooms and my room was one of the biggest. I was lucky enough to have my own, king-size bed to sleep in - a luxury I have not always had in my life.</p>
<p>These were the things I liked doing when I was a kid:</p>
<ul>
  <li>Flying my brother's kite</li>
  <li>Riding my bicycle</li>
  <li>Playing on the swing my father built in our garden</li>
  <li>Watching TV</li>
</ul>
<p><a href="#top">back to top</a></p>
<h3><a id="teen">Teenage Years</a></h3>
<p>I had a rough time at school during my teenage years. I've got a problem with one of my eyes that means it is slightly discolored, and the other kids at school used to call me awful names. It made it quite difficult to concentrate on my school work.</p>
<p>I was quite good at English and Math, but I was <em>lousy</em> at Science and Geography. My teacher used to say it didn't matter how good at Math I was if I couldn't navigate my way to class.</p>
<p><a href="#top">back to top</a></p>
<h3><a id="job">Getting My First Job</a></h3>
<p>My father had a local business making parts for vending machines, and he offered me a job in his assembly line. It would have meant getting some training in engineering, which would have been great, but I just didn't fancy working the line, so I declined his offer.</p>
<p>Instead, I went on a course to learn videotape editing. The course was five weeks long and at the end of it I had obtained a good qualification in the field.</p>
<p>For six months, I applied for numerous jobs in the local area, as well as posting my résumé on various internet jobseeker sites. Eventually, a small production company nearby called me in and gave me the job as their junior editor.</p>
<p>I stayed there for three years, working my way into the senior position, before leaving for Pennsylvania!</p>
<p><a href="#top">back to top</a></p>
<h3><a id="life">Family Life</a></h3>
<p>I've always been a fan of the internet and quite by chance, I met a woman online. She was attractive and intelligent and I found it a pleasure to talk to her. We arranged to meet and hit it off immediately.</p>
<h5>Moving South!</h5>
<p>A few years later, we got married and I moved to Pennsylvania. She already had a couple of kids from a previous marriage so I found myself in the thick of family life. My wife lived in a nice house near Philadelphia. One of the first things I did after moving there was to get myself one of Philly's famous <strong>Cheese Steaks</strong>.</p>
<p><a href="#top">back to top</a></p>
<h3><a id="hobs">My Hobbies</a></h3>
<p>I am a big fan of <em>Star Trek</em>™ as well as a keen internet user. I've started building my own website, including a Trek "fan" page! If <em>you</em> are interested in <em>Star Trek</em>, pay a visit to the <a href="http://www.startrek.com">Official <em>Star Trek</em> Website</a> to find out about the latest "goings-on" in the Trek universe.</p>
<p>I am now learning how to use Cascading Style Sheets. You can take ordinary-looking web pages like this one, and turn them into pages that have exciting styles and colors, without resorting to "deprecated" elements.</p>
<p><a href="#top">back to top</a></p>
<hr />
<address>This page was created by Jonathan Doe<br />© 2002 J. Doe.<br /><a href="mailto:jdoe@ficticious.com">Email Jon</a></address>

    You will notice I have sneaked a few new things into that code that you will not yet be familiar with, all towards the end. The first is <hr />, which puts a horizontal rule across the page. The second is the address element, which encloses a block of text that usually goes at the foot of a page - usually to display author information.

    Finally, you will notice the "mailto:jdoe@ficticious.com" email address. This is the way you create a hyperlink to send an email. You merely add mailto: before the actual address. The user's email program will open, and the address will be inserted into the space for the recipient. Viewed in a browser, you should see something like the following:

    That was another feature-packed lesson. I advise you to review what you have learned in lessons 2 & 3 before continuing further. The next lesson will focus on presenting tabulated data, and inserting images.

    Proceed to lesson 4.