Home > Misc > Internet/Webpage 101


Up one Level	Short Cut to Site Index

"Internet / Webpage 101"

The meteoric rise in popularity of the internet has resulted in millions of people on-line that feel it is too complex to understand but they won't admit it for fear of being thought of as outdated or behind the times. Not long ago a survey revealed that over 80% of the homes in the US have a VCR, but less than 25% of the VCR users could program it to record something when they were away. It's even worse when it comes to computers and the Internet. It may be an incredibly complex entity, but it's made up of small understandable parts. This may be over-simplified for many who visit here, but I endeavored to keep it as simple as possible for a reason.

Servers are the place where web pages are stored. These servers belong to companies or, occasionally, individuals. Web pages, stored in the form of data, reside on the hard drives and CD-ROM drives of these servers.

Browsers are the program that runs on your home computer that requests, collects, interprets and displays the web page on your computer screen. The most popular browsers are Microsoft Internet Explorer, Netscape Communicator and America On Line's browser that functions much like Internet Explorer.

Internet Service Providers, ISP's, are what supply the connection between your computer and the server that has the information, web page or what ever else you are trying to find. These run the gamut of features from the popular and expensive America On line (AOL) to the Just as fast and cost free Alta Vista. AOL is set up for the first time user and has many features that are supposed to make your on-line experience easier and more productive. But, I have found that, sometimes, it's just too complicated for first timers. It's possible to simplify something in a way that confuses the intended users. Alta Vista is pretty much the other extreme. You log on and it displays a box or bar, depending on how you set it up, that flashes advertizements. There are no fancy features or high priced content. Just a connection to the Internet that is just as fast as most of the expensive dialup ISP's. There are also many specialty ISP's, some offer high speed connections through your TV Cable system, fast connections via satellites in space and even one that hooks up your laptop PC through the Cell Phone system for the ultimate in portability.

URL's are what holds the whole thing together. URL is short for "Uniform Resource Locator." Every photo, every bit of data, every server, every home computer on the web has an address. The part of it you don't see is called the IP address. This is a series of numbers that let the computers talk to one another without getting confused. It's somewhat comparable to the post office's Zipcode+4 system. To the Post Office's computers "08857-9999" is a valid place to send mail. To simplify the IP addressing system, URL's are used. You can think of URL's as computer language translated into human language. URL's are comparable to the Post Office's address system. "08857-0999" in human terms is "PO Box 9999 Old Bridge New Jersey." On the web, computers called "Name Servers" take care of the translation of URL's into their component parts and direct your requests to the proper Web Server just as the Post Office directs your mail.

Although it's complex in practice, to keep all those trillions of messages separate, all you have to concern yourself with is just the tiny little bit of the web you are using at any given moment.

So,"What's this all mean to me?" you might ask. Well knowing the basics helps you cut through all the bull. Many ISP's and Web Servers have "simplified" procedures to do things. In many cases it's actually simpler, easier and better all around to do it the "hard" way.

I saw a web page kit for making a simple, one page web-Site in an office supply store for $39.95 . You write down what you want to say and add some photos, stick it in an envelope and mail it to someone the understands HTML coding. They create a site and upload it to a server for you. It's a big rip off. Here's how you do it yourself.

With any text editing program, the simpler the better, I like Microsoft Notepad, open a blank text ".txt" file. In Notepad that's just starting the program. It starts up with a blank page. Substituting your information for what I have for my example page, type in

<HTML> To tell the Browser that it is an HTML file.

<HEAD> To tell the Browser that what follows is the header section of the page.

<TITLE>Dancing Shoes</TITLE>To tell the browser what to put in the bar, usually blue, on the top of the page. It's also the title that will show up when someone finds your page with a search engine.

<META name="keywords" content="buck, deer, hunting, woman, camping, canoeing, recipes, political, backpacking, 2nd amendment, second amendment"> These are the "Keywords" that a search Engine uses to automatically categorize your site. They are totally optional and can be left out completely. If you use keywords pick the 8-10 that best describe your page.

<META name="description" content="Constance Link's Pages. Political Commentary, Views on life in general, hunting stories, Bio, lots of interesting links."> This is the description of your site that a Search Engine shows to someone looking for a site that specified Keywords like yours when they started the search. Keep it simple and to the point.

This line is totally optional. Anything between the  is "comment" and won't be displayed at all. This is just where you "sign" your work.

</HEAD> Many HTML commands have a "start" and "stop" attribute. Up on the top of your new page you told the Browser that what follows is "Header". Now you have to tell it the "Header" portion of the page has ended.

<BODY TEXT="#000000" ALINK="#FF0000" LINK="#00FF00" VLINK="#0000FF" BGCOLOR="#FFFFFF" BACKGROUND="../artwork/background.gif" BGPROPERTIES="FIXED" > This line specifies the basic properties of your page. "BODY" tells your browser that what's in the following lines is primarily content. "Text" specifies the numeric value of the text color for the page. "#" means the number is Hexadecimal. , as in Base 16 not Base 10. That's 0 through F instead of 0 through 9. Don't you wish you paid closer attention in math class?. Of the 6 following digits, the first 2 are red, the second 2 are green and the last 2 are blue. #000000 is black. #FFFFFF is white. #00FF00 is bright green. #005000 is the shade of the green text on this page. "ALINK" is where you specify the color of the link in use, usually red. "LINK" specifies the color of unvisited links and "VLINK" the color of visited links. "BGCOLOR" specifies the color of the background for older browsers. "BACKGROUND" specifies the URL, relative or actual, of an image to use as a background for newer browsers. Stick with small .gif and .jpg files. "BGPROPERTIES" is an IE5.0 command that when "FIXED" is specified freezes the background and lets the text and images scroll past it. It's a neat effect, but is ignored by most browsers. The only thing mandatory on this line is the "BODY" command. the rest can be left off, but the browser will usually select a dull grey for the background and usually use blue and green for the links, if you don't tell it otherwise.

