CREATE A SIMPLE WEB PAGE

Basic Markup and Page Structure

GET READY. To create a simple Web page and see the effect of missing tags, nesting, and enti-ties, perform the following steps:

1. On your computer or a flash drive, create a subfolder within the My Documents folder that will hold the files you work on in lessons throughout this book. This is your working folder. You can name the subfolder HTML5 or something similar.

Figure 2-3

A simple Web page rendered by a browser

2. Open a Web page editor, app development tool, or even a simple text editor like Notepad and type the following:

<!doctype html>

<html>

<head>

<title>78704 Pet Services</title>

</head>

<body>

<h1>Care and Feeding</h1>

Your dog is a friend for life. Why not provide the best care possible?

Make sure your pet has plenty of fresh water

during hot weather. When taking your dog on long walks, bring along a collapsible water dish and bottled water.

You can find specialty water dishes at many pet supply stores for $10 or less.

</body>

</html>

3. Save the file as L2-pet-orig.html in the working folder you created in My Documents.

4. Navigate to your working folder and open the HTML page in a Web browser. It should look similar to Figure 2-4.

5. To see the effect of a missing tag in a tag pair, delete the end tag after

“water.” Create a new file to test the changes by saving it as L2-pet-test.html and open it in the browser. Now all of the content from “fresh water” to the end of the document is in boldface.

In Internet Explorer 9, you can press F12 to open browser mode. This mode enables you to edit pages without leaving the browser. In addition, you can click Document Mode on the menu bar and then select an older version of the browser to see how a page renders.

TAKE NOTE

*

Figure 2-4

The 78704 Pet Services Care and Feeding Web page

You have a lot of choices when it comes to editors and development tools. Notepad is the built-in text editor in Windows, but you can download Notepad++ for free from the Web.

Notepad+++ offers features that make it easier to create and edit HTML documents.

TextWrangler has a similar feature set and is designed for Macintosh systems. Free HTML editors include HTML-Kit and KompoZer. Development tools include Microsoft Visual Studio, Visual Studio for Web, Microsoft Web Matrix, and Microsoft Expression Web, among many others. All of these applications enable you to create and edit HTML files.

TAKE NOTE

*

6. To see the effect of improper nesting, move the end tag to appear after the last

tag. Save L2-pet-test.html again and view it in a browser. Now all of the con-tent from “fresh water” to the end of the document is in boldface and italics, as shown in Figure 2-5.

7. Close the L2-pet-test.html file in the editor and open L2-pet-orig.html.

8. Add a copyright line to the bottom of the page by pressing Enter a few times after the closing tag and typing © 2012. Substitute the current year for “2012”, if necessary. Press Enter to add a blank line. Make sure the copyright line is above the </body> and </html> end tags.

9. Create a new file again by saving L2-pet-test.html as L2-pet-copyright.html and view it in the browser. Does the circle C symbol appear as shown in Figure 2-6? If not, change © to ©, save the file, and then view it again.

10. Go to the W3C Markup Validation Service Web page at http://validator.w3.org.

Upload L2-pet-copyright.html and click Check to have the service check it. Fix any errors reported by the checker that relate to missing tags or typos, if any.

When viewing Web pages that you’re editing, it’s best to use a variety of Web browsers to ensure your markup renders as expected for the widest audience. Some editing tools let you select a browser for previewing Web pages from a list. If your tool doesn’t include that option, you’ll need to install three or four different browsers and open your Web pages in each one.

TAKE NOTE

*

Figure 2-5

Effects of improper nesting of tags

Figure 2-6

A copyright symbol appears in the lower-left corner

11. You probably received an error message about character encoding. To fix this, open L2-pet-copyright.html in your editing tool, insert <meta charset="UTF-8"> in the head element, on its own line, just before the title.

<head>

<title>78704 Pet Services</title>

</head>

12. Save the file, upload it to the validation checker again, and check it. The checker should indicate that your file is valid.

13. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.

All of the elements covered in the first section in this lesson work well in HTML5, even though they have been used for years in previous versions of HTML. For the most part, HTML5 replaces very little HTML syntax. That means developers can still use most of the same elements they always have. Some elements have the same tag but slightly tweaked func-tionality, which you’ll learn about shortly.

HTML5 also includes many new elements that increase the functionality of Web pages or streamline the markup. These include multimedia elements such as audio and video, and elements that make the structure of a Web page seem more intuitive. Structure-related tags include elements for page sections, headers, footers, navigation, and even sidebars.

If you create Web forms, new form features make creation and validation much easier.

This section, however, focuses on HTML5 markup for text.

In document HTML5 Applications Development Fundamentals 98-375 (Page 48-51)