HTML

HTML

Course Target:

This hands-on course is designed for new users who wish to create simple web pages for their intranet or Internet web site. No previous experience of HTML or language coding is required. 

Entry Requirements:

Participants must  be familiar with the operating system they use and have a solid awareness of the world wide web, in particular their own corporate web site.

Qualification:

Participants, on satisfactory completion of the course and any related assignments, will be awarded a Certificate in HTML.

Total Course Time:

Duration: 2 days

Course Description:

HTML (the Hpertext Markup Language) is the language of the World Wide Web developed by Tim Berners-Lee in 1990 while working at CERN (the European Laboratory for Particle Physics) in Geneva. HTML is not a programming language – it is a ‘markup’ language whereby simple coding is embedded into a narrative which describes the structure, layout and formatting of the document. The coding is ‘interpreted’ or ‘parsed’ by a web browser and, hopefully, the page is displayed as the designed intended. Unlike programming languages, HTML is simple, logical and intuitive to understand and implement.

CSS (Cascading Style Sheets) arrived in 1996. CSS is a significant breakthrough in web design allowing designers more control over the style and layout of their web pages than can be achieved using basic HTML. You can define a style for each HTML tag and apply it to individual web pages (embedded styles), localised parts of your page (inline style) or for the entire site itself (external style sheets). With the latter, simple modifications to your style result in those changes globally updating all pages linked to your style sheet. CSS was updated in 1998 and continues to be ‘a work in progress’. 

Course Outline:

HTML and CSS Introduction:

The following is a general outline. The range of topics covered during your training is dependent upon student level, time available and preferences of your course booking.

Introducing HTML

  • A brief overview of HTML and the world wide web
  • Browser and resolution issues
  • The syntax and structure of HTML
  • Introducing tags, attributes and values
  • Meeting logical and physical tags
  • Container and empty elements

Getting started

  • Understanding the DTD (document type declaration)
  • Defining the Head and Body regions
  • Structuring and formatting your content using Block and Character level tags
  • Fonts and colour
  • Sizing text and using headings
  • Indenting using Blockquotes
  • Using Horizontal Rules
  • Including Escape characters
  • Naming conventions
  • Including a Title for your pages
  • Testing your site in different browsers 

Colour and Images

  • Understanding colour for the web 
  • Working with hexadecimal
  • Meeting web safe colours
  • Applying colour to text, tables and cells
  • The differnet image formats used on the web
  • Placing and linking an image
  • Adding alternate text
  • Sizing and positioning images  

Tables and Hyperlinks

  • Creating a simple table
  • Adding rows and cells
  • Adding content to cells formatting tables and cells
  • Creating relative link between pages
  • Creating absolute links to other sites
  • Creating mailto links and links to non-HTML files
  • Adding named anchor links to long pages
  • Adding links to images  

Introducing CSS and CSS Structure

  • A brief review of HTML
  • Understanding the limitations of HTML
  • The evolution and current status of CSS
  • Where to keep up to date with CSS
  • The importance of DTD (Document Type Declaration) when using CSS
  • The style and comment HTML tags
  • Claration block
  • ID and Class Styles

Applying and modifying CSS

  • Embedded styles
  • Inline styles
  • External Style Sheets
  • Locating amending embedded styles
  • Locating and amending inline styles
  • Linking vs importing external style sheets  

CSS with HTML

  • ID vs class sectors
  • Descendant selectors and grouping selectors
  • The DIV and SPAN tags

Typography with CSS

  • Fonts and font families 
  • Sizing text using different units of measure
  • Line height
  • Font weight
  • Working with colour

Hyper Links

  • Link basics
  • Styling hyper links
  • Link Text decoration
  • Creating rollovers using hover

Improved Layout

  • Using the box model
  • Padding and margins
  • Element positioning