You have by now gained a basic understanding of HTML and CSS.
Today you will look at how to:
- Look at the CSS reference on W3Schools
- Create a vertical navigation bar
- Create a horizontal navigation bar
- Create an image gallery using the div element
- Your Task: Create a Web page with a horizontal navigation bar and a 6 image gallery
It is easy to get overwhelmed when applying CSS to HTML.
Take 5 mins to look through this excellent reference: W3Schools CSS Reference
Create a Vertical Navigation Bar
Learn how to create a vertical navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).
Create a Horizontal Navigation Bar
Learn how to create a horizontal navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).
Create an Image Gallery
Learn how to create an image gallery, but this time use the div element when creating it. Base your images on existing images found on morgueFile.
Your Task – Assessment
Create a Web page with a title, horizontal navigation bar and an image gallery with 6 – 9 images.
Make the buttons active hyperlinks, link them to different posts on this blog. Make the image gallery linked to actual images (use morgueFile) and insert thumbnail images for it as well.
Include a radio button feature. (See last week’s class).
Theme for the web page: Urban Environment (Cityscape)
Create a title for your page (that needs to be used in the head section).
Test your HTML file on the TryIt Editor as well as a pure HTML file on a minimum of 2 browsers.
Submit the HTML file on MyKangan.