|< Day Day Up >|
HTML, XHTML, and CSS 101
Underneath the hood of any Web page梬hether it's your Uncle's "Check out this summer's fishin'" page or the home page of a billion-dollar online retailer梚s 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梐nd, indeed, in the HTML code of any Web page you examine梱ou'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:
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:
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.
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梄HTML 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.
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梖or 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 >|