Web Fundamentals CSS/HTML/XML Training Courses

The Language of the Web*

• Basics of HTML and the Web
• Creating an HTML File
• Web Browsers and Tags
• Formatting and Testing Pages
• Understanding Attributes
• Working with Images

*Web Page Construction *

• The Rough Design Sketch
• From a Sketch to an Outline
• From Outline to Web Page
• Testing your New Pages
• Learning New Tags and Elements
• Working with Blockquote and Paragraph
• Nesting Elements
• Choosing Inline or Block for Text

*Serving Up the Page *

• Finding Hosting Solutions
• Domain Name Basics
• Getting your Files to the Web
• URL Linking
• HTTP Protocol
• Absolute and Relative Paths
• Index and Default Pages
• Linking to Other Web Sites
• Liking to a New Window
• Using Target
• Testing on Multiple Browsers
• Tips and Tricks for Publishing

• Images, Media, and More HTML*

• Working with Images
• Standards and the ATL Tag
• Images for Links
• Formatting Options
• Working with Transparent Images
• Working with Page Color and Background
• Document Type and the W3C Validator
• Using Meta Tags and Data
• Validating and Nesting Fixes

• Moving on to XHTML*

• Learning About XHTML
• The XHTML 1.0 Checklist
• Moving from HTML to XHTML
• Validation and XHTML

• Adding Some Style*

• Using CSS and XHTML
• Designing and Building Rules
• Linking to External Style Sheets
• Understanding Inheritance
• The Font Family Tree
• Overriding Inheritance
• Creating a Selector for the Class
• Taking Classes Further
• Validating CSS

• More About CSS and Properties*

• Text and Fonts
• Understanding Font-Family
• Adding Style to Your Fonts
• Specifying Web Colours
• Two Minute Guide to Hex Codes
• How to Find Web Colours
• Text Decorations
• Removing the Underline from Links

• Web Layout Basics*

• Learning the Box Model
• Padding, Border, and Margins
• Adding a Background Image
• Adding Padding to the Left and Right
• Two Minute Guide to Borders
• Border Fit and Finish
• Working with the id Attribute
• Using Multiple Style Sheets

• More HTML and CSS Techniques*

• Dividing a Page into Logical Sections
• Selecting Descendants
• Working with Colour
• Fixing the Line Height
• Adding the Tag for Style
• Styling Based on State
• Pseudo-Classes
• Understanding the Power of Cascade

• Arranging Elements*

• Working with Flow
• Working with Inline Elements
• Putting it all Together
• Working with Width and Float
• Fixing the Two-Column Problem
• Fixing Overlap
• Liquid and Frozen Designs
• How Fixed Positioning Works
• Two and Three Column Designs

• Adding Forms to your Page*

• How Forms Work
• Adding the Form Element
• Working with Input and Select
• Radio Buttons and Drop Downs
• Working with Get and Post
• Working with Tables and Forms
• Styling the Form and Table with CSS

• CSS Introduction*

• HTML Structure and Content, CSS Presentation
• Advantages of CSS
• Creating and Using Style-Sheets
• CSS Rules: The Basic Syntax
• Case, Whitespace and Comments in CSS
• The CSS Standards
• The Scope Of CSS
• Browser Support for CSS

• CSS Boxes and CSS Selectors*

• The CSS Box Model
• CSS and Logical HTML Structure
• Styling Boxes: Borders, Margins and Padding
• The IE Box Model and Quirks Mode
• IE Box Model Workarounds
• Using IE6 Standards Mode
• Specifying CSS Distances
• Problems with Absolute Units: pixels and point sizes
• Using Proportional Units: em, ex and percentages
• Formatting Box Edges Differently
• Shorthand Syntax for Sets of Edges
• Using Margins and Padding Effectively
• Collapsing Vertical Margins on Paragraphs
• Using Negative Margins on Boxes
• Background Images on CSS Boxes
• Grouping Elements with HTML Classes
• Styling Multiple Elements Similarly (Selector Grouping)
• Block Boxes and Inline Boxes
• Block Box Behaviour
• inline Box Behaviour

• Text Formatting in CSS*

