Exercise Instructions:
-
Create an HTML page called "index.html" with your name in a header tag. Underneath, put today's date in a smaller header. Look up the different sizes of HTML header tags to complete this exercise.
-
Create an HTML page with a picture of an animal of your choice. Save the picture in the same folder as the "index.html" file and use a relative link as the source. Underneath the picture, write a paragraph tag to act as a caption for the picture, describing it.
-
Find an inspirational quote. Create an HTML page with a "div" tag and put the quote as text inside the div. Use embedded CSS (in the "style" tag inside the "head" tag) to give the div a green border.
-
Create an HTML page with 4 paragraphs of text. The actual text can be anything (hint: in VSCode, when editing HTML, type "lorem-50" then hit tab to generate 50 random latin words as placeholder text). Make the background color of the first and third paragraph blue and the second and fourth paragraph green. Make the text color of all paragraphs white so you can read it. Use embedded CSS for the styling and classes to control which paragraphs get which style.
-
Create two HTML pages, "index.html" and "about.html". Give a title to the "index.html" page that says "Home Page" and include a link to the about page. On the about page, give it a title that says "About Page" and write some text (it can be random lorem text like above) and a link to the home page. Your page does not have to look exactly like this example, as long as the links back and forth work.
-
Create an HTML page called "index.html" and an external CSS stylesheet called "styles.css". Set the body to use a different font than the default and a different background color than the default. Create a header, "Hello World" with an ID of "main-title" and style that ID to be centered. Create two paragraphs, each with a class of "content" and apply a bottom margin of 12px to that class.
-
Create an index.html page and copy in the following HTML and JavaScript code into the body tag. Launch the page and observe the page behavior. Now, go through the JavaScript code and add a comment above every line, explaining in your own words what it does to the best of your ability. It is alright if you are not completely correct, you will still get credit if we see that you have made a good attempt.