In this next lesson, we're going to break down that code you inserted, and explain what it all means. To begin, let's take a look at the basic HTML skeleton. The HTML skeleton is at the heart of most web pages on the internet. It is the starting point of web design, the basic code that is fleshed out to create something new and (hopefully) wonderful.
To see this skeleton, click on File > New. When the Background Options dialogue box pops up, leave it on the default "None" and just click the OK button.
Your editor will look like the one below:
- Highlight the part "Insert Your Title Here"
- Click on Edit > Cut
We'll see what the Title tag does soon. But as the words "Insert Your Title Here" are not part of the basic HTML skeleton, we can chop them out. What you're left with is this:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
</HTML>
And that is the HTML skeleton. That is what is at the heart of most pages on the internet. Notice that there are two of everything: two HTML's, two Heads, two Titles, and two Body's. That is because Hypertext Mark-up Language is written in Tags, and Tags come in pairs (there are one or two tags that don't come in pairs, but most of them do).
The first pair of tags are the HTML tags. You put one HTML tag at the top, and one at the bottom:
<HTML>
</HTML>
Two things to notice there. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page.
The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and again your web page can really be messed up.
The next pair of tags are the HEAD tags: <HEAD> </HEAD>
Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>.
The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words "Hello World" on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because "Hello World" is direct text, and not a special instruction that the browser can understand.
The Title Tag
A special instruction your browser can understand is the TITLE tag: <TITLE> </TITLE>.
The Title tag always goes in the HEAD section of the HTML skeleton. The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does. As an example of what the TITLE tag does, examine these screenshots from the top of Internet Explorer:
Remember when we chopped out the words "Insert Your Title Here"? Well, the first of the screenshots is what will happen if you don't chop out the words "Insert Your Title Here". The second screenshot has the words "Insert Your Title Here" chopped out and replaced by "All Right - I've inserted it". The third screenshot is what happens when you have nothing at all between the two TITLE tags. You'll quite often see web pages with "Untitled" right at the top of the browser window. If you see one of these on the internet, you know the web designer has not put anything between the two TITLE tags.
The final, and most important part, of the HTML skeleton is the BODY section.
In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags.
Fortunately, you won't have to type out the HTML skeleton yourself, because the software will do it all for you. But you will be making changes to the HTML skeleton, and it's important you know what it is you're amending.
So to recap, here's the important points again:
- HTML is written in Tags
- Tags usually come in pairs
- A Tag is a word surrounded by angle brackets, e.g.: <BODY> </BODY>, <TITLE> </TITLE> , <HEAD> </HEAD>, <H1> </H1>
- A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward slash
- The HTML skeleton is the foundation on which most internet pages are based
In the next lesson, we'll go through what we did to flesh out the skeleton.
