inner.html

{% extends "base.html" %}

{% block body_attributes %}class="python default-page"{% endblock %}



{% block breadcrumbs %}
<ul class="breadcrumbs menu">
    <li><a href="#">Home</a><span class="prompt"><span>&gt;&gt;&gt;</span></span></li>
    <li>This Page</li>
</ul> 
{% endblock breadcrumbs %}



{% block content_attributes %}with-left-sidebar{% endblock %}

{% block content %}
            <article class="text">
   
<style>
/* For the style guide */
.example { 
    position: relative; 
    border: 1px solid #ddd; 
    padding: 1em 1em .125em; 
    margin-bottom: 1.25em; 
    -webkit-box-shadow: 0 0 1em rgba( 0,0,0,0.2 ); 
    -moz-box-shadow: 0 0 1em rgba( 0,0,0,0.2 ); 
    box-shadow: 0 0 1em rgba( 0,0,0,0.2 ); 
}
.example:before {
    content: 'EXAMPLE'; 
    position: absolute; 
    top: 0; right: 0; 
    z-index: 9999; 
    font-size: .75em; 
    color: #fff; 
    background-color: #3776ab; 
    padding: .4em .75em .3em; 
} 
.example + .examplecode {
    margin-top: -1.25em; 
}
.horizontal-list li {
    display: inline-block; 
}
</style>
             
                
<h1 id="menu">Style Guide and Sample Code</h1>
<p><strong>These are basic markup and typographic styles for your site and how to use them.</strong> Most of these options are availabel through the TinyMCE edit window in the admin, but some will require knowledge of coding HTML. </p>


<!-- Menu -->
<ol>
<li><a href="#user-feedback">User Feedback Modules</a></li>
<li><a href="#headings">Headings</a></li>
<li><a href="#grouping">Grouping</a></li>
<li><a href="#text">Text Semantic Elements</a></li>
<li><a href="#tables">Table Example</a></li>
<li><a href="#form">Form Example</a></li>
</ol>

<!-- User Feedback Modules -->
<h1 id="user-feedback">User Feedback Modules</h1>
<p>A few feedback styles have been created and should be used as "announcements" and as system-generated feedback styles. Here are some examples:</p>
<div class="example">
    <div class="user-feedback level-general">
        <p role="alert">Can&rsquo;t find what you&rsquo;re looking for? <a href="#">Try our comprehensive Help section</a></p>
    </div>
</div>
<pre class="examplecode"><code>&lt;div class="user-feedback level-general"&gt;
    &lt;p role="alert"&gt;Content&lt;/p&gt;
&lt;/div&gt;</code></pre>

<div class="example">
    <div class="user-feedback level-notice">
        <p role="alert">Please fill out all fields before submitting.</p>
    </div>
</div>
<pre class="examplecode"><code>&lt;div class="user-feedback level-notice"&gt;
    &lt;p role="alert"&gt;Content&lt;/p&gt;
&lt;/div&gt;</code></pre>

<div class="example">
    <div class="user-feedback level-error">
        <p role="alert"><span class="icon-alert" aria-hidden="true"><span class="larger">&#9888;</span></span> Please correct the errors <b>noted in red</b> below:</p>
    </div>
</div>
<pre class="examplecode"><code>&lt;div class="user-feedback level-error"&gt;
    &lt;p role="alert"&gt;&lt;span class="icon-alert" aria-hidden="true">&lt;span class="larger">&amp;#9888;&lt;/span>&lt;/span> Content&lt;/p&gt;
&lt;/div&gt;</code></pre>

<div class="example">
    <div class="user-feedback level-success">
        <p role="alert"><span aria-hidden="true">&#10004;</span> Your information has been saved successfully.</p>
    </div>
</div>
<pre class="examplecode"><code>&lt;div class="user-feedback level-success"&gt;
    &lt;p role="alert"&gt;&lt;span aria-hidden="true">&amp;#10004;&lt;/span> Content&lt;/p&gt;
