Počkat... nevíš, co je to HTML tag neboli značka? Přečti si nejprve předešlý článek!
Přehled základních tagů/značek
| Značka | Název | Popis |
|---|---|---|
<p>...</p> |
Paragraph (Odstavec) | Odstavec je základní párovou značkou v HTML. Uvnitř něj se nachází většina textu na stránce. |
<h1>...</h1> |
Header (Nadpis) | Další párovou značkou je nadpis. Nadpisy lze také stupňovat, používáme značky <h2>, <h3>, atd... (Čím menší číslo, tím větší nadpis.) |
<b>...</b> |
Bold (Tučně) | Tučné písmo. Používá se také <strong>. |
<i>...</i> |
Italic (Kurzíva) | Písmo kurzívou. Používá se také <em> (emphasized). |
<u>...</u> |
Underlined (Podtrženě) | Podtržené písmo. Zastaralé a nepoužívá se. |
<img src=""> |
Image (Obrázek) | Obrázek je nepárovým tagem, a obsahuje tak atributy. Nejdůležitějším je src, kterým označujeme cestu k souboru obrázku. |
<br> |
Line break (Zalomení řádku) | Tuto značku také není třeba složitě popisovat. Pokud je uvnitř odstavce, zalamuje řádek. Je-li mimo něj, vloží na stránku odsazení. |
<hr> |
Horizontal rule (Vodorovná čára) | Funkcí se podobá zalomení řádku, vkládá ale navíc čáru. Nejlépe pochopíš, když si to vyzkoušíš. Zastaralé. |
<a>...</a> |
Anchor (Odkaz) | Odkaz je párovou značkou s atributy. Základními jsou href a name. Více informací v článku o odkazech. |
Znovu připomínám, že ve starých normách (XHTML) je potřeba uzavírat i nepárové značky. Obrázek tak musí být <img src="" />, zalomení řádků <br /> atd... U těch párových se ale nic nemění! Zůstává <p>...</p> apod.
Pamatuj si, nic se neuč nazpaměť! Všechno se dá jednoduše najít. Praxe je na naučení nejlepší. Navíc, po chvíli používání si značky stejně začneš vybavovat z hlavy.
Jak používat atributy?
V případě párových značek píšeme atributy vždy pouze do otevíracího tagu. (U nepárových na výběr úplně není.)
Zapisujeme jako %název atributu%="%hodnota atributu%". Všimni si, že hodnota je vždy v uvozovkách, zatímco u názvu tomu tak není.
Většina elementů (element = nepárová značka, nebo obsah obklopený párovými značkami) může mít atribut id (ten je jedinečný, tj. dva elementy nesmí mít stejné id), class a style (obě používáme při „zkrášlování“ stránek, více zde).
Pro nás jsou ale teď důležité ty další. U obrázku jsou k mání následující atributy (uvádím ty nejpoužívanější):
src- Povinný atribut určující cestu k souboru. Pokud je obrázek ve stejné složce, zadáme jen jeho název (např.src="kocka.png"). Je-li v podsložce, zadáme i její název (např.src="podslozka/kocka.png).width- Délka obrázku v pixelech (např.width="500"). Nepovinné.height- Výška obrázku v pixelech (např.height="350"). Nepovinné.alt- Obsahuje alternativní popis obrázku, který se zobrazí třeba při špatném internetovém připojení, ale také se hodí zrakově postiženým. Zpočátku se zdá zbytečným, ale nenech se zmást. Používá se, pokud je obrázek zároveň odkazem (abychom se někam mohli dostat, i kdyby se obrázek nenačetl). Když je obrázek dekorativní, použijemealt="".
Pokud je obrázek uložen ve složce na stejné úrovni složky, ve které je naše webovka (tedy soubor HTML je např. ve složce www/webovka/soubor.html a obrázek v www/obrazky/kocka.png), musíš připsat do cesty „jdeme zpátky“. Vypadá to takhle: src="../obrazky/kocka.png".
A celá značka obrázku potom může vypadat takto: <img src="obrazky/kocka.png" width="32" height="100" alt="Kočka">.
Všechno dohromady!
Pomocí všech značek potom dohromady skládáme kód, který nám tvoří samotnou webovou stránku.
<body><h1>Vítej na mé stránce!</h1><p>Už zvládnu používat základní HTML značky!</p><hr><p>Umím psát<b>tučně</b>,<i>kurzívou</i>nebo<u>podtrženě</u>.</p><h2>Obrázek</h2><imgsrc="obrazky/kocka.png"alt="Kočka"></body>
Tuto stránku si buď můžeš zobrazit tady, nebo si ji stáhni.
Pozor! Všimni si, že když stránku zobrazíš na mém webu, uvidíš obrázek kočičky. To proto, že jsem ho vložil do složky obrazky/. Když si ale otevřeš stažený soubor, obrázek zprvu neuvidíš. Právě tady se využívá atribut alt! Pro zobrazení tvého oblíbeného obrázku kočky bys musel/a vytvořit složku a do ní jej poté dát. Zkus si to!
To ses toho naučil/a, co? Líbí se ti moje články? Doporuč je kamarádům!
Pokračuj tady.