In the preceding example—and, indeed, in the HTML of any web page you examine—you’ll notice that most commands appear in pairs surrounding a block of text or other commands.
These bracketed commands, like the <p> command that denotes the beginning of a paragraph, constitute the “markup” part of HTML (hypertext markup language) and are called tags. Sandwiched between brackets, tags are simply instructions that tell a web browser how to display a page.
The starting tag of each pair tells the browser where the instruction begins, and the closing tag tells it where the instruction ends. A closing tag always includes a forward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph command above is </p>.
Fortunately, Dreamweaver can generate all these tags automatically. You don’t have to memorize or even type them in (although many programmers still enjoy doing so for greater control). Behind the scenes, Dreamweaver’s all-consuming mission is to convert your visual design into underlying code, like this:
The <html> tag appears once at the beginning of a web page and again (with an added closing slash) at the end. This tells a browser that the information between these two tags is written in HTML, as opposed to some other language. All the contents of the page, including any other tags, appear between these 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 of the page and the body.
The head of a web page contains the title of the page (“Izzie’s Mail-Order Pencils”). It may also include other, invisible information, such as a page description, that browsers and search engines use. You surround the head section with opening and closing <head> tags.
In addition, the head section can include information that browsers use to format the page’s HTML and to add interactivity. You can store CSS styles and JavaScript code in the head, for example, or you can embed links to external CSS and JavaScript files there. In fact, the interactivity you’ll see in Dreamweaver’s Spry widgets (Chapter 13) work with the help of JavaScript code stored in separate files on a server; the link to these files resides in the page’s head section.
The body of a web page, identified by its beginning and ending <body> tags, contains all the information that appears inside a browser window—headlines, text, pictures, and so on. When you work in Dreamweaver’s Design view, the blank white portion of the document window represents the body area. It resembles the blank page of a word-processing program.
Most of your work with Dreamweaver involves inserting and formatting text, pictures, and other objects in the body portion of a 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 emphasizes text. The text between an opening and closing <strong> tag shows up as boldfaced type. The HTML snippet <strong>Warning!</strong> tells a web browser to display the word “Warning!” in bold type on the screen.
The <a> tag, or anchor tag, creates a link (hyperlink) on a web page. A link, of course, can lead anywhere on the Web. How do you tell a browser where the link should point? Simply give 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 Manuals website. The href part of the tag is called, in Dreamweaver, a property (you may also hear the term attribute), and the URL (the Uniform Resource Locator, or web address) is the value of that property. In this example, http://www.missingmanuals.com is the value of the href property.
Fortunately, Dreamweaver exempts you from having to type any of this code, letting you add properties to tags (and other page elements) through an easy-to-use window called the Property Inspector. To create links the Dreamweaver way (read: the easy way), turn to Chapter 4.
Note
For a full-fledged introduction to HTML, check out Creating a Website: The Missing Manual, 3rd Edition. For a primer that’s geared to readers who want to master CSS, pick up a copy of CSS: The Missing Manual. And if you want to add interactivity to your web pages (beyond the cool, ready-to-use features that Dreamweaver offers), you might be interested in JavaScript & jQuery: The Missing Manual. End of advertisements: Now back to your regularly scheduled book.
Get Dreamweaver CS6: 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.
