HTML Working with text

In our first week's primer lessons we learned a little about text and some of the things we can do with it. Your next question should be; is that all I can do with it? No! There are approximately 40 different HTML commands to manipulate text. However, before we explore more about text and the many things we can do let's discuss some items on good web page design.

Content is King! Just because you can do something; does not mean you should. For example the annoying BLINK command.(This command works in IE only.) See what I mean, it's cute for the first thirty seconds. Remember one of the first reasons people go to the the Internet for is information. Many people view the net as a new form of library, a virtual resource of current information. They are visiting your site for information on a very specific topic. Just as you are viewing this site for information on HTML page creation. Keep your content simple and easy to find. End users do not want to spend a lot of time looking for information and if they have to, they will quite often go to a different site. Most people will click a total of three times to locate information before leaving your site to go to another one.

Style Guides: A style guide makes sure that as your site grows it maintains a consistent look and feel and does not begin to look like a patch work quilt. Again your site may have great content and a lot of glitz but if users can't find what they're looking for they won't stay around for long. A good rule of thumb is an end user should be able to locate the information they need in three or less clicks.

The solution to this problem is to use a style guide. A style makes sure you have consistency and an even flow throughout your site. It is your road map. A well planned look, feel and navigation path and throughout your site. A style guide does three basic things;

First it ensures the site has a consistent look and feel. If the user follows a link that takes them out of your site the change should be apparent.

Second, it give the Web Developer a starting point. You can get a very basic version of a new site up very quickly by selecting the right style guide and simply entering in the text or copy. Some of the newer word processors do the same thing with desk top publishing documents called templates.

One of the questions I am often asked is how I go about starting to develop a site. Believe it or not I use index cards. One topic per card and no specific category to start with. Just brain storm at first, figure out what it is you want your site to say. Once you have a main theme for your site , then you can place the index cards in a logical sequencing order.

Third the style guide is a checklist to help make sure that you haven't forgotten anything. At times you may choose to deviate from the standard but you should never forget it completely.

Some of the best style guides are those developed for internal use within a company. Many firms use several different style guides depending on the goals for a particular site or page. It you are creating a site for a large company, the first thing you should explore is how their print media looks and it they are happy with that content style. This give you a stating point and you are not reinventing the wheel each time. Visit the HTML Writer Guild at http://www.hwg.org. On the Guild pages, you will find many different style guides to review.

Designing for Bandwidth Some site exhibit a behavior I call "T1-itis". The Webmaster has a T1 line and therefore assumes so does every one else. Don't! In fact, about half on the users on the Net use a dial up connection, that is typically 14,00-bps. So a 40-50 k graphic can take up to 30 seconds or more to load.

Here is a general formula for estimating how long a page will take to load. Every time the browser has to go back to the server for an image, figure a second of overhead before anything begins to transfer. Then figure the transfer rate on a 14,400-bps modem of between 1,000 and 2,000 bps. On a fairly good line you might average 1,700bps. The bottom line is is you have a fast Internet connection test your site on a slower machine and a smaller monitor to make sure your site looks and acts the same in all mediums.

If you want even more information on page design click here.

Text Commands

Instead of exploring all forty command I will concentrate on those that most people actually use. I will place them in alphabetical order to simplify things.

Address: <ADDRESS>

This sets text apart an an address and make the text appear italicized.

Bold: <B>

This one bolds the text

Base Font: <BASEFONT>

This works like the more popular font command, except the base font command also accepts style sheet command, such as the COLOR command. It is one of those commands that will be used more extensively when HTML 4.0 becomes the norm.

BIG: <BIG>

This command is great. This bolds text and bumps its size up a few pixels.

BLINK: <BLINK>

This command is only supported by Netscape and Mozilla. And in my humble opinion, hopefully, they will drop it soon. It make the text blink on and off.

Sample Text

• A color code. These come in two varieties hex such as "FFFFFF" which designates the color white. (Note: There are always six parameters and the parameters can be a combination of letter and numbers such as 6600FF, which denote the color purple) or simple words such as "red" which denotes the color "red".
• A command to change the text color

If you don't have a color chart in your back pocket click here to view one. If you have a color printer I strongly suggest you print it out as well. My thank to Doug at jacobson@phoenix.net for his color chart. (permission for use granted by Doug Jacoboson)

Changing the Color of all the Words on the Page

You have the ability to change a single word, a section(s) or all the colors within a page with the following four levels of command. These commands would be included inside your opening <BODY> tag..

• <TEXT="######"> Denotes all the text on the page.
• <LINK="######"> Denotes the colors of the links on your page. (The default color is blue)
• <ALINK="######"> Denotes the colors the links will display when clicked upon. (Think of this as a Active Link)
• <VLINK="######"> Denotes the colors of link after that have been visited.(Think of this as a Visited Link)

