HTML

Derek Bridge

Department of Computer Science,
University College Cork

HTML

Aims:

to understand structural and presentational markup
to know the components of HTML
to understand the hierarchical structure of HTML documents

Markup languages

Annotations on a document are markup
In Computer Science, the markup is included as extra text in the document
It is included for the benefit of programs, such as web browsers

Types of markup

Structural markup

structural, logical, content-based
Presentational markup

presentational, physical, appearance, layout, formatting, display, rendering
Semantic markup

meaning

Elements, attributes and values

An HTML document comprises elements
An element comprises
- content (the text), plus
- markup (the tags: start tag and end tag)
element = start tag + content + end tag
Tags may take attributes and their values to make them more specific

Elements we'll study in Induction

html (lang), head, meta, title, link (rel, href), body
h1—h6, p, em, strong, i, b
ul, ol, li
section, nav
a (href)
img (src, title, alt)
figure, figcaption
table, caption, tr
th, td (colspan, rowspan)

Character references

To include special characters in the content, use character references, e.g.:

< < > > & &

Á Á á á € €

< < á á a a
A list: http://www.digitalmediaminute.com/reference/entity/index.php

Empty elements

Sometimes you want an element with no content—an empty element

E.g.

	Mojito	Margarita
Country	Cuba	Mexico
Alcohol	Rum	Tequila

The markup:

<table>
    <tr>
        <th></th>
        <th>Mojito</th>
        <th>Margarita</th>
    </tr>
    <tr>
        <th>Country</th>
        <td>Cuba</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <th>Alcohol</th>
        <td>Rum</td>
        <td>Tequila</td>
    </tr>
</table>

Void elements

For some elements (e.g. img and link), there is never any content—void element
For these, never write the end tag

The way we will write them (the XHTML syntax), e.g.:

<img src="mojito.jpg" alt="A mojito is packed with mint leaves." />

Nested elements

One element can be nested within another, to several layers, provided the nesting is done properly:
```
This is correct
This is incorrect
```

Exercise

A student wants to produce this nested list:

badgers
wombats
- common wombat
- hairy-nosed wombat
squirrels

But s/he writes this, which is wrong. Please fix it

<ul>
    <li>badgers</li>
    <li>wombats</li>	
        <ul>
            <li>common wombat</li>
            <li>hairy-nosed wombat</li>
        </ul>
    <li>squirrels</li>
</ul>

Comments

Comments can make the source file more self-explanatory
```

```

Multimedia content

Multimedia content (e.g. an image, etc.) is not in the document:
- It is stored externally in another document/file
- It is referenced from within the document

Hierarchical structures: terminology

tree	node
root	leaf
parent	child
ancestor	descendant
sibling

The hierarchical structure of HTML documents

A document and its corresponding tree. The HTML node has head and body nodes as its children. The head node has a title node as its child. The body node here has two p nodes as children. One of the p's has a cild that is an em.

The HTML node has head and body nodes as its children. The head node has a title node as its child. The body node here has two p nodes as children. One of the p's has a cild that is an em.

<html>
  <head>
    <title>A simple document</title>
  </head>
  <body>
    <p>
      One short paragraph.
    </p>
    <p>
      Another short paragraph with <em>emphasised text.</em>
    </p>
  </body>
</html>

Exercise

Draw the tree for smallads.html

<	`<`	>	`>`	&	`&`
Á	`Á`	á	`á`	€	`€`
<	`<`	á	`á`	a	`a`

HTML

Derek Bridge

Department of Computer Science, University College Cork

HTML

Markup languages

Types of markup

Elements, attributes and values

Elements we'll study in Induction

Character references

Empty elements

Void elements

Nested elements

Exercise

Comments

Multimedia content

Hierarchical structures: terminology

The hierarchical structure of HTML documents

Exercise

Department of Computer Science,
University College Cork