how web pages turn into a web site

So every web page, we've learned, is created as a simple text document, incorporating HTML commands. There are four steps to turning web pages into a web site: Naming pages, organizing pages, and transferring them to your server.

4 steps from web page to web site:

1. Naming pages correctly

2. Organizing pages efficiently

3. Linking between pages

4. Transferring pages to a server that's connected to the Internet

naming web pages

Each page on your web site will have a unique web address (or URL), based on the name of its corresponding HTML file. There are a few rules about how web pages (and thus HTML files) should be named.

4 rules for naming web pages:

1. Names should end in .html or .htm. This identifies it as an HTML file.

2. Names may not contain spaces. A page called lucky duck.html will not appear in the browser. If you want to create the illusion of a space (for easy reading) try an underscore: lucky_duck.html.

3. Names are case-sensitive. A page called LuckyDuck.html is different from a page called luckyduck.html. You can mix uppercase and lowercase letters, but the convention is to stick with all-lowercase.

4. The home page is named index.html. The browser will automatically look for a file called "index.html" when someone accesses your site.

If you're developing a site with many pages, you'll want to create a system for naming them so you can organize and identify them more easily. Different people have different methods. For instance, if you have a page on your website with publicity information and press releases, you might name it press.html or company_press.html. It depends on what other pages you're naming and what feels right to you. Once you've decided on a system, though, you should stick with it. Your site will be more logical and manageable if your file names are consistent.

organizing web pages

The pages that make up your web site will be stored in a collection of files and folders similar to those that appear on your desktop computer (though perhaps more rigorously organized).

The placement of any particular page within the hierarchy of folders and files will dictate its web address, or URL.

So a web page whose URL appears like so:

http://www.beardedman.com/beard_types/goatee/index.html

comes from a file called "index.html," placed in a folder called "goatee," which is in another folder called "beard_types," which lives on a server called "WWW," which is registered to the domain "beardedman.com."

Folder names follow similar rules as the individual files: They can't contain spaces, and they're case-sensitive so you have to pay attention to whether you're using uppercase or lowercase letters.

The folder and file names on the server become part of the URL. So the file and folders above would appear as http://www.beardedman.com/beard_types/goatee/index.html.

Now, if you have a simple site with just a few pages, you can put all the pages (including the front door) in one folder. But if you have a more complex hierarchy of site sections and subsections, your directory structure, too, will be complex.

The folders that contain your web pages (also known as your site's directory structure) should be organized to reflect your site's structure. So if you have five main sections on your site dogs, cats, birds, snakes, and hamsters your pages should be organized into folders with those names.

For an overview of how to organize your site, try this Webmonkey tutorial: http://www.webmonkey.com/html/96/45/index2a.html.

linking between pages

Normally, when you're linking to another page on the web, you include the complete URL of the page to which you're linking. (For a review of URLs, see understanding web addresses, p. 34. But if you're linking to a page on your own site, you can use a partial, or relative URL.

• Complete URLs show the file's full web address, domain name and all: http://www.localbooks.com/readings.html.

• Relative URLs show part of the address: readings.html.

Relative URLs are easier and more efficient. Rather than giving the full address, they describe the location of the page in relation to the current page.

So if you're linking from the front door of your site to another page that's in the same folder, you can just include its file name, like readings.html.

For a complete explanation of relative URLs, try this Webmonkey tutorial: http://www.webmonkey.com/99/39/index3a_page3.html.

transferring web pages

Once you've created your pages, named them, and organized them into folders, you're ready to put them on the web.

The task is pretty simple: You have to move the files from your computer to a server that's connected to the Internet. (See how web pages are served, p. 200.) The process will vary a little, depending on where your server is.

If your company has its own server, you can transfer the pages on your local network. In most cases, you'll move the files to a "staging" server, and someone else the system administrator or the production director will move them to the live site.

If you use a web host, you'll transfer the pages over the Internet and into your site's directory on the server. You'll do this with an FTP program (On the PC, try CuteFTP. On the Mac, try Fetch).

FTP or file transfer protocol is a simple way of transferring files over the Internet. Basically, you choose the files on your computer that you want to move and specify the server you want to move them to.

Before you can FTP your files, however, you'll need the server address and a user name and a password all of which your web host will supply.

To learn more about FTP, try these Webmonkey tutorials:

FTP basics

http://www.webmonkey.com/02/36/index4a.html

FTPing with CuteFTP

http://www.webmonkey.com/98/42/index2a.html

FTPing with Fetch

http://www.webmonkey.com98/41/index4a.html

how web pages are served

Once a web site is created, it's placed on a server so anyone on the web can access it. Like buildings on a street, every server has a unique web address (or domain name), so it can be located by browsers. And like apartments in a building every page on a server has a unique address within that domain.

When a user follows a link or types your URL (web address) into his browser, the browser sends out a request, trying to find first the server, and then the specific page indicated in the URL.

If the server and page are located, the server sends the page in the form of an HTML file with any accompanying images across the Internet to the end user.

Now, in order for a server to send a web page to a browser, the two computers must "converse" in a common language. That language, or protocol, is usually HTTP (HyperText Transfer Protocol).

This interaction is called a "client-server" relationship, in which the browser (or the person using it) is considered the "client." (Like a client in a store, the browser is requesting things from the server.)

serving "dynamic" pages

On simple sites, the server's role is pretty straightforward. It stores a lot of web pages, waits for a request, and sends the selected page off to the web user.

But few sites are so simple anymore. Rather than just serving pre-packaged "static" pages, many sites are serving customized "dynamic" pages which may say things like, "Welcome back, Jennifer! Check out the new Erasure CD!" and which require a lot more work on the part of the server:

• Static pages are created in HTML, placed on a server, and served in the exact same format to every user.

• Dynamic pages are created on-the-fly by the server and may appear differently to each incoming user.

What makes a web page dynamic isn't the content itself, but how it's created. A dynamic page is created on-the-fly by the server, once it's requested by the user. This gives the server a chance to make last-minute revisions, based on who's asking for the page. The level of customization varies. Depending on the site, the server may have to perform calculations before creating the page; it may have to draw information out of a database; or it may just chose from among several pre-packaged pages.

Dynamic content may be based on

• The user's profile. Returning visitors may be automatically served personalized information, like their local weather.

• The user's input. Visitors may receive customized pages, based on something they did like a search.

• The user's browser or platform. Visitors on a Mac may see a different version of the site than those on Windows

• Date, time, location or other factors!

Dynamic pages are generally made possible by scripts (like those written in PHP or ColdFusion) that reside on and rely on the server. (See understanding php, p. 168.)

understanding the server

A server is simply a computer that's connected to the Internet and can receive requests from and send web pages to other computers.

Any computer can be used as a web server, once you've installed server software (and connected it to the Internet, of course). Now, servers are usually high-performance computers connected to the Internet by a high-speed T-1 line. However, sites can be delivered from less-powerful machines with less substantial connections. They'll just deliver pages more slowly.

Variations on the server:

• Web servers store and deliver the elements of web pages. Most sites are stored on basic web servers.

• Application servers run specialized Internet applications, like commerce engines. They're customized to process requests and deliver dynamic results.

• Streaming servers deliver audio or video to the end user in real-time.

• Secure servers are web servers that encrypt data before transmitting it, to prevent electronic eavesdropping. They're commonly used for credit-card purchases and other financial transactions.

• Staging servers are used to preview web pages before they 're moved to the public web server.

• Mail servers send and receive email.

• Name servers are specialized servers that serve as giant directories of web servers: they keep track of all of the world's registered domain names.