Course Description
This course introduces students to (X)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)
- Zeldman, Jeffrey. Designing With Web Standards. Grand Rapids: New Riders, 2009.
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.
- Lloyd, Ian. Build Your Own Website The Right Way Using HTML & CSS. Lancaster, CA: SitePoint, 2008.
- Musciano, Chuck. HTML & XHTML: The Definitive Guide. : O'Reilly Media, 2006.
- Schultz, David and Cook, Craig. Beginning HTML with CSS and XHTML: Modern Guide and Reference. : Apress, 2007.
- DeBolt, Virginia. Mastering Integrated HTML and CSS. San Francisco: Sybex, 2007.
- Meyer, Eric. The Definitive CSS Guide. : O'Reilly Media, 2006.
- Williams, Robin. The Non-Designer’s Design Book. : Peachpit Press, 2008.
- Felke-Morris, Terry. Web Development and Design Foundations with XHTML, 4th Edition. Upper Saddle River: Addison Wesley Higher Education, 2008. ( Textbook Companion website: http://webdevfoundations.net )
- Schmitt, Christopher. CSS Cookbook. Sebastapol, CA: O'Reilly Media, Inc., 2006.
- Jonathan Lane, Meitar Moscovitz , and Joseph R. Lewis . Foundation Website Creation with CSS, XHTML, and JavaScript. : Friends of ED, 2008.
- Jacobs, Denise R.. The CSS Detective Guide: Tricks for solving tough CSS mysteries. : New Riders Press, 2010.
Recommended Reading
HTML
- Francis, M. N. "The basics of HTML." Opera Developer Community. 8 July 2008.
- Heilman, Christian. "The HTML Head Element" Opera Developer Community. 8 July 2008.
- Johansson, Roger. "Choosing the right doctype for your HTML documents" Opera Developer Community. 8 July 2008.
- "DOCTYPEs and their Respective Layout Modes" Web Standards Project. 21 Feb 2003.
- Francis, M.N. "Marking up textual content in HTML" Opera Developer Community. 8 July 2008.
- Francis, M.N. "HTML lists" Opera Developer Community. 8 July 2008.
- Buchanan, Ben. "Images in HTML" Opera Developer Community. 8 July 2008.
- Heilman, Christian. "HTML Links" Opera Developer Community. 8 July 2008.
- Hanen, Jenifer. "HTML Tables" Opera Developer Community. 8 July 2008.
- Hanen, Jenifer. "HTML Forms: the Basics" Opera Developer Community. 8 July 2008.
- Wroblewski, Luke. "The Information Architecture Behind Good Web Form"s ASIS&T The American Society for Information Science & Technology. Aug. & Sept. 2008.
- Francis, M.N. "Lesser Known Semantic Elements" Opera Developer Community. 8 July 2008.
- Heilman, Christian. "Creating Multiple pages with Navigation Menus" Opera Developer Community. 26 Sept 2008.
- Francis, M.N. "Validating your HTML" Opera Developer Community. 26 Sept 2008.
- Henick, Ben. "Common HTML Entities Used for Typography" Opera Developer Community. 26 Sept 2008.
- Meiert, Jens. "HTML, CSS, and Web Development Practices: Past, Present, and Future" Jens Meiert, 15 Oct 2009.
Design Basics
- Lane, Johnathan. "Information Architecture" Opera Developer Community. 26 Sept 2008.
- Francis, M.N. "What does a good web page need" Opera Developer Community. 8 July 2008.
- Linda. "Color Theory" Opera Developer Community. 8 July 2008.
- Linda. "Building a site wireframe" Opera Developer Community. 8 July 2008.
- Linda. "Color Schemes and Design Mockups" Opera Developer Community. 8 July 2008.
- Haine, Paul. "Typography on the Web" Opera Developer Community. 8 July 2008.
CSS
- Francis, M.M. "Generic Containers: The Div and Span Elements" Opera Developer Community. 26 Sept 2008.
- Heilman, Christian. "CSS Basics" Opera Developer Community. 26 Sept 2008.
- Olsson, Tommy. "Inheritance and Cascade" Opera Developer Community. 26 Sept 2008.
- Henick, Ben. "Text Styling with CSS" Opera Developer Community. 3 Oct 2008.
- Henick, Ben. "CSS Layout Model" Opera Developer Community. 26 Sept 2008.
- Sullivan, Nicole. "CSS Background Images" Opera Developer Community. 26 Sept 2008.
- O'Brien, Paul. "Web Design 101: Backgrounds" Digital WebMagazine. 21 May 2007.
- Buchanan, Ben. "Styling Lists and Links" Opera Developer Community. 26 Sept 2008.
- Buchanan, Ben. "Styling Tables" Opera Developer Community. 26 Sept 2008.
- Henick, Ben. "Styling Forms" Opera Developer Community. 26 Sept 2008.
- Olsson, Tommy. "Floats and Clearing" Opera Developer Community. 26 Sept 2008.
- DeBolt, Virginia. "Web Design 101: Floats" Digital Web Magazine. 10 Sept 2007.
- Olsson, Tommy. "CSS Static and Relative Positioning" Opera Developer Community. 26 Sept 2008.
- Olsson, Tommy. "CSS Absolute and Fixed Positioning" Opera Developer Community. 26 Sept 2008.
- Olsson, Tommy. "Web Design 101: Positioning" Digtal Web Magazine. 16 Apr 2007
Web Basics
- Grannell, Craig. Getting your Content Online Opera Developer Community. 8 July 2008.
Resources
- Olsson, Tommy, O'Brien, Paul. "SitePoint CSS Reference" Sitepoint.
- Lloyd, Ian. "SitePoint HTML Reference" Sitepoint.
- DeBolt, Virginia. "Retrain Your HTML 3.2 Brain to Work in CSS" Web Teacher. 8 Jan. 2007.
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 |
---|---|---|
(X)HTML syntax |
|
|
(X)HTML elements |
|
|
Basic Web Design Concepts |
|
|
(X)HTML DOCTYPES |
|
|
(X)HTML validation |
|
|
(X)HTML Best Practices |
|
|
CSS: The Cascade |
|
|
CSS: Selectors and Properties |
|
|
Site Structure |
|
|
Forms |
|
|
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.
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.
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.
Criteria | Performance Quality | Score | ||||
---|---|---|---|---|---|---|
0 points | 1 point | 2 points | 3 points | 4 points | ||
(X)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 (X)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 XHTML. | 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 (X)HTML. | A working link to Assignment 2 can be found on the student's home page. The link is marked up with semantic (X)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.)
Criteria | Performance Quality | Score | ||||
---|---|---|---|---|---|---|
0 points | 1 point | 2 points | 3 points | 4 points | ||
(X)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 (X)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 XHTML. | 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 XHTML. | A working link to Assignment 3 can be found on the student's home page. The link is marked up with semantic XHTML 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.
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 points | 1 point | 2 points | ||
(X)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
(X)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.
(X)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 (X)HTML for a heading, a paragraph, and an ordered list.
- Write the (X)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 (X)HTML for an XHTML 1.0 Strict DOCTYPE
(X)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.
(X)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 XHTML 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 XHTML 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
- Ten Checkpoints of a Standards Based Curriculum, a PowerPoint presentation with speakers notes. Download the zip file. This was a presentation at HighEdWebDev07 by Virginia DeBolt
Validation & Testing
- W3C HTML Validator
- W3C HTML Validator
- W3C Link Validator
- Cynthia Says Accessibility Validator
- Speed Optimization Tester
- Firefox Web Developer Toolbar
- Opera Dragonfly
- Opera Dragonfly Debug Menu
- Firebug for Firefox
General
Learning Modules
Overview | This module introduces basic concepts of HTML and the basic reasons behind the need for web standards. |
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
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 |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Overview | This module introduces basic concepts web page design |
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
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 |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Overview | This module continues the development of basic concepts related to the need for web standards. It provides experience with hyperlinks. |
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Overview | This module introduces HTML lists: ordered lists, unordered lists, definition lists, and nesting lists |
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Overview | This module introduces CSS syntax and methods to link to or attach CSS to a web page |
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
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 |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Overview | This module introduces HTML tables. |
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Overview |
|
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Overview |
|
---|---|
Learner Competencies |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up / Feedback |
|
Contributors
Primary Course Developer: Virginia DeBolt
Course Reviewers: Aarron Walter, Terry Morris
Additional support and special thanks to:
- Christopher Schmitt