Fast track to HTML & CSS 101

The World Wide Web

Client Side vs. Server Side
The web technologies
Evolution of the World Wide Web
What is Web 2.0
Workings of HTTP
The fundamentals of the web
What is AJAX?
The W3C
Web Standards
Web Accessibility

Architecture

Site Architecture
File & Folder Management
Site definition
Naming conventions
Defining assets
Browsers
What is a Browser?
Browser Wars
Netscape to Chrome
Browser Statistics
A Modern Browser
Cross-Browser compatibility issues
Internet Explorer 6 issues
Mobile Browsers
The Syntax
Tags
Self-closing tags
block and inline

The

The Different DOCTYPEs
What is a DOCTYPE
HTML5 DOCTYPE
The DTD

XML declaration issue

XHTMLising your code
Document Object Model
HTML5 Default options
The
Adding Meta tags
Keywords, Descriptions and Refresh
The Character Set
HTML Comments
Style Tag
Script Tag

Document Structure

Structural Elements
Headings & Paragraphs
Semantics
Lists
Nested Lists
Data Types and Definitions
Special Characters
The title attribute
Using the address tag
cite, dfn, var, abbr
code, kbd, samp and pre
Quoting in HTML
bold, strong, italic and emphasis

Tables

Table headers
Accessibility in Tables
Nesting Tables
Adding Captions
Merging columns and rows
Web Images
GIF, JPEG and PNG
What format do I choose?
Image attributes
Alternate text for Accessibility
Figure Captioning

Hyperlinks

The anchor tag
Named anchors
Relative & absolute links
Linking to an email address
Forms
Forms basics

GET vs. POST

Text fields
Setting Accessibility labels
Text Area
Check boxes
Drop-down lists
Radio buttons
Radio Groups
Upload a file
Fieldset & accessibility

Submit & Reset buttons

Publishing
Buying a Domain
Buying hosting space
File transfer Protocol
Uploading files to a server
Testing online

Practical Exercises

Building a ‘Hello World' page
Building a small site

CSS Introduction

HTML Structure and Content, CSS Presentation
Advantages of CSS
Implementing CSS
CSS Rules: The Basic Syntax
Case, Whitespace and Comments in CSS

The CSS Standards

The Scope of CSS
Browser Support for CSS
CSS Hackarounds

Writing CSS

CSS Selectors
CSS and HTML Structure
The CSS Box Model
The IE Box Model
Absolute Units
Proportional Units
Shorthand Syntax
Margins and Padding
Negative Margins
Background Images
Classes and ID's
Descendant Selectors
Group Selectors
Block Boxes and Inline Boxes
Block Box Behaviour
Inline Box Behaviour

Text

Text Formatting in CSS
Text Formatting
Typefaces, Alternatives and Defaults
Text Size and usability issues
Internet Explorer Quirks
Font Characteristics
Setting and Using Space Within Text
Formatting Blocks of Text

Links

Undeerstanding Link States
Styling Link states
Styling Internal Links
Styling external Links
Styling links to documents

Stylesheets

Reset.css
Modularising CSS Style-Sheets
Simpler Management, Less Effort, More Control
Using Embedded Styles

CSS Positioning

Choosing the Right CSS
Technique for Positioning Blocks
The Position Property
The Document Flow
Static Positioning
Relative Positioning
Relative Positioning with specified values
Absolute Positioning
Fixed Positioning
The CSS float property
Clearing Floats
Page Layout
Using CSS in the Real World
Deploying CSS
Usability
Readable Pages
The Proliferation of Screens

Deployment

CSS 2.1
CSS3
Browser Support
Testing
Using Test Suites and Multiple Browsers
Cross-platform Testing in Single-platform Environments
CSS Help and Advice
Authoritative Sources versus Web Myths and Gossip

Practical Exercises

Styling a simple page
Styling a small site