Web based School

Page Content

XHTML tags have the primary purpose of structuring and arranging text and graphic content on a Web page. They are not designed to style or decorate the content, only to arrange it so that information is presented in a visual order for ease of reading and in a logical order for enhanced understanding.

There are, of course, numerous ways to style page presentations. You can apply different sizes, colors, and font styles to text, and you can size and decorate images. Throughout these tutorials you are introduced to styling methods that add these kinds of visual appeal to text and graphic elements. First, however, it is necessary to become familiar with the basic tags that bring order to page content.

Editor versus Browser Displays

Recall that Web page design begins with a standard document setup that gives its overall structure. This page template is reproduced below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>...enter page title here</title>
</head>
<body>

  ...enter content here

</body>
</html>

Each page you design begins with this coding. You need to code an appropriate title for the page within the <title> tag. This text appears in the browser�s Title Bar when you open the page. Then you add information content inside the <body> tag. Only the information appearing in the body of the document shows up in the browser window. It is inside the <body> tag where text and graphic images are placed, surrounded by XHTML tags to order and arrange them.

It is important to understand that no formatting of Web pages takes place except through XHTML tags.

A heading appears at the top of the document and all paragraphs are separated from one another by single blank lines. Care has been taken to enter information in the editor in much the same way it is to appear in the browser. This practice should be followed so that the editor display itself is orderly and readable. However, editor formatting has little to do with how the entered information appears as a Web page.

Its appearance is very different from its display in the editor. The reason is, of course, that no XHTML tags appear in the document to guide the browser in laying out the text on the page. Therefore, the browser treats the information as one continuous string of text. All blank spaces and line breaks appearing in the editor are collapsed to single blank spaces separating the words; the result is a single block of text on the page.

Over the next several topics you are introduced to a basic set of XHTML tags to bring order and structural formatting to page content. Initial focus is on text arrangement; later, basic tags for adding graphic images and links are introduced. The examples are rather simple when it comes to styling. For the time being, though, you need to learn the structural aspects of page design; you will learn styling techniques beginning with the next tutorial.