<FONT FACE="GEORGIA, TREBUCHET, BOOK ANTIQUA, TIMES NEW ROMAN, TIMES"> This line specifies the typeface to use on the page. In this case it will try to use Georgia first. If Georgia isn't installed on your computer then it will try Trebuchet and so on. If you don't use this line the Browser will use whatever it has set as default. That makes this line totally optional if you don't care which typeface is displayed.

This line is totally optional. It's just a way of making notes to yourself to keep track of what you are doing on complicated pages. This isn't really the end of the "Header". It ended 3 lines up from this line. I tend to think of everything above this line as part of the basic blank page and therefore part of the "Header". Sort of header from a human perspective if not a computer perspective.

This is just another optional note. Most of my pages have a semi-repetitive navigation section, so I like to bracket it with comments like this to make it easier to make changes later .

<P><CENTER>Return to <A HREF="internet101.html#top">Internet / webpage 101</A></P></CENTER> This is the hyperlink back to this page from the dancing shoes example page. "Return to" is not part of the link's text. Only the "Internet / Webpage 101" part , between the "A" and the "/A" is part of the clickable link. The "#top" part of the URL is to get the browser to go to a specific part of the page. If you look in the HTML code of this page you will find a " NAME="top" ". That will be at the top of the browser window after you click on the link on the example page.

It's just another totally optional note to self.

<A NAME="content"></A> The first part of this line is one of those markers within a page that was mentioned 2 lines above here. If "#content" is added to the URL of this page, then the "Start Content" portion of the line will be in the top corner of the page when it is displayed. However you won't see it there because it's invisible. Remember, anything between the  isn't displayed.

<TBODY>

<TR>

<TD width="100%"> There are too many options in these lines to cover here. I'm using a very powerful page-formatting tool to do a very simple function. The "700" several lines up set's the maximum width of the page content at 700 pixels. The effect is not apparent on the example page but it is why the text doesn't run all the way to the edge of this page, if you have a screen width of 800 or wider. It's useful in keeping easy to read page widths on text-laden pages. Adding the command " BGCOLOR="FFFFFF" " after the "700" will make the affected area obvious. The "BACKGROUND" command also works here. This enables you to layer a background over a background on part of the page. These lines are completely optional. However they work in conjunction with some further down the page. If you don't use these lines, don't use those either.

It's just another optional note to self.

<BR><IMG SRC="../artwork/indent.gif" ALIGN="LEFT" >Page Content goes here. This line is a paragraph indent. Most people use several non-breaking spaces. Some use a small, 1 pixel by 1 pixel clear GIF and specify the size to display it to set the indent size. Because I use a uniform amount of indent on my paragraphs, I prefer to use a clear GIF that is the size of the indent I want. The advantage to this method is that all the paragraphs on all the pages will be absolutely uniform and can be all simultaneously modified by just changing the size of a single GIF in a photo editor program. As there is not much text on the example page, you can't see the effect. All it does there is move the words "Page Content Goes Here" slightly to the right. I use this technique throughout my website. You can see the effect on the upper part of this page. The transparent GIF is the paragraph indent.

<P><CENTER><IMG SRC="../artwork/dancingshoes.gif" HSPACE="10" VSPACE="10" ></CENTER></P> This line displays an image. It's separated from the content above it and below it by the paragraph code, "P" and "/P" , this is the start paragraph and end paragraph commands. The effect the "paragraph" command is similar to but not identical to the break command, "BR" . Take a look at the paragraph indent line. You will notice a break at the beginning of the line. That means the indent will be at the start of a new line and spaced out from the line above it in a similar manner to the "paragraph" command. The image to be displayed is in another folder. The "../" in the relative URL means up one level out of this folder, "artwork/" means get it from the folder named "artwork", "dancingshoes" is the name of the file and it's a ".gif" image file. The image will be centered left to right by the "CENTER" and "/CENTER". A clear area, 10 pixels wide, around the image is maintained by the "HSPACE" and "VSPACE" specifications.

Just another note to self.

</TD></TR></TBODY></TABLE>

These three lines are the other half of the commands that set the content area of the page at 700 pixels wide. If you don't use the other half, don't use this half.

</BODY> This is the other half of the "BODY" command up near the top of the page.

</HTML> This is the other half of the "HTML" command at the top of the page.

Now all you have to do is save or rename it with the extension" .htm " or " .html " and it becomes an HTML document, A.K.A., a web-page.

Click here to see the finished product. It synchronizes best in the newer versions of Internet Explorer. To see the finished file, when you get there, click on the "Edit" button or "View" "Page Source" depending on your browser and version.

If you are wondering where I got the dancing shoes graphic, I made it. I photographed the shoes, scanned the slides, altered the images to suit with MS Photo Editor and MS Paint, and pieced it all together with Ulead GIF animator version 1.5. Computers allow the easy creation of graphics that used to take an expert to create.

You ask "What does all this mean?" Well, you now know more than 50% of the web users out there. Congratulations!

Shortcut to Site Index

Go Up to the top of this page