Here is the syntax for placing them inside your opening body tag.

<BODY BGCOLOR="######" TEXT="######" LINK="######" VLINK="######">

The opening and closing double quotes are very important, while some browser may display your information correctly others will not. When in doubt include them, if the browser does not require them they will be simply disregarded.

Here is an example where the background is "yellow", the text is black, the links are blue, the visited links are green and the active links are purple. I have use a combination of color words and hex codes, just to show you that you can do this. I personally prefer using all hex codes as I feel you get a more precise color definition.

<BODY BGCOLOR="yellow" TEXT="#000000" LINK="blue" VLINK="green" ALINK="#80080"

Question: What's the pound # sign all about and do I have to use it?

Answer: It depends. Later browser do not require the use of the # sign but if you want to make sure all browsers no matter how old display your colors properly to use it. I prefer to, it is only one more key stroke and it provides an added level of confidence.

Here are on sample pages with different text and back ground colors. Don't forget to look at the source code too.

How it looks

Use the same page you created for the working with text section of this week's lesson. Make your background color white, text color blue, links red, active links green and visited links purple. In the real world I strongly suggest you stick with a white background and black text, and to make sure everyone can view your page. Use hex codes only, no actual words for the colors.

Changing Colors of One Word at a Time

Okay so you only want to change the color of a single word. Remember the <FONT COLOR> flag. Here's the syntax:

This colors is <FONT COLOR="#2E8B75">SEAGREEN</FONT>

Sample: SEAGREEN

Question: I used three or four different <FONT COLOR> commands, but only the first one seems to be working?

Answer: I'll bet you have only one closing </FONT> command. Remember every time you use an opening <FONT COLOR> command you need a closing tag as well. (I'll bet your mother was always telling you to close the door too!)

Changing Text Fonts

Remember the <FONT FACE> flag? Here is its syntax. <font face="arial">This is arial font</font> In this case I chosen arial font. This is a safe on to use as most systems have the arial font installed on them. Below are some other examples, notice how some of them may show up on your system while others will not. Why? You have some of the specified fonts installed but not all of them.

This is regular font

This is arial font

This is algerian font

This is bookman font

This is braggadocio font

This is courier font

This is desdemona font

This is garamond font

This is modern font

This is symbol font (These are pretty silly. This is symbol font)

This is wingdings font (And these are wingdings.)

Just remember some of the older browsers may not process these commands are you intend to use them. You are also assuming (a very bad thing to do) the end user has that particular font installed on their system. Have fun but be careful.

Indents and Lists

Let's explore the use of indents and lists. I'll show you how I do it. Yes, there are other ways as well, however, this is one that I am familiar with and personally like.

Many begriming HTML programmers try and indent by simply adding blank spaces by pressing the space bar. Sorry it won't work. Browsers simply ignore all blank spaces except the first one.Iif you need to add extra white space the syntax for doing so is:

&nbsp;

The above command is called "ampersand command". This one creates a space as if you pushed the space bar.  It looks like this.

      See the five spaces? No, really. That's what I did. Look at the VIEW SOURCE if you don't believe me.

I know what your are thinking are there other things the & can do. Plenty. For a quick look just click here.

Bulleted Lists

Bulleted lists are a very cool way of organizing data and information. Here's a list on why I like to use them.

• They present information in an easy to read fashion.
• The bullets look cool.
• They make me look professional.

<UL>
<LI> They present information in an easy to read fashion.</LI>
<LI> The bullets look cool.</LI>
<LI> They make me look professional.</LI>
</UL>

It's really easy. It's actually the same two flags being used over and over again.

• UL stands for Unordered List. It means bullets will be used rather than numbers. Numbers will be explained later.
• LI stands for List Item. In HTML you don't need the closing </LI>, but in Cascading Style Sheets you do, so why not make it a habit now? It denotes the next thing that will receive a bullet.
• Note that no <br> break or <p> paragraph commands are required. The LI does all the work for you.
• /UL ends the entire list. HINT: If you use a center command before this, it doesn't center the entire list, it centers each item messing up the look of the list. If you would like to move the list closer to the center of the page, simply add more <UL> tags. I have found that three <ul> tags almost centers text on the page. Just remember, if you use three UL commands you need to close with three /UL tags. Like this:
  • <UL><UL><UL>
  • <LI>List Item
  • </UL></UL></UL>

Changing Bullet Shapes

Don't like round bullets, You want squares!!! Okay, you can have your list and squares too. Simply add the command TYPE="square" into your UL command. Like so:

Syntax:

<ul type="square">
<li>List Item 1 </li>
<li>List Item 2 </li>
<li>List Item 3 </li>
</ul>

