WEB DESIGN

SYLLABUS

Introduction

In this course, the students will be taught to create their own Web pages with
Notepad, the basic text editor of the Windows operating system. It will be used instead
of WYSIWYG (What You See Is What You Get) editors to ensure that the students learn
the basic structure and syntax of HTML. Matters of accessibility will be incorporated into
each lesson as the principles of Web design are thoroughly observed, such as the quality
of text and images and the efficiency of layout and hyperlinks.

Learning Goals

At the end of the course, the student will be able to:

1. Create a well-formed website according to W3C standards.
2. Appreciate the use of HTML tags and CSS properties.
3. Evaluate other websites.

Lesson 1. Untangling the Web

A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Understand the basic concepts involved in webpage design.
2. Make his/her first webpage.
3. Write the basic patterns for HTML tags.
4. Insert a DOCTYPE declaration.

B. Lesson Outline
1. Your First Webpage
2. HTML Tags
3. Web Tools
4. W3C Standards

C. Self-Check
1. Define HTML, XHTML, and W3C.
2. What are the main elements of an HTML document? Describe each.
3. What is a text editor and how does it differ from a WYSIWYG editor?

Web Design Syllabus 2010 1

Lesson 2. Playing with Tags
A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Use tags to format text size and positions in the webpage.
2. Know some other tags which can be used to format text appearance.
3. Create different kinds of lists, including nested lists.
4. Create a preformatted text and horizontal rule for the webpage.
5. Construct efficient hyperlinks.
6. Anchor links to webpages.

B. Lesson Outline
1. Format Tags
Heading
Paragraph
Space
Line Break
2. More Text Tags
3. Tags for Lists
Unordered or Bulleted
Ordered or Numbered
Definition
Nested Lists
4. Preformatted Text and Horizontal Rule
5. HTML Links
External Link
Internal Link
Link Target: New Window
Linking to Other Parts of the Same Page
E-mail Address as Link
Image as Link

C. Self-Check
1. When and how do you use the line break tag?
2. Illustrate the FILO principle.
3. Discuss the different kinds of lists.
4. What is the tag for creating paragraphs?
5. How many levels of headings does HTML support?
6. How is a non-breaking space represented in HTML?
7. To include an unordered list in a webpage, what HTML tag must be used?
8. To include an ordered list in a webpage, what HTML tag must be used?
9. To place an item in an unordered or ordered list, what HTML tag must be
used?

Web Design Syllabus 2010 2

 10. What is a hyperlink?
11. What is the markup for opening a new window?
12. What is the tag for making an e-mail address link?

Lesson 3. Planning Your Website

A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Identify the steps needed to plan for a website.
2. Determine the different sections appropriate for a website.

B. Lesson Outline
1. Website Planning
2. Website Sections
Site Section
About Me/Contact Me Section
Site Map Section
Site Links Sections
Guestbook Section

C. Self-Check
1. What are the steps in planning for a website?
2. Give some of the characteristics of a potential audience you need.
3. At a minimum, what page is required for a website?
4. What section do audiences log in to and leave their remarks about the
website?
5. What website section provides links to other websites?
6. What website section provides information about the website author?
7. What website section provides information about ideas on how the website is
conceived?
8. What does usability mean?
9. Give some usability tips you have learned.
10. What page provides a striking entrance?

Lesson 4. Fashioning Text Styles and Colors

A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Be familiar with in-line, internal and external CSS.
2. Experiment with different font and text properties.
3. Choose the background color that complements the text color and vice versa.
4. Input special characters and comments.

Web Design Syllabus 2010 3

 B. Lesson Outline
1. Fashioning CSS
Types of CSS
2. Deprecated Tags and Attributes
3. Style Sheet Syntax
4. Font
5. Color
6. Text
7. Special Characters
8. Escape Sequences
9. Comment Tags

C. Self-Check
1. What is an external style sheet?
2. How do you encode the Copyright logo?
3. Cite at least three font properties.
4. What is the file name extension of an external style sheet?
5. What font property is used to modify font color?
6. What font property is used to modify font size?
7. What font property is used to modify text alignment?
8. What symbols are used to place comments in CSS documents?
9. Name at least 10 colors that can be encoded by name in CSS.
10. What is the largest font size in the Old 7 Size Font System?

Lesson 5. Opening the Box Model

A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Lay out pages using CSS properties.
2. Apply advanced HTML tags (span and div).
3. Adjust margins and padding.

B. Lesson Outline
1. Selected Style Sheet Techniques
2. Page Layout: Layout Table vs. CSS Positioning
CSS Positioning Properties
3. Span and Div Tags
4. The Box Model
5. Margin and Padding
6. Page Layout Using Box Model

Web Design Syllabus 2010 4

 C. Self-Check
