My First Web Page

So we're set? You have your text-editor at the ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.

Ok, 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

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 these brackets < >. 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 on a PC, or Simpletext on a Mac. 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 :

Very Important <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>
<title>My First HTML Page</title>
</head>

<body>

</body>

</html>

The smart people would have just copied and pasted that.....

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. It's does not appear on the page itself. You can type whatever text you want in that. No other tags will work, although special characters like punctuation will. Don't forget to add the title, because without it, that bar will have the URL (web address) 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 that makes sense 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/1999/REC-html401-19991224/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...

Next Step> Saving your masterpiece...

Back to Introduction to Infopro