Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square The Basics
square What are tags?
Square Making a first page
Square Basic formatting
Square Fonts-color and size
Square Styling your text
Square Writing 'good' HTML
Square Adding comments
 
How to insert line breaks
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 -

Some text and then <br> a line break.

You can use the tag more than once, like this -

Some text and then <br><br> two line breaks.

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 <br>

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,

<hr width="50%">

Produces a line with the width 50% of the window, like this -

Or, specifying an exact size in pixels -

<hr width="200">

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. -

<hr color="red">

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 -

<hr color="blue" width="70%">

produces a blue (in Explorer only!) line which is 70% the width of the window -


Using paragraphs

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 -

<p align="center">The text....</p>

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..

TopTop of page - BackMaking a first page - Next - Fonts, colors and sizesNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference