Copyright Michael Karbo, Denmark, Europe.
1. Tags – make it work
The real genial thing about the HTML format is that it written in pure text. This means that the individual HTML file only consist of letters, numbers and other symbols that anyone can read. So it does not require any special program or any decoding to see and manipulate the content in a HTML document.
The mentioned tags determines where and how the home page will appear. Here you will a very small introduction in this subject. Read it thoroughly, since it is a very central subject.
A HTML code
The individual tag (HTML code) has a name. The name is written within a couple of < and > symbols. As an example it could be:
This HR (Horizontal Ruler) code causes a horizontal line to be placed where is the code is located.
But notice that the code is written inside the <> symbols. These symbols say that this is a HTML code, a tag. The browser interprets anything within these symbols as codes that need to be interpreted and worked on!
Figure 2. The browser needs to interpret the HTML codes so they will work in the home page.
See the effect
Let me show you a couple of examples of HTML codes. First I place the <HR> code in a home page document.
You can see the text and the codes here:
When this bit of text with codes appear in the browser, it can appear as shown in the figure below.
First come a line with four words, concluded with line break (caused by the <P> code). Then come the <HR> code, which results in a horizontal line. That is followed by another line break and a couple of more words:
Figur 3. A part of a HTML file, as it appears in the browser. Notice the horizontal line between the two texts. That is a result of the <HR> code.
Another example
So the HTML document is actually ordinary text ”spiced” with codes. The codes can format the text in various ways, but they can also be used for many other things.
In the following example I will make a very simple page. It contains four words followed by a photo. Here you see the code for the page, actually that is all it takes to make a home page:
Figure 4. The content of a HTML document.
Here you see the screen image that the browser creates from the HTML document:
Figure 5.The browsers interpretation of the code in Figure 4.
Look at the code
Let us study the code in Figure 4. There is really not much to it, so we should be able to understand it. We take it ”bit by bit”.
The top section reads:
<HTML>
<HEAD></HEAD>
The very first code <HTML> simply indicates that it is to be understood as a HTML document. Next comes the so-called HEAD section, which in this case is empty.
The HEAD section is always found in the top of a HTML document, where it can include various information about the home page, such as who the author is.
The HEAD section begins with the start code <HEAD>. The idea is that it should contain some text or other codes, but here there is none. But the HEAD section concludes with the end code </HEAD>. So there must be a start- and end code in this code. The two codes are identical, except for the slash in the end code:
<HEAD> |
Start code |
</HEAD> |
End code |
That is how some HTML codes are; they consist of two halves, in between which there can be some text or other contents.
Can you see in the document that there is nothing between the two HEAD codes? Later in the book you can read more about basic construction of HTML documents.
BODY and BASEFONT
The next code block in the example reads:
<BODY>
<BASEFONT FACE=”Arial, Helvetica, Sans Serif”>
Here starts the so-called BODY section, which actually is the whole home page. Look for yourself in the bottom of Figure 4 – the BODY code ends there, can you see that? The end code reads </BODY>.
In this case I selected the Arial font for the home page example. You can indicate fonts in several ways in a HTML document; here you can see that I use the BASEFONT code. That selects the base font, which is the font which prevails if nothing else is selected in the document.
You have the option to select more han one font. Those could be the Arial, Helvetica and Sans Serif fonts, as I have done in the example. The advantage of this is that the home page must be visible on many types of computers. Remember it is the computer with its browser and operating system that creates the screen image for the user who needs to read my home page.
Anyone who has Windows has also the Arial font, but Macintosh and Unix users may not have. Therefore two similar fonts are listed, which (hopefully) can be interpreted by other computer platforms.
The contents of the page
The BODY code (see still Figure 4 on page 7) starts the large section that has the actual home page content; that which is to seen in the browser. My example has the following content:
This is from Venezia:
<P>
<IMG SRC=”venezia.jpg”>
The first line is pure text, which is to be shown on the screen. There is no code in that line. Therefore it is shown as text on the screen, as you also can see in Figure 5. Then comes the code <P>, which causes a line break (actually an empty line). The P stands for paragraph.
After the empty line comes the picture. That is inserted with an image code. IMG SRC stands for image source. The image source is a file name (venezia.jpg), which is indicated in the IMG code. Can you see that?
Also take note, that we only use lowercases for file naming (venezia.jpg instead of Venezia.JPG).
The end code
The last two codes in the HTML document are:
</BODY>
</HTML>
They are both end codes as indicated by the / first in the code). Naturally the end codes are linked to the corresponding start codes in the beginning of the document.
Error possibilities
The IMG code contains the name of the image file, but often also a reference to what folder holds the file. In the case in Figure 4 it is expected that the image file is in the same folder as the current HTML document.
If the image contrary to expectation is not found in that folder, then of course the browser can not show the image. There must be a spelling error in the reference; the file must be named precisely as indicated in the code.
If there is an error, it will result in an empty field in the browser window where the image should have appeared:
Figure 6. A typical error in a home page: The picture can not be shown. Either it does not exist, or there is an error in the HTML code.
Also there is a significant difference between lower and upper case letters when we talk about web. It does not work if you use upper case in the file name and write it in lower case in the HTML document (and vice versa).
My clear advice is: always use just lower case in naming files and folders. Then you avoid this type of error.
Do I have to write all these codes?
Now I have shown a couple of examples of codes, so you might think that you have to write them yourself, codes symbols and all. Of course you could do that, but fortunately we have programs that will do a large part of the work for us.
Actually you can create lots of home pages without knowing or writing very many codes! You will see that soon.