How to use HTML tags to manipulate your text
Okay, it's time to start making our text appear in different ways. Let's start by giving you some tags to work with:
<b></b> This is the tag for bold text. Example: <b>Howdy</b> This will show up on your page like this: Howdy
Here are a few more to start working with:
<u></u> Underline text <u>Underline Me!</u> Underline Me!
<i></i> Italics <i>Isn't this fun?</i> Isn't this fun?
<strike></strike> <strike>You're Out!</strike> You're Out!
<center></center> <center>This centers text on the page</center>
This centers text on the page
Having fun yet? You can also use more than one tag at a time. Let's say you wanted something in bold and italics. To do this, just place both opening tags before the text.....and remember to close both tags afterwards....like this:
<b><i>I am bold AND Italic, which makes me cool!</i></b>
This will show up like this:
I am bold AND Italic, which makes me cool!
Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as if you want to validate your HTML code). Here's another way to look at working inside out. I could write the HTML this way:
<b> <i> I am bold AND Italic, which makes me cool! </i> </b>
This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.
So lets try three things: Bold, Italic, and underline!
<b><i><u>Would you stop tagging me!</b></i></u>
<b></b> This is the tag for bold text. Example: <b>Howdy</b> This will show up on your page like this: Howdy
Here are a few more to start working with:
<u></u> Underline text <u>Underline Me!</u> Underline Me!
<i></i> Italics <i>Isn't this fun?</i> Isn't this fun?
<strike></strike> <strike>You're Out!</strike> You're Out!
<center></center> <center>This centers text on the page</center>
This centers text on the page
Having fun yet? You can also use more than one tag at a time. Let's say you wanted something in bold and italics. To do this, just place both opening tags before the text.....and remember to close both tags afterwards....like this:
<b><i>I am bold AND Italic, which makes me cool!</i></b>
This will show up like this:
I am bold AND Italic, which makes me cool!
Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as if you want to validate your HTML code). Here's another way to look at working inside out. I could write the HTML this way:
<b> <i> I am bold AND Italic, which makes me cool! </i> </b>
This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.
So lets try three things: Bold, Italic, and underline!
<b><i><u>Would you stop tagging me!</b></i></u>
This will give us:
Would you stop tagging me!
But this:
<u><i><b>Would you stop</b></i>tagging me!</u>
would give us this!
Would you stop tagging me!
As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!
Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the <center> tag. Anything you place between the <center> and </center> tags will be centered on the page. Here is an example:
<center>I'm in the middle!</center>
This will give us the following:
I'm in the middle!
You can also use it with one or more of the other tags above, like this:
<center><b><i>Look at me now!</i></b></center>
Look at me now!
Now you may be wondering why everything is just on one line. Well, in the next section, I'll show you how to make the text move to the next line with the line break tag. You'll also see how to use headings and paragraphs. So, let's move on to the next step, where you will learn about headings, paragraphs, and line breaks.
Would you stop tagging me!
But this:
<u><i><b>Would you stop</b></i>tagging me!</u>
would give us this!
Would you stop tagging me!
As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!
Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the <center> tag. Anything you place between the <center> and </center> tags will be centered on the page. Here is an example:
<center>I'm in the middle!</center>
This will give us the following:
I'm in the middle!
You can also use it with one or more of the other tags above, like this:
<center><b><i>Look at me now!</i></b></center>
Look at me now!
Now you may be wondering why everything is just on one line. Well, in the next section, I'll show you how to make the text move to the next line with the line break tag. You'll also see how to use headings and paragraphs. So, let's move on to the next step, where you will learn about headings, paragraphs, and line breaks.
www.pagesource.com
0 komentar:
Post a Comment