Es/Interact/Diseño web 1

From Web Education Community Group
Jump to: navigation, search

Course Number: FED-100

Course Description

This course introduces students to HTML, emphasizing semantic use of elements and the benefits of using standards-based, valid code. The use of CSS is discussed to separate content from presentation in order to decrease maintenance time, speed up development, improve download speed, and design capabilities. Students will employ web standards concepts to create a small brochure-ware website that uses global style sheets.

Prerequisites

Recommended Textbook(s)

Recommended Reference Books

Note One or more of the recommended references on XHTML/HTML listed in the next section. Use any book from the list to teach the various HTML elements, the element syntax, the proper semantic meaning of the element, and any required attributes for the element. Do not teach any presentational HTML attributes (e.g., align or hspace), only attributes that cannot be replaced with a presentational CSS property.

Recommended Reading

HTML

Design Basics

CSS

Web Basics

Resources

Script

Podcasts and Interviews

Technologies Required

  • Students will need their own web server to post their assignments
  • Computers with internet connection
  • Web Browsers (Firefox, Opera, Safari, Internet Explorer)
  • Web page editor that fosters the development of valid (X)HTML and CSS code

Competencies

Topic Competency Evaluation Methods
HTML syntax
  • Use the following tags to build a web page: html, head, title, body, a, p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td, comment.
  • Build a webpage that successfully passes the W3C validation test at http://validator.w3.org
  • Identify the appropriate use of attributes and the syntax of attributes
  • Assignment 1, 2, 3
HTML elements
  • Identify and use the following elements according to their semantic meaning: html, head, title, body, a, p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td, comment.
  • Assignment 1, 2, 3
Basic Web Design Concepts
  • Identify and use the following design concepts: contrast, repetition, alignment, proximity, color, typography, writing style.
  • Assignment 2, 3
(X)HTML DOCTYPES
  • Identify the various HTML4, HTML5, and XHTML DOCTYPES for Strict, Transitional and Frameset
  • Explain the distinction between the available DOCTYPES.
  • Describe the appropriate use of each DOCTYPE
  • Exam
HTML validation
  • Identify and use online validation tools
  • Successfully change invalid markup to comply with standards
  • Identify why validation is not an absolute requirement in all situations.
  • Assignment 1
  • Provide examples of situations where invalid markup might be acceptable.
HTML Best Practices
  • Use CSS for all presentation. Omit any presentational HTML attributes such as font, valign, hspace, align, bgcolor. Unless an attribute is required (for example, a src attribute is required for an img element) do not include it in the HTML. Classes and IDs, while not required, are an exception and should be used appropriately in the HTML.
  • Use tables for the presentation of tabular information only. Use summary, caption, col, row, header and other table elements and attributes to insure that tables are accessible. Borders, width, spacing, alignment, background, and other presentational options for tables should be set with CSS.
  • Use labels with form elements.
  • Assignments 1, 2, and 3
CSS: The Cascade
  • Identify how inheritance and specificity affect CSS rule conflicts
  • Use the Cascade to create effective presentational elements
  • Describe where and when to use inline styles
  • Explain the differences between using link and @import to connect to an external stylesheet
  • Use correct CSS syntax to configure and apply style sheets for screen and print media display
  • Assignments 2 and 3
CSS: Selectors and Properties
  • Recognize and use element selectors, ID selectors, class selectors, pseudo-class selectors, and descendant selectors
  • Apply the following CSS properties: background, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, width.
  • Assignment 3
Site Structure
  • Create a maintainable directory structure for a website that follows file naming requirements, and makes managing files efficient.
  • Demonstrate and use correct file paths for relative and absolute links
  • Recognize the relationship between local and remote site structure
  • Use FTP to transfer files to a server
  • Demonstrate the organization of a site root folder with subfolders for images or other site assets. Create a logical directory structure for a Web project.
  • Set up an FTP connection to a remote site and reproduce the site structure on the server.
  • Assignments 1, 2, and 3
Forms
  • Construct a contact form
  • Form will demonstrate the use of input fields, text areas, radio buttons, checkboxes, select menus, and submit buttons
  • Use a provided script
  • Illustrate proper use of the label element with 'id' and 'for' attributes
  • Demonstrate the contact form in a small web site. Assignment 3