Actual listing

• List Item 1
• List Item 2
• List Item 3

Numbered Lists

If you would like to create a list that numbers the items rather than just putting a bullet in front, HTML does that for you too! You could just number the line items yourself, but it's no fun and it time consuming.

<OL>
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>

Actual Listing

1. List Item 1
2. List Item 2
3. List Item 3

Nothing to it. The browser will continue to count up as long as you keep putting the <li></li> tag sets. OL stand for Order List.
Hopefully HTML is starting to make some sense to you by now. Remember to take you time in understand the basics you are after all learning a foreign language

Roman Numerals

Arabic isn't good enough for you, huh? Well simply place a TYPE="I" inside the OL command. Notice that is a capital "i" and not the number one. Here's what you get

Syntax

<ol TYPE="I">
<li>List Item 1 </li>
<li>List Item 2 </li>
<li>List Item 3 </li>
</ol>

Actual Listing

1. List Item 1
2. List Item 2
3. List Item 3

Did you notice how the roman numerals are right aligned? Meaning the right hand side of the numeral is flush on the right hand side and the left hand side is ragged.

Regular Letters

Roman Numerals?!?! I Want Letters! You are starting to get a little pushy you know. OK, regular letters. I can do that. Try this: <OL TYPE="A">

Syntax:

<ol type="A">
<li>List Item 1 </li>
<li>List Item 2 </li>
<li>List Item 3 </li>
</ol>

Actual Listing

1. List Item 1
2. List Item 2
3. List Item 3

But I Don't Want Capital Letters!

*sigh*

You can turn the letters or the Roman numerals to lower case letters by putting the lower case version of the letter in the OL flag.Give it a shot.

<OL TYPE="a"> Yep it's that simple

Start the Count After One

Maybe you don't want your count to start at one every time. That's easy to fix. Here's an ordered list that starts at four.

Syntax:

<ol start="4">
<li>List Item 1 </li>
<li>List Item 2 </li>
<li>List Item 3 </li>
</ol>

Actual Listing

4. List Item 1
5. List Item 2
6. List Item 3

Here's the syntax <OL START="4"> Try it yourself.

Putting it all together

Can I put these together? Yes. Just remember to close each one as you go. You could do something like an OL list and under each LI command for the OL, you could put in a small UL. Like so:

1. Main Heading
   • List item 1
   • List item 2
2. Secondary Heading
   • List item 1
   • List item 2

Here's the syntax:

<OL>

<LI>Main Heading
<UL>
<LI> List item 1
<LI> List item 2
</UL>
<LI>Secondary Heading
<UL>List item 1
<UL>List item 2
</UL>
</OL>

There is a pattern to putting unordered lists under one another. The first list gives you the solid bullet, and the second gives you the empty bullet. Each subsequent list after that gives you a square bullet. You can play with the text formatting all you want inside of all the list commands. Bold, italic, and any other one you want to use will work.

Definition Lists

There's one more set of list commands that manipulate the text for you. The lists above are all single item lists. Each pair of <li></li> tags completes one list item.

Here's What's For Dinner

Salad

Green stuff and dressing

The Meal

Mystery meat and mashed yams

Dessert

A mint

Here's the Syntax:

<H4>Here's What's For Dinner</H4>
<DL>
<DT>Salad
<DD>Green stuff and dressing
<DT>The Meal
<DD>Mystery means and mashed yams
<DT>Dessert
<DT>A mint
<DL>

Here's What's For Dinner

Salad

Green stuff and dressing

The Meal

Mystery means and mashed yams

Dessert A mint

Here is what is happening, I used an <h4> command to create a heading for my list. This is not actually a part of the list but simply a heading. Then I used the tag <dl> which stands for Definition List. It tells the browser that a double tier list is coming up. <dt> stands for Definition Term which is the first level in the list, for example; "Salad". <dd>stands for Definition Description or the second level in the list for example; "Green stuff and dressing."

By using the list commands you can present information to your readers in a smoother fashion than writing long drawn out paragraphs with a lot of detail. I use these lists all the time.

Using the commands you have learned from Week's One and Two create a page telling the class about you favorite recipe. Your page should have the following criteria:

1. A heading telling the name of the recipe.Make your heading size 4 and your font type Times Roman. For the body of your page use arial. For example: Ham and Cheese Pockets
2. A horizontal line with a width of 75% and centered separating the title from the following paragraph.
3. A brief paragraph describing the recipe.
4. The ingredients displayed in an unordered list with a small heading stating your ingredients
5. A second horizontal line separate the ingredients for the preparation steps
6. The preparation steps displayed in an ordered list with the small heading Preparation Steps.
7. A copyright symbol in the lower right hand corner of the page

Here's how I did it