Značkovací jazyk HTML | Web
Tvorba webu – HTML, CSS, JS
Webové stránky stručně a prakticky
HTML

Značkovací jazyk (HTML)

HTML (Hyper Text Markup Language) je zkratka pro hypertextový značkovací jazyk, který se používá k vytváření obsahu webové stránky. Obsah webové stránky mohou tvořit texty, obrázky, tabulky, multimédia a další prvky.

Webové stránky jsou mezi sebou vzájemně propojeny pomocí hypertextových odkazů.

Každá informace má přesně definovaný význam, který vyjadřuje konkrétní prvek (element). Prvek definuje počáteční a koncová značka (tag). Počáteční značka může obsahovat atributy, které jsou tvořený příslušným názvem a hodnotou.

Zdrojový kód
Hypertextový značkovací jazyk

HTML šablona

<!doctype html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title>Titulek stránky | Název celého webu</title>
    </head>
    <body>
        <h1>Hlavní nadpis</h1>
        <p>Text odstavce</p>
    </body>
</html>

Poznámky:

  • dokument typu HTML definuje kořenový tzv. root element <html>, který je rozdělen na hlavu <head> a tělo <body>
  • metadata je možné si představit jako neurony mozku – předávají důležité informace, ale nejsou vidět

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- SEO -->
    <title>Struktura webové stránky (titulek stránky) | WEB (název celého webu)</title>
    <meta name="description" content="Základní HTML šablona webové stránky">
    <meta name="keywords" content="struktura,HTML,element,atribut,web,stránka,šablona">
    <meta name="author" content="Centrum informačních technologií VeV-VA Vyškov">

    <!-- Future: Favicon https://realfavicongenerator.net -->
    <link rel="shortcut icon" href="favicon.ico">
  </head>
  <body>
    <!-- Note: Osamostatnění hlavičky urychlí její načtení -->
    <header>
      <a href="index.html" title="Úvod"><img src="assets/web.min.png" width="70" height="70" alt="Webové stránky"></a>
      <p>Identita (webových stránek, osoby, podnikatele, společnosti)</p>
    </header>

    <main>
      <h1>Hlavní nadpis stránky</h1>

      <section>
        <h2>Sekce A</h2>

        <article>
          <h3>Článek A.1</h3>
          <p>Text článku A.1</p>
        </article>

        <article>
          <h3>Článek A.2</h3>
          <p>Text článku A.2</p>
        </article>
      </section>

      <section>
        <h2>Sekce B</h2>

        <article>
          <h3>Článek B.1</h3>
          <p>Text článku B.1</p>
        </article>

        <article>
          <h3>Článek B.2</h3>
          <p>Text článku B.2</p>
        </article>
      </section>
    </main>

    <nav>
      <ul>
        <li><a href="index.html">Úvod</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>

    <aside>
      <h2>Související obsah</h2>

      <h3>Aktuality</h3>
      <p>Text</p>

      <h3>Komentáře</h3>
      <p>Text</p>

      <h3>Kategorie</h3>
      <p>Text</p>

      <h3>Archiv</h3>
      <p>Text</p>
    </aside>

    <footer>&copy; Copyright</footer>

  </body>
</html>

Poznámky:

  • metadata je možné si představit jako neurony mozku – předávají důležité informace, ale nejsou vidět
  • u <body>, <header>, <main>, <nav>, <aside> a <footer> není nutné uváděte role atributy

HTML element

Základní stavební kámen webu

Jazyk HTML je tvořen z elementů (prvků), pomocí kterých je možné vyjádřit jakým způsobem se má obsah prvku uživateli prezentovat. Každý prvek má svoji otevírací značku, prezentovaný obsah a obvykle uzavírací značku.

Elementy obvykle obsahují atributy (id, class, atd.), které mohou doplňovat další informace. Ve verzi HTML5 se dají využívat také vlastní atributy, které musí být zapsány s předponou data-.

Základní HTML prvky

  • Dokument
    • html
    • head
    • title
    • meta *
    • link *
    • style
    • script
    • noscript
    • body
  • Strukturální prvky
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6
    • header
    • nav
    • section
    • article
    • aside
    • footer
    • main
  • Blokové prvky
    • div
    • p
    • address
    • pre
    • br *
    • hr *
    • blockquote
    • ol
    • ul
    • li
    • dl
    • dt
    • dd
    • figure
    • figcaption
  • Textové (řádkové) prvky
    • span
    • a
    • em
    • strong
    • abbr
    • q
    • cite
    • sub
    • sup
    • ins
    • del
    • kbd
    • code
    • small
    • bdo
    • s
    • var
    • dfn
    • samp
    • mark
    • ruby
    • rp
    • bdi
    • wbr *
    • time
    • rt
  • Tabulkové prvky
    • table
    • caption
    • colgroup
    • col *
    • thead
    • tbody
    • tfoot
    • tr
    • th
    • td
  • Formulářové prvky
    • form
    • fieldset
    • legend
    • label
    • input *
    • select
    • optgroup
    • option
    • textarea
    • button
    • progress
    • output
    • meter
    • datalist
  • Interaktivní prvky
    • details
    • summary
    • menu
    • command
    • menuitem
  • Vložený obsah
    • img *
    • iframe
    • map
    • area *
    • object
    • param *
    • embed *
    • source *
    • track *
    • picture
    • audio
    • video
    • canvas

* Prázdné prvky nesmějí obsahovat žádný vnořený obsah tj. jiný prvek nebo textový obsah (není u nich např. možné použít CSS pseudoprvky :before a :after).

Souhrn

  1. Víte, co znamená zkratka HTML.
  2. Orientujete se ve struktuře zdrojového kódu HTML jazyka.
  3. Rozumíte důležitosti metatagů.
  4. Umíte používat základní strukturální, sémantické a další prvky pro tvorbu webového obsahu.
  5. Pomocí odkazů dokážete propojit více webových stránek do logického celku.
  6. Znáte webový koncept Rodič/Dítě, který je používán k popisu HTML prvků, které uzavírají nebo jsou uzavřeny dalšími prvky.
CSS
Kaskádové styly