Assignments

Web Design 1 Assignment Rubrics

Course Blog

Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.

Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.

Course Blog Assignment Rubric

Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Blog Posts (evaluated weekly) Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources.  

Assignment 1: Class Homepage

Students will create a single web page. The purpose of the page is to serve as the student's home page for the class. The student can create a personal profile with information about him or herself. As the class proceeds, links to the student's future assignments will be added to this home page. The document must demonstrate proper semantic structure in the use of elements. The page must demonstrate the correct use of some or all of the following items: DOCTYPE, html, head, title, body, p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td, comment. Students must demonstrate that the page validates according to the DOCTYPE chosen.

Assignment 1 Grading Rubric

Criteria Performance Quality Score
0 points 1 point 2 points
XHTML Markup is not semantic, fails W3C validation, is poorly organized,and is more verbose than necessary. Markup makes basic use of semantics, passes W3C validation, is poorly organized, and is moderately more verbose than necessary. Markup is exemplary in its semantics, passes W3C validation, is terse, and exceptionally well organized. There is an appropriate DOCTYPE and properly constructed head and body elements. Most or all of the following elements are incorporated in the page in a semantic manner: p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td, comment  
FTP Page is not put on server. Page is on server, but not in the appropriate location. Page is on the server in the designated location.  
Content and Purpose Page contains little or no content. Purpose of the page is unclear. Page contains content adequate to identify the student with minimal text demonstrating a limited number of the required elements. Purpose of the page as the student's home page can be determined. Page contains exemplary content to identify the student and demonstrate use of the complete list of required elements. Purpose of the page as the student's home page is immediately apparent.  
Usability Page has no provision for links to future projects. Page could be amended to add future projects. Clearly designated within the page organization is a space for links to future projects  

Assignment 2: CSS Design

Students will create an external stylesheet and attach it to a mini-site of two to three pages. The CSS rules will include some or all of the following selectors, as appropriate to the design: background, body, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, width.

Assignment 2 Grading Rubric

Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
HTML Markup is not semantic, fails W3C validation, is poorly organized,and is more verbose than necessary. Markup makes basic use of semantics, fails W3C validation, is poorly organized, and is moderately more verbose than necessary. Markup makes use of semantics and passes W3C validation. It is slightly more verbose than necessary. Markup semantically meaningful, passes W3C validation, is well organized, and uses classes and IDs only as necessary. Markup is exemplary in its semantics, passes W3C validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary.  
CSS No stylesheet is attached A stylesheet is present but the link does not work. The required selectors are not used. A minimal stylesheet is present and the link to it works. (Minimal styles, for example, would include rules in the body selector for color and font.) An adequate stylesheet is attached and linked properly. A number of CSS selectors and properties are demonstrated effectively. The stylesheet is well organized and CSS is cleanly and efficiently written. The CSS for the page is exemplary, demonstrating use of most of the following selectors and properties, as appropriate to the design: background, body, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, width. The stylesheet is well organized and CSS is cleanly and efficiently written. There are no redundant rules.  
Navigation and Pages All 3 required pages are not present. There is no navigation One or two pages are present. Navigation from one page to another does not work. Three pages are present. Navigation from one page to another does not work. Three pages are present. Navigation is semantically meaningful and works properly on every page. Three pages are present. Navigation is semantically meaningful and works properly on every page. The navigation is presented with CSS in an enhanced display that clarifies it purpose and appearance.  
Images There are no images. Images are in the HTML, but the image does not appear in the browser. Images are used to add content, design emphasis, or enhance appearance. All images are in the HTML. Images are used to add content, design emphasis, or enhance appearance. Images that provide no meaningful content are in the CSS. Images are used in exemplary or creative ways to add to the appearance or function of the pages.  
Link from home page There is no link from the student's home page (assignment 1). There is a link on the student's home page, but it does not work. A working link to Assignment 2 can be found on the student's home page. A working link to Assignment 2 can be found on the student's home page. The link is marked up with semantic HTML. A working link to Assignment 2 can be found on the student's home page. The link is marked up with semantic HTML and is styled in a well-designed manner by CSS.  
Design The pages show no design plan. Pages are minimally organized but design elements are used inconsistently. Design does not communicate the nature of the site, does not appropriately achieve the communication objectives, makes poor use of design principles, and does not clearly communicate a hierarchy of information. Pages show a consistent site-wide design scheme. Design communicates the nature of the organization but not very effectively, does an adequate job of achieving the communication objectives, makes some use of design principles, and has a basic hierarchy of information. Pages demonstrate thoughtful attention to design details. Design communicates the nature of the organization, serves the communication objectives, makes use of design principles (layout, typography, color, etc.) to create an attractive presentation, and clearly communicates information hierarchy. Pages demonstrate exemplary and creative attention to design details and create an exceptionally attractive and usable whole. Design communicates the nature of the organization very effectively, intelligently serves the communication objectives, makes great use of design principles (layout, typography, color, etc.) to create an elegant presentation, and very clearly communicates information hierarchy.  

