Formatting Text

Text Formatting and Special Characters

Text formatting

You can make text bold, underlined or italic, as in a word processor. There are also some direct text formatting codes that aren't handled the same way as in a word processor. FrontPage, and most other HTML editors, have buttons for the main 3 and rely on the menu for the others.

It's easiest to just give a list:

text maked the text boldface.

text makes it italic.

text is for underlining.

Of course you can combine them: Of course you can combine them. Notice that the right way to do it is to close them in the opposite order that you opened them; the buttons of the editor should handle this automatically.

<TT>text</TT> changes the font to fixed-width ("typewriter text").

<PRE>text</PRE>tells the browser that the text is "preformatted", ie it should transcribe it exactly as written, including line breaks; should display text such as <TT> as written rather than treating it as an HTML command as it would usually do, and so on. The only problem is that preformatted text is displayed in a fixed-width font, which doesn't look very nice.

<BLINK>text</BLINK> makes it blink. You don't want to do too much of that, it annoys people! Incidentally this is a Netscape-specific tag: Microsoft Internet Explorer doesn't understand it (at least not up to version 4).

Logical versus Physical tags

The tags given above are physical tags, i.e. they say to the browser "make this bold", "Make this italics" and so on. The other category is logical tags, which define the function of the text, e.g "this is a citation" or "this is emphasized but not as much as that other text". Logical tags leave it up to the browser to decide how to display the text; thus text defined as a citation might be displayed in one browser as italics and in another browser in a fixed-width ("typewriter") font.

The main logical tags are:

 and 

Used for emphasis. Usually rendered as italics. Example: The main logical tags are:...

 and 

Used for strong emphasis. Usually appears as bold. Example: If you didn't understand that, click here!

<CITE> and </CITE>

Used for citations, bibliographic references, and small in-line quotations. Usually appears as italics. Example: See The Bare-Bones Guide to HTML.

<CODE> and </CODE>

Used for presenting computer code. Appears as a fixed-width font. Example: 10 if x=y then go to 40

<KBD> and </KBD>

Used to indicate something that the user must type in on the keyboard. Usually appears as a fixed-width font, either bold or regular. Example: To get an explanation of the commands in this system, type in: EXPLAIN COMMANDS.

<VAR> and </VAR>

Used to represent variables - i.e, something the user must replace with their own information. Usually appears as italics. Example: REVIEW LISTNAME will list the users subscribed to a given listserv.

The usual recommendation is to use logical tags, since it ensures that the browser will display the various parts of your text in a way that shows the relationship between them ("this is more important than that"). However, most people feel happier when they themselves control how the browser displays the text ("I want this italics, not boldface!"). You can use either system: just try not to mix them in the same page! If sometimes you decide on the formatting and sometimes you let the browser decide, you cannot be sure that the different parts of the text will be displayed in a way that makes clear the relationships between them.

There are a few more but they're rarely used. Choosing Format -- Font from the menu of FrontPage will show you all the options.

<BLOCKQUOTE>paragraph</BLOCKQUOTE> isn't really a text formatting command but a paragraph formatting one: it indents the paragraph relative to the other paragraphs (on both left and right, as you see here). Was originally intended for extended quotations, as the name implies, but until stylesheets came along, it was the only way to get a wider margin on your page (and is still the easiest way). Most of the pages in this tutorial enclose the entire text in <BLOCKQUOTE> tags, just to get a reasonable margin. (Another way to do that is to put all the text in a table and make the table 90% or so of the browser window width. <BLOCKQUOTE> is still easier.)

FrontPage Express has no easy way to insert the <BLOCKQUOTE> tag: you have to edit the HTML code. Word of Office97 inserts this code when you click the "indent" button.

Font Styles, Sizes and colors

The command (new in HTML version 3) gives you some command over the look of your text. You can specify which font to use, and what size.

 -- where the number is on a scale from 1 (small) to 7 (large). The default is size=3 which is about 12 point.

 -- to increase or decrease the text size relative to the current size. The numbers run from +1 to +6 and -1 to -6, though in practice you can't specify a number that would result in a text size outside the scale (e.g. if your present text is font size 4 and you specify  you will not get size-8 because it doesn't exist). This is useful mainly to use a font one size smaller than the surrounding text, for notes, copyright notices, etc.

 -- e.g. . The problem with this is that it will only work if the user has a font with that exact name on his/her machine. Given than Windows 3 users have fonts with different names than Win95 users (e.g. "Times Roman" versus "Times New Roman") and that some fonts developed for the Web only come with Win95 (e.g. Verdana, Tahoma), and what about the Mac (etc. etc.), using this feature can be problematic. Luckily you can give a list of possible fonts, and the user's browser will use the first one it finds. So if you are careful to include one very common font in thelist, and especially if you end the list with the name of a general font family, you should be OK. For instance:


Essentially this says: "use whatever sans-serif font you can find in this order; if you don't have any of the ones named, use whatever is defined on your machine as from that family."

 or  lets you color text, anything from one letter to the whole document. For instance:
COLORS!
You could do this like this: COLORS! Or like this: C etc. etc. FrontPage and a lot of other editors will let you choose the color from the Windows color-chooser palette, so you don't have to type all that in. It's easy but the choice is limited. If you want to choose from, for instance, the full Netscape/Internet Explorer palette of 256 colors, you will probably have to edit the code by hand and put in the right color codes. (You get them from a color table prepared for graphics work: there's one in the library of files supplied for this course).

Remember that the user can define whatever font he/she wants as the default font for his/her browser, and can choose not to pay attention to your fonts. Therefore avoid using different font faces to contrast different parts of your page. For instance, you are much better off using text commands such as <TT>, <KBD>, <CODE> etc. to distinguish between regular text and text that should be displayed differently from it: the browser will obey those codes whatever font the user has chosen.

In any case it is bad practice to use a lot of fonts in a Web page, just as it's bad practice to do it in a printed document, and for the same reason: the page usually doesn't look good. By all means choose a particular font for the whole page; and if you really feel the need, a different font for headings. Anything beyond that is overkill.

Special Characters (Escape Sequences)

Four characters of the ASCII character set - the left angle bracket (<), the right angle bracket (>), the ampersand (&) and the double quote (") - are used in HTML in writing markup tags. Because of this, if you want them to appear in your text, you have to tell the browser to just display them, and not try to interpret them as it usually would. In addition, there is no easy way to include in your text any characters that don't appear on your particular keyboard (such as accented characters).

To enable you to include such characters, HTML assigns each of them a name, or code. This name always starts with the ampersand sign (&) and ends with a semi-colon. Some of the more common codes are:

< is the code for <

> is the code for >

& is the code for &

" is the code for "

  is the code for a non-breaking space, i.e. a space that the browser leaves room for (whereas if the browser sees several regular spaces together, it elides them into just one space: if you really want to leave several spaces in a line, for instance to indent the first line of a paragraph, you have to use the non-breaking space characters).

The European accented letters also have names. For instance:

ö is the code for ?: a lowercase o with an umlaut

ñ is the code for ?: a lowercase n with an tilde

È is the code for ?: an uppercase E with a grave accent

A full list of supported characters can be found at http://www.w3.org. But unless you're trying to write French or German or some other accented language with a keyboard not designed for it, the ones above will cover most of your needs.