Guide to XHTML Layout in Containing Blocks

Introduction
This is part 17 of my series, XHTML Basics. A containing block is a containing element. A containing element is an element that can house other XHTML elements. Normally you would partition your web page with containing elements. Inside each Containing element you have to put small XHTML elements.

This article gives you a guide on how to place the small elements in the containing element. Toward the end of the article, I talk about partitioning your web page.

In this article I use only XHTML elements for illustration. I have a similar article where I also use Cascaded Style Sheet (CSS) for Illustration. That article gives you a more complete guide. You should read it after studying CSS.

In this part of the series, we shall also look at the effects of coding errors.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Examples of Containing Elements
Examples of containing elements are the BODY, DIV, Paragraph, and FORM elements. So far as this article is concerned, the most important containing element is the DIV element. Note: the List elements (UL, OL and DL) are also containing elements (block-level elements); however they receive special XHTML elements (LI, DT, DD accordingly).

In a partition, you can still have containing elements like the Paragraph element.

Layout in a Containing Block
Here, I want to guide you on how you place your elements in a partition (containing element). This section will carry on till the section on errors in the article.

Right element for the right purpose
Use the right element for the right purpose. Use a Radio Input Element when you want a Radio Input and not a checkbox. Use a Paragraph element when you want a Paragraph and not a DL element. Use an unordered list element when you have an unordered list and do not use hyphens with line break elements.

Use of Line Break Element
Use a line break element to force the next inline element to the next line. Of course you force the next inline element when you want to. Use an extra line break element when you want a blank line of the text (font) height. Just note that two consecutive line break elements result in at least one blank line.

Short Sentence
If all you have to put in your containing element is just a short phrase or short sentence, you do not need a paragraph element. Under this condition, you can force the next element to the next line using a line break element. Use a paragraph element when you actually have a paragraph. If you have a series of paragraphs, use a series of Paragraph elements for that.

The SPAN Element
If in a long line of text, you want to give a phrase a particular look, put the phrase in a SPAN element. Use the style attribute of the SPAN element or CSS to give the look. You can get more of this in a CSS course.

Floating
You can push an image to the extreme left of the containing element or extreme right of the containing element, using the CSS float property. Under this condition, text would be on the top, side and/or bottom of the image. Under this condition, the image height does not determine the height of any line as it would in many cases. Under this condition, the image of does not occupy any line even though it occupies its space. To float an image left, use the following style attribute in the image tag:

style = "float:left";

To float an image right, use the following style attribute in the image tag:

style = "float:right";

Floating does not only work with images; it works with any inline element.

Title of Web page
It is good to make the title of your web site (home page) an H1 element instead of an Image. The Search Engine companies would prefer, you have it as an H1 element instead of an image.

The Logo
A logo is an Image that identifies your company. A logo for a web site is not obligatory but will give an image identity of you, to your customers. The Mercedes company logo for example is a circle with three radius lines inside.

Partitioning your Web Page
To understand this topic, you need to have studied CSS. So I will just give you a template you can be using for your web pages. After you have studied CSS, you will be able to create your own partitions. The partitioning I give you here is common, but very effective and popular. Each partition is a DIV element. Display the code in a browser and read what I have typed at the displayed page. To see an example of such a developed professional web page click, http://www.cool-mathematics.com .

This is the code:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Title, logo and/or banner goes here.

Links can go
here.

The main
page content goes here.

If you had tried the code, you would have notice that there are border lines that mark out the DIV elements. There are three DIV elements. To remove these borders, remove the following code from each of the three DIV's style attribute:

; border:solid 1px black

Coding Errors
It is possible that when typing an XHTML element, you might forget an open or close angle bracket; you might omit a closing quote for an attribute value; you might type something where it is not supposed to be; you might type something wrongly; or commit some other error. Whenever an error is committed, the browser will either not display the element or elements concerned, or it will display scrambled text, or depending on the error, it would give a wrong layout of the elements typed around the error.

To solve error problems, as you are designing your web page, be testing (opening) it with your browser. In that way, as soon as an error occurs, you will notice it.

One more part of the series is remaining. In that last part we shall talk about uploading the web pages of your web site, from your home, office or even Cyber Café computer, to the server. The server may be in your country or some other country.

See you then.

Chrys