HTML & CSS Combo Essentials Introduction

This 2-day Essentials course will cover everything you need to get started with producing HTML and styling your content with CSS. You will learn how web pages are structured under the hood and how you can put together your own files for the web. We will also show you how to use CSS to control every aspect of a site's visuals: its fonts, colours, leading, margins, and more.

Upon successful completion of this course, you will be able to:

• Understand the syntax and structure of HTML pages
• Insert tags, attributes, and values into a page
• Define titles, headings, and page regions
• Add links, alternate text content, and background images
• Position and resize images and other page elements
• Work with colours
• Use correct styles instead of deprecated HTML tags
• Design without relying on tables
• Include padding, margins, borders, and backgrounds
• Write selectors to target only specific parts of a page
• Produce horizontal and vertical navigation bars
• Style hyperlinks
• Differentiate between external, embedded, and inline styles

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.

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

• 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

• Understanding colour for the web
• Working with hexadecimal
• Meeting web safe colours
• Applying colour to text, tables and cells

• The different image formats used on the web
• Placing and linking an image
• Adding alternate text
• Sizing and positioning images

• Creating a simple table
• Adding rows and cells
• Adding content to cells
• Formatting tables and cells

• Creating relative links between pages
• Creating absolute links to other sites
• Creating mailto links and links to non-HTML/XHTML files
• Adding named anchor links to long pages
• Adding links to images

• 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
• CSS and CSS2

• The importance of DTD (document type declaration) when using CSS
• The Style and Comment HTML tags
• Declaration block
• ID and class styles

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

• ID vs Class selectors
• Descendant selectors and grouping selectors
• The DIV and SPAN tags

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

• Link basics
• Styling hyperlinks
• Link text decoration
• Creating rollovers using hover

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