Code:
Acme united.html
<! Doctype HTML>
<HTML lang = "en">
<Head>
<Title> HTML5 fundamentals example </title>
<LINK rel = "stylesheet" href = "main-stylesheet.css"/>
</Head>
<Body>
<Header>
<Hgroup>
<H1> Acme United <H2> A simple HTML5 example </H2>
</Hgroup>
</Header>
<Nav>
<Ul>
<Li> <a href = "#"> Home </a> </LI>
<Li> <a href = "#"> about us </a> </LI>
<Li> <a href = "#"> Contact Us </a> </LI>
</Ul>
</Nav>
<Article>
<Header>
<H1>
<A href = "#" Title = "link to this post" rel = "bookmark"> Article heading </a> </Header>
<P> primum non nocere Ad Vitam Paramus tu quoque. Mutatis mutandis de gustibus et coloribus non est disputandum ad infinitum, AD nauseum. </P>
<Section>
<Header>
<H1> This is the first section heading </Header>
<P> Scientia potentia est qua nocent Docent Ars longa, vita brevis Alea lacta est vici. P rimum non nocere quid pro quo. audaces Fortuna iuvat Fortes Fortuna adiuvat. </P>
</Section>
<Section>
<Header>
<H1> second section with Mark, aside, menu & amp; figure </Header>
<P class = "next-to-aside"> Ave Caesar morituri te salutant. <mark> Veni, vidi, vici </mark>. mater semper certa est, Pater Nunquam ignoramus et ignorabimus <br>
Ergo sum E pluribus unum. </P>
<Aside>
<P> This is an aside that has multiple lines. primum non nocere Ad Vitam Paramus tu quoque. Mutatis mutandis de gustibus et coloribus non est disputandum ad infinitum, AD nauseum. </P>
</Aside>
<Menu label = "file">
<Button type = "button" onclick = "javascript: Alert ('clio is the muse of history ')"> Clio </button>
<Button type = "button" onclick = "javascript: Alert ('thalia is the muse of Comedy')"> Thalia </button>
<Button type = "button" onclick = "javascript: Alert ('urania is the muse of astpolicmy')"> Urania </button>
<Button type = "button" onclick = "javascript: Alert ('calliope is the muse of epic poetry')"> Calliope </button>
</Menu>
<Figure>
<Figcaption> Figure 1. Stonehenge </figcaption>
</Figure>
</Section>
<Section>
<Header>
<H1> This is a video section </Header>
</Section> <p> <video src = "http://people.xiph.org /~ Maikmerten/demos/bigbuckbunny. OGV "controls autoplay loop>
<Div class = "no-html5-video"> <p> This video will work in Mozilla Firefox or Google Chrome only. </P> </div>
</Video> </P>
</Section>
</Article>
<Footer>
<P> <2011 Acme United. All Rights Reserved. </P>
</Footer>
</Body>
</Html>
CSS:
*{
Font-family: lucida SANS, Arial, Helvetica, sans-serif;
}
Body {
Width: 800px;
Margin: 0em auto;
}
Header H1 {
Font-size: 50px;
Margin: 0px;
Color: #006;
}
Header H2 {
Font-size: 15px;
Margin: 0px;
Color: # 99f;
Font-style: italic;
}
NAV ul {
List-style: none;
Padding: 0px;
Display: block;
Clear: right;
Background-color: # 99f;
Padding-left: 4px;
Height: 24px;
}
NAV ul Li {
Display: inline;
Padding: 0px 20px 5px 10px;
Height: 24px;
Border-Right: 1px solid # CCC;
}
NAV ul Li {
Color: #006;
Text-Decoration: none;
Font-size: 13px;
Font-weight: bold;
}
NAV ul Li A: hover {
Color: # FFF;
}
Article> header H1 {
Font-size: 40px;
Float: left;
Margin-left: 14px;
}
Article> header H1 {
Color: #000090;
Text-Decoration: none;
}
Article> section header H1 {
Font-size: 20px;
Margin-left: 25px;
}
Article P {
Clear: both;
Margin-top: 0px;
Margin-left: 50px;
}
Article P. next-to-aside {
Width: 500px;
}
Article> section figure {
Margin-left: 180px;
Margin-bottom: 30px;
}
Article> section> menu {
Margin-left: 120px;
}
Aside P {
Position: relative;
Left: 0px;
Top:-100px;
Z-index: 1;
Width: 200px;
Float: right;
Font-style: italic;
Color: # 99f;
}
Article> section video {
Height: 200px;
Margin-left: 180px;
}
Article> section Div. no-html5-video {
Height: 20px;
Text-align: center;
Color: #000090;
Font-size: 13px;
Font-style: italic;
Font-weight: bold;
Background-color: # 99f;
}
Footer P {
Text-align: center;
Font-size: 12px;
Color: #888;
Margin-top: 24px;
}