Introduction to Website Design Course Gauteng

HTML Subjects

Introduction

• 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

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

• A self-closing tag.
• block vs. inline
• Site Architecture
• File & Folder Management
• Site definition
• Naming conventions
• Defining assets

The DOCTYPE

• The Different DOCTYPE’s
• What is a DOCTYPE
• HTML5 DOCTYPE
• The DTD
• XML declaration issue
• XHTMLising your code
• Document Object Model
• HTML5 Default options

The HEAD

• Adding Meta tags
• Keywords, Descriptions and Refresh
• The Character Set
• HTML Comments
• Script Tag

The CSS in HTML

• Deprecated Style tags
• Linking to CSS
• Defining Media type
• &

The BODY

• HTML tags & elements
• Deprecated tags
• Semantics in the language
• Page Structure
• Headings & Paragraphs

Semantic Tags

• Ordered & Un-Ordered Lists
• Nested Lists
• Data Types and Definitions
• Special Characters
• adding title attribute
• using < address >
• cite, dfn, var, abbr
• and it’s semantics
• 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 vs JPEG vs PNG
• What the future holds
• SVG and Canvas
• When to use what image format?
• Image attributes
• Alternate text for Accessibility
• Figure Captioning

Hyperlinks

• The anchor tag
• Jump links to an ID
• relative & absolute links
• server side relative linking.
• open new tabs
• Linking to an email address

Forms

• The < form > tag < /form >
• Text fields
• Setting Accessibility labels
• Text Area
• Check boxes
• Drop-down lists
• Radio buttons
• Radio Groups
• Upload a file
• Fieldset & accessibility
• Submit & Reset buttons
• JavaScript form onclear

HTML5 in Forms

• email, url, date, week input types
• time, datetime, month input types
• number, range and search input types
• tel & color input type
• list, autofocus and required attributes
• multiple, pattern and autocomplete
• min, max and step

HTML5 Video

• Browser Codecs
• encoding in H264
• encoding in Ogg Theora
• encoding in VP8
• Using the < video >tag < /video >
• A Fallback system for legacy browsers

Publishing

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

CSS Subjects

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 Behavior
• 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