&lt;/div&gt;</code></pre>


<!-- Headings -->
<h1 id="headings">Heading 1 <a href="#">with a Link</a></h1>
<p>The primary header is an <code>&lt;h1&gt;</code> element. Any header elements may include links, as depicted in the example. More than one of any type may be used per page. All of the headings follow a similar markup pattern:</p>

<pre class="examplecode"><code>&lt;h1&gt;This is a heading of primary importance&lt;/h1&gt;</code></pre>

<h2>Second-Level Header <a href="#">with a Link</a></h2>
<p>The secondary header is an <code>&lt;h2&gt;</code> element, which may be used for any form of important page-level header. More than one may be used per page. Consider using an <code>h2</code> as a sub-header to the page title or an existing <code>h1</code> element.</p>

<h3>Third-Level Header <a href="#">with a Link</a></h3>
<p>The header above is an <code>&lt;h3&gt;</code> element, which may be used for any form of page-level header which falls below the <code>h2</code> header in a document hierarchy.</p>

<h4>Fourth-Level Header <a href="#">with a Link</a></h4>
<p>The header above is an <code>&lt;h4&gt;</code> element, which may be used for any form of page-level header which falls below the <code>h3</code> header in a document hierarchy.</p>

<h5>Fifth-Level Header <a href="#">with a Link</a></h5>
<p>The header above is an <code>&lt;h5&gt;</code> element, which may be used for any form of page-level header which falls below the <code>h4</code> header in a document hierarchy.</p>

<h6>Sixth-Level Header <a href="#">with a Link</a></h6>
<p>The header above is an <code>&lt;h6&gt;</code> element, which may be used for any form of page-level header which falls below the <code>h5</code> header in a document hierarchy.</p>
<!-- end Headings -->


<!-- Groupings -->
<h1 id="grouping">Grouping content</h1>
<h3>Paragraphs</h3>
<p>All paragraphs are wrapped in <code>&lt;p&gt;</code> tags. Additionally, <code>&lt;p&gt;</code> elements can be wrapped with a <code>&lt;blockquote&gt;</code> element <em>if the <code>p</code> element is indeed a quote</em>. Historically, <code>blockquote</code> has been used purely to force indents, but this is now achieved using CSS. Reserve <code>blockquote</code> for quotes.</p>

<pre class="examplecode"><code>&lt;p&gt;This is a paragraph&lt;/p&gt;</code></pre>

<h3>Blockquotes</h3>
<p>The <code>blockquote</code> element represents a section that is being quoted from another source. In this example, we also follow the blockquote with a <code>cite</code> element containing a link to the quoted source.</p>
<div class="example">
    <blockquote cite="http://hansard.millbanksystems.com/commons/1947/nov/11/parliament-bill#column_206">
        <p>Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.</p>
    </blockquote>
    <p>&mdash; <cite><a href="http://hansard.millbanksystems.com/commons/1947/nov/11/parliament-bill#column_206" target="_blank">Parliament Bill 1947, Column 206</a></cite></p>
</div>
<pre class="examplecode"><code>&lt;blockquote cite="optional link to source material"&gt;
    &lt;p&gt;Quoted text&lt;/p&gt;
&lt;/blockquote"&gt;
&lt;p&gt;— &lt;cite&gt;&lt;a href="optional link to source material"&gt;Source of the Quote&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;</code></pre>

<hr />
<h3>Horizontal rule</h3>
<p>The <code>hr</code> element (seen above and below) represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book. </p>
<hr />

<!--
<h3>Pre-formatted text</h3>
<p>The <code>pre</code> element represents a block of pre-formatted text, in which structure is represented by typographic conventions rather than by elements. Such examples are an e-mail (with paragraphs indicated by blank lines, lists indicated by lines prefixed with a bullet), fragments of computer code (with structure indicated according to the conventions of that language) or displaying <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art. Here’s an example showing the printable characters of <abbr>ASCII</abbr>:</p>
<pre><samp>  ! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &lt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~</samp></pre>
-->

