HTML, XHTML, and CSS 101

Underneath the hood of any Web page—whether it's your Uncle's "Check out this summer's fishin'" page or the home page of a billion-dollar online retailer—is nothing more than line after line of ordinary typed text. With its use of simple commands called tags, HTML (Hypertext Markup Language) is still at the heart of most of the Web.

The HTML code that creates a Web page can be as simple as this:

<html>

<head>

<title>Hey, I am the title of this Web page.</title>

</head>

<body>

Hey, I am some body text on this Web page.

</body>

</html>

While it may not be exciting, the HTML shown here is all you need to make an actual Web page.

Of Tags and Properties

In the example above—and, indeed, in the HTML code of any Web page you examine—you'll notice that most commands appear in pairs that surround a block of text or other commands.

These bracketed commands constitute the "markup" part of the Hypertext Markup Language and are called tags. Sandwiched between brackets, tags are simply instructions that tell a Web browser how to display the Web page.

The starting tag of each pair tells the browser where the instruction begins, and the ending tag tells it where the instruction ends. Ending tags always include a forward slash (/) after the first bracket symbol (<), which tells the browser that this is a closing tag.

Fortunately, Dreamweaver can generate all of these tags automatically. There's no need for you to memorize or even type these commands (although many programmers still enjoy doing so for greater control). Behind the scenes, Dreamweaver's all-consuming mission is to convert your visual designs into underlying codes like these:

The <html> tag appears once at the beginning of a Web page and again (with an added slash) at the end. This tag tells a Web browser that the information contained in this document is written in HTML, as opposed to some other language. All of the contents of a page, including other tags, appear between the opening and closing <html> tags.
If you were to think of a Web page as a tree, the <html> tag would be its trunk. Springing from the trunk are two branches that represent the two main parts of any Web page: the head and the body.
The head of a Web page, surrounded by <head> tags, contains the title of the page. It may also provide other, invisible information (such as search keywords) that browsers and Web search engines can exploit.
In addition, the head can contain information that's used by the Web browser for displaying the Web page and for adding interactivity. Cascading Style Sheet information, used for formatting text and other elements, may be defined in the head of the document (see Chapter 6). In addition, JavaScript scripts, functions, and variables can be declared in the head of the document. In fact, Dreamweaver Behaviors (Chapter 12) achieve their interactive effects with the help of JavaScript code stored in a page's head.
The body of a Web page, as set apart by its surrounding <body> tags, contains all the information that appears inside a browser window—headlines, text, pictures, and so on.
In Dreamweaver, the body area is represented by the blank white area of the document window (see Figure I-1). It resembles the blank window of a word processing program.

The document window displays your page as you build it. You can add text, graphics, and other elements to it, and—thanks to Dreamweaver's visual approach—see a close approximation of how the page will appear in a Web browser.

Most of your work with Dreamweaver involves inserting and formatting text, pictures, and other objects in the body of the document. Many tags commonly used in Web pages appear within the <body> tag. Here are a few:

You can tell a Web browser where a paragraph of text begins with a <p> (opening paragraph tag), and where it ends with a </p> (closing paragraph tag).
The <strong> tag is used to emphasize text. If you surround some text with it and its partner tag, </strong>, you get boldface type. The HTML snippet <strong>Warning!</strong> would tell a Web browser to display the word "Warning!" in bold type on the screen.
The <a> tag, or anchor tag, creates a link (hyperlink) in a Web page. A link, of course, can lead anywhere on the Web. How do you tell the browser where the link should point? Simply give the browser address instructions inside the <a> tags. For instance, you might type <a href="http://www.missingmanuals.com/">Click here!</a>.
The browser knows that when your visitor clicks the words "Click here!," it should go to the Missing Manual Web site. The href part of the tag is called, in Dreamweaver, a property (you may also hear the term attribute) and the URL (the Universal Resource Locator or Web address) is the value. In this example, http://www. missingmanuals.com is the value of the Href property.

Fortunately, Dreamweaver exempts you from having to type any of these codes, and provides an easy-to-use window called the Property inspector for adding properties to your tags and other page elements. To create links the Dreamweaver way (read: the easy way), turn to Chapter 4.

