(X)HTML and Cascading Style Sheets
| Duration: | 1 day |
| Prerequisite: | Basic knowledge of the windows environment, basic keyboard skills, and basic knowledge of Internet Explorer (or any web browser). |
| Course Materials: | Course book containing exercises, 470 pages |
| Prices: | $195 each for 1 student (one-on-one training) $160 each for 2 to 3 students $135 each for 4 to 6 students $135 for the first 6 students, $110 for each additional student |
| Description: | If you are interested in learning correct web design, this is the place to start. This fast-track class teaches you how to build a web site the right way using (X)HTML and Cascading Style Sheets. There are plenty of exercises and by the end of class, you will have built an XHTML compliant web site with a full CSS layout. That's the way to start out learning web design! |
Introduction to (X)HTML
Anatomy of a Web Page
Viewing the Source
Basic Requirements of a Web Page
The Doctype
The html Element
The head Element
The title Element
meta Elements
Other head Elements
The body Element
Headings and Document Hierarchy
Paragraphs
Lists
Commenting your Web Pages
Symbols
The Homepage: the Starting Point for all Web Sites
Creating Additional Pages
Linking Between our New Pages
The blockquote (Who Said That?)
The cite Element
strong and em
Introducing Cascading Style Sheets
Inline Styles
The span Element
Why Embedded Styles are Better than Inline Styles
Why External Style Sheets are Better than Embedded Styles
Creating an External CSS File
Linking CSS to a Web Page
Styling Headings
Styling Options
Contextual Selectors
Grouping Styles
Which Rule Wins?
Styling Links
Class Selectors
Using the span Element
Shaping Your Web Site with CSS
Block-level Elements
Inline Elements
Styling Inline and Block-level Elements
Setting a Width
Setting a Height
Adding Borders to Block-level Elements
Styling Individual Sides of an Element
Shorthand Border Styles
Border Styles you can Use
Adding Padding
Margins
The Box Model
Positioning Elements
Absolute Positioning
Other Layout Options
More Absolute Positioning
Relative Positioning
Floated Positioning
Styling Lists
Using Images on Your Web Site
Inline Images
Anatomy of the Image Element
Web Accessibility
GIF vs JPG vs PNG
Transparency
PNG: King of Transparency
Adding an Image Gallery to the Site
Updating the Navigation
Adding the New Gallery Page
Adding the First Image
Formatting the Picture with CSS
Captioning the Picture
Filling Up the Gallery
Sourcing Images for your Web Site
Background Images in CSS
Repeated Patterns
Non-repeating Images
Shorthand Backgrounds
Fixed Heights and Widths
Setting a Background for our Navigation
Tables: Tools for Organizing Data
Why Tables are Good for Organizing Data But Bad for Layout
Anatomy of a Table
Styling the Table
Borders, Spacing, and Alignment
Making your Tables Accessible
Linearization
Captioning your Table
Styling Table Cells
Merging Table Cells
Advanced Accessibility
Forms: Interacting with your Audience
Anatomy of a Form
A Simple Form
The Building Blocks of a Form
The form Element
The fieldset and legend Elements
The input Element
The select Element
textarea
Submit Buttons
The Default Control Appearance
Building a Contact Page
Editing the Contact Us Page
Adding a form and a fieldset Element
Styling fieldset and legend with CSS
Adding Text Input Controls
Tidying up label Elements with CSS
Adding a select Element
Adding a textarea Element
Adding Radio Buttons and Checkboxes
Completing the Form: a Submit Button