Created
February 18, 2013 22:55
-
-
Save WebsiteStudents/4981520 to your computer and use it in GitHub Desktop.
This is the raw code for the HTML Elements (block-level and inline) exercise. Grab this code and paste it into a new HTML document. Then it is up to you to create CSS rules inside the existing code (we provide a wide variety of empty CSS rules) to see how different HTML elements respond to your CSS styles.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>HTML Elements</title> | |
| <style type="text/css"> | |
| /* http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| /* END CSS RESET */ | |
| body { | |
| } | |
| a:hover { | |
| } | |
| p { | |
| } | |
| h2 { | |
| } | |
| ul { | |
| } | |
| ul li ul li ul li { | |
| } | |
| ul li ul li ul li ul li { | |
| } | |
| ul li { | |
| } | |
| ul li a { | |
| } | |
| h2 a { | |
| } | |
| h1 { | |
| } | |
| h1 a { | |
| } | |
| .maincontainer { | |
| } | |
| h3 { | |
| } | |
| ol { | |
| } | |
| ul li ul { | |
| } | |
| ul li ul li { | |
| } | |
| ul li ul li ul { | |
| } | |
| ul li ul li ul li ul { | |
| } | |
| ol li ol { | |
| } | |
| ol li ol li ol { | |
| } | |
| ol li ol li { | |
| } | |
| ol li ol li ol li { | |
| } | |
| h4 { | |
| } | |
| blockquote { | |
| } | |
| blockquote p { | |
| } | |
| blockquote p a { | |
| } | |
| dl { | |
| } | |
| dl dt { | |
| } | |
| dl dt a { | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="maincontainer"> | |
| <h1><a href="" title="Test Link">Headline with H1</a> - Online Style Guide Template (h1)</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> | |
| <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> | |
| <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> | |
| <h2>Headline with H2 Tag <a href="#">Plus it’s a Link</a></h2> | |
| <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p> | |
| <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p> | |
| <h3>Another Headline with the H3 Tag <a href="#">and it is Linked</a></h3> | |
| <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> | |
| <p>Title : <em>Title of this Document</em><br /> | |
| Description : <em>A description of this document that explains how this guide should be used.</em></p> | |
| <p>Author : <em>The Author</em><br /> | |
| URL: <em>http://url.to.reference.com</em><br /></p> | |
| <p>Created : <em>Month DD, YYYY</em><br /> | |
| Modified : <em>Month DD, YYYY</em><br /></p> | |
| <hr /> | |
| <h2>List Styles are Visible Here (H2)</h2> | |
| <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> | |
| <ul> | |
| <li>Unordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="Test Link">Another item that is linked</a></li> | |
| <li>Last item.</li> | |
| </ul> | |
| <ol> | |
| <li>Ordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="Test Link">Another item that is linked.</a></li> | |
| <li>Last item.</li> | |
| </ol> | |
| <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p> | |
| <ul> | |
| <li>Unordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a> | |
| <ul> | |
| <li>Here's an item two levels deep.</li> | |
| <li>And this is also two levels deep. | |
| <ul> | |
| <li>This item is three levels deep. | |
| <ul> | |
| <li>While this one is four.</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li><a href="" title="Test Link">Another item that is linked</a></li> | |
| <li>Last item.</li> | |
| </ul> | |
| <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p> | |
| <ol> | |
| <li>This is an ordered list.</li> | |
| <li>With multiple depth. | |
| <ol> | |
| <li>Now that's a great test.</li> | |
| <li>How often will this happen? | |
| <ol> | |
| <li>Difficult to say, but let's plan for it.</li> | |
| </ol> | |
| </li> | |
| </ol> | |
| </li> | |
| <li>Another line in the list.</li> | |
| <li>We will end it right here.</li> | |
| </ol> | |
| <hr /> | |
| <h2>Primary Content (h2)</h2> | |
| <h3>Headline the Third (h3)</h3> | |
| <p>First paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong> or <em>emphasized</em>.</p> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>First paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong> or <em>emphasized</em>.</p> | |
| <p>Another paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <ul> | |
| <li>Unordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="">Another item that is linked</a></li> | |
| <li>Last item.</li> | |
| </ul> | |
| <ol> | |
| <li>Ordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="Test Link">Another item that is linked.</a></li> | |
| <li>Last item.</li> | |
| </ol> | |
| <p>Another paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <ul> | |
| <li><p>Unordered List with Paragraphs - First item.</p></li> | |
| <li><p>Another item with <a href="" title="Test Link">a link.</a></p></li> | |
| <li><p><a href="" title="Test Link">Another item that is linked</a></p></li> | |
| <li><p>Last item.</p></li> | |
| </ul> | |
| <ol> | |
| <li><p>Ordered List with Paragraphs - First item.</p></li> | |
| <li><p>Another item with <a href="" title="Test Link">a link.</a></p></li> | |
| <li><p><a href="" title="Test Link">Another item that is linked</a></p></li> | |
| <li><p>Last item.</p></li> | |
| </ol> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>Another paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <blockquote> | |
| <p>First blockquote paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong> or <em>emphasized</em>.</p> | |
| <p>Another blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <p>Last blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <p><cite>Cite tags are great for showing <a href="" title="Test Link">references.</a></cite></p> | |
| </blockquote> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>Another blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <dl> | |
| <dt>Definition List - First term</a></dt> | |
| <dd>A definition may be a statement of the <a href="" title="Test Link">essential properties</a> of a certain thing, or a statement of equivalence between a term and that term's meaning. The two are not mutually exclusive, nor are they equivalent.</dd> | |
| <dt>Another Term with <a href="" title="Test Link">a Link.</a></dt> | |
| <dd>A definition may be a statement of the essential properties of a certain thing, or a statement of equivalence between a term and that term's meaning. The two are not <a href="" title="Test Link">mutually exclusive</a>, nor are they equivalent.</dd> | |
| <dt><a href="" title="Test Link">Another Term that is Linked</a></dt> | |
| <dd>A definition may be a statement of the essential properties of a certain thing, or a statement of equivalence between a term and that term's meaning. The two are not mutually exclusive, nor are they equivalent.</dd> | |
| <dt>Last Term</a></dt> | |
| <dd>A definition may be a statement of the essential properties of a certain thing, or a statement of equivalence between a term and that term's meaning. The two are not mutually exclusive, nor are they equivalent.</dd> | |
| </dl> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>Another blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <table summary="Table summaries are used to describe the data to the disabled."> | |
| <caption>Caption : Table with Horizontal Headers</caption> | |
| <thead> | |
| <tr> | |
| <th>First</th><th>Second</th><th>Third</th><th>Fourth</th><th>Fifth</th><th>Last</th> | |
| </tr> | |
| </thead> | |
| <tfoot> | |
| <tr> | |
| <td>Total</td><td>Total</td><td>Total</td><td>Total</td><td>Total</td><td>Total</td> | |
| </tr> | |
| </tfoot> | |
| <tbody> | |
| <tr> | |
| <td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td> | |
| </tr> | |
| <tr class="alt"> | |
| <td>Alt 1</td><td>Alt 2</td><td>Alt 3</td><td>Alt 4</td><td>Alt 5</td><td>Alt 6</td> | |
| </tr> | |
| <tr> | |
| <td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td> | |
| </tr> | |
| <tr class="alt"> | |
| <td>Alt 1</td><td>Alt 2</td><td>Alt 3</td><td>Alt 4</td><td>Alt 5</td><td>Alt 6</td> | |
| </tr> | |
| <tr> | |
| <td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p>Another blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <table summary="Table summaries are used to describe the data to the disabled."> | |
| <caption>Caption : Table with Vertical Headers</caption> | |
| <tfoot> | |
| <tr> | |
| <td></td><td>Total</td><td>Total</td><td>Total</td><td>Total</td><td>Total</td><td>Total</td> | |
| </tr> | |
| </tfoot> | |
| <tbody> | |
| <tr> | |
| <th>Title : </th><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td> | |
| </tr> | |
| <tr class="alt"> | |
| <th>Title : </th><td>Alt 1</td><td>Alt 2</td><td>Alt 3</td><td>Alt 4</td><td>Alt 5</td><td>Alt 6</td> | |
| </tr> | |
| <tr> | |
| <th>Title : </th><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td> | |
| </tr> | |
| <tr class="alt"> | |
| <th>Title : </th><td>Alt 1</td><td>Alt 2</td><td>Alt 3</td><td>Alt 4</td><td>Alt 5</td><td>Alt 6</td> | |
| </tr> | |
| <tr> | |
| <th>Title : </th><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>Another blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>Last paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <hr /> | |
| <h2>Secondary Content (h2)</h2> | |
| <h3>Headline the Third (h3)</h3> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>First paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong> or <em>emphasized</em>.</p> | |
| <ul> | |
| <li>Unordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="">Another item that is linked</a></li> | |
| <li>Last item.</li> | |
| </ul> | |
| <ol> | |
| <li>Ordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="Test Link">Another item that is linked.</a></li> | |
| <li>Last item.</li> | |
| </ol> | |
| <p>Another blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <ul> | |
| <li><p>Unordered List with Paragraphs - First item.</p></li> | |
| <li><p>Another item with <a href="" title="Test Link">a link.</a></p></li> | |
| <li><p><a href="" title="Test Link">Another item that is linked</a></p></li> | |
| <li><p>Last item.</p></li> | |
| </ul> | |
| <ol> | |
| <li><p>Ordered List with Paragraphs - First item.</p></li> | |
| <li><p>Another item with <a href="" title="Test Link">a link.</a></p></li> | |
| <li><p><a href="" title="Test Link">Another item that is linked</a></p></li> | |
| <li><p>Last item.</p></li> | |
| </ol> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>Last blockquote paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p> | |
| <hr /> | |
| <h2>Footer (h2)</h2> | |
| <h3>Headline the Third (h3)</h3> | |
| <h4>Headline the Fourth (h4)</h4> | |
| <p>Footer paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence.</p> | |
| <ul> | |
| <li>Unordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="">Another item that is linked</a></li> | |
| <li>Last item.</li> | |
| </ul> | |
| <ol> | |
| <li>Ordered List - First item.</li> | |
| <li>Another item with <a href="" title="Test Link">a link.</a></li> | |
| <li><a href="" title="Test Link">Another item that is linked.</a></li> | |
| <li>Last item.</li> | |
| </ol> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment