Figure 2.1
Chapter 2: The Head
In Chapter 1, you learned that the head section is the top part of the HTML document. That makes it the logical place to start coding. Let's start -
Okay, I lied. The head is not really the top of the document. That distinction goes to a short line of code that states that XHTML is based on XML, and a really long line of code called the Document Type Definition, or DTD. The DTD is exactly the same for every XHTML 1.1 document in existence. It lets browsers know what version of HTML or XHTML is used.
CAUTION
An incorrect or missing DTD may make your code display incorrectly. In addition, if there is no DTD, you cannot use the W3C's code validator.
Since the DTD is exactly the same for each and every XHTML document that we will work with (and the DTD is pretty long), it makes sense to just type it once and then copy and paste it into every page you start. That is what we will be doing in Exercise 2.01...
<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/html11/DTD/xhtml11.dtd">template.txt. Save it as a plain-text (*.txt) file, not an HTML file. <html>One of the rules of XML is that all content other than the XML declaration and DTDs must fall within a pair of "master" tags called the root tag. In XHTML, the root tag is the <html> tag. The head and body sections are both contained within this tag. The </html> closing tag is always the last tag in any XHTML document.
When you look at a Web page on the Internet, all the pages have a title. This shows up in the title bar and taskbar. This is part of the head section and is created using the <title> HTML tag. We will demonstrate using the head and title tags in Exercise 2.02.
<html> <head> <title>[NAME]'s First Page</title> <head> </html>
firstpage.html, and look at it in a Web browser.
Figure 2.1
Take a look at the toolbar in Internet Explorer in the diagram above. At the far right end of the screen is a button with a blue "W" on it - the Microsoft Word logo. This is the "Edit" button. Clicking the arrow next to it will bring up a menu. If you choose "Edit With Windows Notepad" from this menu, Notepad will open with the current page's HTML code displayed. If you spot a mistake in your site, you can use this to edit your code very quickly. You'll need to save the page and then refresh it to view the changes, however.
The <meta> tag is used to describe the way the HTML document is written. It helps browsers display the page. Meta information is also used to draw search engines such as Google to your site. This the way most users discover a site they've never been to.
The meta tag is the first one you will use that has attributes. Attributes are keywords added inside a tag's brackets that increase the tag's functionality. The attribute's name is followed by an equal sign and the value of the attribute, which is enclosed in quotation marks. For example, in the following code, name is an attribute of the meta tag that has a value of keywords:
<meta name="keywords">
An important part of any Web page is the language it was intended to be read in. To communicate this, the meta tag is given two attributes: http-equiv and content.
The http-equiv attribute is set to "Content-type", which tells the browser that there is a content attribute coming up.
The content attribute is assigned to "text/html;" telling the browser to expect HTML content. Then, the content also is assigned "charset=" and the name of the character set to use.
A page's character set simply tells the browser what kind of alphabet to use to display the site. This is set with the charset attribute of the meta tag.
Have you ever used Google to find a site, only to find that it is in some other language? If you created a site without using the charset attribute, the site would look fine in the United States, but in Tokyo the text would automatically be translated into Japanese characters - while the actual text remains in English. This would, as you probably guessed, confuse Japanese viewers.
On the other hand, if you use the charset attribute, the Japanese viewer would instantly know that the site was in English and either go to a different site or, if they were interested enough, go to a translation site like Babelfish to get your site in Japanese.
Table 2.1 shows the most common charset values.
| Value | Description |
| US-ASCII | ASCII characters (U.S.) |
| ISO-8859-1 | Standard ISO Latin-1 characters |
| UTF-8 | Universal Transformation Format |
| Shift_JIS | Japanese |
| Big5 | Chinese Traditional |
If you feel a bit overwhelmed with this attribute, don't worry - when you see the actual code in Exercise 2.03, you'll see how it all fits together. In Exercise 2.03 we will add charset meta support to the template.txt and firstpage.html files.
<meta... and ends at ...ISO-8859-1"> and should all be typed on one line.
<head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"> </head>
As noted before, it's really important to let search engines find your site easily. Let's say that you want to find information about, say, trombones. So you type "trombone" into a search engine like Google. The search engine will scour through the Web, trying to find web sites that have specified that they contain information about trombones.
How it works is that the engine is looking at a meta tag. Meta takes two attributes that help search engines - the description and the keywords.
The description attribute is a short description (>25 words) of what is on the site. For instance, "Washington High School Football Team" would be a good description.
The other attribute is keywords. Keywords are a list of words that are associated with the page. In this example, keywords could be "football, football team, high school team". Keep the list short, and make sure that the keywords actually appear on the page.
This hypothetical page shows how meta tags all work together. Note that just the meta tags are shown.
NOTE
If this were a real site, you would have to add the DTD and <head> tags, but the whole purpose of the page is to demonstrate meta tags.
<meta name="keywords" content="football, football team, high school team"> <meta name="description" content="Washington High School Football Team"> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
Now that we have established our page in the head section, we get to actually start designing. Now it's starting to get interesting...
<<Back 1 Chapter Back to Contents Onward!>>