If you don't have it already please download Chrome. Other browsers' developer tools are of course just fine, but in class I will be using Chrome.

Also, please download Sublime, a text editor for coding. You may wish to sample other editors like TextMate, Coda, or Adobe’s open source Brackets. I love Atom. I sometimes use Espresso. You're free to use whichever text editor you please, but, again, I will be using Sublime in class.

Finally, please download Cyberduck, an FTP client. Some people use FileZilla. I've been using Fetch since 1998. Transmit is a favorite, but it costs $.

File Types

Websites consist largely of plain text files. That humble text file can take many extensions: .txt, .html, .svg, .css, .js. Likewise the raster image has very many different extensions: .jpg (or .jpeg), .png, or .gif. Not all formats are supported universally, which is especially so for font and video files. We'll review some of them for those of you not already familiar.

HTML

Hypertext Markup Language is a way to write text so that a web browser can read it.

<element></element>

As we go over HTML in class, we will pay attention to absolute vs relative paths, semantic markup, and block vs inline elements.

CSS

How a web page appears, or is rendered, is first defined by your HTML structure and then modified through CSS declarations.

In class we will go over attributes, selectors, classes, and IDs; inheritance; and the box model. Linking an external style sheet is done within the head tags like so:

<link rel="stylesheet" href="mystyle.css">

Some may find CSS Reset and Normalize useful in limiting browser inconsistencies.

CSS can be quite convoluted. I find that it is not a subject someone learns, but rather a way of doing things that someone gets used to. Along the way I encourage you to google any challenges you have. Chances are the answer is out there. To get you started perhaps you'd like to check out this gradient CSS generator, and this page on centering divs (or any block level element), and that other page on the same topic. Background images are sometimes tricky, this page takes you through some CSS options.

Homework

Please read the Web, HTML, and CSS sections (but not JavaScript or SVG) in Chapter 3 of Scott Murray's Data Visualization for the Web.

For those who are not intimately familiar with HTML and CSS: read Jon Ducket's HTML & CSS. The whole thing. Please. I've uploaded a PDF on our drive account. If you can, buy it in print now.

Go through Learn Layout.

Recommended

Simple HTML and CSS harken back to the early days of Net Art. Take a look at The Place by Joseph Squier, My Boyfriend Came Back from the War by Olia Liali, and Ada Web. How contemporary do you find these works?

The Dia Art Foundation and the Walker Museum are among only a handful of institutions devoted to the preservation of otherwise obsolete web art.

Take a look at George Fifield's syllabus for his Interactivity in the Arts class here at RISD.