Použití kostry HTML
Kostra je nosným rámem organismu.
Obvykle je vyrobena z něčeho tvrdého, aby chránila zranitelnější tělo.
Encyklopedie
Každý webový vývojář by měl mít HTML kostru.
Měl by ho mít v kapse a používat ho pro každou práci:
Příklad
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
Klikněte na tlačítko „Vyzkoušejte si to sami“ a uvidíte, jak to funguje!
Zkuste změnit text "Toto je nadpis" na "Toto je moje svatba".
Udělal jsi to?
Gratulujeme! Nyní víte, jak upravit HTML.
Vysvětlení kostry HTML
Musí být přítomen DOCTYPE. Informuje prohlížeč, že se jedná o HTML dokument:
<!DOCTYPE html>
Počáteční značka html a koncová značka html definují začátek a konec dokumentu HTML.
Jazykem je angličtina:
<html lang="en">
</html>
Značka meta charset definuje znakovou sadu (UTF-8):
Na stránce HTML chybí značky head. Značky hlavy nejsou v HTML potřeba.
V HTML je vše před značkou body považováno za část hlavy.
<meta charset="UTF-8">
Standard HTML vyžaduje správný název stránky:
<title>Page Title</title>
Díky metaznačce zobrazované oblasti bude stránka vypadat dobře na všech velikostech obrazovky (notebook, mobil):
<meta name="viewport" content="width=device-width,initial-scale=1">
Značka odkazu odkazuje na šablonu stylů:
<link rel="stylesheet" href="name">
Počáteční a koncová značka obklopuje budoucí styl CSS:
<style>
</style>
Značka skriptu odkazuje na skript:
<script src="name"></script>
Počáteční značka a koncová značka obklopují viditelné tělo dokumentu HTML:
<body>
</body>
Značky obrázků definují obrázky HTML:
<img src="img_la.jpg" alt="LA" style="width:100%">
Udělejte si zvyk „zabalit“ sekce HTML do prvků div.
Připravte se na to, že každé sekci pojmenujete třídu:
<div class="class name">
</div>
Značky nadpisů definují nadpisy HTML:
<h1>This is a Heading</h1>
Značky odstavce definují odstavce HTML:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>