Basic webstandards Workshop

Web Design Articles

Basic webstandards Workshop

Part 1 - the standards

The Web Standards
What are Web Standards about?
Ideal page structure

Part 2 - (X)HTML

What is valid code?

Understanding elements and attributes
Doctypes
The XHTML dilemma
Part 3 - Semantic markup

What is semantic markup?

Marking up content with no meaning
Marking up content with incorrect meaning
Forgotten HTML elements
Heading levels - the great debate
Part 4. Accessibility

Why bother with accessibility?

Disabled groups
Devices and software
Skip links
Access keys
Accessible code in action
Building a simple accessible form
Building a simple accessible table

Part 5. Introduction to CSS

Why use CSS to separate content from presentation?
Some definitions
The document tree

What is a rule or rule set?

Grouping selectors
Shorthand rules
Selectors
Inheritance
Cascade
Specificity
Overview of CSS positioning

Part 6. Floats

Basic float rules

Where do they float?

Move down to fit

Is width required on floats?

Elements around a float
Clearing floats
Floated elements inside a container
Floating an image
Floating multiple images to right edge
Floating a div and caption
Floating a thumbnail gallery
Floating next and back buttons
Floating inline lists
Switching column order with floats

Part 7. CSS issues and bugs

Margin collapse
Trapping margins
IE and the box model
Double margin bug
Whitespace between list items in Windows/Internet Explorer 5
Three pixel text jog
German transation thanks to Stefan Walter
French transation thanks to Mathias Poujol-Rost and Léo Peltier

	why-css-is-good-for-google		using-relatve-font-sizes
	random-content-rotation		web-design-xhtml-1-1
	web-design-resources		accessibility-intro
	web-design-xhtml-2-1		why-internet-marketing
	xhtml-latin-1-character-references		google-updates
	google-dance		css-positioning-properties
	fancy-paragraphs		bob-regan-macromedia-accessibility
	web-design-technologies		wrox-beginning-php-4-chapter-3-1
	julie-howell-rnib-accessibility		handy-hints-web-design
	mod_accessibility		pagerank-1
	search-engine-crawling		Definition lists - misused or misunderstood.html
	Accessible Data Tables		Developing sites for users with Cognitive disabilities and learning difficulties
	An Accessibility Frontier Cognitive disabilities and learning difficulties		Inline elements and padding
	Basic webstandards Workshop		Internet Explorer and column collapse
	Building a page template in CSS - a step by step tutorial		Remote control CSS
	Colored boxes - one method of building full CSS layouts		Replicating a Tree table
	Creating a graph using percentage background images		Simple, accessible external links
	Simple, accessible more links		Styling abbreviations and acronyms
	Web standards checklist		Floated items inside containers
	Liquid layouts the easy way		Two columns with color
	CSS Centering - fun for all!		Body padding and margin
	List inheritance and Descendant Selectors		Taming the Taming lists model
	Headings as images - The Lindsay method		Ideal line length for content
	Validating Australian Museum Online		Styling the hr element
	Styling and font family names that contain whitespace		Sample CSS Page Layouts
	how_to_find_good_freelancer		using_colors_on_website
	annoying-website-design		cross_browser_compatibility
	banner-design-success-techniques		craig-tanner-freelance
	ecommerce-website-design		ppc
	separating-content-from-presentation		alternative
	web_page_optimization		personalization
	communicating_needs_web_designer		buzz
	design_it_yourself_or_hire_pro		social_bookmarking2
	w3c_validation.php		social_bookmarking
	web_design_guidelines		digg
	photo_optimization		buzz2
	website_templates		viral_video
	web_design_versus_web_development		controversy
	graphic_formats
	good_website_navigation_is_important