Science & Art Multimedia - Calgary, Learn HTML and CSS training

403 247-2457

HTML 5 & CSS TRAINING

by Dr. Robert Berdan (Updated March 1, 2012)

HTML is short for HyperText Markup Language which consists of a series of building blocks called tags used to create web pages. Developed in 1989 by Tim Berners Lee, HTML has become the foundation of the World Wide Web including web pages and hyperlinks. It is easy to learn HTML and only requires a text editor (e.g. notepad or Texedit), computer (PC, Mac or Unix) operating system and a browser (Internet explorer, Firefox, Google Chrome, Safari or Opera) to view the web pages. To share your web pages on the Web you will also need an FTP program (free) and a web hosting account. In order to add pictures you will need to an image editing program to crop, resize and save your files.

Once you learn the basics of HTML and web design you can publish your own web site to share your views or start a virtual store. There are programs that will write HTML code for you, but you will still have to learn HTML in order to apply Cascading Style Sheets or add features the HTML editors can't - not to mention most of them have bugs and don't always follow your direction. If you would like to create or maintain a web site HTML & CSS should be the first thing you learn; assuming you know how to use a computer. If you take private training I can teach you HTML essentials, intro to CSS and Dreamweaver all in 15 hours for only $499 + GST. Training can be provided on PC or Mac.

1. HTML 5 Basics - create a document and view it in a browser

Understand what HTML is and its significance

Understand components of HTML - elements, tags, attributes

Start an HTML page using <!DOCTYPE html><html lang="en">

Add <title><head> and <body> tags

Add <meta charset="utf-8" /> and understand significance

Add sample text <p>I am Canadian </p>

Save your web page file.html (.htm) - view file extensions

File names: lower case, descriptive, no spaces or symbols

View source code on any HTML web page

I.E. Firefox, Chrome, Safari and Opera - browser popularity

Format text using <b><i> versus <strong><em>

Deprecated <font face="arial" size="7" color="red"></font>

Apply header tags h1, h2, h3, h4, h5, h6

Align text using align attribute, <div> and deprecated <center>

Deprecated tags <u><center><font><marquee><blink>

Single element tags <hr><br /><img src=""><input type />

Indent text using <blockquote>

<div> <span>tags and CSS to provide blocks

Add comments  , end of </div> and indent code

Block level elements - h1, p, div, blockquoe, ul, ol, form, div

Inline elements <p>, <strong>,<em><a><span><cite>

Modify background page colour <body bgcolor="#ffffff">

Colour methods (rgb 255, 0,0) hexidecimal #ffffff, text)

Add special symbols to a web page e.g. © ® ™ Á

Create space between text <pre> tag to show code and  

Add superscripts and subscripts to a web page

Meta Tags - keywords, description, robots no follow, refresh

Understand valid vs invalid code

Validate and check your page for errors and warnings

2. Add Lists, Links, Tables and Iframe to a web page

Create an unordered list <ul><li>text</li></ul> incl. type

Create an ordered list <ol><li>text</li>>/ul> incl. type attribute

Create a definition list <dl><dt>text</td><dd>text</dd></dl>

Nest an unordered list inside and ordered list

Create email link, add subject <a href="mailto:text?subject=">

Create a link to another web site and open it in a new window

Create a link to another web page, and a digital file e.g PDF

Create a navigation list - list with links

Modify the color of a link using link, alink, vlink attributes

Create a local link within a page and also to another page

Understand difference between absolute, relative and local links

Create a simple table include border, width, cellspacing, cellpadding, <table><tr><td><th><colspan><rowspan>

Create a web template using a table and link several pages

Add <iframe src="page.html"></iframe> - insert google map

3. Working with Images - GIF, JPG, PNG 72 dpi

Insert images into a web page - .gif, .jpg, .png - transparency

Insert a Gif animation

Set resolution of images 72 dpi, dimensions in pixels

Determine how big a file is in Kb and its approx. download time

Insert images <img src="file.jpg" alt="text desc" />

HTML 5 <element title="text"> vs <img src="" alt=""/>

Make an image into a hyperlink - add border=0

Add an image as a background <body background="image.jpg">

Add a gradient background (requires image editor)

Add a favicon to your web page

Align text around an image, hspace, vspace - deprecated

Add space CSS <img style="margin: 0px 20px" /> T & B, R & L

Protecting imges with javascript or invisible .gifs

Finding free images - creative commons licensed images

4. Working with Forms

Create a form and use enctype="text/plain" mailto: attributes

Create a form and attach basic form.php script and test

Include hidden input, radio buttons, check boxes, select box

Vary size of the text boxes, add checked="checked"

Use maxlength to control text input

Include <text area> and drop down lists

Insert input type=password and explain its use

Add fieldset, legend and label elements

Include a privacy policy at the end of the form - its the law

Discuss form validation methods - javascript, PHP, HTML5

Discuss how to create a secure form by hosting on https://

Demonstrate how to add shopping carts from PayPal

Explore new HTML 5 input tags with built in validation

Modify form elements using CSS

Add Shopping carts using PayPal

5. Semantic Markup HTML 5

Group Headings <em> vs <i> <strong> vs <b>

Add <section><article> and <footer> tags

Javascript fix to make I.E. 9 recognize HTML 5 tags

Explore microformats

Add date, time and meter markup

Add an <address> element

Add navigation to a page

List steps in updating older pages to new markup

6. Adding Multimedia to Web pages

Link to multimedia files - video, audio

Codec Support in various Browsers

Embed audio and video - <embed>

HTML 5 <video><source src="" type="video/mp4"/></video>

Embed Flash .swf .flv files

Embedding Flash movies from YouTube

7. Introduction CSS

Introduction to CSS, elements, properties, values

Adding CSS inline, head, external style sheet, import style

Declaring character coding in an external CSS sheet

Importing external fonts from Google API (library)

Add comments to CSS style sheet

Creating a class and pseudo class

Styling links - use classes to make different link styles

Creating an ID element

Color - red, hex #fffff, rgb(232, 123, 112), hsl(0,50%,100%)

CSS Units, Absolute vs Relative: px, pt, ex, pc, %, in, em, mm

Inheritance - parent child relationships in CSS

Specificity - determine which declaration wins 0,0,0,0

!important declaration

8. Block Level and Inline Elements

Styling Inline and block level elments

The CSS box model

Creating boxes with borders, square and rounded

CSS Working with images, rounded corners, drop shadow

Float images left, right and then add <br class="clearfloat" />

Float Flag problem

Vendor prefixes - CSS3 fixes for older browser

Background-color, background images, fixed vs scroll

Absolute vs relative positioning, float, left, right, clear, z index

Contextural compound CSS elements

9. Navigational Elements

Modifying appearance of lists

drop down menus

Simulating buttons

Fluid design

Overflow property

Multi-column layouts, fixed and fluid designs

Styling forms with CSS

Styling tables with CSS

Styling the browser with CSS

Assignments:

1) Build 5-7 page website using HTML

2) Build 5-7 page website using CSS