ne of the great things about the World Wide Web is that anyone can be a part of it. It's quick and pretty easy, too. In the time it takes to watch your favorite TV show, you can set up a place on the Internet that anyone in the world can visit. This place is usually called your home page, but I like to think of it as your front porch on the Web. It's the place where people can stop, take a load off, look around, and hang out.
Chances are, you have all the tools you need to make a home page right now. Here's a checklist of the essentials:
- A computer.
- A modem. This is the device that connects your computer to the Web. Everything, whether it's data coming in or going out, goes through the modem first.
- An ISP (Internet Service Provider). This is the company that supplies you with Internet service, just like the phone company gives you a dial tone. If you don't have an ISP, then your modem won't do you any good! ISPs are pretty easy to find. There's bound to be at least one in your area. Check the local Yellow Pages, or call your cable company ó many cable TV providers now offer Internet access. But even if you can't find an ISP nearby, there's still hope! Online services like America Online (AOL) and the Microsoft Network (MSN) aren't technically ISPs, but you can use them to access the Internet. Best of all, if you already subscribe to one of these services, you don't need a separate ISP.
- A Web browser. You can't view Web pages without one of these. There are dozens of Web browsers out there, and everyone has a favorite, but the two most popular ones are Netscape Navigator and Microsoft Internet Explorer. Most Web pages are made with one or the other in mind.
- A text editor. This is what you'll use to write your home page. Most computers nowadays come with a text editor already installed, such as WordPad or SimpleText.
You'll have to take care of one other thing before you begin. Call up your ISP to find out your Universal Resource Locator, or URL. This is just a fancy name for your Web address, you know, like "www.dailyplanetonline.com". Your ISP can also tell you how to upload your home page to the Web when you're done.
Before you get cracking, here are two rules of thumb.
Now comes the fun part: making your home page! Web browsers read a special code called HTML, or Hypertext Markup Language. To make a home page, then, you'll need to learn a few things about this code. Don't worry! It's really simple to pick up, and, as you learn more about making Web pages, you'll find that there are always new HTML tricks to try out.
But for now, it's best to start with the basics. I'll take you through my home page, Planet Olsen, so you can see exactly how it's done. You can also see what my home page looks like by clicking on the "Go to Planet Olsen" link under my picture.
Now, in HTML talk, the words in the angle brackets (<,>) are called tags. These are the instructions for your Web browser.
The very first tag, <HTML>, tells your browser to listen up, because the stuff that follows is a Web page.
Next is the <HEAD> tag, which gives your home page's vital information right off the bat. Come up with a catchy title for your page and put it between the <TITLE> tags. The title is what appears in the extreme left corner of the Web browser's window. Notice that the second <TITLE> tag begins with a slash (/). This tells your browser that the title has ended. (I know, it looks obvious to you, but remember that computers are a little slow, and they need to be told everything.) After you close off the title with </TITLE>, close off the header with </HEAD>.
<HEAD> |
Now onto the Web page itself, which begins with <BODY>. The <h1> tag makes the text that follows into a first-level headline, which really grabs the attention. Notice that, when the headline is done, I close it off with </h1>. Then comes my introductory paragraph, marked off with the paragraph tags <p> and </p>. See how easy this is?
<BODY> |
In the next paragraph (again marked off with <p> and </p>), I talk a little bit about my interests. Notice the <i> tags around the words "Daily Planet"? The <i> stands for italic, which is a kind of slanted type. Whatever you see between <i> tags will appear in italics. Perry White, my boss and editor-in-chief of the Daily Planet, says that you should always italicize the names of newspapers, so that's just what I did on my home page. Oh, by the way, I like to call Mr. White the Chief. (It's short for editor-in-chief. Get it?)
<p>All my friends know two things about me: (1) I'm a freelance photographer for the <i>Daily Planet,</i> and (2) Superman is my ultimate, all-time, favorite hero (he's saved my bacon more than once, I can tell you). Here are some Superman pics of mine that the Chief didn't want, so I put them here for you to enjoy!</p> |
Now comes my home page's main draw: some pictures of Superman that I took! You have to be careful here ó I put up only pictures that the Chief didn't buy. If you want to use pictures that someone else owns, you have to get permission first. If you don't, you could get into hot water.
Anyway, to display a picture on your home page, use the <img> tag. The tag is divided into two parts, called "src" and "alt." The src portion tells the browser which image file to use. In my case, the first graphic is a file called "sup1.gif." In the alt portion, I tell the browser to display the words "Superman picture #1" while the graphic is loading. This little blurb is a great courtesy to visitors who don't have a super-fast modem, and they'll want to stick around to see what "Superman picture #1" looks like.
I have three images on my home page, so I need three <img> tags. Notice that I didn't use </img> to close off the images ó I didn't have to, because all the info the browser needs is right there in the <img> tag. But I did put all three images between <p> and </p> paragraph tags to offset the pictures from the text, which is always a smart idea. Here's another one: Don't forget to upload your graphics with the rest of your home page, or your visitors won't be able to see them! Your ISP can tell you exactly how you should upload all the different parts of your finished home page.
<p> |
Next, I wanted people to write to me about my pictures, so I put an e-mail link on my home page. This is done with the <a> tag, which stands for anchor. The "href" part of that tag gives the anchor's destination, which, in this case, is "mailto:PlanetOlsen@LexOnLine.com." (PlanetOlsen@LexOnLine.com is my e-mail address, naturally!) The text that falls between <a> and </a> on your home page will be clickable, so decide what you want your link to say, and put that between the anchor tags.
<p>Pretty cool, huh? Click <a href="mailto:PlanetOlsen@LexOnLine.com">here </a> to send me e-mail about these pics.</p> |
You can make other kinds of links, too, and I do, right after the level-two headline tags, <h2>, which I use to kick off the next section of my page. (For a real touch of class, tie your level-two headlines into the theme of your level one!) My links go to other cool Web sites I've found during my explorations. Start with the <a> tag, as usual, but this time, put the URL of the destination page after "href." Then comes the clickable text, and the </a> tag closes off the anchor. I have three links on my home page, and I wanted each one to be offset, so each one got its own set of paragraph tags.
<h2>Other planets to visit</h2> |
Finally, in the last section of my home page, I give my visitors a standing invitation to come back, and I entice them with the possibility of new stuff, or content, as they say in the computer business. Then comes </BODY>, which closes off the <BODY> tag I opened earlier, followed by </HTML>, which tells your browser that the Web page is done.
<h2>Come back soon!</h2> |
Here's what it looks like all put together!
<HTML> |
That's how you make a home page! See you on the Web!