Hyper Text Markup Language
HTML is basically just a code that allows anyone to display information on a computer. And it’s a pretty simple code. Anyone can create a document that will be read by any computer (well, any computer that has a browser – but your computer obviously does or you couldn’t be reading this) in just a few minutes with a minimal amount of instruction. What does that mean in English? Well, let’s do it – let’s create a web page!
First, some basics
All HTML is coded using the ” < ” and ” > ” symbols – each instruction must be enclosed in those 2 symbols. All HTML documents must have (at least) 3 parts. First, the opening statement that declares it to be an HTML document: <html>. Second, a “head” section where information to the browser will be placed that won’t be displayed to the user: <head>. And finally the “body” where the actual information you want to display to the user will be placed: <body>. And each instruction, once opened, must be closed to tell the browser that you’re through with it. You close a statement by placing a slash between the < symbol and the statement: </html>. What all that looks like in practice is here:
<html>
<head>
</head>
<body>
</body>
</html>
This is a valid HTML document and can be read by any browser – it just doesn’t say anything…yet. The way a browser would read this is <html> tells the browser that this is an HTML document. <head> informs the browser of thing it need to know about this document – it this case, nothing…yet. The the head section ends (</head>) and the <body> tag tells the browser that here is the information to be displayed. Again, in this case, nothing… yet. Then the body section ends (</body> and finally the </html> tells the browser that this document has ended. That doesn’t sound very complicated, does it? An opening HTML statement, a head section to inform the browser and the body section that contains the actual information. And all of them closed. Sounds to me like we’re ready for…
Your First Web Page
The mechanics of creating a web page are just as simple – use a text editor (something simple like Notepad, for instance – you’ll want something that saves your document without adding any special coding to it, so you shouldn’t use a word editor like MS Word or Word Perfect). Type in the example I showed above (do you know how to highlight and copy?). Then, in the body statement, add an opening statement – <p> (which you can think of as standing for “open a paragraph”) and type the words “My First Web Page!” (without the quote marks) and end it with the close paragraph statement: </p>. Your page should look like this:
<html>
<head>
</head>
<body>
<p>My First Web Page!</p>
</body>
</html>
That’s it. You’ve created your first web page. To make it useable you must save it somewhere as an HTML document. For right now, I’d suggest saving it as “myfirst.html” (no quote marks) and saving it in the “My Documents” folder on your computer. Then click where it says “file” on your browser’s menu, select where it says “open” and click that. You’ll get a menu box asking which file you want to open, click on “Browse” and go find your new file, double click on it then select OK on the menu box. You should see your first web page.
Pretty satisfying isn’t it?
Just so you’ll understand what the “head” section is for, lets add some information there that the browser can use. The most basic would be the title of your web page. You’d add that by adding the statement <title> inside the head section (between <head> and </head>), then type in whatever you want the title to be. Lets be creative and call your first web page… ummm, I dunno – how about “My First Web Page!” (again, no quotes). Then close the title: </title>. Save your results -which should look like this:
<html>
<head>
<title>My First Web Page!</title>
</head>
<body>
<p>My First Web Page!</p>
</body>
</html>
and look at it with your browser. Nothing’s really changed, but you should now see your new title in the title bar of your browser (the very top, left of your browser window).
That’s It
We’re not going to try and write a HTML tutorial – that’s already been done, and done much better than we could do. Our suggestion is to try Joe Barta’s site and go through his tutorials – starting with the HTML one. We think his tutorials are great, but if you don’t think so, Google “HTML Tutorials” and you’ll find a bunch of them to try out. This is all free, so all you’re investing is your time and, in our humble opinion, any time you send improving your mind is time well spent.