WORKING WITH YOUR TEXT

[Basic Text Formatting Styles] [ Create a Basic HTML Document]
[
Special Characters (eg. #,@,<,>, etc.] [ An Exercise in Working With Character Entities] [ Headings]
[
More Formatting Features] [ Line Breaks] [ Horizontal Lines] [ Section Summary]

The basic (bare bones) HTML Web page needs to be formatted so it will look its best. The following is just a beginning.

YER BASIC TEXT FORMATTING STYLES

Most browsers support only four kinds of text formatting:

1/ bold 2/ italic 3/ underline 4/ monospace

There are many (thousands me bye) HTML tags that will produce these styles; however, we will (for the most part) use the following:

TEXT STYLE BEGIN TAG END TAG

 BOLD <b> </B>

 ITALIC <i> </i>

ALTERNATIVE TEXT TAGS

BOLD <STRONG> </STRONG>

ITALIC <em> </em>

MONOSPACE <code>or<kbd> </code>or</kbd>

Unfortunately, there is no way to predict how a given browser will display these styles, so I do not recommend using them.

HANDOUT #1

Create a basic (bare bones) HTML file and insert the following into the body section.

<U> My Computer Adventure </U>

<P>

The other day, I went to a unique computer store called <TT> Mad, Mad, Dan's Real Old Parts and Stuff</TT>.

There were <I>tons</I> of unexpected delights, including, believe it or not, a <B> Self-Help</B> section! For real. I saw signs like <I> GOT an old beat up 386? Here's how to turn it into a pentium!</I><b> (Keep the case and replace the rest!)</b>and <I> A few bites short of a full file --And Proud Of It!<I>

Save this file as htm2.htm -- open your Netscape browser and view your document.

NOTE: Most browsers (NOT ALL) will let you combine text formatting. For example:

<b><i><u> Hi </b></i></u>

Will give you a "Hi" that is bold, in italics and underlined.



HAND OUT #2

Many special characters (such as the ¢, <, >,½,®, ©, etc.) cannot be implanted into your HTML documents direct from the keyboard -- they require a special code called

CHARACTER ENTITIES.

You may use either the CHARACTER REFERENCE (ampersand and number sequence) or the easier to remember ENTITY NAME. For example:

50&#162 (¢) or 50&cent; (¢)

The following is a list of CHARACTER ENTITIES that you might find useful.

SYMBOL

CHARACTER

REFERENCE

ENTITY

NAME

<

&#060;

&lt;

>

&#062;

&gt;

¢

&#162;

&cent;

£

&#163;

&pound;

¥

&#165;

&yen;

©

&#169;

&copy;

®

&#174;

&reg;

&#176;

&deg;

¼

&#188;

&frac14;

½

&#189;

&frac12;

¾

&#190;

&frac34;

HANDOUT #3

Create a bare bones HTML document, give it a title called SYMBOLS.

"MAKE SURE YOU USE YOUR CHARACTER ENTITIES AND UTILIZE THE <P> TAG TO GIVE EACH SECTION ITS OWN LINE.

Place the following within the body section.

< > These symbols are used to enclose HTML tags.
25¢ is¼ of a dollar.
50¢ is ½ of a dollar.
75¢ is ¾ of a dollar.
© is the symbol for copyright.
® is the symbol for registered.

Save this file as HTM3.htm


SECTIONING YOUR PAGE WITH HEADINGS

Headings act as mini-titles that convey some idea of what each section is about.

To make these titles stand out, HTML has a series of heading tags that display text in larger, bold fonts. There are six heading tags in all, ranging from <H1>, which uses the largest font, down to <H6>, which uses the smallest font. Like most of the HTML tags, the heading tags must be closed -- example <H1> HEADING </H1>

The idea behind the different headings is that you use them to outline your document.

Build a basic HTML document in your text editor and try out the following headings.

Print a copy of this to pass in before you view it in your browser.

A FEW MORE FORMATTING FEATURES

The <pre> tag

The "PRE" is short for preformatted and you can normally use this tag to display preformatted text exactly as it is laid out. In HTML, preformatted text means text in which you use spaces, tabs, and carriage returns to line things up. Check out the following example:

Without the <PRE> Tag:

Here's some ditty, specially done, to lay it out all formatted and pretty. Unfortunately, that is all this junk really means, because I admit I couldn't scrawl poetry for beans.

With the <PRE> Tag:

          
          Here's
        some ditty,
      specially done,
    to lay it out all
  formatted and pretty.
Unfortunately, that is all
  this junk really means,
     because I admit I
      couldn't scrawl
        poetry for 
          beans.

Notice that the lines from the first poem are strung together, but that when the browser encounters the <pre> tag, it displays the white space and carriage returns faithfully.

Unfortunately, text that is placed within the <pre> and </pre> tags is not very pleasing to the eye; it formats the text in an ugly, monospaced, font. There is no way to avoid this.

NOTE: That is what the texts tell us! Try a few formating tags inside the <pre> tag -- you will find that many of them DO work inside the <pre> tag.

THEM'S THE BREAKS:

USING THE <BR> FOR LINE BREAKS

Like the <p> tag the <br> tag inserts a new line. However, the <p> tag always inserts a blank line. If you want to display text on a separate line, but you do not want a space between the lines, use the <br> tag. The <br> tag can also be used to create lists (there are better, more efficient methods for this that we will explore later) and it does not appear in that ugly monospaced font that the <pre> tag allows. Check out the following example.

<HTML>

<HEAD>

<TITLE> Line Breaks</TITLE>

</HEAD>

<BODY>

<H2> My List of Computer Books</H2>

The other day, I cleaned out my room and found<TT> a few useful books</TT>. There was <I> tons</I> of old junk -- I mean great books, including, believe it or not, a <B> book on HTML creation</B>. Here's a list of just some of the great titles I found:

<P>

Internet For Dummies!<BR>

Word Perfect For Dummies!<BR>

The Seven Habits of Highly Ineffective Couch Potatoes <BR>

Dieting? No, Sorry, You're <I> Way</I> Too Late For That! <BR>

The Big Basic Book of PCs!<BR>

Getting the picture yet!

</BODY>

</HTML>

In the list of books I added the <br> tag to the end of each line of text (except for the last one, I don't need it there). TRY IT OUT FOR YOURSELF AND DISPLAY IT IN YOUR BROWSER -- You will find that most browsers will dutifully display each line separately, with no space in between.

INSERTING HORIZONTAL LINES

The <hr> tag stands for "HORIZONTAL RULE" and will produce a line across the page, which is a handy way to separate sections of your document.

Try out the following for an example of the <hr> tag in action.

<HTML>

<HEAD>

<TITLE> HORIZONTAL RULE</TITLE>

</HEAD>

<BODY>

<hr>

<H2> Joke Of The Week</H2>

<hr>

<P> Humor makes the world go around and it also makes life more interesting.<TT> Clean Jokes Only Please</TT>. Why don't<I> YOU</I> Use the space <B> below</B> to insert one or two of your favorite jokes:

<P>

<hr>

Place your joke here <BR>

Use the <br> tag after each line of text you want seperated (single space your paragraph).

<P>

<HR>

</BODY>

</HTML>

THE LEAST YOU SHOULD KNOW ABOUT THIS SECTION