Assignment 3: Web site

Create a complete Web site of several pages. The topic chosen for the site should be rich enough to allow the student to demonstrate the use of various HTML elements studied: headings, paragraphs, blockquote, br, div, strong, em, acronym, abbr, ul, ol, dl, img, table, and form. The layout must be CSS based using an external stylesheet. The styled content must demonstrate mastery of CSS properties including background, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, and width. The site should demonstrate mastery of concepts regarding DOCTYPE and semantic HTML markup. The CSS must demonstrate an understanding of the Cascade and inheritance and make use of descendant selectors to minimize the number of classes. The content should include an accessible form with a functioning script to test submission. (See the resources list for a script for the form work.)

Assignment 3 Grading Rubric

Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
HTML Markup is not semantic, fails W3C validation, is poorly organized,and is more verbose than necessary. Markup makes basic use of semantics, fails W3C validation, is poorly organized, and is moderately more verbose than necessary. Markup makes use of semantics and passes W3C validation. It is slightly more verbose than necessary. Markup semantically meaningful, passes W3C validation, is well organized, and uses classes and IDs only as necessary. Markup is exemplary in its semantics, passes W3C validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary.  
CSS No stylesheet is attached A stylesheet is present but the link does not work. The required selectors are not used. A minimal stylesheet is present and the link to it works. (Minimal styles, for example, would include rules in the body selector for color and font.) An adequate stylesheet is attached and linked properly. A number of CSS selectors and properties are demonstrated effectively. The stylesheet demonstrates an understanding of the Cacade. The stylesheet is well organized and CSS is cleanly and efficiently written. The CSS for the page is exemplary, demonstrating use of most of the following selectors and properties, as appropriate to the design: background, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, and width. The stylesheet makes effective use of the Cascade. The stylesheet is well organized and CSS is cleanly and efficiently written. There are no redundant rules.  
Navigation and Pages Required pages are not present. There is no navigation. One or two pages are present. Navigation from one page to another does not work. The required pages are present. Navigation from one page to another does not work. The required pages are present. Navigation is semantically meaningful and works properly on every page. The required pages are present. Navigation is semantically meaningful and works properly on every page. The navigation is presented with CSS in an enhanced display that clarifies it purpose and appearance.  
Images There are no images. Images are in the HTML, but the image does not appear in the browser. Images are used to add content, design emphasis, or enhance appearance. All images are in the HTML. Images are used to add content, design emphasis, or enhance appearance. Images that provide no meaningful content are in the CSS. Images are used in exemplary or creative ways to add to the appearance or function of the pages.  
Design The pages show no design plan. Pages are minimally organized but design elements are used inconsistently. Design does not communicate the nature of the site, does not appropriately achieve the communication objectives, makes poor use of design principles, and does not clearly communicate a hierarchy of information.

Clumsy or ineffective CSS is used for the layout.

Pages show a consistent site-wide design scheme. Design communicates the nature of the organization but not very effectively, does an adequate job of achieving the communication objectives, makes some use of design principles, and has a basic hierarchy of information.

CSS is used for the layout in a minimally acceptable manner.

Pages demonstrate thoughtful attention to design details. Design communicates the nature of the organization, serves the communication objectives, makes use of design principles (layout, typography, color, etc.) to create an attractive presentation, and clearly communicates information hierarchy.

CSS is used effectively for the layout.

