Understand HTML

You may be asking yourself, “What about XHTML?” Although this book is titled How to Do Everything with HTML & XHTML, that’s a pretty big chunk to take in at one time. You’ll find it much easier to understand XHTML if first you learn a few basics about HTML. Besides, there are many similarities between the two languages; learning about one will help you grasp the other.

HTML stands for Hypertext Markup Language, and it is the language in which, until recently, virtually all Web pages were written. Now, don’t break out in hives when you hear the word “language.” You don’t need complex logical or mathematical formulas to work with HTML, and you don’t need to think like a programmer to use it. Computer programmers must think through the tasks that they want their programs to perform, and then develop an elaborate (and usually complicated) series of instructions to tell the computer what to do. Although you do need to do some thinking and planning when you use HTML, it is not nearly that difficult. So, how does Hypertext Markup Language work?

Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext. It is this system of linking documents that has made the World Wide Web the global phenomenon it has become.

Markup Language describes how HTML works. With a markup language, you simply “mark up” a text document with tags that tell a Web browser how to structure it. HTML originally was developed with the intent of defining the structure of documents (headings, paragraphs, lists, and so forth) to facilitate the sharing of scientific information between researchers. All you need to do to use HTML is to learn what type of markup to use to get the results you want.

Markup 101: Four Key Concepts

The first step toward understanding and working with HTML is learning the basic terms that describe most of the functions of this language. You will come across these terms repeatedly as you use HTML and if you understand them, you will have progressed a long way toward comprehending HTML, not to mention XHTML.

Elements

All HTML pages are made up of elements. Think of an element as a container in which a portion of a page is placed. Whatever is contained inside the element will take on the characteristics of that element. For example, to identify a heading on a page, you would enclose it in a heading element <h1> </h1>. If you want to create a table, you put the table information inside the table element <table> </table>. To construct a form, you need the form element <form> </form>.

Tags

Often, you’ll find the terms element and tag used interchangeably. It’s fairly common, but not strictly accurate. An element is made up of two tags: an opening tag and a closing tag. Although it might seem somewhat picky to make this distinction, when you begin to work with XHTML (Extensible Hypertext Markup Language), it will be a very important difference to remember. If you get into the habit of distinguishing elements and tags from the very beginning, you’ll save yourself some confusion down the line.

All tags are constructed the same way. The tag begins with a “less than” sign (<), then the element name, followed by a “greater than” sign (>). For example, an opening tag for the paragraph element would look like this: <p>. The only difference in a closing tag is that the closing tag includes a slash (/) before the element name: </p>. Your content goes between the tags. A simple paragraph might look like this:

<p>This is an HTML paragraph.</p>

Did You Know?—Where the X in XHTML Comes From

Extensible (the X in XHTML) means that the language can be modified and extended, unlike HTML, which is fixed. Because of the explosive growth of the Internet, HTML is being stretched far beyond its capacity. For example, if musicians want to create a Web page with markup for musical notation, they are out of luck—HTML does not have the ability to accommodate this kind of specialization. However, as you'll learn in this book, XHTML will eventually make it possible for music page authors—and many other specialists—to create specialized extensions that will address their particular needs. Extensibility will enable XHTML to adapt to the growing and changing needs of the future.

Some elements do not use closing tags because they do not enclose content. These are called empty elements. For example, the line break element <br> does not require a closing tag. In the case of empty elements, add a closing slash after the element name, like this: <br />. When a browser sees the slash, it will recognize the element as one that does not need a separate, closing tag.

Tip

When writing an empty element, it’s important to add a space between the element name and the closing slash. Correct: <br /> Incorrect: <br/>

Attributes and Values

Attributes are another important part of HTML markup. An attribute is used to define the characteristics of an element and is placed inside the element’s opening tag. For example, to specify the size of an image or graphic on your page, you would use the image element <img /> along with the height and width attributes:

<img height=" " width=" " />

Be sure to notice that an equals sign and a set of quotation marks follow both the height and the width attributes. That’s because attributes need values to go with them. In the case of the preceding illustration, you might add a value of 200 to cause your image to display at a size of 200 x 200 pixels:

<img height="200" width="200" />

Note

The preceding <img /> element is incomplete because it also requires an attribute that specifies which image you want inserted in your page. To find out more about inserting images, check Chapter 6.

Values work together with attributes to complete the definition of an element’s characteristics. An easy way to think of how attributes and values work together is to compare them with nouns and adjectives. A noun names something; an adjective describes it. An attribute names a characteristic; a value describes it. Imagine that you are trying to identify a person’s hair color with a markup language. Hair would be the element, color the attribute, and red the value. You might write such a description as follows:

<hair color="red">Red-headed Person</hair>

Tip

Always enclose values in quotation marks.

Nesting

Often you will want to apply more than one element to a portion of your page. An essential concept to understand is nesting. Nesting simply means that elements must never overlap. Properly nested elements are contained inside one another, as in the following:

<a> <b> <c> </c> </b> </a>

Sometimes it’s easier to understand the concept if the elements are displayed vertically, like this:

<a>    <b>       <c>       </c>    </b> </a>

The following elements, on the other hand, are overlapping:

<a>    <b> </a>        <c>    </b>        </c>

Web browsers displaying an HTML page can be pretty forgiving if your elements are not properly nested; however, overlapped elements can create garbled results, particularly if you are trying to construct frames or tables. Also, when you become familiar with XHTML’s stricter standards, you’ll discover that overlapping elements are an absolute “no-no.”

Now that you have a handle on the basic concepts behind HTML, it’s time to roll up your sleeves and create your first Web page.