<h3>Ordered list</h3>
<p>The <code>&lt;ol&gt;</code> element denotes an ordered list, and various numbering schemes are available through the CSS (including 1,2,3&hellip; a,b,c&hellip; i,ii,iii&hellip; and so on). Each item requires a surrounding <code>&lt;li&gt;</code> tag to denote individual items within the list (as you may have guessed, <code>li</code> stands for list item).</p>
<div class="example">
    <ol>
        <li>This is an ordered list.</li>
        <li>
        	This is the second item, which contains a sub list
        	<ol>
        		<li>This is the sub list, which is also ordered.</li>
        		<li>It has two items.</li>
        	</ol>
        </li>
        <li>This is the final item on this list.</li>
    </ol>
</div>
<pre class="examplecode"><code>&lt;ol&gt;
    &lt;li&gt;List item one&lt;/li&gt;
    &lt;li&gt;List item two
        &lt;ol&gt;
            &lt;li&gt;Nested list item one&lt;/li&gt;
            &lt;li&gt;Nested list item two&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/li&gt;
&lt;/ol&gt;</code></pre>

<h3>Unordered list</h3>
<p>The <code>&lt;ul&gt;</code> element denotes an unordered list (ie. a list of loose items that don’t require numbering, as a bulleted list). Again, each item requires a surrounding <code>&lt;li&gt;</code> tag to denote individual items. Here is an example list showing the constituent parts of the British Isles:</p>
<div class="example">
    <ul>
        <li>
        	United Kingdom of Great Britain and Northern Ireland:
        	<ul>
        		<li>
        		    England
        			<ul><li>Another nested list</li><li>Yet another nested line item</li></ul>
        		</li>
        		<li>Scotland</li>
        		<li>Wales</li>
        		<li>Northern Ireland</li>
        	</ul>
        </li>
        <li>Republic of Ireland</li>
        <li>Isle of Man</li>
        <li>
        	Channel Islands:
        	<ul>
        		<li>Bailiwick of Guernsey</li>
        		<li>Bailiwick of Jersey</li>
        	</ul>
        </li>
    </ul>
</div>
<pre class="examplecode"><code>&lt;ul&gt;
    &lt;li&gt;List item one&lt;/li&gt;
    &lt;li&gt;List item two
        &lt;ul&gt;
            &lt;li&gt;Nested list item one&lt;/li&gt;
            &lt;li&gt;Nested list item two&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>

<h3>Definition list</h3>
<p>The <code>&lt;dl&gt;</code> element is for another type of list called a definition list. Instead of list items, the content of a <code>dl</code> consists of <code>&lt;dt&gt;</code> (Definition Term) and <code>&lt;dd&gt;</code> (definition description) pairs. Though it may be called a &ldquo;definition list&rdquo;, <code>dl</code> can apply to other scenarios where a parent/child relationship is applicable. For example, it may be used for marking up dialogues, with each <code>dt</code> naming a speaker, and each <code>dd</code> containing his or her words.</p>
<div class="example">
    <dl>
        <dt>This is a term.</dt>
        <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
        <dt>Here is another term.</dt>
        <dd>And it gets a definition too, which is this line.</dd>
        <dt>Here is term that shares a definition with the term below.</dt>
        <dt>Here is a defined term.</dt>
        <dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
    </dl>
</div>
<pre class="examplecode"><code>&lt;dl&gt;
    &lt;dt&gt;Definition term&lt;/dt&gt;
    &lt;dd&gt;Definition&lt;/dd&gt;
    &lt;dt&gt;Definition term&lt;/dt&gt;
    &lt;dt&gt;Another definition term&lt;/dt&gt;
    &lt;dd&gt;Definition of both terms above&lt;/dd&gt;
