HTML Tutorial, Part 1

This page is a tutorial in HTML (Hypertext Markup Language) programming. HTML is not difficult to learn, and you do not need any prior programming experience--just follow this guide. If you need help with intermediate to advanced stuff, then see HTML Goodies at the following address:

On the next page is the code for a basic HTML document. The first HTML tag you will see is <html>. This tells the computer that this is an HTML document. At the bottom of the document is the complementary tag, </html>. In general, a slash indicates the end of some operation--this slash indicates that this is the end of the HTML document. HTML tags are not case-sensitive, so they could just as well be capitals as lower-case.

After telling the computer that this is an HTML document, you have two other operations: <head> and <title>. These tell the computer what to put at the top of the screen as the title of your document. In this case, you would see "Great Ideas in Personality--Group Project A" at the top of the screen. Just like almost all operations in HTML, you must tell the computer when the operation ends (using </title> and </head>) as well as where it begins.

Following this is the <body> command. The more elaborate version you see has a bgcolor command that makes the background white--without this command, the screen will appear gray. The </body> command appears near the end of the document, and everything in between is what appears on screen as the body of your document.

A useful feature of HTML is that you can separate different sections of your document with a horizontal line. This is done using the following command: <hr>. Often, this command is embedded inside two <p> (paragraph) commands. In HTML, a carriage return and indentation are NOT sufficient to indicate the beginning of a paragraph. Rather, a paragraph requires a <p> command, which will cause a double space. A <br> (break) command will cause a single space.

Whatever comes between the commands <center> and </center> is centered. <h1> indicates the beginning of a heading, i.e., a section of enlarged text, and </h1> indicates the end of the heading. <h1> is the biggest heading, <h2> the second biggest, etc.

Now comes the most novel feature of HTML documents--the command that allows you to jump from one page to another. This is done by the command <a href=http://insert_address_here>, followed by the text you want underlined, followed by </a>. The address you want to insert can be found at the top of the screen on the page whose address it is. Whatever is between these two tags will be underlined, indicating that it is a hypertext link and allows users to jump to another page.

Some useful things that do not appear in this web page are <b>boldface</b> and <i>italics</i> type. Also, you might want to do a list. This can take one of two forms: ordered list (numbered from 1 to n), or unordered list (with a dot in front of each element). For an ordered list, start with <OL>, end with </OL>, and start each list element that falls between these tags with <LI>. For an unordered list, start with <UL>, end with </UL>, and start each list element that falls between these tags with <LI>.

Another very useful thing to know how to do is create a table. This is done by starting off with <table> and ending with </table>. Between these tags, start each element in a row with <td>, and end each row with <tr>, which will signal the end of one row and the beginning of the next. What follows each <td> tag can be anything from a word to a picture to a paragraph, and could include jumps to other pages.

Now you know how to create a simple HTML document. One way to learn how to do additional things is to find a web page on which somebody else has done what you want to do (like another page in the Great Ideas website), go to the menu at the top of the screen, and under View choose Document Source. This will show you the exact HTML code that produced the page. You can look at both the source and the result at the same time to see the HTML code that made the page look the way it does.

Forward to HTML Tutorial, Part 2

Back to Web Design

Back to the Great Ideas in Personality Home Page