CIS 195, Web Authoring 1: HTML and CSS

Table of Contents

General Course Information

Useful Links (See the syllabus for Zoom links)
Course Materials on GitHub
Demo Code on GitHub

Summer Eight-Week Term

The summer term course is condensed into eight weeks of class with no final's week.
Syllabus

Ten-Week Term

This is a "normal" term with ten weeks of class plus a final's week
Getting Started
Syllabus

Course Outline for a Ten-Week Term

1. Intro to HTML

• Objectives

• Reading
  Read these sections of The HTML Handbook by Flavio Copes
  1. Preface
  2. HTML Basics
  3. Skip this chapter
  4. The document body, but skip section 4.1
  5. Tags that interact with text, but skip sections 5.7 and 5.8
  6. Links, but skip the part on relative links
  12. Images, just 12, not 12.1, 12.2, etc.

• Lecture Notes

  • Intro to the Course

  • Basic HTML Elements

  • Resizing Images

• Examples

  • Empty Web Page

  • My Oregon Page

  • My Demo Page

• Lab Assignment

  • Lab 1 Instructions

  • Lab 1 Rubric

2. More on Creating Web Pages with HTML

• Objectives

• Reading

  • History of HTML

  • More selected sections in The HTML Handbook

  4.1 Block elements vs inline elements

  5.6.1 Quotes

  5.7 Horizontal Line

  6. Links

  12. Images

  • Selected sections on W3 Schools:

    • HTML Comments

    • HTML Symbols

    • HTML File Paths

• Lecture Notes

  • More HTML

  • Absolute and Relative File Paths

  • History of HTML

• Examples

  • South India Web Site — Source code

• Lab Assignment

  • Lab 2 Instructions

  • Lab 2 Rubric

3. Developing a Web Site

• Objectives

  This week you will learn how to build a multi-page site with various types of site navigation links.

• Reading

  • Uploading your website to the CIT Web Server

• Lecture Notes

  • Site Structure and Navigation

  • Publishing to a Web Server

  • Image Maps (Not covered summer 2023)

• Zoom Recordings

  • Tuesday's class

  • Thursday's class

• Examples

  • Planets Web Page

  • South India Web Site

• Lab Assignment

  • Lab 3 Instructions—Summer Version

  • Lab 3 Rubric—Summer Version

  • Lab 3 Instructions

  • Lab 3 Rubric

4. Designing a Page with CSS

• Objectives

• Reading

  Selected Sections of the CSS Handbook

  1. Preface
  2. Introduction to CSS
  4. Adding CSS to an HTML page

  5. Selectors

  6. Cascade

  7. Specificity (precedence) (Just read 7.0, not the sub-sections) 11. Pseudo-classes
  13. Colors
  20. Fonts
  21. Typography

• Lecture Notes

  • Styling with CSS

  • Text Formatting, Pseudo-Classes

• Example

  • South India Web Site

• Lab Assignment

Lab 4 Instructions Lab 4 Rubric

5. Midterm

• Lecture Notes

  • Publishing to a Web Server, Review

  • How to upload your site to citstudent

• Midterm Quiz See the syllabus for details about the time and place of the midterm quiz.

6. Page Layout with CSS

• Reading

  Selected Sections of the CSS Handbook by Flavio Copes

  22. Box Model](https://flaviocopes.com/book/css/#5-selectors)
  23. Border

  24. Padding
  25. Margin
  26. Floating and Clearing

  27. CSS Grid

  28. Flex Box

• Lecture Notes

  • CSS Box Model

  • CSS Layout, Float Property

  • CSS Flex Box

  • CSS Grid

• Example

  • Guide to South India

  • Float Demo

• Exercise

  • CSS float and clear Properties

• Lab Assignment

  • Lab 5 Instructions

  • Lab 5 Rubric

7. HTML Tables

• Lecture Notes

  • Tables

• Example

  • Table Practice

• Lab Assignment

  • Lab 6 Instructions

  • Lab 6 Rubric

8. HTML Forms for User Input

• Lecture Notes

  • Forms - Part 1

  • Forms - Part 2

• Lab Assignment

  • Lab 7 Instructions

  • Lab 7 Rubric

9. Multimedia for the Web

• Lecture Notes

  • Multimedia for Web Sites

• Lab Assignment

  • Lab 8 Instructions

  • Lab 8 Rubric

10.1 Review and Term Project

• Lecture Notes

  • Review

• Term Project Assignment

  • Term Project Instructions

  • Term Project Code Review Form

10.2 (Optional) Advanced CSS

• Lecture Notes

  • Advanced CSS

Written by Brian Bird, winter 2019, revised summer 2025