HTML, XHTML & CSS QuickSteps

Chapter 1 Creating Your First Web Pages with HTML and XHTML

How to…

Understanding Tools for Creating HTML

• Understand HTML, XML, XHTML, and HTML 5

Organizing Your Site

• Create a Folder for Your Website

• Open Notepad

Understanding the DOCTYPE Declaration

• Create the Page’s Structure

Understanding the Header and the Body

• Add Content to the Page

• Apply Formatting

• Add a Picture

• Add a Hyperlink

• Create Linked Files

• Describe Your Pages with Meta Tags

• Reload a Page Automatically

Understanding How Search Engines Work

• Redirect the Browser to Another Page

• Validate Your HTML with the W3 Markup Validation Service

• Check Your Pages with Other Browsers

Hypertext Markup Language, or HTML, is the formatting language in which most web pages are built. It lets you specify the contents of a web page and control how it looks in a web browser. All modern computer operating systems have browsers, so pages created using HTML can be displayed on almost any computer.

An HTML file consists of plain text with tags (formatting codes), so you can create an HTML file quickly and easily using only a text editor and a browser. This chapter shows you how to start creating web pages using only the Notepad text editor and the Microsoft Internet Explorer browser, both of which are included with Microsoft Windows.

This book assumes that you are using Windows, because Windows has the bulk of the computer market. The examples use Windows Vista with Service Pack 1, the latest version of Windows at this writing. If you use a different operating system, such as Mac OS X or Linux, you will be able to follow along easily using similar tools on that operating system.

QUICKFACTS

UNDERSTANDING TOOLS FOR CREATING HTML

You can create effective HTML using just a text editor, as described in this chapter, and it’s a great way not only to keep total control of your code but also to learn exactly what you’re doing. That said, you will probably be able to create pages faster by using more capable tools much of the time. This sidebar explains the two main options. You can also use programs such as the Microsoft Office programs, as discussed in Chapter 9.

HTML EDITOR

An HTML editor is an editing application that’s customized for creating HTML manually. An HTML editor typically includes options for creating and editing HTML tags quickly (for example, creating tags via drag-and-drop or by using property sheets), powerful search-and-replace functionality, and HTML templates that you can use to create particular types of documents quickly. HTML editors usually show tags and attributes in different colors so that you can easily distinguish them from text.

Figure 1-6 shows Komodo Edit (freeware; available from various download sites on the Web), a powerful Windows HTML editor. Another freeware HTML editor well worth trying is Arachnophilia (www.arachnoid.com/ arachnophilia), which is written in Java and so runs on other operating systems (including Mac OS X and Linux).

WEB-AUTHORING APPLICATION

A web-authoring application is an application designed for creating web pages (as opposed to creating another kind of document) using a graphical interface. Instead of typing the HTML codes your pages need, you can apply codes using formatting commands, toolbars, and menu options in much the same way that you would apply formatting or styles in a word processor or in a page layout program.

The advantage of a web-authoring application is that you can see the layout of the page you’re creating. This is sometimes called What You See Is What You Get, or WYSIWYG (pronounced whizzy-wig). Most web-authoring applications also let you dig into the code manually when you want to do so.

