The easiest of these to start with is the line break <br> because it works a lot like a return on type writer or an enter key, provided the line spacing is set to single space, in a word processor. It's real easy to use because it doesn't get a closing tag. It's one of the few tags that don't use closing tags. Just drop it at the end of a line, or wherever you want to start a new line. Let's try it.
| <address> Your Name <br> Your Address <br> City, State Zip Code </address> |
Now try that in your browser and see how much better it looks.
Paragraphs
The next thing we want to do is see how to creates a new paragraph. The paragraph tags look like <p> </p> and set off a new paragraph and creates a blank line to make the page easier to read in a browser.
The paragraph tag also make use of the align attribute. When you use the paragraph tag with the align attribute you can align a block of text left, right, center or justify. . Let's try some of these. Add the following to the body of your page.
| <p> The default align is left. </p> <p align= "right"> Aligns a paragraph to the right. </p> <p align= "center"> Aligns a paragraph to the right. </p> |
Here's a couple of examples of the paragraphs using the align attribute.
<P ALIGN="left"> This is a paragraph and it is aligned left, which is also the default. I not really sure why the even gave is this one. You could I suppose use the align attribute with ever paragraph tag then when you wanted to align left you'd need this attribute. I sure there are several other uses, I just haven't found any. Anyway, thought you should see it. You see how the text is aligned flush on the left and jagged in the right. That's left aligned </P>
<P ALIGN="right"> This paragraph is aligned right. This works well at the close of a letter. It also looks good when used for an author name right under a title. I'm sure you'll find many other uses but this all I can think of right now. </P> <P ALIGN="center"> This paragraph is aligned center.<br> This is kind of neat because you can use it to center an entire block of text. For example you might use it to center a poem and use the <br> tag to break up the lines. <br>Anyway you see how the block of text is centered and that's the important part. </P>
<P ALIGN="justify"> This paragraph is justified which means it is justified on both sides. This is my favorite paragraph tag because is thank it make the page look nice when both side are flush. Some people don't like text justified because it and cause eratic spacing between works. Still I think it's great. Try it and judge for yourself. </P>
The there's the block quote used for indenting blocks of text.
<blockquote></blockquote> Indents text from both sides
Add this to the body of your document.
| <BLOCKQUOTE> This is a blockquote. A blockquote indents a block of text. This is handy when you want to make a block of text stand out with out changing the justification. <BLOCKQUOTE> As you see here you can also use blockquotes in series or together to intent the test as much as you like. </BLOCKQUOTE></BLOCKQUOTE> |
The block quote tag indents a block of text. Try this in your document and see how it looks.
| <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE> See this is blockquoted trice. So you can indent as much a you want by using blockquotes. </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE> |
Another divider tag is the Horizontal Rule <HR> tag. Your can align a rule using the aline attribute just like a paragraph tag. Are you noticing a pattern here. We have now used the align attribute with three different tags, the headline, the pagagraph and not the horizontal rule. That's why HTML get easier as you go along. Many tags share the same or similar attributes. You can also change the size of the rule using the size attribute for thickness and the width attribute for the width. However, for the width you can also use a percentage. We control the color of the rule using the color attribute.
Alignment <HR ALIGN=LEFT | RIGHT | CENTER>
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=?> (in pixels)
Width Percent <HR WIDTH="%"> (as a percentage of page width)
Solid Line <HR NOSHADE> (without the 3D cutout look)
We can put these together like this: <hr align= "center" size= "5" width= "200" color= "#0000ff">
Just to get the feel of using horizontal rules try adding a few of these to your page.
| <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> <HR WIDTH=20% ALIGN=LEFT> <HR WIDTH=50% ALIGN=RIGHT> <HR WIDTH=100% ALIGN=CENTER> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=5> <HR WIDTH=60% SIZE=12> |
Normally the rule has a 3D effect with the center being clear. We can make the rule solid by using the noshade attribute. Try it.
| <HR WIDTH=30% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=5 NOSHADE> <HR WIDTH=90% SIZE=12 NOSHADE> |
Tags covered in this section.
Line Break <BR> (a single carriage return)
Paragraph <P></P> (closing tag is opional but you should make a habbit or
using it)
Align Text <P ALIGN=LEFT|CENTER|RIGHT|JUSTIFY></P>
Horizontal Rule<HR ALIGN=LEFT|RIGHT|CENTER>
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=? or %> (in pixels or as a percentage of page width)
Solid Line <HR NOSHADE> (without the 3D cutout look)