CIS 195, Web Authoring 1: HTML and CSS

Course Outline for a Ten-Week Term

General Course Information

Getting Started
Syllabus—10-Week | Syllabus—8-Week
Useful Links (See the syllabus for Zoom links)
Course Materials on GitHub
Demo Code on GitHub

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

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

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 Layout, Float Property

  • CSS Box Model, Positioning

• 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

  • Audio and Video for Web Sites

  • Embedding Multimedia Objects

• 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 2023