Creating a Template with a Semantic Wireframe
Instructions: The page shown in Figure 2–31 contains the required HTML5 tags for all webpages as well as HTML5 structural tags for a basic, semantic wireframe. As you add content to your webpages, you should understand what each area of the wireframe represents and what type of content each section contains. In this exercise, you will use your HTML editor to enter the required HTML tags and semantic HTML5 structural tags to create a webpage template with a standard webpage wireframe.
You will also use HTML comments to document where each section of the wireframe will appear on the webpage, as well as the type of content that is added to each section.
Perform the following tasks:
1. Open your HTML editor and enter the required HTML tags as shown in Lines 1–8 and Lines 25–26 in Figure 2–32. (Do not enter the comments.) Be sure to add indents as shown to make your code easy to read.
2. Save the fie as a Hyper Text Markup Language file with the name template02.html.
3. Using your favorite search engine, research the title element to answer the questions posed as a comment between the <title>…</title> tags shown in Figure 2–32.
4. Replace the comment between the <title>…</title> tags in the template02.html file with the answer to those two questions. Enter the answer as an HTML comment.
A sample answer for the <title>…</title> tags is shown in Figure 2–33. Use or modify that answer for your page.
5. Open the apply02.docx Word document from the Data Files for Students, copy the address of the webpage you used to research
the title element, and then paste it into the table. (A sample answer is already provided for the title element in the apply02 document
as a guide. Replace it with the address you used.)
6. Repeat Steps 3, 4, and 5 to research the header, nav, main, and footer elements, the elements used to define the semantic wireframe.
a. In the template02.html document, replace the questions posed as comments for the header, nav, main, and footer elements with answers to the questions.
Be sure that your answers are also coded as comments.
b. In the apply02.docx document, save the website address links used to answer each question.
7. In the template02.html document, review and check the spelling of your comments. Note that two questions are posed for each set of tags,
so make sure that you have answered both questions. Also make sure that all of your answers are coded as HTML comments.
8. Validate the template02.html document using the W3C validator at validator.w3.org and fix any errors the validator identifies.
Validation is complete when the validator returns the message “This document was successfully checked as HTML5!” in a green bar near the top of the webpage.
9. Submit the template02.html file in a format specified by your instructor.
10. In Steps 3, 4, 5, and 6, you researched the required title element as well as the semantic wireframe header, nav, main, and footer elements. Using your favorite search
engine, research these questions that further explore the new semantic HTML5 elements:
a. What is the definition of “semantic html?”
b. What are the benefits of “semantic html?”
c. What are the new, HTML5 semantic elements?
d. What is the primary advantage and the primary disadvantage of using the <main> element vs. <div id="main">?
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'.