|
Home : Tutorial Six : Next Tutorial Tutorial Six: Text Formatting and LayoutPhysical
Formatting Deciding on the face, color and size of a document's text is important but formatting does not end there. HTML provides many tags that change the way text looks, similar to wordprocessing:
Combinations of these formatting options can be nested, as long as the syntax is correct and all tags are closed.
Try to avoid using underlining - hyperlinked text appears underlined (unless this has been 'turned off' using Style Sheets) and this may confuse your reader into thinking there is a link where there is none. Italics or bold are preferrable for emphasis. Logical formatting belongs to the original ideals of HTML - creating a structured document with a set purpose or intention rather than appearance. Unfortunately, this takes away aesthetic control which in many ways is now seen as one of the more important elements.
Although these tags are not commonly used, software that converts text to speech, say for visually impaired users, is often coded to look for these tags in order to receive clues as to the writers intentions - where should emphasis be applied to a word for instance? New 'commands' have been introduced with the HTML 4 specification but are not yet in general use and so will not be covered in this tutorial. These include <abbr></abbr>,<ins></ins>, <q></q> and others. HTML is all about tags, and what is contained within those tags. Once this concept is mastered we can begin to create layouts based on these tags, similar to what would be achieved via a wordprocessing package. HTML was never designed as a layout tool, but designers have been using it's limited capabilities in anyway possible to achieve the results they desire, and this is part of the challenge of web design as opposed to traditional media. A major difference between the wordprocessor and HTML centres on the fact that HTML ignores carriage returns and only responds to a single space between words. (It is still a good idea to break up your raw HTML using carriage returns - these will not show up in a browser but they will make it easy for you to dissect and read your own code, particularly when something is not working and you are trying to find a syntax error). Creating new paragraphs and line breaks must therefore be accomplished using the appropriate tags. There are two tags to accomplish this: <p> and <br> (paragraph and linebreak). It is a common fault to use consecutive line breaks instead of the paragraph tag and this is not recommended, one reason being that it is not correct syntax and another that future implementation of Style Sheets will place reliance on their proper use. Some browsers even ignore multiples of both these tags. Although it is not strictly necessary to include a closing paragraph tag, </p> it is required for the future implementation of Style Sheets - a style needs to be told where to start and end. HTML editing software inserts these automatically. The paragraph tag supports an align attribute which can be set to left (the default), right or center. (Please note that any use of the word center must conform to the american spelling and not the english centre, as part of HTML specifications). Beginning a new paragraph inserts a blank line: <p> or <p align="left">The default paragraph alignment</p> <p align="center">Centering a paragraph using the center align attribute</p> <p align="right">A paragraph using the right align attribute</p> A
line break forces a new line to start from its insertion point, without
adding a new blank line, and it does not require a closing tag. Browsers
automatically wrap text Line breaks are very handy, however they need to be used carefully when dealing with browser resizing. Unless you have used tables to control text (tables will be covered in Tutorial 9), text will flow across the width of a browser window, reflowing with window resizing or different width browsers. A <br> insertion point needs to be carefully chosen. The
linebreak tag has one attribute that corresponds with the use of left
or right image alignment. To get text to wrap around an image you can
specify: There are times when it is undesirable for a sentence to break - in the case of names, addresses, numbers etc - and this can be easily avoided by using the Non-Breaking Space tag, which is equal to one space, and is best used with one or two words. Some special characters in HTML begin with an ampersand or &, to alert the browser that what follows is special and not mere text. This tag can be used in multiples if you are having trouble aligning text or an image. You can see in our example that the whole name has been kept together and has not broken in the middle. The <nobr></nobr> tag exists but is not supported by the W3C.
You are already aware that font size can be controlled by the use of the <font size="2"> tag, encompassing a range from 1-7 sizes. In order to create a paragraph or page heading you might use a large font size. The correct method, however, involves using the heading tag, particularly if you choose to use Style Sheets at any stage - the heading tag is a container which can be called upon for CSS formatting. The heading tag creates a blank line and text will not sit directly below it. Headings were originally part of the logical document structure aims of HTML, providing an outline. It is therefore advisable to use them in 'logical sequence' - for instance do not go from a level one heading to a level 4 and back to level 2. Note that a closing tag IS required. Headings use the align attribute, similar to paragraphs, (left, right and center).
The next tutorial continues with text formatting This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it |