Click to go to other BBHQ pages
  privacy | contact us | FAQ | member services | BBHQ newsletter | this week’s essay | site nav | mobile?
        The BBHQ Newsletter

Subscribe   Unsubscribe

First name:

E-mail:

   

The Birth of a Web Page

How does an web page get from the idea stage to a working web page on the Internet? And how does all that stuff get onto a web page? We're going to scratch the surface on that topic right here.

This page is aimed at the curious but inexperienced Internet surfer. We're not going to dig very deep here; but we think this is a good place start talking about web page development. However, if you have no idea what the Internet is, what URLs, ISPs and cookies are, you might want to read our Internet Primer first.


Who You Talkin' To?

Before we get into the makeup of a web page, we need to define who you are "talking" to when you develop one. When you write a letter or (for the most part, an e-mail message) to your Aunt Sue, you write stuff specifically for her - the recipient. What you write is what the recipient sees. It is a bit different when writing or developing a web page. Although your web page reader may be the ultimate user of your page, you do not write it for or to that person. You actually write it for the web browser, which is probably Internet Explorer or Netscape. Because it is the web browser that formats what you write and presents it to the reader. So while you may be thinking of what you want the reader to see, you have to write it in a manner that the browser will understand so that the browser will format and present it to the reader as you intend. The browser is the middleman here. So... keep in mind that you are "talking" a browser - a computer program - not a human being.

Internet browsers cannot read Microsoft's Word word processing documents. Those documents contain special characters and coding that the browser cannot handle. The Internet browser understands only a simple text file, a document that, all by itself, does not contain any special characters. It can understand only the characters on your keyboard.

You can use one of the fancy Internet development software tools to create your web page; that is, to translate what you type, in simple English, into a properly formatted web page, using terms and symbols that the reader's web browser will understand. Perhaps the most popular one is Microsoft's Front Page. Actually, you can save a Microsoft Word document as a web page file (in a non-Word, text format). And you may ultimately wish to do that. But to do that does not help you understand what is going on.

So, we are going to recommend and assume that you are using a simple text editor, like Microsoft's NotePad or WordPad, or whatever the Apple equivalent is, to create a web page. These text editors do not add any special coding to your file.

When you save a text file on your hard drive using Microsoft's NotePad, the file has a name. The name might be "auntsue." It also has a file extension, or last name. Text files automatically have an extension of ".txt." So your full file name might be "auntsue.txt."

When you develop a web page, the file must have an extension of ".htm" - the extension will tell the browser that it is a web page. (OK, so there are some exceptions to this rule; but please, stick with me here.) So your full web page file name might be "auntsue.htm."

The "htm" stands for "Hyper-Text Markup"; that's just another fancy buzzword that the nerds made up. There is nothing magical about it. But the file extension tells the browser to treat the file as a web page, and to expect to see special coding when it opens it up and looks at it.

Actually, "htm" is short for Hyper-Text Markup Language, or HTML; the full acronym is HTML. You'll see us throw that acronym around frequently. But on your computer, a file extension can be only 3 characters long; so it has to be "htm" when you save the file, not "html."

