Basic Exercises
· Introduction
· ex. 1 - Make a page
· ex. 2 - Head & Body
· ex. 3 - Attributes
· ex. 4 - Text
· ex. 5 - Colors
· ex. 6 - Hyperlinks
· ex. 7 - Anchors
· ex. 8 - Graphics

Join our mailing list to receive tips and tricks.

HTML TUTORIALS: Ex. 4 - Text and Text Manipulation Techniques

EXERCISE 4: TEXT AND TEXT MANIPULATION TECHNIQUES :

As you saw in exercise 3, to add regular text, all you need to do is type it out inside of the opening and closing body tags. Your browser will display it using it's default font size, usually 12pt.

Don't worry about what a pt is right now. Just know that it is a unit of measurement used by the browser. We'll manipulate size later. There are, however, tags that can liven up our plain old text.

SECTION A:FORMATTING TAGS:

The most commonly used tags are the bold tags "<b></b>" and the italic tags "<i></i>". For example, <b>Bucktowndusty is great!</b> and <i>..really great!</i> would produce - Bucktowndusty is great!..really great!.

I will bet you money that your most common mistake when you start making web pages will be forgetting to end one of your bold tags. I can't count the number of times that I've done this. You'll see.

You can also use the underline tags "<u></u>" to add emphasis. However, it's hardly ever used because people think the underlined word or words are links to another page.

SECTION B:SPACING TAGS:

When typing text in an HTML document, the only spaces that the browser will recognize are single spaces between words. So, if you are typing and hit the space bar 2 or 3 times between words, the extra spaces will be ignored. The same holds true for hitting the enter key. Hitting the enter key will not be recognized by the browser.

HTML provides several tags to aid you with spacing. If you ever did need to add extra spacing before a word or between words for such things as indenting text, you would use &nsb;. &nsb; stands for "non breaking space and is one of many special characters that you can use in html.

Special characters aren't used too often, so don't worry about them too much. I won't go over all of them now, but you can print out our abbreviated special character list now and save them for later.

The <br> tag is used to stop a line and go to the next. The break tag has no ending tag. It's one of the few that don't. When you use the <br> tag, your text will go directly under the line above with no space between. If desired, you can use 2 break tags in a row to create a line break between 2 sections of text. Using this method has the sames results as our next tags, the <p></p> paragraph tags.

The <p> tag automatically puts a line break before and after whatever is inside of the paragraph tags.

For example, if you typed, "Hello there. <p>How are you?</p> I'm fine," it would be displayed like this:

"Hello there.

How are you?

I'm fine.

One last spacing tag is the <hr> tag (Horizontal Rule). Like the <br> tag, it has no ending tag. It is used to visually seperate different sections of the web page. I have been using them throughout my tutorials. As a matter of fact, there's one right below!!!!!

SECTION C:HEADING TAGS:

Sometimes, it becomes necessary to seperate your web page into sections. When this occurs, it's a good idea to label each section with a heading of some sort. HTML provides you with the following 6 different heading tags:

<h1> Heading Size 1 </h1>

<h2> Heading Size 2 </h2>

<h3> Heading Size 3 </h3>

<h4> Heading Size 4 </h4>

<h5> Heading Size 5 </h5>

<h6> Heading Size 6 </h6>

(Notice how each heading creates space before and after just as the paragraph tag did.)

H1 is the biggest size and h6 is the smallest. As you add more sub headings to your document, you should use a heading with the next highest number, decreasing in size each time.

Don't forget that the <hr>, <p>, and <hⁿ> tags also have attributes that you can use. For example, you can center them with the use of an align="center" attribute. To be honest, I don't use the heading tags too often, but they are useful.

SECTION D:FONT TAGS:

We have already seen some tags that let us bold and italicize our text as well as increase or decrease the size of our text with the use of heading tags. The <font> font tag lets us do even more by allowing us to change the size as well as the font face and color of the text. We won't be changing the font face or color right now. We will be concentrating on the size attributte.

Font sizes range from size 1 to size 7. Font sizes are the exact opposite to headings. The smaller the font size you use, the smaller the font will be. The normal, default size of text that a browser will display if we have not added any formatting tags to it is size 3. An example using font size would be:

<font size="3">Hello</font>

You can change a single letter, a word or group of words, or an entire page of text with the font tag.

The font tag might eventually be done away with, though. The organizations responsible for setting HTML standards want people like you and me to use something called Style Sheets. Do you believe the nerve of those people!!!!!! Most browsers still accept the font tag and probably will for some time, so you shouldn't have to worry too much about it. I will be showing you how to do styles later anyway.

SECTION E:LIST TAGS:

Lists are the final method of text manipulation that we will be going over. Lists help to call attention to sections of text that we wish to emphasize. We can use either an unordered list or an ordered list. Each list has starting and opening tags ( <ol></ol> and <ul></ul> with each point of interest within the list having a <li></li> ). Examples are:

Ordered List
Coding You Would Type	Result
<ol> <li>Cars</li> <li>Boats<li> <li>Houses</li> </ol>	Cars Boats Houses
Unordered List
Coding You Would Type	Result
<ul> <li>Cars</li> <li>Boats<li> <li>Houses</li> </ol>	Cars Boats Houses

As you can see, lists are a very nice way to group related data. Lists are slightly indented from the rest of the text to add to their emphasis.

Next, we will type in the coding below to get practice using the tags listed on this page. The coding will demonstrate how we could create a mock resume online.

REMEMBER: Be confident. You have alot to type below, but just stay focused and have fun!



<html>
<head>
<title> Bucktowndusty's Mock Resume Page </title>
</head>
<body>

<h1>Bucktown Dusty</h1>
<h6>100 Tutor Street · Teacherville, MD 21771 · 301-555-1212</h6>

<h2>Objectives</h2>
Find a job teaching people HTML, while being able to <i>work at home</i> in my slippers and listening to the radio.

<p>I'd also like to be able to <b>make tons of money</b> doing so!</p>

<h2>Education</h2>
<ul>
<li>Practiced HTML on my own for 1 year.
<li>Taught students HTML for 3 years using book knowledge.
<li>Wrote HTML for 4 years for a major web design company.
</ul>

<h2>Employment</h2>
I've worked at <font size="7">many</font> places.
</body>
</html>

Our mock resume page looks pretty good. The formatting that we applied works well. Yet, the page could be improved. I want you to try and think how you could improve this page. Could we center anything? Could we maybe add an hr tag somewhere? Let's do the assignment below.

ADDITIONAL ASSIGNMENT:

I'd like for you to do the following steps:

Add a horizontal rule under the address and phone number heading.
Examples you could use:
<hr align="center" size="10" width="75%">
<hr size="1" width="100%" noshade>
<hr align="center" width="200">

Center all of the headings using the "align="center" attribute inside of each heading tag.

If you would like to see how I changed the coding above, look at either my modified page or the coding to create the modified page.

I know! I know! When are we going to do some fun stuff like adding color to the web page? EVERYONE, that I've taught HTML to wants to do colors 1st. It was as if nothing else mattered. So, I will cave into popular demand and go over color next.

Later, I will finish off with adding graphics and hyperlinks to the pages.

In the next exercise you will learn about color names and color values and how to apply them to your coding.

END OF EX. 4 - TEXT AND TEXT MANIPULATION TECHNIQUES

<-- Back to Exercise 3: Tag Attributes | Forward to Exercise 5: Fun with Colors-->

Home | HTML Tutorials | Color Charts | Practice Area