3. HTML

Základy jazyka HTML, struktura dokumentu, běžné značky a dobré praktiky.

HTML

neboli HyperText Markup Language
značkovácí jazyk
definuje strukturu webových stránek

Historie HTML

HTML 1.0 - první verze z roku 1993
HTML 2.0 - standardizace v roce 1995
HTML 3.2 - podpora pro tabulky a applet
HTML 4.01 - poslední verze HTML 4.x
XHTML 1.0 - přechod na XML
HTML5 - současný standard

Soubory v HTML

HTML

HTML soubory mají příponu .html
HTML soubor je textový soubor s kódem HTML
Může být otevřen v jakémkoli textovém editoru

Názvy HTML souborů

index.html - standardně nazýváme hlavní stránku webu
dále např.: about.html, contact.html
servery automaticky hledají index.html jako výchozí stránku
každý soubor *.html je samostatná webová stránka

Párový tag

Skládá se z otevíracího a zavíracího tagu
Např. <p> a </p>
Text mezi tagy je obsah elementu

Nepárový tag

Nemá zavírací tag
Např. <br>, <img>

Párový vs. nepárový

            <p>Toto je paragraf</p>
<br>
<img src="obrazek.jpg" alt="Obrázek">

Struktura v HTML

HTML dokument má hierarchickou strukturu
Skládá se z elementů (tagů)
Každá stránka by měla mít: <!DOCTYPE html>, <html>, <head>, <body>

Doctype

Definuje verzi HTML dokumentu
Umisťuje se na začátek HTML souboru
Např. <!DOCTYPE html> pro HTML5

            <!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>
</body>
</html>

HTML

definuje strukturu webových stránek

            <!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>
</body>
</html>

Head

Obsahuje metadata o dokumentu
Definuje název stránky
Může obsahovat odkazy na styly a skripty

            <!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>
</body>
</html>

Title

Definuje název stránky
uvádí se v head

            <!DOCTYPE html>
<html lang="cs">
<head>
    <title>Moje stránka</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>Moje stránka</h1>
</body>
</html>

Body

Obsahuje viditelnou část webové stránky

            <!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HTML šablony

Struktura lze jednoduše vytvořit pomocí šablon
Např. pomocí HTML5 Boilerplate - zadáme html:5 nebo ! a vytvoříme základní strukturu HTML dokumentu

Vyzkoušejte

Vytvořte si vlastní HTML dokument s názvem index.html
Použijte šablonu z HTML5 Boilerplate

            <!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Náš první web</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Element

Každý element má svůj začátek a konec
Skládá se ze značky a jejího obsahu
Pouze párové tagy

        <h1>Toto je nadpis</h1>

Paragraf

označujeme jím blok textu
značka p

            <p>Toto je odstavec.</p>

Nadpisy

neboli headings
h1 až h6

Textové značky

<strong> (důraz), <em> (zdůraznění)
<small>, <mark>, <code>, <pre>

<p>Toto je <strong>důležité</strong> a <em>zdůrazněné</em> slovo.</p>
<pre><code>console.log('Ahoj');</code></pre>

Seznamy

Neuspořádaný: <ul> + <li>
Uspořádaný: <ol> + <li>
Popisný: <dl>, <dt>, <dd>

<ul>
  <li>jedna</li>
  <li>dva</li>
</ul>
<ol>
  <li>první</li>
  <li>druhý</li>
</ol>

Odkazy

<a href="..."> — absolutní vs. relativní cesta
Kotvy na stránce: href="#sekce", atribut id
Atributy: target, rel, download

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Externí odkaz</a>
<a href="kontakt.html">Relativní odkaz</a>
<a href="#top">Zpět nahoru</a>

Obrázky

<img src="..." alt="popis"> — atribut alt pro přístupnost
Atributy: width, height, loading="lazy"
Obrázek jako odkaz: obalte do <a>

<img src="/images/logo.png" alt="Logo školy" loading="lazy" width="200">

Atributy a třídy

Univerzální: id, class, style, title
Datové: data-* (např. data-role="card")
Více tříd oddělte mezerou: class="btn primary"

<p id="uvod" class="lead highlight" title="Úvodní odstavec">...</p>

Inline vs. Block

Block: zabírá celou šířku řádku (např. <div>, <h1>, <p>)
Inline: jen potřebnou šířku (např. <a>, <span>, <strong>)
Display lze měnit CSS

Sémantické HTML5

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Pomáhá přístupnosti i SEO

<main>
  <article>
    <header><h1>Nadpis článku</h1></header>
    <p>Obsah...</p>
  </article>
</main>

Formuláře (základy)

<form action="/odeslat" method="post">
<label for> + <input id> = přístupnost
Typy: text, email, password, checkbox, radio, date, ...

<form action="/odeslat" method="post">
  <label for="mail">E-mail</label>
  <input type="email" id="mail" name="email" required>
  <button type="submit">Odeslat</button>
</form>

Tabulky (základy)

<table> → <thead>, <tbody>, <tr>, <th>, <td>
Popisek tabulky: <caption>

<table>
  <caption>Ceník</caption>
  <thead><tr><th>Položka</th><th>Cena</th></tr></thead>
  <tbody><tr><td>Káva</td><td>45 Kč</td></tr></tbody>
</table>

Souborové cesty

Relativní: img/logo.png (vůči aktuálnímu souboru)
Absolutní na doméně: /img/logo.png
URL: https://example.com/img/logo.png

<img src="./images/foto.jpg" alt="Foto">
<a href="../kontakt.html">Kontakt</a>

Propojení CSS a JS

<!-- v <head> -->
<link rel="stylesheet" href="styles.css">
<!-- před koncem <body> -->
<script src="app.js" defer></script>

Atribut defer zajistí spuštění po načtení HTML.

Favicon & metadata

<link rel="icon" href="/favicon.ico">
<meta name="description" content="Krátký popis stránky">

Přístupnost (A11y) – minimum

Smysluplné <alt> u obrázků
Správné nadpisy (1× h1, postupná hierarchie)
Popisky <label> u formulářů
Sémantické značky a ARIA jen když je potřeba

Další drobnosti

Komentáře: 
HTML entity: < > &  
Bílé znaky se obvykle zkracují (CSS může změnit)

Validace a kvalita

Používejte Emmet (např. html:5, ul>li*3)
Validátor: W3C Markup Validation Service
DevTools v prohlížeči pro inspekci DOM

Cvičení

Vytvořte stránku s hlavičkou, navigací, hlavním obsahem a patičkou.
Vložte obrázek s vhodným alt a dva odkazy (externí + relativní).
Přidejte formulář s jedním textovým polem a tlačítkem.
Zvalidujte stránku ve W3C validatoru.

Shrnutí

HTML = kostra webu, sémantika a struktura
Důležité: správná hierarchie, alt, label, smysluplné značky
Další kroky: CSS pro vzhled, JS pro interakce

3. HTML

HTML

Historie HTML

Soubory v HTML

HTML

Názvy HTML souborů

Tag

Párový tag

Nepárový tag

Párový vs. nepárový

Struktura v HTML

Doctype

HTML

Head

Title

Meta

Body

HTML šablony

Vyzkoušejte

Element

Paragraf

Nadpisy

Textové značky

Seznamy

Odkazy

Obrázky

Atributy a třídy

Inline vs. Block

Sémantické HTML5

Formuláře (základy)

Tabulky (základy)

Souborové cesty

Propojení CSS a JS

Favicon & metadata

Přístupnost (A11y) – minimum

Další drobnosti

Validace a kvalita

Cvičení

Shrnutí