Základní minimum
HTML není žádná věda. Jednoduše říkáš prohlížeči co má udělat tučně, co
má vystředit, co je odkaz, to všechno pomocí takzvaných "tagů", česky
značek. Prohlížeč bere vstupní text a snaží se ho interpretovat a
formátovat právě pomocí těchto značek. Přebytečné mezery, řádky pro
formátování nemají žádný smysl, prohlížeč z nich udělá pouze mezeru.
Naopak dlouhé řádky prohlížeč sám zalomí.
Takže podobný zdrojový text:
Tohle všechno
bude
hezky
vedle
sebe.
Má za výsledek takovýto úhledný výstup:
Tohle všechno
bude
hezky
vedle
sebe.
Značky jsou jednak párové, to je takové, že jedna (otevírací značka) označuje začátek ovlivněného textu, druhá konec (uzavírací značka), jednak nepárové, to v případě, že vkládáme do textu nějakou věc, například nový řádek nebo obrázek.
Taková párová značka může vypadat třeba takhle:
<a href="http://trasa20.takpraha.cz/novinky.php">Jdi do novinek</a>
Všechny značky jsou uzavřeny do ostrých závorek <>. Otevírací značky obsahují název nebo chceš-li příkaz (tady "
a" - příkaz pro vytvoření odkazu) a můžou obsahovat i další parametry (zde třeba "
href" - Hypertext REFerence, čili adresa, kam míří daný odkaz) s jejich hodnotou uzavřenou do uvozovek. Uzavírací značka obsahuje před názvem navíc lomítko a neobsahuje parametry.
V některých případech není uzavírací značka důležitá a nemusíme ji psát, například pokud načneme nový odstavec, je poměrně jasné, že předchozí tím končí.
Celá stránka by měla obsahovat několik základních věcí, jako určení jazyka stránek, hlavičku s formátovacími informacemi a vlastní obsah, nicméně ty tě v rámci zadávání do našeho systému nemusí příliš trápit, ty jsou tady doplňovány automaticky, takže se můžeš soustředit pouze na obsah a formu svých sdělení.
Tučně, tence, šišatě
Základní rozlišení a zvýraznění textu - tučné písmo, kurzíva a podtržení je velice jednoduché, stačí jednopísmenná značka.
- B - Bold - tučně
- I - Italic - kurzíva
- U - Underline - podtrženo
Tohle je <b>tučně</b>, tohle <i>kurzívou</i> a tohle <b><i>tučnou kurzívou</i></b>.
<u>Tohle je zase podtrženo.</u>
Tohle je tučně, tohle kurzívou a tohle tučnou kurzívou.
Tohle je zase podtrženo.
Na předchozím příkladu je vidět i to, jak se účinek jednotlivých značek může překrývat a vzájemně "sčítat".
Členění textu
Když tedy prohlížeč ignoruje nový řádek, jak tedy odřádkovat? Jak udělat větší mezeru. K tomu slouží značka zlomu řádku a odstavce.
- BR - BReak line - Ukončí aktuální řádek
- P - Paragraph - vytvoří nový odstavec - to může být spojeno s odsazením prvního řádku, zvětšenou mezerou mezi odstavci, vše záleží na základním nastavení stulů (k těm se dostaneme později). Pro začátek upozorním jen na to, že v našem systému jsou odstavce zarovnávány do bloku (z obou stran).
Seznamy
Někdy se hodí vytvořit přehledný seznam. Zde máme dvě možnosti - vytvořit nečíslovaný (bodový) nebo číslovaný seznam. Každá položka seznamu je uvedena značkou LI. Seznamy lze jedoduše vnořovat do sebe.
- UL - Unordered List - netříděný seznam - pomocí parametru type jde určit vzhled odrážky: možné hodnoty jsou disc, circle, square
- OL - Ordered List - tříděný seznam - pomocí parametru type jde určit typ číslování:
- TYPE="A" - velká písmena (A, B, C...)
- TYPE="a" - malá písmena (a, b, c...)
- TYPE="I" - latinské číslice - velké (I, II, III...)
- TYPE="i" - latinské číslice - malé (i, ii, iii...)
- TYPE="1" - číslice (1, 2, 3...)
Parametrem start pak určíme od kterého čísla začít.
- LI - List Item - položka seznamu
<ul>
<li>Jablka
<ul>
<li>Golden
<li>Granny Smith
</ul>
<li>Hrušky
<li>Banány
</ul>
<ol>
<li>Jablka
<ol type="a" start="4">
<li>Golden
<li>Granny Smith
</ol>
<li>Hrušky
<li>Banány
</ol>
- Jablka
- Golden
- Granny Smith
- Hrušky
- Banány
Odkazy
Příklad hypertextového odkazu jsme si už dali, teď uvedu i výsledek příkladu,
<a href="http://trasa20.takpraha.cz/novinky.php">Jdi do novinek</a>