Web Development

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

Lecture Objectives

learn how to create links within a web page
learn that an HTML web page is a tree of elements

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>

Hierarchichal Structure

Because elements are nested, web pages have a hierarchical structure.

Terminology:
tree
node
root    leaf
parent    child
ancestor    descendant
sibling

Hierarchichal Structure


<!DOCTYPE html>
<html>
<head>
    <title>A simple document</title>
</head>
<body>
    <p>
        Some words.
    </p>
    <p>
        More words 
        <em>and emphasised words</em>
        and final words.
    </p>
</body>
</html>

The HTML node has head and body nodes as its children. The head node has a title node as its child. The title node has a text node as its child. The body node here has two p nodes as children. The first p node has a text node as its child. The second p has three children: a text node, an em node and another text node. The em node has a text node as its child.

Web Development

Lecture Objectives

Page Jumps

The id Attribute

Example Page Jumps

Hierarchichal Structure

Hierarchichal Structure

G'luck!

The `id` Attribute