This course ended December 19, 2014.

CPSC 120
Introduction to Computer Science:
Web Site Programming

   Department of Mathematics and Computer Science
   Hobart and William Smith Colleges

   Fall 2014.

   Instructor:  David J. Eck  (

   Course Handout:

   Monday, Wednesday, Friday, 10:10–11:05 AM
       Monday, Wednesday: Lecture in Room Gulick 206A
       Friday: Lab in Room Gulick 208
   Scheduled Office Hours in Lansing 313 (but also check Lansing 310):
       Monday:     1:30–2:50
       Tuesday:    11:00–1:00
       Wednesday:  11:15–12:10
       Friday:     11:15–12:10

Lab Worksheets
Lab 1, September 5
Intro to HTML
Lab 2, September 12
Intro to CSS
Lab 3, September 19
Intro to Javascript
Lab 4, September 26
Komodo Edit
Lab 5, October 3
JavaScript Graphics
Lab 6, October 10
Animation and If Statements
Lab 7, October 17
More Functions and IFs
Lab 8, October 24
Mouse and Key Events
Lab 9, October 31
Basic Form Elements
Lab 10, November 7
Lab 11, November 14
CSS Positioning and Layout
Lab 12, November 21
Image Processing with Gimp
Lab 13, December 5
Arrays and Objects
Lab 14, December 12
Towards Video Poker
Final Exam, December 19
Web Protfolio is Due

First Week: September 1, 3, and 5

Welcome to the course! By the end of the first week, you will write your first basic web pages, and you will have a web site of your own. This week we will cover the basics of HTML, the language that is used to specify the content of web pages. The web pages that you can create using only HTML look rather drab and old-fashioned (although they can contain pictures). Next week, you'll learn to add "style" to web pages using CSS.

The reading for the week is Chapters 1 through 5 from HTML & CSS. It might look like a lot of reading, but there's not a lot of text on each page, and you are not responsible for every detail. Here are the most important terms from the reading:

      HTML                   tag                  empty element
      web browser            element              attribute
      web server             opening tag          attribute value
      link                   closing tag          PNG, JPEG, and GIF

And here is a list of the HTML "tags" that you should be able to use:

       html        h1        b          a         ul     
       head        h2        i          img       ol
       title       h3        sup        br        li
       body        p         sub        hr

The course handout is also a reading assignment!

Second Week: September 8, 10, and 12

This week, we start CSS, which allows you to add "style" to the plain web pages that you can make with HTML. You should read Chapters 10 through 12 in HTML & CSS. Chapter 10 covers the general idea of CSS, including how to use CSS on web pages and how to write CSS rules. Chapters 11 and 12 deal mostly with color, text, and fonts. Note that these chapters use HTML id and class attributes, which we have not yet covered. We will cover them briefly in class, or see pages 183 and 184 in HTML & CSS. The lab this week will ask you to add CSS styling to the pages that you created for Lab 1.

Third Week: September 15, 17, and 19

This week, we will cover a few more bits of HTML and CSS, and we will have a first encounter with JavaScript In Lab 3. The reading is Chapters 8 and 13 from HTML & CSS plus the lab sheet for Lab 3.

The main new HTML topic for the week is the div and span elements. But you should also be aware of HTML entities, especially <, >, &, and  . You will also read about the iframe element and about HTML comments.

For CSS, we will start looking at the "box model," including margins, border, and padding. I will probably have to continue this topic on Monday, but you might want to apply some of it in your CSS styles for Lab 2.

Finally, the lab this week will be on JavaScript. We will just be an introduction, and there is no reading except for the Lab 3 web page.

There is a test coming up next Wednesday, September 24. There will be no additional reading before the test.

Fourth Week: September 22, 24, and 26

There is a test on Wednesday, Sept. 24. For the study guide, click here.

We will spend most or all of the day on Monday going over material for the test. If there is time, I will demonstrate Komodo Edit, which you will find much better than gedit for web site authoring. The lab on Friday will be mostly about using Komodo Edit.

Fifth Week: September 29; October 1 and 3

For the second segment of the course, we will be working primarily on JavaScript. The readings will be from JavaScript & JQuery: Interactive front-end web development. The reading for this week is from Chapters 1 and 2. I encourage you to read the entire chapters, but the only required parts are pages 44–52, 53–69, and 74–84. You've already encountered some of the basic material about values, variables, and assignment statements, but the reading will have more details and will introduce some new ideas.

However, a big chunk of what we will do is graphics, which is not covered in the book. "Computer graphics" is the term used to describe using a computer to draw and process images. Some basic computer graphics can be done using JavaScript and the HTML <canvas> element. A <canvas> is just a blank rectangle on which you can draw using JavaScript. The lab this week introduces canvas graphics and asks you to draw several simple pictures. We will also be covering the material in class.

Sixth Week: October 6, 8, and 10

We will spend most of the week on JavaScript control statements. We will do more work with for loops, and we will take a first look at if statements. We will also look at how the setTimeout function is used to implement animation. The lab for the week is about animation and if statements.

The reading for the week is from JavaScript & JQuery. Read pages 86–99 in Chapter 3, which covers functions. It introduces the important idea of functions with parameters, which we might or might not get to in class this week. (The remainder of Chapter 3 is about objects, which we will cover later.) You should also read Chapter 4, especially pages 146–163 and 170–176. Chapter 4 covers control statements such as if and for, and it covers the operators that you need to work with true/false values. The parts of the chapter that I am not requiring deal other control statements (switch, while, and do..while. I encourage you to read about them, but you will not be responsible for them on tests.

Seventh Week: October 15 and 17

There is no class on Monday because of Fall break. There is no new reading for the week. On Wednesday, we will look at examples that use functions and if statements. In particular, we will talk about defining functions that have parameters and functions that return values. The exercises for the lab on Friday will be similar.

Reminder: There is a test coming up on Wednesday of next week.

Eighth Week: October 20, 22, and 24

A study guide for Wednesday's test is available. It was handed out at the lab on the 17th.

The lab this week will introduce keyboard and mouse events. I hope that there will be a little time to spend on this during class on Monday, but the lab should be self-contained, as long as you do the reading and read the lab worksheet before the lab. The reading is from JavaScript&JQuery, Chapter 6. Read at least pages 246–255 and 272–281.

Ninth Week: October 27, 29, and 31

The plan for the next part of the course is to spend some more time on HTML and CSS, although we will still be using some JavaScript. After that, we will start on data structures -- arrays and objects -- in JavaScript. This week, we will start work on HTML form elements. The reading is Chapter 7 from HTML & CSS, especially pages 145–158.

Tenth Week: November 3, 5, and 7

On Monday, we will continue to look at forms and form elements. We will look at how forms are used to send data to server-side programs for processing, and we will see how to write forms to do that. On Friday in lab, you will write several forms to work with different server-side programs. You should continue with HTML & CSS, Chapter 7, especially pages 159 to 164.

By Wednesday, we should be able to start the next topic, CSS positioning. We will look at the CSS position property, the various kinds of positioning (static, relative, fixed, absolute), and other CSS properties associated with positioning. The reading is Chapter 15 of HTML & CSS, pages 359 to 390.

Eleventh Week: November 10, 12, and 14

We will continue talking about CSS positioning, including the position, top, bottom, left, right, z-index, and float properties. We will look at using float to do layout, and we will also cover some new CSS properties relating to background images. For reading, we continue with Chapter 15 of HTML & CSS, and for background images, pages 413–416.

Reminder: The third test is coming up on Wednesday of next week, November 19.

Twelfth Week: November 17, 19, and 21

A study guide for Wednesday's test is available.

On Monday, we will go over any questions about the test material. In any remaining time, we will start looking at JavaScript data structures (arrays and objects). The lab this week will be on the Gimp image editing program.

Thirteenth Week: November 24

This week, we start the last section of the course. We will be concentrating on data structures. JavaScript has two kinds of data structure, arrays and objects. We have already been working with objects to some extent, since variables such as document and graphics are objects. We will look at them in more detail and will also begin working with arrays.

Arrays are introduced on pages 70 to 73 of JavaScript & JQuery. Objects are covered on pages 100 to 130.

There is no class this week on Wednesday or Friday because of Thanksgiving. Have a great holiday!

Fourteenth Week: December 1, 3, and 5

We continue with arrays and objects. In the lab this week, you will work on several short exercises that involve arrays, including one that uses an array of objects. Don't forget that you should also be working to clean up your web portfolio. There is some information about that in the lab worksheet.

(It looks like we will have not time at all to work with JQuery, which is a major change from the original syllabus.)

Fifteenth Week: December 8, 10, and 12

For the final week of classes, we will continue talking about arrays and objects. The main new topic for the week is constructors. We will also encounter the idea of classes and the Document Object Model.

For the lab this week, you are asked to complete one short project during the lab and will get credit for doing so. You must be present to receive credit for the final lab.

Final Exam and the End of Course: December 19

The fourth test for this course is on Friday, December 19, at 8:30 AM. The exam is in our regular classroom. It counts for 15% of the total course grade. A study guide for the test is available.

Your web portfolio is due on the 19th, but will not actually be looked at until the morning of December 20. The portfolio counts for 10% of the total course grade.