Web Design 101

Now that we have our web page, were going to give it a little more 'zazz' (my daughters favorite word). Let's change the appearance of the text by formatting it. To do that I'm going to give you a few tags to play with. Take a look at the chart below. You can use this as a reference for changing the text:

Some Basic Tags:

In later lessons, I'm going to show you another way write HTML codes to show the same effects, but for now, this way will work

Effect	Tag	Sample
Bold	<'b><'/b>	This is bold.
Underline	<'u><'/u>	This is underline.
Italics	<'i><'/i>	This is italics.
Line Break	<'br>	This is a line break
Paragraph	<'p>	This is a paragraph

There is no close tag for line breaks. Most times you won't have to close paragraphs either, but there are some times when you will need to close them. We'll discuss that in a later lesson. For now we won't close the paragraph tags.

Here are additional tags that you'll need to really get things zazzed up. These are the tags that will change the size and color of your text. These fall under the <'font><'/font> tags.

Font Tags
Effect	Tag	Sample
Larger	<'font size=3><'/font>	This is Larger Text
Smaller	<'font size=-3><'/font>	This is Smaller Text
Color	<'font color=red><'/font>	This is Color

• Font size: You can use almost any number. Small numbers from -6 up to -1 medium to large numbers from 1 through 8 and larger numbers from +1, to +4. Play around with the sizes to see how they work.

• Font color: You can use any of the following colors for your text: Aqua,Black, Blue, Fuchsia, green, Lime, Maroon, Navy,Olive, purple, Red, Silver, teal, white and yellow (I'll teach you that black background thing later on too. Stay tuned...)

Putting The Tags To Work:

Now we're going to copy the text below and paste it into our index.html document. Make sure you save it after you've copied the text. So, if you don't already have the document open, let's go into our storage shed web 101, and right mouse click on our index.htm to open it using Notepad. For those of you who don't know how to copy and paste, it's easy.

Highlight the text below by left clicking your mouse at he beginning of the paragraph. While the mouse is still pressed, drag the mouse to the end of the paragraph. Then somewhere in the highlighted text, right mouse click. You'll see a menu option. It should look something like this:

Scroll down to 'Copy' and click it. Then go you your index.htm. Let's replace the sentence we wrote in our last lesson. Right mouse click and you'll see a menu again. This time scroll down to 'Paste' and click it. Viola!! (sounds like waaalaaa) you should have the jumbled paragraph on your index.htm page. Save it (File, Save).

Copy this text:

Wow, Sam looked at Steph, Steph looked back at Sam and the pup looked at them both. They girls made circling motions with their index finger around their ears. At the same time they both said " What a weirdo!" "Jinx, you owe me a soda. "Jinx, you owe me a soda. Jinx, whoahhhhh…" They were about to finish their customary 3 times Jinx soda routine (this is always said when two people say the same thing at the same time), but they were startled by the shaking of the ground beneath them. Wait, it wasn't a shaking, it was more like a sliding. A smooth, slow movement. They grabbed onto each other in an attempt to steady themselves. Have you ever tried to steady yourself with something that was just as unsteady as you? Well, you know what happened next. Yep, WHAM, WHAM. They all toppled over onto the moving floor. They weren't hurt, but they were wondering why the floor was moving. "What the…?!" shrieked Sam, "Uh, I don't know!" screamed Steph. "What is going on?" Little did they know that they were standing on the back of a slow moving 600 pound giant Vassarasaurous. Vassarasaurous are usually in hibernation at this time of year but Vassarasaurous love the smell of Rackazacks and I guess the smell of a worried, sweaty Rackazack was just enough to wake the sleeping giant.

Once you paste it into your index.htm file, your document should look something like this:

Before we format the paragraph, I want you to take a look at how it looks as a web page. Go to your tool shed (web 101) and double click on index.htm. Pretty pitiful, huh? Of course we're not going to let it stay like that for long.

Let's get to formatting that pitiful web page in Lesson 3...

Definitions:

• Formatting: Formatting is changing the way the text, margins and paragraphs appear in you document. For our purposes, formatting is making your web page look the way you want it to.

Page 1 | 2 | 3 | 4 | 5

Last Modified: Tuesday, 26-May-2009 08:15:36 CDT

Tidbits & Stuff was born on Thursday, March 9, 2006
© 2006, 2007, 2008, 2009 Felicia A. Williams

Contact Us | Writing Guidelines| Privacy Policy