Join Bill Weinman for an in-depth discussion in this video Understanding the structure of an XHTML document, part of XHTML and HTML Essential Training.
In our last lesson we talked about this information at the top of the document that needs to get cut and paste into each of your documents, in order for it to be a valid XHTML. Let's take a look at what this is and exactly what it all means. This first line is the XML declaration. You will notice it's XML; it is not XHTML. XHTML is an application of XML and this is the version being used. So this XML declaration has the version of XML and the character encoding that's used in the document. The version will always be 1.0 and the encoding will depend on what language the document is in.
For most Western languages utf-8 will work fine and that's the default. If you're using a language that uses different types of characters then western languages, like for instance Japanese or Chinese or Russian, that uses a different set of characters, then you may want a different character encoding. The next line is the DOCTYPE. This tells the browser what type of document this is, which type of XHTML is being used. This one is XHTML 1.0 Transitional and that's what you'll for most of your standard HTML documents.
The other two types are Strict and Frameset, and we'll look at those in a minute. In a Transitional document, you have available all of the HTML 4 tags. You have Center, you have Table, you have Font and all of the presentation markup, all the tags are available in HTML are available in XHTML 1.0 Transitional. So if we look at this document in the browser we see that there is a yellow box and it has some text in it. So here in the document, we see that yellow box is made by the table element and the text is inside of a paragraph element and it has the font tag for specifying the font and the size.
And that looks like this in the browser. In our strict document, you will notice that the DOCTYPE says XHTML 1.0 Strict. The Strict documents do not have available any of the presentation. The center tag is not there, the table tag is not there, the font tag is not there. All of these things have to be done with style sheets. And so at the top of the document we have a style sheet and then down here is the content. So that document looks like this in the browser.
There is the strict version. You see it's virtually the same as the Transitional version. There is the Transitional and there is the Strict. You can accomplish the same things with style sheets that you can with the tables and the fonts. Finally, the Frameset document is for documents that have frames. We'll cover frames in more detail in a later lesson. There in nutshell, you have three frames available, frame sources. It goes red, yellow and then blue HTML. That looks like this in the browser, having red, yellow and blue.
So those are our document types. Again, you will be using the XHTML 1.0 Transitional document type for most of your documents.
- Understanding the structure of an HTML or XHTML document
- Creating and using templates
- Controlling white space and line breaks
- Making effective use of tables and frames
- Flowing text around an image
- Formatting tables with CSS
- Creating web pages that work properly across platforms and devices
- Reviewing a case study of a complete web site
Skill Level Beginner
Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?<br />
A: This course will be updated to include CSS-based layout techniques within<br /> the next few months. In the meantime, please see Bill's <a href="<br /> http://www.lynda.com/home/DisplayCourse.aspx?lpk2=52341">CSS for<br /> Developers</a> title for more information on coding with CSS.<br />
Q: In the "Understanding the structure of an XHTML document" movie in Chapter 1, where does the "Roses are red," etc, text come from? I don't see it in the code.
<div>A: Notice the <frame src="??"> tags. These reference other .html files that contain the content of the various frames. Details about how frames work can be found in Chapter 6 of the course.</div>
Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?
A: This course will be updated to include CSS-based layout techniques later in 2012. In the meantime, please see Bill's <a href="http://www.lynda.com/home/DisplayCourse.aspx?lpk2=52341">CSS for Developers</a> title for more information on coding with CSS.