Contents

Schedule

(Subject to change)
WEEK DAY ANNOUNCEMENTS READING HW
1 Sep 01 Labor Day
Sep 03   Introduction to WWW and HTML
  • What is the Internet?
  • What is the WWW?
  • How do a web server and browser work?
  • What is HTML?
(Read HF-HTML Ch. 1)
Homework 0
Sep 05 Basic formatting
  • Using your account
  • Minimal markup required
  • Basic elements
  • Paths
  • White space
(Skim HF-HTML Ch 4, Read HF-HTML Ch. 1-2)
2 Sep 08   Inline graphics, hyperlinks, lists
  • Hyperlinks
  • Inline graphics
  • Quotes
  • Nesting
  • Lists
  • Special Symbols
(Read HF-HTML Ch. 3)
Homework 1
Sep 10 Last Day to Add/Drop (Sep 11)
Sep 12  
3 Sep 15   Working with images
  • File formats
  • Image representation
  • Creating animated GIFs
  • Creating transparent GIFs
  • GIF vs JPEG
(Read HF-HTML Ch. 5)
Homework 2
Sep 17
Sep 19 QUIZ #1 [In Class] (topics)
4 Sep 22   Standardized HTML and Converting to XML/XHTML
  • Brief history of HTML versions
  • Standardized HTML
  • Validators
  • Moving to XHTML
(Read HF-HTML Ch. 6-7)
Homework 3
Sep 24
Sep 26
5 Sep 29   Basic CSS
  • CSS rule structure
  • including CSS with <style> tag
  • including CSS with <link> tag
  • Font style
(Read HF-HTML Ch. 8-9)
Homework 4
Oct 01
Oct 03 QUIZ #2 [In Class] (topics)
6 Oct 06   Homework 5
Oct 08
Oct 10
7 Oct 13   Box model
  • Content
  • Padding
  • Border
  • Margin
(Read HF-HTML Ch. 10)
Homework 6
Oct 15 CSS Containers
  • <div> and <span>
  • pseudo-classes
  • CSS rule resolution
(Read HF-HTML Ch. 11)
Oct 17 QUIZ #3 [In Class] (topics)
  Oct 20 October Break (Oct 18-26)
Oct 22
Oct 24
8 Oct 27   Layout
  • Floated columns
  • Absolute positioning
(HF-HTML Ch. 12)
  
Oct 29
Oct 31
9 Nov 03 Last Day for P/NP, CR/NE,
  or Withdraw (Nov 04)
Tables
  • Basic layout
  • Spanning multiple columns/rows
  • CSS formatting
(HF-HTML Ch. 13)
Homework 7
Nov 05   Web design
Nov 07 QUIZ #4 [In Class] (topics)
10 Nov 10   Homework 8
Nov 12
  1. Sample HTML Form
Web Forms
  • Form elements
  • How forms are processed
  • CSS formatting
(HF-HTML Ch. 14)
Nov 14   JavaScript quick intro
11 Nov 17 Favicons and Faux Columns Work on final project
Nov 19  
Nov 21 QUIZ #5 [In Class] (topics)
Drop Down Menus
12 Nov 24 Blogs Homework 9
Nov 26 Work on final projects (no class)
Nov 28 Thanksgiving Break (Nov 27-30)
13 Dec 01 Embedding audio and video content
Dec 03   WYSIWYG Editing (DreamWeaver)
Dec 05 Search engines
  • How search engines work
  • Making your pages work with search engines
  • Improving your page ranking
14 Dec 08 QUIZ #6 [In Class] (topics) Other topics Work on final project
Dec 10 Work on final projects (no class)
Dec 12
  Dec 19 Final Project Presentations (9-11:00am) - [Location TBA]

Course Description

From the Oberlin catalog course description:

A hands-on course in Internet web site development. Primary emphasis is on each person building a complex web site focused on some area of academic interest and competence using (a) the HTML mark-up language, (b) programs supportive of web site construction (e.g. PhotoShop, Dreamweaver), and (c) the JavaScript scripting language, with strong emphasis on the latter. About one-half the course deals with JavaScript.

Goals and course objectives

My goals and objectives for students taking this course are as follows:

  1. Understand how the WWW works and the role that the Internet plays
  2. Understand the different roles HTML, CSS, and JavaScript play in a website
  3. Be fluent in using HTML and XHTML for content markup
  4. Be able to write and use CSS to modify the presentation of a page
  5. Understand the role of JavaScript in web pages
  6. Understand different graphical file formats and the appropriate uses of them
  7. Have experience with some of the tools commonly used in website design (Dreamweaver, GIMP, Photoshop, Flash)
  8. Be able to use the tools normally provided for by a web hosting company (FTP/SFTP, ssh, etc.)
  9. Design and create a substantial website for an outside client

