HTML: základy
Pexeso
Webdesign a typografie
Pomocí HTML můžeme označovat význam a zobrazení textu, například takto:
Toto je <b>tučný</b> text. A toto <i>kurzíva</i>.Přehled běžných značek:
| značka | anglický pojem | význam | párová? |
|---|---|---|---|
h1–h6 |
heading | nadpis 1. až 6. úrovně | ano |
p |
paragraph | odstavec | ano |
pre |
preformatted | předformátovaný text | ano |
b |
bold | tučné písmo | ano |
i |
italics | kurzíva (skloněné písmo) | ano |
strong |
strong | důležitý text | ano |
em |
emphasis | zdůrazněný text | ano |
code |
code | kód (neproporcionální písmo) | ano |
a |
anchor | odkaz | ano |
img |
image | obrázek | ne |
br |
break | zalomení řádku | ne |
hr |
horizontal rule | vodorovná čára | ne |
Typické zobrazení <strong> a
<em> je tučné písmo a kurzíva (tedy stejně jako
<b> a <i>), to však lze upravit
pomocí kaskádových stylů (CSS).
Párové značky lze zanořovat, například tučnou
kurzívu zapíšeme
<b><i>takto</i></b>. Značky nelze
„křížit“, tj. před uzavřením značky musíme vždy nejprve uzavřít všechny
zanořené značky. Nepárové značky nemají žádný obsah ani
ukončovací značku, např. <br>.
Mezery a nové řádky
Libovolné množství mezer a nových řádků v HTML kódu se zobrazí jako
jedna mezera. Pokud potřebujeme nový řádek, použijeme značku
<br>. Pokud chceme zachovat přesné počty mezer a nových řádků, použijeme značku <pre>:
<pre>
10x + 2y = 16
5x + y = 8
</pre>Značky h1–h6, p,
pre a hr jsou blokové, což
znamená, že se před nimi i za nimi zalomí řádek. Například každý
odstavec začne na novém řádku, i pokud ve zdrojovém kódu nový řádek
není:
<p>První odstavec.</p> <p>Druhý odstavec.</p>Atributy
Některé značky mají atributy, které ovlivňují jejich zobrazení či chování. Například u odkazů potřebujeme určit jejich adresu (atribut href z anglického hypertext reference) a volitelně, zda se má odkaz otevřít v novém okně (atribut target). U obrázků určujeme cestu k souboru (src), alternativní text (alt), který se vypíše, pokud obrázek nemůže být zobrazen, a volitelně velikost v pixelech (width, height). Atributy zapisujeme do úvodní značky a hodnoty obalujeme do uvozovek:
<a href="https://www.umimeto.org/">Umíme to</a>
<img src="celer.png" alt="celer" width="400">Materiál k tisku
Kromě níže uvedených interaktivních cvičení je k dispozici také pomůcka pro aktivity – kartičky určené k vytištění, rozstříhání a párování (náměty k využití nabízí stránka Aktivity s kartičkami):
HTML: základy (lehké)