TCH040: Web Design

This list is representative of the materials provided or used in this course. Keep in mind that the actual materials used may vary, depending on the school in which you are enrolled, and whether you are taking the course as Independent Study.

For a complete list of the materials to be used in this course by your enrolled student, please visit MyInfo. All lists are subject to change at any time.

Scope & Sequence : Scope & Sequence documents describe what is covered in a course (the scope) and also the order in which topics are covered (the sequence). These documents list instructional objectives and skills to be mastered. K12 Scope & Sequence documents for each course include:

Course Overview

This course provides a comprehensive introduction to the essentials of Web design, from planning page layouts to publishing a complete site to the Web. Students learn how to use HTML to design their own Web pages. The course covers basic HTML tags for formatting text, as well as more advanced tags. Through real-world design scenarios and hands-on projects, students create compelling, usable websites using the latest suite of free tools.

back to top

Course Length

One Semester

back to top



back to top

Course Outline

Unit 1: Favorite Page

Students learn the purpose of a WYSIWYG Web editor, create a folder for a website, and open a new Web page. They learn how to navigate in KompoZer, view the code in Source view, add and format text, resize and optimize images, and test and publish websites.

  • Create a Web page
  • Navigate in KompoZer
  • Switch Viewing Modes
  • Add and Format Text
  • Resize an Image
  • Optimize an Image
  • Test and Publish

Unit 2: Linked Site

Students learn to set up pages and set the background and text colors for each page. They look at layout, alignment, and spacing; learn to create tables; and add and format text. They make thumbnail images and optimize images for the Web. They add linked text and images to a home page and link other pages to the home page and to each other.

  • Set Up the Pages
  • Choose a Color Palette
  • Format the Site
  • Prepare Images
  • Add Links

Unit 3: HTML Portfolio

Students look at how HTML code is organized, learn to create a basic HTML Web page with Notepad, and add and format heading and body text. They learn about absolute and relative links, look at folder organization, add links to the other websites, and make the links open in a new browser window. They identify the HTML tag for adding images and add thumbnail images to the portfolio page.

  • Write an HTML Web page
  • Add Heading Text
  • Add Body Text
  • Add Links
  • Add Images

Unit 4: Styled Site

Students choose appropriate page titles and file names, and they add the website to the Site Manager. They identify the problem with using HTML to style a page, and they learn how CSS uses style sheets and style rules. They make a table to structure the layout of the home page and make a navigation bar in the left column of the table. They style the link text and background color with CSS, and they look at internal and external style sheets.

  • Title and Name Pages
  • Style a Heading
  • Make a Navigation Bar
  • Style the Home Page
  • Export a Style Sheet
  • Modify a Style Sheet

Unit 5: CSS Code

Students write a heading text style rule for the portfolio pag; and they write style rules for linked headings, body styles, and inline styles. They look at how styles cascade in CSS, turn an internal style sheet into an external one, and link an external style sheet to a page. They make a second external style sheet and rank external style sheets.

  • Write a Heading Style Rule
  • Style Linked Headings
  • Write a Body Style Rule
  • Write Inline Style
  • Make an External Style Sheet
  • Make a Second Style Sheet

Unit 6: JavaScript

Students identify the purpose of JavaScript, add JavaScript to links, and add image filters. They add rollover images. They identify the purpose of <script> tags, add dynamic JavaScript to a Web page, add a function with several commands to a Web page, add a button, and call a function.

  • Add Image Links
  • Add a Dialog Box
  • Add Image Filters
  • Add Rollover Images
  • Add the Date and Time
  • Add a Function
  • Final Assignment
back to top

Lesson Scheduling

back to top

K12 Scope & Sequence documents for each course include:

  • Course Overview (as seen above)
  • Course Outline
  • Lesson Time and Scheduling