• Text Formatting
• Typefaces, Alternatives and Defaults
• Text Size — a Serious Usability Issue
• Font Characteristics
• Setting and Using Space Within Text
• Formatting Blocks of Text
• Using Arbitrary Inline Tags:

• More CSS Selectors and Selection*

• Using HTML Element IDs in CSS
• Using CSS Descendant Selectors
• Descendant Selector Examples
• Child, Sibling and Pseudo-Class Selectors
• Why You Need To Know Them
• Browser Support and CSS Hacks
• Distinguishing and Setting Link States
• Link, Visited, Hover, Active, Focus
• Modularising CSS Style-Sheets
• Simpler Management, Less Effort, More Control
• Embedded CSS Styles in HTML Documents
• How and When to Use Them (Rarely).
• Distinguishing Print, Screen and other Output Formats
• Special Issues in CSS for Print

• CSS Positioning*

• Choosing the Right CSS
• Technique for Positioning Blocks
• The Position Property, Floats, Margins (inc. Negative and Auto), etc
• Static Positioning and Normal Flow
• Absolute Positioning Outside Normal Flow
• Relative Positioning — Not What You May Expect!
• Fixed Positioning Outside Normal Flow
• Relative Absolute Positioning
• Absolutely Positioned Blocks in Relatively Positioned Containers
• Floating Boxes with the CSS float property
• Page Layout Using Absolutely Positioned Blocks

• More on CSS Page Layout*

• Alternative Methods of CSS Positioning
• Centring Blocks
• Styling Lists
• Redefining the Behaviour of Inline and Block Elements
• Hiding and Revealing Blocks
• Table Formatting in CSS
• Styling Table Cell Borders
• Page Layout with Table Display Properties

• Cascade, Precedence, Specificity and Inheritance in CSS*

• Taking Control: Ensuring that CSS Rules Interact in the Way You Want
• Combining Styles: Different Types, Origins, Importance, Specificity and Order
• Examples: Combining Rules
• Cascading and Cascade Order
• Resolving Style Conflicts By Origin
• Resolving Style Conflicts By Importance
• Resolving Conflict By Selector Specificity
• Resolving Conflict By Order
• Non-CSS Presentational Hints
• Property Inheritance

• CSS Layers and Translucency*

• Different Forms of Layered Presentation in CSS
• Layering with the z-index Property
• Different Methods for Creating Translucency Effects
• The CSS3 opacity Property
• opacity Example
• Fixed Attachment Backgrounds in Layers
• background-attachment Example
• Transparency and Semi-transparency with Alpha-Blended PNG
• PNG Translucency Example and Sample Code
• Pseudo-Transparency with JPG Positioned Backgrounds
• JPG Pseudo Transparency Example

• Using CSS in the Real World*

• Deploying CSS
• CSS Formatting Versus HTML Formatting
• Achieving a Balance
• Standard Tags and Semantic Markup
• Usability
• Readable Pages
• Screen Size and Fluid Design
• Text Size, Including Internet Explorer Quirks
• Table Layout and CSS Positioning
• Table Layout and CSS Positioning as Alternatives
• Combining Table Layout with CSS Positioning
• CSS Browser Support
• Testing Websites
• Using Test Suites and Multiple Browsers
• Cross-platform Testing in Single-platform Environments
• CSS Help and Advice
• Authorities Sources versus Web Myths and Gossip
• Free Lifetime Support

The Language of the Web

• Basics of HTML and the Web
• Creating an HTML File
• Web Browers and Tags
• Formating and Testing Pages
• Understanding Attributes
• Working with Images

Web Page Construction

• The Rough Design Sketch
• From a Sketch to an Outline
• From Outline to Web Page
• Testing your New Pages
• Learning New Tags and Elements
• Working with Blockquote and Paragraph
• Nesting Elements
• Choosing Inline or Block for Text

Serving Up the Page

• Finding Hosting Solutions
• Domain Name Basics
• Getting your Files to the Web
• URL Linking
• HTTP Protocol
• Absolute and Relative Paths
• Index and Default Pages
• Linking to Other Web Sites
• Liking to a New Window
• Using Target
• Testing on Multiple Browsers
• Tips and Tricks for Publishing

Images, Media, and More HTML

