Základní příklady HTML
V této kapitole si ukážeme některé základní příklady HTML.
Nebojte se, pokud používáme značky, o kterých jste se ještě nedozvěděli.
HTML dokumenty
Všechny dokumenty HTML musí začínat deklarací typu dokumentu: <!DOCTYPE html>.
Samotný HTML dokument začíná <html>a končí </html>.
Viditelná část dokumentu HTML je mezi <body>a </body>.
Příklad
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Deklarace <!DOCTYPE>
Deklarace <!DOCTYPE>představuje typ dokumentu a pomáhá prohlížečům správně zobrazovat webové stránky.
Musí se objevit pouze jednou, v horní části stránky (před značkami HTML).
V <!DOCTYPE>prohlášení se nerozlišují malá a velká písmena.
Deklarace <!DOCTYPE>pro HTML5 je:
<!DOCTYPE html>
HTML nadpisy
Nadpisy HTML jsou definovány pomocí <h1>značek to <h6>.
<h1>definuje nejdůležitější nadpis. <h6>definuje nejméně důležitý nadpis:
Příklad
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML odstavce
Odstavce HTML jsou definovány <p>značkou:
Příklad
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML odkazy
Odkazy HTML jsou definovány pomocí <a>značky:
Příklad
<a href="https://www.w3schools.com">This is a link</a>
Cíl odkazu je uveden v hrefatributu.
Atributy se používají k poskytování dalších informací o prvcích HTML.
Více o atributech se dozvíte v pozdější kapitole.
HTML obrázky
HTML obrázky jsou definovány pomocí <img>značky.
Zdrojový soubor ( src), alternativní text ( alt),
widtha heightjsou poskytovány jako atributy:
Příklad
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Jak zobrazit zdrojový kód HTML?
Už jste někdy viděli webovou stránku a přemýšleli jste: "Hej! Jak to udělali?"
Zobrazit zdrojový kód HTML:
Klikněte pravým tlačítkem na stránku HTML a vyberte „Zobrazit zdrojový kód“ (v Chrome) nebo „Zobrazit zdrojový kód“ (v Edge) nebo podobně v jiných prohlížečích. Otevře se okno obsahující zdrojový kód HTML stránky.
Kontrola prvku HTML:
Klikněte pravým tlačítkem na prvek (nebo prázdnou oblast) a zvolte "Prozkoumat" nebo "Zkontrolovat prvek", abyste viděli, z jakých prvků se skládají (uvidíte HTML i CSS). HTML nebo CSS můžete upravovat také za běhu na panelu Prvky nebo styly, který se otevře.