Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

practice with absolute and relative URLs
learn how to create links within a web page

Exercise

A filesystem:

The root / has two subdirectories, www and flowers. flowers contains the file rose.html. www contains a file called index.html and three subdirectories. The first of these three is trees, which contains index.html, oak.html and yew.html. The second subdirectory of www is images, which contains oak.png. The final subdirectory is errors, containing error.html.

An `httpd.conf` File


ServerName www.example.org
                
Listen 80
        
DocumentRoot "/www"
        
DirectoryIndex index.html

ErrorDocument 404 /errors/error.html

How Many Files?

How many files are hosted by this web server?

What Gets Served

Give the absolute pathnames of the files that will be served if a client requests the following URLs:

http://www.example.org/images/oak.png
http://www.example.org/trees/
http://www.example.org/
http://www.example.org/flowers/rose.html

Absolute URLs

Assume we are writing URLs for inclusion in /www/trees/oak.html, give the absolute URL for the files called:

yew.html
oak.png
index.html (the one in trees)
index.html (the one in www)

Relative URLs

Assume we are writing URLs for inclusion in /www/trees/oak.html, give the relative URL for the files called:

yew.html
oak.png
index.html (the one in trees)
index.html (the one in www)

Page Jumps

A page jump is where the user clicks a link and she is moved to somewhere else within the same page.

scheme://host:port/pathname?query#fragment

The `id` Attribute

Some attributes only apply to certain elements (e.g. src with img).
Others, like id, are global, i.e. they apply to all elements (e.g. lang).
You can invent the id attribute's value, but it should be unique within the document, e.g.:
```
<section id="education">
```

Example Page Jumps

In the HTML,

the destination has an id;
the hyperlink uses the id in its href


<nav>
    <a href="#education">Education</a>
    <a href="#hobbies">Hobbies</a>
    <a href="#family">Family</a>
</nav>
…
<main>
    <section id="education">
        <h2>Education</h2>
        …
    </section>
    <section id="hobbies">
        <h2>Hobbies</h2>
        …
    </section>
    <section id="family">
        <h2>Family</h2>
        …
    </section>
<main>