WEB222 Test 5
Submit your HTML file to Blackboard (Total 23 Marks)
Instructions:
You are asked to answer all of the questions below by writing code in an HTML file that you will submit to
Blackboard. Your HTML file should be set up according to these guidelines:
1. Create an HTML file named test-5-your-name.txt (i.e., include your name in the filename. NOTE: the file is
named `.txt` vs. `.html` so Blackboard will allow it when you submit).
2. Your HTML file must be a proper HTML5 document (e.g., include doctype, title, charset, etc).
3. Your HTML file must use proper indentation and be written in a way that’s easy to read.
4. Create <section>…</section> elements for each question below and give each <section> an id to name it
for the question being answered.
5. Use HTML comments in your HTML file to indicate each part of your answer, for example:
NOTE: you MAY consult your notes, but you MAY NOT talk with other classmates. All work must be your own.
Requirements
1. Give an example of one block level and one inline level element. Use HTML comments to indicate which is which. [1
mark]
2. Give an example of one empty element. Use HTML comments to label this. [1 mark]
3. Create a menu of links for each of the following web pages:
https://developer.mozilla.org/en-US/docs/Web/JavaScript, https://developer.mozilla.org/en-US/docs/Web/HTML,
https://developer.mozilla.org/en-US/docs/Web/CSS. Use a bulleted list for the links, and pick the most appropriate
parent element for grouping a set of navigation links: [4 marks]
4. Create the following table using HTML. NOTE: the borders and “look” of the table don’t have to match exactly, only
the rows/columns in markup. [6 marks]
ID Price Amount Total
235 $0.99 1 $0.99
236 $1.34 6 $8.04
237 $2.99 10 $29.90
Total $38.93
5. Write the HTML markup to include the Owl Picture at this URL:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Barred_owl.jpg/480px-Barred_owl.jpg. Make the
picture 375 pixels wide (no CSS) and include alternative text for visually impaired users. Wrap the image in a figure
element and use a caption. [5 marks]
6. Include the HTML markup necessary to play the music in this MP3 file:
https://datashat.net/music_for_programming_52-inchindown.mp3. Include the play, pause, etc. buttons so the user
can interact with the song. [2 marks]
7. Write an inline script in your HTML file that prints your name, student number, and current Date to the dev tools
console [2 marks].
8. Confirm that your HTML markup is valid using https://html5.validator.nu/ before you submit the file. Your file must
be valid HTML5. Submit a screenshot of the validation passing. [1 mark]
9. Include your Name and Student Number in a <meta> Author element, see
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/
The_head_metadata_in_HTML#Adding_an_author_and_description. [1 mark]
