Ram & Reason: A First Timer's Step-By-Step Guide to Creating a Web Page

        By Rob Rice   July 2006

 

     
A First Timer’s Step-by-Step Guide to Creating a Web Page
By Rob Rice

If you have never created a website on the Internet or even a webpage then you are potentially missing what can be some great fun and creativity. Granted, it can also lead to a fair share of frustration. For this reason, my article will show you how to create a single webpage with links to the Internet and some color. It is designed to be simple, practical and yet give a first time user the skills to expand. And since it is summer here in Alaska, and Alaska summers are short, so will be this article!

First, we will be using Windows Notepad to create the HTML document, which in turn will generate the webpage in the browser. To use Notepad click Start→ Programs→ Accessories→ Notepad. In Notepad;

        1. On the first line, type
<HTML>. This announces to the web browser (Internet Explorer or Opera or Mozilla, for example) that it is reading a webpage. Be careful not to include the periods after any of these “tags”.
       2. Hit Enter on your keyboard a few times to drop down a few spaces. Now type
<HEAD>. This starts the HEAD portion of your HTML document, which typically contains technical information. We will not be adding anything here but it is important to know that it is there for future projects.
       3. To finish the Head portion hit Enter on your keyboard a few times to drop down a few spaces. Now type
</HEAD>. Notice the slash slanting to the right. Omitting the slash or slanting it the wrong way can cause errors.
       4. Now let us start the body of the document. Hit Enter on your keyboard a few times to drop down a few spaces. Now type
<BODY>. Notice there is no slash. A tag without a slash starts and a tag with a slash finishes.
       5. Hit Enter and on the next line type
<body bgcolor="yellow">. This is your background color. You can also use green, red, and blue and so on, but remember in this example your text is black and may not be visible with some colors. Hit Enter.
       6. Type on the next line or a few lines down
<h2><CENTER>This is my HTML Links Page</CENTER></h2><br>. The <h2> tags are header tags and set the size of the letters in this sentence and on your page. The <CENTER> tag aligns it in the center of the page. The <br> tag does not need a closing (slashed) tag it does its work all by itself. It means, “break” and creates a sentence or text break to the next line. It is not really needed here but it is important in building bigger webpages.
        7. Hit Enter a few more times to space down and type:
<a href="http://www.ccel.org/fathers2/ ">CCEL</a><br>. This creates a link to the CCEL organization, but you can put any Internet address in between the quotes that you like. I put the part that you see on the web page in italics to give you an idea of how it works. I also included a <br> tag to stack the links.
        8. Hit enter, type: <a href="http://www.hrc.utexas.edu/exhibitions/permanent/gutenberg/">Gutenberg Bible</a>.
        9. Hit Enter and type
</BODY>.
       10. Hit Enter and type
</HTML>. Your document should look like this:

<HTML>


<HEAD>

 

</HEAD>

 

<Body>

<body bgcolor="yellow">

<h2><CENTER>This is my HTML Links Page</CENTER></h2><br>

 

<a href="http://www.ccel.org/fathers2/">CCEL</a><br>

<a href="http://www.hrc.utexas.edu/exhibitions/permanent/gutenberg/">Gutenberg Bible</a>

 

</BODY>

 

</HTML>


       11. Now click File→ Save As and save it to your Desktop (Use the drop down box at the top of the window to navigate to your desktop. Name it “My Links” or something appropriate.
       12. Now go to your desktop and put your cursor on the file. Use the right mouse button to click on the icon and choose “Rename.” You want to change the three letters “txt” to either HTML or HTM, either will work. Press “Esc” when done.


       Now double click on the icon to view your webpage. If you are connected to the Internet you can click on one of the links to try it out.

Your web page should look something like this:
 

This is my HTML Links Page

  

CCEL
Gutenberg Bible


You now have a web page that is practical and can be expanded and used for experimentation. You can add links change background colors and discover new tags that do neat stuff. You can also add pictures, flashing text, menus – the list is endless and so are the websites that offer help.

To post this webpage on the Internet you would simply follow your webpage or Internet provider’s instructions

If something does not show up in your webpage then just check your tags. This is most often the trouble, missing slashes, brackets, etc.

Have fun and be creative!


Rob Rice is a member computer specialist in Anchorage, Alaska and a graduate of the Candler School of Theology, at Emory University, Atlanta GA. Rob can be contacted at articles@isp.com.