XHTML, Too

Like any technology, HTML is showing its age. Although it has served its purpose well, it's always been a somewhat sloppy language. Among other things, it allows uppercase, lowercase, or mixed case letters in tags (<body> and <BODY> are both correct, for example, and permits unclosed tags (so that you can use a single <p> tag without the closing </p> to create a paragraph). While this flexibility may make page writing easier, it also makes life more difficult for Web browsers, PDAs, and other technologies that must interact with data on the Web. Additionally, HTML doesn't work with one of the hottest up-and-coming Internet languages: XML or Extensible Markup Language.

To keep pace with the times, an improved version of HTML, called XHTML is finding its way into more and more Web sites. Once again, Dreamweaver MX 2004 is right on the cutting edge: it can create and work with XHTML files. If you only understand HTML, don't worry—XHTML isn't a revolutionary new language that takes years to learn. It's basically HTML, but with somewhat stricter guidelines. For example, the HTML page code shown in Section 0.2 would look like this in XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Hey, I am the title of this Web page.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-1" />

</head>

<body>

<p>Hey, I am some body text on this Web page. </p>

</body>

</html>

Notice that everything below the <head> is exactly the same as the HTML page. The information that begins the page, however, is how the page identifies which standards it conforms to. In this case, it merely says that the page is a type of XML document, in particular, an XHTML document. (Don't worry, Dreamweaver automatically writes all of this code when you create a new XHTML page.)

As you can see, the real code used to make the page is much like HTML. To make an XHTML file comply with XML, however, there are a few strict rules to keep in mind.

Begin the page with a document type declaration and a namespace. That's the first few lines in the code above. They simply state what type of document the page is and points to files on the Web that contain definitions for this type of file.
Tags and tag attributes must be lowercase. Unlike in HTML, typing the tag <BODY> in an XHTML file is incorrect.
Quotation marks are required for tag attributes. For example, a link written like this: <a href=http://www.missingmanual.com> is valid in HTML, but won't work in XHTML. You have to enclose the value of the Href property in quotes: <a href="http://www.missingmanual.com">.
All tags (even empty tags) must be closed. To create a paragraph in XHTML, for example, you must begin with <p> and end with </p>. However, some tags don't come in pairs. These tags, called empty tags have no closing tag. The line break tag is one example. To close an empty tag, you must include a backslash at the end of the tag, like this: <br />.

If all this seems a bit confusing, don't worry. All of these strict XHTML rules are built into Dreamweaver, so creating an XHTML page using Dreamweaver's visual design tools won't feel one bit different from creating an old-style HTML page. (For more information on creating an XHTML page in Dreamweaver, see Section 1.3.3.)

Adding Style with Cascading Style Sheets

HTML used to be the only language you needed to know. You could build pages with colorful text and graphics and make words jump out using different sizes, fonts, and colors. But today, you can't add much visual sophistication to a site without Cascading Style Sheets (CSS). CSS is a formatting language used to make text look good, add sophisticated layout to pages, and basically add style to your site.

From now on, think of HTML as merely the language you use to give organization to a page. It helps identify and structure the stuff you want the world to know about. Tags like <h1>, <h2>, and <h3> denote headlines and assign them relative importance: a heading 1 is more important than a heading 2. The <p> tag indicates a basic paragraph of information. Other tags provide further structural clues: a <ul> tag identifies a bulleted list (to make a list of recipe ingredients more intelligible, for example).

Cascading Style Sheets, on the other hand, add design flair to the highly structured HTML content, making it more beautiful and easier to read. In fact, Dreamweaver MX 2004's biggest changes are in the realm of CSS. Essentially, a CSS style is just a rule that tells a Web browser how to display a particular element on a page—for example, to make a <h1> tag appear 36 pixels tall, in the Verdana font and the color orange.

But CSS is more powerful than that. You can use it to add borders, change margins, and even control the exact placement of an element on a page.

If you want to be a Web designer, you need to get to know Cascading Style Sheets. You'll learn more about this exciting technology in Chapter 6.

< Day Day Up >