HTML tahák
Tento tahák hodně zjednodušuje a je určen začátečníkům, aby si z něj mohli kopírovat kousky HTML kódu. Spousta věcí je dělána pomocí CSS namísto HTML. Pomocí CSS je to funkčnější, systematičtější a asi i jednodušší než čistým HTML.
Struktura html souboru - Doctype - Čeština - Titulek - Keywords a description - Zápis stylu - Zápis javascriptu - Poznámky - Odkazy - Barvy stránky a odkazů - Nadpisy - Odstavce a vynucené zalomení řádku - Zarovnání odstavce - Nastavení fontu - Barva písma - Tučnost a kurzíva - Podtržení - Obrázek - Seznamy - Div = oddíl - Rozvržení stránky - Tabulky - Iframe - Bublina na přejetí myší - Flash - Přesměrování - Stažení souboru - Vyšší dívčí
Nevíte, kam se ty HTML kódy píšou? Podívejte se na návod jak si udělat stránku a na základy HTML. Seznam všech tagů naleznete o úroveň výš v HTML příručce.
Struktura html souboru
Nejčastější "kopyto" stránky:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1250">
<title>Jméno</title>
</head>
<body>
samotný text stránky
</body>
</html>
(upravte si Jméno stránky, samotný text stránky, případně to doctype a windows-1250)
Struktura stránky v jazyce HTML: html, head, body, doctype
Doctype
Nejčastější přechodový (quirk)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Nejčastější striktní HTML:
<!doctype html>
DTD - Document type definition v HTML, Módy prohlížečů, vliv doctype
Čeština
Windows - pokud nevíte, v jakém píšete kódování, tak pravděpodobně v tomhle:
<meta charset="windows-1250">
UTF-8:
<meta charset="UTF-8">
Iso:
<meta charset="iso-8859-2">
Titulek
<title>Titulek stránky</title>
V titulku stránky se nesmějí používat žádné html tagy.
Keywords a description
Klíčová slova, keywords (vyhledávače je již ignorují):
<meta name="keywords" content="slova, slova, slova">
Popisek stránky, description (objevuje se občas jako popisek v Google a v Seznamu):
<meta name="description" content="Co to čte princ dánský">
Zápis stylu
Píše se do hlavičky (mezi <head> a </head>). Například nastavení nulových okrajů těla:
<style type="text/css">
body {margin: 0px;}
</style>
Připojení externího stylu
Takto lze připojit soubor.css k souboru (vkládá se obvykle do každé stránky mezi <head> a </head>):
<link rel="stylesheet" href="soubor.css" type="text/css">
v tomto případě se soubor.css předpokládá v tomtéž adresáři, jako je stránka. Nebo:
<style type="text/css">
@import url("soubor.css");
</style>
Meta tag viewport
Tento meta tag řekne mobilům, že nemají předstírat, že mají větší šířku než skutečně mají. To je důležité pro responzivní design.
<meta name="viewport" content="width=device-width,initial-scale=1">
Pokud nevíte, co přesně děláte, použití tohoto tagu se vyhněte.
Zápis javascriptu
Přímo do stránky:
<script type="text/javascript">
zápis javascriptu
</script>
Volání externího souboru:
<script type="text/javascript" src="cesta/soubor.js"></script>
Skripty a styly, vložení do HTML: script, style
Javascript - návod, objekty, příklady na javascript
Poznámky
Poznámka v HTML:
<!-- toto je poznámka v HTML --> a toto už ne
/* tohle taky ne */
// a tohle taky ne
Poznámka v CSS:
<style type="text/css">
/* toto je poznámka v CSS stylu */
// toto není poznámka v CSS
</style>
Poznámka v Javascriptu:
<script type="text/javascript">
/* toto je poznámka ve skriptu */
toto není poznámka // a tohle ano
// a toto taky
</script>
Podmíněné komentáře pro Internet Explorer
Odkazy
Odkaz do jiného webu musí obsahovat http:// (to je absolutní adresování)
<a href="http://www.seznam.cz">Seznam</a>
Zobrazí se to takto: Seznam
Odkaz na soubor stranka.html do stejného adresáře (bez http://, takže relativní adresování):
<a href="stranka.html">Odkaz na stranka</a>
Odkaz na soubor stranka.html ležící v adresáři o úroveň výš (dvě tečky znamenají úroveň výš):
<a href="../stranka.html">Odkaz do vyššího adresáře</a>
Otevření odkazu do nového okna:
<a href="stranka.html" target="_blank">odkaz do nového okna</a>
nebo
<a href="http://www.seznam.cz" target="_blank">odkaz na Seznam do nového okna</a>
Záložky (kotvy, anchory)
Kotva někde v dokumentu:
<a name="jmeno_zalozky"></a>
a po kliknutí na tento odkaz se na kotvu po kliknutí odroluje:
<a href="#jmeno_zalozky">odrolovat</a>
Barvy stránky a odkazů
Tag <style> patří mezi tagy <head> a </head>:
<style type="text/css">
body {color: black; background-color: white; background-image: url("pozadi.gif");}
/* text černý, barva pozadí bílá, obrázek na pozadí */
a:link {color: blue;} /* nenavštívený odkaz */
a:visited {color: navy;}/* navštívený odkaz */
a:hover {color: red} /* odkaz, přes který se jede myší*/
</style>
Dříve se to dělalo pomocí atributů tagu <body>, to je zastaralé.
Bezpečné barvy, Pojmenované HTML barvy, Základní webové barvy
Nadpisy
<h1>Nadpis nejvyšší úrovně</h1>
<h2>Nadpis kapitoly nebo odstavce</h2>
<h3>Podnadpis</h3>
...
<h6>Sedmička už nefunguje</h6>
Kromě čtenářů si nadpisů všímají i vyhledávače.
Odstavce a vynucené zalomení řádku
<p>Odstavec zalamuje řádky podle šířky prostoru, který má (nejčastěji okna). Na konci odstavce se zalomí řádek.</p>
Je-li potřeba uvnitř odstavce zalomit řádek, použije se tag <br>, v normálních textech k tomu ale není důvod:
<p>Text odstavce plyne<br> a najednou se zalomí řádek.</p>
Zarovnání odstavce
Normálně se odstavce (i jiné tagy) zarovnávají doleva. Zarovnání jednoho odstavce doprava:
<p style="text-align: right">Odstavec zarovnaný doprava.</p>
Zarovnání na střed a do bloku:
<p style="text-align: center">Odstavec zarovnaný na střed.</p>
<p style="text-align: justify">Odstavec zarovnaný do bloku.</p>
Lepší je ale nastavit všechny odstavce najednou globálním stylem:
<style type="text/css">
p {text-align: center;} /* všechny odstavce budou zarovnány na střed */
address {text-align: right;} /* tag address bude zarovnán doprava */
.doleva {text-align: left} /* ale tag, který bude v sobě mít class="doleva", se
bude zarovnávat doleva */
</style>
Nastavení fontu
<span style="font-family: Arial, sans-serif">Text arialem</span>
nebo použití na odstavec:
<p style="font-family: Arial, sans-serif">Odstavec arialem</p>
dá se použít na každý tag, třeba i na body, což ovlivní celou stránku:
<body style="font-family: Arial">
Lepší je to ale zapsat globálně stylem do hlavičky:
<style type="text/css">
body {font-family: Arial, sans-serif;}/* pro celý dokument /*
p {font-family: "Times New Roman", serif} /* pro všechny odstavce <p>*/
.trida {font-family: Verdana, sans-serif} /* pro všechny tagy s class="trida" */
</style>
Víceslovné názvy písem musejí být v uvozovkách.
Barva písma
<span style="color: red;">Červené písmo</span>
nebo třeba pro odstavec
<p style="color: blue">Odstavec modrým písmem</p>
Dá se to napsat do libovolného tagu, ale nemusí to fungovat u odkazů (tag <a>), u nich se to musí udělat globálním stylem <style>, což je ale stejně lepší i v jiných případech:
<style type="text/css">
body {color: maroon; background-color: white;}/* hnědé písmo pro celý dokument,
barva pozadí bílá /*
p {color: green;} /* zelené písmo pro všechny odstavce <p> */
.zlute {color:yellow;} /* pro všechny tagy s class="zlute" */
a:link {color: blue;} /* nenavštívený odkaz modrý*/
a:visited {color: navy;}/* navštívený odkaz tmavě modrý */
a:hover {color: red} /* odkaz, přes který se jede myší červený */
</style>
Color, Barvy v HTML, Základní barvy, Pojmenované HTML barvy
Tučnost, kurzíva
<b>Tučné písmo</b>
<i>Kurzíva</i>
Normální písmo, <b>tučné písmo, <i>tučná kurzíva</i></b>, <i>normální kurzíva</i>.
<strong>také tučné písmo (zvýraznění)</strong>
<em>také kurzíva (zvýraznění)</em>
Úprava textu pomocí HTML: b, i, span...
Podtržení
<u>Podtržený text</u>
Ale nepoužívejte to, plete se to s odkazem. Taky se to blbě čte.
<span style="text-decoration: underline">podtržení pomocí stylu</span>
také doporučuji nepoužívat.
Odkazy se podtrhávají automaticky:
<a href="soubor.html">automaticky podtržený odkaz</a>
Jak zrušit podtrhávání odkazů:
<style type="text/css">
a {text-decoration: none;}
a: hover {text-decoration: underline;}
</style>
ale podtrhávání odkazů doporučuji nevypínat.
Text-decoration, Jak zdokonalit odkazy
Obrázek
Obrázek ze stejného adresáře, ve kterém je html stránka:
<img src="obrazek.gif" width="100" height="200" alt="obrázek">
nebo obrazek.jpg nebo obrazek.png. Zadané rozměry by měly být skutečné rozměry obrázku (jednotka se v HTML neuvádí, ale rozměry jsou v pixelech = obrazovkových bodech).
Obrázek z nadřazeného adresáře (to jsou ty dvě tečky):
<img src="../obrazek.gif" width="100" height="200" alt="obrázek">
Obrázek z webu (absolutní adresa, začíná http://):
<img src="http://www.jakpsatweb.cz/images/jakpw.gif" width="100" height="200" alt="obrázek">
Obrázek fungující jako odkaz (kliká):
<a href="cilova_stranka.html"><img src="obrazek.gif" width="100" height="200" alt="obrázek"></a>
Obrázek fungující jako odkaz, ale bez modrého rámečku:
<a href="cilova_stranka.html"><img src="obrazek.gif" width="100" height="200" alt="obrázek" border="0"></a>
Příprava obrázků pro web, Obrázky v HTML (výklad), Obrázky v HTML (vlastnosti tagu img), Proč nefungují obrázky
Seznamy
Odrážkový seznam (puntíky):
<ul>
<li>první položka</li>
<li>druhá položka</li>
</ul>
Obrázkové odrážky se dělají stejně jako puntíky, ale přidává se styl:
<style type="text/css">
ul li {list-style-image: url("obrazek.gif"}
</style>
Seznamy v HTML (odrážky a číslování), List-style-image
Číslovaný seznam:
<ol>
<li>první položka, čísluje se to automaticky</li>
<li>druhá položka</li>
</ol>
Jiný typ číslování, třeba a) b) c):
<style type="text/css">
ol li {list-style-type: lower-alpha;}
</style>
Div = oddíl
Tag div slouží nejčastěji na obalení více blokových prvků. Například když budu chtít mít tři odstavce červeným písmem a odsazené zleva o 30px:
<div style="color: red; margin-left: 30px;">
<p>odstavec</p>
<p>odstavec</p>
<p>odstavec</p>
<div>
Ale dá se to dělat samozřejmě i jinak, stejně tak <div> má širší použití, většinou na rozvržení designu stránky.
Rozvržení stránky
Rozvržení stránky se dá dělat desítkami různých způsobů. Toto je jen příklad:
<body>
<div id="cela-stranka">
<div id="hlavicka">
Hlavička
</div>
<div id="leve-menu">
Levé menu
</div>
<div id="hlavni-text">
Hlavní text
</div>
<div id="paticka">
Patička
</div>
</div>
</body>
a k tomu se dá napsat styl mnoha a mnoha různými způsoby. Příklad stránky s pevnou šířkou:
<style type="text/css">
body {text-align: center; }
#cela-stranka {width: 760px; margin: 0px auto;}
#leve-menu {width: 160px; float: left;}
#hlavni-text {width: 500px; float: left;}
#paticka {clear: left;}
</style>
Ta mříž # se vždycky vztahuje k prvku se stejným id=.
Návod na centrování celé stránky.
Tabulky
Nejjednodušší tabulka 2x2:
<table cellspacing="0">
<tr>
<td>První buňka prvního řádku</td>
<td>Druhá buňka prvního řádku</td>
</tr>
<tr>
<td>První buňka druhého řádku</td>
<td>Druhá buňka druhého řádku</td>
</tr>
</table>
Zapnutí rámečku (border) a vnitřních okrajů buněk (cellpadding):
<table border="1" cellpadding="6" cellspacing="0">...
Jednoduchý rámeček (nebude dvojitý):
<table border="1" style="border-collapse: collapse;">
<tr>první buňka...<td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
Buňka přes dva řádky (v druhém řádku se zapíše o jednu buňku méně):
<td rowspan="2">buňka přes dva řádky</td>
Buňka přes tři sloupce:
<td colspan="3">Buňka přes tři sloupce</td>.
Iframe
Do stránky se vloží obdélník a v něm se zobrazí jiná stránka:
<iframe src="jina-stranka.html" width="300" height="400" name="vnoreny">
alternativní text
</iframe>
Iframe -- vnořené plovoucí rámy
Bublina na přejetí myší
Do libovolného tagu stačí napsat atribut title="text bubliny", například:
<span title="text, který se objeví ve žluté bublině">text, přes který když se přejede myší, se to objeví</span>
Flash
Vložení flashe (soubor swf) do stránky. Jednoduše:
<embed src="soubor.swf" type="application/x-shockwave-flash" width="100" height="200">
Složitě:
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
border="0" width="100" height="200">
<param name="movie" value="soubor.swf">
<param name="quality" value="High">
<embed src="soubor.swf"
type="application/x-shockwave-flash" name="obj1" width="100" height="200"></object>
Přesměrování
Jediné pořádné přesměrování se nedá udělat v HTML, nýbrž na serveru (v .htaccess nebo programovat). Níže popsané metody jsou jenom náhražky.
Přesměrování meta tagem, čeká to 2 sekundy:
<meta http-equiv="refresh" content="2;URL=http://www.nekam.cz/cesta/soubor.html">
Přesměrování javascriptem:
<script type="text/javascript">
top.location.href="http://www.nekam.cz/cesta/soubor.html";
</script>
Přesměrování stránky, různé možnosti
Stažení souboru
Třeba soubory .docx, .avi a podobné. Normálně odkazem na ten soubor:
<a href="pisemka.docx">stáhnout písemku</a>
Nechat stáhnout soubory, které prohlížeče interpretují (třeba .html nebo .js) můžete tak, že je zabalíte do .zip nebo do .rar. To se hodí i na stažení více souborů najednou:
<a href="archiv.zip">stáhnout archiv</a>
Stahované soubory je samozřejmě nutné umístit na server.
Vyšší dívčí
Anketa, počítadlo, diskuse, návštěvní kniha
To není sranda naprogramovat, musí to běžet na serveru. Zaregistrujte na miniaplikace.blueboard.cz a vložte si do stránky vygenerovaný kód.
Nejlepší počitadlo se statistikami zdarma je na www.toplist.cz. Na statistiky se hodně se používá Google Analytics, také zdarma.
Přístup na heslo
To taky neni sranda.
Zaheslování stránek -- různé způsoby
Vložení kusu html z jiného souboru
Nelze nijak jednoduše. Různé způsoby, jak to udělat, popisuji na stránce Skládání stránek z kousků.
Zvuky
Taky docela komplikovaná věc.
Reklama
