Day One: Power HTML
The World Wide Web is a tool for communicating information. It is a collection of web pages that you can access from any computer logged into the Internet. The language used to create these pages is called HTML (Hypertext Markup Language).
To take full advantage of the web, you should know basic HTML. Please, don't feel intimidated. HTML is an extremely simple, yet powerful language that you can master in a few hours.
In this article, I will look at the HTML needed for 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 write 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. The designers of the language specifically left out advanced page formatting options so that it could work on inexpensive computers. The creators of the language concentrated on the logical structure of information—not on page design.
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. There are others who surf the web in Braille. You can also view simple web pages on cell phones, PDAs and other graphically challenged devices.
The best approach to page design is to keep it simple. Look through the web. The most successful sites (like Google.com, Amazon.com, Yahoo.com and eBay) have relatively simple designs. The most powerful pages are those that quickly convey information in as little time as possible.
Think of your page from your reader's perspective. The reason the reader came to your site is to access information. They care more about the quality of your information than your design skills. Since you value your reader's time, you want to create a page that will get them to your information as quickly as possible, without a lot of fluff. 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 hours.
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 <img src="picture.png" /> tells the web browser to display an image with the name picture.png.
Most HTML tags come in pairs. There is usually a start tag and an end tag. For example the tag <i> tells the computer to start writing in italics. The tag </i> tells the browser to stop italics mode. Note: HTML uses the slash character "/" for the ending tags. Just about every tag in HTML needs to be matched with a closing tag. The two notable exceptions to this rule are the <br> (line break) and <img> image tags.
NOTE: In xhtml (the new stuff) all tags require a closing tag. They allow a short cut. Writing the tag <br /> opens and closes the tag in the same action. You write an image as <img />
You can embed tags within tags. For example, <b>bold <i>italic</i></b> nests the italic tag in a bold tags. These nested tags appear as follows: bold italic. You should always close the tags in reverse order of the way you opened them. This is good form: <b><i></i></br>. This is a sloppy form <b><i></b></i>.
Viewing and Editing HTML
You can edit HTML with simple text editors like Notepad, or the infamous VI editor in Linux. There is a large number of full blown HTML editors that write the HTML for you. However, I think that HTML newbies should learn to write HTML in a plain text editor. You will find many applications that let you enter basic HTML in text boxes on the Internet. HTML is a skill that you will be able to use.
Web design tools like FrontPage and Dream Weaver provide integrated HTML editors. These editors are very nice since they handle the indenting of the code. Both editors let you toggle from the HTML code view to layout.
Unfortunately, the editors are also extremely seductive. It is easy to fall into the trap of letting the editor control your design. It is far better to master the design than to fall into the trap of letting the HTML editor master you. By all means, use Frontpage or Dream Weaver, but make sure you study the code they write.
Once of the best ways to master HTML is to study the HTML of pages on the web. You can view the HTML for a document in Microsoft Internet Explorer by selecting [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.
You can change your default web page editor in the Internet Option menu. Personally, I like to use Notepad, because it loads quickly.
The Structure of a Web Page
An HTML document is really just a long string of text with tags that tell the web browser how to display the page. HTML documents should begin with the <html> tag. This tag tells the browser than you are working in HTML.
The heading section doesn't display anything. It just contains information about the page. You begin the heading with the <head> tage and end it with the </head> close head tag.
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. You begin the body of the document with the <body> tag.
The basic flow of a page looks like:
<html> <head> <title>My Page</title> </head> <body> <p>My Insights on Life...</p> </body> </html>
Please notice the simplicity of the language. 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. The power of HTML is in its simplicity.
Before talking about text flow, I would like to bring up a few terms from the ancient world of printing. If you have a paperback novel handy, I ask that you take a moment to open the book, and look at its structure.
Novels have very little formatting. Almost all books in the book store use the same font. Publishers have carefully honed this simple style over the centuries. The reason books all use basically the same font is that people read through a process of pattern recognition. Changing the font on a reader decreases their ability to recognize the patterns they are reading.
Publishers use format to enhance a work. The do not want to overpower it. Printers consider the information in a book to be more important than the design of the page.
A typical novel uses only two fonts: a "display font" for the headers at the top of each chapter, and a "body font" for the main text. HTML is set up to use this same millennial old structure for printing documents. You use a header tag (e.g. <h1>) to indicate a header and the <p> tag to indicate the paragraphs in your document.
HTML has 6 levels of headers for creating outlines. The headers have the labels <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. The outline for my life's story might look like:
<h1>My Life</h1> <h2>Chapter 1: I was born</h2> <h3>In the hospital</h3> <h3>First day at home</h3> <h2>Chapter 2: School</h2> <h3>First Grade</h3> <h4>The big mean teacher</h4> <h3>Second Grade</h3> ...
You use the H tags to create an outline for a work. As with most outlines, you rarely get much deeper than level 2 or 3.
The most important tag in standard HTML is the paragraph mark. The paragraph mark shows where paragraphs begin and end.
Is this simple or what?
The <p> tag starts the paragraph, and the </p> tag ends the paragraph.
The main goal of the tags is to describe the format of your document. The browser will take care of displaying the document for you.
The designers of HTML wanted people to concentrate on the meaning of their work and not the format. HTML includes a few tools for controlling the format. It is best to use these sparingly. You will notice that books rarely use bold or italics. Here are a few of the accepted HTML formatting tags:
|<b></b>||Bold||Makes the text bold.|
|<i></i>||Italic||Makes the text inside the brackets italic.|
|<u></u>||Underline||The <u> tags makes things underlined. Unfortunately many browsers indicate that something is a hyperlink by underlining it. So use this with caution. Web browsers hate clicking on underlined text, thinking that it will be a link.|
|<em><em>||Emphasize||Emphasizes the text. In most browsers it does so by making the text italic.|
|<strong>||Strong||Makes the text inside the brackets stand out. Generally by making the font bold.|
|<font></font>||Font||You can specify the font. In general it is best to leave the selection of font to your reader.|
|<blink>||Blink||The blink command makes text blink. Most web browsers do not support this tag, since web browsers hate blinking text.|
It is strange, but the less formatting you use in your document, the more professional it looks.
The really cool thing about HTML is the ability to link documents together. For example, if you are working on your masters thesis, you can add links to your end notes. To make links, HTML uses a thing called an anchor tag. The anchor tag has two forms: The first form lets you name a destination in your document (you really don't use this form that much.). An anchor destination has the syntax: <a name="here"></a>. If you put an anchor in a page, you will be able to link to that anchor.
NOTE: FrontPage calls an anchor a "bookmark". You insert an anchor in a document by selecting Insert, Bookmark from the main menu. It took mea a long time to figure out that FrontPage was calling anchors bookmarks.
The second, and most common form of the anchor tag, creates a link. A link has the form:
<a href="destination" target="_top">link name</a>
You will need to memorize this structure, you will be typing it a lot. NOTE: whatever is between the <a> and </a> tag is hot.
The most important attribute of the anchor tag is the link destination. Being computer geeks, they chose the really strange name href. The value of href will be one of three things:
- an anchor tag in the document,
- a page on your web site,
- or a page on the world wide web.
The syntax for a link a local anchor is: <a href="#mylink">display</a>, where mylink was defined with the anchor tag <a name=mylink></a>.
To link to a local file, href should be the name of the file. For example, the index page for this course has the name index.html. To link to the index, I simply write: <a href="index.html">index</a>. You can link to an anchor tag in a local document with by using the # character. <a href="index.html#anchor"> would link to the anchor called "anchor" in the index.html file.
Finally, to link to a file on the world wide web, you need to write the full URL (Uniform Resource Locator) of the file. The URL is the thing displayed in the address bar of your web browser. The format of a URL is:
In most cases the protocol is HTTP (HyperText Transfer Protocol). The domain is the unique name of the web server, for example descmath.com. Directory refers to the directory structure of the domain. If the file is in the root directory, you will omit it. The file name is the name of the file. The query string is simply additional parameters that you pass to the file.
To link to the page subject.html on protophoto.com, I write the link:
<a href="http://protophoto.com/subject.html" target=_new>protophoto.com</a>
The line above displays as: protophoto.com. You will end up typing this link code thousands of times in your career. So memorize this structure.
The optional target attribute tells the browser where to display the new page. Common values for target are:
- _self -- Display page in current frame (default)
- _new -- Display in a new window
- _top -- Display on whole page (this is only relevant if you use frames)
- _parent -- Display in a parent frame (only relevant if you use frames)
Embedding Images and other resources
Text isn't the only thing on the web. You can insert images, sounds, animations and other resources on a page. To insert an image, use the <img> tag. The most common images are jpg, gif and png.
The image tag has the following attributes: src, width, height, border, hspace, vspace, align and alt. You will need to remember these attributes. The src attribute is the location of the image. The location name for the source tag follows the same conventions as the hyperlink href tag. (that is: http://website.com/directory/image.png).
The width and height attributes indicate the size of the image in points. It is generally best to set these attributes. If you do not, the browser will have to wait until it downloads the image to know the size of the image.
The alt attribute is alternative text for the images. In some browsers, the alternative text shows up when your mouse hovers over the image. It is always best to give a short alternate description for the image. The border tag determines the border size for the image. Generally you want this to be 0.
The align attribute determines how the image is aligned in a paragraph. I put an image to the right of this paragraph. This image has a large border. I set hspace at 5 (to set it off from the paragraph), and made the image hot with an anchor tag. I used the following commands.
<p> <a href="http://slsites.com" target=_new> <img src="http://slsites.com/images/sls120.png" width="120" align=right hspace=5 height="60" alt="Salt Lake City" /</a> text ... </p>
Bulleted and Numbered Lists
HTML has two basic types of lists: ordered and unordered. An ordered lists begins with numbers. An unordered list begins with bullets. You start an ordered list with the <ol> tag, and unordered lists with the <ul> tag. The <li> tag indicates the line items in the list.
<ol> <li>one</li> <li>two</li> <li>three</li> </ol>
Will create the ordered list:
<ul> <li>one</li> <li>two</li> <li>three</li> </ul>
Creates the bulleted list:
The HTML table structure is great for creating and displaying data. Since the goal of this course is to combine PHP and mySQL, we will end up creating a large number of tables. All tables have the same structure.
|<table>||This tag starts the table.
There is only one table tag per table
|<tr>||This tag starts a row in the table.
You repeat the tag once per line.
|<td>||This tag starts a data element.
You need one td for each column in the table
|</td>||This tag closes a data element.
It is always followed by either a new <td> or a </tr>
|</tr>||This closes the table row.
It will be followed by a new <tr> or a </table>
|</table>||This tag closes the table.|
The table structure above will create a standard, free flowing table. If you use HTML to display data from database, you will make a lot of tables, and will need to remember the basic order of table tags: <table><tr><td></td></tr></table>. You repeat the the <td> tags for each column in a table, and repeat the <tr> tags for each row.
Displaying data in tables takes a very large number of tags. A table with 5 columns and 50 rows requires 50 <tr> tags, 50 </tr> tags, 250 <td> tags and 250 </td> tags.
You can combine cells in a table with the colspan and colrow attributes. To make a cell that spans two columns, you would write the tag as <td colspan=2>. I often use the colspan attribute to make a general heading for a table. You can also make a cell span two rows with <td rowspan=2>.
There are several attributes that you can use to format the rows in a table, which I will detail in the Table Attributes page.
Since HTML does not have a great deal of formatting features, early web developers used tables to format their web pages. To create a page with a menu on the left, they would create a table with two cells. They would put the menu in the left cell and the data in the right. Today, the preferred way to layout pages is with Cascading Style Sheets (CSS).