Make the Internet Yours with Personal Pages

Every time you open your browser to a website, you are presented with someone else's idea of a home page. Much of the time, a link is included so that you can make that particular site "your" home page.
Imagine for a moment: What would it be like if you could create your own personal web page or pages, with links to all of the sites you regularly visit, local weather and any other content that you need or want immediate access to? Convenient, flexible, easy to use and easy to edit -- these are a few reasons a personal web page is ideal for keeping everything you constantly use at your fingertips. What's more, creating the pages is easy and can be done for no cost (other than your time).

Because a personal web page is stored in a folder on your hard drive, it is always accessible for editing or for viewing in your favorite browser. Content is up to the individual user. Let's gather our tools, and find out just how easy it is to create your own "home" on the Internet.

You will need a computer, of course. Also, you need a text editor, such as one of the titles listed below. Some of these editors are very basic. Others have advanced features for programming as well as editing text.

And, of course, a browser is essential. Mozilla Firefox, Internet Explorer, Opera, and Safari are available for download, or are supplied with your computer in most cases.

Assuming you are new to HTML and do not have the skills and/or the desire to create your own template for your personal page, Here are some sites where you can download pre-made templates for free. Use your favorite search engine to find these sites. If you choose to download a template, check to see if the designer includes instructions for its use, or imposes limitations for using it. You may want to stick with the more basic templates until you are comfortable working with HTML.

I began learning to edit HTML by editing a blog template's HTML coding. You may or may not have a blog, and you may or may not want to edit its code (or you may be unable to edit the code, depending on your blog platform). So, what to do if you decide you want to learn HTML? You guessed it: Turn to your favorite search engine once more. There are scores of sites on the Internet offering free tutorials on how to write HTML, and I will cover this topic in greater detail in another lens. For now, here are some basics to aid you in the development of your personal web page. An authoritative resource for HTML and other web design information (with tutorials and quizzes to test your knowledge) is the W3C, also known as the Worldwide Web Consortium. A link is found at the end of this lens.

After you've downloaded your template, unzip it into its own folder on your desktop for easy access. Open the folder, and look for a file named "index.html". There may be other files included in the folder, but for now, you will just work with this file. Open your text editor to a blank page, and from the File menu, choose Open..., and browse to the folder where your new template is stored. Click on the "index.html" file to open it in the text editor. Then, with the document open in your editor, go back to the File menu and choose "Save As...". Give the index.html file a new name such as "index1.html" or something similar, to distinguish the file you are saving from the original index.html file. This will give you a "working copy" of the index.html file separate from the original index.html file so that you can restore the template to its original form if you need to in the future. You will do all of your editing within the "index1.html" file. Always keep backups of your files in a safe location, as usual. You never know when you might need to restore the files.
Spend some time looking at the HTML code in your text editor without making any changes. If it looks like Greek to you, don't worry. You can make it easier to read by keeping your browser open alongside your text editor and comparing what you see in your browser to what you are reading in the text editor. Take your time with this, and it will soon begin to make sense. Don't be put off by the HTML tags (they are enclosed in < > when you see them in the editor; they are simply text that is written to tell your browser how to display the page and its text and other content in your browser.)
Next, open your index1.html file within your browser, by clicking File on the menubar, and select Open File. Browse to the folder on your desktop where the index1.html file is located, and click it to open it in your browser. Remember, you have not yet made any changes to the index1.html file, so it will look the same in your browser as it did when you viewed and/or downloaded it from the Internet.

Now, give some thought to the content you want to include on your page. A caveat: Keep in mind that if you decide at some point to host the page online somewhere, the content should not include anything you don't want the world to see and have access to. This means if you want to include a link to your bank or other sensitive information such as an address book or a list of your software registration keys, do so only on pages that will stay on your system, and make sure you've set up a strong password for your computer's operating system for security.

