My First Page
So we're set? You have your text-editor at the ready (preferably NotePad or TextEdit), you know what all the acronyms stand for, and you want to write something? Great, let's get going.
Let's just go through the steps involved before I actually introduce the code. Today,
- you will write out the basic format, or skeleton, of a HTML page
- you will save it as a HTML file
- you will open it in your browser
- you will smile at the fact that it actually worked
This page was last updated on 2007-05-23
A basic page format
All pages follow this basic structure. Let's start with the first tags you're going to learn.
Tags, eh?
Yeah. They are the things between the <> brackets. I'm sure you've seen them in someone's code before, and if you haven't, right click this page and select 'View Source'. The code behind this page will appear. Have a quick glance through it. Yes, it probably makes no sense, but that doesn't matter yet. See how, later on, there's some text? It's the words you're reading now. Surrounding all that is a load of stuff, all being encased by <>s. That's all the stuff that goes into making this page.
Structure of Tags
Tags follow a common structure too. For example, to make text bold, you use the tag b. So, at the point in your text that you want the bold to start, you just stick the triangle-brackets around that and put <b>, and when you want it to stop, you put </b>. That is an end tag. it is simply the start tag with a forward slash in front of the word or letter. Some tags won't need that end tag, but most do, so don't forget it.
So let's make a page
Oh yeah. Ok, first step. Open Notepad, or any other text editor. Type this:
<html>
</html>
These are the standard start and end tags on any page. Note that when I say 'standard', that means 'you must put it there'. This pair are called container tags because they will have other elements contained inside them.
Now we'll add in the rest of the structure. Modify your page to this:
That complicated looking bit at the top isn't something you need to worry about just yet. It basically tells your browser which version of HTML you're using in your page. You are going to be using HTML 4.01, the most recent version of HTML. Later you may move to XHTML, but HTML 4 is fine for your first few sites.
HTML pages are made up of two distinct parts — the <head> part, and the <body> part. The head part contains things that won't appear on your page. Most of the tags that go in the head part are advanced stuff for search engines and the like, so the only one you need to know is title.
<title> is the text that appears at the top of your screen — in that blue bar. You can type whatever you want in that. No other tags will work, although special characters will. Don't forget to add the title, because without it, that bar will have the URL of your page in it, and that's just nasty. This text will also be used if a reader bookmarks your page, and in search engine listings, so take the time to write a unique title for each page.
<body> is the main part of your page. Everything between those two container tags will be visible on your page. So type something there now. Whatever you want, I don't care. Be spontaneous.
Now your page looks something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>my first html page</title>
</head>
<body>
Hello, I hope you're having as much fun reading this as I had writing it!
</body>
</html>
That's about as complicated as I'm going to make this tutorial. If you want to format your writing, check the next page where you will find all the tags needed to make your page more presentable. For now, stick with saving your page and checking how it looks...
Saving your masterpiece
Saving is a tricky area, and it helps if you know what you're doing on a computer for this part. But even if you don't, do not fret; I'll explain the process thoroughly.
You need to give your document a file-extension, to tell your computer what type of file this is. You are editing the page in a text-editor (at least, you should be), which saves in the format .txt (TeXT file) . You have written some text, and you want a file that is in the .html format. So click File | Save As... Find the place on your hard drive where you want to keep all your pages (I would recommend you create a new folder 
and keep all of your documents together). Then in the box labelled 'save as type' change it to 'all files *.*'. This means that you can save the data (in this case, some text) into any format. So, now name your file wikid.html and click save. Finito.
After you have done this once, if you ever change your code, you only need to press save, not save as, because the computer now knows this is a html file.
Your page's filename can consist of any combination of letters, numbers or _ and - characters. It is a good practice to start the filename with a letter and use lowercase letters at all times. This will make sure that few capitalisation-caused errors will occur by people trying to type your page's address into their browser. You should call your homepage index.html — this will be important later on.
- Question: how come I see some pages named 'something.htm'?
- Well, before more recent operating systems like Windows 95, file extensions were limited to only three letters, hence htm. You could name all your files using .htm as the suffix, but there are so few people with OSs that old that you're probably better off just using .html and being done with it. And for God's sake, don't mix and match. Stick with one format for your entire site.
- Note to users of word processors
- If you're using something like Word or WordPerfect to make your pages (which is a really bad idea), you don't want to be saving all of the editor's values for margins and formatting etc. when you save your html file, as they can't be read by your browser. So when saving your file, make sure to save it as text-only, and only the things useful to your browser will get saved.
Having a look
Well, you've been toiling away on this page for hours, has it paid off? Let's check. Create a new browser window to open it in (while still reading this) — press Ctrl + N. Now, in that new one that should have opened, go to File | Open. Click Browse... and find the file you just saved (wikid.html, unless you were cheeky and called it something else). Click open. Your page will appear in all it's rubbish glory. You did it! Huzzah!
Ok, now smile.
