!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Lecture 2: HTML

Lecture 2

HTML

Ketan Mayer-Patel

University of North Carolina

Markup

From publishing
Content vs. Markup
Markup as meta information
- Information about information
- Role of content
- Relationship between content

HTML Elements

The building blocks of an HTML page
Start tags
- Attributes
End tags
Element content
- Text content
- Nested elements
- Empty elements

Overall HTML Structure

Document type declaration (DTD)
- More on this later
html element
head
body

A minimal example.

head

<title>
- required
<link>
- More on this later
<meta>
- Generic facility for providing information about the document.
- name and content attributes

body

Headings
Lines and Paragraphs
Structured Text
Lists
Images
Links and Anchors
Grouping / Structure
Table
Misc (hr, ins, del, address)

Headings

<h1>, <h2>, <h3>, <h4>, <h5>
Example

Lines and Paragraphs

Whitespace in HTML
<p>
<br>
<pre>
Example

Structured Text

<em>, <strong>
<abbr>, <acronym>
<blockquote>, <q>
<sub>, <sup>
Example

Lists

<ul>, <ol>
- <li>
<dl>
- <dd>, <dt>
Nesting lists
Example

Images

<img>
src attribute
alt attribute
width, height attributes
Example

Anchors

<a>
- href attribute
Relative vs. Absolute URLs
- <base>
  - Must be in head
  - href attribute provides base URL.
Specifying a spot within a document
- id attribute
  - Valid for all elements
  - Must be unique for the whole document!
Example

Linking to external resources

Used to link to resources needed to render this page.
<link>
- href attribute
- type attribute
Will come up most with CSS

Grouping / Structure

<span>
- Inline with text.
<div>
- Block-level, hierarchical
Example

Tables

<table>
- <tr>
- <th>, <td>
rowspan, colspan attributes
Example

Character References (Entities)

The problem
& < > "
General numeric character reference
Example

Back to document type.

Flavors of HTML
- Strict
- Transitional
- Frameset
Validating HTML
- W3C Validation Service

HTML shortcomings

Mixed case
Inconsistent nesting
- Empty tags and implied tags.
Attribute quoting
Closed tag set for a specific domain

Motivating XML

Separate structure from semantics
- Allow domain-specific tags
- Provide a way to mix tag vocabularies
- Use it for more than the web.
Enforce "good" structure
- Case sensitivity
- Perfect nesting
- Quoted attributes
XHTML 1.0 = HTML 4.0 + XML
- Abide by the rules of XML for structure
- Meaning of tags provided by HTML 4.0

For Next Time

Get a CS department account.
Readings