zpět na začátek

2. Struktura HTML kódu

Cíle kapitoly

Po nastudování této kapitoly budeme znát význam pojmu tag, dokážeme rozlišit párové tagy od nepárových, identifikovat HTML kód, a dovedeme popsat jednotlivé části kostry HTML kódu.

Úvod

HTML kód – jakožto značkovací jazyk - je tvořen množinou značek (tzv. tagů) a obsahem webu, který chceme zobrazit. Tag je příkaz, s jehož pomocí můžeme určit, jak bude náš obsah vypadat, vložit obrázek nebo odkaz. Návštěvník našich stránek tagy nevidí, vidí pouze zformátovaný obsah. Tagů existuje velké množství, my budeme pracovat pouze s těmi nejdůležitějšími.

Jak poznáme tag

Jednotlivé tagy poznáme podle toho, že jsou uzavřeny mezi špičatými závorkami < a >. Obsah závorek je pevně daný a tvoří ho jeden z velkého množství anglicky psaných příkazů nebo jejich zkratek.

Např. <h1> je tag, pro nadpis prvního řádu. Vznikl z anglické zkratky pro Heading (nadpis) a používá se pro nejdůležitější nadpis na stránce.

HTML kód může vypadat například takto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta charset="windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Moje webová stránka</title>
  </head>
  <body>

    náš text
    
  </body>
</html>
Vysvětlení
  • !DOCTYPE – typ dokumentu (HTML), podle určitého standartu (W3C)

    aby webový prohlížeč věděl, že se jedná o HTML stránku

  • <html> a </html> - začátek a konec naší webové stránky
  • <head> a </head> - základní informace o webu

    pro nás je zde zásadní hlavně <title> a </title> - mezi tyto tagy se píše název naší stránky

  • <body> a </body>

    tělo celé stránky, zde budeme vkládat obsah, který se zobrazí v prohlížeči

*v řádku <meta> doporučuji přepsat charset z windows-1250 na UTF-8. Zamezíme tak případným problémům se zobrazováním českých znaků.

<meta charset="UTF-8">

Druhy tagů

párové

Jedná se o příkazy, které mají svou počáteční a koncovou značku. Všechno, co je mezi těmito značkami, je jimi ovlivněno. Koncová značka má, na rozdíl od počáteční, před názvem lomítko /.

  • <title> - počáteční značka pro titulek stránky
  • </title> - koncová značka pro titulek stránky

nepárové

Např. <meta> nebo <img> (tag pro vkládání obrázku)

Veškerý obsah je definován v počátečním tagu, pomocí atributů, o kterých si řekněme později.

* tagy do sebe můžeme vnořovat, nesmíme je však mezi sebou střídat

  • správně: <body> <h1> nadpis </h1> </body>
  • špatně: <body> <h1> nadpis </body> </h1>

* Je dobré vytvořit si vlastní styl psaní kódu, aby se nám v něm dobře orientovalo - níže uvedené kódy mají stejný význam a zobrazí se stejně (prohlížeč nebere v potaz odřádkování nebo mezery mezi jednotlivými tagy), rozdíl je pouze v přehlednosti kódu.

<body>
<h2>Podnadpis 1</h2><p>odstavec textu</p><p>odstavec textu</p>
<h2>Podnadpis 2</h2><p>odstavec textu</p>
</body>
náhled 
<body>
  <h2>Podnadpis 1</h2>
    <p>odstavec textu</p>
    <p>odstavec textu</p>
    
  <h2>Podnadpis 2</h2>
    <p>odstavec textu</p>
</body>
náhled

Shrnutí

Naučili jsme se rozpoznat a popsat strukturu HTML kódu, rozeznat tag a určit, zda se jedná o tag párový nebo nepárový. Víme, že je dobré vytvořit si vlastní styl psaní kódu pro přehlednost.

Poznali jsme a vysvětlili jsme si význam těchto párových tagů: <html>, <head>, <title>, <body>