HTML Formatting
View as PDF
Introduction
For those familiar with the classical HTML text formatting elements and attributes learning Cascading Style Sheets (CSS) is much easier. This page recalls thus the following basic elements and their attributes: b, big, br, code, hr, img, pre, ol, and ul.
Bold face text
b - the bold face text tag. Browsers display the content of the associated element content in bold letters. The following line makes the browser display an example of a bold text
<b> This is a bold text example. </b>
big - the browser sets the content of the corresponding element in bigger letters.
<big> This text is big. </big> <br />
Compare it to the ordinary one.
br - the line break tag. It determines a self closing element , which tells the browser to terminate the line and start a new one. It is adviced to leave a space before the closing slash. An example of how to use it is in the above code sample.
Presenting code
code - the tag of the computer code element. Browsers interpret content of the code element as monospaced text. That is a fixed-width text with typewriter or teletypewriter fonts. In combination with the pre tag it is well suited for presentation of computer code. For example, the next snippet makes the browser display a the basic Hello World C program.
<pre><code>
#include <stdio.h>
int main()
{
printf("%s", "Hello World!");
}
</code></pre>
pre - forces the browser to preserve the spacing of the document text. Without using it, by default, extra spaces in text are skipped. For its use see the example above.
Italicized text
em - tag of the emphasizing element. Browsers display its content as italicized text.
Text separation
hr - horizontal rule determines a self-closing element that draws a horizontal line. Its attributes are align (left, center, right), noshade, size (height), width (length) of the line. Its use is demonstrated next.
<hr align="left" width="200px" />
<em> This is an emphasized text!</em>
<hr align="left" width="200px" />
img - tag determines the image self-closing element. It allows us to place images in HTML documents. The image formats supported by most browsers are GIF, JPEG and PNG. Important attributes are src, alt, width, height, border and align. src is the name of the source file, alt is the alternative text and width and height set the sizes of the picture. The border attribute draws a line around the image. align has values top, middle, bottom, left and right and they determine how the text flows around the image. Typical usages of the img element are:
<img src="logo.gif" alt="company logo."
width="150" align="left"/>
<a href="bigpic.jpg">< img src="thumbpic.jpg"
alt="Art Photo"/></a>
ol - tag of the ordered list element. It helps us display ordered lists. The central attribute is type, which takes values 1, a, A, i, and I , respectively. The meaning is listed next:
| 1 | default | Arabic numbers | 1, 2, 3, 4, ... |
| a | Alphanumeric | lowercase | a, b, c, d, ... |
| A | Alphanumeric | uppercase | A, B, C, D, ... |
| i | Roman numbers | lowercase | i, ii, iii, iv, ... |
| I | Roman numbers | uppercase | I, II, III, IV, ... |
The ol element encloses the list items kept in li elements. A typical example of a code displaying an ordered list is
<ol>
<li> first item </li>
<li> second item </li>
</ol>
ul - tag is used to create unordered lists of items, such where no numbers or letters precede the items. Only bullets are displayed in front of the item. The type of the bullets can be disc, square, or circle. Its application is very similar to that of ol. See the frame set example for usage.
Definition list
A definition list is useful, say, for presentation of several item lists. Compared to the itemized list it has no bullets or numbering, but has a place that can be used as a list header. A definition list is enclosed in a dl tag. The dl element contains a dt (definition term) element, which can enclose text and formatting elements only, followed by a dd (definition description) element, which can consist of further formatting blocks. Here is a simple code example.
<dl>
<dt>Ingrediences</dt>
<dd>
<ol>
<li> A pack of pudding.</li>
<li> Milk. </li>
</ol>
</dd>
<dt>Preparation and Use</dt>
<dd>
<ol>
<li> Cook the pudding.</li>
<li> Eat the pudding. </li>
</ol>
</dd>
</dl>
Web Design Group HTML Help and Web Authoring Reference,
Web Design Group
,
2006
Markup Validation Service,
World Wide Web Consortium
,
2006