• Working with Images
• Standards and the ATL Tag
• Images for Links
• Formatting Options
• Working with Transparent Images
• Working with Page Colour and Background
• Document Type and the W3C Validator
• Using Meta Tags and Data
• Validating and Nesting Fixes

Moving on to XHTML

• Learning About XHTML
• The XHTML 1.0 Checklist
• Moving from HTML to XHTML
• Validation and XHTML

Adding Some Style

• Using CSS and XHTML
• Designing and Building Rules
• Linking to External Style Sheets
• Understanding Inheritance
• The Font Family Tree
• Overriding Inheritance
• Creating a Selector for the Class
• Taking Classes Further
• Validating CSS

More About CSS and Properties

• Text and Fonts
• Understanding Font-Family
• Adding Style to Your Fonts
• Specifying Web Colours
• Two Minute Guide to Hex Codes
• How to Find Web Colours
• Text Decorations
• Removing the Underline from Links

Web Layout Basics

• Learning the Box Model
• Padding, Border, and Margins
• Adding a Background Image
• Adding Padding to the Left and Right
• Two Minute Guide to Borders
• Border Fit and Finish
• Working with the id Attribute
• Using Multiple Style Sheets

More HTML and CSS Techniques

• Dividing a Page into Logical Sections
• Selecting Descendants
• Working with Colour
• Fixing the Line Height
• Adding the Tag for Style
• Styling Based on State
• Pseudo-Classes
• Understanding the Power of Cascade

Arranging Elements

• Working with Flow
• Working with Inline Elements
• Putting it all Together
• Working with Width and Float
• Fixing the Two-Column Problem
• Fixing Overlap
• Liquid and Frozen Designs
• How Fixed Positioning Works
• Two and Three Column Designs

Adding Forms to your Page

• How Forms Work
• Adding the Form Element
• Working with Input and Select
• Radio Buttons and Drop Downs
• Working with Get and Post
• Working with Tables and Forms
• Styling the Form and Table with CSS

CSS Introduction

• HTML Structure and Content, CSS Presentation
• Advantages of CSS
• Creating and Using Style-Sheets
• CSS Rules: The Basic Syntax
• Case, Whitespace and Comments in CSS
• The CSS Standards
• The Scope Of CSS
• Browser Support for CSS

CSS Boxes and CSS Selectors

• The CSS Box Model
• CSS and Logical HTML Structure
• Styling Boxes: Borders, Margins and Padding
• The IE Box Model and Quirks Mode
• IE Box Model Workarounds
• Using IE6 Standards Mode
• Specifying CSS Distances
• Problems with Absolute Units: pixels and point sizes
• Using Proportional Units: em, ex and percentages
• Formatting Box Edges Differently
• Shorthand Syntax for Sets of Edges
• Using Margins and Padding Effectively
• Collapsing Vertical Margins on Paragraphs
• Using Negative Margins on Boxes
• Background Images on CSS Boxes
• Grouping Elements with HTML Classes
• Styling Multiple Elements Similarly (Selector Grouping)
• Block Boxes and Inline Boxes
• Block Box Behaviour
• inline Box Behaviour

Text Formatting in CSS

• Text Formatting
• Typefaces, Alternatives and Defaults
• Text Size — a Serious Usability Issue
• Font Characteristics
• Setting and Using Space Within Text
• Formatting Blocks of Text
• Using Arbitrary Inline Tags:

More CSS Selectors and Selection

• Using HTML Element IDs in CSS
• Using CSS Descendant Selectors
• Descendant Selector Examples
• Child, Sibling and Pseudo-Class Selectors
• Why You Need To Know Them
• Browser Support and CSS Hacks
• Distinguishing and Setting Link States
• Link, Visited, Hover, Active, Focus
• Modularising CSS Style-Sheets
• Simpler Management, Less Effort, More Control
• Embedded CSS Styles in HTML Documents
• How and When to Use Them (Rarely).
• Distinguishing Print, Screen and other Output Formats
• Special Issues in CSS for Print

CSS Positioning

