Class Notes

Introduction to HTML


Refers to any text that contains links to other documents - words or phrases in the document that can be chosen by a reader, which cause another document to be retrieved and displayed. The linking connects related documents and allows the reader to peruse the documents in a non-sequential order.


The combination of text, video, graphic images, sound, hyperlinks, and other elements in the form typical of Web documents. Essentially, hypermedia is the modern extension of hypertext, the hyperlinked, text-based documents of the original Internet. Hypermedia attempts to offer a working and learning environment that parallels human thinking-that is, one in which the user can make associations between topics, rather than move sequentially from one to the next, as in an alphabetic list. For example, a hypermedia presentation on navigation might include links to astronomy, bird migration, geography, satellites, and radar.

URL: Uniform Research Locator

Scheme server/root level path/directory file name

The site name is not case sensitive, however, depending on the server, the path and filename's ARE case sensitive. It's recommended to keep your path and filenames lowercase for ease of use.

Types of schemes:
HTTP:// HyperText Transfer Protocol (the default in most browsers)
FTP:// File Transfer Protocol used for downloading files
Mailto: email -
file:/// file on desktop or computer

Absolute path = entire path name. Example:
Absolute paths are used when linking to a site other than the one you're currently on.

Relative path = the path of the file relative to the current page. Example: /sports/soccer.html
Relative paths are used when linking to pages, images, css files... etc within the site your're currently on.

File Extensions

File Extensions are the letters/numbers at the end of a filename (after the period) that denote what type of file it is.

They are important because without them, the computer will not know how to interpret the file.

Example of file extensions:
.html .php .asp .mp3 .png .vrml .htm .aiff .jpg .mov .txt .wav .gif .mpg .xml .au .swf


HyperText Markup Language

HTML tags

Every HTML file must start with the <html> tag. This tells the browser what type of file it is so it can properly decode the scripts.
The stuff in the <body> is VISIBLE to the User. The stuff in the <head> is invisible, except for the title.

HTML is NOT case sensitive, but choose upper or lower, don't use both. (I recommend lowercase)

<> angle brackets tell the browser to read the text as script tags.
<> is an opening tag. Ex: <HTML><br/> </> is a closing tag. Ex: </HTML><br/>

Brackets hold the COMMAND and the ATTRIBUTES (options) for that command;
You can have many attributes in one TAG. Attributes have specific values.

Example: <hr width="200" align="left" />
Tags that do not hold content should "self close" - eg. <br/> or <hr/>
While it is acceptable to not close these tags in HTML, xHTML requires all tags to closed, therefore it's considered best practice to close all tags.


HOMEWORK: Project 1 Part 1: Three Interactive Narratives Websites

Description: Search the web for 3 creative interactive narratives that were designed using HTML. Submit all 3 Titles and URLs to the Google Forms [HERE]

DUE: Wed Aug. 24

HOMEWORK: Project 1 Part 2: Concept, Hierarchy, Design

Description: Story, Design and Hierarchy Chart
DUE: Wed Aug. 31

HOMEWORK: Project 1 Part 3: Half Done

Description: Design and some interactivity completed
DUE: Wed Aug. 31

HOMEWORK: Project 1 Part 4: Project Complete

DUE: Wed Aug. 31