Build Your Own Web Site Using (X)HTML and CSS
| Duration: | 10 hours The hours can be divided in any way over 2 days. |
| Prerequisite: | Basic knowledge of the windows environment, basic keyboard skills, and basic knowledge of Internet Explorer (or any web browser). |
| Course Materials: | Course manual with CD containing exercises |
| Prices: | $295 each for 1 student (one-on-one training) $265 each for 2 to 3 students $225 each for 4 to 6 students $225 for the first 6 students, $150 for each additional student |
| Description: | If you are interested in learning how to build a web site, this is the place to start. This comprehensive introductory course teaches you how to build a web site the right way using valid (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
- The Textarea Element
- 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
Getting Your Web Site Online
- The Client-server Model
- Web Hosting Jargon 101
- Hosting Your Web Site
- Uploading Files to Your Server
- Validating Your Web Pages