In this exercise, you will add an image, an ordered list, a description list, and links to an HTML webpage. An example of the completed webpage is shown in Figure 3-76.

Perform the following tasks:

Tasks

Open the index.html file and update the comment with your name (firstname lastname), the file name, and todays date (MM/DD/YYYY).

Add your name to the paragraph element within the footer element.

4

Nest an img element within the header element below the heading element. Use images/web-design.jpg for the value of the src attribute. Add an alt attribute with a value of computer with the text web design. Add a height attribute with a value of 326px and add a width attribute with a value of 450px.

3

In the nav element, add a relative link to the text, Home, that links to index.html.

Add a relative link to the text, Learn HTML, that links to html.html.

Add a relative link to the text, Learn CSS, that links to css.html.

Add a relative link to the text, Learn JavaScript, that links to js.html.

Insert two new blank lines after the starting main tag. Add a div element with an id attribute value of template. Close the div after the paragraph element with the content.

1

Change the first paragraph element within the div with the template id to an h3 element.

2

Change the remaining paragraph elements within the div with the id template to list items

. Wrap and nest list items within an ordered list

. If necessary, insert a blank line between the closing ordered list tag and the closing div tag.

1

Insert two new blank lines after the closing div tag. Add a div element with an id attribute value of semantic. Close the div after the paragraph element with the content:

Visit W3Schools.com to learn more about HTML semantic elements.

1

Change the first paragraph element within the div with the semantic id to an h3 element.

1

Change the paragraph elements with the text, Header, Nav, Main, and Footer, to description term,

, elements.

2

Change the remaining paragraph elements to description definition,

, elements.

Do not change the last paragraph element with the text, Visit W3Schools.com to learn more about HTML semantic elements.

1

Wrap and nest the description term elements and description definition elements within the div with the id semantic with a description list element,

. If necessary, insert a blank line between the closing description list tag and the last paragraph element within the div.

Do not wrap the last paragraph element with the text, Visit W3Schools.com to learn more about HTML semantic elements. within the

element.

In the last paragraph element, add an absolute link to the text, W3Schools.com, that links to "https://www.w3schools.com/html/html5_semantic_elements.asp".

1

Open the other HTML files, css.html, html.html, and js.html. For each file, update the comment with your name (firstname lastname), the file name, and todays date (MM/DD/YYYY).

Add the same image from Task 2, on the same line, to each of these files.

Add the same nav links from Task 3 to each of these files.

Add your name to the paragraph element within the footer element on each of these files.

Tasks

Update the css.html file. Include your name (firstname lastname), the file name, and today's date (MM/DD/YYYY) to the multi-line comment section at the top of the file.

Add the same image from task 2, and the nav links from task 3 as well.

Update the p element in the footer with your name

6

Update the html.html file. Include your name (firstname lastname), the file name, and today's date (MM/DD/YYYY) to the multi-line comment section at the top of the file.

Add the same image from task 2, and the nav links from task 3 as well.

Update the p element in the footer with your name

6

Update the js.html file. Include your name (firstname lastname), the file name, and today's date (MM/DD/YYYY) to the multi-line comment section at the top of the file.

Add the same image from task 2, and the nav links from task 3 as well.

Update the p element in the footer with your name

6

Validate all HTML files and correct any errors. Open the index.html file in a browser, test the links, and correct any errors.