AIM Class1

esse quam videri
Jump to: navigation, search

Class Goals

  1. Introduce course, instructor, and resources
  2. Give an overview of the Web, and authoring interactive media for web distribution
  3. Give a tutorial on the basics of website construction

Course Introduction


Introductions of instructor and students in course.

Overview of Course

Required Texts

HTML for the World Wide Web with XHTML and CSS by Elizabeth Castro, ISBN: 0321130073, February 2003 - 5th edition (abbreviated as XHTML in the syllabus)

The Zen of CSS Design: Visual Enlightenment for the Web by Dave Shea and Molly E. Holzschlag, ISBN: 0321303474, 2005 (abbreviated as ZEN in the syllabus)

Highly Recommended Texts

Excerpts from these texts will be given as handouts

Information Architecture for the World Wide Web by Louis Rosenfeld and Peter Morville, ISBN: 0596000359 (abbreviated as IA in the syllabus)

Pause & Effect: The Art of Interactive Narrative by Mark S. Meadows, ISBN: 0735711712 (abbreviated as PE in the syllabus)

Login Accounts

To use the computers and studios in the Interactive Arts and Media department, you must first have an account with our servers. If you do not have a login account, please fill out the New Account Form.

Website Contracts

You must have a website on our servers for this course. Once you have an account, you can apply for a website by filling out the website contract form. Print the form, fill it out, and submit it to your instructor or Jeff Meyers.

Contact Information Forms

Print and fill out the Contact Information form. Return the completed form to your instructor.

Overview of Syllabus

Walkthrough of syllabus

Questions about Syllabus

Goal Oriented Media

What does it mean to develop something that is goal oriented?

Introduction to Website Construction

  1. Broad context of HTML/XHTML/CSS/XML
  2. WYSIWYG editors (such as Dreamweaver) vs. using a text editor

About the Web

  1. Brief history of the Internet
  2. Internet vs. WWW
  3. Evolution of markup - where it came from, where it is going.


  1. Internet: The Internet is not the same thing as the World Wide Web. The Internet is made up of computers connected together; it is a network of informational systems.
  2. WWW: The World Wide Web is a type of file transfer over the Internet that has the capability to display graphics, sound, video and other media elements in addition to text. Information on the World Wide Web is transferred via HTTP (HyperText Transfer Protocol).
  3. FTP: File Transfer Protocol is a standardized way of transferring files from one machine to another. An FTP client is used to transfer the data.
  4. HTTP: HyperText Transfer Protocol is a standardized way of exchanging documents on the World Wide Web.
  5. Browser: An interpreting program that translates markup and renders it visually using style information.
  6. Server: A computer which provides services for other computers networked to it, or for those computers allowed to connect to it.
  7. IP address: A unique number (like a phone number) used to identify a computer on a network.
  8. Markup: a method of indicating the logical workings (the underlying structure) of a document.
  9. SGML: a complex and well-developed international text processing standard.
  10. HTML(HyperText Markup Language) is a set of directions that instructs another program (a "user agent" or "browser") to structure content.
  11. XML: a language that is not predefined like HTML – it allows authors to develop their own tags and to provide meaning behind the structure. HTML has a set of tags developed by the W3C. With XML an author can not only defines tags, but also the relationships between them.
  12. XHTML: An extension of HTML 4.0 that is compatible with XML.
  13. DTD: a document type definition is a list of all the tags used within a specification and information about them like whether they are block-level or inline elements, what attributes they can take, etc.
  14. CSS: Cascading Style Sheets. A way of indicating how a document should appear visually (i.e., with font and color specifications).
  15. Cache: holds recently accessed data to speed up subsequent access of that same data
  16. HTML validator: a free service on the W3C site that will check HTML code and point out any parts of it that don't comply with the latest recommended specification.
  17. Presentation: A few examples of presentation are changing font color, text alignment (left, right, centered, etc.), or the visual representation of links (i.e. underlined and blue).
  18. Proprietary Tags: tags that are created by a company and which usually do not conform to standards. Be careful when you use these tags since many of them won’t work in a competitor’s browser (Internet Explorer vs. Netscape for example)
  19. URI (Universal Resource Identifier), also known as a URL (Universal Resource Locator). The URI is part of a system that can locate an address irregardless of where in the world it physically resides.

