How to insert horinzontal rules/lines
Paragraphs and how to use them
So far in this section, we've looked at the principles of HTML (tags, elements and attributes), and we've written our first, simple, HTML page.
Now, we'll look at how to format the 'body' of the page, using a few simple tags.
Using line breaks
We'll start with a very easy tag to use - <br>. BR means break, or line break. This tag is one of the few in HTML which does not require a closing tag.
Each time you insert a <br> into your HTML, you force the browser to start another line. Normally the browser will 'wrap' the text to the width of the window. This tag overrides that. This can be useful, for example, if you wished to include an image on the line below some text, or to be sure that a sentence started on a new line. For example -
You can use the tag more than once, like this -
Remember that HTML ignores 'whitespace' in your documents. It only sees a normal line break in your document as a space, so if you want to be guaranteed a line break, you must use
Using horizontal rules/lines
In your pages you might want to separate parts of the page by drawing a (horizontal) line between them. This is easily achieved using the <hr> tag. HR stands for horizontal rule. As with the <br> tag, this doesn't need a closing tag. A simple use of the code <hr> produces this -
Which creates a line all the way across the screen, in a grey color.
There are several attributes of the <hr> tag that we can use to control the appearance of it. We can control the width of the line, using the width attribute. We can set the width to be either a specific size (in pixels), or as a percentage of the width of the window. For example,
Produces a line with the width 50% of the window, like this -
Or, specifying an exact size in pixels -
Which produces a line 200 pixels wide -
The color of the line can be set (this only works in Internet Explorer) using the colorattribute. E.g. -
Which makes a red line - (if you're not using Explorer to view this page then you won't see the effect!) like this -
We can mix the two attributes as well, so for example -
produces a blue (in Explorer only!) line which is 70% the width of the window -
Paragraphs are an easy way to split a large amount of text into smaller sections. The tag is nice and easy to use, and easy to remember - <p>. You don't have to use a closing tag, but it's good practice to do so anyway.
This tag essentially makes two line breaks before beginning the content
The alignment of the paragraph's contents can be controlled using the align attribute. This attribute can be set to one of three choices - center,left, and right.
So, for example, if you wanted a paragraph of text to appear in the center of the screen, you'd use this code -
Which would appear like this -
I'm a centered paragraph!If you're from England, remember that center needs to be spelled the American way, rather than centre . The same goes for color rather than colour.
OK, so that's introduced you to some easy, basic tags, which you can use to give your pages some structure. Now, let's see how you can liven your pages up by changing the font color, face and size..
|Introduction - The Basics - Moving On - Advanced - Glossary - Reference|