Coding - HTML Express tutorial
Of course, these pages are aimed at teaching you how to handcode, not how to fix ScreamWeaver code...
This tutorial comes in two main parts. The first one addresses very basic ideas about coding, what HTML is, and how it functions. Let's call it "grammar and syntax".
The second one briefly introduces a minimal set of HTML tags to get you started. Let's call it "vocabulary".
Depending on what your prior knowledge is, I'll let you choose where you want to start. The first part was written with the "absolute beginner" in mind. Please tell me if anything is unclear for you.
You might also want to have a look at Dave Ragett's Introduction to HTML.
HTML and CSS: introduction - grammar, syntax
What is a web page made of?
So what are those "web" files made of? Mainly, text. Text with some "codes" or markup enclosing blocks of text to tell the browser what to do with them.
Every single page you encounter on the web can be viewed in Notepad, Simpletext or any "text-only" editor you may have on your system. The extension of the file doesn't change a thing to that.
More important, every single page you find on the web can be written in a text editor like notepad.
Lots of people think you need to use complicated programs like DreamWeaver or Frontpage to make a web page - but that isn't true. Moreover, it isn't a good idea to use them. They spit out some truly amazingly disgusting code.
Your browser should allow you to "view source" of any page you are looking at. Go see.
If you look at the source of a web page and you see only line after line of obscur HTML stuff, you can be near to sure that the page was done with one of those graphic HTML editors.
That's not what an HTML page is supposed to look like.
I'm not saying those editors are always bad - there are times when it makes sense to use them. But they are definately not a tool for beginners.
See those little <p> thingies? Those are the tags. That one was a paragraph tag, an opening one. It tells the browser that the text which follows is a "paragraph". And then it reaches the paragraph closing tag </p> and knows it's the end of the paragraph.
So basically, that's how tags work. Simple, isn't it?
Two main sorts of tags
OK, let's get into more fancy stuff. You have two sorts of tags: inline tags and block-level tags.
Block-level tags are like the paragraph tag: that means that the browser will insert a line-break before the tag, and another one after it. Like that the text in between the tag comes in a block.
Inline tags are like the tags I used in this paragraph to make the text look bold or italic. You don't get a line-break before or after them, and they have to be "inside" a block-level tag (in this case, they are inside the paragraph tag).
Some grammar rules
Now, there are some "grammar" rules about these tags. For example, if you open a tag, then you have to close it at some point (there are one or two tiny exceptions to this, but for the moment you can take it as an absolute rule).
Another rule is that if you open a tag inside a tag, you have to close the second tag before you close the first one, like this: <a><b>text</b></a>, and not: <a><b>text</a></b>. That is called nesting tags.
Attributes
Most tags can take attributes. For example, the "anchor" tag <a> which is used to create hypertext links takes the attribute href which indicates the URL that the link brings you to when you follow it.
So if you want to create a link to my site, it would look like this:
<a href="http://climbtothestars.org" title="This is Tara's site!">Climb to the Stars!</a>
You can see that I have also used another attribute in the example above: title. The text in the title attribute will show up in certain browsers when you move the cursor over the link.
One important thing to remember about attributes is that you should always quote their values - even if it works when you don't.
Structure (HTML) and prettiness (CSS)
As you will see more precisely in the vocabulary section, HTML tags allow you to mark up the structure of your documents.
This is a very important point.
At the beginning, HTML was used by the scientific world - and they didn't really care that their documents looked ugly. But when the web started becoming popular, our dear browser makers (Netscape and Microsoft) started introducing tags that allowed some control over the presentation of pages - like the dreaded <font> tag.
Presentation tags should be avoided, for the simple reason they don't show up the same in different browsers. Plus, we have a much better solution now: CSS aka Cascading Style Sheets.
If you have already used Style Sheets in your word processor, you'll find that using HTML and CSS is very similar. If you haven't, here is an introduction to style sheets in general (exemplified with Microsoft Word).
The reason I was introducing this here is that you apply styles to HTML tags by using an attribute: class="". Just keep that in a corner of your mind for the moment.
You can learn more about CSS in the CSS basics tutorial - but you need to learn HTML before jumping into CSS.
Structure of an HTML document
Although you can just write some text, stick tags around it and have the browser display it (more or less) correctly, that's not the way you're supposed to do it.
You see, HTML is only one of a bigger family of languages - so we have to tell our browser that what we're feeding it is an HTML document. Plus, there are different versions of HTML.
So here is the basic structure of an HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>[page title]</title>
[meta tags]
</head>
<body>
[visible page content]
</body>
</html>
*Phew!* - that was the big bit. Now for the explanations.
The first line is called the doctype declaration. It says which version of HTML you are using.
Then you have the <html> tags. They say that the document is written in HTML (yeah!).
And the HTML document is divided in two parts: body and head.
The body is the place all the visible content goes. Everything you see in the browser is contained between the <body> tags.
The head contains "meta-information", meaning: information about the page. The only visible part will be the contents of the <title> tag, which shows up at the top of your browser: it is the title of the page.
Don't worry about the other meta tags now.
HTML: some basic vocabulary
As CSS takes care of the "presentation" part, you will only need a very limited set of tags to be able to code an HTML document. If you have already used Style Sheets in your word processor, you'll find that using HTML and CSS is very similar. And lucky you, I wrote an introduction to CSS some time back...
Headings and paragraphs
So, the first job of HTML is going to be to structure your text. As you're writing for the web, you'll want short paragraphs and lots of headings and subheadings.
Headings are simple. Start with headings level 1 <h1>Heading 1</h1> for the most important heading level on your page, and then go down using <h2>, <h3> etc... down to <h6> (if you really need to go that far!).
The body text will be enclosed in paragraph tags: <p>This is a paragraph.</p>
If ever you need a line-break inside a paragraph (that is, a line break without a blank line), you can use the <br> tag. That one is special - it doesn't need a closing tag. Just stick it in where you would hit "return" on your word processor.
Anchors and inline tags
Making a link
Now, what happens when you want to create a link? You use the anchor tag. We've already seen higher up what a link to my site would look like:
<a href="http://climbtothestars.org" title="This is Tara's site!">Climb to the Stars!</a>
If you want the link to open in a new window, you just insert the attribute target="_blank" in the tag, like this:
<a href="http://climbtothestars.org" title="This is Tara's site!" target="_blank">Climb to the Stars!</a>
Easy, uh?
The target attribute is not valid in xhtml strict, though.
Different types of urls
The thing you put in the href="thing" attribute is called an url - it's the address of the web page you are pointing to.
If you are linking to a site outside yours, you'll have to write the whole url: http://www.whateversite.com/.
Inside your site, you have two options:
- server-relative urls
- relative urls
The server-relative url is what you should use in most cases: you write the path of the page you are linking to starting with the server root. For example, to point to the present page, I write /coding/html.php instead of http://climbtothestars.org/coding/html.php. It saves typing and allows a site to be "moved" to one domain to another without too much hassle.
The relative url is relative to the current directory. That means I can write guidelines.php to refer to my guidelines document.
Use with caution... do not abuse!
Anchor names
One other nice thing you can do with anchor tags is create a link to somewhere inside a page. You do that using the name attribute. For example, let's say I want to create a direct link to this little sub-chapter on anchors. I would insert <a name="anchors"></a> somewhere in the heading line, like this:
<h3><a name="anchors"></a>Anchors and inline tags</h3>
And if I want to create a link to that specific place, I use the following url: /coding/html.php#anchors
More inline tags
Now as I said, the anchor tag is an inline tag - that means there is no line break before or after it. There are a couple more useful inline tags you might find handy:
<strong>makes words strong<em>puts words in emphasis<code>formats your text ascode
There are more of them of course, but I'm not here to swamp you with useless stuff.
Lists
Another useful tool you will need is the list. You have different types of lists:
- unordered lists
- ordered lists
- definition lists
If you want to change the type of bullet or numbering in a list, use CSS.
The important thing with lists is always to remember to close the ending tags. I recommend writing the end tag as soon as you have written the opening tags - like that it's done.
Another thing is that you can nest lists. That means you can put a list in a list. It's a rather straightforward thing to do.
Unordered lists
Unordered lists are bulleted lists, like the one you can see at the end of the last section. The code for them looks like this:
<ul>
<li>first list item</li>
<li>second list item</li>
<li>third list item...</li>
</ul>
Ordered lists
Ordered lists? same thing, except that instead of bullets you get numbers or letters, and instead of <ul> you get <ol>... see:
<ol>
<li>first list item</li>
<li>second list item</li>
<li>third list item...</li>
</ol>
Definition lists
Definition lists are a little different. They are useful for definitions (!) - but also for listing links with comments, or even questions and answers. Here is how they work:
<dl>
<dt>definition term 1</dt>
<dd>definition description 1</dd>
<dt>definition term 2</dt>
<dd>definition description 2...</dd>
</dl>
Tables
Tables are the trickier bit, but luckily, they are becoming much less indispensable (unless you really need to present data in a table). If you wanted to use your tables for layout purposes, try doing it in CSS instead. It's much more powerful, accessible, easy, and everything. Really.
Note on xhtml
Maybe xhtml should have been called html5 - it is not some "new language", which requires one to "move away" from html. If you wish to code in xhtml, all you need is here.
Just replace your <br>s with <br />s, your <img>s with <img />s and your <meta>s with <meta />s - and drop that target="_blank" attribute.
Then you just need to adapt the DOCTYPE and complete the <html> tag of your document, and validate!
Here is a more detailed article on how to manage the transition from HTML to XHTML [evolt]. You might also find the tutorial at w3schools useful, as well as Rated XHTML at A List Apart.
Fresh off the press, also at A List Apart: Better living through XHTML.
Français
En attendant que cette introduction soit traduite en français, voici en vrac quelques liens francophones utiles.
- Dreamweaver ou Notepad? - esquisse de débat, éditeurs WYSIWYG vs. balisage "à la main".
- Specifications W3C - HTML4.0, CSS1, CSS2, et bien d'autres
- Pompeurs Associés - traduction d'articles
