Whether you’re using Dreamweaver or hand-coding, you start a mobile HTML page just as you would any other. All HTML pages have the same basic structure. In other words, it’s not how you use the tags, but the tags you use that count. Or, is it, it’s not how you say it, but what you say that counts?
Something like that . . .
Web browsers read tags to determine how to format a page. How browsers interpret and use the tags, though, often depends on the initial tag, or the very first tag at the top of the HTML page, the doctype. The doctype intro-duces the page to the browser and tells the browser what standards the page supports — HTML, XHTML, XML, and so on.
Okay. So, technically, doctype is not really a tag. In geekSpeak it’s a declaration or instruction. It “declares” the document type to the browser, but doesn’t really do any formatting, per se. Granted, it’s placed between the less-than (<) and greater-than (>) symbols, which makes it look like a tag. But since it doesn’t actually format anything on the page, just because it walks like a duck, it doesn’t talk like a duck.
Although there are several doctypes available, only a few are in wide use today, and even fewer are used for mobile sites. Here are two the most common doctypes used for mobile websites and when you should use them:
✓ XHTML Mobile 1.0: Known as the XHTML Mobile Profile, or XHTML MP, this doctype is commonly used for mobile sites. It currently comes in three flavors: Mobile 1.0, Mobile 1.1, and Mobile 1.2. Each version is pretty much the same, except that the newer versions correct technical errors in previous versions. You should use this doctype when design-ing pages for devices that don’t support a lot of the more modern CSS and HTML formatting, such as CSS2, CSS3, and HTML5.
XHTML MP standards are defined by two different alliances. Mobile 1.0 standards, for example, are defined by wapforum.org, and Mobile 1.1 and Mobile 1.2 are defined by openmobilealliance.org. So, when declaring a doctype for the various versions, you need to refer in your declaration the proper standards compliance URL. The Mobile 1.0 decla-ration is written like this: <!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”
“http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
Mobile 1.1 and 1.2 declarations are written like this:
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN”
“http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.2//EN”
“http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd”>
Notice the that Mobile 1.1 and Mobile 1.2 refer to openmobile alliannce.org, not wapforum.org.
✓ XHTML 1.0 Transitional: Modern devices, such as tablets and the latest smartphones, have browsers that support nearly all CSS and HTML ele-ments supported by desktop computers and notebooks. When creating web pages for these devices, you don’t really need a doctype designed specifically for mobile devices. You should use this doctype when designing pages for the latest iPhones, iPads, or Android devices; and other devices that use WebKit extensions, discussed in Chapter 12. The declaration looks like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Now that we have all the technical stuff out of the way, let’s create a mobile web page. The following steps create the page itself and the accompanying external CSS file:
1. Begin a new page in Dreamweaver with your source code editor or a text editor.
2. Save the page as index.html.
3. On the first line of the page, type the following tags:
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.
wapforum.org/DTD/xhtml-mobile10.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
</html>
The first tag declares the doctype, and the second tag declares the WS3 standard compliance, discussed in Chapter 2. The second tag also the content section the HTML page. All the tags and the content that formats on this page go between the opening <html> and closing </html> tags.
4. Save the page.
Dreamweaver can generate the doctype and some other basic structure HTML tags automatically, as well as link to your style sheets. Simply start your page using the New command on the File menu, which opens the New Document dialog box shown in Figure 7-2. Choosing XHTML Mobile 1.0 from the DocType drop-down in the right pane of the dialog box sets up the page properly for this process. Choosing XHTML Mobile 1.0 in the New Document dialog box completes steps 1–3 for you.
Dreamweaver can automate many of the procedures discussed in this chapter and throughout this book. Throughout this book I try to point out where Dreamweaver can be very helpful or can save you a bunch of time.
(However, note that the examples in this book are hand-coded, and so the step-by-step techniques I show you in these exercises are quite different from Dreamweaver’s formatting options.)
Figure 7-2:
You can use
Dream-weaver’s New Document wizard to take some of the guesswork out of setting up doctypes.
DocType drop-down
Good! Now that the HTML page framework is started, it’s time to create the style sheet. Chapter 2 discusses the three types of style sheets — external, internal, and inline — and when to use what type and why. Unless your styles are meant to format only one document or web page, you should always use external style sheets.
In the following steps, I show you how to create an external CSS file and ref-erence it in the HTML page, so that the web page uses it to format the page elements.
1. Start a new text document and save it as chapter7.css. (Make sure you save it in the same directory as index.html.)
2. On the first line of the new document, type the following:
@charset “utf-8”;
This first line sets up the style sheet by announcing the character set it uses. Nearly all websites, especially those written in HTML, XHTML and CSS, use the utf-8 character set.
Your new style sheet does little good if you don’t tell index.html about it: its name, type, and where to find it.
3. In index.html, place your text cursor at the end of the <html xmlns=”http://www.w3.org/1999/xhtml”> tag in index.html, press Enter twice.
This creates a blank line between this tag and the ones you’re about to create. This is not required, and many designers don’t write their code this way. The extra white space, which web browsers ignore, is a per-sonal preference and makes it easier for humans, you and me, to read the code.
For design purposes, HTML pages consist of two sections: The <head>
section, where you declare the document’s style sheets, as well as a lot of other data about the page. The HTML tag <link href=”X”>, tells the browser about the style sheet, providing information such as the document filename, where to find the file, and the CSS type.
Whether your page uses one or 20 style sheets, you’ll need one <link href=”X”> tag for each CSS file, and they all go between the docu-ment’s <head></head> tags.
4. Type the following tags:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<title>My Mobile-Friendly Site</title>
<link href=”chapter7.css” rel=”stylesheet” type=”text/css” media=”screen”
/>
<meta name=”HandheldFriendly” content=”True” />
</head>
The first <meta> tag in the preceding code sets up the document type — again. Yeah, I know what you’re thinking: How many times do I have to do this? The short answer is: As many as it takes. Not all elements of a web page are formatted from the style sheets. This tag assures that those parts of the document that don’t rely on the style sheet get treated correctly, or use the right character set. Keep in mind that making sure your pages appear correctly on as many devices as possible often depends on you covering all your bases.
Yes, here’s yet another example of a <meta> tag. These tags provide important information about the document. In the words of somebody famous, “You ain’t seen nuttin’ yet” — because <meta> tags have many functions. For example, they’re also used to set up and provide infor-mation for search engines (discussed in Chapter 15) and for calling to includes (discussed in the Chapter 8, which covers creating templates).
The <title> tag names the document. Not only do search engines use the <title> data to help find and index pages but the text between these tags is also the page title that shows up in the browser title bar, as shown in Figure 7-3.
“My Mobile Friendly Site” in the browser title bar
“My Mobile Friendly Site” in the document tab
The <link href= line declares the style sheet. Notice the media prop-erty declaration, “screen”. This, of course, tells the browser what type of media, or device, the content is designed for. One of the supported CSS media type options is handheld, but it’s very strict and causes browsers to ignore, in my opinion, too much of both the CSS and XHTML formatting, even though nowadays a lot more tags and CSS styles are supported by many of the newer smartphones. The next <meta> tag,
<meta name=”HandheldFriendly” content=”True” /> serves a similar purpose — it tells the browser that index.html is handheld-friendly — without being so draconian.
That’s it! Now it’s time to start formatting the page elements — what the user sees.