2: Page Layout
First I'm going to talk about the META tag. It goes in the HEAD area of your web page, and it can be very useful. I've used it in these documents only to specify an author (me, of course) and some keywords for search engines to index my page by. Basically, meta-data is data about the document, rather than the data in the document. Meta-data in a page usually consists of two parts: name and content. Frex, the meta tags in this page look like this:
<META name="Author" content="janra">
<META name="keywords" content="HTML, tutorial, 4.01, strict, structure">Meta-data can also have other parts, like 'lang', which tell the browser what language the document is written in. Another useful one is 'scheme', which provides context for the information in the meta-data. Frex, if someone used the META tag:
<META name="date" content="5-7-99">then would that mean 5 July 1999 or 7 May 1999? An addition of scheme="Day-Month-Year" to the META tag would make it clear which one it was. For simple pages and sites, though, an author and a keyword META tag is probably sufficient. If you're designing a site more ambitious than that, you want more help than this humble
tutorial can provide!
Next up: the LINK tag. This also goes in the HEAD portion of your HTML document. It can be used to specify links for your document - like 'back', 'start', 'index', and so on. It can also be used to link to a stylesheet or script, or a printer version of the page. Frex, I used the following LINK tag in my page:
<LINK rel="stylesheet" type="text/css" href="int-style.css">This tells your web browser when it opens my page that there is a stylesheet waiting for it, of type text/css at the location specified by href. Then your browser will (if it's stylesheet capable) go looking for that stylesheet.
I also have another set of LINK tags:
<LINK rel="Index" href="intermediate.html">This one (and the 'Next' and 'Previous' ones) tell a search engine where to go for the index to this set of pages. Also, in lynx, they are placed as links along the top of the page.
And finally (for this page) is the STYLE tag. Yup, stylesheets. This tag is for defining stylesheet attributes for the one page. I haven't actually used it in this tutorial, because I've used a separate stylesheet document to give all pages the same style without having to type it out each time. If you wanted to make a simple stylesheet that turned all H1 headers green and centered them, you would include the following code in the HEAD of your document:
<STYLE type="text/css">
h1 {
color: green;
text-align: center
}
</STYLE>You'll notice that between the start and end STYLE tags is the actual style definition. There is only one here, for H1, although you can put as many as you want, defining display attributes for nearly every HTML tag. The value pairs (color: green is one) are separated by a colon, different value pairs are separated by a semicolon, and the whole thing is surrounded by curly braces.
The actual syntax of the stylesheets is covered in the later section that is dedicated to them.