Resources and Software

  1. Note about available resources at Columbia
    1. Server space (IAM)
  2. Recommendations
    1. Text editors (HTMLkit, SCITE)
    2. Image editors (GIMP, Photoshop, ImageReady)
    3. FTP applications (WinSCP, FileZilla)
    4. Server spaces
    5. Domain name services
    6. Redirecting to your site

Quick Overview

The process of editing with a text editor and a browser for previewing (screenshots are in the HTML Authoring (pdf) document).


Structure and Presentation

Structure should be separated from presentation.

XHTML: Extending HTML

Earlier we spoke about the benefits of XML and why we are moving away from pure HTML documents. So why was HTML extended instead of replacing it entirely with XML?

XML is a "meta" markup language. In order to have anything meaningful, you must either use a pre-existing set of elements or create your own (unlike HTML, XML doesn't come with a predefined set of tags). For those looking to quickly markup a document, or for those who mainly need the set of tags already defined by HTML, XHTML is a more appropriate language to start with. XML languages can then be used in XHTML documents (HTML can not be used in XML languages - extending HTML allows us to use XHTML in conjunction with XML)

XHTML is almost exactly the same language as HTML 4.0 with a few important differences.

  1. Syntax - See the W3 Guidelines

XHTML Basics

Basic syntax form <element attribute="value">

"Open" tags vs. "closed" tags <element attribute="value"> </element> vs. <element attribute="value" />

Common HTML tags

Block level vs. inline

XHTML Compliant Documents

A template for a basic XHTML document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="" xml:lang="en" lang="en">
Type document title here
Type page content here.

Single page construction

  1. Copy the template above and paste into the text editor of your choice. It is recommended that if you are using a PC in the IAM department, that you use either SCiTE or HTMLkit. Another popular editor is Text Wrangler.
  2. Create a link to an external site. Use the following example code, but link to a site other than Google. < a href = "" target = "_blank" alt = "Google" title = "Google" > Google</a >.
  3. Create two lists - one with bullets and one that is numbered. Example code: <ul><li></li></ul>
  4. Add an image to your page. Example code:<img src = "image.jpg" width="100" height="100" alt="image description" />


CSS (will be introduced next class)

Tables (with caveat)

Multiple page construction

Linking between pages

Absolute vs. relative paths

Opening a link in a new window or the same window using the target attribute

Organizing site structure (and files)

File naming: Filenaming is extremely important when working in a team - by having a predefined way of labeling files it is easier to know what a file's purpose is without having to open it up and figure it out. It is also useful when working individually on a large project. For example, if a site has navigation graphics that begin with nav_filename.jpg, when you see a file called nav_logographic.jpg you will know exactly what it is used for, and what type of image it is. It is ok to have long file names (we aren't running unix here), and the more explicit the name, the easier it will be to decipher the file's use three years from now.

Naming conventions: Create a (or choose an existing) naming convention that you are comfortable with and then stay with it. Be consistent.

Directory structure: Keep units together (such as all project one files in a folder called "projectOne" with a subfolder for "images")



Posting to a server and testing

  1. How to post to the IAM server
  2. How to post to a remote server (using FTP wikipedia ftp)
    1. IAM FTP tutorial page using various clients
  3. Browsing to a page vs. opening a page locally


  • [AIM Assignment 1] - Web site analysis project


XHTML: Introduction (pgs 13-22), Chapters 1, 2, and 3

Self Review

Use the self review mini quiz to see how much you remember from today's class


Text Editors

FTP Programs


Getting Started With HTML

HTML Authoring (pdf)

HTML 4.0 Specification