XHTML and CSS Essentials

Learn to create standards-compliant sites using XHTML and CSS

Today's professional-standard Web sites are designed using XHTML in conjunction with CSS.

Sound challenging? Fear not, because learning to write code for the Web has never been easier or more fun. In this six-lesson course, you'll learn to create Web sites—using XHTML to mark up the structure of the document, and CSS to dictate how each page element should look.

Course lessons are packed with hands-on examples that help you gain skills and confidence step-by-step. You'll begin by mastering the basics of HTML markup and how to follow XHTML 1.0 specifications. Then you'll learn to translate this structure into visual designs that use CSS for typography and positioning. The course wraps up with a look at forms, dynamic content, and JavaScript-enhanced navigation. All course assignments are accomplished with hand-coding.

This course is designed to provide a foundation in Web standards, the set of "best practices" established by the World Wide Web Consortium, among other organizations that set the standards for Web development. A site that adheres to Web standards makes use of certain designated markup, presentation, and scripting languages (like XHTML, CSS, and JavaScript).

Learning Web standards helps you build sites that are more accessible, usable, and cross-browser compatible, as well as simpler to build and maintain!

Tuition: $900 US

Course Instructor(s):

Christopher Schmitt is an award-winning Web designer and developer.

Janet Valade is an accomplished dynamic Web developer and author.

Course content developed by Christopher Schmitt.

Requirements:

To take this course you'll need:

Computer with Internet connection (56 Kbps modem or faster).
An account with an ad-free Web hosting service (free services are available). An ad-free Web space allows students to upload assignments without interference from forced ads like popups or banners.

Course Objectives:

Students learn how to:

Understand and explain how to create sites that are compliant with XHTML 1.0 and current standards in Web development.
Create valid HTML pages, structuring page content semantically, adding links, and embedding images.
Organize Web site files and FTP them to the Web.
Create valid HTML tables and customize them by modifying rows, columns, dimensions, spacing, borders, and background.
Create fluid or fixed HTML tables for layout if needed, adding image slices.
Create a valid XHTML page and write code that conforms to XHTML 1.0 Transitional or XHTML 1.0 Strict document types.
Follow professional guidelines for testing and validating Web pages as well as fixing broken links and images.
Apply CSS styles to an HTML document through inline CSS, internal style sheet, or external style sheet.
Apply CSS rules to specific content in an HTML document using classes, IDs, divs, and spans.
Set and manipulate the typography on a Web page: fonts, colors, weights, styles, variants, decorations, and spacing.
Style lists and links on a Web page.
Style box-level elements using borders, padding, and margins.
Float page elements or position them relatively or absolutely.
Set the visibility, clipping, and overflow or page elements.
Create fixed or fluid one and two-column CSS layouts.
Test and troubleshoot CSS positioning issues.
Create a basic HTML form.
Following guidelines, create a dynamic JavaScript navigation.
Create horizontal and pop-up navigation effects.
Organize CSS coding samples to create a code repository for future use.

Course Outline

LESSON 1 Intro to XHTML and CSS

Lesson One launches the course with an overview of Web development today. How did current XHTML standards evolve, and what exactly is standards-compliant code? To help you understand today's technical environment, you'll explore the differences between HTML 4 and current standards, and examine the benefits of writing standards-compliant code. To get your feet wet, you'll learn how to create a valid HTML page, write basic HTML tags, and structure content on a page. Next, you'll explore how to add hyperlinks and insert images to HTML documents. To prepare for the assignment, you'll also learn how to organize Web site files and FTP them to the Web.

LESSON 2 HTML Tables

HTML tables have a storied history on the Web. While their proper function is to display tabular data, designers since the early 1990s have been "hacking tables" for layout. Lesson Two will prepare you to create and edit any HTML tables. You'll learn how to structure an HTML table and customize it table by modifying rows, columns, dimensions, spacing, borders, and backgrounds. The main focus will be on setting up a data table for the optimal display on browsers and devices, but you'll also learn how to create old-school, table-based fixed and fluid layouts and incorporate image slices, if needed.

LESSON 3 XHTML, Standards, and Troubleshooting

Lesson Three focuses on understanding the purpose, value, and requirements for coding your pages using XHTML. You'll learn the basic structure of an XHTML document and find out which important rules must be observed in XHTML. To make sure your pages are both technically and visually/functionally accurate, you'll learn guidelines for testing and validating Web pages, as well as how to fix broken links and images.

LESSON 4 Formatting Text with CSS

Lesson Four shifts the focus to Cascading Style Sheets (CSS). First, you'll learn three ways to associate CSS rules with an HTML document: inline, by internal style sheet, and by external style sheet. Then you'll examine the basic structure of CSS code and the rules for applying it. As you'll discover, CSS can be applied to specific parts of any HTML document using classes, IDs, divs, and spans. Next, you'll explore the fundamentals of setting and manipulating typography on a Web page. Not only is there a tremendous flexibility with type controls, but you can also easily style lists and links. The lesson concludes with a look at how to style page sections using borders, padding, and margins.

LESSON 5 Page Layout with CSS

In CSS, div tags are used to mark up page sections called block-level elements that can be used to create everything from design details to multi-column layouts. Lesson Five explores this exciting contemporary use of CSS for layout and positioning. You'll learn how to position block-level elements relatively or absolutely on the page. Next, you'll explore how to control the visibility, clipping, and overflow of page objects. Essential guidelines for creating fixed and fluid one and two-column layouts are provided, as well as troubleshooting tips for CSS positioning.

LESSON 6 Extending XHTML and CSS

Your Web design and development career does not end with learning XHTML and CSS. Most large-scale Web design projects today require page designers to integrate interactivity or dynamic content into their work, through languages like PHP or JavaScript. This lesson won't attempt to teach these scripting languages, but it will give you an understanding of how XHTML page functionality can be extended with the addition of forms, dynamic content, or navigation enhancements. The lesson will point the way forward in your Web scripting studies as well as provide some guidelines on organizing your CSS for future projects.

HTML Web site by student Nadine Herman