HTML & CSS

Contents HTML5 & CSS3

• Chapter 1: Structure
• Chapter 2: Text
• Chapter 3: Lists
• Chapter 4: Links
• Chapter 5: Images
• Chapter 6: Tables
• Chapter 7: Forms
• Chapter 8: Extra Markup
• Chapter 9: Flash, Video & Audio
• Chapter 10: Introducing CSS
• Chapter 11: Color
• Chapter 12: Text
• Chapter 13: Boxes
• Chapter 14: Tables, Lists & Forms
• Chapter 15: Layout
• Chapter 16: Images
• Chapter 17: HTML5 Layout

Chapter 1: Structure HTML

• Example
• Body, Head and Title
• First Test
• View Source

Chapter 2: Text HTML

• Headings
• Paragraphs
• Bold
• Italic
• Superscript and Subscript
• White Space
• Line Breaks
• Horizontal Rules
• Strong
• Emphasis
• Quotations
• Abbreviations
• Citations
• Definitions
• Address
• Insert and Delete
• Strikethrough
• Example

Chapter 3: Lists HTML

• Ordered Lists
• Unordered Lists
• Definition Lists
• Nested Lists
• Example

back

Chapter 4: Links HTML

• Writing Links
• Linking to Other Sites
• Linking to Other Pages
• Email Links
• Opening Links in a New Window
• Linking to a Specific Part
• Example

back

Chapter 5: Images HTML

• Adding Images
• Height and Width of Images
• Where to Place Images
• Aligning Images Horizontally
• Aligning Images Vertically
• Examining Images on the Web
• Figure and Figure Caption
• Example

back

Chapter 6: Tables HTML

• Basic Table Structure
• Table Headings
• Spanning Columns
• Spanning Rows
• Long Tables
• Width and Spacing
• Border and Background
• Example

Chapter 7: Forms HTML

• Form Structure
• Text Input
• Password Input
• Textarea
• Radio Button
• Checkbox
• Drop Down List Box
• Multiple Select Box
• File Input Box
• Submit Button
• Image Button
• Button and Hidden Controls
• Labelling Form Controls
• Grouping Form Elements
• HTML5 Form Validation
• HTML5 Date Input
• HTML5 Email Input
• HTML5 URL Input
• HTML5 Search Input
• HTML5 Placeholder
• Example

Chapter 8: Extra Markup

• Comments in HTML
• ID Attribute
• Class Attribute
• Block Elements
• Inline Elements
• Grouping Block Elements
• Grouping Inline Elements
• iFrames
• iFrames (Continued)
• Meta
• Example

Chapter 9: Flash, Video & Audio

• Adding a Flash Movie
• Adding a Flash Video
• Adding HTML5 Video
• HTML5: Multiple Video Sources
• Adding a Flash MP3 Player
• Adding HTML5 Audio
• HTML5: Multiple Audio Sources
• Example

back

Chapter 10: Introducing CSS

• Thinking Inside the Box (Borderless)
• Thinking Inside the Box
• Example
• Example (CSS)
• Using External CSS
• Styles (CSS)
• Using Internal CSS
• CSS Selectors
• How CSS Rules Cascade
• Inheritance

back

Chapter 11: Color CSS

• Foreground Color
• Background Color
• Opacity
• HSLA
• Example

back

Chapter 12: Controlling Text CSS

• Font Family
• Font Size
• Font-Face
• Understanding Font-Formats
• Font Weight
• Font Style
• Text Transform
• Text Decoration
• Line Height
• Letter and Word Spacing
• Text Align
• Vertical Align
• Text Indent
• Text Shadow
• First Letter and Line
• Link Visited
• Hover Active Focus
• Example
• No Style

back

Chapter 13: Boxes CSS

• Width Height
• Minimum Width Maximum Width
• Minimum Height Maximum Height
• Overflow
• White Space Vertical Margin
• White Space Vertical Margin (No space)
• Border Width
• Border Style
• Border Color
• Border Shorthand
• Padding
• Margin
• Centering Content
• Display
• Visibility
• Border Image
• Box Shadow
• Border Radius
• Elliptical Shapes
• Example

Chapter 14: Tables, Lists & Forms HTML&CSS

• List Style Type
• List Style Image
• List Style Position
• List Style Shorthand
• Table Properties
• Empty Cells
• Gaps Between Cells
• Styling Text Inputs
• Styling Submit Buttons
• Styling Fieldsets and Legends
• Aligning Form Controls: Problem
• Aligning Form Controls: Solution
• Cursor
• Example

Chapter 15: Layout CSS

• Normal Flow
• Relative Positioning
• Absolute Positioning
• Fixed Positioning
• Overlapping Elements: Z-Index
• Overlapping Elements: Without Z-Index
• Floating Elements
• Using Float to Place Elements Side-by-Side
• Clearing Floats
• Parents of Floated Elements: Problem
• Parents of Floated Elements: Solution
• Creating Multi-Column Layouts With Floats: Two Columns
• Creating Multi-Column Layouts With Floats: Three Columns
• A Fixed Width Layout
• A Liquid Layout
• A Grid-Based Layout Using 960.gs
• Multiple Style Sheets: Import
• Multiple Style Sheets: Link
• Example

Chapter 16: Images CSS

• Controlling Sizes of Images in CSS
• Aligning Images Using CSS
• Centering Images Using CSS
• Background Images: Body
• Background Images: Element
• Background Repeat
• Background Attachment
• Background Position
• Background Position: Percentage
• Background Shorthand
• Image Rollovers and Sprites
• CSS3: Gradients
• Example

HOVER CSS

• HOVER 1
• HOVER 2