&lt;/dl&gt;</code></pre>

<h3>Figures</h3>
<p>Figures are usually used to refer to images:</p>
<div class="example">
<figure>
    <img src="http://lorempixum.com/720/300/abstract" alt="Example image">
    <figcaption>
    	This is a placeholder image, with supporting caption.
    </figcaption>
</figure>
</div>
<p>Here, a part of a poem is marked up using figure. A <code>cite</code> element surrounds the name of the text being referred to:</p>
<div class="example">
<figure>
    <p>‘Twas brillig, and the slithy toves<br>
    Did gyre and gimble in the wabe;<br>
    All mimsy were the borogoves,<br>
    And the mome raths outgrabe.</p>
    <figcaption>
    	<cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98
    </figcaption>
</figure>
</div>
<pre class="examplecode"><code>&lt;figure&gt;
    &lt;img src="link/to/image" alt="Alt text displayed when image does not load"&gt;
    &lt;figcaption&gt;An optional caption for the content above with an optional &lt;cite&gt;citation&lt;/cite&gt;&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>


<p><a href="#menu">Back to Top &uarr;</a></p>


<!-- Text semantics -->
<h1 id="text">Text-level Semantics</h1>
<p>There are a number of inline <abbr title="HyperText Markup Language">HTML</abbr> elements you may use anywhere within other elements. The semantics of the markup used is as important as how it looks, as web crawlers will not process CSS, but rather infer hierarchy and emphasis from the HTML elements being used. </p>

<h3>Links and anchors</h3>
<p>The <code>&lt;a&gt;</code> element is used to hyperlink text, be that to another page, a named fragment (also referred to as an &ldquo;anchor&rdquo;) on the current page, or any other location on the web. Example:</p>
<div class="example">
    <p><a href=".">Go to the home page</a> or <a href="#menu">return to the menu at the top of this page</a>.</p>
</div>
<pre class="examplecode"><code>&lt;a href="link/to/page"&gt;link text&lt;/a&gt;</code></pre>

<h3>Stressed emphasis</h3>
<p>The <code>&lt;em&gt;</code> element is used to denote text with stressed emphasis, i.e., something you&rsquo;d pronounce differently. Example:</p>
<div class="example">
    <p>You simply <em>must</em> try the negitoro maki!</p>
</div>
<pre class="examplecode"><code>You simply &lt;em&gt;must&lt;/em&gt; try the negitoro maki!</code></pre>
<p>In HTML5, the older <code>&lt;i&gt;</code> element is still acceptable, and has taken on the form of styling something as an <code>em</code> would be styled, <em>without</em> adding the semantics of <code>em</code> for SEO.</p> 

<h3>Strong importance</h3>
<p>The <code>&lt;strong&gt;</code> element is used to denote text with strong importance. Example:</p> 
<div class="example">
    <p><strong>Do not under any circumstances</strong> stick nails in the electrical outlet.</p>
</div>
<pre class="examplecode"><code>&lt;strong&gt;Do not under any circumstances&lt;/strong&gt; stick nails in the electrical outlet.</code></pre>
<p>In HTML5, the older <code>&lt;b&gt;</code> element is still acceptable, and has taken on the form of styling something as an <code>strong</code> would be styled <em>without</em> adding the semantics of <code>strong</code> for SEO.</p>

<h3>Small print</h3>
<p>The <code>&lt;small&gt;</code> element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as &ldquo;fine print&rdquo;). It can also be used for attributions or satisfying licensing requirements. Example:</p>
<div class="example">
    <p>Order now, only $5.99! <small>Some restrictions may apply if you live in the continental United States.</small></p>
</div>
<pre class="examplecode"><code>Order now, only $5.99! &lt;small&gt;Some restrictions may apply.&lt;/small&gt;</code></pre>

