HTML and CSS Coding training course box

HTML and CSS Coding
Introduction training class

This one-day training class in HTML, XHTML and CSS introduces you to the building blocks of what you see when you open your web broswer: (x)html and css.

Getting started coding in (x)html and css is easier than most people imagine and in one day you’ll not only be able to build a basic web site from scratch but you’ll also know about deploying it on a server as well as getting images ready for your site in Adobe Photoshop. The site you build will be fully standards compliant, SEO friendly, accessible and you can take it away with you after the course to work further on turning it into a fully-fledged site.

Class Schedule

Class: HTML and CSS Coding - Introduction

Duration: 1 day

Location Start Date Time Price per Person Booking
There are currently no scheduled classes for HTML and CSS Coding - Introduction.
Please consider a custom training class (see below).


Looking for HTML and CSS Coding - Introduction training classes in the USA? Click here!

Custom Training Classes

Terrateach also offer custom courses for individuals and groups.

  • Location: You choose!
  • Type: Onsite or classroom
  • Date: You choose!
  • Duration: 1 day
  • 1 Person, 1 day: ££599.00 special: £549.00
  • 2 People, 1 day: ££899.00 special: £849.00
  • 3 People, 1 day: ££1149.00 special: £1099.00
  • 4 People, 1 day: ££1349.00 special: £1249.00
  • 5 People, 1 day: ££1499.00 special: £1349.00
  • 6 People, 1 day: ££1599.00 special: £1399.00
  • * Prices for a booking with multiple trainees.
Button - Terrateach Custom Course Book Now.png

Class Outline for HTML and CSS Coding - Introduction

What is (X)HTML?

-From HTML to XHTML and back again
-Tags, Pages and Links
-Clients, Servers and URL/URIs
-File extensions
-A first really simple HTML page
-Browser previewing

Separating Content and Style

-Thinking in blocks
-(X)HTML vs. CSS
-A Visual Example: with and without CSS styling
-Well-structured pages for SEO, Accessibility and Maintenance

XHTML Document Structure

-Page Declarations - do I have to type that?
-<html> tag
-<head> tags
-<title> tags
-<meta /> tags
-<body> tags
-A Simple complete XHTML page

Page Content with XHTML

-A First XHTML-Structured Page with text and image content
-<div> building blocks
-<p> text blocks
-<h1> text blocks
-<img /> for images
Block vs. Inline elements:
-<div> vs. <span>
Other Key XHTML tags:
-<br />
-<blockquote> & <q>
-<h2>...<h6>
-Non-standard characters: &nbsp; etc.

Element Styling with CSS

-<style> tags & tag {name:value}
Font styling and sizes:
-family; -size; color; -style; -weight; -line-height;
Element styling:
-text-align; background; whitespace;
-HEX vs. rgb(x,x,x) color

Deeper Element Styling with CSS

The three types of Style:
(1) tag
(2) .class
(3) #id

Giving id attributes to elements

-id-specific styles: #myID p {x:y}
-Styling elements according to container id’s

Understanding Cascades

-External, Head, Inline
External style-sheets:
<link [h-r-t]> vs. @import url()

Planning a Complete website

-index.html pages
-Directories (folders)
-Absolute & Relative paths
-Understanding URLs
-Using Templates

Links

-<a href=”link.html”...>Link Text</a>
-Pseudo classes: a:link{x:y}
-link, visited, hover, active - states
-Title attributes
-Linking from images (plus IE on PC border fix)

Navigation & Lists

-List-types: <ul>, <ol> and <dl>
-List-items: <li>, <dt> and <dd>
-<li> {Display: inline, block etc…}
-List-based navigation
-Image-based navigation the CSS way
-Using Lists for more mundane formatting: nesting etc.

Images

-The “alt” attribute JPEGs, PNGs and GIFs
Preparing images using Adobe Photoshop:
-Sizing images for screen
-Graphics vs. Photos - Gif/pnG vs. jPeg
-Wrapping text around images
-Background images for style not content

Page Layout with CSS

-Static vs. Liquid layouts
-Using <div> wraps and containers

The Box Model

-Margins; Padding; Borders; Content
-Creating a two-column layout
Styling Boxes/Blocks:
-border; background; margin; padding;
Aligning Boxes/Blocks:
-float and clear
Positioning Boxes/Blocks:
-absolute; relative and better methods for controling layout

FTP Transfer

-What is FTP?
Making a connection:
-adding, editing, moving & removing files
-Local vs. Remote editing
-A word of caution!

Tools of the trade

Mac OS

Text: Coda, Espresso, TextMate, BBEdit, TextWrangler, TextEdit
FTP: Interarchy, Fetch, Transmit, Cyberduck

Windows

Text: Komodo Edit, CoffeeCup HTML Editor, EditPlus, NotePad2 (there are hundreds!)
FTP: Filezilla, SmartFTP

Mac OS and Windows

-Adobe Dreamweaver

Browsers: Firefox, Safari, Opera, IE7,8,9…
Plug-ins: Firefox Firebug and “Web Developer”

Other Resources

-Hosting: http://www.hostmonster.com
-Learn More: http://w3schools.com
-Specifications: http://www.w3.org

Top

Testimonials

I learned more in 2 days than I thought I could learn in a month - amazing!

D. Martin - New Orleans Airlift, LA

My schedule as a professional photographer meant I never had the time to learn Photoshop and Lightroom to the level I wanted. After this training I feel really confident I'll be able to work faster and better after the shoot.

E. Montoro - esthermontoro.com, NY

Great pace - pro content and real world examples. Well worth the money.

S. Koff - Mahopac, NY

Training in Apple Keynote 09

Apple Keynote 09 Training iconTerrateach is now offering training in Apple Keynote 09


Learn how to give great presentations with Apple Keynote 09 - click here


If you'd like more information on bookings or anything else, please contact us.

Now available...
Adobe® Creative Suite 5 training

Our course listings for CS5 are now online. Get training in Adobe Creative Suite CS5 today!


If you'd like more information now, please contact us.

Certified Training

Terrateach Trainers come with high qualifications

Adobe ACE