• Choosing the Right CSS
• Technique for Positioning Blocks
• The Position Property, Floats, Margins (inc. Negative and Auto), etc
• Static Positioning and Normal Flow
• Absolute Positioning Outside Normal Flow
• Relative Positioning — Not What You May Expect!
• Fixed Positioning Outside Normal Flow
• Relative Absolute Positioning
• Absolutely Positioned Blocks in Relatively Positioned Containers
• Floating Boxes with the CSS float property
• Page Layout Using Absolutely Positioned Blocks

More on CSS Page Layout

• Alternative Methods of CSS Positioning
• Centring Blocks
• Styling Lists
• Redefining the Behaviour of Inline and Block Elements
• Hiding and Revealing Blocks
• Table Formatting in CSS
• Styling Table Cell Borders
• Page Layout with Table Display Properties

Cascade, Precedence, Specificity and Inheritance in CSS

• Taking Control: Ensuring that CSS Rules Interact in the Way You Want
• Combining Styles: Different Types, Origins, Importance, Specificity and Order
• Examples: Combining Rules
• Cascading and Cascade Order
• Resolving Style Conflicts By Origin
• Resolving Style Conflicts By Importance
• Resolving Conflict By Selector Specificity
• Resolving Conflict By Order
• Non-CSS Presentational Hints
• Property Inheritance

CSS Layers and Translucency

• Different Forms of Layered Presentation in CSS
• Layering with the z-index Property
• Different Methods for Creating Translucency Effects
• The CSS3 opacity Property
• opacity Example
• Fixed Attachment Backgrounds in Layers
• background-attachment Example
• Transparency and Semi-transparency with Alpha-Blended PNG
• PNG Translucency Example and Sample Code
• Pseudo-Transparency with JPG Positioned Backgrounds
• JPG Pseudo Transparency Example

Using CSS in the Real World

• Deploying CSS
• CSS Formatting Versus HTML Formatting
• Achieving a Balance
• Standard Tags and Semantic Markup
• Usability
• Readable Pages
• Screen Size and Fluid Design
• Text Size, Including Internet Explorer Quirks
• Table Layout and CSS Positioning
• Table Layout and CSS Positioning as Alternatives
• Combining Table Layout with CSS Positioning
• CSS Browser Support
• Testing Websites
• Using Test Suites and Multiple Browsers
• Cross-platform Testing in Single-platform Environments
• CSS Help and Advice
• Authorative Sources versus Web Myths and Gossip
• Free Lifetime Support

Introduction to XML

• What is XML?
• XML document tags
• Rules for naming XML terms
• The XML document – elements, the hierarchical element structure
• The XML document attributes – elements vs. attributes, entities, text
• A well formed XML document
• Namespaces

Using XML

• XML in the Enterprise
• XML over the web
• XML architecture and design
• Some XML applications (XHTML, SVG)

Validating XML documents – DTD – Document Type Definition

• Using a DTD, a sample DTD
• Definition of elements, attributes, entities

Validating XML documents – XML Schemas

• Schema Grammar and vocabulary
• Elements, schema, datatype, attribute type, group, description
• Referring to a schema in an XML file
• Converting DTD to schemas
• Using namespace and open model

Styling and displaying XML CSS Cascading Style Sheets

• The History of CSS
• Syntax
• Selector by attribute (class, id)
• Styles (units, colours, display/background, text, font, border, margin)
• Styles (padding, classification, positioning)

Styling and transforming XML

• XSL eXtensible Style Language
• XSLT and FO
• XSL capabilities
• Templates
• XSL style sheets
• Matching elements by location Xpath
• Matching attributes and ids
• Testing for existence
• Processing XSL and program flow
• Repetition
• XSL number and string functions
• Node-set functions
• Sample style sheets
• Examples using formatting objects
• Variables, white space
• Importing style sheets

DOM Document Object Model

• The XML DOM
• A document tree
• Accessing the DOM
• The DOM Interfaces
• Accessing nodes
• Data types returned by DOM Methods
• Adding nodes
• Node interface, types, attributes, methods
• The Character Data Interface
• The element interface
• Implementing DOM

Parsing XML

• SAX Simple APIs for XML
• SAX – how it works
• How to parse an XML document
• HandlerBase class
• Element, text callbacks
• DOM versus SAX
• Parsing XML
• SAX parser considerations
• Java parsers