Introduction to HTML

HTML
Hypertext Markup Language
CSS
Cascading Style Sheets
Hypertext
Documents that can link to one another
Markup Language
i.e. Not a programming language. Uses tags to convey information about information.
For example <html> </html> is used to mark the beginning and end of an HTML document. Tags wrap around content and (nearly) always come in pairs. They all take the same form.
<tag>content</tag>

Do the Right Thing! Semantic Markup

Separation of Presentation and Content

HTML is used for structuring content, CSS is for controlling how it looks.(See this page with the magic of CSS).

E.g. Headings in HTML are designated by h1 thru h6 and display differently.However it is bad form to jump from h1 to h4 based on how it looks. Headings should be used to indicate order of importance. Its easy to change how they look with css and display according to html is totally up to the browser.

<b>bold</b> <-- Bad Web Monkey! No cookies for you.
<strong>strong</strong> <-- We love you little monkey.

Why?

Structure of an HTML Document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<-- document type definition. <!DOCTYPE html> in HTML5, oh shiny. -->
<html>
<head>
<!-- this is a comment -->
<!-- It won't show up on the page, nor will anything else in the head section -->
<title>This is what shows up in the top bar of the window</title>
</head>
<body>
Your page goes here.
</body>
</html>

OK Lets write some HTML

Before We Start: 1,2,3...

There have been various forms of html. Luckily we can ignore everything before 4 (don't even go there). 4 is still kinda messy. Next came xhtml which was a wrong turn. Think of it like your pedantic “friend” that nobody wants to talk to any more but it still keeps hanging around. Now we have HTML5, Oh shiny! which will fill the world with unicorns that shit rainbows and hand out free candy, or something.

Before We Start: Nesting Tags

Tags need to nest correctly. <p><strong>word!</strong></p> not <p><strong></p></strong>

The Basics

Everyday Tags

<h5>
I'm a level 5 header -- headers go from h1 (most important) to h6
</h5>

<p>This is a paragraph with some <strong>strong</strong> and some <em>emphasized</em>text. </p>

<!-- I'm a comment — I'm invisible -->

some stuff<br >break,
followed by more stuff (can be written <br></br> if you are a pedant or <br /> if you are an xhtml pedant).

What is all that stuff doing in my tag soup

<p>: This is a a plain old tag
<p name="special p"> This tag is special it has attributes. These come in all sorts of forms, but the two you need to pay special attention to are id and class. These are the ones used by CSS and can be applied to any tag. Classes are general, as the name suggests, and can be applied multiple times. Id's are unique and can only be used once.

Hypertext — it's magic.

Lets make some linky things.

<a href="http://www.htmlgoodies.com/primers/html/article.php/3478171/HTML-Class-Creating-Links-to-Other-Pages.htm">How to Make a link</a> — Yay! a link. Note there are two parts the attribute (in quotes) is the page you want to go to. The text of the link itself goes between the tags. You can make a a link of anything not just text. Go wild!

Pretty Pictures

Separated at birth?
Jen bushbaby

Let's see how I did that:

<img src="bushbaby.jpg" width="309" height="233" alt="Bushbaby" title="Jen" longdesc="a picture of a bush baby in its native habitat.">
<img src="jen.jpg" width="167" height="233" alt="Jen" title="bushbaby" longdesc="a picture of a bush baby in its native habitat.">

You might not need all the attributes: however you do need src and you should have width, height and alt attributes. Note title is for doing the pop up tooltip thing, not alt. Alt is for accessibility and is much more important.

List of lists

<ul> </ul>
<ol>
  1. <li>and this is an</li>
  2. <li>ordered</li>
  3. <li>list</li>
</ol>

Definition list.
<dl>
<dt>Definition – term</dt>
<dd>Definition – definition </dd>
</dl>

Give it some structure

There are two more tags you will definitely need. These are important in CSS.

The first one you will use a lot, it is the <div> tag. It is used to divide your page into sections so you might see<div id="footer"> (can you guess what this does?)

The second, the <span> tag is used less often. It is used to apply CSS styling to a piece of text within a paragraph. (Remember you can apply CSS directly to a tag -- this will affect its contents if it's say a <p> tag.) So you might see:
This next sentence is is French.<span class="french">Ceci n'est pas une pipe: | </span>

And Finally...

There are a lot more tags. Some of these are good like <code>to mark code</code>, some of these are very bad like frames (Boo!Hiss!) and some of these are much abused like tables. You will have to go learn these for yourself. However you already know much of what you will actually need, and use.

The other thing you need to know about are character entities. These are a way of showing things like punctuation marks, symbols and accents. Most have mnemonic forms such as &amp; for an ampersand or &eacute; for an é. All have a numeric form such as &#8225; ‡ They begin with a & and end with a ; We ♥ html.