Updating a Webpage
Instructions: In this exercise, you review a webpage, update its content, and improve its appearance.
Work with the apply12.html file in the apply folder, image files in the apply\images folder, and
applystyles12.css file in the apply\css folder from the Data Files for Students. The completed
webpage is shown in Figure 12–22. You will also use professional web development practices to
indent, space, comment, and validate your code.
Perform the following tasks:
1. Create a new folder named apply12 and copy the apply12.html file and the css and images
folders from the Data Files for Students to the apply12 folder.
2. Open apply12.html in your text editor, review the page, add a title, modify the comment at the
top of the page to include your name and today’s date, and a paragraph element with your name
in the footer element.
3. Insert a paragraph element below each h3 element and include one to two sentences about
each content management system.
4. Insert an img element after each paragraph element that uses the appropriate image from
the apply\images folder. Include appropriate alt text, a width attribute, and a height attribute.
5. Link each image to the respective website (WordPress, Joomla, and Drupal).
6. Rename the CSS file within the css folder to applystyles12.css and update the CSS file link in
the apply12.html file.
7. Open applystyles12.css in your text editor and add the following properties and values to the header style rule:
background-color: #1427A6;
color: #FFFFFF;
8. Create a new style rule for the h1 element that center aligns text. Include a comment above the
new style rule.
9. Update the main style rule to specify a white background color.
10. Create a new style rule for the article element that specifies the following properties:
column-count: 3;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-gap: 3em;
-webkit-column-gap: 3em; /* Chrome, Safari, Opera */
-moz-column-gap: 3em; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
11. Add a comment to the article style rule.
12. Update the footer style rule to specify top margin with a value of 3em.
13. Save all of your changes and open the apply12.html in your browser.
14. Validate your HTML document and CSS file and fix any errors that are identified.
15. Submit the files in a format specified by your instructor.
16. Research an online ticketing system to handle website maintenance requests and discuss
how you could implement this type of system for your 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'.