Free Simple HTML Tutorial

Text Structure

A page of unstructured text, with no line breaks, no paragraphs and no break from wall to wall text would be difficult to read and look awful! You may have already seen that I have used a line-break tag (<br>) in the examples. This lets you control where the line breaks come, instead of allowing the browser to decide where it is going to word-wrap a line of text.

Text online however is usually organised into paragraphs using the paragraph tag. Styles - as we have seen in the text style example can be applied that affect all the text within a paragraph. This style can also control how the paragraph is indented by the browser. Have a play with this:

<html>
<head>
<title>Text and Paragraphs</title>
<style></style>
</head>
<body>
Try resizing the page to see line-breaks. Here is a load of text that has no 
line breaks in it at all and no paragraph
tags. Here is a load of text that has
no line breaks in it at all and no paragraph
tags. Here is a load of text that has
no line breaks in it at all and no paragraph
tags. <b>not nice</b><br>
<hr>
Here is a load of text that has<br>
line breaks in it but no<br>
paragraph tags. Here is a load<br>
of text that has line breaks in it<br>
but no paragraph tags.<br>
Here is a load of text that has<br>
line breaks in it but no<br>
paragraph tags.<i>better</i><br>
<hr width=80% color=green>
<p>Paragraphs automatically add an extra
line after they finish. This is a simple paragraph with no line breaks within it at all.
This is a simple paragraph with no line breaks within it at all.
This is a simple paragraph with no line breaks within it at all.
</p>
<p style="color: red; font-size:10px" >All the text in this paragraph has font styles applied as defined
in the opening paragraph tag. This <span style="background:yellow">can be useful</span> if you want to make a paragraph stand out.</p>
<p style="color: blue; text-indent: 20px;" >This paragraph is indented. Believe it or not, CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute</p>
</body>
</html>

Are you human?

10161 + 28 =

If you play with the size of the browser window then you will see the value of paragraphs quite clearly. The paragraphs flow and always look quite good however narrow the space becomes, whereas manual line breaks start to look bad very quickly!

The horizontal rule (<hr>) tag is useful to seperate areas on the page. You can adjust its width to a percentage or an exact width, and change its color.

One more html tag is often used to format text content, and because of its universal useability I will introduce it here. This is the div tag (<div>) which has more styling definitions than I will show here. It can be explicitly positioned but we will use it here in what I call its 'flow' mode. This makes use of its float attribute to make the text drift to the left or right of the page and allow other text to flow around it. A div can contain anything else, text, images or links, paragraphs and even other divs.

<html>
<head>
<title>Flowmasterical Div Layout</title>
<style>

</style>
</head>
<body>
<p>Divs are called containers because they can contain anything. They are easy to use but they do have a lot of
styling controls which can get confusing. 
<div style="width:230px; border: 1px solid black; padding:5px; background:orange; float:right; margin:10px; ">
<p>Here is a div that is floated towards the right. If you play with the page size you can watch other content
flow around it.</p> 
</div>
The thing to remember is that the default behaviour of a div is suitable for most cases, if not you can over-ride it. A full discussion on positioning and controlling divs is beyond the scope of this course.</p>
<p>I will show you the most commonly used and most useful ways of using a div  within a simple document.
Have a play with it - change it to float left, change the width of it, change the border style - you can have
grooved solid dashed double or dotted styles of border in any color you want.</p>
<div style="width:200px; border: 1px dashed black; padding:5px; background:pink; float:left; margin:10px; ">
<p>Here is a div that is floated towards the left. If you play with the page size you can watch other content
flow around it.</p> </div>
Divs really come into their own when used to contain pictures and their captions. Dont worry we will get there soon!<P>
Now a word on HTML colors. You may have noticed I have been using color names. this can be restrictive, so HTML does provide another way to specify colors using hexadecimal. Thankfully most graphics paint programs tell you this number when you selct a new color. It will be a number like #fe2b23 or 23a9c1. This is used like this:
<div style="background:#f1ce70; padding:8px;">This should have a nice light browny yellow background. Its a good way of making your site harmonise with any pictures if you select a color from one of the pictures to use as an area background like this.</div>

</body>
</html>

Are you human?

10161 + 28 =

You now have the basics of text layout. Page layout can also be done with divs but it is easy to make a mistake and get lost. Tables can be used instead for simple pages which I find easier and is actually better because (at the moment) different browsers handle divs slightly differently.

Next: Hyperlinks

Tutorial Contents

Items marked with an asterisk (*) are optional

HTML Tutorial Keyword Density Tool Referrers

bookmark hit - internal hit - ... - www.bing.com - www.google.com - ... - ... - ... - ... - guiate.org - www.metanomics.net - ... - ... - ... - www.suprasociety.org - ... - www.safa.net - awayarticles.info - ... - wiki.ktb-systeme.de - ... - www.macplora.org - www.rogerstern.com - ... - www.ask.com - www.google.co.nz - www.scape-xp.com - landroidapps.com - www.google.co.uk - ... - www.sports-2.com - www.newyorkerr.net - ... - www.formp3player.com - www.baby-store-1.com - ... - ... - ... - ... - ... - www.wiibuy.biz - www.google.fr - www.google.de - www.google.nl - search.yahoo.com -

This list of people who link to this Tutorial page is automagically maintained. Link to us, send traffic, and get listed. Simple.