CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

A very simple web page

<!DOCTYPE html>
<html>
    <head>
        <title>An example web page</title>
    </head>
    <body>
        <h1>My web page</h1>
        <p>
            This is a paragraph. Good, isn't it?
        </p>
        <p>
            This is another paragraph. Good, isn't it?
        </p>
    </body>
</html>

DOCTYPE

The overall structure

Headings and paragraphs

Information that browsers ignore

Character references

Lists of items

Markup

HTML elements

Nested elements

Hierarchical structure: organizations

The military has a hierarchical organization.

Hierarchical structure: family trees

A family tree is a hierarchy.

Hierarchical structures: terminology

treenode
rootleaf
parentchild
ancestordescendant
sibling

The hierarchical structure of HTML documents

<!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.