Exercise 8A: Simple Page Layout & Simple Rollover Navigation
This exercise covers use of some newer HTML5 Elements that work with page layout.
Specifically these tags:
- header
- nav
- main
- aside
- footer
We will use the newer HTML tags and use CSS styles to create simple 2 column page layouts and simple rollover navigation.
Read in Text Book: Chapter 14 and follow along in the Demos for Exercise 8A. Be sure to experiment.
By Due Date:
This is a multiple page exercise. Create a minimum three HTML pages using Brackets.
Use the same content and tags on all three pages.
Save into your folder - Ex8A.
- Page One: (index.html) Create a page of content for each area using all the new tags listed in this exercise. Write your content in "Natural Flow" or the order it should be read. Do Not add CSS styles to this page. Be sure to add at least one image.
- Page Two: Using the same content as your index page - add your own styling to the CSS Document Styles (in the head of the document). Experiment adjusting the padding, margin and borders. Use the aside and main tags to create two side by side columns.
- Page Three: Use the same content (and styles) from your 2nd page. Add the simple CSS styles to create Simple CSS Navigation. See the Demo pages.
Folder Name: Ex8A
Opening Page Name: index.html
Have All Pages Link Together
Post your questions online or email them to me
New HTML Elements
- <header> </header>
Use to set and style a specific header or banner area on your page. Add a logo or logo text and tagline
- <nav> </nav>
Use to contain your main navigation
- <main> </main>
For your main content area
- <aside> </aside>
Add a small amount of content as a column to be positioned to the left or right of the main content area. The aside could be used for secondary navigation, to add an image, or for minor text.
- <footer> </footer>
At the bottom of the page. Use clear: both; in your CSS styles to have it end up where you want it to. Holds content like copyright info, contact information (phone, address, email), can have secondary set of navigation.
CSS: Rollover Navigation Styles
- nav
Add CSS properties & values that set font-family, font-style, font-weight, font-size. Add background-color, color (for your font). Add more styles as needed.
- nav a:link, nav a:visited
Add CSS properties and values that could include a different background-color or color. If the links now look more like "buttons" you can also remove the undeline by adding the CSS style
text-decoration: none;
- nav a:hover
Add a different background-color or color (for the font) to clearly show these are links by using the hover state.