1. Explain the box model concept.
2. What is the format for identifying or naming classes?
3. Enumerate the position, float, and clear properties and describe each.
4. What HTML tag is used to define the style of any block element?
5. What HTML tag is used to define the style of any in-line element?

Lesson 6. Working on Multimedia

A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Manipulate text, images, borders, and backgrounds.
2. Identify and use image file types.
3. Use audio on a multimedia file.
4. Work with videos.

B. Lesson Outline
1. Multimedia
2. Text and Images
Image as Background
3. Background Values
Image as In-line Text
4. Borders
5. Audio
Param Tag
6. Videos
Embedding YouTube Videos
Embedding Your Own Videos

C. Self-Check
1. Name a few disadvantages of using an image as a background for the page.
2. What is the main difference between GIF and JPEG? Explain considering
PNG.
3. Can changing the width and height attributes distort an image? Explain.
4. What HTML tag/s is/are used to insert a style sheet in HTML documents?
5. What CSS property is used when placing background pictures in HTML
documents?
6. What attribute specifies the images source?
7. What attribute specifies the images width?
8. What attribute specifies the images height?
9. How many colors do GIF images support?
10. What HTML tag is used to place audio and video in webpages?

Web Design Syllabus 2010 5

Lesson 7. Minding Your Table Manners
A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Differentiate between the in-line and the internal style sheets.
2. Organize information into tabular form.
3. Improve table appearance using the in-line style sheet.

B. Lesson Outline
1. In-line Style Sheet
Cascading Order
2. Tables
3. Table Tags
4. Table Attributes
The rowspan and colspan Attributes
Empty Cells in a Table
The Width Attribute
The Cellpadding and Cellspacing Attributes

C. Self-Check
1. Name at least three table attributes.
2. How do you express the pixel value of the width attribute?
3. Whats the difference between the in-line and the internal style sheets?
4. To insert cells in a row, what HTML tag is used?

5. To insert a caption in a table, what tag is used?

6. What attribute is used when merging cells across columns?
7. What attribute is used when merging cells across rows?
8. What attribute is used when modifying table borders?
9. What attribute is used when modifying table width?
10. What attribute is used when modifying the space between table cells?
11. What attribute is used when modifying the space between the cell border and
cell contents?
12. What attribute is used to make sure the content in any cell is displayed within
one line?

Lesson 8. Executing Forms

A. Lesson Objectives:
At the end of this lesson, the student will be able to:
1. Examine forms, text area field, select lists, and other input types.
2. Adapt the above to the different demands of the users of the page.
3. Process online forms.

Web Design Syllabus 2010 6

 B. Lesson Outline
1. Online Forms
2. Content
3. Input Fields
Radio Buttons
Check Boxes
Text Areas
Select Fields
Submit Query and Reset Buttons
4. Processing Forms

C. Self-Check
1. What is the difference between the Submit Query and Reset buttons?
2. How do you create a drop-down menu in a webpage?
3. What are the similarities and differences between radio buttons and check
boxes?
4. These are webpages designed to gather information from the site visitors.
5. This input field is used when asking for alphanumeric inputs.
6. This input field is used when the user is asked to select a single option from a
list.
7. These input fields are used when users are allowed to select more than one
option among several choices.
8. These are text fields that have more than one line for longer text input.
9. This input field provides a drop-down menu that the user can choose from.
10. This is an input type that produces a Submit Query button by default.

Lesson 9. Web Interactive

A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Add more life to their pages by following the markups provided in the lesson.
2. Explain the advantages of new technologies.
3. Apply JavaScript commands.

B. Lesson Outline
1. Web Technologies
Flash
JavaScript
2. Web Tricks
Status Bar Message
CSS Tooltip

Web Design Syllabus 2010 7

 C. Self-Check
1. Give instances when you can effectively use web multimedia technologies in
your site.
2. What are plug-ins?
3. Manipulate the sample scripts and observe the changes in the outputs.

Lesson 10. Going Beyond Tags

A. Lesson Objectives
At the end of this lesson, the student will be able to:
1. Upload files and submit the site to various search engines.
2. Maintain a web advertisement.
3. Encode his/her name as author through the use of meta tags.

B. Lesson Outline
1. Meta Tags
2. Uploading Files
3. Submitting Your Site for Crawling
4. Web Advertisements
AdSense
5. Intellectual Property Rights (IPR)
6. Usability Tips

C. Self-Check
1. What are search engines?
2. What is the basic format of the APA citation? Give an example.
3. Are meta tags reliable for Web crawling? Why?
4. It is the Greek term meaning about or beyond.
5. What is the typical size of a web banner?
6. What does IPR stand for and what is its significance?
7. What is AdSense? How will you potentially benefit from it as a website
owner?
8. What does usability mean?
9. Give some usabillity tips you have learned.
10. Give a site that provide free website hosting.

Web Design Syllabus 2010 8