Web Design |
the head, the body and structural tags |
||
main menushelp pagesprinter-friendly/text-only version
|
It is recommended that when you read this page you have the lecture handout in front of you. If you don't, you can use that link to download it and print it off. the head and the bodyWhen we created that first web page in the lecture, there were a lot of complicated-looking tags involved that probably got you a little worried. The biggest problem with teaching the very basics of HTML is that though it's pretty easy to get simple content onto a page using tags, the web page as a whole has to conform to a certain structure. This structure is also created with tags, and some of them look quite daunting, even incomprehensible to a beginner. Nevertheless you can't get a web page properly up and running without them. This page will try and explain some of what is going on. Although this seems difficult please bear in mind that a lot of the time, you can forget these tags are there. I will provide you (below) with a template which you can use to create web pages without having to type these tags in every time. But unless you know at least a little about what they do and how to use them, you may make basic web design errors which could lead to your page not being at all understandable to a browser. A web page has two distinct parts. These are known as the head and the body. As on a human being, the two parts are of unequal size. Indeed, on most web pages the head is little more than a few lines of code at the top of the file. What the head contains is information about the page rather than the information on the page. If you look at the browser window in front of you, that space between the menu bar at the top and the status bar at the bottom is the actual web page. That's the page body. It's tempting to think of this as all there is to it, but there are some things the browser "knows" about the page which are not included in the main text. These include:
All of this, as I said, is done with tags, and the next section explains how. Structural tagsThe lecture handout contains, in part 3, a "skeleton" web page. First have a look at how the head and the body are enclosed within <head> and <body> tags respectively (the comments should help you find them). Then the whole page is included in <html> tags. All three of these tags are closed. (We'll deal with the <?xml> and <!DOCTYPE> shortly). Here are the three general rules which should never be broken:
Web pages are basically structured texts, and what we're really talking about here is their most fundamental structural division of all. It's like when you're classifying people: the first and most obvious "slice" to make in the classification is between men and women. The first "slice" a browser makes in interpreting the plan text is between head and body. If you get it wrong, you can get some very strange things happening. Because of the complexity of structural tags, it's best to use a template: which is what the lecture handout provides you with. Or, you can copy and paste the following into Notepad and then it's all yours:
<?xml version="1.0" encoding="UTF-8"?> The lines of text inbetween the asterisks are not part of the structure! Sounds facile to say it, but it's worth pointing out - I have received courseworks with a page title reading "the page title goes here" or similar... Anyway, what does all this mean? As I've said, the complex tags are often best left alone. Basically - and this is over-simplifying things, but it will do for now - the first two lines tell the browser what version of HTML the page is written in. This template (and all the pages on this site) are written in XHTML 1.0 Transitional. A "formal" definition of this is available for the browser to go and find on the site noted (the World Wide Web Consortium's site, but this is not something you will ever need to worry about unless you get into really advanced electronic publishing. By the way, <!DOCTYPE> (and don't forget the !) is the only tag name you ever see in UPPER CASE. That's because it's not actually a tag at all, but a "declaration". Hmmm. Every other tag bar these top two are bounded by the pair of <html> tags. Amongst the attributes you can see here is one, lang, which tells the browser the human language in which your page is written. "en" stands for English, in this case. For more information see the page on <meta> tags of which you can see two after the <head> tag. These tell the browser what character set to use on the page: some languages like Chinese, Greek, Arabic have different alphabets and the browser needs to know this. Finally the language is again specified, this time for the benefit of search engines. The page title has its own page, and the <link> tag will be covered on the page about style sheets. So that's it for the web page's head; and as you can see, the page body is a "blank", ready for you to put your own web page into. That's it for structural tags. I'm sorry that they look intimidating but hopefully once you've used the template in two or three web pages you become used to seeing them there. For most of the rest of this course we will not need to touch them. | ||
Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.