Intermediate HTML
Intermediate HTML
The easiest ways to enhance your text are familiar from the world of print on paper: bolding, italics and underlining. They require simple paired and nested tags (conveniently mnemonic) surrounding the text to be enhanced. For example:
Typing <b>This bolds the text</b>between the tags.
causes this display:
This bolds the text between the tags.
Similarly, <i>This gives you italics</i>between the tags:
This gives you italics between the tags
andThis <u>nderlines</u>the selected text:
This underlines the selected text.
Be sparing in your use of underlining, however, since it may tend to confuse readers used to underlined text being a link. In fact, it's probably best not to use it at all. The new web standards (see below) don't recognize the <u></u> tags.
These styles can be combined, but be sure the tags are nested properly:
For a really important statement, you can combine styles.
The HTML for this preceding sentence is:
For a <b><i>really important statement,</i></b> you can combine styles.
Be sure to NEST the multiple tags correctly.
You will often see, when you look at the HTML source code for pages on the Web, the tags <em></em> used instead of the <i></i>, and <strong></strong> instead of <b></b>. For a discussion of the issues behind this difference, see the Big Picture section of this guide.
Putting these conveniently mnemonic tags around your bolded and/or italicized text is certainly easy, but the best way to achieve even these simple text effects is through styles. Check this section—Styles: Basic Concepts—for more information.
Another consideration to be aware of when using italics: slanting the text does make the images of the letters go "against the grain," since the monitor's pixel grid is aligned at right angles. On some monitors with poor resolution, italics can be hard to read. I am trying to get away from using italics except very sparingly in my pages. Large sections of italicized text should certainly be avoided.
One method of text enhancement that is easier in HTML than in print is the use of color. It is so easy, in fact, that it is tempting to over-use it. When you have a good reason for it, however, and when you remember that not all monitors will display the colors exactly as you see them on yours, it can be an effective device.
Adding color to your text, to be inline with current standards, is a little more complicated than bolding and italics. It requires you apply appropriate styles to your text. Modern HTML editors will often do this for you, so the following will only briefly explain how to do this, but you can find out more about Styles: Basic Concepts, another section of this guide.
First, a note about colors. You can be pretty safe in using the names for the standard simple 16 colors: white (only on a dark background, of course!), black, red, green, blue, yellow, gray, maroon, olive, navy, purple, lime, aqua, teal, fuchsia and silver. But to be sure they display correctly, and if you want to use even more customized colors, you need to refer to them by a hexadecimal code that specifies the amount of red, green and blue in the color (this is why this scheme of describing colors can be called RGB colors). There is a very nice chart of colors at Lynda.com. (If you want to have Lynda's colors with you all the time, no matter the state of your internet connection, just save the single image that is her whole board of "swatches" by right-clicking your mouse anywhere on the screen.) Or you can copy the code for a color you like from another web page. Also, editors like Dreamweaver let you select colors from a palette and then put the code in for you.
Now, to color a piece of text using an inline style, which only applies in that one instance, use the <span></span> tags to enclose the text to be colored, and use this code:
<span style=color: red">This makes red text.</span>
(For larger chunks that cover multiple paragraphs, for example, use <div></div> instead of <span></span>.)
Instead of a word for the color, you can use the RGB code, of course:
<span style="color: #CC0066">This code makes a nice rosy color.</span> will display as
This code makes a nice rosy color.
Of course, whole paragraphs and headings can also be colored in this way, by substituting the appropriate tags:
<p style="color: red">A red paragraph</p>
<h2 style="color: red">A red level-2 heading</h2>
If you are going to want to have several different elements on your page colored the same way, it's best to insert style statements into the file's <head></head> section, or, better yet, to create a separate style sheet that can be used to affect elements on many different pages. See the Styles: Basic Concepts to learn how to do this.
REMEMBER ! Not only may different browsers display colors differently, but users with less- or more- sophisticated monitors than you have will see them differently as well.
You can use other styles attributes, or properties, to modify other text qualities, too, using the same basic syntax as in the coloring commands above. Size is one of these. You can re-size the text several different ways:
To make an inline style to display a chunk of text as larger than the surrounding, use this code:
Here is some <span style="font-size: larger">text that is larger</span> than the rest.
would display like this:
Here is some text that is larger than the rest.
See the Styles: Basic Concepts to learn how to transform these inline styles to sheets that can apply to an entire file or set of files. And you can consult some of the resources cited there to find more properties that can be used to specify text sizes.
Because you never know what size fonts your readers are using as defaults, I think the relative specifications are preferable. Plus you don't need to remember pitch counts and character widths. The text will be made bigger or smaller than the user's default browser text, but will not adhere to any absolute text sizing system. For some other issues to consider before resizing fonts, see below.
Another simple attribute that can be specified with styles is the typeface. To specify a Courier font for a chunk of text, use this code:
<span style="font-family: Courier, mono">An example of the Courier font</span>
displays this, no matter how the default font of the brower is set:
An example of the Courier font
You will notice that the property name is font-family, which means you should specify more than one actual font name. You do this because not all browsers can display all the fonts that you might have available to you for web page creation. To be safe, you should use a generic font-style descriptor such as "mono" along with "Courier," and sans-serif" along with "Arial." Browsers will display the first one in the list that they can. If a browser cannot display the font you specify, nothing terrible happens, it just continues to display the default font. But you should keep this in mind before spending hours developing a complex varying font decorative scheme for your page.
Also, some browsers allow an option to be set that will give the default font (also background, text and link colors, by the way) priority over specified changes. And, some users may specify certain fonts (for example, a large size) for important reasons (e.g., they cannot read smaller print on the screen). So you should think a bit before specifying any radical changes in font from the default.
HTML makes it relatively easy to insert special characters into your text. This can be quite handy if you are using foreign words, mathematical expressions or characters normally used in HTML tags:
| Gruß Gott ! | ½ × ½ = ¼ | <A href=" "> | Comme çi, comme ça |
The basic format for special characters is&xxx;, where the xxx is a numeric or letter code for the character. The coding for the German and the French, above, then, looks like this:
Gruß Gott! •Comme çi, comme ça
What makes this simple-sounding procedure more complicated is that different browser versions may display some characters differently. There are also two sets of "codes" for each character: the numeric code is an earlier effort, the more mnemonic letter codes were an attempt to make things easier for the increasing numbers of non-programmers writing HTML. One rule of thumb that I have come across is that it's ok to use the mnemonic codes (called entities) for the accented letters, &, < and >. Also for the copyright symbol (©) which is simply ©, for a non-breaking space, and • for a nice separator bullet: • .For all others, you're better off using the numbers. Ian Graham's Special Characters page gives more explanation of these issues as well as links to a complete table. There are links to some other special character tables on my home page. You can find others using an internet search engine. Just search for the ISO 8859-1 set, which is the technical name for this set of character codes.
It's easy to use styles to make the background color for your page something different than the default. The easiest way to assign colors (and other properties as well) to the body tag in your style sheet. The following code will automatically make your background color white:
body {
background-color: #FFFFFF;
}
or
<body bgcolor="black">
(See the Color section of Text Enhancement, above for a discussion of these color codes and how to use them.)
It's efficient to specify all of the display attributes in your <body> tag if you set the background color, particularly if you set it to a shade radically different from the usual white or gray. If a reader has their text set to an unusually colored default, that color may make their text unreadable on your background. These attributes are, in addition to text, link (for unvisited links), vlink (for visited links), and the largely unnecessary alink (for active link; usually the link is activated quickly enough that no one sees this change of color).
If you want to use a background graphic on your page, the procedure is similar. And styles let you do all kinds of wonderful things with background images. Check out this part of the Styles section of this guide.
Be cautious with background images, however. Even some graphics designed to be backgrounds can make text difficult to read. If your reader's browser can't display a background image for some reason, the background will probably just show up as the default. But it may make the attempt and result in an unreadable page. Check your pages with backgrounds especially carefully on low-end monitors.
You can also make other parts of your page, such as table cells and paragraphs, have particular backgrounds, too. Just create a class in your style sheet that specifies the background color or graphic, and then assign that class to the element you want to affect. See the Styles section of the guide for more information. There are also references there with all kinds of wild and beautiful ideas for page enhancement. Especially look at Zen Garden.
Divider bars can be very useful in visually breaking up long sections of text. The simplest kind is called a horizontal rule and is inserted with an HTML tag: <hr>. This places a thin line in your display:
Note that in the new web standards, all previously stand-alone tags such as <hr> need to be "closed." To close the <hr> tag just add a space and a closing slash to it: <hr />.
The width of the horizonal rule can be specified in a width attribute by percentages (recommended) or absolutely, in pixels (not a good idea because of varying window sizes among your readers). It can also be made thicker by adding a size attribute (in pixels, with the default is 1, as in the line above). An <hr / > with a thickness of 7 would look like this:
A further variation is possible with the addition of the attribute noshade, which makes the line solid instead of outlined, as default horizontal rules are:
You would specify this kind of bar by typing <hr size=7 noshade />
More elaborate dividers can be used as well, limited only by your own good taste, artistic talent, or disk capacity for saving images off the Web. Graphics files as dividers are inserted just as other images are, with <img src /> tags. For more information on graphics, particularly some sizing issues that come up when dealing with dividers, see the Illustration section of this guide.
IMPORTANT NOTE: All of the instructions in this and my other tutorials apply to authoring for the Web at present (mid-2007) and will continue to be useful into the future. But to be sure you are using the latest standards, especially as we get further from 2007, you can always check with the good folks at W3Schools.