HTML - The Basics Tutorial
Part 3 - Positioning Text
In the last part we finished with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<font face="Arial" size="7" color="red">Welcome To My Homepage</font>
Which displayed the words 'Welcome To My Homepage' in large, red, Arial letters in the middle of your page.
In this part I am going to show you how to position text (or anything else) on your page. I will also show you some other useful HTML tags.
The <p> Tag
The <p> tag is extremely. P stands for Paragraph. It is used to break up text into paragraphs. To define a paragraph you just include the text inside the <p> and </p> tags. This will then group the text together and leave a space after it (like the paragraphs on this page.
The <p> tag has an attribute which can be added to it. This is the align option. You can specify three types of alignment (like in a word processor) - left, center and right. For example to align the text right you use:
It is up to you to decide whether to use the <center> tag or the <p align="center"> tag. I usually use the <center> tag as it is shorter which will reduce loading times. It is hardly ever necessary to use the align="left" attribute as nearly all browsers automatically align text to the left but some people use it.
The <br> Tag
Sometimes you will not want to leave a space after your paragraphs. To do this you should use the <Br> (break) tag. This tag is very useful as, wherever you insert it, it will start a new line. To create a new line without a space you use the <Br> tag and to create a line break you use <Br><Br>. There is no end tag for the <Br> tag.
This text is on a line
This text is on the next line
This is text after a line break
This is text after 3 <Br> tags.
The <hr> Tag
The <hr> tag is another very useful way of breaking up your page. It will insert a horizontal line like this:
As you can see this is an extremely simple to use tag. It has no closing tag. There are a few attributes for them but they are rarely used. You can change the height (in pixels) the width (in % of window or pixels) and the color (Internet Explorer only). Here is an example of how to create a line 30 pixels high, 50% of the window in blue (you will see it in gray if you are not using Internet Explorer:
<hr width="50%" size="30" color="#0000FF">
Comment tags are useful if you want to put notes into your HTML code which will not show up on the page. They can be used for copyright notices, little notes to tell you what each section of code is about, notes to people reading your code or anything else you want to use them for. Some web hosts use them so that their servers will know where to insert banners (they look for a specific comment which you must add). These comments take the form:
<!-- Your comment -->
The browser will ignore anything in a <!-- --> tag.
In the next part I will show you how to add hyperlinks and bookmarks to your page.
1999 - 2001 David Gowans