Question
Creating a Basic HTML Webpage
Instructions: The page shown in Figure 1–44 contains the required HTML5 tags for all webpages.
In your HTML editor, you will enter these required HTML tags and save the le as an HTML document that can serve as the model, or template, for other HTML documents. You will make a copy of the HTML template and insert the paragraph content to create and personalize a page to introduce yourself, your major, and your goals for the class. The gures in this exercise use Notepad++ (Windows) and TextWrangler (Mac) as HTML editors, but you can complete the exercises in this book using any HTML editor such as Sublime, Programmer’s Notepad, KompZer, HTML Kit, CoffeeCup, Aptana, UltraEdit, or Microsoft WebMatrix, to mention a few.
Perform the following tasks:
1. Open your HTML editor, and enter the required HTML tags as shown in Figure 1–44. In this gure, the tags within the <head> section are indented to visually separate the <head> section from the <body> section. Adding spaces, indents, or extra blank lines to an HTML document does not change the way the page looks in the browser. Professional webpage developers use indents and blank space to make the code easier to read and maintain.
2. Save the le as a Hyper Text Markup Language le with the name template01 in the chapter01\apply folder provided with the Data Files for Students. (Hint: If you are using TextWrangler, enter the entire le name and extension of template01.html to save the le as an HTML file). Both Notepad++ and TextWrangler save HTML les with an html le name extension and apply color coding.
3. Tap or click the opening <html> tag. Examine the HTML document shown in Figure 1–45, which displays the code in Notepad++. In a Word document, answer the following questions:
a. In what color does Notepad++ display HTML tags?
b. What color are HTML attributes?
c. What color are HTML attribute values?
d. When you tap or click the start or end tag of a set of paired tags, what background color is used to highlight the pair?
4. Examine the HTML document shown in Figure 1–46, which displays the code in TextWrangler. In a Word document, answer the following questions:
a. In what color does TextWrangler display HTML tags?
b. What color are HTML attributes?
c. What color are HTML attribute values?
d. In what background color is the current line highlighted?
If you are using a plain text editor such as Notepad (Windows) or TextEdit (Mac), all of the code and content is black, as shown in Figure 1–47.
5. Delete the closing quotation mark in the <meta charset="utf-8"> tag and observe how the colors change on the screen. In a Word document, explain how the colors changed on the screen. Replace the missing quotation mark. Observing how the colors work in your HTML editor helps you productively nd and correct errors.
6. Save the template01.html le with the name intro.html in the chapter01\apply folder provided with the Data Files for Students. Given all HTML5 pages start with the same required tags, a productive way to create a new le is to open the template01.html le and then save it with a new name as a starting point for the new page.
7. Enter the paragraph tags, horizontal rule tags, and content as shown in Figure 1–48 (Notepad++) and Figure 1–49 (TextWrangler). Modify the content within the paragraph <p> … </p> tags to introduce yourself in this page. Use indents as desired to make the page easy to read.
8. Save intro.html and then open the le in a current browser. A sample solution is shown in Figure 1–50.
9. Submit the les you created in this exercise in a format speci ed by your instructor. You may be asked to electronically submit the les as an email attachment or drop-box attachment. You may be asked to publish the pages to a web server. See Lab 3 in this chapter and Chapter 12 for more information on publishing pages to web servers.
10. In Step 2, you saved a text le as an HTML le. At that point, an HTML editor will provide color-coded visual support. Identify three different ways that the color supports productive web development skills. Also, identify the HTML editor you are using, and note
three different color codes applied by that editor.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.