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 <!-- text --> , 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 &nbsp;
  • 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

 

Testing Web pages in legacy Browsers and Mobile devices

 

Web Fonts and related resources

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

     

HTML & CSS
Design and build websites by
Jon Ducket
Available as e-book $12.95
or paper back for $22.56

   Student Resources

   CPN260_Day1 - PDF
   CPN260_Day2 - PDF
   CPN260_Day3 - PDF
   CPN260_Day4 - PDF
   No Day 5
   CPN260_Day6 - PDF
   CPN260_Day7 - PDF
   CPN260_Day8 - PDF
   CPN260 - PDF

  1. HTML Basics

   History of HTML - Wiki
   History of HTML at w3.org
   Most popular Broswers
   Monitor screen resolutions
   What is charset utf-8?
   Show file extensions on Mac
   Show file extensions on PC
   Texedit on a Mac
   Find Notepad or Textedit
   List of HTML editors
   Web OS trends W3
   Rules for filenames   
   Deprecated Tags

   HTML 5 cheat sheet - PDF

   W3schools.com HTML 5
   Echoecho HTML course
   HTML Quizz W3C
   
W3C Markup Validator
   Web site evaluation  
   Lecture 1 notes HTML 4

   lang tag importance
   Adding colours
   16 Predefined color names
   Code for special symbols
   DOCTYPE spacing issues
   Framesite - Deprecateed
   Meta Tags reference
   Google Meta tag reference
   Meta tag resource
   Legal information
   Meta tag lawsuits
   Meta tags & JS - PDF
   Demosthenes tools blog

  2. Lists, Links and Tables

   Tables, lists - powerpoint
   I-frame notes
   W3school - iframe
  
Frame sites deprecated
   
HTML lists W3school
   Page Table layout
   Table layout with header
    Is CSS superior to tables
    Tables for layout - Pros
    Table vs CSS debate     CSS     CSS layouts vs tables
    Table vs CSS debate blog
    CSS vs tables debate

  3. Working with Images

   Digital imaging basics
   Working with Images
   Alt versus Title attribute
   Add a Favicon
   Favicon Editor
   Add space image 3school
   Protect Images script
   !DOCTYPE image space fix
   Photoshop slicing- PDF
   GIMP free image editor
   Adobe software trials
   Free online image editor
   Picasa free image organizer
   Flaming text editor
   Dowload tutorial Graphics
   The 72 dpi myth
    
The Myth of DPI for web

  Free Photographs & Images

  
 Freefotos noncommercial
   Freestockphotos
   Free images
   More free images
   NASA images
   Free wildlife images
   Free digital images
   Stock exchange- Free
   Free Background images
   Free Animated Gifs
   Free Public Photos
   Free Graphics
   
Animation factory
   Canadian Flag - Wiki free
   
Flamming Text  
   I stockphotos for sale

   Nature photos for sale
   Free background images

   4. Forms

   Form tutorial - PDF
   Forms - powerpoint
 
   
Forms W3school forms
   Encytpe attribute W3school
   Get versus Post Method  
   Add fieldset, legend, label
   Creating a fileuploader
   
Add HTML 5 form elements
   HTML5 input fields
   Basic CSS to style forms
   View Demo Styled form
   Styling forms with CSS
   Set up PayPal Carts
   Doctor HTML5 - note form

    5. Semantic Markup
     
   The meaning of Semantic
   HTML5 Semantic Markup    HTML5 shim script for IE
   HTML 5 web page exercise
   HTML 5 semantic page 1
   HTML 5 semantic & CSS
   Microformats
   Microformats get started
   Microformats HTML 5 Doctor
   HTML 5 mobile support
   HTML 5 browser support

   HTML 5 CSS3 browser sup
   Caniuse.com - stats
   HTML5 Doctor - ask ?'s
   Dive into HTML 5
   HTML5 image space fix
   MS I.E. HTML5 fix

   6. Adding Multimedia

   Codec support does it matter
   Embedding Quicktime
   Quicktime VR movies
   Embedding video HTML 5
   Embedding audio HTML 5
   Demo Page - download files 
   WebM format (VP8)

   MP4 format
   Ogg Vorbis/Theora
   Embedding Flash .swf
   Embedding Flash FLV
   Embedding VRML
   Panorama Maker software

   ProShow gold
   Panorama to Flash
   Audicity Free Audio editor

    7.Introduction to CSS

    W3school CSS tutorials     
    CSS Browser Support     
    Introduction to CSS
    
Delcare character coding
    
Safe fonts and font stack
    
Google Web fonts
    Using Google font API

    Add external fonts

    CSS Units W3C
    What is an EM?
    Dynamic Style Switcher
    Cascading & Inheritance   
    Specificity & CSS
    !important declaration    
    Box Design W3C school
   
 Box Borders W3C school
    Border Color W3C school
    Rounded box corners
   
Shadows - images & text    
    CSS Vendor Prefixes

    CSS Color modes
    HSL Color with CSS
    Is CSS superior to tables
    Tables for layout - Pros
    Table vs CSS debate

    8. Block level and Inline

     Block vs Inline - W3C
    
Positioning 3 types - W3C
     
Positioning boxes exercise
     Positioning boxes HTML
     CSS Backgrounds
    
Float Flag Quirk
     Float Flag example
     Float Flag Solution
     Simple box format
     Basic CSS Flow Box PDF
     Starter page for tutorial
     Finished Web page
     CSS Table Template
     CSS round box design
     CSS round box design 2
     CSS round box design 3
     CSS layout tutorials
     CSS template layouts
     1 Col centered fluid
     2 Cols fluid layout sample
     3 Cols fixed layout sample
     Overflow property
     3 Cols text layout
     3 Cols text left menu box
     Scroll bar styles
     CSS drop down menu
     CSS menu generator
     
CSS Drop-Down generator
     Drop downtutorial     
     Drop down2 tutorial
     
Simple Drop Down CSS

   CSS Links and Resources
    
    Free CSS Templates

    CSS at HTML goods
    Rounded Corners
    Rounded Corners2
    CSS menus
    Scrollbar colors
    Dynamic form CSS
    CSS links tutorials
    CSS tutorials
    CSS multi menus
    Curved Boxes CSS
    Fixed Layout tutorial RB

    
CSS Zen Garden

    Utilities

   WS_FTP_LE - zip download
   WS_FTP_LE - tutorials
   WS_FTP from IPSWITCH
   Filezilla Free Mac\PC FTP   
   Cyber Duck Mac FTP Free
   Fetch FTP Mac - trial version
   Download Winzip utility    
   
Gimp FAQ
   Free HTML editors
   Adobe Prosizer program
   Javascript scroller
   
Online PDF converter
   
QR Code Generator
   QR code for website
   Testing Multiple IE versions
   IE 10 compatability mode
   IE 10 fix drop down menus
   Browsershots.org - testing   Open font library free fonts   Font squirrel font converter

   Design Tips and Ideas
   
   Design Basics - PDF  
   Web sites that suck
   Eye Tracking Studies

   Business documents

    Time tracking sheets
    Sample Web contract