HTML For Webpages

This page covers the following HTML tags:
<CENTER> <H#> <HR>
<P> <BR> <SPACER>
plus writing TEXT to the editor.

<CENTER> </CENTER>

The CENTER tag is probably the easiest tag to use. It has no elements or values and does only one thing, it centers whatever appears on the page until it is closed. On some pages this tag can be opened at the top of the page just after the <BODY> tag and left open until just before the </BODY> tag at the bottom of the page. Normally you would not want to do this though. There are places where this tag should be closed then reopened else everything on your page will be one below the other. To close the tag use </CENTER>.

<H#> </H#>

The <H#> tag is for Headings. The # is replaced by a number from 1 to 6 to specify the size, where 1 is the largest and 6 is the smallest. This tag does two other things automatically. It causes the text that appears within it to be in 'bold' face and it adds a blank line both before it and after it so this tag will take up three lines on your page.

THIS LINE IS USING THE <H1> TAG

THIS LINE IS USING THE <H2> TAG

THIS LINE IS USING THE <H3> TAG

THIS LINE IS USING THE <H4> TAG

THIS LINE IS USING THE <H5> TAG

THIS LINE IS USING THE <H6> TAG

The tag is written like this:

<H2> My HTML Webpage </H2>

Now lets put the CENTER and HEADING together with the codes we developed on the first page and we get this:

<HTML> <HEAÐ> <TITLE> My HTML Webpage </TITLE> </HEAD> <BODY BGCOLOR="#AAC6DD" TEXT="#000020" LINK="#000066" VLINK="#660000"> <CENTER> <H2>HTML My HTML Webpage </H2> </CENTER> </BODY> </HTML>

<HR>
The <HR> tag stands for 'Horizontal Rule'. It is used to draw a quick line across the page. The tag does not have a closing tag like the others so far. It does accept attributes or 'elements' to adjust the width and position of the line. If I just use the the tag by typing <HR> I will get this;
If I want the line to only run part way across the page I'll add the width element
<HR WIDTH=300> to get this:
If I want the line on the left side of the page I can either close the center tag or add the 'align element to the tag like this;
<HR WIDTH=300 ALIGN="LEFT"> to get this:

Or to move it to the right I'll change the 'align' element to 'right' like this;

<HR WIDTH=300 ALIGN="RIGHT"> to get this:

<P> and <BR>
These are two more common tags that do not have closing tags. the <P> is for Paragraph and the <BR> is for a line Break. When a <BR> is placed in text it causes the next word after it to start a new line on the page. The <P> does the same thing except it adds a blank line before the next word starts. A <P> works just two <BR>'s. <BR> can be stacked together to add more blank lines while only one <P> will be read by the browser for a given break. <P> <P> <P> has the same effect as one <P> while <BR> <BR> <BR> causes a line break plus two blank lines.

<SPACER>
For larger spaces use the <SPACER> tag. This is another tag that needs no closing tag. The SPACER uses a TYPE and SIZE element and either horizontal or vertical values (required). The value of the SIZE element determines the size of the spacer and is measured in 'pixels'. 'Pixels' are the tiny dots that make up the picture on your screen.
This is how a vertical SPACER is written and this is what it does:
<SPACER TYPE="VERTICAL" SIZE=100>
Notice the space above this line, that is the spacer with a SIZE value of 100 pixels. To make the spacer horizontal write it like this:
<SPACER TYPE="HORIZONTAL" SIZE=100>
If I put the spacer here that is what happens. This is more useful for tables and image spacing than text.
Now, let's get ready to write some text on the page. Since I don't want my text butted right up under the page heading I will add a blank space, and a horizintal line, then a larger space before I start the text. The codes for this are:
<P> <HR WIDTH=400>
<SPACER TYPE=VERTICAL SIZE=70>
Added to our codes it will look like this:

<HTML> <HEAÐ> <TITLE> My HTML Webpage </TITLE> </HEAD> <BODY BGCOLOR="#AAC6DD" TEXT="#000020" LINK="#000066" VLINK="#660000"> <CENTER> <H2>My HTML Webpage </H2> <P> <HR WIDTH=400> <SPACER TYPE=VERTICAL SIZE=70> </CENTER> </BODY> </HTML>
Now we can write our text. Keep in mind that in formatting your text on the page, the browser sees the text as one long line no matter how it looks in the editor. The only way the brower knows to end a line and start a new one is when it runs to the edge of the page, then it will 'wrap' to the next line automatically. To force a line break or a paragraph separation you must use the <BR> and the <P> tags in your text. The text will be written using the default text size and the color specified in the BODY tag. When written in the editor it will look like this:

<HTML> <HEAÐ> <TITLE> My HTML Webpage </TITLE> </HEAD> <BODY BGCOLOR="#AAC6DD" TEXT="#000020" LINK="#000066" VLINK="#660000"> <CENTER> <H2>My HTML Webpage </H2> <P> <HR WIDTH=400> <SPACER TYPE=VERTICAL SIZE=70> Welcome to my Homepage. I learned to make this page with HTML and without the use of a page builder from Techniguy's Homepage Help Site. <BR> I have learned many new things from Techniguy's Help Site and have enjoyed it all. <P> I never knew writing webpages with HTML could be so much fun and I am looking forward to adding images and links and more to this page. <BR> </CENTER> </BODY> </HTML>
Now lets see how our page looks when we view it.

My HTML Webpage

Welcome to my Homepage. I learned to make this page with HTML and without the use of a page builder from Techniguy's Homepage Help Site.
I have learned many new things from Techniguy's Help Site and have enjoyed it all.
I never knew writing webpages with HTML could be so much fun and I am looking forward to adding images and links and more to this page.

Well, that's a start anyway. Lets decide what we want to put on the page next while we click to the next page.

BACK

NEXT