Základy HTML


Nadřazené: HTML a CSS

Navazující: HTML tabulky a seznamy

Pomocí HTML můžeme označovat význam a zobrazení textu, například takto:

Přehled běžných značek:

značka anglický pojem význam párová?
h1h6 headline 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

Některé značky udávají význam textu, např. <strong> a <em>, zatímco jiné udávají pouze způsob zobrazení, např. <b> a <i>. Typické zobrazení <strong> a <em> je tučné písmo a kurzíva, 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>:

Značky h1h6, 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í:

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:



Vysvětlení mi pomohlo   Vysvětlení mi nepomohlo

Rozhodovačka

Rychlé procvičování výběrem ze dvou možností.


Základy HTML   


Pexeso

Hledání dvojic, které k sobě patří.


Základy HTML  Nový obsah   


Přesouvání

Přesouvání kartiček na správné místo. Jednoduché ovládání, zajímavé a neotřelé úlohy.


Základy HTML   


NAPIŠTE NÁM

Nevíte si rady?

Nejprve se prosím podívejte na časté dotazy:

Časté dotazy Návody pro rodiče Návody pro učitele

Čeho se zpráva týká?

Vzkaz Obsah Ovládání Přihlášení Licence