Basic Text Formatting

(If you don't see a solution to a formatting problem you have, try checking my HTML 2.0 Extensions section of the index.)

Paragraphs and Simple Line Breaks

Unless you specify otherwise, HTML text will wrap inthe browser window unaided by text formatting tags. But it does not recognize carriage returns, so you have to format those yourself.

The most commonly used tags are probably those used for line breaking within chunks of text. There are two kinds of tags generally used for this type of text formatting: the simple line break tag and the paragraph tag .

The line break tag acts like a simple carriage return:

There is a line break
tag after the word "break" in this sentence.

The paragraph tag adds a blank line after it is inserted:

There is a paragraph

tag after the word "paragraph" in this sentence.

Back to the top

Headers

The header tags are generally used for heading sections of text, and range in size from a level of 1 to a level of 6. The <H1>...</H1> tag pair gives the largest type and <H6>...</H6> gives the smallest. Headers are also made bold for emphasis. The tags come in pairs and you must use the closing tag to go back to regular text. Headers automatically cause a blank line to follow them; a will be ignored.

This is a level 6 header.

This is a level 5 header.

This is some normal text followed by no or .

This is a level 3 header.

Level 1 header!!!

Back to the top

Font Styles

This is the "emphasis" style.

This is the "strong" style.

This is for making a font bold.

This is for putting text in italics.

Underlining text doesn't work, despite what they say.

<TT>This is for putting text in a typewriter-esque font.</TT>

Back to the top

Indenting

Since HTML doesn't recognize empty space past one character, indenting must be handled through the use of tags. The

<PRE>

 tag      can be used for lots     of  different
kinds of preformatted text  effects, including
     s p a c i n g but as you can see, it also makes 
the text look kinda funny.

</PRE>.

Lists are usually used for indenting text:

Back to the top

Definition Lists

There are a couple of tags associated with definition lists. The <DL> ... </DL> tags encapsulate the entire definition list. Within those tags are the <DT> and <DD> tags. The <DT> tag is used to denote a definition term, and the text following the tag will not be indented. The <DD> tag is used to denote a definition, and the text following it is indented.

Here are some examples. Select 'View Source' from the View pulldown menu to see how they're done:

A Basic list:

Kumquats: Kumquats are fantastic! My mother uses them most often in the winter, and puts them in stewish dishes, with duck or pork. I love tart foods and they are very tart -- they kinda seem like a cross between lemons and grapes.
Gooseberries: I used to think that gooseberries were imaginary, but my grandparents grow huge gooseberry thickets in their back yard.
My grandparents make pies and preserves out of their gooseberries. They gave me a wonderfully huge jar of rasberry-gooseberry jam when I went away to school last fall.

An example of simple indentation:

I just wanted to indent this sentence.

An example of more complex indentation:

You can nest definition lists to get nested indentation...

but you have to remember to put a new set of <DL> and </DL> tags around each of the nested lists too...

or else it'll look all wrong!

The <DL> and <DL> tags include an automatic paragraph tag so the list will be set off from surrounding text. The <DT> and <DD> tags include an automatic line break, so you don't need to add a or at the end of each term or definition. If you do, extra space will be added after the term or definition accordingly.

You may, by using the and tags, create paragraphs within a term of definition.

Back to the top

Ordered Lists

Ordered lists take the form of a standard outline, and like definition lists, have a couple of tage associated with them. The whole list is contained with the <OL> and </OL> tags. Each item in the list is precedented by the list item tag, <LI>. The tags associated with ordered lists automatically take care of setting the list off from surrounding text and putting each list item on a new line. If you add or tags, you will get extra space. List items can be several lines long with wrapping text.

Here's an example of an ordered list. Select 'View Source' from the View pulldown menu to see how it's done:

Some animals I've seen on Goddard grounds

Geese
Chipmunks
Deer
1. Bucks
2. Does
3. Fawns (they're sooooo adorable!)
Strange little birds that next in the gravel by the parking lot and rush anyone who walks too close.

Back to the top

Unordered Lists

Unordered lists are just like ordered lists, except they replace the ordered numbers with bullets of various kinds. The unordered list tags are <UL> and </UL>. The tag for a list item is the same as for ordered lists: <LI>.

Here is an example of an unordered list. Select 'View Source' from the View pulldown menu to see how it's done:

I like to:

Eat ethnic foods
- Ethopian is a favorite
- Have you eaten at an Afgan restaurant? Try it!
- Sushi is great
- Moroccan is fun, but I always get overstuffed
- I love West African stuff
- My mom knows some fab Brazilian and Portugese restaurants
- And, of course, the old standards:
  - Greek
  - Chinese
  - Indian
    - Past three levels of indentation, all you get are these stupid little squares.
Go to jazz bars (for the jazz, of course!)
Bake cakes (my brother is in charge the cookies)
Drive around (just got my licence... about time!)
Play on the 'net

Back to the top

Back to the index

Last updated 28 june 95 by katie