Pages demonstrate exemplary and creative attention to design details and create an exceptionally attractive and usable whole. Design communicates the nature of the organization very effectively, intelligently serves the communication objectives, makes great use of design principles (layout, typography, color, etc.) to create an elegant presentation, and very clearly communicates information hierarchy.

CSS is used in an exemplary manner for the layout.

 
Link from home page There is no link from the student's home page (assignment 1). There is a link on the student's home page, but it does not work. A working link to Assignment 3 can be found on the student's home page. A working link to Assignment 3 can be found on the student's home page. The link is marked up with semantic HTML. A working link to Assignment 3 can be found on the student's home page. The link is marked up with semantic HTML and is styled in a well-designed manner by CSS.  

Lab Assignments

A number of hands-on lab assignments are suggested throughout the course. They include:

  • Create a basic web page with brief text, save to student folder, and display it in a browser
  • Use FTP software to transfer web page to server. Discuss site structure on the server, put and get, setting up accounts for remote servers
  • Create a transparent image, and optimized images in multiple formats
  • Create a practice page with numerous links
  • Add at least one list to a web page
  • Define and give examples of a relative path and an absolute path
  • Diagram and label the box model
  • Build an accessible practice table

Evaluate hands-on lab activities using the following rubric. It can be adapted for individual assignments as needed.

Lab Exercise Assignment Rubric

Criteria Performance Quality Score
0 points 1 point 2 points
HTML Markup is not semantic, fails W3C validation, is poorly organized, mixes presentation with structure, and is more verbose than necessary. Markup makes basic use of semantics, passes W3C validation, is poorly organized, and is moderately more verbose than necessary. Markup is exemplary in its semantics, passes W3C validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary.  
CSS CSS fails W3C validation, contains errata, is overly verbose, is poorly organized, is uncommented, renders inconsistently between target browsers, and is not kept eternally in a global style sheet. CSS passes W3C validation, uses some CSS shorthand to keep code brief, is some what organized, renders relatively consistently in all target browsers, and is kept external in a global style sheet separate from markup. CSS passes W3C validation, is exceptionally well organized, uses CSS shorthand to keep code brief, renders consistently or gracefully degrades in all target browsers, is kept external and separate from markup, and CSS is used creatively to solve design problems.  
Project Requirements Lab exercises are incomplete and/or do not meet respective requirements. Lab exercises are complete but do not meet all requirements. All lab exercises are complete and meet respective requirements.  

Examination Questions

HTML Syntax

  • Write an example of the following types of tags: a closed element, an open element, a block level element, an inline element, an element with a required attribute.
  • Give a brief explanation of the name and semantic meaning of the following elements: title, a, p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td.

HTML elements

  • Mark up a page of textual content.
  • Why is it important to use semantic markup when building web pages? Provide an example of the use of semantic markup.
  • Write the HTML for a heading, a paragraph, and an ordered list.
  • Write the HTML for a table of three columns that gives the names of four of your friends and shows their birthday and favorite food.

Basic Web Design Concepts

  • Explain the following design terms: contrast, repetition, alignment, proximity
  • Give an example of the following design concepts in use: contrast, repetition, alignment, proximity

(X)HTML DOCTYPES

  • Explain the distinction between the available DOCTYPES.
  • Explain the best use for different DOCTYPES.
  • Write the HTML for an XHTML 1.0 Strict DOCTYPE and for an HTML5 DOCTYPE.

HTML validation

  • Explain this message from the W3C validator: Line 226, Column 11: document type does not allow element “blockquote” here; assuming missing “dd” start-tag. <blockquote><dt><strong>content-box</strong> </dt>
  • Describe the steps you would take if you received a message from the W3C validator like the example given.
  • Give an example of a situation when it might not be possible to achieve a “valid code” ruling from the W3C validator.

HTML Best Practices

  • Provide 2 compelling arguments that you could present to an employer that would convince them to adopt web standards.
  • Remove this HTML presentational attribute and rewrite it as a CSS presentational rule. <font face=“Garamond, Futura”><h1>Heading</h1></font>
  • Why is it beneficial to separate a web page’s formatting from its structure? Identify one benefit a web designer might experience and one benefit a user might experience from this approach.

CSS: The Cascade

  • Diagram and label the Cascade.
  • Compare the specificity of these two selectors: p and #footer p.
  • Write a link to an external stylesheet using both the link and @import methods.
  • Write a link to an external stylesheet intended for printers.
  • Describe a situation where you could justify the use of an inline style.

