Fast track to HTML & CSS 101

Who is this course for?

People new to Web design that desire a deeper understanding of HTML and CSS, and the new standards of web design.

Objectives

Upon successful completion of this course you'll be able to; convert an existing page, styling for print, styling a press release, making an input form look good, styling an events calendar, creating an online greeting card, bringing hyperlinks to life, multicolumn layout, how to skin a menu, sneaking out of the box, positioning a better design and fixing your backgrounds.

Basics of HTML and CSS
Planning your Web Site
Formatting
Images and Styles
Understanding Properties
Working with Colours and Background Images
The DIV Tag
Layout and building Basic Forms
Understand the JavaScript language.
Understand the Document Object Model and how it is used in JavaScript.
How to detect and respond to user actions
Alter, show, hide and move objects on a web page
Check information inputted into a form
How to use CSS (Cascading Style Sheets)

Prerequisites

We will assume little or no prior knowledge of HTML and CSS in this course but you should have a basic working knowledge of either the Windows or Mac.

Benefits

This class provides you with the concepts and skills to use HTML, Javascript and CSS effectively. You get hands-on practice working with basic through advanced techniques to get the most out of your experience. You will learn the basics of coding for web design, beginning with HTML and advancing to more complex XHTML and CSS fundamentals.

The CSS part of the class provides the web professional with the ability to control the rendering, e.g. fonts, colours, leading, margins, typefaces, and other aspects of style, of a Web document without compromising its structure using Cascading Style Sheets. Using common desktop publishing terminology, Cascading Style Sheets makes it easy for professional as well as untrained designers to make use of its features.

This class is a must for people new to web design.

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

Architecture

Site Architecture
File & Folder Management
Site definition
Naming conventions
Defining assets
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
Tags
Self-closing tags
block and inline

The

The Different DOCTYPEs
What is a DOCTYPE
HTML5 DOCTYPE
The DTD

XML declaration issue

XHTMLising your code
Document Object Model
HTML5 Default options
The
Adding Meta tags
Keywords, Descriptions and Refresh
The Character Set
HTML Comments
Style Tag
Script Tag

Document Structure

Structural Elements
Headings & Paragraphs
Semantics
Lists
Nested Lists
Data Types and Definitions
Special Characters
The title attribute
Using the address tag
cite, dfn, var, abbr
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, JPEG and PNG
What format do I choose?
Image attributes
Alternate text for Accessibility
Figure Captioning

Hyperlinks

The anchor tag
Named anchors
Relative & absolute links
Linking to an email address
Forms
Forms basics

GET vs. POST

Text fields
Setting Accessibility labels
Text Area
Check boxes
Drop-down lists
Radio buttons
Radio Groups
Upload a file
Fieldset & accessibility

Submit & Reset buttons

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

Practical Exercises

Building a ‘Hello World' page
Building a small site

CSS Introduction

HTML Structure and Content, CSS Presentation
Advantages of CSS
Implementing CSS
CSS Rules: The Basic Syntax
Case, Whitespace and Comments in CSS

The CSS Standards

The Scope of CSS
Browser Support for CSS
CSS Hackarounds

Writing CSS

CSS Selectors
CSS and HTML Structure
The CSS Box Model
The IE Box Model
Absolute Units
Proportional Units
Shorthand Syntax
Margins and Padding
Negative Margins
Background Images
Classes and ID's
Descendant Selectors
Group Selectors
Block Boxes and Inline Boxes
Block Box Behaviour
Inline Box Behaviour

Text

Text Formatting in CSS
Text Formatting
Typefaces, Alternatives and Defaults
Text Size and usability issues
Internet Explorer Quirks
Font Characteristics
Setting and Using Space Within Text
Formatting Blocks of Text

Links

Undeerstanding Link States
Styling Link states
Styling Internal Links
Styling external Links
Styling links to documents

Stylesheets

Reset.css
Modularising CSS Style-Sheets
Simpler Management, Less Effort, More Control
Using Embedded Styles

CSS Positioning

Choosing the Right CSS
Technique for Positioning Blocks
The Position Property
The Document Flow
Static Positioning
Relative Positioning
Relative Positioning with specified values
Absolute Positioning
Fixed Positioning
The CSS float property
Clearing Floats
Page Layout
Using CSS in the Real World
Deploying CSS
Usability
Readable Pages
The Proliferation of Screens

Deployment

CSS 2.1
CSS3
Browser Support
Testing
Using Test Suites and Multiple Browsers
Cross-platform Testing in Single-platform Environments
CSS Help and Advice
Authoritative Sources versus Web Myths and Gossip

Practical Exercises

Styling a simple page
Styling a small site