Links

The key thing that makes hypertext “hyper” is the ability to link between pages.

The <a> tag.

a stands for “anchor”.

In pre-HTML systems links were just within a page to specific “anchor” spots, like a chapter header.

Now we’re stuck with the name.

Syntax

<a href="url">some text</a>

Shows up in the page as some text.

You can also put other HTML elements in the place of “some text”.

The <img> tag

img stands for “image”.

Syntax

<img src="url" alt="cute kitten">

alt is an attribute that should provide a description of the image for contexts where the image can't be displayed.

URLs

Uniform Resource Locator

The address of a thing on the web.

Kind of urls in HTML

Absolute: http://itp.gigamonkeys.com/

Root relative: /images/picture.png

Relative: foo.html, subdir/page.html

Absolute

Pretty much only for links to another website.

They will work the same if you move the page containing the link to another web site.

Root relative

File is found relative to the top of your website.

public/index.html
public/images/foo.png

public/ is the root of your website. In index.html a url of /images/foo.png will refer to /public/images/foo.png.

Will work the same if you move the page containing the link within your web site.

Relative

File is found relative to the current file.

public/index.html
public/another-page.html
public/subsection/index.html
public/subsection/another-page.html

In either index.html a url of another-page.html will refer to the another-page.html file in the same directory.

Good for other files in the same directory that are likely to move together.

index.html

This is a special filename that most webservers will serve if you link to the directory containing it.

http://yourwebsite.com/foo/

will probably be serving the file:

/foo/index.html under whatever directory is the web root.

Lots of websites use only urls ending in / because they look nicer and hide some details about how the page was actually generated.

Use …

• Absolute urls to link to other sites.

• Root relative URLs for things like images and style sheets that are probably shared across the web site.

• Relative URLs for things whose relative positions will be constant even if they all get moved somewhere else.