Home : Tutorial Seven : Next Tutorial

Tutorial Seven: Text Formatting and Layout

Readability
Blockquote
Preformatted Text
Horizontal Lines
Center and Div Tags
Special Characters
Adding Hidden Comments

Readability

Using tables - a series of data or image containers comprising of cells, columns and rows - is one of the main methods of gaining control over web content. This will be covered in Tutorial 9, however HTML provides some simple tags to assist in document formatting and layout. Formatting is a useful tool in guiding the readers eye to certain important features. This is particularly pertinent with web based text as it is often said that a web audience 'scans' quickly rather than reading every single word. Your ability to break text up into readable 'chunks' will pay off in the long run.

White space is an underused element of good design. Do not feel that you must fill every available space with content. Use space to guide the eye towards images or important paragraphs. Conversely, use space evenly: make sure the gap between constant elements such as paragraphs is regular.

Blockquote

The Blockquote tag was originally designed for long quotations separated from the body of text, but it is quite useful for indenting any text or element. It requires a closing tag and can be nested. You might note that we have indented, or blockquoted, and colored, most of our examples.

<blockquote>
Here we use the blockquote to point out some further information. Within a blockquote other formatting options can be inserted, such as <p> and <br>

<blockquote>
And don't be afraid to nest blockquotes within each other, as long as all are closed by separate end tags
</blockquote>

</blockquote>

Preformatted Text

It is possible to achieve a little more precise control over displayed HTML by using the Preformatted Text tag, however this results in a monospaced font such as courier. Traditionally, preformatted text was used to display a representation of computer code and to align text in some semblance of table-formatting: now that tables are widely supported it is not so common.

<pre>Graphic D  e  s  i  g  n  e  r  s      are     ..  ..  ..



quite h a p p y  to use preformatting as it lends  i    t    s    e   l   f


                     to all sorts of



P    O    S    S    I     B    I    L    I    T    I    E    S </pre>

In this case, spaces and tabs are not ignored by the browser, they are preserved. The W3C discourages use of tabs in favour of spaces. As you can see, it is possible to use some other tags within the pre tags - such as font color and bold. The space occupied by these tags will not be counted by the browser - you will have to count spaces carefully if using <pre> for alignment. Be careful to wrap your sentences with linebreaks, otherwise the browser will display them as one long line until encountering the closing </pre> tag. With a little planning the <pre> tag can result in ascii art - a base artform that developed in the early days of computing when graphics programs were unavailable to most people.

Horizontal Lines

Horizontal rules, although useful, can be another design trap for the unwary. Use them sparingly and avoid running them across the full length of the page, or width=100% which is the default value.

<hr>

---

A HR creates blank space before and after it and therefore text cannot sit snugly against it. There is no need for a closing tag as it is not a 'container'. Attributes include:

• width (either percent or pixels)
• size, which relates to height (pixels). The default value is "2"
• noshade (turns off the 3D effect)
• align (left, center or right)
• color (this is not universal and therefore should not be used). It is possible, and preferable, to create a solid color gif graphic, 1 pixel by 1 pixel (known oddly enough as a 1-pixel gif!). Very small in physical size, its width and height can be set to any size - for instance width="400" height="1" - creating a horizontal rule, or other square/rectangular shape of a desired color.

  

This is the same 1-pixel gif.

The first example is 200 x 1 pixel, the second 20 x 20, the third 10 x 30, and the fourth 1 x 20. This is a size-saving feature of html - the graphic is loaded into the browser at its original size (a mere 43 bytes), only once. It has the added advantage of allowing you to align text flush and with more precision.

The Center Tag and Div Tags

Many tags have their own alignment attributes - left, right or center. There are instances where you will want to align entire sections - graphics, tables and text included. The center tag is one method for centering a block of material and although it is widely used it is not strictly a W3C supported element and may become obsolete.

&lt; = <
&gt; = >.
If we did not use the assigned code, browsers would think we meant to insert an HTML command as in <font>

&#64; = @

&copy; or &#169; = ©
This is both named and numbered. Note that the named entity begins with & and ends with ; while the numbered entity begins with &# and ends with ;

<!-- Start the newsletter section here -->
<!-- Remember to change this heading once Mark receives authority -->
<!-- Created by the Monash University - copyright rules apply -->
<!-- Hello to everyone who is looking at our source code-->