Formatting

Formatting

Lines breaks, spaces and indentations

An HTML document ignores the spaces, generated tabs, and blank lines. These are treated as single word spaces. In this way, an HTML document can be organized using line breaks, spaces and indentations. This will maintain the logical layout of HTML document that makes easy to place the tags related to the text.

This is so similar to writing a program. When we write a program, we use comments, blank lines, spaces and punctuation marks to increase the readability of the program, likewise we use blank lines and spaces and punctuation to increase the readability also helping the user to understand the concept.

The Line break BR element

This element is used to generate a line break, e.g. if we want to display an address in separate lines, we can do it as follows:

<p>

John Smith <br>

XYZ Company <br>

New York <br>

</p>

The result is as follows:

br-element

Character Highlighting

In the previous section we learnt that HTML has many physical highlighting elements; these include B to boldface the text, I is used to make the text italic, and U is used to underline the selected text.

Boldface

It is used as follows:

<p> You can <b> Win </b> a ticket </p>

This will generate the following result:

boldface
Italic

It is used as follows:

<p> You can <i> Win</i> a ticket</p>

Resulting in:

italic

Underline

It is used as follows:

<p> You can <U> Win</U> a ticket</p>

Resulting in:

underline

Other than this we can also emphasis on a word to if that word is the most important we can strong emphasis on the word. In an HTML document, we can use elements for emphasizing and strong emphasizing on a word using EM and STRONG respectively. It is recommended in an HTML document, that we should italic the word that is emphasized. While the word or text that is strongly emphasized should be bold.

EM

It is used as follows:

<p>Creating <em>Emphasis</em> makes the user understand well</p>

This will mark the text italics as follows:

em

Strong

It is used as follows:

<p>Creating <STRONG>Emphasis</STRONG> makes the user understand well</p>

strong

It can be seen here that the STRONG tag boldfaced the text and EM italic it.

Background Color

There is an attribute called BACKGROUND attribute to the BODY element that indicates image files that can be used as the tile of the browser as a display window. The general form of using the BACKGROUND attribute is as follows:

<BODY BACKGROUND = “URL of the image file”>

The value that has assigned to the BACKGROUND attribute is the URL or the link of the image that will be used as the background. The browser will load this image file and use it as the tile or the BACKGROUND of the image.

Consider the following example:

<!DOCTYPE html>

<html>

<body background=”index.jpg”>

<body>

Adding Background

</body>

</html>

The index.jpg will be the file name that is saved on your computer. The result is as follows:

background-color

This will look more attractive but it should be noted here that every monitor do not have a good graphics. Background can also create confusion when its color is same as that of the text.