CSS: Selectors and Properties

  • Write and link to an external stylesheet when provided with a page of marked up content
  • Diagram and label the box model
  • Label the selector, declaration, and property in the following style rule.

CSS Declarations

  • Write the CSS for a class with these attributes: a light gray background color, a dashed border on the right side only, black text in Arial or a sans-serif font, a width of 200px, and center aligned text.
  • Write the CSS for an id with these attributes: float to the left, 20px padding on all sides, overflow set to automatically show, and a width of 400px.
  • Write the CSS for a blockquote with these attributes: clear both sides, a margin on the left of 500px, and line-height of 1.2em.
  • Write the CSS for a list with an image called “dot.gif” as a list marker.
  • Write an example of each of the following CSS selectors: General Element Selector, Contextual Selector, Pseudo-Class Selector, Class, Id.

Site Structure

  • Diagram the site structure for a site with the following kinds of content: products, support, company information, downloads, blog, and news.
  • Explain the meaning of this element: <a href=”../../music/sara.mp3”>Sara</a>
  • Write examples for a relative and an absolute link.
  • What are the two main functions of FTP?

Forms

  • Write a form tag using the following action attribute: ”../scripts/form.php”.
  • What is the purpose of the label element?
  • Give an example of an input form element.
  • What is the chief difference between a checkbox element and a radio button element?
  • Write an HTML contact form using the following tags: <form>, <input>, <legend>, <fieldset>, <label>. Your form should have fields for the user to enter their name, email address, and a message. Include a button to submit the form.

Page and Site Building Assignments

  • Create a minimal HTML page with one line of textual content
  • Create a workable site structure for this site: a well known band with 5 members, a large discography with music for sale, music clips, a blog, press information, and an itinerary.

Resources

Resources for Working with Faculty and Administration

Validation & Testing

General

Learning Modules

HTML Basics, Web Standards Concepts

Overview This module introduces basic concepts of HTML and the basic reasons behind the need for web standards.
Learner Competencies
  • Create a site folder
  • Identify the appropriate use of attributes and the syntax of attributes
  • Recognize the difference between HTML and XHTML
  • Identify the various DOCTYPES
  • Explain the need for web standards
  • Identify deprecated tags.
Length
  • Online Delivery
    • This module will take approximately 1 week
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 1 week of class sessions.
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery
  • Textbook Readings: Assign Chapter 1 in Designing with Web Standards. Use reference to learn HTML element and attribute syntax, and DOCTYPE basics
  • Discussion topics: elements, attributes, values, DOCTYPE, inheritance, standards mode, the reason for standards, the value of standards, how to achieve standards
  • Demonstration: HTML syntax
  • Online research: Research a list of deprecated tags and attributes
Assessment Activities
  • Online Assessment
    • Discussion question: Describe the Cascade
    • Discussion question: Restate the reasons web standards are needed
    • Discussion question: Define and provide examples of deprecated tags. How do tags become deprecated?
  • Classroom Assessment
    • Discussion question: Describe the Cascade
    • Discussion question: Restate the reasons web standards are needed
    • Discussion question: Define and provide examples of deprecated tags. How do tags become deprecated?
Wrap-Up / Feedback
  • Feedback on discussion

Create a Page, Web Standards Concepts

Overview This module continues the development of basic concepts related to the need for web standards. It introduces the structure of a web page, and gives students experience with creating a simple web page.
Learner Competencies
  • Identify the correct way to save a web page and display it in a browser
  • Select an appropriate DOCTYPE to start a page
  • Identify and create the head and body of a web page. Learn to use the following elements: html, head, title, body, h1, p, br
  • Distinguish between block and inline elements
  • Describe the issues involved with designing and building with web standards
Length
  • Online Delivery
    • This module will take approximately 1 week
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 1 week of class sessions.
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery
  • Textbook Readings: Assign Chapter 2 in Designing with Web Standards. Use references to learn about these elements: html, head, title, body, h1 (an other headings), p, and br
  • Online reading: SitePoint Blogs: A Minimal HTML Document
  • Discussion topics: filenames and site structure, basic document structure, comments, the three components of content, presentation and behavior and how they are separated. The benefits and problems of web standards. Block vs. inline elements.
  • Demonstration: HTML syntax, page building, elements including title, headings, paragraphs, line breaks, div and span
  • Hands-On Lab: create a basic web page with brief text, save to student folder, and display it in a browser
