Introduction to Digital Media

ARS 162, Spring 2006

Instructor: Barbara Lattanzi

FORMAL ELEMENTS / SHAPE + LINE using HTML, the underlying language of the World Wide Web

We will review this exercise in class on Tuesday, Feb.14

Goals:

1. To use a simple text editing program (such as Notepad on the PC, or TextEdit on the Mac) to produce simple graphic line elements as part of an initial exploration of screen space and what it means to compose screen space.
2. To store the project on the computer web-server (Smith's "sophia" server) so that it is viewable on the World Wide Web from any browser. (We will do this in class.)

Create a total of 9 webpages:

1. Create 3 screen compositions (3 webpages). On each of the 3 pages will be non-overlapping, vertical black lines or rectangular shapes against a white background (or white lines or rectangles against a black background). The inclusive area for the collection of lines/shapes will be a maximum of 600 pixels high, 800 pixels wide.
2. Create 3 screen compositions (3 webpages) using a combination of black, white, or grey lines of any dimension, horizontal or vertical, overlapping or separate. (Note that, in order to overlap elements, you should change the z-index value.).
3. Create 3 screen compositions (3 webpages) that use a combination of black or white lines (or rectangles) and blocks of text. Let the text be of similar size and weight to the kinds of lines you are creating in these compositions.

Optional element:

Use the "refresh" tag to make each triplet of 3 webpages automatically refresh to each other in a loop.

Here is a sample "refresh" tag that would be placed between the <head> </head> tags:

<meta http-equiv="refresh" content="2;URL=whateverpage.html" />

Visual Considerations:

• visual relationship of the "negative space" to the lines
• visual rhythm produced by the pattern of lines
• escaping "flatland" through contrasting scale relationships (relative large size versus tiny)
• contrasting weight relationships (thick versus thin, or clustered versus dispersed))
• the variability of the browser window and its changing affect on the arrangement of form

SUMMARY OF HTML RELEVANT TO THIS EXERCISE

Here are some tags used in the exercise, including their basic arrangment. You are expanding the number of tags to construct multiple graphic elements. Consult your HTML textbook for more information and other options.

Note the hexcode for white, black, and grey. White is indicated as #FFFFFF. Black is indicated as #000000. Tones of grey are indicated as any letter A through E, any number 1 through 9. Examples of grey tones: #BBBBBB, #333333, #EEEEEE, #111111, etc.)

(You can also look for an example at the set of CSS rules that are used for most of this course's webpages. For our projects, however, you will not need to deal with any set that elaborate.)

<html>

<head>

<style type="text/css">

body {background:#FFFFFF;}

p {font-family:verdana, arial,Helvetica, sans-serif; color:#999999; font-size:40px;}

.mythinline {background:#000000; height:300px; width:10px; position:absolute; left:50px; top:100px; z-index:0;}

.anotherthinline {background:#000000; height:300px; width:10px; position:absolute; right:80px; top:100px; z-index:2;}

.mythickline {background:#000000; height:400px; width:180px; position:absolute; left:150px; top:10px; z-index:1;}

</style>

</head>

<body>

<div class="mythinline"></div>

<div class = "anotherthinline"></div>

<div class="mythickline"><p> here is some text placed within a div block if the text fits, otherwise it just spills over </p> </div>

</body>

</html