[an error occurred while processing this directive]
Go to Bottom Nav - June 18, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Web browsers read the text files that are the code for web pages from left to right and top to bottom. It is helpful to remember that when you code.

The basic HTML skeleton is comprised of the four pairs of tags listed in order below.

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Every page on the web contains this skeleton (or should). From this skeleton we hang all the other parts, seen and unseen, that comprise a web page. You could also think of this skeleton as the framework for a house or building.

The Pairs

It is helpful to think of HTML tag pairs as containers; each opening and closing tag contains and effects whatever text or code that is between them.

<html></html> - Contains the entire page. Has two sub containers, head and body. Lets the browser know when the html code starts and ends.

<head></head> - Contains page information invisible to the user except the title. Can contain "meta" tags which supply additional information about the page to search engines; links to javascript or cascading style sheet files; scripts or CSS code; and other instructions to the browser.

<title></title> - Contains the text you want to appear in the title bar at the very top of the browser window. The title pair contains the only information visible to the user in the head section.

<body></body> - Contains the page information that is visible to the user. The text you are reading now is in the "body" of the web page.

The HTML skeleton is worth committing to memory. You will use it for every page that you create.

The XHTML Skeleton

The HTML skeleton needs a few additions to make it into a standards conforming XHTML (or HTML 4.0.1 and HTML5) document and thus one that will validate.

DOCTYPE

The DOCTYPE declaration is the first line of code at the beginning of your document that informs the browser just what flavor of XHTML/HTML you are using. Without the DOCTYPE, your browser will render the page in "quirks" mode and give you its best guess of how you meant to display your page.

There are three "flavors" of XHTML DOCTYPEs; Transitional, Strict, and Frameset

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Transitional DOCTYPE will validate with deprecated tags and tag attributes from HTML 4.0.1 except for framesets. We will be using the Transitional DOCTYPE when using xHTML in this class!
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Strict DOCTYPE is as it is titled, very strict. No deprecated tags and tag attributes allowed. It does produce lean code though...
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    Frameset DOCTYPE allows deprecated tags and tag attributes from HTML 4.0.1 including framesets. We will use this DOCTYPE for the framesets exercise.

<html> Tag

The opening <html> tag in an XHTML document is a more involved than the HTML 4.0.1 tag. It looks like this:
<html xmlns="http://www.w3.org/1999/xhtml">

XHTML follows the same syntax rules as xml; the attribute xmlns (xml name space) leads the browser to a document with the rules the page must follow.

Character Set

The character set declaration is contained within a meta tag; it and other meta tags live in the head section of the XHTML document. It lets the browser know which character set to use when displaying text on the page. For the webhawks.org server, use:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Other servers may not "force" the utf-8 standard or you may have created your files with a different character set. Another common character set is:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

What does the XHTML skeleton look like with all these additions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
</head>
<body>

</body>
</html>

For your convenience…

The Complete HTML5 Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

Go see the HTML5 skeleton.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu