Description
Assessment Weight: 5 % of your final course Grade
Objective:Practice writing HTML Containers / Media Elements, Updating the DOM with data.
Specification:
Update HTML & JavaScript code for each of the following pages according to the instructions outlined below. To begin, download the assignment3.zip file containing all of the files required for Assignment 3 from blackboard.
“Assignment 3 Home” – index.html:
Update the “Assignment 3 Home” page’s <section> element with the following:
1. Add a professional greeting paragraph element after the <h2> heading, i.e.: “Welcome to my website, I will be demonstrating HTML5 principles and techniques, DOM manipulation”… and so on.
❏ Add an < h3> header as with the title Overview for the next section (step 3)
2. Add a short overview paragraph below your <h3> heading that introduces this website, i.e.: “This site contains 7 pages, including: Home, HTML Lists”… and so on.
NOTE: This paragraph must include all relevant links to the 7 pages .
3. Add an <h3> header with the title Code for the next section (step 5)
4. Display the following HTML markup code as text in a <pre> element below your Code heading
(Hint: use HTML entities so the code appears vs. gets rendered in the page)
<!doctype html>
<html>
<head>
<title>WEB222 </title>
</head>
<body>
<h2>Basic HTML5 Document Structure < /h2>
<p>This is a paragraph</p>
</body>
</html>
“HTML Lists” – list.html:
Update the “HTML Lists” page with the following:
1. Update the list.html page to include two containers (i.e.: <div>) with the unique id values: fruits and directory.
2. Add an h3 title to the fruits container of Fruit.
3. Use the fruits array inside the lists.js file (js/list.js) to write (using JavaScript) an ordered list containing all the fruit inside the array, (ie:”Apples”,”Oranges”,”Pears”,”Grapes”,”Pineapples”,”Mangos”) to one of your fruits container in the list.html page. Be sure to write to your container (using JavaScript) after the window has completely loaded. The ordered list should look like the image below when complete:
4. Add an h3 title to the directory container of Directories.
5. Use the directory array inside the list.js file (js/list.js) to write (using JavaScript) a nested unordered list containing all the files and directories (with their files) inside the array to one of your containers in the list.html page.
You will notice that files have the type “file ” and consist of a ” name ” property, whereas directories have the type “directory ” and consist of a “name” property in addition to an array of files. Use these properties to correctly construct your nested unordered list (using JavaScript).
Be sure to write to your container after the window has completely loaded (using JavaScript). The nested unordered list should look like the image below when complete:
“HTML Tables” – table.html:
Update the “HTML Tables” page with the following:
1. Inside table.html, create the following two tables, each with a relevant header as a title:
• The 1st table should be composed of the elements: <table style=”border:1px solid;”>, <tr>, <th>, <td> and <caption> with information about your program, courses enrolled, schedule of each course.
• The 2nd table should be composed of the elements: <table style=”border:1px solid;”>, <tr>, <th>, <td>,<thead>, <tfoot> and <tbody> with your info about your 5 favourite songs, including title, artist, length of song.
2. Update the table.html page to include an additional container (i.e.: <div>) with a unique id value.
3. Add a relevant header as a title for the next section (step 4)
4. Use the users array inside the table.js file (js/table.js) to write a complete 3rd table containing all the users inside the array (and an appropriate header row), to your container in the table.html page.
You will notice that users consist of the properties: first_name, last_name, age, and email. Use these properties to correctly construct your table (using JavaScript) with the following headers: First Name , Last Name, Age and Email. You must also ensure that all email addresses are rendered as a valid “mailto” link and will open as a new message in the user’s default mail client when clicked.
Be sure to write to your container after the window has completely loaded. The table should look like the image below when complete:
“HTML Images” – image.html:
Update the “HTML Images” page with the following:
2. Update the image.html page to include an additional container (i.e.: <div>) with a unique id value.
3. Add a relevant header as a title for the next section (step 4)
4. Use the images array inside the image.js file (js/image.js) to write 5 new <figure> elements to your container in the image.html page (using JavaScript). You will notice that each image in the array has the following properties: caption , alt and url . Use these properties to correctly construct (using JavaScript) your <figure> elements such that each element contains a valid image ( using url and alt) as well as a caption underneath the image with the message contained within the caption property
Be sure to write to your container after the window has completely loaded (using JavaScript). The <figure> elements should look like the image below when complete (only the first 2 shown):
“HTML5 Audio” – audio.html:
Update the “HTML5 Audio” page with the following:
1. Update the audio.html page to include an additional container (i.e.: <div>) with a unique id value.
2. Use the audio object inside the audio.js file (js/audio.js) to render an audio player in your container within the audio.html page.
You will notice that the audio object consists of the properties: controls and source. Use these properties to correctly construct (using JavaScript) your audio player with (or without) controls, and the correct source options. Be sure to write to your container after the window has completely loaded.
“HTML5 Video” – video.html:
Update the “HTML5 Video” page with the following:
1. Update the video.html page to include an additional container (i.e.: <div>) with a unique id value.
2. Use the video object inside the video.js file (js/video.js) to render a video player in your container within the video.html page.
You will notice that the video object consists of the properties: controls , width , height and source . Use these properties to correctly construct (using JavaScript) your video player with (or without) controls, in the correct dimensions and using the correct source options. Be sure to write to your container after the window has completely loaded.
“Honesty Statement” – honesty.html:
Update the “Honesty Statement” page with the following:
Other Requirements
• All tags/attributes must be in lower case.
• All of your html files MUST not contain any errors when tested using the W3C Markup Validation Service:
https:// validator.w3.org/
Assignment Submission:
Important Note:
Reviews
There are no reviews yet.