1. Turn on your computer. 2. Open your Web browser, then shrink its window to about half your screen. 3. Open a text editor and again shrink it to about half your screen.
Try to make sure that you can see both the browser window and text editor window simultaneously - because you want to jump back and forth between the two. 4. In the text editor, carefully write the following text to create a very bare-bones example of HTML. Type the tags such as exactly, in upper or lower case - but you don't have to copy all the rest of the text exactly (e.g. substitute your name for "My first. . .")
This is a level-one heading
Welcome to the world of HTML. This is ordinary type but this is bold stuff and this is plain type again.
What does it all mean?
the
tag tells the browser that the title has ended.
the
tag (numeral one, not an "i") tells the browser "use a size one headline". To get a size 2 headline, you would have asked for
; the
tag switches off the
headline
the tag makes text after it go bold. Don't forget the tag to turn off the bold effect.
5. Save what you've typed so far. Make sure to save it as ASCII or raw text. If you're using a PC, make sure the file name has ".htm" at the end so that Windows (which can get a bit narky) recognises the file as a Web page. And remember the name of the folder in which you saved it. 6. Now click on the browser and open the very same file, using an option in the FILE menu called "Open File" or "Open Local" (not "Open Location"). Hey presto - a Web page is born! 7. Next we'll jump back to the text editor. From now on, each time you SAVE the document in the editor, you can then jump back to the browser and hit the REFRESH or RELOAD button to see the changes take effect.
Strictly speaking, the above bit of HTML needs some elaboration - add the following few extra lines (to make them stand out from the ones you've already typed, I've put them in italics below):
This is a level-one heading
Welcome to the world of HTML. This is ordinary type but this is bold stuff and this is plain type again.
The tag is fairly obligatory. It tells the browser to expect a HTML document, a Web page. The
tag is about the page's "header" information (such as the title to display at the top of the screen), and the and tags mark out where the "body proper" of the page starts and finishes.
8. Again, do the three-stage process: (a) hit SAVE; (b) switch to the browser and hit REFRESH to see the changes; (c) go back to the text editor.
9. But now let's get a bit fancier: change the
tag to the following (and be careful about where the spaces occur):
10. Again do the save/refresh trick to see the changes. Now the background should be pitch black, and all the text in white. Or you could have tried something a bit more radical such as
11. Now let's turn our attention just to the main body of the text - i.e. to the area between the
tag and the tag. Type a few more paragraphs of ordinary text, with a few RETURNS in between them. Then save it and hit REFRESH in the browser. Notice anything? Yep, they all appear as one long paragraph, despite all those carriage returns. 12. To create paragraphs in HTML, you have to insert a tag. Unlike all the tags mentioned so far, it doesn't need a closing tag - this can always be omitted.
So HTML only recognises a new line when you make it explicit - by using the tag for a new paragraph (two lines down), or its close cousin the
tag (which gives one line break). It doesn't need a closing tag either - nor does
(which creates a horizontal rule - a nice line across your page).
These are among the few exceptions though. Most tags have to have closing tags. 13. Now let's turn the document into a real hypertext. Let's link to somewhere else. Again staying somewhere within the main body of the text, carefully type the following code:
Try clicking your mouse on this nice link to go to RTE's Web site .
Whatever text you put between the tags (e.g. this nice link) is highlighted by the browser as a clickable link, the first tag contains the actual Web address - another site perhaps, or another one of your own growing number of pages - that the user will be transported to once they click on it. The tag turns off the anchor and the "normal" text resumes. . .
What does it all mean? Taking the anchor's elements in turn,
14. And off you go. Try altering the link - it can be to any other address or page on the Web, but obviously any external link won't work until you go online.
Next week we'll begin to look at how to make much smarter and more elaborate pages, and how not to design a Web page. In the meantime you'll probably find that this Webmaster business starts to become a tad addictive. . .