Separated at birth?
<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>
HTML is used for structuring content, CSS is for controlling how it looks.(See this page without 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.
<!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>
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.
Tags need to nest correctly. <p><strong>word!</strong></p> not <p><strong></p></strong>
<h5></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,<br></br> if you are a pedant or <br /> if you are an xhtml pedant).
<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.
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!
<a href="http://google.com">How to Make a link</a><a href="http://freegeek.org">Free Geek</a>: External link, N.B. you must have the whole http:// bit in.<a href="../index.php>click here</a>: Relative link to local page — not such a good idea (what if you want to move the page you are writing?). Also click here is a terrible idea,mystery meat links are bad, mmmkay. Make your links meaningful, folks, and don't assume everybody is using something clicky.<a href="/index.php>Home</a> — absolute path with meaningful link, better.
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.
<ul>
<li>This is an </li><li>unordered</li><li>list</li></ul><ol>
<li>and this is an</li><li>ordered</li><li>list</li></ol><dl>
<dt>Definition – term</dt><dd>Definition – definition </dd></dl>
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>
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 & for an ampersand or é for an é. All have a numeric form such as ‡ ‡ They begin with a & and end with a ; We ♥ html.
On to CSS