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 that’s needed to make a Web page.
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 designed to 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 information on a 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 behind the scenes. By no means will you ever have to memorize or type out these commands (although many programmers enjoy doing so for greater control). It’s important to understand that at its heart, Dreamweaver is a program that converts your visual designs into underlying codes like the following.
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 9). In addition, JavaScript scripts, functions, and variables can be declared in the head of the document. In fact, Dreamweaver Behaviors (Chapter 11) achieve their interactive effects with the help of JavaScript code placed in the head of the page.
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), and resembles the blank window of a word-processing program.
Figure 1. 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 <b> tag stands for bold. If you surround some text with it and its partner tag, </b>, you get boldface type on the Web page. The HTML snippet <b>Hello</b> would tell a Web browser to display the word “Hello” 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 go? Simply give the browser more 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) 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 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 page 95.
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. HTML also supports unclosed tags: you can use a single <p> tag (without the closing </p>) to create a paragraph. While this flexibility may make writing pages 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 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 will take you hours to learn. In essence, it’s HTML with more strict guidelines applied. For example, the HTML page code listed above would look like this in XHTML:
<?xml version="1.0" encoding="iso-8859-1"?> <!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> </head> <body> Hey, I am some body text on this Web page. </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. (Dreamweaver will automatically write 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 namespace. That’s the first few lines in the code above. It simply states what type of document the page is.
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>. 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 forward slash 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 page 31.)
Get Dreamweaver MX: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