<h3>Strikethrough</h3>
<p>The <code>&lt;s&gt;</code> element is used to represent content that is no longer accurate or relevant. When indicating document edits i.e., marking a span of text as having been removed from a document, use the <code>&lt;del&gt;</code> element instead (See <a href="#edits">Edits</a>). Example:</p>
<div class="example">
    <p><s>Recommended retail price: $3.99 per bottle</s> Now selling for just $2.99 a bottle! </p>
</div>
<pre class="examplecode"><code>&lt;s&gt;Recommended retail price: $3.99 per bottle&lt;/s&gt; Now selling for just $2.99 a bottle!</code></pre>

<h3>Superscript and subscript text</h3>
<p>The <code>&lt;sup&gt;</code> element represents a superscript and the <code>&lt;sub&gt;</code> element represents a subscript. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation. As a guide, only use these elements if their absence would change the meaning of the content. Example:</p>
<div class="example">
    <p>The coordinate of the <var>i</var>th point is (<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>). For example, the 10th point has coordinate (<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>
    <p>If(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup></p>
</div>
<pre class="examplecode"><code>f(&lt;var>x&lt;/var>, &lt;var>n&lt;/var>) = log&lt;sub>4&lt;/sub>&lt;var>x&lt;/var>&lt;sup>&lt;var>n&lt;/var>&lt;/sup></code></pre>

<h3>Citations</h3>
<p>The <code>&lt;cite&gt;</code> element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. Stylistically, it may be italicized, but does not have to be. Example:</p>
<div class="example">
    <p><cite>Universal Declaration of Human Rights</cite>, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).</p>
</div>
<pre class="examplecode"><code>&lt;cite&gt;Universal Declaration of Human Rights&lt;/cite&gt;, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).</code></pre>

<h3>Inline quotes</h3>
<p>The <code>&lt;q&gt;</code> element is used for quoting text inline. Example showing nested quotations:</p>
<div class="example">
    <p>John said, <q>I saw Lucy at lunch, she told me <q>Mary wants you to get some ice cream on your way home</q>. I think I will get some at Ben and Jerry&rsquo;s, on Gloucester Road.</q></p>
</div>
<pre class="examplecode"><code>John said, &lt;q&gt;I saw Lucy at lunch, she told me &lt;q&gt;Mary wants you to get some ice cream on your way home&lt;/q&gt;. I think I will get some at Ben and Jerry&rsquo;s, on Gloucester Road.&lt;/q&gt;</code></pre>

<h3>Definition</h3>
<p>The <code>&lt;dfn&gt;</code> element is used to highlight the first use of a term. The <code>title</code> attribute can be used to describe the term, resulting in a browser &ldquo;tooltip&rdquo; when the mouse is hovered for more than a second. Example:</p>
<div class="example">
    <p>Bob&rsquo;s <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
</div>
<pre class="examplecode"><code>Bob&rsquo;s &lt;dfn title="Dog"&gt;canine&lt;/dfn&gt; mother and &lt;dfn title="Horse"&gt;equine&lt;/dfn&gt; father.</code></pre>

<h3>Abbreviation</h3>
<p>The <code>&lt;abbr&gt;</code> element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it&rsquo;s less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the <code>title</code> attribute will appear when the user&rsquo;s mouse hovers the abbreviation (although notably, this does not work in Internet Explorer for Windows). Example abbreviations:</p>
<div class="example">
    <p><abbr title="British Broadcasting Corportation">BBC</abbr>, <abbr title="HyperText Markup Language">HTML</abbr>, and <abbr title="Staffordshire">Staffs.</abbr> are common abbreviated terms. </p>
</div>
<pre class="examplecode"><code>&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;is a common abbreviated term</code></pre>

<!--
<h3>Time</h3>
<p>The <code>time</code> element is used to represent either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Example:</p>
<div class="example">
<p>Queen Elizabeth II was proclaimed sovereign of each of the Commonwealth realms on <time datetime="1952-02-6">6</time> and <time datetime="1952-02-7">7 February 1952</time>, after the death of her father, King George VI.</p>
</div>
-->

