XHTML/CSS Essentials

XHTML and CSS are the current best practices for creating web pages: XHTML for the structure and content, and CSS for the design and appearance. Using them properly allows for web content that works well in multiple browsers and is easier to maintain, update and restyle.

This one-day, instructor-led, comprehensive lab course provides students with advanced knowledge and skills to understand, construct and properly deal with the current implementations of XHTML and CSS.  Students are guided through all the basics and then they get their hands wet by constructing real websites using the latest supported versions of XHTML and CSS.  Students will leave with all the skills needed to create the XHTML and CSS which are the fundamental tools for creating ASP.NET Master Pages and Themes in later courses, such as ASP.NET and SharePoint.  Naturally these skills are also applicable to other server side coding environments as well.

Prerequisites:

Students should be familiar with using text editors, creating and saving files.

Areas of Focus:

Module 1: Introduction and XHTML and Websites

• Documentation requirements
• Structural vs. presentational markup

Module 2: Structure Of  A Web Page

• doctype
• html
• head
• title
• meta tags
• style
• script
• body

Module 3: XHTML Language Fundamentals

• syntax
• self closing tags
• display properties
• normal flow

Module 4: Common XHTML Elements

Learn the core elements for creating web pages, including those used for textual and tabular content, links, forms and frames. If you've been working with HTML for a while, you may be surprised at how many elements you currently use that are now regarded as deprecated.


Lab 1: Putting It All Together: XHTML

Students will create a standards compliant XHTML1.0 web page which will provide the fundamental building block for a final project at the end of the day in which they will create website based on this templated design.

Module 5: CSS Language Fundamentals 

• basic CSS syntax
• selectors 
• cascading
• inheritance
• overrides
• linked
• embedded
• inline
• box model

Module 6 CSS-P (Positioning) 

• absolute
• relative
• default
• float

Module 7: CSS Properties 

Learn the core CSS properties, allowing you to affect:

• text
• images
• backgrounds
• tables
• colors
• borders
• padding
• margins
• fonts

Module 8 : Media Specific CSS

• screen
• print
• mobile
• others
• CSS Browser Adaptation
• html if statement
• external scripts
• IE6, IE7, FireFox, Safari, Mobile Devices

Module 9: 508 Compliance

Lab 2: Putting It All Together: CSS

In this lab the students will build upon the page they designed in the first lab and use CSS to present the page in 3 different formats as well as mobile and print versions - all without changing the underlying XHTML.

Module 10: Advance Technique Discussion

• a:hover
• overflow
• visibility
• cursor
• important
• layouts