Assessment Activities
  • Online Assessment
    • Create a sketch of a web site
    • Discussion: State the most important reason for working with web standards, Justify your choice of reason.
    • Quiz: a brief essay exam explaining the purpose, rules, and best use for different DOCTYPES. Describe the difference between block level and inline elements. Provide examples of each.
  • Classroom Assessment
    • Create a sketch of Web site
    • Discussion: State the most important reason for working with web standards, Justify your choice of reason.
    • Quiz: a brief essay exam explaining the purpose, rules, and best use for different DOCTYPES. Describe the difference between block level and inline elements. Provide examples of each.
Wrap-Up / Feedback
  • Class discussion on students web site sketches
  • Feedback on student's initial web page

Basic Web Design Concepts

Overview This module introduces basic concepts web page design
Learner Competencies
  • Describe the most common types of Web site organization
  • Design a site map for a brochure-type web site
  • Apply the four principles of design (contrast, repetition, alignment, proximity) to web page layout
  • Choose a color scheme that appeals to a target audience and demonstrates good contrast between text and background
  • Describe, identify, and apply best practices of web design
  • Describe techniques for writing for the Web (headings, bullet points, short sentences in short paragraphs, use of white space, etc.)
Length
  • Online Delivery
    • This module will take approximately 1 week
    • Students are expected to spend 6 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 1 week of class sessions.
    • Students are expected to spend 6 hours outside of class on readings and learning activities.
Content Delivery
  • Textbook Readings: Chapters 1-5 of The Non-Designer's Design Book
  • Web Reading: Web Design Best Practices Checklist
  • Lab Exercise: Create a site map for a small web site
  • Demonstration: Examine real web sites and discuss them in terms of layout principles, color schemes, writing, typography, and best practices
Assessment Activities
  • Online Assessment
    • Assignment 2, 3
  • Classroom Assessment
    • Assignment 2, 3
Wrap-Up / Feedback
  • Feedback on discussion, online activities and assignments

Use additional HTML elements, images, and FTP

Overview This module continues the development of basic concepts related to the need for web standards. It introduces the structure of a web page, and gives students experience with creating a simple web page.
Learner Competencies
  • Use additional HTML elements including blockquote, abbr, img, em, and strong
  • Identify image formats
  • Understand the relationship between image size and resolution
  • Use FTP to transfer files to a web server
Length
  • Online Delivery
    • This module will take approximately 1 week
    • Students are expected to spend 6 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 1 week of class sessions.
    • Students are expected to spend 6 hours outside of class on readings and learning activities.
Content Delivery
  • Reference Material Readings: Learn to use the following HTML elements: blockquote, img, abbr, strong, and em. Learn to use alt text. A resources for discussion of alt text: Writing good alt text
  • Discussion topics: Logical vs. presentational markup such as <b> vs. <strong>, image formats.
  • Demonstration: Add elements to a demonstration page. Use blockquote, img, abbr, strong and em.
  • Hands-On Lab: Use FTP software to transfer web page to server. Discuss site structure on the server, put and get, setting up accounts for remote servers
  • Hands-on Lab: Create a transparent image, and optimized images in multiple formats
  • Hands-on Lab: Start work on Assignment 1
Assessment Activities
  • Online Assessment
    • Successful transfer of files
    • Discussion: What is good alt text?
    • Discussion: Compare and contrast logical formatting with visual formatting
  • Classroom Assessment
    • Successful transfer of files
    • Discussion: What is good alt text?
    • Discussion: Compare and contrast logical formatting with visual formatting
Wrap-Up / Feedback
  • Demonstration of transparent and optimized images
  • Feedback on student's initial web page

Links

Overview This module continues the development of basic concepts related to the need for web standards. It provides experience with hyperlinks.
Learner Competencies
  • Use the HTML element <a>
  • Identify sites that demonstrate the use of web standards
