So, you want to make a Web Page!

Lesson 1

adapted from Joe Barta's tutorials at- PageTutor.com

titlt


Just like "follow the bouncing ball", power up Notepad and start with this...

<html> 

</html> 

Each one of those is called a tag. There is a starting tag <html> and a closing tag </htnl>. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as enclosing a bit of text for the browser to interpret. The browser will interpret everything between <html> and </html> as an HTML document. Different tags are interpreted different ways by the browser. Let's proceed...


Every HTML document needs a pair of head tags.

<html> 

<head> 

</head> 

</html> 

The only thing we have to concern ourselves with in the head tags (for now) are the title tags. The title will show up in the top blue area of you finished page

<html> 

<head> 

<title></title> 

</head> 

</html> 

And the bulk of the page is going to be within the body tags.

<html> 

<head> 

<title></title> 

</head> 

<body> 

</body> 

</html> 

Oh, and one more thing, give your document a title, and put something in the body.

<html> 

<head> 

<title>Lesson 1</title> 

</head> 

<body> 

Hello Joe! 

</body> 

</html> 

Now save it, not as a text document, but as a html document. Save it as Lesson_01.html in your Lesson_01 folder HTML folder. If yer a little fuzzy about how to do this then here's what you do...

In your Notepad window click File then Save As.

You will be presented with the Save As dialog box. Make a new folder (if needed) by clicking the "New Folder" icon New Folder iconin the Save As dialog box.

(Create your new folder in your current HTML folder)

The New Folder icon will look something like this --> New Folder icon

Name the new folder Lesson_01. (make sure to include the underscore). Then double click on it to open it. Now you're ready to save the file into the the new folder you just made. Where it says File name: type in Lesson_01.html (dot H T M L). Where it says Save as type: make sure it says All Files(*.*) - VERY IMPORTANT... must say ALL FILES, not text documents (*.txt)

Hit return and you're done!

Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation!

Now, it's common for people to get stuck here at saving the file. If you get stuck, just be patient. When you save it, remember where you saved it. and make sure you save it with the file extension .html

Next order of business is to start putting some neato stuff in your page.

The best way to use this tutorial is to run Notepad and two instances of your web browser. One browser window containing this tutorial and the other containing your new page. Just toggle between the three windows. You can open a second instance of your browser in one of two ways...

1) Find the icon of the html file you just made (Lesson_01.html) and double click on it. Or...

2) In your browser, click on File/Open File (or something similar to that) and browse to the file (Lesson_01.html).

Three quick points before we go on to the next lesson:

  1. What you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components.
     
  2. The document title is what appears at the very top of the browser window.
     
  3. Of all the things on your web page, the title is what search engines consider most when ranking a page. Choose your titles carefully, and keep them brief.

On to Lesson 2