HTML Overview - Intro to Interactive Art Studio
January 11th, 2011
- File extensions
- What is HTML?
- HTML tags generally
- Project 1: Nonlinear Narrative
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 - mailto:email@example.com
file:/// file on desktop or computer
Absolute path = entire path name. Example: http://www.google.com
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 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
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: Ex 1: Five Interfaces
Description: Search the web for 5 good unique and artistic interfaces that were designed using HTML. Email all 5 URLs to your instructor in one email with subject "ARTC3310- Exercise 1 - Five Interfaces"
DUE: Jan. 13, 2011
Description: Story, Design and Hierarchy Chart
DUE: Jan. 20, 2011