Length
  • Online Delivery
    • This module will take approximately 1 week
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 1 week of class sessions.
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery
  • Textbook Readings: Assign Chapter 4 in Design with Web Standards. Use reference materials to learn the HTML needed to create links.
  • Discussion topics: Relative and absolute links, mainstreaming of web standards.
  • Hands-On Lab: Create a practice page with numerous links
Assessment Activities
  • Online Assessment
    • Demonstration of working links
    • Discussion: What mainstream sites use standards?
  • Classroom Assessment
    • Demonstration of working links
    • Discussion: What mainstream sites use standards?
Wrap-Up / Feedback
  • Discussion of student's progress on Assignment 1.

Lists

Overview This module introduces HTML lists: ordered lists, unordered lists, definition lists, and nesting lists
Learner Competencies
  • Create a list
  • Identify the types of lists
  • Recognize the uses of different types of lists
  • Create nested lists
Length
  • Online Delivery
    • This module will take approximately 1 week
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 1 week of class sessions.
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery
  • Reference Readings: Learn how to create ordered, unordered and definition lists. Learn how to nest lists.
  • Discussion topics: uses of lists
  • Demonstration: Visit sites that use lists in many ways. Show what can be done with lists when CSS is added. Suggested resource: Listamatic
  • Hands-On Lab: Add at least one list to a web page. Add a list to Assignment 1.
Assessment Activities
  • Online Assessment
    • Discussion question: Where can you find lists on the web?
    • Hands-on activity: Define and give examples of a relative path and an absolute path.
    • Assignment 1 is due at the end of this module.
    • Quiz: Provide students with a page of text. Students must markup the text appropriately and upload it for viewing.
  • Classroom Assessment
    • Discussion question: Where can you find lists on the web?
    • Hands-on activity: Define and give examples of a relative path and an absolute path.
    • Assignment 1 is due at the end of this module.
    • Quiz: Provide students with a page of text. Students must markup the text appropriately and upload it for viewing.
Wrap-Up / Feedback
  • Feedback on discussion
  • Feedback on Assignment 1
  • Feedback on Quiz

CSS Basics

Overview This module introduces CSS syntax and methods to link to or attach CSS to a web page
Learner Competencies
  • Create an internal style element
  • Link to an external style sheet
  • Understand the syntax of a CSS rule including selector and declaration (property and value)
  • Distinguish the selector types: universal, element, class, id, pseudo class, descendent, and grouped
Length
  • Online Delivery
    • This module will take approximately 2 weeks
    • Students are expected to spend 8 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 2 week of class sessions.
    • Students are expected to spend 8 hours outside of class on readings and learning activities.
Content Delivery
  • Reference Readings: Study the syntax of CSS rules, identify the selectors. Find out how to add an internal <style> section in the document and how to link to an external style sheet.
  • Discussion topics: Selector types, the cascade, the box model
  • Demonstration: Selector types using simple and obvious declarations. CSS shorthand.
  • Hands-On Lab: Begin work on Assignment 2, with an external stylesheet.
Assessment Activities
  • Online Assessment
    • Discussion question: Explain the uses of universal, element, class, id, pseudo class, descendent, and grouped selectors
    • Discussion question: What goes into a CSS rule
    • Discussion question: What is the difference between an internal and external style and what does that have to do with the cascade
  • Classroom Assessment
    • Discussion question: Explain the uses of universal, element, class, id, pseudo class, descendent, and grouped selectors
    • Discussion question: What goes into a CSS rule
    • Discussion question: What is the difference between an internal and external style and what does that have to do with the cascade
Wrap-Up / Feedback
  • Feedback on discussion

CSS Layout Basics

Overview This module continues the development of basic concepts in CSS. Concepts such as positioning and float are introduced. The HTML div element is used to create structural content blocks with assigned IDs for layouts.
Learner Competencies
  • Identify and use the elements of the CSS box model
  • Identify and use the HTML div to create stuctural content blocks on a web page
  • Use positioning and/or float to create a simple layout
  • Create an external stylesheet with rules for body, blockquote, lists and other elements used in Assignment 2
Length
  • Online Delivery
    • This module will take approximately 2 week
    • Students are expected to spend 8 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 2 week of class sessions.
    • Students are expected to spend 8 hours outside of class on readings and learning activities.
