Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

HTML

  • HyperText Markup Language je značkovací jazyk používaný pro vytváření struktury webových stránek.
  • Není to programovací jazyk, ale jazyk pro popis obsahu (text, obrázky, odkazy, formuláře…).
  • HTML definuje strukturu, zatímco vzhled řeší většinou CSS a chování JavaScript.
  • Aktuální standard je HTML5, který je spravován organizací World Wide Web Consortium (W3).
  • Je podobný XML, ale na rozdíl od XML má předem definovanou sadu tagů a prohlížeče jsou tolerantní k chybám v syntaxi.
  • Existují i tzv. self-closing tagy, tedy tagy co se samy uzavírají, nepotřebují žádný obsah a ani ukončující tag.

Základní struktura HTML dokumentu

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>Název stránky</title>
</head>
<body>
    <h1>Moje první stránka</h1>
    <p>Toto je odstavec textu.</p>
</body>
</html>
  • <!DOCTYPE html>: Deklarace typu dokumentu, která říká prohlížeči, že se jedná o HTML5.
  • <html>: Kořenový element, který obaluje celý obsah stránky.
  • <head>: Obsahuje metadata, jako je kódování, název stránky, odkazy na styly a skripty.
  • <title>: Určuje název stránky, který se zobrazuje v záložce prohlížeče.
  • <body>: Obsahuje viditelný obsah stránky, jako jsou nadpisy, odstavce, obrázky, odkazy a další prvky.
  • <h1>: Nadpis první úrovně, používá se pro hlavní nadpisy.
  • <p>: Odstavec textu, používá se pro běžný text.
  • Každý HTML element musí být správně uzavřen, například <p>...</p> - text v ... je obsah odstavce.

Základní HTML tagy

  • <a>: Odkaz, používá se pro vytváření hypertextových odkazů.
  • <img>: Obrázek, používá se pro vkládání obrázků do stránky. Tento tag je self-closing.
  • <div>: Blokový element, používá se pro seskupování a stylování obsahu.
  • <span>: Inline element, používá se pro stylování části textu.
  • <ul>, <ol>, <li>: Neuspořádaný a uspořádaný seznam, používají se pro vytváření seznamů položek.
  • <form>, <input>, <button>: Formulářové elementy, používají se pro vytváření interaktivních formulářů.

Atributy

  • HTML elementy mohou mít atributy, které poskytují další informace o elementu.
  • Atributy jsou ve formátu název="hodnota" a jsou umístěny uvnitř otevíracího tagu.
  • Jeden z nejdůležitějších atributů jsou class a id, které se používají pro identifikaci a stylování elementů pomocí CSS a JavaScriptu.
  • Například:
<a href="https://www.example.com">Odkaz</a>

Toto bude vypadat následovně:


  • V tomto příkladu je href(hypertext reference) atribut, který určuje cílovou URL odkazu.

  • Třeba u <img> tagu je důležitý atribut src, který určuje zdroj obrázku, a alt, který poskytuje alternativní text pro případ, že se obrázek nenačte.

<img src="https://picsum.photos/id/237/536/354" alt="Pes">
<img src="neexistuje" alt="Kočka">
  • V tomto příkladu první obrázek se načte správně, zatímco druhý obrázek se nenačte a místo něj se zobrazí alternativní text “Kočka”:
Pes Kočka

Komentáře

  • V HTML lze používat komentáře pro vysvětlení kódu nebo pro dočasné zakomentování části kódu. Komentáře se píší pomocí <!-- -->. Například:
<!-- Toto je komentář v HTML -->
<p>Toto je odstavec textu.</p>

Shrnutí

  • HTML je základní jazyk pro tvorbu webových stránek, který definuje strukturu a obsah.
  • Používá tagy pro označení různých částí obsahu, jako jsou nadpisy, odstavce, odkazy a obrázky.
  • Atributy poskytují další informace o elementech a umožňují jejich stylování a interaktivitu.
  • Komentáře v HTML pomáhají vysvětlit kód a mohou být použity pro dočasné zakomentování části kódu.

Reference