Overview
Programming with Web Standards teaches students to build HTML pages according to World Wide Web Consortium standards. The result is pages that download faster than traditional HTML pages and are easier to maintain and update.
Objectives
- Create HTML documents from scratch
- Use the right doctype and validate HTML
- Create HTML that separates content from presentation through the use of headings, paragraphs, and lists
- Use div and span tags so page styles can be easily and quickly changed
- Add links and images to pages
- Create forms
- Build tables for tabular data
- Understand what CSS is and why it is so important
- Create external and embedded style sheets
- Work with CSS "selectors"
- Use CSS text and background properties
- Do page layout with CSS instead of HTML tables
Prerequisites:
- Comfortable using the Internet
Follow-Ups:
- Introduction to Macromedia Dreamweaver
- Introduction to JavaScript for New Programmers
- Introduction to ColdFusion MX 7 for New Programmers
- Introduction to Microsoft ASP for New Programmers
- Introduction to PHP
- Fundamentals of JavaServer Pages
Course duration
3 Days
Course outline
HTML: What it Has Been, What It Is, and What It Is Supposed to Be.
(X)HTML Structure
- DOCTYPES: what are they?
- Valid HTML and XHTML DOCTYPES
- Exercise 1: Beginning an HTML document
XHTML Tags
- Basic html tags
- Validation
- Exercise 2: Structural XHTML Markup
Lists
- Exercise 3: Building Lists in XHTML
Links
- Attributes
- Three Types of Links
- Additional Link Attributes
- When a URL does not specify a file
- Adding links to video, sound, downloadable files, and more
- Some Comments:
- Exercise 4: Adding Hypertext Links
Images
- Images
- Image Attributes
- Making an Image into a Link
- Exercise 5: Adding images to your page
Sectioning HTML Pages:
- Exercise 6: Organizing an HTML Page with
and
Tables
Form Basics
- A Simple Example
- <form > and <input > and <label > Tags
- Exercise 8: Setting up a basic form
More Types of Form Fields
- SELECT Menus
- Radio Buttons
- Checkboxes
- Text Areas
- Exercise 9: Building a More Complex Form
CSS: Making HTML Look Presentable
CSS Syntax
- Selector – Property - Value
- Where Do CSS Rules Go?
- More on Selectors
- Exercise 10: Beginning a Style Sheet
The Cascade: Inheritance and Precedence
- Precedence
- Inheritance
- Where Do CSS Rules Go? Embedded Style Sheets
- @import
- @media
- Exercise 11: Inheritance, Precedence and Multimedia
More on Selectors
- Descendant Nodes
- Other Descendant Selectors
- Pseudo-Element Selectors
- Exercise 12: Using Descendant Selectors and Pseudo-Element Selectors
Classes And Ids
- Classes
- ID
- When Should I Use Which Selector?
- Exercise 13: Using Class and ID Selectors
Measurements in CSS
Text Properties
- text-indent
- text-align
- text-decoration
- letter-spacing
- word-spacing
- text-transform
- white-space
- line-height
Font Properties
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
- Exercise 14: Formatting Text
Colors and Backgrounds
- Color
- Background Images
- Exercise 15: Working With Backgrounds and Colors
Lists
- list-style-type
- list-style-position
- list-style-image
- list-style
- Exercise 16: Working with Lists
The CSS Box Model
- width and height
- padding, padding-left, padding-right, padding-top, padding-bottom
- border properties
- margin, margin-top, margin-right, margin-bottom, margin-left
- overflow
- Exercise 17: Using the CSS Box Model
Tables
- table-layout
- border-collapse
- Exercise 18: Working With Tables
- A Possible Solution to Exercise 1
Page Layout with CSS: float, position, display
- float
- clear
- Column layouts with float and clear
- positioning
- display
- Exercise 19: Layout with CSS
Appendix A: CSS Drop-Down Menus
|
