All the Catalogs

By Penelope Umbrico. An all text piece that is comprised of the names of all the available mail-order catalogs listed on the internet, 15,194 in total, at time of compiling in 2002.

Alphanumeric Labs

By August Highland. Poetry based site.

Back to Life

By Albay at Xurban.net. "An experiment on animal behavior .social isolation issue in a special type aquarium."

The Salvaggio Museum

Collection of different web artists.

Meaning Arises Through Use

Art and politics in a junction between on-line and real world.

North Country

Interactive story by Helen Thorington

Color Stories: Yellow

Abstract works by Kanarinka

Keeping Up Appearances

Interactive prose by Meni Lewis Obadike

Learning To Love You More

By Harrell Fletcher, Miranda July and Yuri Ono. Web site and non-web presentations with general public involvement in performances.

Poetry by Go Ego Go!

Collective on on-line poets and poems. Lots of links to other poetry sites.

Poetry the Works

By Komninos. Interesting example of aleatoric textual art.

Point of Departure

Lost track of who did it, but lick on the "Aircraft Failure" diagram for some good text and animated gif artwork.

American Internet and Anatomy of Hope

By Eryk Salvaggio. Text art and Coca Cola. Be sure to read the ~.txt~ link.

Untitled HTML Paintings

Abstract images by Enrico Glerean.

Ghost City

Linked images by Jody Zellen

Mandiberg.com

Very conceptual site by Michael Mandiberg.

Genochoice

Satire

Zoe's World

Interactive rollovers by Zoe Beloff

A collection of command elements that tell a browser what to do.

Elements are generally in the form of:

There’s also markup for special characters, in the form of:

Like this:

 	A non-breakable space
"	A quotation mark ?
©	A copyright mark ©
®	A registration mark ®

Here's a listing.

And one more thing, comments:

Tags, attributes and properties are always inside  <  and  > 

Most, but not all, tags come in pairs. Works like a light switch:

If you don’t turn it off, things may break further down the page. Sometime everything disappears!

The exceptions need a  /  within the brackets to turn them off.

First tag on, last tag off: (BTW, here's how to get Mac's TextEdit to work for hand coding)

Another way to think of it: “Elements cannot overlap each other”

Many tags have optional attributes and properties that use values to modify the tag’s behavior.

Unlike tags, attributes and values don’t need to be turned off.

In XHTML, properties should always be in quotes:

Usually, browsers will ignore tags they don’t understand. This can be both a blessing and a curse!

HTML Tags used to be in UPPERCASE, not by requirement, but by convention. XHTML should be lowercase only.

All tags, no exceptions, must be closed.

Single tags without a corresponding close tag must be closed inside themselves

Everything in the browser window at any given moment is the “document”.

The browser is fed the doc in a particular order. First the information about what kind of doc is coming down the wire. Here’s the type we’ll use:

Not strictly required, but it can make a difference, especially in future browsers. Also note, that unlike the rest of XHTML, DOCTYPE and some of its properties must be in uppercase

This doctype tells the browser:

“This document will be an html document, and the place this flavor of html XHTML 1.0 Transitional, and it is kept, in case you need to check it, is at http://www.w3.org/xhtml1/DTD/xhtml1-tranistional.dtd (link it)

The next thing down is a tag that tells the browser there is a container of stuff coming with the html code in it:

Next comes a notice that the first bit in the html container is a container within the html container that has information about the page, or the head information:

Then comes some information about the page. This can be all sorts of things, like style sheets, JavaScript, keywords, redirects, etc. Usually you have a title for your page that will display in the browsers title bar:

If there’s no other stuff for the head, the browser needs to know to turn off interpreting stuff as head content.

Next, the body container comes down. This is what the browser will actually render to the screen:

Then the meaty bits…

Then finally, the browser is told that it’s all over:

Altogether, that looks like this:

HTML’s origins as an academic paper presentation technology = a visual designers nightmare!

The tags we’ll learn are problematic. The standard has become to bend them to our will, but it makes it REALLY HARD TO BUILD AND MAINTAIN.

Welcome to a world of pain and GOTHCA’s.

We’ll come back to this subject again and again.

There are thirteen basic types of tags by some counts:

There are 3 ways in which tags affects the horizontal area in the window:

The document is broken down at it's highest level into two parts:

Some header tags

And there’s too many tags that go inside the body to list here…we'll get to those.

We can control some of the basic look of the page with the <body> attributes and properties.

All these attributes are "deprecated" and won't be necessary once we get into stylesheets. Indeed, it may even fail in future versions of browsers.

Hexawhatamal? What kind of color is that?

Your content should be formatted not by how a particular tag looks, but by what a particular tag means. This may seem obvious, but it’s easy to loose track of it. The tag may not look the way you want, but you can redefine the tag later in a stylesheet.

If something is a main headline, then it should be <h1>

A subhead to the main head should be <h2>

A subhead to the subhead to the main subhead should be <h3> and so on. HTML specs up to 6 levels!

Body copy should be <p> for paragraph

Lists should be <ul> or <ol> for ordered or unordered lists

Browsers set defaults, including text size, usually to:

And users can do anything they want.
Defaults also can be set for all sorts of things, depending on the browser. Including link colors, background colors, and proportional, serif, sans-serif, and monospace fonts. Users can even force your setting off.

Most tags can be modified with attributes and properties. The big one is:

align=”left” choices of “left”, “right”, “center”

You can grab tighter control of how your text looks without stylesheets with Character Format tags:

Which to use?

Strong has more power, but b is more direct. Your call, but you’ve been warned.

It’s deprecated, but you can use it for now until we get into CSS.

You can force the browser to render the font you want and relative size you want.

Note that size is relative to the default font.

Font sizes are all relative to the default browser font. The available sizes are:

1 to 7, -1 to -7, +1 to +7

Consider the least common denominator when considering faces. If you must have a specific face, use a bitmap.

You can create a list of fonts in order of preference. When the browser fails to find your first font, it looks for the second, then the third, etc.

This is the common set of lists from Dreamweaver:

If you need some text, here’s some greeking text.

Build a web page that looks like this:

Build a page with a headline, 3 sets of subheads with at least 2 paragraphs under each subhead, only using content-structural tags and using all of these:

Build a third page like the one above, but throw in <b>, <big>, <i>, <small>, <tt> as well.

If you've got that worked out, try nesting some of the tags!

Make this using special characters:

Here's a listing.

Note the use of four non-breaking spaces after the exclamation point and before “Hmpf.”

Build a page that shows the three different types of lists

Use this as a reference: http://www.w3schools.com/html/html_lists.asp