Day One: Power HTML

The World Wide Web is a tool for communicating information. To take full advantage of this tool, you must learn basic HTML coding. HTML (Hypertext Markup Language) is the language of the internet. HTML is an extremely simple scripting language for describing text and hyperlinks. It is an extremely simple but powerful language. Even if you intend to use a web page editor, you should learn the basics of the language.

In this article, I will look at the basic HTML you will need to know for creating simple web pages and hyperlinks. I will introduce the paragraph and other tags. I will also emphasize the KISS (Keep It Simple, Stupid) principle. If you know HTML tags, then skip to the next section.  

The Riot Act

<< Push soap box into middle of room >>

Before launching into our study of HTML, I thought I would take a brief moment to read a section from the riot act. I am serious about this. Before learning how to HTML, you need to understand the purpose of the language. HTML is intended to be a very simple device independent language for marking up standard text and hyperlinks in documents.

HTML was not intended to be a page layout tool. It was designed for communicating text information. The designers of the language specifically left out advanced page formatting options so that it could work on less expensive computers, and so writers could concentrate on the logical structure of the information that wanted to communicate. HTML's success lies in its simplicity.

By removing the page layout features, it is possible to display information on a wide variety of devices. There are people in the world who still use black and white text monitors, and others who surf the web in Braille. You can also view simple web pages on Palm pilots and other graphically challenged devices.

I still believe that it is worth while to keep simplicity in mind when creating pages. Look through the web. The most successful sites like Amazon.com, Yahoo.com and eBay all have relatively simple designs. The most powerful pages are those that quickly convey information in as little time as possible.

Think of this from the end user's perspective. The reason people came to your site is to access information, not to check out your design skills. Since you value your reader's time, you want to create a page that will get them to the information as quickly as possible. That means concentrating on creating a clean navigation paths, and using standard formats and fonts.

 << Push soapbox back into corner. >>

The HTML We Need

Now that we have decided to use HTML the way Berner Lees intended, we will find that we can master the language in a few minutes. To finish this lesson, you will need a text editor (such as notepad, or the infamous vi editor in Linux).

HTML document is basically a simple plain text file with directives for displaying the web page. The tags are enclosed in pointy brackets <>. They generally follow the form of a key word followed by any additional parameters. For example, the HTML tag <table align=center> tells the web browser to open a table centered on the page. The tag </table> tells the computer to close the table.

Most HTML tags come in pairs. There is often one tag to start a section of a document, and another to finish the section. For example the tag <i> tells the computer to start writing in italics. The tag </i> tells the browser to stop italics mode. Notice that HTML uses the slash character "/" for the ending tags.  You can embed tags within tags for example <b>bold <i>italic</i></b> nests the italic tag between two bold tags. It would appear as follows: (bold italic). You should always close the tags in reverse order of the way you opened them. <b><i>sloppy</b></i> is not good form.

Viewing and Editing HTML

You can edit HTML with simple text editors like Notepad, or the infamous VI editor in Linux. I think all HTML newbies should spend a few hours scribbling out their work the old fashioned way in a text editor. I write most of my serious work in Notepad.

To view the HTML for a document in Microsoft Internet Explorer, you simply select [View][Source] from the main menu. You can also right click in the document and select [View][Source] from the popup screen. Notepad is the default HTML editor for Internet Explorer. Netscape uses a home grown clunky HTML display program. The Netscape program highlights the HTML tags, and reports on errors.

The Structure of a Page

The structure of a page is very simple. The page begins with a heading section. In this section, you can include information about the page such as the title. You can include in this section style sheets, JavaScripts and other resources for the page. The heading section doesn't display anything, it just contains information about the page.

The body of the document contains the stuff to be displayed. This is the main part of the page. It is where you will put all of your text, links and graphics.

At the end of the page, you will want to close the body and the html. The flow of a page should look something like this:

<html>
<head>
  <title>My Page</title>
</head>
<body>
  <p>My Insights on Life...</p>
</body>
</html>

Again, notice the simplicity. The tags tell the web browser where the paragraphs begin and end. Browsers ignore the white space (the carriage returns and extra spaces). When you write HTML, try to keep it simple and clean. Power is in simplicity.

Text Flow

The most important tag is the paragraph mark. The purpose of the paragraph mark is to show where a paragraph begins and ends. Is that simple or what? The <p> tag starts the paragraph, and the </p> tag ends the paragraph. You can center a paragraph by including the attribute align="center" as follows: <p align="center">.

The web browser takes care of spacing. Most browsers put two spaces between paragraphs. However, there may be some that format the paragraphs with a single line and indent.

HTML also includes 6 levels of headers. these have the tags <h1>, <h2>.... Again, the headers were pretty much set up for publishing book type information. I like to use header 1 for the title of the book, header two as the beginning of each section in the book, etc..

Formatting

Several tags change the format of the information. These are listed in the following table:

It is strange, but the less formatting you use in your document, the more professional it looks. Go to the local bookstore. There is very little formatting in the books on the shelves. Concentrating on structure and meaning, and leave the fonts alone.

Hyperlinks

Table Structure

In the 15th century, the publishing world went through the same transformation that the web is going through today. After Guttenberg released his version of the printing press, printers went wild. They embellished their text with gaudy fonts and buried text under mounds and mounds of fluff.

The idea didn't sell. Within a few decades, publishers went back to the basics and started focusing on using common formats and fonts.

There is a very good reason for standardization and simplification. First off, it is a lot easier to publish information with a standard font. However, the main reason for the transformation had to do with the end user...the reader.

As it happens, people read through a process of pattern reorganization. Even people who learned to read by pronouncing the words soon get to the point where they stop sounding each letter, and start recognizing entire words simply by the shape of the word. Speed readers imbibe entire pages at a glance. Any extra little formatting gets in the way.

Changing fonts and colors decreases your audience's ability to recognize the patterns of the words. All the hard work thrown into formatting a page often does little more than make the page harder and less enjoyable for you end reader.

The designers of HTML were very wise in their decision to separate form from function. In their ideal world, the end user would choose the font and colors that 

People read through a process of pattern recognition.   

A lot of people get extremely frustrated because they cannot control the layout and page breaks in HTML, when, in fact, the designers of HTML specifically left out such features.

HTML was designed to 

The purpose of a web page is not to show the world your design skills. The goal of a web page should be to communicate information. A successful web page quickly and elegantly communicate information to your audience.

When starting out to learn HTML, don't worry about design fonts and colors. Concentrate instead on the needs of your audience. The primary reason for the success of HTML is that it is a easy to learn tool for describing text.  

SELECT first_nm, last_nm, email_addr
  FROM Friend
 WHERE birthday = Today()
 ORDER BY last_nm; 

The first line of the query describe the elements of the data (first name, last name and email address.) The second line describes the source of the data. The WHERE clause limits the number of rows returned in the set. The ORDER BY line determines the positions of the members in the set.

SQL is easy to learn. There are only a few key words to memorize, but they are extremely powerful. Taking a few days to master relational theory will do more to propel your programming career than any other activity. 

index -- next
descmath, plusroot, search, rgreetings, sponsors