Headings, Text Alignment, Paragraphcs, Images

Welcome to Lesson 5. By now you'r HTML Page should be similar to this:

<HTML>

<HEAD>

<TITLE> Your Title Here </TITLE>

</HEAD>

If your HTML page does not look like this or you're not sure how you got this far, please refer back to the previous Lessons.

Now it's time to add what you want on your web site.

Most people put a heading on their page. Unlike the Heading code, the heading is text to let the browser know what this site is about. There are different sizes of headings. The following is a list of headings and their code.

<H1> Heading 1</H1>

<H2> Heading 2 </H2>

<H3> Heading 3 </H3>

<H4> Heading 4 </H4>

<H5> Heading 5 </H5>

<H6> Heading 6 </H6>

For this tutorials heading we will have the heading "Poet's Tutorial Page" in Heading 2.

<H2> Poet's Tutorial Page </H2>

*Note* Remember most codes need an ending tag </codehere>

You ask how I got those centered? There is a code for that too. Most codes right now seem like a foreign language (which in a way it is), but it's fairly easy to understand.

To center text you would put the code <center> You're Text Here </center>

*Note* Text alignment will go first before any other tag

To center the your heading on your page, the code would look like the following:

<center><H2> Poet's Tutorial Page</H2></center>

*Note* The tags have to be open and closed in the order they were opened. Notice how <center> was the opening tag, so </center> would be the last tag. This will be consistant throughout web design.

Go ahead and put the heading on your page using the Heading Codes above. Center the Text using the example above.

Now you have a heading on your page it's time to put a paragraph on your page. A paragraph in HTML is just like a paragraph in a word processor, however you're using <P> as the HTML Code.

Now it's time to hit return/enter on your page to give you a new line.

There are two ways to put a paragraph. One is putting the code <P> and hitting return or if you would like the paragraph aligned center, left, or right, you would put the code

Depending on what type of alignment you want.

This will make your paragraph align your images and texts to the type of alignment you specified.

If you would like to use two paragraphcs the following code would be the same, but hit return on your keyboard

<P>

You will notice there is no </P> tag.. this is one of the exceptions to having an ending tag. It is not necessary to add a </P> tag unless you would like one.

Go ahead and put a paragraph that is aligned center on your next line in your page. Then hit return/enter to bring you to a new line.

Now that you have a paragraph that is aligned for center, lets put an image there.

Copy this image by right clicking it and using "Save As" and save it as the default smiley01.gif. Put it in the directory called Poet

Now log into your filemanager. (Use the link given for the filemanager, this will open up a new window so you don't have to close your Advanced HTML Editor page)

Once there, scroll down towards the bottom and you will see EZ Upload. Click on "Browse", go to the directory Poet, and find the graphic "smiley01.gif". Click once on "smiley01.gif", then click okay. This will put the graphic name in the box next to browse. Click on "Upload" and this will upload the graphic into your filemanager.

Now go back to your page you are creating. You should be just below your paragraph tag.

To add the smiley graphic to the web page. The HTML code is

The border tag that is set to zero eliminates a thin border line around the image. If you would like a border image you would simply put 1 or higher. However for this lesson, let's eliminate the border.

Now you page will have a graphic on it. But before we save this site there are a few things we need to add to make sure everything works.

Just like the <center> tag the <BODY> tag also needs a closing tag which is </BODY> Insert this tag on a new line right after your image code. This will close out the body of your HTML.

Now we've closed the body, the last thing we need to close before saving is the actual HTML tag. Which is </HTML> . In a new line after the closing body tag, add the closing HTML Tag.

Your web site should look similar to this.

<HTML>

<HEAD>

<TITLE> Poet's Tutorial Page </Title>

</HEAD>

</BODY>

</HTML>

Once you have a page similar to this, click on save at the bottom. This will put the HTML Page into your filemanager, and will automatically change your browser to the filemanager.

You now will see the HTML file and graphics located in your filemanager. If you do not see your files, make sure the boxes at the top of the filemanager for HTML, Graphics, Others are all checked, if not put a check next to all of those boxes and hit the referesh directory button located besides it.

After you see all your files, put a check next the the HTML file you just created and hit view beside it. This will show you what other people will see when they access your site.

And this is your first Basic Web Site

Now it's time to put some links on your site and add some geocities goodies. Proceed to Lesson 6.