HTML kód

Když už víme, z čeho se webová stránka skládá, můžeme se pustit do psaní našeho prvního kódu. Jak jsme si řekli, HTML stránka definuje obsah. A aby ji prohlížeč mohl správně pochopit, máme zde část stránky, která je povinná, a části, které jsou vhodné, aby obsahovala.

Co by měla html stránka obsahovat?

Jak vypadá skutečná HTML stránka? Níže jsme připravili kompletní příklad kódu HTML stránky.

<!DOCTYPE html>
<html lang="cs-CZ">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kurz HTML & CSS.">
    <title>GeekGirlsCarrots Ostrava - HTML & CSS pro začátečníky</title>
    <link rel="stylesheet" href="/styles/website.css">
  </head>
  <body>
    <header>
      <h1>Kurz HTML a CSS pro začátečníky</h1>
    </header>
    <main>
      <h2>Co mi kurz přinese?</h2>
      <p>Přemýšleli jste někdy, jak se vytvářejí webové stránky?</p>
      <p>Plánujete kariéru jako programátor / vývojář front-end a potřebujete odbornou pomoc začít?</p>
      <p>Nebo snad spustit svůj vlastní blog a chcete provést opravy v šabloně, ale nevíte jak na to?</p>
      <p>To jsou některé z důvodů, proč navštívit kurz Geek Girls Carrots Ostrava.</p>
    </main>
    <footer>
      Copyright &copy; Geek Girls Carrots Ostrava 2016
    </footer>
  </body>
</html>

Platný HTML soubor obsahuje několik podstatných prvků:

  • Deklarace DOCTYPE:

    <!DOCTYPE html>

    Deklarace DOCTYPE nám říká o verzi a typu HTML dokumentu. Nezáleží na tom z obsahového hlediska, ale je to velmi důležité pro to, jak prohlížeč interpretuje kód stránky.

V současné době se používá již tato nová deklarace. Kdybyste se však chtěli podívat na starší deklarace, můžete zde: https://www.w3.org/QA/2002/04/valid-dtd-list.html

  • Celý kód stránky po deklaraci DOCTYPE musí být povině zavřený v tagu <html>:
<html>

...

</html>

V příkladu má náš html tag atribut lang. Toto určuje, v jakém jazyce je dokument napsaný po obsahové stránce.

  • Uvnitř tagu <html> je obsah rozdělen na dvě sekce: <head>, čili hlavičku dokumentu, do které můžeme umísti metatagy, a <body>, ve které je veškerý obsah dokumentu.
<html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>

Co jsou to metatagy? Jedná se o všechny relevantní informace pro stránku, které však nejsou v prohlížeči viditelné.

  • Tag <title> už dle názvu napovídá, že se jedná o titulek stránky, který je většinou viditelný na záložce prohlížeče, případně se zobrazuje ve vyhledávačích.
<title>Moje první stránka</title>
  • Značky <meta> slouží pro uchovávání různých metadat o stránce, jako je použité kódování souboru, popis stránky a podobně.
<meta charset="utf-8">

Kódování stránky je důležité pro to, aby prohlížeč věděl, jakým způsobem interpretovat jednotlivá písmena a symboly. Při chybně nastaveném kódování by mohlo dojít ke špatnému zobrazení českých znaků.

<meta name="viewport" content="width=device-width, initial-scale=1">

Tento kód řekne stránce, jakým způsobem se má zobrazovat na menších obrazovkách, jako jsou mobilní telefony a tablety. Tento konkrétní kód říká, aby se stránka vždy přizpůsobila velikosti okna prohlížeče. Toto téma je však poněkud rozsáhlejší a souvisí i se správnou volbou designu stránek, a správným kódováním. Podíváme se na něj v pozdější kapitole.

  • Element <link> slouží k odkazování na externí soubory s kaskádovým stylem, tj. soubory s příponou .css.
<link rel="stylesheet" href="/styles/website.css">
  • Element <script> pak odkazuje na externí soubory s JavaScriptem.
<script src="/scripts/main.js"></script>

results matching ""

    No results matching ""