(X)HTML with CSS
Event on 2012-07-11 00:00:00
Description
XHTML 1.0 combines the strength of HTML with the power of XML. Students will gain knowledge of the latest and greatest approaches to website design and consistency. Using hands-on lab exercises, they will build a small business web site of their own. Both HTML 4.01 and XHTML 1.0 approaches will be covered. Students will work with images and learn to add formatting and style with CSS to encourage consistency and easy editingin web site design.
Objectives
• Understand the differences between HTML and XHTML
• Build effective web sites with HTML/XHTML
• Comprehend the benefits of CSS to web pages
• Acknowledge browser variations in handling CSS
Prerequisites
This course requires a basic understanding of the Macintosh or PC interface.
Course Outline
Note: The curricula below comprise activities typically covered in a class at this skill level. The instructor may, at his/her discretion, adjust the lesson plan to meet the needs of the class.
Introduction
• The Internet, the Web, and HTML
• Open but Not Equal
• The Browser Wars
• The Push for Standards
Working With Web Page Files
• Designing Your Site
• Creating a New Web Page
• Editing Web Pages
• Organizing Files
Basic (X)HTML Structure
• Creating the Foundation
• Declaring the Encoding
• Base Tags
• Creating Section Headers, Paragraphs, Divisions, Spans, LineBreaks, Comments
Basic (X)HTML Formatting
• Making Text Bold or Italic
• Changing the Size of Text and Using a Monospaced Font
• Using Preformatted Text
• Quoting, Superscripts, and Subscripts
• Marking Changed Text
Using Images
• About Images for the Web
• Inserting Images on a Page
• Offering Alternate Text, Specifying Size, Thumbnails
• Wrapping and Adding Space around an Image
• Aligning Images
• Adding Horizontal Rules
Links
• Creating Internal and External Links
• Creating Anchors
• Targeting Links to Specific Windows
• Setting the Default Target
• Creating a Client-Side Image Map
Creating Styles
• Constructing a Style Rule
• Constructing Selectors
• Selecting Elements by Name, Class or ID, Context, or Basedon Their State
• Selecting Part of an Element
• Selecting Elements Based on Attributes
• Specifying Groups of Elements
• Combining Selectors
Applying Styles
• Creating Internal and External Style Sheets
• Importing External Style Sheets
• Applying Styles Locally
• The Importance of Location
• Adding Comments to Style Rules
Formatting With Styles
• Choosing a Font Family
• Embedding Fonts on a Page
• Creating Italics and Bold
• Setting All Font Values at Once
• Setting the Text Color and Background
• Controlling Spacing and White Space Properties
• Adding Indents
• Aligning Text
• Decorating Text
• Layout with Styles
Structuring Your Pages
• The Box Model
• Displaying and Hiding Elements
• Absolute and Relative Positioning
• Affixing an Element to the Browser Window
• Offsetting Elements In the Natural Flow
• Formatting
• Positioning Elements in 3D
• Determining Where Overflow Should Go
Style Sheets for Printing
• Using Media-Specific Style Sheets
• How Print Style Sheets Differ
• Controlling Page Breaks
• Other Print Specific CSS Properties
Lists
• Creating Ordered and Unordered Lists
• Choosing Your Markers (Bullets)
• Choosing Where to Start List Numbering
• Using Custom Markers
• Controlling Where Markers Hang
• Setting All List-Style Properties at Once
• Creating Definition Lists
• Styling Nested Lists
Tables
• Mapping Out Your Page
• Creating Tables
• Formatting
• Combining Tables
• Spanning a Cell across Columns
• Spanning a Cell across Rows
• Dividing Your Table into Column Groups
• Dividing the Table into Horizontal Sections
• Speeding up Table Display
Frames
• Creating a Simple Frameset
• Creating Frames in Rows and Columns
• Adjusting a Frame's Margins
• Showing or Hiding Scroll Bars
• Adjusting the Color of the Borders
• Adjusting the Frame Borders
• Keeping Visitors from Resizing Frames
• Targeting Links to Particular Frames
• Targeting Links to Special Spots
• Changing the Default Target
• Nesting Framesets
• Embedding Content with Objects
Forms
• About CGI Scripts
• Creating a Form
• Sending Form Data via E-mail
• Creating Text Boxes and Password Boxes
• Creating Radio Buttons, Checkboxes, and Menus
• Creating Text Areas
• Allowing Visitors to Upload Files
• About Hidden Fields
• Creating the Submit and Reset Buttons
• Organizing the Form Elements
• Formally Labeling Form Parts
• Setting the Tab Order in a Form
• Disabling Form Elements
Getting People to Visit
• Keywords
• Descriptions
• Controlling Other Information
• Creating a Crawler Page
• Submitting Your Site to a Search Engine
• Improving Your Ranking by Getting Linked
• Writing Pages That Are Easy to Index
• Other Techniques for Publicizing Your Site
at Future Media Concepts – Orlando
6675 Westwood Boulevard Suite 145
Orlando, United States