0% found this document useful (0 votes)
78 views7 pages

Contents:: Overview of HTML More CSS

This document provides an overview of topics related to web usability and CSS training. It discusses the basics of HTML, CSS, page layout, navigation, and usability testing. The document is divided into sections covering subjects like the history of HTML, the box model, text formatting, positioning, inheritance, and deploying CSS in a usable way. It aims to provide guidance on building accessible, readable websites through best practices in HTML semantics, CSS styling, and usability principles.

Uploaded by

sjp77
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
78 views7 pages

Contents:: Overview of HTML More CSS

This document provides an overview of topics related to web usability and CSS training. It discusses the basics of HTML, CSS, page layout, navigation, and usability testing. The document is divided into sections covering subjects like the history of HTML, the box model, text formatting, positioning, inheritance, and deploying CSS in a usable way. It aims to provide guidance on building accessible, readable websites through best practices in HTML semantics, CSS styling, and usability principles.

Uploaded by

sjp77
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Contents:

Overview of HTML More CSS

 Brief history of HTML and XHTML  The box formatting model


 How the web works — clients and  Borders
servers  Margins and padding
 Browsers and rendering  Collapsing margins
 Formatting edges differently
The Basics of HTML  Background colours and
background images
 Hierarchical structure: elements  Selectors
(tags) and text  Multiple selections
 Basic XHTML document structure  Classes
 Paragraphs  <div> and <span>
 Whitespace and line breaks in  Descendant selectors
XHTML  Text appearance
 Headings  Typefaces
 Phrase mark-up in XHTML  Font sizes
 Hypertext links  Other font properties
 Embedded images  Leading
 Lists  Text alignment and justification
 Preformatted text
 Special characters in XHTML XHTML
 XHTML and Semantic markup
 What is XML?
Simple design customisation with CSS  Relationship between HTML and
XHTML
 Relationship between  Why use XHTML?
XHTML/HTML and CSS  Changes in the document prologue
 Linking to a stylesheet in a  Changes in element tags
separate file  Handling empty elements
 Examples of common
customisations HTML and Scripting
Images  Server-side scripting: forms
 XHTML Form elements
 Bitmapped images
 Client-side scripting
 Types of image: GIF, JPEG, PNG
 JavaScript
 Image type tradeoffs
 Graceful degradation
 Creating images
 Examples
Tables
Embedding Multimedia
 Using tables for tabular data
 Image maps
 Abusing tables for layout in XHTML
 Embedding flash movies
 Basic table structure
 Cells that span rows or columns
 Cell alignment  Graceful degradation
 Styling table cells
CSS Training Course Contents
Getting Started with CSS

 Introduction to this CSS course


 Course Organisation
 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
 Hands-on Exercises

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
o Problems with Absolute Units: pixels and point sizes
o 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
 Using the Generic Block Level Element: <div>
 Hands-on Exercises

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: <span>
 Hands-on Exercises
More CSS Selectors and Selection

 Using HTML Element IDs in CSS


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

CSS Positioning

 Choosing the Right CSS Technique for Positioning Blocks


o 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
o Absolutely Positioned Blocks in Relatively Positioned Containers
 Floating Boxes with the CSS float property
 Page Layout Using Absolutely Positioned Blocks
 Page Layout Using Floated Blocks
 Hands-on Exercises

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
 Hands-on Exercises

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
 Hands-on Exercises

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-transpaency with Alpha-Blended PNG
 PNG Translucency Example and Sample Code
 Pseudo-Transparency with JPG Positioned Backgrounds
 JPG Pseudo Transparency Example
 Hands-on Exercises

Using CSS in the Real World

 Deploying CSS
 CSS Formatting Versus HTML Formatting
o Achieving a Balance
 Standard Tags and Semantic Markup
 Usability
o Readable Pages
o Screen Size and Fluid Design
o Text Size, Including Internet Explorer Quirks
 Table Layout and CSS Positioning
o Table Layout and CSS Positioning as Alternatives
o Combining Table Layout with CSS Positioning
 CSS Browser Support
 Testing Websites
o Using Test Suites and Multiple Browsers
o Cross-platform Testing in Single-platform Environments
 CSS Help and Advice
o Authorative Sources versus Web Myths and Gossip
 Free Lifetime Support
Contents:
Introduction to web site usability Navigation and searching in web site
usability
 Pragmatism and methodology
 Art versus engineering  From page design to site design
 Why everyone gets web site  Homepages are over-estimated
design wrong the first time  Splash screens — just say no
 Navigation: the three big
Page design issues in web usability questions
 Where am I?
 Screen space: the scarcest  Where have I been?
resource  Where can I go?
 User controlled presentation  Creating and revealing site
 Screen resolution structure
 Standard and non-standard  Reducing navigational clutter
content  Managing subsites or sections
 Application versions  Search-dominant versus link-
 Data lifetimes dominant users
 Response times  Implementing searching
 Connections and partial  Presenting search results
downloads  Search term usage
 Link descriptions  Search destination design
 Link titles  Presenting URLs and domain
 Link colours names
 Link consistency and site  Archival and old URLs
structure  Executable links and URLs
 Link expectations
 Outbound links Web usability testing
 Inbound links
 Linking to subscriptions and  Statistics and methods
registrations  Whom to test
 Linking from adverts  When and where to test
 Stylesheets for consistency  The test cycle
 Stylesheets for separating  Conducting a test
content from presentation  Observing a test
 Fonts and font sizes  Interpreting and using results
 Text size  Using results
 Frames: just say no
 Frames: more reasons to say no Intranets, accessibility,
 If you must use frames internationalisation and usability
 Printing issues
 Extranets
Content issues in web site usability  Intranets
 Accessibility
 Content is critical and web  Visual disabilities
content is different
 The value of an editor  Auditory and speech disabilities
 Discursive style  Motor and cognitive disabilities
 Keeping texts short  Internationalisation and cultural
 Checking and copy editing difference
 Scannability
 Plain English
 Managing long texts by chunking
 Page titles
 Headings, sub-headings, and pull
quotes
 Legibility
 Understanding image formats
 Reducing image file sizes
 Multimedia and plugins
 Animation
 Animation pitfalls
 Video
 Audio
 Downloading and streaming
 3D
 Conclusion: the attention
economy

You might also like