Howstuffworks.com's "How a Web Page Works"

Sponsored by

How a Web Page Works

by Marshall Brain

Sponsored by

Verio Web Hosting Services hosts hundreds of thousands of sites and offers virtual hosting services, ecommerce services, domain name registration services, ecommerce services and high-end dedicated machines.

Related Articles! If you are interested in web pages, you may also be interested in the other articles in the How Stuff Works Internet Category. You can Click Here to see a complete list of articles in the category!

Have you ever wondered how a web page works? Have you ever wanted to create your own web page? Have you ever heard the word "HTML" and wondered what it means? If so, then this edition of How Stuff Works will be incredibly exciting to you! In this edition we will look at the art and science of web pages, and we will experiment with a number of techniques that you can try out on your own machine today to learn about creating your own pages. It turns out that web page creation is both incredibly easy and a lot of fun! By the time you finish reading this page you will be ready to start creating your own.

So let's set the stage. At this moment it is nearly guaranteed that:

You are sitting at your computer (and there is a 90% chance your computer is a Windows 95 or Windows 3.1 machine)

You are using a web browser to read this page, and that browser is either Netscape's Navigator or Microsoft's Internet Explorer, and...

You want to learn how web pages work, and perhaps learn the art of creating your own pages.

Because you are sitting at a computer, because you have a web browser, and because you have a desire to learn, you have everything you need to get started. You can experiment for weeks with your web browser and learn how to create any page that your mind can imagine.

In order to talk about web pages and how they work, you will want to understand three simple terms. Here they are [if some of this sounds like technical mumbo-jumbo the first time you read it, don't worry about it]:

Web Page - A web page is a simple text file that contains text along with a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen. The tags are simple instructions that tell the Web Browser how the page should look when it displays the page. The tags do things like change the font size or color, arrange things in columns, and so on. The web browser interprets these tags to decide how to format the text onto the screen. HTML stands for Hyper Text Markup Language. A "Markup Language" is a computer language that describes how a page should be formatted. If all you want to do is display a long blob of black and white text with no formatting, then you don't need HTML. But if you want to change fonts, add colors, create headlines and embed graphics in your page, then HTML is the language you use to do it.
Web Browser - A web browser, like Netscape's Navigator or Microsoft's Internet Explorer, is a computer program (also known as a software application or simply application) that does two things. First a web browser knows how to go to a Web Server on the Internet and request a page so that the browser can pull the page through the network to your machine. Second a web browser knows how to interpret a set of HTML tags within the page to display the page on your screen as the page's creator intended it to look.
Web Server - A web server is a piece of computer software that can respond to a web browser's request for a page and sends the page to the web browser through the Internet.

Every day there are millions of web servers delivering pages to the web browsers of tens of millions of people through the network we call the Internet.

For you, a person in the process of learning how web pages work, it turns out you can experiment with web pages without having a web server. Your web browser can easily pick up web pages from your personal machine without you owning a web server. Once you understand how to create your own pages, it is likely you will want to put them "out on a web server" so that people around the world can load your pages and read them. We will talk about how to do that at the end of this article.

There are many ways to create web pages. Hundreds of companies have created tools to help with the process in one way or another. Our goal here, however, is to understand how web pages really work (rather than have a tool hide the process from us). Therefore we will use the simplest tools possible - tools that you already have on your machine.

Experiment
To get started creating your own web pages, you can begin with the following experiment. On your machine you have a program that can create simple text files. On Windows machines it is called Notepad (On Windows 95 click the Start button, click Programs, click Accessories and click Notepad. On Windows 3.1 go to Accessories in the Program Manager and click Notepad). On a Macintosh it is called TeachText [If you cannot find these programs, it is also possible to use something like Microsoft Word.]
Once you have Notepad open on your screen, type (or cut and paste) the following HTML text into the Notepad window:

<html> <head> <title>My First Page</title> </head> <body> Hello there. This is my first page! </body> </html>

Now you need to save this file somewhere so that you can find it in a moment. Save it to the desktop or (better yet) to a directory that you create to hold all of the pages you are going to create. Save it to the filename first.html or first.htm.
Now open the page in your web browser. All web browsers have a way to open a file stored on the local machine. In Netscape the File menu has an option called Open File. On Explorer there is an option called Open... and a browse button you can press. Open the file first.html. When you open it in your browser it will look something like this:

Three things are identified in this figure:

You can see that the page has the title "My First Page"
You can see that the page's body contains the words "Hello there. This is my first page!"
You can see that the URL being displayed is C:\WINDOWS\DESKTOP\first.html from the local hard disk (rather than the normal "http://..." that a URL would contain if we were getting the page from a server on the Internet).
By looking at the HTML text that makes up your first page, you can see why the page has its own title and that particular body. We used 4 different tags on your first page:

The <html> ... </html> tags mark the page as HTML text
The <head> ... </head> tags mark the beginning and end of the header for the page
The <title> ... </title> tags mark the beginning and end of the title for this page. The title is "My First Page".
The <body> ... </body> tags mark the beginning and end of the body for this page. The body for this page is the line "Hello there. This is my first page!".
Already you have learned 4 tags! Every web page you create will always contain these tags. You can see that these 4 tags happen to come in matched "beginning" and "ending" pairs. That's fairly common, but not all tags come in pairs - it depends on the tag.

Now that you have created and viewed your first web page, you are well on your way to becoming a web page pro! The key to knowing everything about how a web page works is to learn more and more of the HTML tags that let you customize your pages. You also need to learn about two tools that help you create your own graphics for your pages. In the following articles you will learn everything you need to know to create any of the pages you see at How Stuff Works! These articles walk your through all of the information you need in a logical order:

How the Fundamental Tags Work - These are the basic, workhorse tags that do a majority of the formatting work on any web page.

How Tables Work - Learn how to create tablular lists of information as well as sidebars and columns.

How GIF and Animated GIF Images Work - Learn how to create GIF images and animated GIFs.

Getting on the air - Learn how to find a web hosting company and get your page on the air!

Links - To learn more, click here!

Click Here to go to the next article in this series.

Click Here to see all of the articles in the HSW Internet category.

Click Here to see the How Stuff Works home page.

Sponsored links to help you with your website:

Hostindex.com Search the web's LARGEST hosting directory

Free Webmaster Tools E-Zine - Free weekly e-zine that presents hig quality tools, tips, and news for webmasters and web designers. Subscribers have free access to the member area.

Make your own Screen Savers from your favorite images. Download trial version for FREE.

Download webROCKET today and increase your Internet connection speed up to 200%!

Animation Factory - Several thousand FREE Animations, web graphics and clipart items.

E-commerce and Internet Business Solutions - Complete internet business solution. Online STORES, storefront development systems, shopping carts, 24/7 order processing and credit card acceptance.

Monster Crawler - Meta Search Engine - Search all the major search engines with just one click!

Network Solutions - Everything You NEed to Get Online.