Testing 1,2,3... Vernon, are we live?

Getting started: Do you have your tools?

If Notepad doesn't cut the mustard, try Notepad++. For colour checks try ColorZilla, and get the Web Developer add-on for Firefox. Serious about web development? Try the Firebug add-on to edit, debug, and monitor of HTML, CSS, and JavaScript. Need more? 30+ Firefox add-ons for web developers & designers.

Basic HTML tag syntax

Okay, Joe Barta. Here we go. HTML tags, are like verbs, they tell the browser to do something, like <jump>. Attibutes are like adverbs, such as height="6feet". When we put them together, we get action! For example <jump height="6feet">

Unlike English, HTML is (mostly) case insensitive, but why go to the extra effort to type another keystroke? Also, we can add several attributes to any tag <jump height="6feet" direction="up" repeat="50" style="star">

Fonts

So what font should I use?

To get an idea what fonts look like try the simple font widget. However, don't use <font> tags, as you'll have to unlearn bad habits later. My best friend and I believe sans-serif is easier to read on screen and serif on paper.

Style

Start formatting with CSS because once you've seen the CSS Zen Garden you'll never want to format using HTML ever again. A nice way to start is with the ColorPicker - it automatically generates simple styles to stick in your <head>

All jolly good. So what HTML can I use if all my formatting is done via CSS? Answer: document structural tags with semantics.

Structure and content

There are basic document structures. <head> and <body>, then the rest, that our audience will actually see. Headings are written like this:

Something really cool in a <h1>

Something really cool in a <h2>

Something really cool in a <h3>

Something really cool in a <h4>

Something really cool in a <h5>
Something really cool in a <h6>

<p> tags for containing a paragraph</p>

Block quotes can be contained in a pair of opening and closing <blockquote> tags.

If you want to use characters from other languages, you'll have to learn or look-up the secret codes. For the Latinos out there, here are the ISO Latin-1 characters. You might need to write your resume with &eacute; so that it appears as resumé and isn't confused with the English verb.

The rest of us might enjoy a few additional characters from ISO 8859-1 such as using &copy; to render © the copyright sign.

Running Bull Productions <img> tags are for popping an image in, and we use <a href="where_i_want_to_link_to">my link text</a> for links to a different document.

Naming anchors can allow for linking to a specific line on a page. The destination might be <a name="right_here"></a> and we would link to this specific point with an extra #right_here on the end of the href attribute. See this jump to right_here in action!

To create an email link just change the href attribute to href="mailto:forrest@gump.com?subject=Run Forrest. Run!"

Tags can be nested. The obvious choice being an image with a link. Overlapping of tags is to be avoided at all costs. So your tags should end up like this:

Running Bull Productions <a href=""><img src="" border="0"></a>

Using a bit of javascript in this page I can detect your current screen resolution:

It is a very good idea to check your page at other resolutions. Your carefully crafted layout might fall apart at other resolutions. Especially if you design your page at a higher resolution. View your creation at a lower resolution and you might be surprised.

Lists

- can be bulleted (unordered) or 1 to infinity, a to z type, i,ii,iii,iv... and I,II,III,IV... we use tags such as <ol type="a"> to contain an ordered alphabetical list. Unordered lists just start with <ul> and both types can be nested. <ul type="disc"> or "circle" or "square".

  1. first on my agenda
  2. second I'm going to ask for...
  3. and so on...
definition list
Great for dictionary style lists of definitions. Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

We can also create a horizontal rule with code like <hr width="50%" size="15" noshade>

Preformatted content can be rendered exactly as is, provided we wrap it up with <pre> tags.

             ///\\___
             (@ @)
  +----oOO----(_)-----------+
  |      VERNON FOWLER      |
  |           made          |
  |           this          |
  +-----------------oOO-----+
            |__|__|  
             || ||
            ooO Ooo

Great for displaying chunks of code to fellow JavaScripters or CSS folk, or any of us geeks out there. Also coders are in the good habit of commenting everything. So we can't forget the good old comment tag. <!--This is a comment.-->

Standards

Many documents on the web including this are aiming for the HTML 4.01 Transitional. We declare this by putting the following as the first line.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

If you're keen for the HTML 4.01 Strict document type standard, you've got to be better with your CSS for all presentation formatting and leave the document structural tags in the HTML.

Valid HTML 4.01 Transitional

That's the end... Until you're ready for Joe's JavaScript tutorial.