CS197: Programming in HTML

Course Description:
CS197 is an introduction to the language and strategy of website design and the use of coding
language such as Hypertext Markup Language (HTML), Extensible HTML (XHTML) and Cascading
Style Sheets (CSS) to create efficient and effective web pages. Students learn to design a basic
page, insert images, create links, and produce tables. Through Text, Lecture, Tutorial, and Lab
Exercise, students prepare a basic final project using "best practices" in website and web page
design and creation.

Course Objectives
1. Explain how the World Wide Web works, and the relationship between the Web and
Webpages.
2. Define key terms in design and strategy, and coding terms from HTML, XHTML, and
CSS.
3. Apply the design strategy to produce several linked, elementary web pages, writing
HTML code to create structure, color, font, style, tables, images, hyperlinks, block-level
elements, paragraphs, and lists that are user appropriate and navigable.
4. Use Cascading Style Sheets (CSS) to extend the usability of the page.
5. Troubleshoot the page of basic coding and runtime errors.

Course Credits: 3 credits

Course

Prerequisites: CS192
Course Textbook:

Minnick, J. L. (2017). Web design with HTML5 & CSS3: Comprehensive (8th ed.). Boston, MA:
Cengage Learning.
ISBN: 9781305578166

Additional Materials:
1. Notepad++ (or other text editor)
2. cPanel (login provided by Grantham IT)

Grading Policy: A course grade is determined based on the percentage of points as designated in
the following chart.
Assessment
Discussions
Assignments
Final Project

Percent of Final Grade

20%
60%
20%

Below is an at-a-glance look at the weekly discussion and assignment topics. In each Getting
Started module within the course, you will find details about your weekly readings, lectures,
supplemental resources, discussions and assignment instructions, and rubrics
TOPICAL OUTLINE BY WEEK
Week 1:

Introduction to the Internet and Web Design

Reading:

Chapter 1, and Chapter 11 (pp. 505-516), Notepad++ installation instructions,

cPanel tutorial,

Discussion:

Introduce yourself to the class. What do you hope to do with what you learn in
this class? Which browser(s) are you using? Why did you choose them?
In addition to your response, please provide a link to a one of your favorite
websites (you could choose this based on the content it provides, its visual
appeal, its layout, or its function) and provide a brief explanation of what
makes it appealing to you.

Assignment:

Open your textbook to page 44 and complete Lab 2: Creating a Webpage

from a Template, steps 1-8.

Week 2:

Planning and Building a Website

Reading:

Chapter 2 in textbook
Building a Webpage Template in HTML5

Discussion:

What are some types of errors that a validator will help you find? What are
some types of errors that a validator will not help you find? Why should you
always validate your markup and check your content too?

In addition to your response to the question above, choose a heavily-trafficked

website, and enter its url into the W3C Validator. Once you have run your test,
provide a brief summary of how the website scored and some of its major
HTML errors (if any). Did the result of this test surprise you?
Examples of heavily-trafficked websites:
www.amazon.com
www.whitehouse.gov
www.wikipedia.org
Assignment:

Open your assignment from last week and continue with Lab2: Creating a
Home Page for Cycle Out Cancer, steps 1-9 on page 79 of your text.

Week 3:

Adding Links and Images

Reading:

Chapter 3

Discussion:

Why are links so important to a website? How can links within a website help
or hurt a websites visibility? Is it possible to overlink in a website?
In addition to answering the question please paste a link to a website that you
believe either effectively OR ineffectively uses links within its contents. Write a
brief description of why you chose this website and how it uses linking on its
pages.

Assignment:

Week 4:
Reading:

Open your assignment from last week and continue with Lab2: Creating a
Home Page for Cycle Out Cancer, steps 1-16 on page 132 of your text.
Upload your completed file to cPanel and submit the link here.

Adding Style with CSS

Chapter 4

Discussion:

How would you decide between using internal or external style sheets on your
web page? What are some benefits and drawbacks to both options?

Assignment:

Open your assignment from last week and continue with Lab2: Creating an
External Style Sheet for Cycle Out Cancer, steps 1-17 on page 186 of your
text.

Week 5:

Page Layouts

Reading:

Chapter 7

Discussion:

The two articles below represent two sides of the semantics (<section>
elements) vs. <div> debate in HTML5 web design.
https://www.smashingmagazine.com/2013/01/the-importance-of-sections/
(This author is pro-semantics)
https://www.smashingmagazine.com/2011/11/our-pointless-pursuit-of-semanti
c-value/ (This author thinks semantics is overrated in web design)
How do you feel about this issue? When is it a good idea to use semantic
elements instead of more generic ones? Can you think of an instance when
semantic elements would be less desirable than using <div> tags? Extra
kudos for either providing screenshots snippets of HTML or writing an HTML
snippet to illustrate your thoughts.

Assignment:

Our assignments shift this week to a new site!

Complete Lab1: Integrating HTML5 Semantic Elements for the New
Harvest Food Bank Website, steps 1-16 on page 365 of your text.

