HTML From the Ground Up

by L. Downs

Working with Text

Last month you'll remember that we created a minimal first Web page. Once you put the basic HTML codes into place, you found that just typing in the text for your page didn't quite work the way you expected. To be a little more specific, you ended up with the world's worst run-on sentence.

This happened because HTML ignores something called "white space," which means spaces, tabs, and carriage returns. Any combination of one or more of the above characters is treated as exactly one space by your browser when it's figuring out how to display a page. This means you can add any of these characters to lay out your page of HTML code in virtually any way you want (such as adding lots of carriage returns to insert blank lines) in order to make the page of code easier to read, but without having any effect on the end result.

The downside of this is that you have to explicitly tell the browser (by using HTML codes) every time you want a new line to start, or insert a blank line, because just making it look right when you type in your text won't work. HTML uses the <BR> tag for this purpose.

NOTE: Until recently the <P> (paragraph) tag was also extensively used as the equivalent of two <BR><BR> tags to provide a blank line between paragraphs. This is no longer considered a correct use of this tag, for reasons to be explained later.

Now we have to backtrack a bit. Last month the code you typed in consisted mostly of characters enclosed between "greater-than" and "less-than" symbols (< and >), sometimes called "pointy brackets." A browser reading HTML always assumes that anything between these brackets is an HTML code, called a "tag." You need to keep this in mind if you want to include something like "Press the <F4> key" on a Web page, because the browser will think <F4> is an HTML tag and, since it doesn't recognize it, ignore it entirely (displaying "Press the key" on the screen). Later we'll go into how you can make these characters appear on a Web page, but for now you should reserve < and > for HTML tags only.

Getting back down to business, the <BR> (or "break") tag causes the text immediately afterwards to start on a new line. You can put in as many <BR> tags in a row as you want.

The <BR> tag is a "single" tag; that is, it can stand alone. The <HTML> and </HTML> tags you used on your first page, on the other hand, are "paired" tags, which means you always have to use two (the second will start with a slash just after the "<" bracket). Think of these as "on/off" tags. For example, if you want to make some of your text bold, put a <B> (or "bold") tag just before the text to be affected, and a </B> tag at the point where you want the bolding to stop. Another popular tag of this kind is the <I> (for "italic") tag, which should eventually be followed by an </I> tag.

Most HTML tags come in pairs (single tags such as <BR>, <IMG>, etc. are the exception, not the rule). A good rule of thumb in HTML is "If you open it, close it."

At this point, you should retrieve the file you started last month (the one with the run-on text) and try inserting some <BR>, <B> and <I> tags. Remember, one of the great pluses of HTML is that you can make your changes and immediately call up the changed file on your browser to see the results. (But don't forget to save your changes first; the browser loads your HTML file from your hard disk, not your screen, and if you make changes and don't save them the browser will still be displaying your older--unchanged--file.)

A useful tag is the heading tag, which comes in various sizes: <H1>, <H2>, <H3>, up to <H6> (<H1> is the largest and <H6> the smallest). You must always use a closing version of the tag (</H1>, </H2>, etc.) at the end of the heading. Be sure the numbers match. (Try making the first sentence of your text page into a heading and view the results).

Some tags allow you to add additional information on how you want the tag to work. For example, you can include in a heading tag the command ALIGN="CENTER" to cause the heading to be centered on the page:
<H1 ALIGN="CENTER">My centered heading</H1>
(View a sample version of the finished page)

This information is called an "attribute." You must always include a space before each attribute you add (there can be more than one in a tag), and the information after the equals sign should always be in quotes. Note that you don't have to include the attribute in the end version of the tag.

Next lesson: Adding graphics to your page.

Terms to know from this lesson

White space: Any combination of spaces, tabs, and carriage returns in the HTML code, which are collectively rendered as one space by the browser

<HTML> and </HTML> tags: Enclose all of the HTML code making up your page (excepting only the <!DOCTYPE> tag, to be covered later).

<HEAD> and </HEAD> tags: Enclose the "head" portion of the document, which contains the TITLE, search keywords, and other data not displayed as part of your actual page.

<TITLE> and </TITLE> tags: Enclose the "title" of your document, which displays in the title bar of your browser and is also used as the title of your page when saved as a bookmark. No other tags of any kind can appear between these tags, only text.

<BODY> and </BODY> tags: Enclose the actual "Web page" (the part appearing in your browser's main window). All of your actual visible page content must be contained between these tags.

<BR> ("break") tag: Inserts a carriage return in the displayed content

<B> and </B> ("bold") tags: Enclose text to be displayed in bold.

<I> and </I> ("italic") tags: Enclose text to be displayed in italics.

<H1> and </H1>, <H2> and </H2>, etc. ("heading") tags: Enclose text to be displayed and interpreted as a heading. The smaller the number, the larger the heading. These tags will also add a blank line before and after the heading.

Attribute: An attribute modifies a tag or gives more information about the contents of the tag. Attributes always appear in the opening tag and always in the form attribute_name="value". The quotes are required!

ALIGN attribute: Controls the placement of text or graphic enclosed or inserted by its parent tag

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.