You will need to edit your template's HTML code in your text editor to make the template uniquely yours. Let's say, for example, that you have some websites such as Yahoo or CNN that you visit every day, and that you decide it would be handy to have those sites on your personal page. Find the place on your page that you want to put the links by looking at the template's source code in your text editor. Write a hyperlink for Yahoo: (This is demonstrated in the steps below, with explanations. Note: Replace () with <> when you write your code.)

(a href) This part of the link is the opening anchor tag. Notice that the only space in the anchor tag is between the a and the href.

(a href="") Place an = sign immediately after the href. (I've left space between the = sign and the > so it will be easier to read, and so that this link will not be "live" or clickable in this tutorial.)

(a href="http://www.yahoo.com/") Now I've added the actual web address for Yahoo.com, enclosed in quotation marks. Once more, I've left a space between the address and the > for easier reading; in the actual link you will write, do not leave this space.

(a href="http://www.yahoo.com/")Yahoo The "Yahoo" outside the ) here will be outside the > in your code; it is the display text for the link. You can put anything you like for the display text. Now, we need a closing anchor tag:

(a href="http://www.yahoo.com/")Yahoo(/a) . The (/a) in this example is the closing anchor tag. When you eliminate the space between the web address and the ) in this example, you will have a clickable hyperlink that will take you to Yahoo.com from your new page. To create a hyperlink to CNN or any other site, just substitute CNN's web address or the address of the other site for Yahoo's in the example.

You can also create hyperlinks (or simply "links") for your page by opening a website in your browser and copying and pasting the site's address from the location bar instead of typing the address in manually. Keep the format for the remainder of the link as shown. With practice, you can write hyperlinks quite quickly and easily for your new page. You may want to take care not to put too many links on the page, lest it become cluttered! Being selective will make your pages much more attractive, they will load faster, and information will not be as likely to be buried on the page. Do not expect to "put the entire Internet" on your page(s)! This is not only impossible, it defeats the purpose of having the page(s) in the first place.

Important!: As you begin to edit your template, take care not to delete any of the template's code unless you are absolutely sure you know what you are doing. If you delete a tag or part of the code, it will more than likely cause errors in the way the page displays in your browser, or the page may not display at all. Edit in small steps, save your edits often, and make sure to check your results by refreshing the index1.html page in your browser after each edit or two. If something does go awry, you can undo the edits in the text editor and refresh the index.html file in the browser again to restore it to the last saved state.

As you surf the Internet, get into the habit of viewing source code for websites you like, to get a glimpse at how they are constructed and how they work. Firefox has the ViewSourceWith Extension to make viewing page source code easy.
Once you are comfortable using and editing your template, you can find lots of features (perhaps too many!) online to add to your page, via the use of Javascripts and other code. You can add local weather, a calendar, links to local media, even lists such as your favorite books and authors, to your page. Look at your template's code to see how the code for lists is written, and follow that pattern. There are excellent free sources of Javascripts (and yes, even Javascript tutorials for writing your own) available online. A few of them are listed here. If you find scripts that you want to use, please read and carefully follow the instructions provided for them.

You've been using your personal page for a while, and now it's beginning to look like it needs room to grow. No problem. Making a new page (such as for a different topic) using the same template is a breeze. Go to your template's folder, and locate the original, unedited "index.html" file. Using the same process as when you first saved the "index1.html" file, save the index.html file again, using a completely different name, followed by the .html extension. Change the title of the new page in the text editor to the same as the name for the new page.
You can use a menu script to create a dropdown menu for the extra page, or simply write a hyperlink to access it. Since the new page is stored in the same folder as the index1.html file and the rest of your template files, just use the path to the new page's name instead of a web address in your link. By adding new pages for different topics, you can keep the length of your index1.html page to a more manageable length. Using new pages for specific topics also helps you locate information more easily.
As your skills develop, you will find it easy to create your own websites, even for online use. Making personal pages is an excellent way to learn, practice and expand your knowledge of HTML and web design, should you decide to branch out later.