Welcome, grasshopper! Have you been struggling with your home page, and fighting with HTML? Relax -- it's all in the Zen... learning how to let your pages display properly, rather than fighting with them to try to make them right. Let's begin our meditations by exploring how the pages we make come to be displayed on Web.
About 50 years ago, a man named Vannevar Bush observed in an article that fixed, printed text in books did not match in way people learn. He proposed a method that has come to be called "hypertext," by which people could instantly access related information according to their own individual needs and interests.
As the emergence of personal computers began to make this possible, they also were affecting another area of information processing: how manuscripts were marked up and proofed for typesetting in magazines and books. Authors were submitting on diskette instead of paper, and typesetting machines were now computer-controlled.
A Standard Graphics Markup Language (SGML) was developed so that the instructions to control the typesetter could be inserted directly into the electronic manuscript. Hyper Text Markup Language - HTML - was developed from SGML to allow documents that were designed for computer display instead of paper to include hypertext links.
SGML was not intended to define the design or style of the typesetting. The type fonts, sizes, and spacing for the various elements like headings, body text, and footnotes were programmed separately into the system. Rather, SGML was meant to tell the system how to apply the style to different parts of the manuscript and render the result as pages ready for printing.
"Browsers" -- WebTV, Netscape Navigator, Microsoft Explorer and others -- are a kind of typesetter. They fetch the source content from where it is stored, read the HTML markup tags that are applied to text, and render it onto the screen according to the style that was pre-programmed into the browser by its developer. Browsers are software applications that can be installed on a computer; the WebTV is a dedicated-function computer with its browser already built in.
HTML 1.0 was a nice simple standard. Too simple. Web page creators wanted to do more than just hyperlink text displayed on gray backgrounds -- they wanted to include color, pictures, animation, audio, and to lay out their pages so that they would provide an experience, not just information. Netscape began to extend HTML beyond the standard, and other browser manufacturers soon followed with their own extensions. The HTML standard itself began to incorporate many of the extensions, but not all browsers were able to keep up.
Today, browsers in common use support HTML standards ranging from version 2.0 to 3.2. Every browser has its own style of rendering the standard HTML tags and commands, and Netscape, Explorer and WebTV have their own special extensions as well. With the additional differences in screen and window sizes, fonts, plugins, preference settings, and characteristics of monitors and TV displays, this means that your pages will never look the same to every person who views them.
Do I hear moans of frustration from the other side of the screen? Are you despairing that you will never get your page to look the way you want?
Relax, grasshopper. Try to abandon the idea of forcing your page to look a certain way, and instead learn to let it look good by leaning on what browsers already want to do. So what if it looks different to different users, so long as it provides a pleasing experience to all?
The Web Page Designers' Prayer:
Grant me the serenity to accept what the browser is going to do anyway,
The knowledge to affect the parts that I can,
And the wisdom to combine the two into a web page that my audience will enjoy.
Every HTML page begins with a statement <HTML> that signals the browser "I'm beginning an HTML page," and ends with </HTML> that tells it "OK, I'm finished now." What you've really done is create an HTML container, and everything inside that container is meant to be displayed as a web page.
A web page has two basic parts - a head, and a body. Each of these also is a container and, as you might imagine, the head sits on top. Each of these containers is opened and closed just like the page container was: <HEAD> opens the head, and </HEAD> closes it; <BODY> opens the body, and </BODY> closes it. And that, Grasshopper, is all there is to your basic web page.
You can have a functional web page without anything inside the head (reminds me of some people I know). Usually, though, it contains a title that displays either on the bar at the bottom of the screen (on WebTV) or in the top of the browser (computers). The title is inside a title container, which is inside the head container. Here's the code for the head and title containers of the page you're reading now:
<HEAD>
<TITLE>Zen of the Page</TITLE>
</HEAD>
The body is where the action takes place, and everything you see and hear on the screen will come from what you write in the body container. If you simply wrote the HTML that's shown in the picture, and then wrote your name inside the body container, it would display a web page with your name.
When we want to communicate with the browser, we signal it by encasing our message inside of angle brackets <>. Anything that's not inside of these brackets will be rendered as text. On the other hand, when the browser sees a < bracket, it will try to interpret everything that follows until it finds a matching > as a command.
A common HTML error is forgetting the > in a message sent to the browser. Another is using a < character within a piece of text (such as "if your age is < 18"). If you need to include these characters as text (as we do throughout this section), you create them with special codes so that the browser doesn't become confused: < displays <, and > displays >.
Not too complex when you break it down into simple pieces, is it? That's the whole idea of the "zen." It's easy to get tangled up in details, when what's really going on underneath is very simple.
Next time, we'll explore the Zen of HTML tags.... and you'll never have a "broken tag" again!
that signals the browser "I'm beginning an HTML page," and ends with </HTML> that tells it "OK, I'm finished now." What you've really done is create an HTML container, and everything inside that container is meant to be displayed as a web page.
A web page has two basic parts - a head, and a body. Each of these also is a container and, as you might imagine, the head sits on top. Each of these containers is opened and closed just like the page container was: <HEAD> opens the head, and </HEAD> closes it; <BODY> opens the body, and </BODY> closes it. And that, Grasshopper, is all there is to your basic web page.
You can have a functional web page without anything inside the head (reminds me of some people I know). Usually, though, it contains a title that displays either on the bar at the bottom of the screen (on WebTV) or in the top of the browser (computers). The title is inside a title container, which is inside the head container. Here's the code for the head and title containers of the page you're reading now: