How To Create Your Own Homepage Make a simple and customizable homepage

Killtacular · July 11, 2005

Hello,

In this tutorial, I will explain how you can make your own personalized homepage, for use with any browser. This tutorial is for beginners, but it assumes you know the HTML basics, especially frames. And yes, this tutorial will be done in Notepad, not in a WYSIWYG program.

1. OK, to start out, you will want to make a folder into which you will put the two .html file that you will make in this procedure. It can be anywhere, and have any name (but I suggest that you make it something like "My Homepage" or something, just for rememberability).

2. Now, open up your trusty Notepad, and before you do anything, save the file to the folder you just made. For the "File Name" in the save box, name it "home.html". Under "Save as type", scroll down to "Any Type". This is important, to make sure the saved file is a HTML file, not a .txt text file.

3. Ok, the homepage we will be designing will be simple looking, but very useful. It will consist of two frames, separated vertically. Start with your standard open-html tag, followed by the open-header tag. All we will have in the header will be the title of your document, which should be something nice like "Welcome Back, <your name here>!". After your done with that, close your title and header tags. The first few lines may look like this:

<html><head><title>Welcome Back, Killtacular!</title></head>

Note: you may copy my code if you want, but it would be better if you wrote the code yourself, as this is a learning experience

4. Now, instead of the open-body tag, you will want to have a open-frameset tag. For the properties of the frameset, you will want it to contain columns, with the first column's width being equal to about one-fifth of your total screen width. So, if your resolution is 640 x 480, your column will be around 120 px. If it's 800 x 600, it will be around 160 px. If it's 1024 x 768, the column will be about 200 px. You can change it later to fit your likings. For the second column width, put an asterisk (*), so that your second column will be the entire width remaining in the browser. Make the frames have a border of 1 to 2 pixels. That will be the all in your open-frameset tag.

5. Create a frame tag, with the source being a file named "menu.html" (which we'll make later). Make another frame tag, with the source being the website that is usually your homepage. I'll use Google. Also, in that second frame, make sure it's named "content". Now close your frameset and html tags. The results of steps 4 and 5 will look like this:

<frameset cols="160,*" border="2"><frame src="menu.html"><frame src="http://google.com; name="content"></frameset></html>

6. You're now done with that HTML document, so save it. Now, make a new Notepad document. Again, before you do anything, save the file. And again, for the "File Name" in the save box, name it "menu.html" and for the "Save as type", scroll down to "Any Type".

7. This document will be the menu on the left side of your homepage. Start the HTML file the exact same way you did in step 3:

<html><head><title>Welcome Back, Killtacular!</title></head>

Note: you may want to add a mini-stylesheet inside the header, or you can link to an external one, or you can put the styles inside the body of the file. None of those procedures are within the grounds of this tutorial.

8. At the top of the menu, you will want to add a nice message to yourself (but you don't have to if you don't want to). I will be adding a scolling message for myself using the marquee tags. You may also want to make this message larger than the rest of the text in the document (but not too large!).

<marquee direction="left" scrollamount="8"><h3>Hello, Killtacular!</h3</marquee>

9. Now for the fun part. Well, not really, that's just a figure of speech. Anyways... You will now be making a list of links. The links will be links to sites that you frequently visit, such as webmail, and maybe a certain forum who's name begins with an 'A'. You may also want to separate the links into groups, for organization. Also (and this is very important), every link must have a target of "content". That way, you can click on the links, and the larger frame will travel to that link, while the menu remains where it was. Also, don't forget your linebreak tags after each link, so that your links aren't all on one line (unless you like that kind of confusion). Here is a basic syntax for you to follow:

<h4><ins>Your Group's Name Here</ins><br><a href="http://yourlinkedwebsite.com; target="content">Link Text</a><br><a href="http://yourlinkedwebsite.com; target="content">Link Text</a><br><a href="http://yourlinkedwebsite.com; target="content">Link Text</a><br></h4>

Note: you will probably have more than one group. The preceeding was just an example.

The following is an actual possibility for a menu, just to give you a better idea:

<h4><ins>Games</ins><br><a href="http://addictinggames.com; target="content">Addicting Games</a><br><a href="http://miniclip.com; target="content">Miniclip</a><br><br><ins>Forums</ins><br><a href="http://forums.xisto.com/no_longer_exists/&; target="content">Xisto</a><br><a href="http://samusforum.co.uk; target="content">SCU Forums</a><br><br><ins>Tools</ins><a href="http://gmail.com; target="_top">Check Mail</a><br><a href="http://windowsupdate.microsoft.com" target="content">Windows Update</a></h4>

You may notice that for the target for my "Check Mail" link, I have entered "_top" instead of "content". This is because Gmail does not work while in a frame. By putting "_top" as my target, Gmail opens in the entire browser, not in just one frame.

9. Make sure you save your menu file once you have added all the links you want. Now, you will want to set your homepage so you can use it in your browser. The method for doing this depends on what browser you have. In FireFox, its in Tools>Options. For Internet Explorer, its in Tools>Internet Options. That's all I know, although it's probably similar in Netscape or Safari.

Thats it! You now have your own customized homepage, with your own useful links. Also, if you ever want to get rid of the sidebar so you can see more of the webpage you are viewing, all you need to do is grab the divider and slide it all the way to the left. Then when you want the menu again, you can just grab divider and slide it back. Convenient, right?

That's my tutorial. I hope it has been helpful to everyone who has read it. Please post any questions you may have. Thank you.

=Killtacular=

Sign In

How To Create Your Own Homepage Make a simple and customizable homepage

Recommended Posts

Killtacular 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information