Make Pages: XHTML Lesson 1

Web pages can be created by many different types of software programs from the humblest text editors like TextEdit or TextWrangler (Mac) and NotePad or NoteTab Lite (Windows) to full-featured Web site development tools like Dreamweaver and GoLive. Regardless of how you create the file, the file itself is a plain text file that can be read by any computer. One of the original purposes of the Web was to allow different computer platforms to share files, so plain text was a great choice to ensure compatibility.

Within an XHTML file you will find content surrounded by special markup tags. For example, text that is intended to be displayed as bold will be surrounded by the markup tags <b> and </b>. These codes tell the Web browser that reads the page where to begin boldface and where to end it. All content on a Web page is contained by one or more tags. This is the Principle of Containment . One way to ensure that your content is properly contained is to type the opening and closing tags before you insert your content. In older version of HTML, like HTML 4.01, tags can be upper or lower case letters. XHTML, the very latest version of HTML, requires lowercase tags.

Assignment:

Create a folder on your hard drive called "mySite". Type the code below into any text editor and save it with the name "lesson01.html" in your new folder (be sure to type a zero before the 1 not the letter o). You may view the completed lesson in a new window by clicking here. After you create this page, open it using the Open command under the File menu of any major Web browser (Netscape 7, Internet Explorer 5 or later, Safari, etc.).

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Lesson 1: A Basic Document</title>
</head>
<body>
<h1>This is a level 1 heading.</h1>
<h2>This is a level 2 heading.</h2>
<p>This is a plain paragraph with wrapping text. This is a
plain paragraph with wrapping text. This is a plain paragraph
with wrapping text. This is a plain paragraph with wrapping
text.</p>
<p>This is text with forced line breaks.<br />
This is text with forced line breaks.<br />
This is text with forced line breaks.<br />
</p>
</body>
</html>

A Detailed Explanation:

You will probably have some questions about the odd tag at the top of the document.

This XML declaration is not required but is recommended to make your documents compatible with future Web browsers that rely more heavily on XML (extensible markup language). This is too big of a topic to go into on this site, so see the W3C pages on XHTML for more information if you are interested. Another benefit of including the XML declaration is that it indicates the character encoding used in your document. Most documents made for the web today are served using the Western/Latin1 encoding which is known as iso-8859-1 as seen in the XML declaration above. If you intend to create pages in non-western languages like Japanese or Korean, however, you will have to use other encodings.

The next two lines of code refer to a document type definition (dtd). This piece of code lets the Web browser know what version of HTML it should use when rendering the page for your reader. Even if you omit the !DOCTYPE tag, most Web browsers do a good job of rendering your pages as long as you do a good job in coding them properly. That is why when coding in older versions of HTML using the !DOCTYPE tag was optional. Today when coding in XHTML you MUST use the !DOCTYPE tag. The !DOCTYPE tag for this page indicates that it was coded using strict XHTML 1.0. Most pages you create, however, will use the XHTML 1.0 transitional setting to allow you the flexibility to incorporate older tags from previous versions of HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The next tag pair is <html> </html>. These tags contain all the content on the page. This tag pair tells the browser that the text contained within <html> and </html> was created using hypertext markup language (HTML). The one attribute present in the <html> tag is added for XHTML documents to assist the browser in rendering them correctly.

Next you see the <head> </head> tags. These tags contain information about your document such as the title. Many things such as scripts, style sheets, and meta tags will go into the <head> </head> section of a typical HTML document but the most common one is the <title> </title> tag pair. The <title> </title> tag pair contains the text that appears in the title bar of the document's window.

The <body> </body> tag pair contains the content that will actually appear on your Web page. The first content in this example is a level 1 heading. XHTML provides six levels of headings with tags <h1> through <h6>. The example page contains a level 1 heading between the <h1> </h1> tags and a level 2 heading between the <h2> </h2> tags.

The <p> </p> tag pair contains a paragraph of content. The text within the tags will wrap around the window naturally. Open your example page in your Web browser and try resizing the window to see how the text wrap changes to accommodate the new window size.

The next <p> </p> tag pair contains three lines of text. Each line ends with the <br /> tag. The <br /> tag does not contain any content but is used to force a line break on the page. The <br /> tag is unusual in XHTML because it is a self-closing tag. In older versions of HTML, such as HTML 4.01, the <br /> tag is coded as <br> and no closing tag is required. In XHMTL, however, you must always code line breaks as <br />. There are other exceptions to the containment principle. The <hr /> tag produces a horizontal rule on the page. The <img /> tag displays an image on the page. These tags and a few more like them are also considered self-closing tags.

XHTML Lesson 1: A Basic Page

Assignment:

A Detailed Explanation:

The Principle of Containment - content is contained by pairs of tags