Correcting Image, Link, Heading, and List Errors
Instructions: Open your HTML editor and then open the resources03.html file from the Data
Files for Students. Eight HTML5 resource URLs are listed in the body section of this webpage,
but the addresses are not configured as links. Refer to Figure 3–69 to create an unordered list of
HTML5 resources using these URLs. You will also use professional web development best practices
to indent, space, validate, and check the spelling of your work.
1. Correct
a. With the resources03.html file open in your HTML editor, modify the comment at the top of
the page to include your name and today’s date.
b. Enter HTML5 resources in the <title> tags.
c. Several URLs are listed in the <div id="main"> section of this webpage. Each is a reference
to an HTML5 resource. Convert each URL to a link by using the URL as the value for the
href attribute value and adding text for the link as shown in Figure 3–69.
d. Save the page, and then view it in a browser. Notice that all of the links are positioned on the
same line.
e. Tap or click each of the eight links to test them.
2. Improve
a. The anchor element is an inline element, meaning that the content within the opening and
closing <a> tags are displayed in the same line rather than on a new line. Most other paired
elements such as all of the heading tags, h1 through h6, p, div, ul, ol, dl, and li are block elements,
meaning that the content within the opening and closing tags creates its own block by starting on a
new line. Because this list of links would look better if each item were on its own line, mark up the
links as an unordered list. Insert the opening <ul> tag on a new line after the <h1> content and
before the first link. Add the closing </ul> tag after the last link and just before the
closing </div> tag.
b. Indent and surround each link with an opening and closing list item tag <li> and </li>
For example, the opening <ul> tag and first link would be coded as:
<ul>
<li><a href="http://www.w3schools.com/">w3schools</a></li>
(Hint: Note that tags must be nested properly. For example, content marked by <li><a> tags
must be closed as </a></li>. Improperly nested tags will cause validation errors.)
c. Save the page and view it in a browser. Because the <li> tags are block elements, each link
creates its own block by starting on a new line.
d. Check the spelling of the content on the page.
e. Validate your webpage using the W3C validator found at validator.w3.org and fix any errors
that are identified.
4. After reviewing the webpages documented by each of these links, provide a brief description of each
website.
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'.