Web Dev II - JavaScript

Exercise: Given HTML4 convert to HTML5 Semantic tags

Be sure to watch the video on HTML5 semantic tags before you proceeed. The link is in moodle.

If did not do the previous lab's HTML Challenge exercise it is a simpler application of symantec tags, you may want to try it first: MDN structuring a page

Don't forget for references use MDN

• Learn HTML
• HTML Reference

You have been provided an HTML document written with HTML4 tags/non sematic. Try to update this as much as you can to be HTML5 with semantic tags. You will see it has an acompanying css file.

Instructions:

• Stop, did you watch the semantic tags video in moodle? If yes, go ahead.


• download this tarball, extract the html and css file in the same folder; you should see two files blog-html4.html and style-html4.css.


• open the folder with VS Code, then open the files
• use the icon (or right click on the file tab and select Split Right) so that you can see both files together

• Look at what the website looks like before you make changes: click on the Go Live icon to the bottom right. (or right-click anywhere on the html file in the editor and select Open with Live Server).
  Your browser will open with the address 127.0.0.1:5500. 127.0.0.1 is also known as localhost, which means a web server running on your system but not accessible to anyone else.
  This is not the same as double-clicking directly on the file (you see file://C:/...)

BTW If you are missing the Go Live icon you probably loaded a single file instead of loading the folder, you must load the folder to see the live server.