"Homepage Basics"

     Making a homepage is lots of fun. To make a simple no frill homepage is a snap. I will show you how to make a template using your notepad. All you will need to do is add your graphics and text. These next few line explain what each tag does. Lets get started by making a folder on your desktop and name it Homepage. Here is where you will keep all your files that go with your homepage.

     1) First off, HTML is short for Hypertext Markup Language. To write this language so people are able to view it, you will use tags. A tag will always begin with a less sign, like this: < , and will always end with a greater sign, like this: > .

     To start a HTML file you will need to have an opening tag. This tag will look like this: <HTML> .

     The next thing you will need is the HEAD tag for your HTML file. This is where you will put all your information about your page. This tag follows right under the <HTML>  tag and looks like this: <HEAD> .

     Next comes the TITLE tag for your page. It follows right under your <HEAD>  tag and looks like this: <TITLE> .

     After you type in your title of your page, you must close your title tag. The closed TITLE tag looks like this: </TITLE> .

     So lets say you name you homepage, "My Homepage". The TITLE tag would look like this:
<TITLE> "My Homepage"</TITLE> .

     Now we need to add the BODY tag. What you put in here is what people view in their browsers when they view your web page. It follows right under the TITLE tag and looks like this: <BODY> . When you are done adding what you want on your page then all tags must be closed in the right places. I will show you how to do this as we go on with this lesson.

     Below are 5 pictures that show what I want you to do. Look at them and the comment below each one. Then below the pictures is the code I want you to copy and paste to your note pad. If you do not know how to Copy and Paste, all you do is take your mouse to where you want to start your copy. Then left click and hold mouse button down and drag the mouse over what you want to copy. When you have it all highlighted then let go of mouse button. Then right click on the mouse and select copy. To Paste it all you do is go to your notepad and then right click and then left click Paste.


You will only copy what I show inside the red box to your note pad.


This is what your code will look like when copied and pasted to notepad


Then you will click on File and then Save As:


In the Save In: you will browse to your Homepage folder on your desktop.
In the File Name: you will type in, index.html then click Save.
** NOTE! If you already did this lesson, and you want to make a
different page, then you must name your file different then index.html.
Because if you name it the same thing and save it, it will overwrite
the one you have in your folder. So lets say you name your second page
Christmas.html if it is a Christmas page or Easter.html if it is an
Easter page etc. **




Now open your Homepage folder on your desktop and the
index.html file will show in there like the picture above.

     2) Below is a template. Open your notepad and copy and paste the code that is between the two lines to it. If you do not know how to copy and paste then you may just type the code exactly like I have it below to your notepad.When you have copied it over to the note pad, you will then save it as an html file. So where it says Save As: you will type in index.html and then save it to the folder you made on your desktop named Homepage. The images above show you how to do this. Just copy the following text that is between the lines below to a notepad, and save it like shown above.


<HTML>

<HEAD>
<TITLE>"My Homepage"</TITLE>
</HEAD>

<BODY>
This is where your text and images go!
</BODY>

</HTML>


     3) Now you have your homepage file saved. If you open your Homepage folder on your desktop and double left click on the index file showing in there, it will open up in your browser so you are able to view it and work on it if you want to make changes. These next steps are going to show you how to add a background graphic and music to your homepage.

     4) If you want control over the background, text, links and if your page will have music, then you will have to add more tags to the Head and Body of your HTML. Most people like that control so I will make a new template below for you to copy just like you did above for the first one. This is what you will do. First you will copy the code that is between the lines below. If you do not know how to Copy and Paste, all you do is take your mouse to where you want to start your copy. Then left click and hold mouse button down and drag the mouse over what you want to copy. When you have it all highlighted then let go of mouse button. Then right click on the mouse and select copy. We will paste it in a few seconds.


<HTML>

<HEAD>
<TITLE>"My Homepage"</TITLE>
<EMBED SRC="your.mid" AUTOSTART=True LOOP=True CONTROLLER=False HIDDEN>
<bgsound src="your.mid" loop=infinite>
</HEAD>

<BODY>
<body background="your graphic.gif" body bgcolor="#FFFFFF"
text="#000000" link="#000000" vlink="#000000">
<BR>
<center>
<img src="your graphic.gif">
<BR>
<H3>This is where your text goes!</H3>
</center>
<BR>

</BODY>
</HTML>


     5) Now you will go and open your home page folder and double left click on your index file. This will open up your web page in your browser. Now I want you to right click on that web page anyplace. A pop-up screen will come up, and then I want you to left click on View Source. Your notepad where you have all your codes and tags will pop up. This is how you will work on your homepage. Ok now I want you to go up to the top of that notepad and left click on Edit. Then you will click on Select All. Now I want you to right click with your mouse anyplace in the notepad, and left click Paste. Your new coding will now be copied over the old that you did have. We will now save this. So all you do is left click on the X box at the top right of your window, like you would if you were closing that window. A screen will come up asking you, Do you want to save the changes? You will click Yes. Now what you will do to see you changes on your webpage is go to the top in your tool bar and left click Refresh. All your new changes will now be there.

     5) To save a lot of time here, I have made the template for you. I have added a background and a graphic and music for this page. Click on the zip icon to download the file. Winzip File Unzip it to your desktop. The folder on your desktop will say Homepage. Open it and all the things we just did in this lesson will already be in the folder.

     6) When you want to change the text or the graphics or the music on the page all you do is Right click on that web page anyplace. A pop-up screen will come up, and then I want you to left click on View Source. Your notepad where you have all your codes and tags will pop up. Now find the place where you want to make your changes. If it is the text, then you find where your text is written delete what was there and add the new. If you want different music, then find that tag where the music is and delete the old and add yours. If you want a different graphic, find the graphic tag and change the graphic mane to the one you will be using.

     7) If you are interested in learning more about HTML then go and buy a good HTML book. This is just a basic web page and does not include a lot of tags.

     7) If you have web space you will then upload everything in your Homepage folder to that file manager. A good program I use is WS_FTP Pro. You will find a tutorial on how to use that program and also how to set it up to use with your ISP web space when you click HERE. Just look for that lesson to the left of that web site. If you have web space that does not allow a FTP program to be used, then you will have to go to your ISP homepage and see how they want you to upload the files. In most cases they have a password protected page you use that allows you to browse your computer and then a button to click to upload your files that way. Then they should have a file manager you will be able to view that will allow you to see you files that you all ready have loaded up. You will also be able to delete files no longer needed.

     7) I hope this tutorial was useful and easy to understand. If you would not like to make a homepage from scratch, like this tutorial shows, then there are programs that you can buy or may already be installed on your computer that does all this for you.

Click here if you want to print this page.



Copyright © Web Crazy Web Design
1999, 2000, 2001, 2002 All rights reserved.