<h3>Code</h3>
<p>The <code>&lt;code&gt;</code> element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise. Example:</p>
<div class="example">
    <p>When you call the <code>activate()</code> method on the <code>robotSnowman</code> object, the eyes glow.</p>
</div>
<pre class="examplecode"><code>When you call the &lt;code&gt;activate()&lt;/code&gt; method</code></pre>

<h3>Variable</h3>
<p>The <code>&lt;var&gt;</code> element is used to denote a variable in a mathematical expression or programming context, but can also be used to indicate a placeholder where the contents should be replaced with your own value. Example:</p>
<div class="example">
    <p>If there are <var>n</var> pipes leading to the ice cream factory then I expect at <em>least</em> <var>n</var> flavors of ice cream to be available for purchase!</p>
</div>
<pre class="examplecode"><code>If there are &lt;var&gt;n&lt;/var&gt; pipes&hellip;</code></pre>

<h3>Sample output</h3>
<p>The <code>samp</code> element is used to represent (sample) output from a program or computing system. Useful for technology-oriented sites, not so useful otherwise. Example:</p>
<div class="example">
    <p>The computer said <samp>Too much cheese in tray two</samp> but I didn’t know what that meant.</p>
</div>
<pre class="examplecode"><code>The computer said &lt;samp&gt;Too much cheese&lt;/samp&gt;&hellip;</code></pre>

<h3>Keyboard entry</h3>
<p>The <code>&lt;kbd&gt;</code> element is used to denote user input (typically via a keyboard, although it may also be used to represent other input methods, such as voice commands). Example:</p>
<div class="example">
    <p>To take a screenshot on your Mac, press <kbd>⌘ Cmd</kbd> + <kbd>⇧ Shift</kbd> + <kbd>3</kbd>.</p>
</div>
<pre class="examplecode"><code>Press the &lt;kbd&gt;⌘ Cmd&lt;/kbd&gt; key&hellip;</code></pre>

<h3>Marked or highlighted text</h3>
<p>The <code>&lt;mark&gt;</code> element is used to represent a run of text marked or highlighted for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader&rsquo;s attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user&rsquo;s current activity. Example:</p>
<div class="example">
    <p>I also have some <mark>kitten</mark>s who are visiting me these days. They&rsquo;re really cute. I think they like my garden! Maybe I should adopt a <mark>kitten</mark>.</p>
</div>
<pre class="examplecode"><code>Maybe I should adopt a &lt;mark&gt;kitten&lt;/mark&gt;</code></pre>

<h3 id="edits">Edits</h3>
<p>The <code>&lt;del&gt;</code> element is used to represent deleted or retracted text which still must remain on the page for some reason. Meanwhile its counterpart, the <code>&lt;ins&gt;</code> element, is used to represent inserted text. Both <code>del</code> and <code>ins</code> have a <code>datetime</code> attribute which allows you to include a timestamp directly in the element. Example inserted text and usage:</p>
<div class="example">
    <p>She bought <del datetime="2005-05-30T13:00:00">two</del> <ins datetime="2005-05-30T13:00:00">five</ins> pairs of shoes.</p>
</div>
<pre class="examplecode"><code>She bought &lt;del datetime="2005-05-30T13:00:00"&gt;two&lt;/del&gt; &lt;ins datetime="2005-05-30T13:00:00"&gt;five&lt;/ins&gt; pairs of shoes.</code></pre>


<p><a href="#menu">Back to Top &uarr;</a></p>


