new courses
for 2012

check out our new linux, c#, ruby on rails and asp.net 3.5 courses, with quality material and leading instructors. stay up to date with the very latest in web development technology.

Introduction to HTML and CSS - 2 day course

6-7 February 2012 Manchester Click here to book
15-16 February 2012 Nottingham Click here to book
25-26 April 2012 London Click here to book
30-31 May 2012 London Click here to book

Can't see a suitable date or location?
Click here to register your interest in this course and we will
keep you informed when any new dates are added.

Synopsis

This course will give you an introduction to Hypertext Markup Language (HTML) - the language of the world wide web.

You will learn how to write your own web pages and to style them using Cascading Stylesheets (CSS).

Duration

2 days

Cost

£495 plus VAT

Prerequisites

None

Detailed course contents

Introducing HTML

  • What is HTML?
  • HTML files
  • HTML and the internet
  • Uniform Resource Locators (URLs)
  • Default pages
  • HTML and browsers
  • Common browsers
  • HTML versions

HTML page structure

  • HTML page structure
  • The document type declaration
  • Document type settings
  • HTML 4.01 versions
  • Validating your HTML
  • The header section
  • The contents of the page
  • Writing an HTML page
  • What is an element?
  • The html, head and body elements
  • Contents of the head element
  • The title element
  • Contents of the body element
  • More on Headings
  • The p element - paragraphs
  • Spaces and tabs in text
  • Emphasising text within paragraphs
  • Adding a strong emphasis
  • b and i elements
  • Line Breaks
  • Adding comments to HTML
  • Special characters in HTML
  • Preformatted text

Adding links, images and multimedia

  • Embedding images
  • img element attributes
  • Image formats
  • Image height and width
  • Specifying image height and width
  • Creating links
  • Opening a link in a new window
  • Absolute vs relative paths
  • Relative paths
  • The base element
  • Linking to a particular part of a page
  • What links look like
  • Using an image as a hyperlink
  • Embedding other multimedia

Image maps

  • Image maps
  • Creating image maps
  • The map element
  • The area sub-elements
  • The shape attribute
  • The coords attribute
  • Map element in a separate file

HTML logical elements

  • Addresses
  • Abbreviations and acronyms
  • Defining terms and phrases
  • Quotations
  • Insertions and deletions
  • Meta tag
  • Setting the content type
  • Specifying the character set

Styling your HTML

  • Styling your HTML
  • What is CSS?
  • Internal style sheets
  • Specifying styles in a separate file
  • CSS rules
  • CSS rules for multiple elements
  • Declaring Styles Inline
  • Background colour
  • Colours
  • 3 digit hex values
  • Functional notation
  • Functional notation using percentages
  • Colour names
  • Background images
  • Formatting text: colour
  • Formatting text: alignment
  • Formatting text: decoration
  • Formatting text: Indentation
  • Formatting text: Text transformation
  • Fonts
  • Generic font families
  • Font style and weight
  • Font size
  • Deprecated tags and attributes

More CSS

  • Reference by ID
  • Reference by class
  • Being even more specific
  • Pseudo-classes
  • Pseudo-elements
  • Block and inline elements
  • The CSS display property
  • div and span

Lists

  • Lists
  • Ordered lists
  • Declaring an ordered list
  • Unordered lists
  • Declaring an unordered list
  • Definition lists
  • Declaring a definition list
  • Displaying lists
  • Formatting lists

The box model

  • The box model
  • Borders
  • Border styles
  • Border width and colour
  • Shorthand border definition
  • Setting individual borders
  • Padding
  • Padding individual sides of an element
  • Margins
  • Setting individual margins
  • Using margins to centre a block element
  • Height and width
  • The full size of the element
  • The full size of the element – IE bug
  • Visibility
  • Positioning
  • Static positioning
  • Fixed positioning
  • Relative positioning
  • Absolute positioning
  • The z-index property
  • Float

HTML Tables

  • Data vs layout tables
  • Example: Using a table to display data
  • Example: Using a table for layout
  • Defining a table
  • Add a caption and summary to tables
  • Column widths
  • colspan and rowspan
  • Formatting table data

Frames

  • HTML frames
  • Creating a page with frames
  • Specifying column width and row height
  • Nesting framesets
  • Changing the contents of a frame
  • Special target names
  • Frame display options
  • The noframes element
  • Inline frames: the iframe element

Advanced topics: HTML Forms

  • What are HTML forms?
  • HTML form example
  • The input element
  • Password fields
  • Text areas
  • A textarea’s wrap attribute
  • Radio buttons
  • Checkboxes
  • Hidden fields
  • Uploading files
  • Submit buttons
  • Reset buttons
  • Labelling form elements
  • A form’s action
  • Form submission methods

XHTML

  • XHTML
  • XHTML: differences from HTML 4.01
  • XHTML DOCTYPE declaration
  • Changes to document prologue

Next steps

  • Using JavaScript for form validation
  • Web Development Frameworks
  • Common web development frameworks


6-7 February 2012 Manchester Click here to book
15-16 February 2012 Nottingham Click here to book
25-26 April 2012 London Click here to book
30-31 May 2012 London Click here to book

Can't see a suitable date or location?
Click here to register your interest in this course and we will
keep you informed when any new dates are added.

our services
leading professionals, teaching professionals


more about our courses

Share

 

©impartica IT training. All right reserved.