Structured Websites

Introduction

After working with basic HTML elements and CSS selectors, hopefully you’ve noticed a few things along the way. One thing you should be wondering is how to organize the elements of your web pages into logical groups or areas. Navigations are generally in a block at the top of the page or along the side, and pages are centered and have a defined widths, edges, margins, etc.

Example

See the example of this tutorial by clicking this link. Click around to see the finished result of this lab. Keep it open for reference.

Standard Tags

Standard Tags define areas and sections of your website. The standard tags we will use include:

Add Standard Tags

Open all three HTML files in the tutorial folder in Microsoft Visual Code.

Add the header, nav, and standard tags to all three html pages of your exercise files in the correct places.

Style Standard Tags

Standard tags act like the other tags we have learned so far and can be styled the same way in CSS.

Style the standard tags in your CSS file (provided in the tutorial files) the following ways:

• Make the background color of the nav #dddddd (grey).
• Right-align the navigation labels.
• Add 20px of padding to the navigation.
• Make the background color of the section #7daebe (blue).
• Change the color of the paragraph text in the main section to white.
• Change the font size of the text in the main section to 12px.
• Add 40px of padding to the main section.

Review common CSS properties here.

Test to make sure your website looks like the image below. If yours does not, try again.