As we explain in our Internet Primer, an Internet web site, such as Baby Boomer HeadQuarters, consists of several (actually, several hundred) pages. Each web page is a separate file, like a Word word processing document. At the risk of over-simplifying it, a web page can contain two types of things: text (words) and graphic images (pictures). (We'll broaden that definition later; but that is sufficient for now.)


Text In Your Web Page

Text is just words... sentences... commas, periods... that kind of stuff. You enter text in your text editor for your web page exactly as you would if you were typing a letter to your Aunt Sue.

Well, that is not exactly true. But it is a start.

When you are writing a letter to Aunt Sue on the computer, NotePad will automatically wrap the text for you at the end of each line. When you want to start a new paragraph, you hit the enter key, perhaps twice, to leave a blank line between paragraphs. Not so when you are talking to the browser. The browser does not understand line breaks (word wrapping at the end of a line) or blank lines created when you press the enter key twice. The browser ignores the enter key and blank lines. And the tab key, too.

So... how do you get the browser to display a blank line between paragraphs for your reader? You have to "talk" to the browser in terms it understands. The term that the browser understands for a new paragraph is "<p>" - a left-angle bracket, the letter "p," and a right angle-bracket. Exactly that way; no spaces, no commas, no quotes. In other words, instead of hitting the enter key twice, just type "<p>" - without the quotes - in your file. When the browser displays the page, it will interpret that as a paragraph break.

Actually, you can let the text editor wrap text as you type, and you can insert enter keys and blank lines for your own purposes, to make the file easier for you to read the text document. But the browser will start a new paragraph only when it sees the new paragraph coding.

So... if you were to write a short letter to your Aunt Sue using NotePad or your e-mail software (which is actually a text editor, very much like NotePad), your letter might look like this:

Dear Aunt Sue -

Thank you very much for the Saco de Toro you sent me for Christmas. I appreciate your thoughtfulness.

However, since I already have two Saco de Toros, I auctioned off the one you gave me on eBay. I got $24.75 for it. And with that, I bought a lovely pair of stocking slippers. I hope that is all right with you.

Happy new year!

Your loving niece,

Monica

You could save your file as auntsue.txt.

But... if you wanted to create a web page consisting of the letter to Aunt Sue using NotePad, the NotePad file would look like this:

<html><body>

Dear Aunt Sue -<p>

Thank you very much for the Saco de Toro you sent me for Christmas. I appreciate your thoughtfulness.<p>

However, since I already have two Saco de Toros, I auctioned off the one you gave me on eBay. I got $24.75 for it. And with that, I bought a lovely pair of stocking slippers. I hope that is all right with you.<p>

Happy new year!<p>

Your loving niece,<p>

Monica<p>

</body></html>

That is exactly how you would enter your letter. You could save your file as auntsue.htm; that is your HTML file. And with that, you would have created a web page.

So, the two documents look exactly the same, except for the additional paragraph codes in the second one.

Oh... and a couple other things: Note the coding in the top line and the bottom line of the HTML file. That is special coding that just tells the browser "this is the beginning," and "this is the end." You gotta' have it; you have to code it as shown above; but that's all it does.

You can give it a try. Create the HTML file described here and save it on your hard drive. Note the folder (or directory) into which you save it. (When you are done, you can keep the NotePad window open; we are going to modify the file in a few minutes.) Then bring up your Internet browser; you do not have to be connected to the Internet when you do so. In the web browser URL address box, type "c:\foldername\auntsue.htm" - excluding the quotes, where "foldername" is the name of the folder where you saved the file. (If you are using AOL, you might have to click File/Open to get to the file.) And there you go.... you will see, in your browser window, the HTML web page you created.

Now, let's modify the HTML file to show how you can enhance the web page. Suppose you want to highlight (or bold) the words "Saco de Toro" in the first line of your letter to Aunt Sue. Using Word, you would select and bold the text. But that will not work in NotePad. Instead, you have to talk to the browser and tell it that you want the specified text to be in bold. Using your text editor, modify the words "Saco de Toro" as shown here:

      <b>Saco de Toro</b>

The special coding before the word "Saco" tells the browser to begin bolding text. The coding after the word "Toro" tells it to stop bolding text. That's all there is to it. Now, save the HTML file on your hard drive. Finally, go back to your browser window and click the reload or refresh button to reload the page; and there it is: "Saco de Toro" is now bolded on the web page.

That's all there is to it. My point here is that a web page contains text and HTML coding. The HTML coding tells the browser how to present content on the web page in the browser window.

Of course, there are tons of other things you can do to enhance the appearance of text. You can underline and italicize text. You can change the size and color of text. But it is all done the same way. You enter codes in the HTML file that tell the browser how to present the text in the browser window.


Graphics

At the beginning of this discussion I said that a web page can contain two types of things: text (words) and graphic images (pictures). I have explained text; now I am going to tackle graphic images.

I have also said that an HTML file can contain only simple text... the characters on the keyboard. So... how do we get graphic images to appear on the web page when the HTML file can contain only text?

Simple... kinda'. In the HTML file we merely refer to the graphic image... we "point to it," and tell the browser to insert the graphic image into the web page in the browser window. We do that with coding in the HTML file that is similar to the coding we used to create a new paragraph or to bold text.

But we must have the graphic image to begin with. We're not going to explain how to create a graphic image. But a graphic image is a file on your computer's hard disk. The image file name has a file extension of "JPG" or "GIF." Let's assume that you have a graphic image named mydog.jpg, and you want it to appear on your web page. At the point where you want the graphic image to appear, you would insert the following coding into your HTML file:

      <img src="graphdir/mydog.jpg"> <p>

In this case the mydog.jpg graphic image is stored in a folder named "graphdir." This coding tells the browser to insert the graphic image onto the web page when it presents the web page to the reader in the browser window. This is how it will appear on the web page:

Note that the coding above includes paragraph coding to tell the browser to place a blank line below (or after) the graphic image.

So, the HTML file contains only text; but it also contains a reference to a graphic image. The graphic image does not appear in the HTML file, but it does appear on the web page in the browser window.

So I have, on my computer's hard drive, a separate HTML file for every page at BBHQ, and a graphic image for every picture you see on the web site. How do they get from there to my web site? That explanation comes next.


To the Moon! (Or, at least to the Internet)

As we explain in our Internet Primer, web sites (collections of HTML files and graphic images) reside on a web host computer, a big computer in cyberspace that you access when you come to BBHQ. That computer is turned on and available 24/7, in theory, so you can access BBHQ whenever you want. I create and test my HTML files on my little computer in my office, and then copy the file(s) up to the host computer to make them available to you. I can copy them using a computer program similar to the Windows Explorer program. Of course I have to be connected to the Internet, and I have to make a special connection to my web site - a connection that is not available to visitors to the web site. I use a software product called SmartFTP. That software creates a window on my computer like the Windows Explorer window. Using it, I can copy files up from my computer to my web site. In order to generate the web page I describe here, I would have to upload the auntsue.htm file and the mydog.jpg file from my computer to my web host.

I can add to and change pages on my web site whenever I want. As soon as I copy the file(s) that I have added or changed up to my web host computer, those additions or changes are available to visitors to the web site.


Loading a Web Page from the Internet

So... what happens when you click a link to a web page or enter a URL address into your browser window?

Accessing web pages on the Internet involves "communication" and action between your web browser, your ISP, and a web host computer. When you enter a URL into your browser address window and click go, the browser takes the address you entered, sends it to your Internet Service Provider (ISP), and asks it to find and retrieve that file. Your ISP has a huge index which identifes the host computer on which web sites are located. Your ISP goes to the proper web host computer and asks it to retrieve the specific page you want.

Let's suppose you entered "www.bbhq.com/auntsue.htm" into your browser address box. Your browser sends that address to your ISP. Your ISP goes to the host computer for the www.bbhq.com web site and asks for the file named auntsue.htm. The host computer returns a copy of the auntsue.htm file to the ISP, which returns it to your browser.

Now... your browser has this file, auntsue.htm. It looks just like we described above. Your browser opens the file and begins formatting the text in the browser window, using the text and the coding instructions we typed into in the file. The result is the web page, properly formatted.


Return to the Internet Primer

  Click to go to other BBHQ pages
  privacy | contact us | FAQ | member services | BBHQ newsletter | this week’s essay | site nav | mobile?

Copyright © 1998-2011 BabyBoomer HeadQuarters: WWW.BBHQ.COM - All rights reserved.
rev. 09/20/09