Thursday, December 19th, 2002
Simple Webpage Creation
XHTML Starter Tutorial
The 4 tags required in a webpage are: <html>, <head>, <title>, and <body> . Tags are always in < > symbols. In Xhtml, they are always lowercase and always closed. Closing a tag usually means duplicating it with backslash at the end of the marked area. Tags can have additional values added to them, for example you can define the background color of a webpage in the body tag (<body bgcolor="white">). That particular example, though, is against the current xhtml standard.
In it’s simplest form, a webpage is no more than
<html>
<head>
<title> This is the title of my document</title>
</head>
<body>
And here is the main text of my document.
Here is some more text.
</body>
</html>
Copy everything between the opening <html>and the closing </html> tags, save it in a plain text document with an html extension, and you have a webpage. It won’t be strictly Xhtml because it’s missing three things, but we’ll get to those in a minute.
<html></html>
The html tags tell the browser where the code for display begins and ends. It is possible, even required in Xhtml, to have information not in between the html tags.
<head></head>
The head section is used for information that is not displayed in the browser window, such as the title, which is displayed at the top of the browser window.
<title></title>
The title given to the document is shown at the top of the window and what the bookmark is named in a favorites list.
<body></body>
The body of the document is all of the information you want to give to your audience.
XHTML
The three more things needed for a standards-compliant website are a doctype, character encoding and paragraph tags. The doctype is the Document Type Declaration (DTD), a statement before the <html> tag that tells the browser what kind of document (html, xhtml, xml) it is and its markup language (HTML 4.0 strict, XHTML transitional, XHTML strict, etc.). This effects how the browser treats the tags that are used.
The Character Encoding describes the human language the document is in. Chinese and Russian use different character sets and different encoding than English does. The character set is declared in a Meta tag (tags in the <head></head> tag of the document that describe the webpage).
Paragraph tags (<p></p>) define the different paragraphs in a document. As with regular documents, paragraphs can be longer than a single sentence, of course, but for this example, we don’t need anything more. Information can take many more forms than paragraphs, however at this point we’re still sticking with the basics.
The xhtml-validated form of our basic page is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html";
charset="iso-8859-1" />
<title> This is the title of my document</title>
</head>
<body>
<p>And here is the main text of my document.</p>
<p>Here is some more text.</p>
</body>
</html>
The doctype is at the top, then the opening html tag and the <head> tag. The content- meta tag and the <title></title> tags are in the <head></head> tags,s but it doesn’t matter what order they are in. Something we haven’t covered before is the / > at the end of the content-type declaration. Even tags that don’t traditionally have end tags, such as meta tags, must be closed in xhtml. This is accomplished with the / > at the end. The space between the backslash and the > is not necessary but keeps the markup from confusing Netscape 4.x.
Next is the closing head tag (</head>) and the <body> tag. The paragraph tags are fairly self-explanatory as are the closing </body> and </html> tags.
*An important point here is that tags are nested like Russian dolls 
, it doesn’t matter how deep you go, you must back your way out in the same order you went in.
By Laura @ 9:27 am in Tutorials §
