Читать книгу HTML5, JavaScript, and jQuery 24-Hour Trainer - Cameron Dane - Страница 15

In this Try It, you will duplicate the template html page outlined in the lesson. You may choose to skip this portion if you are familiar with HTML, but the simple act of typing code word for word enhances your understanding.

If you get stuck in this example, you can refer back to the example earlier in the lesson, or use the screencast to guide you though the process.

Lesson Requirements

You will need a text editor and a web browser.

Step-by-Step

1. Open your text editor and create a new document.

2. Add the HTML5 doctype to the document.

3. Add an html element (both the opening and closing tags) below the document type.

4. Indicate the language of the document using an attribute on the html tag.

5. Add a head element inside the html element. You will need both an opening and a closing tag.

6. Add a title inside the head element, and give the document a name. Remember that this needs to be a child of the head element.

7. Add a body element inside the html element just below the closing head tag.

8. Add a meta element to the head indicating that the charset is UTF-8.

9. Add any text you like to the body of the document. Any text that you add should be displayed back to you when you open the web page in Chrome.

10. Save the document with a .html extension.

11. Open the document in Chrome and inspect the Document Object Model in the developer tools.

When you open this in Chrome, and then open the development tools to inspect the elements, the markup should look like Figure 1.6.

Figure 1.6

There is also a complete example in the Lesson 1 folder on the book's website called tryit.html.

Reference

Please select the video for Lesson 1 online at www.wrox.com/go/html5jsjquery24hr . You will also be able to download the code and resources for this lesson from the website.