<!-- Tables -->
<h1 id="tables">Tabular data</h1>
<p>Tables should be used when displaying tabular data. The <code>&lt;caption&gt;</code> element gives the table a title, while the <code>&lt;colgroup&gt;</code> and <code>&lt;col&gt;</code> elements help align columns. The <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> elements enable you to group sets of rows within each a table &mdash; the <code>thead</code> and <code>&lt;th&gt;</code> elements should be used to denote a row of table headings. </p>
<div class="example">
<table>
    <caption>The Very Best Eggnog</caption>
    <colgroup>
    	<col style="width:50%">
    	<col style="width:25%">
    	<col style="width:25%">
    </colgroup>
    <thead>
    	<tr>
    		<th scope="col">Ingredients</th>
    		<th scope="col">Serves 12</th>
    		<th scope="col">Serves 24</th>
    	</tr>
    </thead>
    <tbody>
    	<tr>
    		<td>Milk</td>
    		<td>1 quart</td>
    		<td>2 quart</td>
    	</tr>
    	<tr>
    		<td>Cinnamon Sticks</td>
    		<td>2</td>
    		<td>1</td>
    	</tr>
    	<tr>
    		<td>Vanilla Bean, Split</td>
    		<td>1</td>
    		<td>2</td>
    	</tr>
    	<tr>
    		<td>Cloves</td>
    		<td>5</td>
    		<td>10</td>
    	</tr>
    	<tr>
    		<td>Mace</td>
    		<td>10 blades</td>
    		<td>20 blades</td>
    	</tr>
    	<tr>
    		<td>Egg Yolks</td>
    		<td>12</td>
    		<td>24</td>
    	</tr>
    	<tr>
    		<td>Cups Sugar</td>
    		<td>1 ½ cups</td>
    		<td>3 cups</td>
    	</tr>
    	<tr>
    		<td>Dark Rum</td>
    		<td>1 ½ cups</td>
    		<td>3 cups</td>
    	</tr>
    	<tr>
    		<td>Brandy</td>
    		<td>1 ½ cups</td>
    		<td>3 cups</td>
    	</tr>
    	<tr>
    		<td>Vanilla</td>
    		<td>1 tbsp</td>
    		<td>2 tbsp</td>
    	</tr>
    	<tr>
    		<td>Half-and-half or Light Cream</td>
    		<td>1 quart</td>
    		<td>2 quart</td>
    	</tr>
    	<tr>
    		<td>Freshly grated nutmeg to taste</td>
    		<td></td>
    		<td></td>
    	</tr>
    </tbody>
    </table>
</div>
<pre class="examplecode"><code>&lt;table>
    &lt;caption>The Very Best Eggnog&lt;/caption>
    &lt;colgroup>
        &lt;col style="width:50%">
        &lt;col style="width:25%">
        &lt;col style="width:25%">
    &lt;/colgroup>
    &lt;thead>
        &lt;tr>
            &lt;th scope="col">Ingredients&lt;/th>
            &lt;th scope="col">Serves 12&lt;/th>
            &lt;th scope="col">Serves 24&lt;/th>
        &lt;/tr>
    &lt;/thead>
    &lt;tbody>
        &lt;tr>
            &lt;td>Milk&lt;/td>
            &lt;td>1 quart&lt;/td>
            &lt;td>2 quart&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table></code></pre>


<p><a href="#menu">Back to Top &uarr;</a></p>


<!-- Forms -->
<h1 id="form">Form Example</h1>
<p>Basic <code>&lt;form&gt;</code> container and inner common element styles</p>

<p>The <code>&lt;fieldset&gt;</code> element groups related fields within a form and should have a title attribute and a corresponding <code>&lt;legend&gt;</code>. The <code>&lt;label&gt;</code> element ensures field descriptions are associated with their corresponding form widgets, and are very important for form accesibility.</p>

