Text display

Conveying textual content is the single most basic and most important aspect of creating HTML documents. In fact, one should start out with textual content before even starting with HTML edition. There is much that can be done with text presentation through HTML manipulation, and understanding this particular tutorial will take you far.

---

Let's start with the most commonly used tags, broken down based on typical writing procedure. When creating any composition, there will be a series of paragraphs that can contain indentions, italics, boldface, underlines, _sub/^superscripts, strikethroughs, and listings of varying types; all with certain font faces and sizes. Every one of these special decorations can be used in HTML. In fact, they are among the simplest to grasp and use tags in the specified code. Despite recent advances that makes many of these commands to be redundant (mainly through the use of style sheets; more on this later), they are still highly useful in both static pages and in message forums due to their standard status and simplistic nature. Let's take it from the top.

Paragraphs are indicated by <p>...</p> (or simply <p />). These actually create the writing space that the text goes in. While using this tag isn't exactly necessary to put text on an HTML document, it is recommended; and if there is any substantive use of text it is almost mandatory. <div> (division; part of HTML structure) can be used in the place of <p>, and in fact is preferred in more recent revisions to the HTML standard, but <p> is still legal and much more intuitive for the beginner. The paragraph tag has a specific attribute associated with it as well, that of "align". The align attribute should be self explanatory, making the text within the paragraph orient itself to either the left, right, center, or justify. So, the complete paragraph tag looks like <p align="left">...</p> or <p align="left" />. Adding the "align" attrib is beneficial in that it'll cause the text to wrap around anything it comes across, be it an image or table or what have you.

^^^^^^ Case in point... ^^^^^^ Also, there is another fairly common attribute that can come in handy when dealing with wrapping: the "clear" attribute, when set to "all", will clear out any wrapping and bump the paragraph (or break or horizontal rule or whatever) down below the obstacle.

What other &commands are there?
&amp; = &	&lt; = <	&gt; = >
&deg; = °	&reg; = ®	&copy; = ©
&quot; = "	&middot; = ·	&iquest; = ¿
&frac14; = ¼	&frac12; = ½	&frac34; = ¾
&pound; = £	&yen; = ¥	&cent; = ¢
...and there are many more

Indentions are another common element in a composition; however, the tags used to generate spaces and indents aren't typical HTML tags. Instead, ampersand commands (&commands) must be used (how/why the jokers who do the HTML standards came up with this little doozie, I'll never know...here's proof that computers will fry your brains). See, the reason why spacing five times and calling it an indentation won't work is that thing talked about in the Basics section; remember white space? You can hit the space bar a thousand times, and you won't get more than one space between the word and the margin. The &command for a space is &nbsp;, and five of those back-to-back will create a five space indent.

Italics (<i>...</i>), boldface (<b>...</b>), underlines (<u>...</u>), subscripts (_...), superscripts (^...), and strikethroughs (<s>...<s>) are excruciatingly simple to use; just put the tags around the text to be changed.

For lists, though, it gets a little more complicated. There are ordered lists, unordered lists, and definition lists. The code for ordered lists and unordered lists differs only in the initial tag. The list is opened and closed by <ol>...</ol> for an ordered listing or <ul>...</ul> for an unordered one. After that difference, though, they work exactly alike; each item in the listing is surrounded by <li>...</li>. Both lists can have different delimiters for the list as well. The ordered list defaults to Arabic numerals, but adding the "type" attribute will allow for Roman numerals (type="I" or type="i"), letters (type="A" or type="a"). The unordered list defaults to a bullet, but can be changed to a square (type="square").

For an example of the way it works:

Ordered list	<ol> <li>first listing</li> <li>second listing</li> <li>third listing</li> </ol>	first listing second listing third listing
Unordered list	<ul> <li>first listing</li> <li>second listing</li> <li>third listing</li> </ul>	first listing second listing third listing
Definition list	<dl><dt> Here we go... <dd> first listing </dd><dd> second listing </dd><dd> third listing </dd></dt> <dt> Here we go again!... <dd> first listing </dd><dd> second listing </dd><dd> third listing </dd> </dt> </dl>	Here we go... first listing second listing third listing Here we go again!... first listing second listing third listing

Font is often overlooked in a composition. It generally gets the most attention after the composition has been completed; either to make the work look better to to squeeze out a few extra pages >). In HTML, however, the font tag (<font>...</font>) is of great importance. With it, the author can change not only the face of the font, but the size and color as well using the font attributes of the same name. For example, <font size="4" color="blue" face="Verdana"> Sample text </font> results in Sample text. The size attribute can range from 1 through 6, the face attribute can be any font name on the computer (if the viewer doesn't have the font installed on his/her system the style defaults to the regular font), and the color attribute can accept many common colors or it can accept any hexadecimal color code (i.e., blue looks like #0000ff in hex; most shades can be reproduced in hex, and there are charts and conversion programs available on the web).

There are many other tags available for text modification, but they are generally redundant. For example, <big>...</big> and <small>...</small> make the text one size larger or smaller respectively. <em>...</em> adds emphasis to the text and is exactly like <i>...</i>

Wrapup

• <p align="left, right, center, or justify" /> creates new paragraph divisions.
• The "clear="all"" attribute can be used in any other tag where the author wants to drop below an obstacle rather than wrap around it.
• Indentions and special characters can be created using &commands.
• Basic text formatting tags include <b>, <i>, <u>, <s>, <sub>, and <sup>.
• There are three types of lists: ordered (<ol><li>...</li> </ol>), unordered (<ul><li>...</li> </ul>), and definition (<dl><dt>...<dd>...</dd></dt> </dl>) lists.
• The <font face="font style" size="X" color="color name or hex code">...</font> is a very important and often used HTML tag.