The goal of this exercise is to create a U.S. flag through CSS and semantic markup that is not only visually appealing, but also useful so that clicking on any of the stars will take you to a different state’s main government page and clicking on any of the stripes will take you to the government sites of the original 13 colonies.
First, lay the groundwork for the flag by constructing markup. Include a title for the page, as well as the 50 states represented in the U.S. flag.
Wrap the title in a header tag and a list for the 50 states:
<h1> <a href="http://www.usa.gov/">United States of America</a> </h1> <ol> <li><a href="http://www.alabama.gov/"> <strong>State of Alabama</strong> <i></i> </a></li> <li><a href="http://www.state.ak.us/"> <strong>State of Alaska</strong><i></i> </a></li> [...] </ol>
The heading and each individual state has a link to its respective government site. Also included are extra sets of italics tags within each link, which you pick up as a selector for styling later.
You need to distinguish the 13 colonies from the rest of the
states, as these comprise the 13 stripes of the flag. Do this by
emphasizing them, wrapping them in the
<li><a href="http://www.ct.gov/"> <em><strong>State of Connecticut</strong></em> <i></i> </a> </li>
So far, the results don’t look very much like a flag, as shown in Figure 13-20. That’s where the CSS comes in. Now that you have the basic markup down, begin styling your page.
Figure 13-20. The ...