HTML Tutorial #1
HTML is shorthand for HyperText Markup Lannguage and was originally devised for the publishing industry. It has evolved into a many headed beast of a language being pressed into service to do things it was never designed to do to the point where it has become almost a computer programming language in it's own right although at it's heart is a simple language that is not too hard to grasp. Of course, some might say that learning HTML is unnecessary given the plethora of web page editors that are available either for free or as full-blown professional packages costing hundreds of pounds. When I started learning HTML back in 1995, such tools simply did not exist and the best that could be obtained was some extensions for Microsoft Word that made it a little easier to use (but not by much). Then it was a case of buying a book, opening up Notepad and getting your hands dirty doing it the hard way. However, I have found this knowledge still of immense value particulalrly when faced with the mountain of code some editors produce in order to display the simplest of pages. The more code then the longer the download time which it is best to keep to a minimum in order to prevent your prospective reader from getting bored and going elsewhere. Some editors also have lots of snazzy effects that can be added usually involving Javascript which can be hell to debug if the editor doesn't get it 100% right (and very few do). Here then is a helping hand to try to help you understand what is going on behind the scenes and why certain things happen the way they do seemingly contrary to common sense.
Enough intro. Here some HTML code for you to look at.
<HTML>
</HTML>
Copy this code into a new document using Notepad (or a similar editor) and save it as TEST1.HTM in a convenient folder (I suggest you create a new one perhaps called WebPages or something similar). The file name can be anything but it must end in either .HTM (if you're using the old DOS conventions) or .HTML but it doesn't matter which although it would probably be wise to be consistent. Double-clicking the newly created file in Windows Explorer or opening it using Internet Explorer or Netscape should present you with (cue drum roll)...a blank page. Not very exciting I know but there is an important lesson here. If you see any or all of the above code in the browser then you've left off someting like one of the < brackets or the / in the second expression or Notepad has done the dirty and added .txt to the end of the name. So what do these cryptic remarks mean? Simply that the browser should expect a document formatted in HTML code otherwise it will interpret it as straight text. The interpretation of the HTML code and it's display is called rendering. Here's some more.
<HTML>
Hello
World!
</HTML>
Save it (either as a new file or use the existing name) and refresh your browser. You may be seeing something you didn't expect. It has rendered it all on the same line. Not only that but it has added a single space between the two. This is one occasion when the browser is actually doing something unexpected but which happens to be what we want. But what if we want to display on two lines. You use this:-
<HTML>
Hello<BR>
World!
</HTML>
The extra code meaning BReak produces a
Carriage Return and Line Feed.
Changing it to the following:-
<HTML>
Hello<P>
World!
</HTML>
produces a blank line between the words. This is because
the P stands for Paragraph.
Note the use of the square brackets which must enclose
each command as it will be shown as text and not
interpreted as a command. Just one last bit of code for
this session.
<HTML>
<CENTER>
Hello
World!
</CENTER>
</HTML>
This will centre the text in the middle of the browser window and will remain so even if the browser is resized (try it). I am tired of finding web sites that retain a fixed size expecting a certain resolution (usually 800x600) to be present and presenting ugly scroll bars if it isn't. And yet as this simple bit of code shows, HTML can readjust itself no matter what resolution is being used. I'll be harking on about this in later tutorials. Two other things to note in the code. First that the word center is the American spelling and the version we use on this side of the Atlantic won't work even if you're using a browser with British English settings. The other is that center is shown twice, the second showing a / slash at the front. The slash denotes that the centering has been switched off otherwise subsequent code will also be shown centered which may not be desirable.
That's it for this tutorial. Have a go at creating larger text files and see what happens when it gets too wide for the window (hint: it word wraps) and what happens if you try to add more than one space between words (hint: you can't!). Until the next time...
Please eMail me at: nickjc@nickjc.co.uk