Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Meno našej stránky</title> </head> <body> <div id="stlpec"> <h2>Novinky</h2> <ul> <li>1. novinka</li> <li>2. novinka</li> <li>3. novinka</li> <li>4. novinka</li> <li>5. novinka</li> </ul> <p>Ak sa chcete dočítať viac, <a href="#">kliknite sem</a></p> </div> <div id="obsah"> <h1>Webová stránka</h1> <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p> <p>Je dávno známe, že ak je zrozumiteľný obsah stránky, na ktorej rozloženie sa čitateľ díva, jeho pozornosť je rozptýlená. Dôvodom použitia Lorem Ipsum je fakt, že má viacmenej normálne rozloženie písmen, takže oproti použitiu 'Sem príde text, sem príde text' sa obsah vypĺňanej oblasti na stránke viac podobá na skutočný text. Mnohé balíky publikačného softvéru a editorov webových stránok už používajú Lorem Ipsum ako predvolený výplňový text a keď dáte na internete vyhľadávať 'lorem ipsum', objavíte mnoho webových stránok v rannom štádiu ich vzniku. V minulých rokoch sa objavilo mnoho verzií tohto textu, niekedy náhodou, niekedy úmyselne (pridaný humor a podobne).</p> </div> <div class="clear"></div> <div id="pata"> <p>© názov webu</p> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { height: 100%; /*zapezpečí, že dokument bude vždy vysoký na celú výšku monitora*/ } body { max-width: 960px; /*určí šírku obaľovacieho prvku*/ margin: 0 auto; /*vycentruje*/ } #stlpec { float: right; /*vlastnsoť float dovolí prvkom zobraziť sa vedľa seba*/ width: 240px; /* určenie rozmerov*/ min-height: 100%; /*aby sa postranný panel aspoň trochu prispôsoboval výške obsahového stĺpca*/ padding: 5px; background-color: orange; /*opäť kvôli viditeľnosti*/ } #obsah { padding: 10px; margin-right: 250px; /*vytvorí miesto pre stĺpec, v prípade, že by bol zobrazený naľavo, použijeme vlastnosť margin-left*/ } .clear { clear: both; } #pata { max-width: 960px; /*nastaví päte rovnaké rozmery, ako má telo stránky*/ text-align: center; border-top: 1px dotted #000; /*kvôli viditeľnosti*/ }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>