<div class="example">
    <form>
        <fieldset title="Sample input field types">
            <legend>Input Field Types</legend>
            <p>
                <label for="text">Text Input</label>
                <input id="text" class="input" type="text" required="required">
                <small class="element-caption">This is a sample input field of type="text"</small>
            </p>
            <p>
                <label for="password">Password</label>
                <input id="password" class="input" type="password" required="required">
                <small class="element-caption">This is a sample input field of type="password"</small>
            </p>
            <p>
                <label for="email">Email Address</label>
                <input id="email" class="input" type="email" placeholder="you@example.com" required="required">
                <small class="element-caption">This is a sample input field of type="email"</small>
            </p>
            <p>
                <label for="url">Web Address</label>
                <input id="url" class="input" type="url" placeholder="http://example.com" required="">
                <small class="element-caption">This is a sample input field of type="url"</small>
            </p>
            <p>
                <label for="url">Phone Number</label>
                <input id="number" class="input" type="number" placeholder="000-000-0000" required="">
                <small class="element-caption">This is a sample input field of type="number"</small>
            </p>
            <p>
                <label for="textarea">Textarea</label>
                <textarea id="textarea" class="input" rows="8" cols="32" required=""></textarea>
                <small class="element-caption">This is a sample textarea for multi-line user input</small>
            </p>
        </fieldset>

        <fieldset title="Selectable Option Items">
            <legend>Selectable Option Items</legend>
            <p>
                <label for="select">Select</label>
                <select id="select" class="input">
                    <optgroup label="Option Group">
                        <option>Option One</option>
                        <option>Option Two</option>
                        <option>Option Three</option>
                    </optgroup>
                </select>
                <small class="element-caption">A select form element contains more than one <code>&lt;option&gt;</code> element</small>
            </p>
            <ul class="menu horizontal-list">
                <li>
                    <label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label>
                </li>
                <li>
                    <label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label>
                </li>
                <li>
                    <label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label>
                </li>
            </ul>
            <p><small class="element-caption">Checkboxes can be selected independently, and more than one can be selected</small></p>
            
            <ul class="menu horizontal-list">
                <li>
                    <label for="radio1" class="check"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label>
                </li>
                <li>
                    <label for="radio2" class="check"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label>
                </li>
                <li>
                    <label for="radio3" class="check"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label>
                </li>
            </ul>
            <p><small class="element-caption">Radio buttons are inter-dependent, and usually only one can be chosen</small></p>
        </fieldset>

        <fieldset title="Buttons">
            <legend>Button Types: input type="submit", <code>&lt;button&gt;</code>, input type="reset" and an <code>&lt;a&gt;</code></legend>
            <p>
                <input type="submit" value="Post comment"> 
                <button>Preview</button> 
                <input type="reset" value="Clear Form"> 
                <a href="#">Cancel</a>
            </p>
        </fieldset>
    </form>
</div>

<hr />

<p>There are all the styles that can be present inside the main content area with class <code>.text</code>. Hope this helps you craft beautiful <strong>and semantic</strong> content</p>

<p><a href="#menu">Back to Top &uarr;</a></p>
                
            
            </article>
{% endblock content %}



{% block left_sidebar %}
<aside class="left-sidebar" role="secondary">
  
    {% include "components/navigation-widget.html" %}

    <div class="twitter-widget sidebar-widget">
        <script type="text/javascript" src="//widgets.twimg.com/j/2/widget.js"></script>
        <script type="text/javascript">// <![CDATA[
        new TWTR.Widget({
          version: 2,
          type: 'profile',
          rpp: 3,
          interval: 30000,
          width: 'auto',
          height: 300,
          theme: {
            shell: {
              background: '#f2f2f2',
              color: '#666666'
            },
            tweets: {
              background: '#f2f2f2',
              color: '#666666',
              links: '#3776ab'
            }
          },
          features: {
            scrollbar: false,
            loop: false,
            live: false,
            behavior: 'all'
          }
        }).render().setUser('ThePSF').start();
        // ]]></script>
    </div>
    
    <div class="psf-sidebar-widget sidebar-widget">
        <h3 class="widget-title">The PSF</h3>
        <p>The Python Software Foundation is the organization behind Python. Become a member of the PSF and help advance the software and our mission. </p>
    </div>
</aside>
{% endblock left_sidebar %}