Textbook

Head First HTML with CSS and XHTML

Head First HTML with CSS & XHTML by Freeman and Freeman

Tools you can use

There are a number of free software tools that I recommend you use to help you when you are working on your websites. My recommended software are available cross-platforms -- MS-Windows, OS X, Linux, and *BSD.

Web Browsers

You will want a web browser that supports CSS and XHTML and contains a DOM Inspector and JavaScript console.

Text Editor

HTML, CSS, and JavaScript are all plain text files. That means that there aren't any special interpretations that are supposed to be made for the files. Unfortunately, most "text" editors interpret HTML and/or CSS in the files they read making them extremely frustrating to use for our purposes.

I strongly recommend you use jEdit (available for all platforms) or something similar for your editing. There is an easy text editor on the CS machines as well or you can use pico from the command line.

Useful plugins for jEdit include:

Graphics

File Transfer

You'll need to get your files to and from the webserver. To do this, you'll need software that supports SFTP or FTPS. These should be available from CIT's Software Download page.

WYSIWYG

We probably won't get time to do this, but there are visual editors for web pages such as Nvu, KompoZer, and SeaMonkey. Also, there are specialized editors like Arachnophilia.

Web Accounts

The college makes both personal and group web accounts available for your use. You can request an account at http://oberlin.edu/cit/accounts/default.html.

If your organization has forgotten the account name or password, you need to email cit@oberlin.edu and request that it be reset.

Grading

Grades will be calculated based on the following distribution:

The distribution might be adjusted based on the progression of the course.

Homework and Project grading

Note that this is not a design course. Grading will be largely based on objective measures. If the assignment asks for 2 images that are 150x150 pixels in size, then that will be what I'm looking for. Supplying only one image or images of the wrong size will lead to reduced marks; supplying a non-creative image will not.

Homework and Course Policy

Attendance

Regular class attendance and participation is expected. Please talk to me if regular class attendance is going to be a problem.

Homework Assignments

There will be a number of assignments made in this class. I expect every student to attempt each assignment and turn in the results. You are encouraged to complete every assignment as this is one of the most effective ways to learn the material.

If you know that for some reason you will not be able to submit the assignment before the deadline, you should contact me in advance of the deadline. Extensions are only granted in exceptional circumstances, but need to be done in advance.

Late assignments will be penalized 10% per day. Extra credit will not be accepted after the initial deadline.

Accommodations for students with disabilities

If you have a disability that might impact your performance in this course, or requires special accommodation, please contact me as soon as possible so that appropriate arrangements can be made. Support is available through Student Academic Services, specifically Jane Boomer. You will need to contact them to get your disability documented before accommodations can be made.

Plagiarism and Academic Dishonesty

I have very low tolerance for academic dishonesty, and will vigorously pursue available remedies for any incidents. All work in this class is to be performed according to the Oberlin Honor Code. Specifically I expect that:

  1. Quizzes will be closed book, closed notes, and no communication between students. This includes discussing the same to students who are taking the quiz at another time.
  2. Discussion of assignments is expected and encouraged, however all work and code on assignments should be your own without outside assistance.
  3. Sources should be cited including the textbook and other web sites when you use them in your work.

Illustrative examples:

  1. Confirming that we had and exam is OK, telling another student in the class who has not taken it that it was easy/hard, what topics, etc. is NOT OK.
  2. Discussing what needs to be done and how it can be done is OK, having a student (other than a TA) go over your code is NOT OK, discussing what might be wrong and how to tell is OK (and encouraged).
  3. Basing a design off of the appearance of another site is OK, using the code of such a site as a starting point is OK with attribution, but is NOT OK without attribution.

All assignments must include the following signed statement:

"I have adhered to the Honor Code in this assignment."

Electronic submissions should include the honor statement in either the README or comments and must include your name.

Assignments

Weekly projects

Initially, there will be a series of weekly projects requiring you to create and modify some web pages (linked in the schedule above). These assignments will be assigned on Thursday and will usually be due at the start of class the following Thursday. They should give you experience using the material we discussed in class that week.

Handin

Quick List

Semester Project

You will also be creating a website for an outside organization. We will discuss this project in class and this description may be updated with additional details.

You should think of this in terms of a final paper for a course. You will need to select a topic, do background research, create an outline, do a rough draft, and create a final draft based on feedback from the draft.

A detailed description is available, but is subject to change.

Grader and Tutors

There may be a number of individuals who are approved via Student Academic Services as tutors for this course.

Jason Kimmel
Grader: Jason Kimmel
Homework help hours: Thurs 8:00-10:00pm
Azariah's in Mudd Library

Last Modified: November 21, 2008 - Benjamin A. KupermanVI Powered

Valid HTML 4.01 Strict Valid CSS!