Widely used web-authoring applications include Microsoft Expression Web (Windows only) and Adobe Dreamweaver (Windows and Mac OS X). Figure 1-7 shows Expression Web. If you’re looking for a freeware web-authoring application, try KompoZer (http:// kompozer.net), which runs on Windows, Mac OS X, and Linux.

• Microsoft Expression Web (shown in Figure 1-7) runs only on Windows.

• Adobe Dreamweaver is available for both Windows and Mac OS X.

Understand HTML, XML, XHTML, and HTML 5

Part of what makes creating web pages confusing is the number of technologies you can use. HTML is the general, overarching technology—but then there are XML, XHTML, and HTML 5.

Here are some key definitions to get things straight from the start.

HTML

HTML (Hypertext Markup Language) is the formatting language in which web pages have been written from the start of the Web. HTML tags describe how a web page should look, but they don’t describe what kind of contents it has. (More on this in a moment.)

HTML is flexible and forgiving: Many web pages contain coding errors, and most browsers have been built to tolerate the errors and display a malformed web page as best they can rather than stopping with an error. Generally, it’s better to see the web page, even if it doesn’t appear exactly the way it’s supposed to, than to quibble over technicalities such as a missing tag (or a missing character from a tag).

The definition of HTML is an ongoing process involving various standards. Most current HTML uses the HTML 4 standard, but is gradually moving (transitioning) toward XHTML and the HTML 5 standard that is in development.

XML

XML (Extensible Markup Language) is a language that lets you create structured data, data that describes its own content as well as how that content should appear.

For example, if you need to transfer details about different components of a car, you can create custom XML elements that describe the different components. For instance, you can create an element called brakepad that contains the information about a brake pad: its part number, the vehicles with which it’s compatible, its dimensions, its cost, its documentation, and so on. A program can then read your XML document, recognize the information as describing a brake pad, and pull it into a database or manipulate it in another way.

XHTML

XHTML (Extensible Hypertext Markup Language) is HTML that is written in XML syntax.

At this point, you may feel like holding your head in your hands or banging it against your desk. But the benefit of writing HTML in XML syntax is straightforward: XHTML lets you check quickly that a web page is correctly formed and doesn’t contain any coding errors. This helps you to ensure that the web page will appear correctly in any browser that conforms to these standards.

HTML 5

HTML 5, the fifth revision of HTML, is currently in draft form and is expected to remain so for several years while the final details are worked out. This means that there won’t be a sudden move to HTML 5. Instead, what’s likely to happen is that some browsers will implement some parts of the HTML 5 draft standard, and then others, leading gradually to a migration to the standard when it is finished.

HTML 5 has a classic variant called (confusingly) HTML 5 and an XHTML-based variant called XHTML 5.

QUICKFACTS

ORGANIZING YOUR SITE

Even the smallest site quickly grows far beyond the size and complexity originally intended—so even if you’re planning a small site, organize it carefully. Careful organization is yet more important if you know from the outset that you’ll be creating a larger site.

Use these three techniques to organize your site.

• Separate content by folder Create a separate folder for each different type or category of content: graphics, different text topics, scripts, and so on. For example, for a family site, you might create folders such as html, pictures, music, and recipes. Keep the folder names short for ease of use. Create subfolders as necessary within the main folders.

• Use naming conventions Develop naming conventions for the files that make up your site’s content so that you can figure out easily what a file would be called and where to locate it if you’ve forgotten its name or location. Short, descriptive names using lowercase letters are usually best. When you need to use multiple words in a name, separate the words with underscores rather than with spaces. This is because Internet programs have to substitute codes for spaces, which makes for confusing-looking addresses.

• Document your site Create a short document that explains how the site is structured, how files are named, and which content goes in which folder. You don’t need to be excessively formal, but this document will help you and anyone else who assists you in creating and managing your site. Keep updating the document as you go along.

Which Version of HTML Should You Use?

At this writing, the most sensible approach is to create your web pages using the transitional version of XHTML. This allows you some flexibility in creating your HTML code while keeping it more or less within a straitjacket of proper form that will let you move it easily to the HTML 5 standard when it is finally approved.

Get Started with Your Website

To get started with your website, you’ll need to create a folder to contain in, and then open Notepad or another text editor to create files.

Create a Folder for Your Website

You will typically store your website on your local computer while you create it and then transfer it to a web server when it is ready for public consumption. Many HTML tools let you create and edit web pages directly on a web server, but creating the site locally has three advantages.

• You can create the site more quickly if it is stored locally. You can work on your site without an Internet connection if necessary.

• You can keep each page on your final website (on the Web) in a finished state rather than in an intermediate state. You can upload a new copy of any page as soon as you’ve updated it.

• Your local copy safeguards your site even if your Internet service provider (ISP) or web host has a server disaster; once the server is back up, you can simply upload your site again.

Start by creating a folder (if you do not already have one) on your computer for your website (if you do not already have one) and such subfolders within that folder as you need for the content. See the Organizing Your Site QuickFacts for suggestions on how to organize your website.

1. Click the Start button, and then click Documents. The My Documents window opens.

2. Click the Organize menu button, and then click New Folder. You can also right-click in the document area (the main part) of the Windows Explorer window and choose New | Folder from the shortcut menu. Windows creates a new folder with the default name New Folder and displays an edit box around the name so that you can change it.

3. Type the name for the folder (for example, Website), and press ENTER to apply the name.

4. Double-click the new folder to display its contents.

5. Repeat steps 2 and 3 to create as many new folders as needed within the main folder.

6. Click the File menu, and click Close to close the Windows Explorer window.

TIP

Your computer may already have a suitable folder for your website. For example, if you’ve installed Microsoft Expression Web on your PC, your Documents folder will contain a folder named My Web Sites. You can put your websites in this folder, or use another folder—whichever you prefer.

Open Notepad

To open Notepad, click the Start button, click All Programs, click Accessories, and then click Notepad. A Notepad window opens, containing a new, blank text document.

NOTE

This book shows HTML tags in red text where they appear in regular text (rather than code listings) in order to help you pick them out easily. HTML tags aren’t case-sensitive, so you can write them in uppercase, lowercase, or even mixed case. You’ll often see uppercase tags because they make the tags easier to locate by eye on a busy page; mixed case is seldom used because it has no advantage beyond idiosyncrasy; but modern practice is to use lowercase for tags because some markup languages are case-sensitive. This book uses lowercase for all tags and recommends that you follow this practice.

TIP

If you plan to use Notepad frequently, pin it to the upper-left section of the Start menu by right-clicking its entry on the Start menu and then clicking Pin To Start Menu on the shortcut menu.

QUICKFACTS

UNDERSTANDING THE DOCTYPE DECLARATION

Normally, each XHTML document begins with a Document Type Declaration, or DOCTYPE for short. The DOCTYPE tells the browser which Document Type Definition (DTD) the web page uses so the browser knows how to interpret the web page’s tags.

To make your documents comply with HTML and XHTML standards, you’ll normally want to add a DOCTYPE at the beginning. Table 1-1 explains the most widely used types of DOCTYPE as of this writing. Each DOCTYPE consists of two parts.

• Public identifier The public identifier is the text that appears in double quotation marks after the PUBLIC keyword—for example, PUBLIC -//W3C// DTD XHTML 1.0 Transitional//EN is the public identifier for the XHTML 1.0 Transitional DTD. This identifier gives the name of the public version of the DTD and always uses exactly the same text shown in the table.

• System identifier The system identifier is a Uniform Resource Locator (URL) that provides the location of the DTD. This can be either the reference DTD on the World Wide Web Consortium (W3C) website, as shown in the table, or a copy of the DTD on your own website.

Create a Web Page and Adding Content to It

To create a web page, you first set up the HTML structure for the web page. You can then add content to the page and apply formatting to it.

Create the Page’s Structure

HTML is a set of tags that identify the elements of your web pages. A tag (or markup tag) is a name contained within angle brackets (<>) and usually comes in pairs (an opening and a closing tag). The tags may enclose a page element, such as text or a graphic, that you want to format. The closing tag has a slash preceding the tag name to identify it as the closing tag. Tags may also have attributes that further define the formatting or function of the tag.

The following sections show you how to create the structure of the web page.

ADD THE DOCTYPE

To start your web page, insert the appropriate DOCTYPE definition from Table 1-1. This example uses the XHTML 1.0 Transitional DOCTYPE.

Table 1-1: Document Type Declarations and When to Use Them

TIP

The DOCTYPES are a pain to type manually, and you’ll usually do better to paste them in when working in a text editor. (One way is to keep a text file of declarations so that you can quickly insert them. Another is to create a web page template containing the DOCTYPE, document structure, and tag information you usually need; when you need a new page, open the template, and then save it under a different name.) Most HTML editors and web-authoring programs either automatically insert the right DOCTYPE for you when you start creating a web page or let you insert a DOCTYPE manually using a command rather than typing it.

ADD THE TAGS

All web pages have a basic set of tags that identify the page as an HTML document, with all the major sections defined. These tags state the page is written in HTML so that the browser knows that it should use HTML rules for displaying the page. (Other markup languages have different rules from HTML.) The tags may also give the version of HTML used, the language (for example, en for English or es for Spanish), or other information.

1. In Notepad, on the next line of your text document after the end of the DOCTYPE statement, type the opening HTML tag. Because we’re using the XHTML 1.0 Transitional DOCTYPE, we also need to include details of the XML namespace, the area of XML to which the tag applies. So type http://www.w3.org/1999/xhtml> and then press ENTER. This tag indicates the beginning of the HTML section of the document.

2. On the next line, type the closing tag, . This tag indicates the end of the HTML document. The remainder of the HTML document goes between the http://www.w3.org/1999/xhtml> tag and the tag.

QUICKFACTS

UNDERSTANDING THE HEADER AND THE BODY

Each HTML web page consists of a header and a body.

• The header (also called the document head) typically contains the title for the web page and information about the document, including terms for search engines, information on links, and information about the style and scripts used.

• The body is the rest of the HTML web page. The body contains the text that appears when you display the web page as well as instructions for other objects (for example, pictures) to be included in the web page.

Add Header and Body Tags

The header of an HTML web page starts with a tag and ends with a tag. Similarly, the body starts with a tag and ends with a tag. Type these into your web page between the existing and tags:

The elements that make up the header go between the and tags, and the elements that make up the body go between the and tags.

NOTE

You use HTML to create the content and structure of a web page. For example, you can add headings, body paragraphs, and images to create a straightforward page. You can also apply formatting to the page, either by using HTML (which is the old way that’s now looked down upon) or (better) by using Cascading Style Sheets (CSS). CSS formats your HTML content so that the web page looks the way you want.

Add Content to the Page

After creating the structure for the web page, add content to it, as described in this section.

TIP

Always give each web page a descriptive title so that anyone viewing it can grasp immediately which page it is. It’s best to include the name of the site and a brief description of the contents of the page. Keep the description brief so that it fits in the title bar in a small window, on a tab in a tabbed browser window, or on the Favorites menu or a Bookmarks menu. If a web page doesn’t contain a title, the browser displays the file name instead. Even if the file name is long and descriptive, it is unlikely to be as easy to grasp as a title.

ADD THE TITLE FOR THE PAGE

Most web pages begin with a title—the text that appears in the browser’s title bar when the web page is loaded, and that is used as the default text for a Favorite or bookmark created for the page. Create your title by placing an opening tag between the tag and the tag, as shown:

TIP

Instead of choosing All Files in the Save As Type dropdown list, you can put double quotation marks ( ) around the file name. This prevents Notepad from adding its default.txt file extension to the filename (which would give a name such as index.html.txt).

SAVE THE PAGE

Save the page so that you can view it in your web browser.

1. Click the File menu, and then click Save. The Save As dialog box appears.

2. Navigate to the folder for your website. (Note which folder it is, because you’ll need to access it again in a minute.)

3. Open the Save As Type drop-down list and choose All Files instead of Text Documents.

4. Select the contents of the File Name text box, and type