Creative Computing

Index of /

Week 3


This Week

  • Q&A
  • Review simple website
  • Intro to HTML

Art projects from the early internet

Each of the websites below were made using very basic technology. Don't get caught up in making something technically "impressive" and lose sight of the power of a good idea and poetic execution.
(More from Olia Lialina →

Gravity, Olia Lialina

Form Art, Alexei Shulgin
What's really nice about this project is that it uses unstyled browser elements to create formal compositions. As the default browser styles change with time, so too does the artwork.




Intro to HTML

Download this template to get started:

File structure:

tiny folders

In class, we covered: <p>, <a>, <ul>, <ol>, <li>, and <img>. In your homework for this week, you will also read about header tags (i.e., <h1>, <h2>, <h3>, etc.), horizontal rules (<hr>), bold (<b>), italic (<em>), underline (<u>) and line breaks (<br>).

Using Images
Use relative file paths to link to images. From our index.html file, we specify that we want to go into the images folder, and link to a file called image.gif:

tiny path

<img src="images/image.gif">



Three parts to this week's assignment:

  1. Read & Review concepts from this week's class.
  2. Evocative HTML
  3. Housekeeping

1. Read & Review
Download the Intro to HTML packet. Open the entire folder in Sublime Text and read through the index.html file, including all of the comments. Next, drag the index.html into Chrome (or right click Open With → Chrome) and compare how the file appears in Chrome vs. Sublime Text.

reading environment

2. Evocative HTML
Using your sketches from week 2, create a compelling HTML experience inspired by the fable assigned to you. Your experience should have a total of 20 inter-linked HTML pages.

3. Housekeeping
Take a moment to tidy up. Make sure you have a dedicated Creative Computing folder on your computer. Make sure your folders are organized both there and on your server.