Content Delivery
  • Reference Readings: Study the recommended CSS references for information on linking to stylesheets, positioning, float, and continue to study the box model. Study the CSS reference material for information on background, border, clear, color, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, and width.
  • Discussion topics: Float, position, clear, the CSS box model
  • Demonstration: See Web Design 101: Floats and Web Design 101: Positioning for examples and demonstation ideas
  • Hands-On Lab: Add div elements with targeted style rules to the Assignment 2 stylesheet to produce a simple two-column float-based layout. Use descendent selectors.
Assessment Activities
  • Online Assessment
    • Discussion: Discuss the difference between relative and absolute positioning
    • Discussion: Translate a CSS shorthand rule in to a verbose rule.
    • Hands-on activity: Diagram and label the box model.
  • Classroom Assessment
    • Discussion: Discuss the difference between relative and absolute positioning
    • Discussion: Translate a CSS shorthand rule in to a verbose rule.
    • Hands-on activity: Diagram and label the box model.
Wrap-Up / Feedback
  • Summarize techniques for creating a two-column layout
  • Feedback on student's Assignment 2 progress

Tables

Overview This module introduces HTML tables.
Learner Competencies
  • Create an accessible table
  • Use caption, th, col, row, and header as needed
  • Understand how to present a table with CSS
Length
  • Online Delivery
    • This module will take approximately 1 weeks
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
  • Classroom Delivery
    • This module will take approximately 1 week of class sessions.
    • Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery
  • Reference Readings: Study the HTML reference resources for infomation on HTML data tables. Include in this study the following: table, caption, summary, tr, th, td, thead, tbody, tfoot. Study the CSS reference resources to learn how the following relate to tables: border, border-collapse, margin, padding, background, color.
  • Discussion topics: The accessible table
  • Demonstration: Build an accessible table
  • Hands-On Lab: Add an accessible table to Assignment 3. Create a practice page with a table
Assessment Activities
  • Online Assessment
    • Exercise: Display a practice table page
    • Discussion question: What goes into an accesible table?
  • Classroom Assessment
    • Exercise: Display a practice table page
    • Discussion question: What goes into an accesible table?
Wrap-Up / Feedback
  • Feedback on discussion
  • Feedback on practice table

Forms

Overview
  • This module includes foundation information about building accessible forms
  • Students will work on Assignment 3 in this module
Learner Competencies
  • Construct a contact form
  • Demonstrate the use of input fields, text areas, radio buttons, checkboxes, select menus, and submit buttons
  • Use a provided script
  • Illustrate proper use of the label element with 'id' and 'for' attributes
Length
  • This module will take approximately 2 two-hour class sessions.
  • Students are expected to spend 2 outside of class on readings and learning activities
  • Testing and validation should be ongoing once the basics are defined
Content Delivery
  • Textbook Readings
  • Web Testing using online tools
  • Discussion
  • Demonstration
  • Hands-On Lab
Assessment Activities
  • Assignment3: Students must demonstrate accessibility testing and test results for the form
Wrap-Up / Feedback
  • Feedback on Assignments
  • Small-group discussion and comment on Assignment 3 by classmates
  • Assignment Grades

Testing and Validation

Overview
  • This module includes foundation information about validation and testing of HTML, CSS, and accessibility
  • Students will work on Assignments 2 and 3 in this module
Learner Competencies
  • Use online tools and the Firefox Web Developer Toolbar to test pages
  • Demonstrate the valid use of HTML
  • Demonstrate the valid use of CSS
  • Demonstrate acceptable accessibility in layout, structure, image use, table and form elements
Length
  • This module will take approximately 2 two-hour class sessions.
  • Students are expected to spend 2 outside of class on readings and learning activities
  • Testing and validation should be ongoing once the basics are defined
Content Delivery
  • Textbook Readings
  • Web Testing using online tools
  • Discussion
  • Demonstration
  • Hands-On Lab
Assessment Activities
  • Assignment 2 and 3: Students must demonstrate validation and accessibility testing and test results for both assignments.
Wrap-Up / Feedback
  • Feedback on Assignments
  • Small-group discussion and comment on Assignment 2 and 3 by classmates
  • Assignment Grades

Contributors

Primary Course Developer: Virginia DeBolt

Course Reviewers: Aarron Walter, Terry Morris

Additional support and special thanks to: