PBDS 660: Introduction to Hypermedia

• The printing press (The printing press?! Isn't this hypermedia?!)
• Absolute versus relative
• Absolute units of measure
• Relative units of measure
• Monitors and screen resolutions
• Absolute URLs
• Relative URLs

Units of Measure

Why is the printing press important?

Units of Measure

An absolute unit of measure is based on some aspect of physical reality, like an inch.

A relative unit of measure is based on a variable value, like a percentage of another number.

URLs

An absolute URL (aka, fully qualified URL) is one that specifies the entire address for a web resource, beginning with the protocol (http://), the IP address mapped onto a domain name (www.myserver.edu), and the complete pathname right down to the file (/directory1/directory2/myfile.html).

A relative URL specifies only the information required to locate the resource in relation to the current document.

Units of Measure

• points (1 point = 1/72 inches)
• picas (1 pica = 12 points)
• inches (1 inch = 2.54 centimeters)
• centimeters

Units of Measure

• "em's" - relative to the width of the letter m in the font being used
• "ex's" - relative to the height of the letter x
• percentages
• pixels

URLs

• <img src="../images/myPic.gif" alt="my picture" />
  addresses a file in a directory called images; images belongs to the same parent directory as the one in which my current document resides
• <a href="../">this is a link</a>
  the resource that is the destination of this link is inside the parent directory of the one in which my current document resides; the file is probably named index.html (or whatever the default name for files on this particular server is)

Units of Measure

A pixel is a relative measure: it is relative to the ppi resolution of the monitor. While some monitors display 96 pixels per inch, some monitors display 72 pixels per inch.

What else has 72 somethings? And why do graphic designers prefer Macs?

Units of Measure

So I am designing a web page - how big do I make it?

Monitor sizes are always changing as technologies become cheaper and cheaper. Here are some current standard sizes, in pixels. Don't forget to adjust for the browser window (e.g. the scroll bar, the buttons at the top.)

• 1024 wide by 768 high - most common
• 800 wide by 600 high - most common lower resolution
• 2560 wide by 1600 high - higher end displays, like the apple 30 inch "cinema display"

These links might help. And if you do get it, read them anyway.

Pixels n' Points

Absolute versus relative

Screens and Paper

WWW Pages and Cascading Stylesheets

Links to another page:

If the page you are linking to is in the same directory, the link will look like this:
<a href="somefile.html">- - some text goes here - - </a>

If the page you are linking to is in the directory "above" your current one, the link will look like this:
<a href="../somefile.html">- - some text goes here - - </a>

If the page you are linking to is in a directory "parallel" to your current directory, the link will look like this:
<a href="../anotherDirectory/somefile.html">- - some text goes here - - </a>

If the page you are linking to is on another server, the link will look like this:
<a href="http://www.someserver.com/a_directory/somefile.html">- - some text goes here - - </a>

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.