dummy html

<div class="content-html">
            <div id="headers">
              <h2>Headers</h2>
              <p>Headers are used to describe such elements as website name, slogan, section titles. HTML and XHTML specifications define 6 levels of headers, where h1 is the most important and h6 is the least important.</p>
              <h1>Header 1</h1>
              <h2>Header 2</h2>
              <h3>Header 3</h3>
              <h4>Header 4</h4>
              <h5>Header 5</h5>
              <h6>Header 6</h6>
 
              <p>Headers with a following paragraph</p>
              <h1>Header 1</h1>
              <p>How vain and foolish, then, thought I, for timid untravelled man to try to comprehend aright this wondrous whale, by merely poring over his dead attenuated skeleton, stretched in this peaceful wood. No. Only in the heart of quickest perils; only when within the eddyings of his angry flukes; only on the profound unbounded sea, can the fully invested whale be truly and livingly found out.</p>
              <h2>Header 2</h2>
              <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light&mdash;all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
              <h3>Header 3</h3>
              <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light&mdash;all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
              <h4>Header 4</h4>
              <p>People were watching for Martians here from the church towers.  My brother, very luckily for him as it chanced, preferred to push on at once to the coast rather than wait for food, although all three of them were very hungry.  By midday they passed through Tillingham, which, strangely enough, seemed to be quite silent and deserted, save for a few furtive plunderers hunting for food.  Near Tillingham they suddenly came in sight of the sea, and the most amazing crowd of shipping of all sorts that it is possible to imagine.</p>
              <h5>Header 5</h5>
              <p>"The unforeseen does not exist," quietly replied Phileas Fogg.</p>
              <h6>Header 6</h6>
              <p>Another man now joined the group, and, after making his formal greetings to his ruler, said:</p>
            </div>
            <div id="links">
              <h2>Links</h2>
              <p> <a href="#">Local link</a><br>
                <a href="http://www.google.com" class="external">External link</a><br>
                <a href="https://www.google.com">External link with encrypted connection</a><br>
                <a href="mailto:[email protected]">E-mail link</a> </p>
            </div>
            <div id="block-elements">
              <h2>Block elements</h2>
              <h3>Block quote</h3>
              <blockquote cite="http://en.wikipedia.org/wiki/Blockquote">
                <p>The blockquote element is used to indicate the quotation of a bigger section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.<cite>Wikipedia, The Free Encyclopedia</cite></p>
              </blockquote>
              <h3>Preformated text</h3>
              <pre> 
              ___                        _ 
             /   \_ __ _   _ _ __   __ _| |   // This is preformated text
            / /\ / '__| | | | '_ \ / _` | |
           / /_//| |  | |_| | |_) | (_| | |
          /___,' |_|   \__,_| .__/ \__,_|_|
                            |_|            
            </pre>
            </div>
            <div id="phrase-elements">
              <h2>Phrase elements</h2>
              <h3>em</h3>
              <p>Element used to <em>put emphasis on certain information</em>. Most browsers display emphased text in italics by default.<br>
                Sample: <em>This is emphasied text</em>.</p>
              <h3>strong</h3>
              <p>This element stands for "stronger emphasis" and is used for marking more important text.<br>
                Sample: <strong>This is text with stronger emphasis</strong></p>
              <h3>cite</h3>
              <p>According to <cite>W3C specification</cite>, we use <code>cite</code> element to define source of a quotation or reference.<br>
                Sample: <cite>This is quotation source</cite></p>
              <h3>dfn</h3>
              <p>Element used to markup inline definition of a single term.<br>
                Sample: <dfn>This is definition</dfn></p>
              <h3>code</h3>
              <p>This element informs the browser that it contains a computer code, such as XHTML markup.<br>
                Sample: <code>document.write("Hello world");</code></p>
              <h3>samp</h3>
              <p>Defines computer output data, for example we can use it to markup error messages. <br>
                Sample: <samp>Error: no such file or directory</samp></p>
              <h3>kbd</h3>
              <p>Means information that should be entered by the user.<br>
                Sample: press <kbd>Alt + F4</kbd> to close this window. <kbd>ESC</kbd></p>
              <h3>var </h3>
              <p>Means variables used in computer programs or scripts.<br>
                Sample: <var>counter</var></p>
              <h3>abbr</h3>
              <p>Abbreviation / a shortened form of a word or phrase.<br>
                Sample: <abbr title="doctor">dr</abbr></p>
              <h3>acronym</h3>
              <p>Acronym / a word formed from the initial letters of other words.<br>
                Sample acronyms: <acronym title="eXtensible HyperText Markup Language">XHTML</acronym></p>
              <h3>q</h3>
              <p>Inline quotation.<br>
                Sample: <q>This is sample quotation</q></p>
            </div>
            <div id="characters">
              <p>0 1 2 3 4 5 6 7 8 9</p>
              <p>+ - &ndash; &mdash;  _  = ? ! ~ ( ) [ ] { } * ^ | "" \'\' `´ / \ &amp; @ £ $ § ½ % ¨ ; : . ,</p>
              <p>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 ö ä å</p>
              <p>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 Ö Ä Å</p>
            </div>
            <div id="inline-images">
              <p><img src="http://dummyimage.com/240x320/000/fff" class="left" width=240 height=320 alt="dummmy" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
              <p><img src="http://dummyimage.com/240x320/000/fff" class="right" width=240 height=320 alt="dummmy" />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>
            </div>
            <div id="lists">
              <h2>Lists</h2>
              <h3>Unordered List</h3>
              <ul>
                <li>Apple</li>
                <li>Pear</li>
                <li>Banana</li>
                <li>Orange</li>
                <li>Carrot</li>
              </ul>
              <h3>Ordered List</h3>
              <ol>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
                <li>Fourth</li>
              </ol>
              <h3>Definition List</h3>
              <dl>
                <dt>Definition List Title</dt>
                <dd>This is a definition list division.</dd>
                <dt>Inkscape</dt>
                <dd>Open Source vector graphics editor</dd>
                <dt>SVG</dt>
                <dd>Scalable Vector Graphics</dd>
                <dd>W3C standard</dd>
                <dt>GIMP</dt>
                <dd>GNU Image Manipulation Program</dd>
                <dt>Drupal</dt>
                <dd>Content Management System</dd>
              </dl>
              <h3>Nested lists</h3>
              <ol>
                <li>one, two
                  <ol>
                    <li>buckle my shoe</li>
                  </ol>
                </li>
                <li>three, four
                  <ol>
                    <li>knock at the door</li>
                  </ol>
                </li>
                <li>Five, six
                  <ol>
                    <li>pick up sticks</li>
                  </ol>
                </li>
                <li>Seven, eight, lay them straight
                  <ol>
                    <li>Nine, ten, a big fat hen</li>
                    <li>Eleven, twelve, dig and delve</li>
                    <li>Thirteen, fourteen, maids a’courting</li>
                    <li>Fifteen, sixteen, maids in the kitchen</li>
                    <li>Seventeen, eighteen, maids a’waiting</li>
                    <li>Nineteen, twenty, my platter’s empty …</li>
                  </ol>
                </li>
              </ol>
            </div>
            <div id="paragraphs">
              <h2>Paragraphs</h2>
              <p>According to Wikipedia: a paragraph (from the Greek <a href="#">paragraphos</a>, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. The start of a paragraph is indicated by beginning on a new line. Sometimes the first line is indented; sometimes it is indented without beginning a new line.</p>
              <p>A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view. Each paragraph builds on what came before and lays the ground or run the length of multiple pages, and may consist of one or many sentences. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.</p>
              <p>In (X)HTML, the p element marks a block of text as a paragraph - the opening tag &lt;p&gt; marks the beginning of a paragraph, and the closing tag &lt;/p&gt; marks the end of a paragraph. The end tag is optional for legacy HTML as the browser automatically starts another paragraph at the next &lt;p&gt; tag, or the nextblock element.</p>
            </div>
            <div id="tables">
              <h2>Tables</h2>
              <table>
                <caption>
                Table title goes here
                </caption>
                <thead>
                  <tr>
                    <th>Mauris</th>
                    <th>Tempor</th>
                    <th>Praesent lacus nulla</th>
                    <th>Quis</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="odd">
                    <td>Mauris</td>
                    <td>23.000</td>
                    <td>Suspendisse viverra</td>
                    <td>Yes</td>
                  </tr>
                  <tr class="even">
                    <td>Trupis</td>
                    <td>1.000</td>
                    <td>Placerat tortor aesent semper</td>
                    <td>No</td>
                  </tr>
                  <tr class="odd">
                    <td>Sagittis</td>
                    <td>122.000</td>
                    <td>Neque vel condimentum</td>
                    <td>No</td>
                  </tr>
                  <tr class="even">
                    <td>Libero</td>
                    <td>500</td>
                    <td>Hendrerit, lectus elit pretium</td>
                    <td>Yes</td>
                  </tr>
                  <tr class="odd">
                    <td>Tristique</td>
                    <td>100.000</td>
                    <td>Ligula nec consequat</td>
                    <td>Yes</td>
                  </tr>
                  <tr class="even">
                    <td>Id Neque</td>
                    <td>600.000</td>
                    <td>Etiam sodales orci nec</td>
                    <td>No</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="messages">
              <div class="messages status">
                <h2 class="element-invisible" style="display: none;">Status message</h2>
                <p> This is <em>status</em> message. </p>
              </div>
              <div class="messages warning">
                <h2 class="element-invisible" style="display: none;">Status message</h2>
                <p> This is <em>warning</em> message. </p>
              </div>
              <div class="messages error">
                <h2 class="element-invisible" style="display: none;">Status message</h2>
                <p> This is <em>error</em> message. </p>
              </div>
            </div>
            <div id="pagers">
              <h2>Pagers</h2>
              <div class="item-list">
                <ul class="pager">
                  <li class="pager-first first"><a href="/blog" title="Go to first page" class="active">« first</a></li>
                  <li class="pager-previous"><a href="/blog" title="Go to previous page" class="active">‹ previous</a></li>
                  <li class="pager-item"><a href="/blog" title="Go to page 1" class="active">1</a></li>
                  <li class="pager-current">2</li>
                  <li class="pager-item"><a href="/blog?page=2" title="Go to page 3" class="active">3</a></li>
                  <li class="pager-item"><a href="/blog?page=3" title="Go to page 4" class="active">4</a></li>
                  <li class="pager-item"><a href="/blog?page=4" title="Go to page 5" class="active">5</a></li>
                  <li class="pager-next"><a href="/blog?page=2" title="Go to next page" class="active">next ›</a></li>
                  <li class="pager-last last"><a href="/blog?page=4" title="Go to last page" class="active">last »</a></li>
                </ul>
              </div>
              <div class="item-list">
                <ul class="pager">
                  <li class="pager-previous first"><a href="/blog" class="active">‹‹</a></li>
                  <li class="pager-current">2 of 8</li>
                  <li class="pager-next last"><a href="/blog?page=2" class="active">››</a></li>
                </ul>
              </div>
            </div>
            <div id="others">
              <h2>Other elements</h2>
              <h3>Subscript and superscript samples</h3>
              <p> H<sub>2</sub>O,<br>
                E = mc<sup>2</sup>,<br>
                The 14<sup>th</sup> of September </p>
              <h3>Insertion and deletion samples</h3>
              <p> <ins datetime="2009-07-12T08:15:30+02:00" title="Added new information according to suggestions">This information was just added.</ins><br>
                <del>Whilte this information is no longer valid.</del> </p>
              <h3>Presentational elements</h3>
              <p> <b>Bold text</b><br>
                <i>Italic text</i><br>
                <tt>Typewriter text</tt><br>
                <big>Big</big><br>
                <small>Small</small><br>
                Horizontal rule:</p>
              <hr>
              <h3>UTF-8 test</h3>
              <p>Ä, ä, Ö, ö, Ü, ü, ß</p>
              <p>Š Ť Ž Ľ Č Ě Ď Ň Ř Ů Ĺ</p>
              <p>ХЦЧШЩЬЫЪЭЮЯ</p>
            </div>
            <div id="forms">
              <form id="form" method="post" accept-charset="UTF-8" action="/action">
                  <fieldset>
                    <legend>Fieldset with legend</legend>
                    <div>
                      <label>Label for Radios</label>
                      <input name="radio" type="radio" value="" /><input name="Radio" type="radio" value="" /><input name="Radio" type="radio" value="" />
                    </div>
                    <div>
                      <label>Label for Checkboxes</label>
                      <input name="checkboxes" type="checkbox" value="" /><input name="checkboxes" type="checkbox" value="" /><input name="checkboxes" type="checkbox" value="" />
                    </div>
                    <div>
                      <label>Label for Textfield</label>
                      <input id="textfield" type="text" value="input" size="50" maxlength="12"/>
                      </div>
                    <div>
                      <label>label for Textarea</label>
                      <textarea id="text" rows="5" cols="50"></textarea>
                    </div>
                    <div>
                      <label>label for Filefield</label>
                      <input name="files" type="file" size="50" />
                    </div>
                    <div>
                      <input name="button" type="button" value="Button" />
                    </div>
                  </fieldset>
                </form>
            </div>
          </div>