Setting Out Your Page
This shows you the basic layout of a hypertext document and how to use the common tags. We'll work through a simple page layout, building it up as we go. You'll notice that some tags, such as <CENTER> and <COLOR> for example, use American spellings. Don't let this confuse you, but bear it in mind.
- open your HTML editing program and create a new document. It should, typically, look something like this to start with:
<HTML>
<HEAD>
<TITLE> type Document Title here </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
All HTML documents have opening and closing HTML tags. In between, there is the head of the document and the body of the document and each of these has their own opening and closing tags. The head of the document contains title tags. So, for example <BODY> is the opening body tag and </BODY> is the closing body tag.
If you save this document then look at it in a web browser you will see a completely blank page.
We'll put in the title now and then look at the result. As of now, and to make things a little clearer, any changes or additions will be highlighted in red.
- edit your HTML document to look like this:
<HTML>
<HEAD>
<TITLE> restaurant </TITLE>
</HEAD>
<BODY>
<H1> Alice's Restaurant </H1>
</BODY>
</HTML>
- save your document with a suitable name, for example cafe.htm
- view the document using your browser
The document should look something like this:
Notice that "Alice's Restaurant" is in large text, as we would perhaps expect. Notice also that the document title appears at the very top of the screen on the title bar. This is not the same as the heading which appeared on the page in large letters. It did that because we put it between opening and closing heading tags, like this:
<H1> Alice's Restaurant </H1>
The <H1> tag is for the largest heading and the sizes go from <H1> down to <H6>.
- add the following to your code so that it looks like this:
<HTML>
<HEAD>
<TITLE> restaurant </TITLE>
</HEAD>
<BODY>
<H1> Alice's Restaurant </H1>
<H2> Alice's Restaurant </H2>
<H3> Alice's Restaurant </H3>
<H4> Alice's Restaurant </H4>
<H5> Alice's Restaurant </H5>
<H6> Alice's Restaurant </H6>
</BODY>
</HTML>
- view the page and note the different size of headings
Continued on next page...