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 href
atributu.
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
),
width
a height
jsou 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.