• welcome
• administration
• schedule
• project
• documentation
• HTML Reference
• HTML validator
• CSS Reference
• CSS validator
• HTML Examples
• JS & DOM ref

• Validation
• Our Reference Materials
• Reference Information about HTML and CSS
• Information on Firebug
• Reference Information on JavaScript
• Miscellaneous Reference Information on Web Design
• Web Hosting
• Using a MacIntosh
• Interacting With the Rest of the World
• HTML Software
• Graphics Software
• Sound and Movies
• Transferring Your Site to your Client

General

To-Do list for the first weeks

FAQ for CS110

Debugging Strategy for CS110

A set of examples of various techniques that there isn't time for in class or space for in the lecture notes.

Validation

• HTML validator. You can validate by supplying a URL, by uploading a file, or even copy/pasting in some HTML. Note that Firefox has a plug-in that does HTML validation with one click; very convenient!
• CSS validator. As with the HTML validator, you can validate by supplying a URL, by uploading a file, or even copy/pasting in some CSS.
• Accessibility Validator. This offers the same options as the others. It also has a Firefox plug-in, so you can analyze a page as it is in your browser! Very cool.

Validation FAQs

Note that page 235-6 of Head First HTML lists several common validation bugs, and is well worth consulting.

The following are some examples of common validation bugs and how to fix them:

• Document type does not allow element "IMG" here.

  Try validating this page where the validator says a tag cannot go here. Then try validating this solution where the tag is allowed. The problem is that IMG is an inline element and needs to be inside a P element or some other block element.

• Close tag found when element not open.

  Try validating this page where the validator says close tag found when element not open. Then try validating this solution where the close tag is okay. The problem is that OL implicitly closes the preceding P element.

Our Reference Materials

We have constructed our own reference materials from the authoritative references below, primarily for use during exams, when the online materials will not be available. We encourage you to familiarize yourself with these reference materials, so that you can use them effectively during exams.

• HTML reference and HTML ref in PDF. This HTML reference is not complete, but focuses on the tags used in this course.
• CSS reference and CSS ref in PDF. This CSS reference is based on the W3Schools CSS reference.
• JavaScript reference and JS ref in PDF. This is very incomplete, recapping only the JS we use in CS110.

HTML and CSS

HTML 4.0 Reference

W3Schools has an excellent online school for web design

A "Bare Bones" Reference on HTML. There are many others on the web.

I particularly like the W3Schools' CSS demo. They also have a CSS reference.

Here is a large collection of tutorials on HTML, CSS, JavaScript and more

Here is a CSS Tutorial

Here is a wonderful site on CSS and lists

CSS layout techniques

Min Width Columns using CSS

Width Control using CSS

Column Control using CSS

Alternative CSS style sheets

Introduction to Firebug

Firebug is a Firefox plug-in for inspecting and debugging HTML, CSS, and JavaScript. It's great.

We've written some introductory information on Firebug.

We've written also some brief information on debugging your page using the error console and Firebug.

There's a very nice YouTube tutorial on using FireBug to debug JavaScript code.

JavaScript

Advanced JavaScript techniques we won't cover in lecture but you may want to use in your projects

JavaScript Resources

JavaScript coding

w3schools JavaScript reference

A JavaScript guide and associated JavaScript reference

Debugging JavaScript

Miscellaneous

The following web page at Simmons College compiles links to a great many excellent articles on web design:

http://web.simmons.edu/~menzin/IT320/IT320_Bookmarks.html

Web Hosting

Are you or your client interested in web hosting? That is, do you want to find a company that will keep your website on its servers for a reasonable monthly fee? Web hosting companies also usually help with domain registration, so you can purchase http://mypersonaldomain.com/. If so, here's a web hosting review site we found that is very informative.

If your site will be hosted on www.wellesley.edu (the CWIS — the Campus Wide Information Service), you should be aware of the college guidelines.

Using a MacIntosh Computer

General information about using a MacIntosh computer, from the Apple website, if you're not familiar with them:

• Macintosh Fundamentals
• Mac software at Wellesley

Interacting with the Rest of the World

Miscellaneous topics related to this course.

• Computing at Wellesley
• IS Resources at a Glance
• Student Guide to Technology at Wellesley
• Using File Servers
• Fetch: the file transfer protocol (FTP) client for Macs

HTML Software

In this course, we first want you to write HTML tags by hand, to give you some practice with how things really work. Later, you can use software that writes the tags for you, and you'll know what it's doing and, most importantly, how to fix it if it gets the HTML wrong. Consequently, for the first few assignments, you should use simple text-based applications like:

• NotePad (this software is on all PCs, look in Programs/Accessories/Notepad)
• TextWrangler (this is free software for Macs.) Look at the BBEdit website for it.

What about using Microsoft Word? There are two issues with using Word: using it as a HTML software and using it as text software.

First, Word can be asked to write out your document with HTML tags, so it's acting like HTML software. However, in our experience, it does a terrible job, writing out huge files filled with junk, sometimes in binary. We've often had to rescue students where Word destroyed their HTML document, and sometimes we've been unable to do so.

Second, Word can be asked to write out your document as plain text (so you'd have to type the HTML tags yourself). When used like this, it's just a big, bulky version of NotePad. However, we've known students who used it this way and found Word added lots of additional coding and it changed the colors, too.

In short, we strongly recommend avoiding MS Word in this course.

Later in the course, we will teach you how to use some commercial HTML software, where you can point and click, use icons, and generally compose a web page in a more convenient way. The current software is Dreamweaver and it writes out very good HTML code, so that you can examine what it has done and modify it if you want.

Graphics Software

• Introduction to Graphic Converter
• Beginning with Fireworks (although currently available, the license for Fireworks will be expiring in the near future).
• Editor, by pixlr.com (open source image editing program).

Sound and Movies

• How to record sounds with SndSampler and MoviePlayer.
• How to import movies from video tape with Fusion Recorder.

Transferring Your Site to your Client

• If your client is a Wellesley organization, so that the site will be hosted on www.wellesley.edu, you can consult these directions for uploading your finished site to the CWIS.
• If your client is off-campus, probably the easiest thing to do is to download a copy of your entire final or beta folder to your local computer, then send them a ZIP or equivalent file format. You can create a ZIP file using software like WinZIP or 7-zip or Zipit or YemuZip or StuffIt. You could also give them a copy of the site or the archive file on a flash drive or CD.