Week 6:

Creating Tables and Forms

Reading:

Chapter 8

Discussion:

When is using tables a good design choice for a website? How can using
tables for page layout, navigation, or content display negatively affect a
website?
In addition to your response to this question, please provide a link to either an
effective and appealing use of tables in a website OR a particularly

unattractive or inefficient use of tables. Provide a brief summary of why you

chose this website and how you felt about the use of tables.
Assignment:

Open your assignment from last week and complete Lab1: Creating a Table
and a Form for the New Harvest Food Bank Website, steps 1-17 on page
420 of your text.

Week 7:

Adding Audio and Video

Reading:

Chapter 9

Discussion:

Have you found some good HTML or CSS tutorials or sites for design
inspiration? If you haven't already found one, do a search for one. Share your
favorite with your classmates by posting a link. Why did you choose this one?

Assignment:

Open your assignment from last week and complete Lab1: Adding Video to
the New Harvest Food Bank Website, steps 1-11 on page 460 of your text.

Week 8:

Maintaining a Website

Reading:

Chapter 12

Discussion:

What has been the most interesting thing you have learned in this class?
What has been the most difficult? Do you think you will continue to create
websites?
Additionally, if you have created a website (not a drag and drop site, but one
where you wrote at least part of the HTML/CSS yourself) and would like to
share it with your fellow students, please post the link. We would love to see
what you are working on!

Final Project:

Create a website about anything you choose. (This might be a good time to
help out your local charity or your friend starting up a new business.) Your site
must include:

At least 4 pages
All the essential tags on each page (Ch.1)
At least 5 comments to explain your code (Ch. 2)
A functional navigation menu on all 4 pages (Ch. 2 and 3)
A list (Ch. 3)
An email link (Ch. 3)
An image with height, width, and alt text (Ch. 3)
5

 An external style sheet with at least 10 style rules for various parts of
your site (Ch. 4)
At least 3 semantic elements to ensure your page layout is designed
well (Ch. 7)
A table with at least two columns and two rows (Ch. 8)
An audio or video file, sized appropriately (Ch. 9)

For the purpose of this assignment, how your site looks and functions is more
important than what the content is. You may use content from other places,
but be sure to cite your sources. Remember that outside sources include any
images, audio, video, or text that you did not create yourself. Use APA style.
You may not use markup from other sources.
Make sure all files are uploaded to cPanel and submit the URL for your sites
home page when you are finished.

The following table outlines the academic effort required by students to be successful in this course.
While the times in the table are approximate, it is presented to help students with their time
management. Please note, depending on the student's background knowledge and experience of the
course subject and an individual student's academic capabilities, these times will vary. If you have
any questions or concerns, please direct them to your instructor or student advisor.
Week

Type of Activity
Online

1
Preparation

Week

Type of Activity
Online

2
Preparation

Week

Type of Activity

Activity
Readings/Lectures
Discussions
Assignments
Readings
Discussions
Assignments
Clinical/Lab Hours
Activity
Readings/Lectures
Discussions
Assignments
Readings
Discussions
Assignments
Clinical/Lab Hours
Activity

Estimated Hours
Required
1.1
2.0
0.0
3.4
1.0
1.0
4.0
Estimated Hours
Required
0.8
2.0
0.0
2.3
1.0
1.0
4.0
Estimated Hours
Required
6

Online
3
Preparation

Week

Type of Activity
Online

4
Preparation

Week

Type of Activity
Online

5
Preparation

Week

Type of Activity
Online

6
Preparation

Week

Type of Activity
Online

7
Preparation

Readings/Lectures
Discussions
Assignments
Readings
Discussions
Assignments
Clinical/Lab Hours
Activity
Readings/Lectures
Discussions
Assignments
Readings
Discussions
Assignments
Clinical/Lab Hours
Activity
Readings/Lectures
Discussions
Assignments
Readings
Discussions
Assignments
Clinical/Lab Hours
Activity
Readings/Lectures
Discussions
Assignments
Readings
Discussions
Assignments
Clinical/Lab Hours
Activity
Readings/Lectures
Discussions
Assignments
Readings
Discussions
Assignments
Clinical/Lab Hours

0.8
2.0
0.0
2.5
1.0
1.0
4.0
Estimated Hours
Required
0.9
2.0
0.0
3.1
1.0
1.0
4.0
Estimated Hours
Required
0.7
2.0
0.0
2.9
1.0
1.0
4.0
Estimated Hours
Required
0.9
2.0
0.0
2.4
1.0
1.0
4.0
Estimated Hours
Required
0.8
2.0
0.0
205
1.0
1.0
4.0
7

Week

Type of Activity

Activity

Readings/Lectures
Discussions
Assignments
8
Readings
Discussions
Preparation
Assignments
Clinical/Lab Hours
Follow this link for course-related Policies and Contact Information.
Online

Estimated Hours
Required
0.8
2.0
2.0
3.8
1.0
4.0
12.0