Lesson 04

Lesson 04

Your First Web Page

With few exceptions, HTML tags exist in pairs. The first tag activates a feature, and it's partner deactivates the same feature. The opening tag looks exactly like the closing tag, except the closing tag has a forward slash just inside the opening angle bracket. Example:

Opening Tag:

All relevant text would go between these tags. Although you can go out and purchase an authoring system designed to help you write HTML, they all require you to have some knowledge of the language in order to create anything more than a basic web page.

Now, this is the moment you've all been waiting for. I'll go step-by-step and create a Web-Page, but I want you to join me because it just wouldn't be fun doing this all alone. The Web-Page we create will just be in Windows Notepad and will be all HTML tags.

1.First, Start Windows Notepad (or SimpleTest for Mac Users)

2.Now, just type in the blank screen provided and press the return key.

Your document should now look like this:

Please remember that the HTML language is NOT Case Sensitive. , and will all work fine. Note that special characters are case sensitive, such as is not the same as  . The lower case version is correct for special characters, which are mentioned later.

3.Let's Create the Document Header

Type a tag and press enter.

Your document should now look like this:

4.Let's Create the Title

Type a

Type a Description:

Typing a description is very important, because people viewing the search engines will need to see this. This is a form of Meta Tag, and goes between the tags of your document. Go to http://www.altavista.com and do a search for anything. You'll see descriptions. That's what you will be focusing on creating now. Descriptions should be less than 250 characters, or search engines will have a tendency to truncate them (chop them off the end) after that.

On the line below your title, type the following description:

Once your done properly inserting the above code, that's what will show up when someone does a search on your Website.

You Web Page should now look like this:

Another very important meta tag is the keyword tag. Search engines allow you to type a list of 'keywords' you feel will best describe your business or endeavor. Just use the following meta tag, just like the description tag, and type them between the tags. By the way, meta tags don't have closing tags, in case you haven't noticed already.

Don't make your keyword list over 750 characters, or search engines will tend to truncate them.

Your Webpage should now look like this:

Finally, Close the header tag:

Next, start the body. All your actual paragraph text will be enclosed between the body tags and all times, and will never be between the header tags. After adding the opening body tag, your document should look like this:

Now let's type a heading. Don't confuse a heading with a header. A heading is oversized text (which search engines focus on), and comes in 6 different flavors.

Very Large

Very Small

Let's type a Heading in

Welcome to my Web-Site

Now, your document should look like this:

Welcome to my Web-Site

The Paragraph and Blockquote Tags:

Say you want to write a few paragraphs to put on the Web. You can use paragraph tags like this:

Type paragraph text here.

or, you can use Blockquote tags like this:

Type paragraph text here.

Here's an example of a paragraph using Blockquote tags:

Always use Blockquote tags. The reason is because Blockquote tags format much nicer, and indent the text by 5 spaces on both sides. Paragraph tags tend to display your text right to the edge of your screen, frustrating your visitors by making them look to the right and left edges of your monitor.

Now your page should look like this:

Welcome to my Web-Site

Always use Blockquote tags. The reason is because Blockquote tags format much nicer, and indent the text by 5 spaces on both sides. Paragraph tags tend to display your text right to the edge of your screen, frustrating your visitors by making them look to the right and left edges of your monitor.

Now, let's finally close the body. Here's how your page will look after closing the body:

Welcome to my Web-Site

Always use Blockquote tags. The reason is because Blockquote tags format much nicer, and indent the text by 5 spaces on both sides. Paragraph tags tend to display your text right to the edge of your screen, frustrating your visitors by making them look to the right and left edges of your monitor.

Last Step! Close the final HTML tag. Here's how your document will look after doing this:

Welcome to my Web-Site

Always use Blockquote tags. The reason is because Blockquote tags format much nicer, and indent the text by 5 spaces on both sides. Paragraph tags tend to display your text right to the edge of your screen, frustrating your visitors by making them look to the right and left edges of your monitor.

Now, let's finally close the body. Here's how your page will look after closing the body:

Welcome to my Web-Site

Always use Blockquote tags. The reason is because Blockquote tags format much nicer, and indent the text by 5 spaces on both sides. Paragraph tags tend to display your text right to the edge of your screen, frustrating your visitors by making them look to the right and left edges of your monitor.

You're done! The source code above that we created in a step-by-step process would be perfectly acceptable on a Webpage once uploaded to a server. Try rereading the chapter again, and study the tags a little better until you feel a little more comfortable with them. This is your first time, so I imagine that your a little shaky with this.

Saving Your Work.

1.On Windows Notepad, click the File Menu.

2.Next, select Save As from this menu.

3.In the Filename box, choose a filename for your HTML document.

4.At the end of the name (preferrably index), type a period and the letters "html" (without the quotes). Your filename should look like this: index.html

5.Select a Drive and Directory for your file. Select the 'Garvinweb' directory (folder) you created earlier. Next, Double Click the 'Les04' folder you created earlier. Make sure that you save the file in this folder. This file is now ready to be uploaded to the World Wide Web! Congratulations, you deserve a big pat on the back :-)

Viewing your work:

Did you know that you can view your webpage before uploading it to a server? This is called, viewing your Webpage locally or simply testing it locally. Here's how you do that:

1.Open Netscape Communicator.

2.If you get any weird error messages about not being connected, just ignore them.

3.From the file menu, click 'Open Page'.

4.On the Open Page Dialog Box, select the Composer Radio Button

5.Click the Choose File button to the right of the text box. Don't try to manually type in the path.

6.Navigate through your files. Select the 'Les04' subdirectory from the Garvinweb Directory. Finally select the file 'index.html'.

7.Click the Open Button.

8.Now, click the open button again on the Open Page Dialog Box.

9.Finally, click the Preview Button on the Netscape Title Bar.

10.Voila! Your first Webpage.

I know this is a lot to cover for one day, but life ain't too bad is it? At least your coding now, and that has to make you feel good!

Concept Check -

1.Make another Webpage just like the one you created earlier. This time, type three paragraphs inside it explaining your favorite hobby. Save it in the same folder as your other file, but name the file hobbies.html Finally, view it locally through Netscape Navigator or Microsoft Internet Explorer.

Extra Stuff -

1.Go to this Website: http://www.hotwired.com/webmonkey/teachingtool/ You can get ahead by reading up on some of the tags and techniques used here.