So, You Want To Write A Webpage?!?
A Plain English Manual to writing your very own webpage by Shawn Garringer.
You are visitor Number # 
| |
So, You Want To Write A Webpage?!?A Plain English Manual to writing your very own webpage by Shawn Garringer.You are visitor Number #
|
So, you're interested in writing your own webpage. But, you don't know where to start? Well, let me tell you, out of the millions of webpages on the net, most of them are written by people like you. And, most of them are terrible. I hate to say it, but it's true. Now, what separates a truly good page from a truly bad page? Well, that's what I intend to teach you about in this document: the steps, hints, useful facts, and more, about writing a webpage. This guide is written in plain English, (with a Spanish version in the works) and you don't have to know anything about HTML, the WWW, the Internet, or even computers to understand it. (Well, I lied. It's useful if you can move the mouse around a little bit, and can press keys on the keyboard too.)
The WWW (or World Wide Web) is a part of the Internet. The Internet is a way of connecting computers, old and new, together using telephone lines, computer networks, and even cable-tv wires! The WWW is by far the most popular part of the Internet. Other parts include FTP, where you can send and receive computer data, Telnet, where you can connect to computers all over the world and control them (often used by libraries to allow you to access their online card catalog), Gopher, which is like an early version of the WWW, and many other services that are slowly dying out. Anyway, the WWW is perhaps the easiest, and cheapest, part for you to access. There are many places that will allow you to get your very own page on the World Wide Web. A page is the actual information that the person views, for example, you are viewing a page right now!
Back to your webpage now. Before you spend hours upon hours writing a masterpiece webpage, you must find a server.
A server is a place that serves your page to the world. A better description would be they are like the water tower in your town, they store all of the information and give it out to people when they request it. Although you can spend upwards of $10,000 dollars finding a WWW server, there are several that are free. Of course, your address(what the person who wants to visit your page types to get to your page) won't be as easy to remember as "www.m&m.com" or "www.joe.com", but hey, it's free! Some of the servers are listed in the table below.
| Name of Server | Description of Server | Special Requirements | Space (MB) |
| Fortunecity.com | Fortunecity is a very nice server that gives you a very easy to use setup and takes little or no time to get your page up and going on there. | An advertisement for them. | 6MB |
| Geocities | The first free server, this server divides webpages up into "neighborhoods". Your page address is fairly slow, and tech support isn't the greatest, but it isn't all that hard to setup a page on Geocities. | An advertisement for them. | 2MB |
| QSL.NET | QSL.Net is a very nice server. It's fast, efficient, and very easy to use. They work with volunteers, so tech support isn't the fastest, but they have many pages that will answer almost any question you could ever ask! | HAM Radio licence.
An advertisement for them. |
Unlimited! |
OK. You might want to try going to one of those places and signing up for a webpage. That way you'll know that you have a place to put it when you're done. However, if you are working on this webpage for a class, your instructor might have a specific place that he/she wants your webpage to go. Ask them about this before you sign up.
Besides a webpage, you'll also need an E-Mail account to have a very good webpage. Again, there are many places that charge for this, and many places that are free. Here is a table of some of them:
| Name of Provider | Description of service | Known problems, incompatibilities |
| Hotmail | Very good service, it is very reliable and efficient. Allows nearly 200 messages to remain in mailbox. Also allows automatic deletion of messages from certain authors. Nice spell check and thesaurus features add icing to the cake. Can be slow at peak times. Very good! | Requires Java |
| Rocketmail | One of the first free E-Mail providers, Rocktmail has many good qualities. Very customizable, and has a nice address book feature. Spell Checker works well if only few misspelled words per message, though. | Requires a new version of IE or Netscape |
| Geocities | Free E-Mail account comes with your Geocities account. Limits messages to 20. Puts advertisement on incoming messages with graphic, which slows the message loading. | Requires a mail program, which can be confusing to setup. |
| N2Mail | Very fast and nice service, N2Mail is one of my favorites. It offers many different E-Mail address that you can have, tailored to what interests you. Fast on even a 14.4 modem! | Requires Java |
| Usa.Net | I havn't really used this service too much. Can be very slow during peak times. Boggs your browser down with many animated pictures. Not the easiest to setup and use. There are much better choices. | Requires new version of IE or Netscape. |
OK. With that done, it's time to actually start writing your webpage. First, I'll start with the basics.
Writing a webpage can be very fun and enjoyable if you know the correct steps. There is nothing "mysterious" about a webpage. If everything is correct it will work. Now, webpages use a computer language called HTML, which stands for HyperText Markup Language. You really don't need to know what that means, other than the fact that it is really neat! In HTML, there are two basic parts: commands and text. Commands tell the computer how to use the text in the HTML file. In HTML, every command is inclosed in brackets which look like < > those. Often times, in HTML there will be two commands: one that tells the computer to start doing something, and one that tells it to stop. For instance, the command <HTML> tells the computer that the following is a HTML document, and the command </HTML> tells the computer that this is the end of the document. Most closing commands are the same as the opening but with a "/" slash in front of the command.
The very first command in your WWW page should be the <HTML> command. Many people often neglect this command, and forget to use it, but it is a very important command. After that, you'll want to use a command to tell the computer that what is next is the header; an area of the webpage that is used to format the way the page will look on your computer screen. This is done with the <HEAD> command.
Inside the <HEAD> command, you can use many other commands. One of the first ones that most people put is the command <TITLE>. This command places the title of your webpage (what is between the opening and closing) in the top of the window, which is what the person is viewing the webpage with. So, your webpage will look like this so far.
<HTML> <HEAD> <TITLE>Welcome to my Webpage</TITLE> </HEAD> </HTML>
Inside the header, there are many more things that you can do than just insert a title. For instance, if you want to set up a background color this is the place to do it. The command to insert a background color is <BODY BGCOLOR="color">. Replace "color" with the color that you want your background to be. These could include RED, GREEN, BLUE, AQUA, YELLOW, WHITE, and others. If you want to be more specific, you can replace "color" with "#number", where "#number" is the exact Red, Green, and, Blue mixture of colors to make the correct color. You can download a table that shows the different colors by clicking here (GIF version) or here(JPEG version). The JPEG is faster loading, but the GIF is higher resolution. That is a good chance for you to see the differences between the two types of images for a later lesson! If you want to place an image in the background, instead of a color, you would use this command. <BODY BACKGROUND="image"> Just replace the word "image" with the correct filename of the image you want to be in the background!
In the heading, you can also tell the browser (actually only Internet Explorer) to play background music. That command is <BGSOUND SRC="filename" loop="1">. It's as easy as just replacing "filename" with the correct filename, and putting the correct number in the loop="1" catagory for how many times you want the file to play.
So, you want to see an example of an webpage. Well, if you used all the commands we have learned this far, your page would look like this:
<HTML> <HEAD> <TITLE>Welcome to my Webpage</TITLE> <BODY BGCOLOR="white"> <BODY BACKGROUND="marble.gif"> <BGSOUND SRC="welcome.wav" loop="1"> </HEAD> </HTML>
The Body
Now that you have the header completed, you can start working on the Body of the document. The command to let the browser know that we want to start working on the body looks like the following: <BODY>. Pretty simple. The body contains everything else in the webpage. This contains the text, images, links, and everything else on your page.
Most people, who are writing their own page, like to also display their title in big letters inside the browser window. First, you have to change to a larger font size. There are six different sizes that are used on the World Wide Web. These are:
There are two different ways you can change the font size. The oldest, and easiest is to use the command <H1> for heading one, <H2> for heading two, <H3> for heading three, and so on. However, many people are starting to use the method of <FONT SIZE="+2"> for Heading One, and <FONT SIZE="+1> for Heading Two, and so forth. It really doesn't matter how you choose to do it. If you use the <H2> method, make sure to close the command after the text whose size you want to change with the same size. For example, if you use <H2> make sure to close with </H2>. With the <FONT SIZE="+2"> you can just close all sizes with the command </FONT>.
Many people also like to center their text on their page somewhere throughout the page. The command to center is <CENTER>. At the end of the text that you want to center, type the closing command, </CENTER>. Note, there is no command for left justify (placing all the words on the left edge of the screen). If something is not centered, than it is left justified.
Most people will have text that they will want to either underline, italicize, or boldface. These are fairly simple commands. To underline, use the command <U> and then at the end of the text you want to underline, use </U>. Italics can be created by using the command <I> with closing </I> and bold can be done by using <B> with </B> to end the bold print.
You can also adjust the text color with the simple command <FONT COLOR="color">. Just replace the word "color" with the name of the correct color! It's as simple as that! Then, when you want the text to return to the standard color, just use </FONT> to tell it to go back to normal!
If you want to create a new paragraph, you have to use a special command. Just pressing "Return" or "Enter" will not work. That command is the <BR> command, which stands for "line BReak". If you want to break the line, and create a blank line, use the command <P>. Both of those commands don't have a closing.
One final command. If you want to insert a horizontal line (like the ones that divide all of the sections on this page), the command is <HR>. As simple as that! The command uses no closing, so just place it in your document, and your ready to go!
Once you have people visiting your page, chances are, you're going to want to direct them to other pages you think will help them. One way to do this would be to just tell them the address, but then they have to type it in, and there is a chance that they could get it wrong. That is when the hyperlink or "link" to another hypertext document, comes to play. Think of the link as a slide, that sends them to the next page when they click on it. It automatically types the exact address into your visitor's web browser, and begins the loading process. As you can see, hyperlinks are a very important part of a webpage. They are also fairly complicated. Here is the command, I'll explain it in the next few lines. The command looks like this: <A HREF="http://www.webpage.com/directory/file.html"> Click here to go to Joe's webpage. </A>.
Wow! So complicated! I'll try to explain it the best I can. The <A HREF means "Anchor a Hypertext REFrence". Fairly complicated stuff, but all you need to know is that is the command to create a link. Next you see the long World Wide Web address (which is green to help it show up better in my manual). You'll want to replace that with the exact webpage address that you want the person to go to when you click on the link. Many people just copy it right out of the web browser and paste it there so that they make sure that they get it right. Next, you'll see the blue print. This is the text that actually becomes the link. This is the text that the person clicks on to go to that webpage. Usually people make this the title of the page that the person who clicks on the link will be going to. Finally, you see the </A> command, which tells the computer that that is the end of the "anchor" or the link. Then, the text returns to normal, and everything is the way it was before the link (same font size, bold, italic, underline, color, etc...)
A picture can say one thousand words. And, the same is true on a webpage. Almost every webpage has pictures in it nowadays. Inserting a picture isn't all that hard, it just takes a little thinking ahead. This it the command: <IMG SRC="picturename" width="100%" height="100%" align="left">. To use this command, just replace all of the necessary information. Change the green "picturename" to the filename of the picture! Then, if you want to resize the picture change the violet and red percents to what ever you want (remember, if they aren't both the same number, the image will be distorted). Then, the hardest part is choosing the alignment. Here are some examples of each.
Style |
Example |
| ALIGN="BOTTOM" |  Ask Jeeves is the best search engine on the Internet. Why? Well, most search engines rely on keyword searches, easy for computers, but hard on humans. Jeeves isn't like that. |
| ALIGN="MIDDLE" | Ask Jeeves is the best search engine on the Internet. Why? Well, most search engines rely on keyword searches, easy for computers, but hard on humans. Jeeves isn't like that. |
| ALIGN="TOP" | Ask Jeeves is the best search engine on the Internet. Why? Well, most search engines rely on keyword searches, easy for computers, but hard on humans. Jeeves isn't like that. |
| ALIGN="LEFT" | Ask Jeeves is the best search engine on the Internet. Why? Well, most search engines rely on keyword searches, easy for computers, but hard on humans. Jeeves isn't like that. Input your plain question in plain English, like "How can I learn HTML" and Jeeves will search his own memory bank (which usually comes up with an answer) and then also attempt to pick out the keywords of your search and ask his friends, like Lycos, Webcrawler, and other search engines. Jeeves incorporates everything that you need into one, easy to use, package. With no reason to ever start my assignments anywhere else, I have set Ask Jeeves to be the start page of my World Wide Web browser. I would suggest that you do the same. Ask Jeeves is much easier to use, searches and reacts much faster (at the snap of a finger or a ring of a bell you might say), and has much less advertisements that other search engines. Those are just some of the reasons that I would choose Ask Jeeves over any-other, lesser search engine. |
| ALIGN="RIGHT" | Ask Jeeves is the best search engine on the Internet. Why? Well, most search engines rely on keyword searches, easy for computers, but hard on humans. Jeeves isn't like that. Input your plain question in plain English, like "How can I learn HTML" and Jeeves will search his own memory bank (which usually comes up with an answer) and then also attempt to pick out the keywords of your search and ask his friends, like Lycos, Webcrawler, and other search engines. Jeeves incorporates everything that you need into one, easy to use, package. With no reason to ever start my assignments anywhere else, I have set Ask Jeeves to be the start page of my World Wide Web browser. I would suggest that you do the same. Ask Jeeves is much easier to use, searches and reacts much faster (at the snap of a finger or a ring of a bell you might say), and has much less advertisements that other search engines. Those are just some of the reasons that I would choose Ask Jeeves over any-other, lesser search engine. |
So, those are the different values you can replace the ALIGN="left" with depending on how you want the text to wrap around the image. If you want to place text between two images, you could use the following method:
<IMG SRC="image.gif" ALIGN="left"> <IMG SRC="image.gif" ALIGN="right> This text is what will be in between the two images.
Visit Ask Jeeves online! The address is www.askjeeves.com!
|
In trying to make their browser better than the others, both Microsoft and Netscape have created their own HTML commands. While many of these can do very neat things, most people, including me, suggest that you don't use them, because not all web browsers will display them. I am not going to tell you any in this section, but I just wanted to let you be aware that there are such things.
You probably noticed that several times on this webpage I've made use of tables. Tables are very good tools to organize data into a form that is easier to read than just listing it. Tables are not very hard to create, however, but they do use many different commands. I will show you an example of a table, than explain how to modify it to fit what you want.
<TABLE> <TR> <TD>Team</TD> <TD>Wins</TD> <TD>Losses</TD> </TR> <TR> <TD>Reds</TD> <TD>4</TD> <TD>5</TD> </TR> <TR> <TD>Cubs</TD> <TD>0</TD> <TD>9</TD> </TR> </TABLE> |
Here is what that would create:
|
The two blue commands <TABLE> </TABLE> start and stop the table. Then, we see the red <TR> </TR>. Each set of those starts and stop a row in the table. You always need to start a row right after you use the <TABLE> command, and you need to end it right before you use the </TABLE> command. The green <TD></TD> commands each create a column inside the row. By comparing the actual HTML code to the example table, you should be able to understand how each part works together to create the table.
This page is not by any means the only page devoted to HTML learning that there is. I encourage you to browse other pages and see if they can answer any questions you might have about HTML. If you can't find the answer to your question at one of those pages, please feel free to E-Mail me with your question at kc0aky@qsl.net. You can jump to some of these other HTML guide pages and see what you think!
Sample HTML
Here is a sample HTML webpage for you to use when working on your own webpage. It combines most of the lessons from this page.
<HTML> <HEAD> <TITLE>Welcome to Pier 2 Imports Online</TITLE> <BODY BGCOLOR="white"> <BODY BACKGROUND="marble.gif"> <BGSOUND SRC="welcome.wav" loop="1"> </HEAD> <BODY> <H2><CENTER>Welcome to Pier 2 Imports <I>Online</I></CENTER></H2> <center> Here is a price list of some of our fine imports: <TABLE> <TR> <TD><center>Item</center></TD> <TD><center>Pier 1's Price</center></TD> <TD><center>Pier 2's Low Price</center></TD> </TR> <TR> <TD><center>Chinese Chair</center></TD> <TD><center>$599</center></TD> <TD><center>$299.95</center></TD> </TR> <TR> <TD><center>Solid Oak Dutch Table</center></TD> <TD><center>$1,999</center></TD> <TD><center>$499</center></TD> </TR> </TABLE></center> See? Our prices are much lower than Pier One's! But, if you must, you can click <a href="http://www.peir1.com">here</a> to go to Pier 1's homepage!<br> <center><font size="-2">Copyright (C) 1997 Pier Two Imports</font></center> </BODY> </HTML>
Welcome to Pier 2 Imports Online
See? Our prices are much lower than Pier One's! But, if you must, you can click here to go to Pier 1's homepage!
|
Please fill out this survey truthfully and honestly. If you do not currently have your web browser configured to send mail, this form will not work. Just go to your mail program and answer the questions in a message addressed to kc0aky@qsl.net. Thanks!
This page is copyright (C) 1997 by Shawn Garringer. All rights reserved. Some pictures on this page are copyrighted by other sources. The Ask Jeeves logo, and the Ask Jeeves search engine are registered trademarks of Ask Jeeves Inc. This page was created for Computer Composition class at Washington High School. To E-Mail the instructor, Jeff Larson, use the address swashington@cedar-rapids.k12.ia.us. Jeff Larson is not responsible for any information on this page. The WWW hit counter located at the top of the page is provided by Escati Hit Counters. Click on the counter to get your own free hit-counter! You may not use this page for more than educational purposes without the consent of Shawn Garringer. To E-Mail Shawn, the address is kc0aky@qsl.net.
