GSAnet Banner Swap

Lesson 3. I am bored. Can we do smoething now?

Yeah, me too. Let's do some stuff. First run your text editor (I talked about them in Lesson 2). Now, write exactly the following:

<HTML>
<HEAD>
<!-- this is a head -->
</HEAD>
<BODY>
And that's a great body! Wow. Give <B>me</B> your telephone number.
</BODY>
</HTML>

Are you finished? All right, now save your file. You should know that every HTML file (this is what it is, I will talk about HTML later) has an extension .html or .htm (for MS DOS systems). So save your file, say, as "MYPAGE.HTML". Please note the directory where you saved the file. You should need it later.

Now run your web browser. Yeah, Navigator or Internet Explorer. If it starts loading a page, just click stop icon. You don't want to waste your time (about time wasting and efficiency improvements I'll talk a bit later, when you're ready). Now go to "File" menu and choose "Open File..." option (or it should be something similar). If you've done everything right, then just find the file you've saved earlier and open it. Now, the browser will display something like this:

And that's a great body! Wow. Give me your telephone number.

Well, are you happy? It's your own web page!

Now, I'll wait a couple of minutes for excitement to die away.

All right. Back to business. I will go through the code line by line. For practical reasons I will show the previous code again, but this time with number for each line. Next time I will use numbers for big examples from the very beginning, but you should know that you should omit them when typing your examples.

01:<HTML>
02:<HEAD>
03:<!-- this is a head -->
04:</HEAD>
05:<BODY>
06:And that's a great body! Wow. Give <B>me</B> your telephone number.
07:</BODY>
08:</HTML>

Line1: <HTML>
It's a start of every HTML document. You will notice that there are many words that look like <THIS>. This is because all commands in HTML have to be in these special brackets. I will leave explanations until later on, for now just take it as given that <HTML> has to be the first line of every HTML document.

Line2: <HEAD>
Every HTML document should also have a head.

Line 3: <!-- this is a head -->
Because for now we do not have anything useful to put into a <HEAD> I've just put a comment inside. A comment is not seen by the browser. You can write anything you want in it, your date of birth, CV, poems or anything else. Browser will not display it.

A comment will always start with "<!--" and finish with "-->". We will talk about comments later, for now again, just accept it.

Line 4: </HEAD>
That's the end of <HEAD>. Again, no explanations needed for now.

Line 5:
Well, you might say there is no line 5! It's just a blank line! Oh, no! You're wrong this time. If you have no experience in programming, you won't know how important blank lines are. Blank lines do not make any difference to a browser. So you can put as many as you want.

Why? Well, if your "code" has more than 100 lines (and most HTML documents have more!), it can be extremely difficult to understand what you yourself have written. Just look at this example:

<HTML><HEAD><!-- this is a head --></HEAD><BODY>
And that's a great body! Wow. Give <B>me</B> your telephone
number.</BODY></HTML>

This code will result in exaclty the same output as the previous piece of code. Because I did not change anything apart from joining the lines together. But the effect is that code becomes unreadable and ugly. So do not be too lazy or too cautious and put as many blank lines as you want. We will return to this later on, but it is good to have a good start.

Line 6: <BODY>
If you have a <HEAD>, you also have to have a <BODY>.

Line 7: And that's a great body! Wow. Give <B>me</B> your telephone number.
This attempt at a joke might seem to have no real value to web designer, but it does. You must have seen that me is written in bold when you display your web page in a browser. The reason for this is because of two commands: <B> that switches bold on and </B> that switches bold off. Simple? Yeah, it is. Most HTML (apart from its name and some obscure functions) is simple.

Line 8: </BODY>
That's where body ends.

Line 9: </HTML>
And that's the end of your HTML.

Well that's it. Now you know a bit about HTML, you can play with it. For now you can only play with body. I mean play with <BODY>. Try changing B to I in <B> and </B> commands. See what happens. And if nothing happens or something weird happens, do not worry. Sometimes strange things happen if you're a beginner.

In the next lesson we will talk about more commands, a little bit of jargon and about some problems you might have experienced changing <B> to <I> and </B> to </I>.

We are currently busy working on the next lesson, so come back very soon, when we are finished.

[ to main menu | to design R'us index ]