Project 1: Create and Display a Home Page

Creating a Web page is so easy, you’ll wonder why you waited this long to learn how to do it. All you need are a simple text editor, such as Windows Notepad, and a Web browser to view the page and you’re off and running.

Create a Home Page in Notepad

To create your first Web page, use Windows Notepad or another text editor. Although you could use Word, WordPerfect, or any other word processor to create HTML documents, it’s easier to start with a simple text editor. (For more about HTML authoring tools, see Chapter 7.)

Understand Document Elements

The elements listed in the following could be called document elements because they describe and define your HTML document. You won’t use all of these right now, but it’s good to know them and understand what they do.

• <html> </html> Defines the beginning and end of the document.

• <head> </head> This is the document header. It works like a storehouse of important information about the document. This information generally is not displayed in the document.

• <title> </title> The title element is nested inside the header. It displays a page title in the title bar at the top of the browser.

• <body> </body> Contains the main body of the Web page.

• <!-- Enclose comments here --> Enables you to add hidden comments and explanatory notes to your code. This will make it easier for you (and others who may have to edit your pages in the future) to decipher your code.

Tip

Choose your <title> carefully. One way search engines find, categorize, and list a page is by its title. So, if you want people to find you, be sure that every page on your Web site has a title that concisely and accurately describes that page’s contents. The better your title choice, the more likely your page will come up high on a search engine’s results.

At this point, you need to concern yourself with only the following elements: <html>, <head>, <title>, and <body>. These are the elements you will find in virtually all HTML pages. Strictly speaking, you can get away without using any of them. To see for yourself, just open Notepad and type “This is an HTML page.” Then save the document as test.htm. When you display it in a browser, you’ll discover that the browser recognizes and displays the page just fine. So, why use HTML? HTML enables you to define the structure of your page or document. If you display a page of text without adding any markup, you’ll discover that it displays as one large mass. However, as you learn to use HTML and XHTML, you will learn how to use elements, attributes, and values to add structure to that body of text.

Create an HTML Template

An HTML template is simply a file that has all the basic elements for a Web page already written. It’s a good starting place to learn how to create an HTML document. An added benefit is that it saves you the trouble of typing these elements every time you want to create a new page. To create an HTML template, follow these steps:

1. Open Notepad or another text editor.

2. At the top of the page type <html>.

3. On the next line, indent five spaces and now add the opening header tag: <head>.

4. On the next line, indent ten spaces and type <title> </title>.

5. Go to the next line, indent five spaces from the margin and insert the closing header tag: </head>.

6. Five spaces in from the margin on the next line, type <body>.

7. Now drop down another line and type the closing tag right below its mate: </body>.

8. Finally, go to the next line and type </html>.

9. In the File menu, choose Save As.

10. In the Save as Type option box, choose All Files.

11. Name the file template.htm.

12. Click Save.

You have created a template that you can use whenever you want to make a new Web page. Your HTML code should look something like this:

<html>      <head>           <title> </title>      </head>      <body>      </body> </html>

Incidentally, you could just have easily written the tags all on the same line. Web browsers don’t really care. It’s better, though, if you try to write your code so that you can understand what the different elements are doing. If it’s all jumbled together, you might find yourself confused when you go back in and modify your page. Besides, if others have to edit your page someday, they will find it much easier to decipher your HTML if you have put the tags on separate lines and indented them, as in the preceding code. By writing your pages this way, you can make sure that your elements are properly nested, and you can make it much more convenient for anyone who is trying to “debug” your code.

Shortcut

Creating different templates for your Web pages will speed up your work considerably. When you have designed a page, save it as a template before you begin adding content. Then you can perfectly reproduce the layout every time you want to use that design.

Create a Home Page

Now that you have a template to work with, it’s time to see just how easy it is to create your own Web page. In this step you will open your template and save it as index.htm. This is because Web servers require that a Web site’s home page have a special name. This enables the server to automatically direct visitors to the main page of your site. Generally, index.htm is preferred; however, some servers will also allow you to use default.htm.

1. Open template.htm in Notepad.

2. Before you do anything else, save the page as index.htm.

3. In between the <title> tags, type My Home Page.

4. In between the <body> tags, type (Your name)’s Home Page.

5. Drop down two lines and type: This is my very first Web page.

6. Save the page.

Caution

Always save the file with either an .htm or .html extension. If you allow Notepad to save your file as a text (.txt) file, a Web browser will not be able to read it. Also, it’s a good idea to be consistent in using .htm and html extensions, because web servers will treat index.htm and index.html as two different files. To avoid confusion, stick with one or the other.

Your finished HTML code should look something like Figure 1-1.

Figure 1-1: A basic HTML page in Notepad

View Your Page in a Web Browser

Once you have saved your page, it’s time to see what it looks like. To display your page, follow these steps:

1. Open your favorite Web browser and click the File menu.

2. Depending on which browser you are using, you should find an option that reads Open, Open Page, or Open File. Select that option.

3. A dialog box will open and display your computer’s filing system. Use that box to navigate to the directory where you saved index.htm. If you are using Internet Explorer, you will also need to click the Browse button that comes up after you click Open.

4. When you find your file, click its icon.

5. Click OK or Open, whichever choice your browser gives you. Your file should be displayed in the browser and should look like the sample in Figure 1-2.

   
   Figure 1-2: Your first Web page

You’ve created your very first Web page! It’s as simple as that. As you progress through the rest of the book, you will learn to build on that simple skeleton, creating Web pages that you will be proud to display for the world.