Last active
April 3, 2020 03:25
-
-
Save machal/1d9a59b89ec27ce91e7790ee75f81585 to your computer and use it in GitHub Desktop.
Serving JS as async/defer - before and after
This file contains 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
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS serving: After</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- JS: Analytika - Měření návštěvnosti: Google Analytics --> | |
| <script> | |
| window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; | |
| ga('create', 'UA-67173-13', {}); | |
| ga('send', 'pageview'); | |
| </script> | |
| <script async src='https://www.google-analytics.com/analytics.js'></script> | |
| <!-- CSS: Bootstrap --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| <!-- JS: Analytika - nahrávání návštěvníků: SmartLook --> | |
| <script type='text/javascript'> | |
| window.smartlook||(function(d) { | |
| var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0]; | |
| var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript'; | |
| c.charset='utf-8';c.src='https://rec.smartlook.com/recorder.js';h.appendChild(c); | |
| })(document); | |
| smartlook('init', '885e7af22e6290ca1581f075abe2b6d5f861102d'); | |
| </script> | |
| <!-- JS: Detekce vlastnosti: Modernizr --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> | |
| <!-- JS: Polyfill: position: sticky --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1> hello world </h1> | |
| <p> Lorem ipsum až mlze kohoutku něj, světový z postupující, nim do ovládá je směr organizace nějaké u matriarchálně jasně v řádu slabí ztěžuje, jim i mj. zvládnete někdy k zelené, čím 5300 m n.m. všeobecně bílý, a o tezi z tak světlých se napětí mozek. Rozmachu listopadovém podobný teď. Spešl díky pro <a href="http://cs.blabot.net/">Blábot</a>. </p><h2>Jsou tady různé HTML elementy. Testujeme se, zda nastavení typografie řeší všechny jejich kombinace</h2> <p>Lorem ipsum Zemi dvě ujít jste šest s 2012 vlajících, míra tvar rezervaci profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě. Lanovek předpoklad naplánoval by mj. laboratoře vstupuje ostře prostoročase ze o Michal spíš 5300 m n.m. létě k viru. </p><h2>Tohle je třeba děsně dlouhý nadpis druhé úrovně, že jo. Unikátní docházet 320denní se zemskou agenturou, nájem jasně nacházejí vznikl annan</h2> <p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><h3>Nadpis třetí úrovně. Mor EU 862 propadnout získávání odpoledne oddané traektorii si zemědělstvím</h3> <p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p><h4>Nadpis čtvrté úrovně. Mor primátů odešli schopnost co letos výhodu</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h5>Nadpis páté úrovně. Mor EU 4567 získávání odpoledne oddané traektorii si zemědělstvím</h5> <p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p><h6>Nadpis šesté úrovně. Mor primátů odešli schopnost co letos výhodu</h6> <p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p><h2>Základní prvky blokové úrovně</h2> <p>Lorem ipsum mediálně u charisma hmatatelný mamuti smetánka dubnu strukturou neřeknou dolní dcera i odborníci. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><address>Adresa. Block level, but without margin or padding because they're often stacked.</address> <p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><p> <small> Tohle je odstavec textu uvnitř značky <code>small</code>. Lorem ipsum mediálně u charisma hmatatelný mamuti smetánka dubnu strukturou neřeknou dolní dcera i odborníci. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. </small> </p><div>To je <code>div</code> element. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek. (Konec <code>div</code> elementu.)</div><p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><blockquote> <p>Tohle je <code>blockquote</code> s <em>jedním</em> odstavcem. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</p></blockquote> <p>Následuje vodorovný oddělovač <code>hr</code>:</p><hr> <h2>Seznamy</h2> <p>Odstavec před <strong>nečíslovaným</strong> seznamem (<code>ul</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><ul> <li>První.</li><li>Druhý.</li><li>Třetí. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li><li>Čtvrtý. Lorem ipsum vlajících, míra tvar rezervaci <em>profese</em>. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li></ul> <p>Odstavec před <strong>číslovaným</strong> seznamem (<code>ol</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><ol> <li>První.</li><li>Druhý.</li><li>Třetí. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li><li>Čtvrtý. Lorem ipsum vlajících, míra tvar rezervaci <em>profese</em>. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li><li>Pátá</li><li>Šestá</li><li>Sedmá</li><li>Osmá</li><li>Devátá</li><li>Desátá</li><li>Jedenáctá</li></ol> <p>Odstavec před <strong>seznamem definic</strong> (<code>dl</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><dl> <dt>Jablko</dt> <dd>Je ovoce</dd> <dt>Banám</dt> <dd>Je prostě taky ovoce. Lorem ipsum vlajících, míra tvar rezervaci půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují.</dd> <dt>Rajče</dt> <dd>Tak to je těžké. Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</dd> </dl> <h2>Značkování na úrovni textu</h2> <ul> <li> <abbr title="Cascading Style Sheets">CSS</abbr> (zkratka; <code>abbr</code>)</li><li> <acronym title="radio detecting and ranging">radar</acronym> (akronym; <code>acronym</code>)</li><li> <cite>Origin of Species</cite> (citace; <code>cite</code>)</li><li> <code>a[i]=b[i] + c[i);</code> (kód; <code>code</code>)</li><li> A ještě <dfn>octet</dfn> is an entity consisting of eight bits (<code>dfn</code> markup used for the term being defined)</li><li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing a word)</li><li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup used for text indicating keyboard input)</li><li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li><li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li><li> you may get the message <samp>Core dumped</samp> at times (<code>samp</code> markup used for sample output)</li><li> <small>Element <code>small</code></small> asi není potřeba představovat.</li><li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li><li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li><li> the command <code>cat</code> <var>filename</var> displays the file specified by the <var>filename</var> (<code>var</code> markup used to indicate a word as a variable).</li><li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li></ul> <p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p><ul> <li><code>Tohle je ukázka textu uvnitř code</code></li><li><kbd>Tohle je ukázka textu uvnitř kbd</kbd></li><li><samp>Tohle je ukázka textu uvnitř samp</samp></li><li><tt>Tohle je ukázka textu uvnitř tt</tt></li></ul> <h2>Seznam odkazů</h2> <ul> <li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li><li><a href="http://www.vzhurudolu.cz">Blog Vzhůru dolů</a></li></ul> <h2>Tabulky</h2> <p>Tabulka s caption. Lorem ipsum unikátní docházet 320denní se zemskou agenturou, nájem jasně nacházejí vznikl annan nebezpečná schopnost.</p><table summary="V řádcích tabulky jsou severské země a sloupečky popisují jejich celkovou plochu v metrech čtverečních, plochu připadající na pevninu a počet obyvatel"> <caption>Název tabulky: Porovnání severských zemí </caption> <tbody> <tr> <th>Země</th> <th>Celková plocha m²</th> <th>Plocha země</th> <th>Počet obyvatel</th> </tr><tr> <th>Dánsko</th> <td>43 070</td><td>42 370</td><td>7 230 000</td></tr><tr> <th>Finsko</th> <td>337 030</td><td>305 470</td><td>17 830 000</td></tr><tr> <th>Island</th> <td>103,000</td><td>100,250</td><td>5 230 000</td></tr><tr> <th>Norsko</th> <td>324 220</td><td>307 860</td><td>18 200 000</td></tr><tr> <th>Švédsko</th> <td>449 964</td><td>410 928</td><td>28 570 000</td></tr></tbody> </table> <h2>Formuláře</h2> <form role="form"> <h3>Kontaktní formulář</h3> <label for="name"> Jméno a příjmení </label> <input type="text" id="name" placeholder="Name"> <br><label for="email"> Váš e-mail </label> <input type="email" id="email" placeholder="Email"> <br><label for="message"> Zprávy </label> <textarea id="message" placeholder="Message"></textarea> <br><input type="checkbox"> Souhlasím s posíláním novinek e-mailem <br><button type="submit">Odeslat</button> </form> <br><br><form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> <div><input type="hidden" name="hidden field" value="42"></div><div><label for="f1">Klasický textový input na jednu řádku: <input id="f1" name="text" size="20" value="Default text."></label></div><div><label for="f2">Víceřádkový vstup (textarea):</label></div><div><textarea id="f2" name="textarea" rows="16" cols="20">Sem něco napište.</textarea></div><p>Následující prvky jsou uvnitř <code>fieldset</code> a mají také <code>legend</code>:</p><fieldset> <legend>Legenda</legend> <div> <label for="f3">Radio button 1</label> <input id="f3" type="radio" name="radio" value="1"> </div><div> <label for="f4">Radio button 2 (zatržné)</label> <input id="f4" type="radio" name="radio" value="2" checked=""> </div></fieldset> <fieldset> <legend>Checkboxy</legend> <div> <label for="f5">Checkbox 1</label> <input id="f5" type="checkbox" name="checkbox"> </div><div> <label for="f6">Checkbox 2 (zatržený)</label> <input id="f6" type="checkbox" name="checkbox2" checked=""> </div></fieldset> <p> <label for="f10">Prvek <code>select</code> nastavený jako <code>size="1"</code>:</label> </p><select id="f10" name="select1" size="1"> <option>první</option> <option selected="">druhý (přednastavený)</option> <option>třetí</option> </select> <p> <label for="f11"><code>select</code> element nastavený jako <code>size="3"</code>:</label> </p><select id="f11" name="select2" size="3"> <option>první</option> <option selected="">druhý (přednastavený)</option> <option>třetí</option> </select> <div> <label for="f99">Submit tlačítko:</label> <input id="f99" type="submit" name="submit" value="Odeslat"> </div><div> <label for="f0">Resetovací tlačítko:</label> <input id="f0" type="reset" name="reset" value="Reset"> </div></form> <p>Jak funguje <code>pre</code> předformátovaný text?</p> | |
| </div> | |
| <!-- JS: Frameworky a knihovny - jQuery, Bootstrap --> | |
| <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> | |
| <!-- JS: Komponenty - Slick carousel, Lazy load --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS serving: Before</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- JS: Detekce vlastnosti: Modernizr --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> | |
| <!-- JS: Polyfill: position:sticky --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script> | |
| <!-- JS: Analytika - Měření návštěvnosti: Google Analytics --> | |
| <script> | |
| window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; | |
| ga('create', 'UA-67173-13', {}); | |
| ga('send', 'pageview'); | |
| </script> | |
| <script async src='https://www.google-analytics.com/analytics.js'></script> | |
| <!-- JS: Analytika - nahrávání návštěvníků: SmartLook --> | |
| <script type='text/javascript'> | |
| window.smartlook||(function(d) { | |
| var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0]; | |
| var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript'; | |
| c.charset='utf-8';c.src='https://rec.smartlook.com/recorder.js';h.appendChild(c); | |
| })(document); | |
| smartlook('init', '885e7af22e6290ca1581f075abe2b6d5f861102d'); | |
| </script> | |
| <!-- JS: Frameworky a knihovny - jQuery, Bootstrap --> | |
| <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> | |
| <!-- JS: Komponenty - Slick carousel, Lazy load --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> | |
| <!-- CSS: Bootstrap --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1> hello world </h1> | |
| <p> Lorem ipsum až mlze kohoutku něj, světový z postupující, nim do ovládá je směr organizace nějaké u matriarchálně jasně v řádu slabí ztěžuje, jim i mj. zvládnete někdy k zelené, čím 5300 m n.m. všeobecně bílý, a o tezi z tak světlých se napětí mozek. Rozmachu listopadovém podobný teď. Spešl díky pro <a href="http://cs.blabot.net/">Blábot</a>. </p><h2>Jsou tady různé HTML elementy. Testujeme se, zda nastavení typografie řeší všechny jejich kombinace</h2> <p>Lorem ipsum Zemi dvě ujít jste šest s 2012 vlajících, míra tvar rezervaci profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě. Lanovek předpoklad naplánoval by mj. laboratoře vstupuje ostře prostoročase ze o Michal spíš 5300 m n.m. létě k viru. </p><h2>Tohle je třeba děsně dlouhý nadpis druhé úrovně, že jo. Unikátní docházet 320denní se zemskou agenturou, nájem jasně nacházejí vznikl annan</h2> <p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><h3>Nadpis třetí úrovně. Mor EU 862 propadnout získávání odpoledne oddané traektorii si zemědělstvím</h3> <p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p><h4>Nadpis čtvrté úrovně. Mor primátů odešli schopnost co letos výhodu</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h5>Nadpis páté úrovně. Mor EU 4567 získávání odpoledne oddané traektorii si zemědělstvím</h5> <p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p><h6>Nadpis šesté úrovně. Mor primátů odešli schopnost co letos výhodu</h6> <p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><p>Lorem ipsum dolor sit amet, staří dokáže, ovce ke. Východním k vyrazili, většinu patří zmražených poslouchá přijata, místech spotřebuje tvoří důležitý mamutů, úrodnou uspoří můžeme lodi trávy. Jsou, 523 horské. Problémy osoba?</p><h2>Základní prvky blokové úrovně</h2> <p>Lorem ipsum mediálně u charisma hmatatelný mamuti smetánka dubnu strukturou neřeknou dolní dcera i odborníci. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><address>Adresa. Block level, but without margin or padding because they're often stacked.</address> <p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><p> <small> Tohle je odstavec textu uvnitř značky <code>small</code>. Lorem ipsum mediálně u charisma hmatatelný mamuti smetánka dubnu strukturou neřeknou dolní dcera i odborníci. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. </small> </p><div>To je <code>div</code> element. Rozpoznat naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek. (Konec <code>div</code> elementu.)</div><p>Myší že dopluli, čem, informaci EU mi ráno bizarnímu někdy rozšířeným vyprávějí povely do. Výjimkou či takřka, ony zmizely spatřovali, k užitečných na z rámci mobilního začala, podlouhlým za všechny, i mor ke vlna tito s veřejně s neřeknou. </p><blockquote> <p>Tohle je <code>blockquote</code> s <em>jedním</em> odstavcem. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</p></blockquote> <p>Následuje vodorovný oddělovač <code>hr</code>:</p><hr> <h2>Seznamy</h2> <p>Odstavec před <strong>nečíslovaným</strong> seznamem (<code>ul</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><ul> <li>První.</li><li>Druhý.</li><li>Třetí. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li><li>Čtvrtý. Lorem ipsum vlajících, míra tvar rezervaci <em>profese</em>. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li></ul> <p>Odstavec před <strong>číslovaným</strong> seznamem (<code>ol</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><ol> <li>První.</li><li>Druhý.</li><li>Třetí. Lorem ipsum dvě ujít jste šest s 2012 vlajících, míra tvar <strong>rezervaci</strong> profese. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li><li>Čtvrtý. Lorem ipsum vlajících, míra tvar rezervaci <em>profese</em>. Viru ze vlivů soudci obzoru po hned masy u katastrofě.</li><li>Pátá</li><li>Šestá</li><li>Sedmá</li><li>Osmá</li><li>Devátá</li><li>Desátá</li><li>Jedenáctá</li></ol> <p>Odstavec před <strong>seznamem definic</strong> (<code>dl</code>). Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</p><dl> <dt>Jablko</dt> <dd>Je ovoce</dd> <dt>Banám</dt> <dd>Je prostě taky ovoce. Lorem ipsum vlajících, míra tvar rezervaci půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují.</dd> <dt>Rajče</dt> <dd>Tak to je těžké. Lorem ipsum naši že stylovou uveřejněném zvíře s těžkou u jakýsi dní dál nabídka pohyb k hlavně. Převýšení půlkilometrová cestu všemi o nebe, ta té a závisí neředěnou informují indie permanentek.</dd> </dl> <h2>Značkování na úrovni textu</h2> <ul> <li> <abbr title="Cascading Style Sheets">CSS</abbr> (zkratka; <code>abbr</code>)</li><li> <acronym title="radio detecting and ranging">radar</acronym> (akronym; <code>acronym</code>)</li><li> <cite>Origin of Species</cite> (citace; <code>cite</code>)</li><li> <code>a[i]=b[i] + c[i);</code> (kód; <code>code</code>)</li><li> A ještě <dfn>octet</dfn> is an entity consisting of eight bits (<code>dfn</code> markup used for the term being defined)</li><li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing a word)</li><li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup used for text indicating keyboard input)</li><li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li><li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li><li> you may get the message <samp>Core dumped</samp> at times (<code>samp</code> markup used for sample output)</li><li> <small>Element <code>small</code></small> asi není potřeba představovat.</li><li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li><li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li><li> the command <code>cat</code> <var>filename</var> displays the file specified by the <var>filename</var> (<code>var</code> markup used to indicate a word as a variable).</li><li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li></ul> <p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p><ul> <li><code>Tohle je ukázka textu uvnitř code</code></li><li><kbd>Tohle je ukázka textu uvnitř kbd</kbd></li><li><samp>Tohle je ukázka textu uvnitř samp</samp></li><li><tt>Tohle je ukázka textu uvnitř tt</tt></li></ul> <h2>Seznam odkazů</h2> <ul> <li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li><li><a href="http://www.vzhurudolu.cz">Blog Vzhůru dolů</a></li></ul> <h2>Tabulky</h2> <p>Tabulka s caption. Lorem ipsum unikátní docházet 320denní se zemskou agenturou, nájem jasně nacházejí vznikl annan nebezpečná schopnost.</p><table summary="V řádcích tabulky jsou severské země a sloupečky popisují jejich celkovou plochu v metrech čtverečních, plochu připadající na pevninu a počet obyvatel"> <caption>Název tabulky: Porovnání severských zemí </caption> <tbody> <tr> <th>Země</th> <th>Celková plocha m²</th> <th>Plocha země</th> <th>Počet obyvatel</th> </tr><tr> <th>Dánsko</th> <td>43 070</td><td>42 370</td><td>7 230 000</td></tr><tr> <th>Finsko</th> <td>337 030</td><td>305 470</td><td>17 830 000</td></tr><tr> <th>Island</th> <td>103,000</td><td>100,250</td><td>5 230 000</td></tr><tr> <th>Norsko</th> <td>324 220</td><td>307 860</td><td>18 200 000</td></tr><tr> <th>Švédsko</th> <td>449 964</td><td>410 928</td><td>28 570 000</td></tr></tbody> </table> <h2>Formuláře</h2> <form role="form"> <h3>Kontaktní formulář</h3> <label for="name"> Jméno a příjmení </label> <input type="text" id="name" placeholder="Name"> <br><label for="email"> Váš e-mail </label> <input type="email" id="email" placeholder="Email"> <br><label for="message"> Zprávy </label> <textarea id="message" placeholder="Message"></textarea> <br><input type="checkbox"> Souhlasím s posíláním novinek e-mailem <br><button type="submit">Odeslat</button> </form> <br><br><form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> <div><input type="hidden" name="hidden field" value="42"></div><div><label for="f1">Klasický textový input na jednu řádku: <input id="f1" name="text" size="20" value="Default text."></label></div><div><label for="f2">Víceřádkový vstup (textarea):</label></div><div><textarea id="f2" name="textarea" rows="16" cols="20">Sem něco napište.</textarea></div><p>Následující prvky jsou uvnitř <code>fieldset</code> a mají také <code>legend</code>:</p><fieldset> <legend>Legenda</legend> <div> <label for="f3">Radio button 1</label> <input id="f3" type="radio" name="radio" value="1"> </div><div> <label for="f4">Radio button 2 (zatržné)</label> <input id="f4" type="radio" name="radio" value="2" checked=""> </div></fieldset> <fieldset> <legend>Checkboxy</legend> <div> <label for="f5">Checkbox 1</label> <input id="f5" type="checkbox" name="checkbox"> </div><div> <label for="f6">Checkbox 2 (zatržený)</label> <input id="f6" type="checkbox" name="checkbox2" checked=""> </div></fieldset> <p> <label for="f10">Prvek <code>select</code> nastavený jako <code>size="1"</code>:</label> </p><select id="f10" name="select1" size="1"> <option>první</option> <option selected="">druhý (přednastavený)</option> <option>třetí</option> </select> <p> <label for="f11"><code>select</code> element nastavený jako <code>size="3"</code>:</label> </p><select id="f11" name="select2" size="3"> <option>první</option> <option selected="">druhý (přednastavený)</option> <option>třetí</option> </select> <div> <label for="f99">Submit tlačítko:</label> <input id="f99" type="submit" name="submit" value="Odeslat"> </div><div> <label for="f0">Resetovací tlačítko:</label> <input id="f0" type="reset" name="reset" value="Reset"> </div></form> <p>Jak funguje <code>pre</code> předformátovaný text?</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment