Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML)
An Introduction

Computer Science Department

bernstdh@jmu.edu

Basics

What is it?
- A document description language
What are the alternatives?
- TeX/LaTeX/AMSTex
- Portable Document Format (PDF)
- ...
What are the origins?
- Standard Generalized Markup Language (SGML): A meta-language (i.e., a language used to define other languages)

Syntax

Elements without Components:
- Syntax: < tag [ attribute =" value " ] ... />
- Example: <img src="logo.png" />
Elements with Components:
- Syntax: < tag [ attribute =" value " ] ... > [ component ... ] </ tag >
- Example: <title>About Us</title>

Syntax (cont.)

Some History:
- The original versions of HTML used SGML "loosely"
- The Extensible Markup Language (XML) is a simplified version of SGML that was created after HTML
- XHTML is a version of HTML that uses XML strictly
Our Approach:
- We will use a strict XML-based syntax but will not distinguish between XHTML and HTML
Some Implications:
- Some valid HTML will be considered invalid in this course (for example, the <br> tag will be considered invalid in this course)

Versions

Some History:
- Between 1990 and 1995 HTML was "hosted" at CERN and the IETF and was revised several times
- The W3C first attempted to create a standard (called HTML 3.0) in 1995
- The W3C completed HTML 3.2 and HTML 4 in 1997
The Current Version:
- The W3C and WHATWG started developing HTML5 jointly in 2006
- The W3C wants to freeze features and publish a standard, WHATWG is in favor of a Living Standard (that continually changes)
Our Approach:
- We will use the widely-adopted elements of HTML5 even though it is not yet a standard
- We will not use elements of HTML5 or the Living Standard that are not supported by all major browsers (i.e., we will not be on the "cutting edge")

The Root Element

Definition of the Root Element:
- The outer-most element
The Root Element in HTML:
- The entire document must be between <html> and </html> tags
Before the Root Element:
- You should include a <!DOCTYPE html> declaration before the root element -- it provides information to the browser

The body Element

Definition of the body Element:
- The content of the document element
Use of the body Element:
- The body of the document must be between <body> and </body> tags

Major Organizational Elements

The section Element:
- A generic section of a document
- Examples include chapters, sections, subsections, etc...
The Heading Elements:
- h1 to h6
The aside Element:
- Content that is tangentially related to the central content
The header and footer Elements:
- Introductory/closing content

Grouping Elements

The Paragraph Element:
- p
The List Elements:
- ol and ul represent ordered lists and unordered lists, respectively
- li represents an element of a list
The Definition Elements:
- dl represents a list of definitions
- dt represents the term being defined
- dd represents the definition
The figure Element:
- Figures, illustrations, diagrams, code listings, etc...
- Can be captioned with a figcaption element
The div Element:
- A generic division (that should be used only as a last resort)

Classification of Text

The Idea:
- Individual words or phrases sometimes need to be classified
Elements:
- acronym, cite, code, em, kbd
The span Element:
- A generic classification of text (that should be used only as a last resort)

Embedded Content

Visual Content:
- img (which includes a src attribute)
- video (which includes autoplay, controls, loop, and src attributes)
Auditory Content:
- audio (which includes autoplay, controls, loop, and src attributes)

What about Hypertext?

The Idea:
- Include a mechanism to move within a document and between documents
The a Element:
- Has an href attribute that indicates the destination URL
- The child element can be clicked on to move to or go to the resource that is referenced by the URL
- Has a target attribute can be used to control how the broswer displays the destination (e.g., _blank, _self, framename)

Important Metadata Elements

head:
- Contains a collection of metadata (i.e., data about the document)
title:
- A unique title for or name of the document
link:
- Provides a reference to other related resources
- Attributes include rel (the relationship), href (the reference), and type (the content type of the other resource)
- Example relationships include stylesheet (for formatting information) and alternate (for alternate versions of the document)
meta:
- Metadata that cannot be expressed using another element

An Example

A Small Portion of a Textbook

htmlexamples/basics/multimedia.html

Tabular Data

Typical Contents of the table Element:
- An optional caption element
- An optional thead element
- One or more tbody elements
Typical Contents of thead and tbody Elements:
- One or more tr elements (one for each row)
Typical Contents of tr Elements:
- One or more td elements (one for each column)

An Example of Tabular Data

A Table of Shell Commands

htmlexamples/basics/commands.html

User Input

The Concept:
- Include elements in the document that can be used to solicit input from the user
Some Important Elements:
- form - The outermost element
- label - A description
- input - A "typed" data-entry mechanism (sometimes called a control)
- button - A button
- select - A mechanism for selecting (one or more options) from a set of alternatives
- textarea - Multiple lines of text

User Input (cont.)

Widely Supported Types of input Elements:
- Check box (type="checkbox")
- Radio button (type="radio")
- Text field (type="text")
Other Types of input Elements:
- Telephone number (type="telephone")
- URL (type="url")
- E-mail address (type="email")
- Date (type="date")
- Month (type="month")
- Week (type="week")
- Time (type="time")
- Numerical value (type="number")
- Numerical range (type="range")
- RGB Color (type="color")

An Example of User Input

A Course Evaluation Form

htmlexamples/basics/evaluation.html

An Aside: Processing User Input

Client-Side:
- Use a scripting language (e.g., EcmaScript/JavaScript to read information from and write information to the document
Server-Side:
- Include an input with a type of submit that will cause a GET or POST request to be sent to the server
- Include method and action properties in the form element to specify the details of the submitted request
- Use a scripting language (e.g., PHP), servlet, or other framework to read information from the GET/POST request and write an appropriate response

There's Always More to Learn