PBDS 660: Introduction to Hypermedia

Tonight's Agenda: Review XHTML

Hide All | Show All

Structure, Structure, Structure

Here is the code for the basic structure of a page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>An XHTML 1.0 Strict standard template</title>
   <meta http-equiv="content-type"
      content="text/html;charset=utf-8" />
</head>


<body>


   <p> - - - Your HTML content here - - - </p>


</body>
</html>

Block Level Elements You Need to Know

Inline Elements You Need to Know

Location-specific Links

Links to a specific location on the current page:

Long pages often need links to internal locations to help with navigation. You can see an example on the Assignments page for this course. Such links have two parts, both of which use the <a> element. The first part looks more or less like a regular link with a little coda at the end:
<a href="somefile.html#some_name">- - some text goes here - - </a>

The other end of this link looks like this:
<a name="some_name">- - some other text goes here - - </a>

Writing location-specific links is a bit tricky. The name you give the destination must be unique and you must be careful to use the same spelling and case when you write the value for the href attribute in the other half of the link.

You can use the id attribute instead of the name attribute at the destination end of a location-specific link. This way of doing business has two advantages:

  1. it can be used with a large number of html elements, including <h1-6>, <p>, <ol> and its cousins, and so on
  2. it will allow you to avoid styling the destination text as a link (although this can also be managed through additional CSS rules

Here's how it looks using the id attribute:
<a href="somefile.html#some_name">- - some text goes here - - </a>

. . . lots and lots of text goes here . . .

<p id="some_name">- - some other text goes here - - </p>

Practice

Add three new location-specific links to your news.html page. Use the name attribute method for one, the id attribute method for another. The third one is up to you.

Now add a location-specific link from your home page (index.html) to one of the locations you have already designated on your news.html page.

Relative Addressing for <a> and <img> Elements

Relative addressing is vital for the success of your Web sites. It depends on your understanding directory structures. As you work from the root to the lower levels of your structure, you must name every directory between the root and the destination file. As you work your way up from a file deep in the structure to files in directories above it, you need only indicate the number of levels up you need to reach.

Directory structures can be represented in lots of different ways. For example, here is one version of what your directory structure should look like when you complete assignment 3 (directory names are in all caps, files in lower case):

ROOT (i.e. YOURLASTNAME)

Practice

All your images, for every assignment in this course, should be inside your IMAGES directory. So, how would you include a picture of Tom Jeter on the page jeter.html? On the page cast.html?

  1. Write the link to go from stiles.html to table.html.
  2. Write the link to go from hayes.html to the index.html at the root level.
  3. Write the link to go from the index.html page at the root to the index.html page for the third assignment.

Coming Attractions

Everything covered in the review session on this page, everything in the lecture notes, and everything in the readings to date are fair game for the big quiz next week.

FINALLY, we will get to the basics of CSS. After that, it's just rules all the way down!

Last updated: 03/05/07 15:44:36
Copyright © 2006 School of Information Arts and Technologies