∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

Xah's Web Dev Tutorial (HTML, CSS, javascript, WEB 2.0)

Xah Lee, 2005-06, …, 2011-07

This page is a collection of examples and tips of Javascript, CSS, HTML. These are especially useful if you are a professional programer but are not familiar with DHTML technologies and wish a quick, practical introduction.

This is a tutorial is intended to cover pratical needs, using common solutions and pratices that are clean and works in all major browsers, yet still remain valid html.

All HTML, CSS, Javascript code of this tutorial pass various validation from w3c.org, and works in Internet Explorer 8, Firefox, and Safari, Opera, Google Chrome. Coding style follows a clean, “web 2.0”, practices. No attempt is made for browsers released before 2009.

For latest articles, subscribe: Xah's Web Dev Blog.

Xah's Javascript ＆ DOM Tutorial

Misc Web Dev Articles

HTML

• HTML5 Tags

• HTML Basics
• Character Sets and Encoding in HTML
• HTML/XML Entities (Character/Unicode/Symbol) List
• Standard Fonts
• More Than One Class for HTML Tag

• Split Window (frameset), Nested Frameset Example
• Window Inside Window (iframe)
• Image Maps (HTML)
• How To Embed Video With Valid HTML
• HTML5 Video and Audio Tag
• HTML5 “figure” “Figurecaption” Tags Browser Support

• Buttons, Checkboxes, Menus (HTML form)
• Browser Auto Refresh

Table

• HTML Table Example
• Styling HTML Table with CSS
• CSS Table (Tableless Table)

CSS

• CSS Basics
• CSS1 And CSS2 Differences
• CSS Tag Matching (Selector) Syntax

CSS Layout and Layers

CSS Position: static, relative, fixed, absolute, Examples

Overall Layout Design

• Tableless Layout
• Tabbed Interface with CSS

Layer Examples

• Fixing Widgets Relative To Window (CSS)
• CSS Example: “position:fixed”, overlap, z-index
• Progress Bar Example with CSS
• CSS: Overlay Text Over Image

Layout Examples

• CSS “position:relative” Example
• Text Wrapping
• Centering with CSS
• Text Flow Around Image
• Flowing List Items
• CSS Margin vs Padding

Misc

• CSS “:before” and “:after” pseudo-elements
• CSS “first-letter” and “first-line” Example
• CSS “pre” Problem: No Linebreak After Tag
• Using Unicode in HTML Attributes
• General References

Xah's PHP Tutorial

Download the whole thing for $5. Use the paypal button below. In the comment field, put “dhtml tutorial zip file”. I'll email you the download link. Make sure your email address is included and correct.