17 Aug Create some HTML files that can be any topic of your choice

Create some HTML files that can be any topic of your choice i.e your hobbies, interests, vacation, education etc. You will have 1 main page and at least one other additional page that you will link to.

You should include the following:

• A table. Your table must include a least one instance of a COLSPAN or ROWSPAN attribute. Your table should also include some graphic images.
• A nested list using proper list elements.
• A page with anchors.
• Some semantic elements (of your choice i.e. <article>, <header>, <section> etc.) used properly with the content of your page.
• Links to some real, relevant websites that pertain to the subject of the webpage and a link to another page in your site.
• An external CSS file that governs the HTML document. This file should include the CSS properties to add style to your webpage. Additionally, define 3 classes and 3 ids that should be used in your webpage.

Any text or graphics that you get from elsewhere should be cited appropriately. Merely fulfilling all criteria will get you an 80. To get a 100, you must show more effort.

Create a demo video to demonstrate that your HTML document executes as expected (i.e. links work, images show up etc.).  Additionally, in the demo video you should show where the code is that satisfies the above requirements. Your demo should include sound (you speaking). You can use https://screencast-o-matic.com (Links to an external site.) to create a video (free but max 15 minutes) or you can use whatever platform you have. You will only submit a link to the video and NOT the actual file.

Submit your HTML file and any images used in a zipped (compressed) folder named “Your_Last_Name_HWK_1“.zip and upload to Canvas using the Homework 1 link. Also, include the URL to your video demo in the comment section. Any homework that does not include the accompanying video link will result in a zero grade and you will not be permitted to submit after the deadline.

HOMEWORK 2

Add JavaScript to your Homework 1. You should include the following:

1. Add a form with 4 text fields, a reset button and a button that when clicked does a calculation. Do not do average of numbers (it must be something else). The button when clicked should call a function that includes the JavaScript that does the calculation and displays the solution in an alert window.
2. Add 2 event handlers onMouseOver and onMouseOut. You can apply these to any HTML element that you would like.
3. Add JavaScript to replace an image on your page. Use a button that calls a JavaScript function that replaces the existing image with another image. All images must be cited properly if taken from another source.
4. Add all your JavaScript to an external JavaScript file (.js) which you will reference in your HTML documents.
5. For each task above, write comments in your code where I will look to see the implementation of this. No comments, no marks.

When completed, submit all the appropriate HTML files needed to run your homework in a zipped file names YourLastName_HWK_2.zip using the link on Canvas.

Create a demo video to demonstrate that your document executes as expected (i.e. links work, images show up etc.).  Additionally, in the demo video you should show where the code is that satisfies the above requirements. Your demo should include sound (you speaking). You can use https://screencast-o-matic.com (Links to an external site.) to create a video (free but max 15 minutes) or you can use whatever platform you have. You will only submit a link to the video and NOT the actual file.

Submit your HTML file and any images used in a zipped (compressed) folder named “Your_Last_Name_HWK_2“.zip and upload to Canvas using the Homework 2 link. Also, include the URL to your video demo in the comment section. Any homework that does not include the accompanying video link will result in a zero grade and you will not be permitted to submit after the deadline.

HOMEWORK 3

This assignment includes 2 scripts. For each script, you must use the DOM properties and methods to complete the task. If you simply use event handlers with JavaScript you will not receive any marks. This assignment is about manipulating nodes in DOM.

1. Write a script that adds and deletes items (nodes) from a numbered list. Include a form on the page so that the user can type in the list item to be added and also to input where in the list to insert. The list should be something other than the examples in class. Additionally, when the list is empty an alert should display stating that the list is empty and when the list has 5 items, an alert should display stating that the list has 5 items.

2. Write a script that allows a user to display an image from a menu of possible images. For example, if I have 3 images to select from when the user selects one of the images, it should display on the page. If the user then selects another image, this image should replace the existing image.