'My first page' - a basic HTML recipe
[August 2008] Could you follow a recipe to cook scones? If so, read on.
A lot of tools these days try to protect people from HTML — that's the coding that turns text into a web page. But even if you're using an easy publishing system, or a blog, having a bit of a grasp of some of the basics of HTML gives you more knowledge, more power and a greater ability to produce great results. And the basics are not hard. If you can follow a recipe to make scones then you can use some basic HTML.
The Basic Starter Kit
Here's the world's most basic web page. Copy the following text and paste it into a document using a text editor such as Notepad on Windows or TextEdit on Macs. Save it on your desktop with the filename: page01.html. Do not under any circumstances use a word processor such as MS Office, because it inserts invisible weird characters that later show up in odd places.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>My first paragraph. </p>
</body>
</html>
And yes, most of it is lower case.
Now, a real web designer will fall over laughing at this and probably expostulate that you need all kinds of other coding for even a minimum web page. That's what I'd do, if I were reading this instead of writing a 600 word article. But this is the bare minimum you need, to start understanding HTML. The stuff that's important for us is what comes between <body> and </body> — the body of a web page. Just ignore the rest (but don't leave it out).
Open the Web Page
Now that you've saved the file page01.html on your Desktop open up a web browser: Internet Explorer, Firefox, Safari, or whichever one you use. Go to the File menu and choose a command like Open File. Choose page01.html and open it into your web browser.
Your first web page will be displayed. It's a bit plain, and bland, and raw, but it's a start, and you made it. It should say: "My first paragraph.". If it doesn't, double check what you've typed against what's written here. All those angle brackets and things should be identical.
Change the Web Page
Go back to your text editor where page01.html should still be open (or open it again). The HTML tags (codes) <p> and </p> show where a paragraph starts (<p>) and stops ( </p>). The slash in the second tag shows that you've 'closed' the paragraph. Click after </p> and type another pair of paragraph tags: <p> </p> .
Now click between the two tags you've just added and type another paragraph. Here's how that section of my page looks now:
<p>My first paragraph. </p>
<p>My second paragraph uses fake words
to make it stretch over a few lines: Lorem ipsum
dolor sit amet, consectetuer adipiscing elit.
Curabitur gravida. Donec rutrum. Nunc interdum
lorem eget nibh ullamcorper vestibulum. Integer
nisi. Pellentesque id orci vitae sem dapibus placerat. </p>
Check your coding
Save your document and go to your web browser. Either click the Refresh / Reload button or follow the earlier steps to open the saved file. Your web page should now have two paragraphs.
Emphasise a few words
Just one more thing for this starter recipe. You may feel it's pretty important that this is your first web page, so let's emphasise that word. Bold may leap to your mind as formatting that shows something is important, but other techniques sometimes feature on websites too, such as red, or upper case, or larger text, or italics. How you show a word or phrase as emphasised is between you and your web designer. What you need to do in the HTML is show that the text should stand out somehow on the grounds that it's emphasised.
You need to code it as being 'strong' (emphasis). Most web browsers will automatically use bold for that, but a web designer can make the web browser use another technique.
Here's what you do — you use the <strong> tag, like this:
<p>My <strong>first</strong> paragraph. </p>
Save your web page again and again refresh your web browser. You should now see that the word 'first' stands out.
Now you're coding!
In the next Tip I'll show you how to add some headings and a link. (Headings tip for the adventurous: experiment with these: <h1> </h1>, <h2> </h2>, <h3> </h3>).
Panui tips contributed by Miraz Jordan, http://knowit.co.nz