Základy tvorby HTML stránek

Úvod do HTML

Co je HTML

HTML (HyperText Markup Language) je značkovací jazyk používaný pro strukturování obsahu webových stránek.

HTML: - není programovací jazyk - popisuje strukturu dokumentu - funguje na principu značek (tagů)

Jak HTML funguje

  • HTML soubor má příponu .html

  • Otevírá se v webovém prohlížeči

  • Prohlížeč interpretuje HTML a vykreslí stránku

Základní nástroje

  • libovolný textový editor (VS Code, Vim, Nano…)

  • webový prohlížeč (Firefox, Chrome)

Struktura HTML dokumentu

Základní kostra HTML

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>Moje první stránka</title>
</head>
<body>
    Ahoj světe!
</body>
</html>

Vysvětlení jednotlivých částí

  • <!DOCTYPE html> – určuje verzi HTML

  • <html> – kořenový element

  • <head> – metadata (není vidět)

  • <body> – viditelný obsah stránky

Praktický úkol

Vytvoř HTML soubor: - s vlastním názvem stránky - s textem v <body>

HTML značky a atributy

Co je HTML značka

  • většina značek má otevírací a uzavírací tvar

<p>Toto je odstavec</p>

Atributy

Atributy rozšiřují chování značek.

<img src="obrazek.jpg" alt="Popis obrázku">

Párové vs nepárové značky

  • párové: <p>, <div>, <a>

  • nepárové: <img>, <br>, <hr>

Text a základní obsah

Nadpisy

HTML má 6 úrovní nadpisů.

<h1>Hlavní nadpis</h1>
<h2>Podnadpis</h2>
<h3>Menší nadpis</h3>

Odstavce a zalomení

<p>Toto je odstavec.</p>
<p>Další odstavec.</p>
<br>

Zvýraznění textu

<strong>Tučný text</strong>
<em>Kurzíva</em>

Praktický úkol

Vytvoř stránku: - s nadpisem - 2 odstavci - zvýrazněným slovem

Odkazy a obrázky

Odkazy

<a href="https://example.com">Odkaz na web</a>

  • absolutní URL

  • relativní URL

Obrázky

<img src="foto.jpg" alt="Popis obrázku">

Kombinace odkazu a obrázku

<a href="https://example.com">
    <img src="logo.png" alt="Logo">
</a>

Praktický úkol

  • vlož obrázek

  • vytvoř odkaz na jinou stránku

Seznamy

Nečíslovaný seznam

<ul>
    <li>Položka 1</li>
    <li>Položka 2</li>
</ul>

Číslovaný seznam

<ol>
    <li>Krok 1</li>
    <li>Krok 2</li>
</ol>

Praktický úkol

Vytvoř seznam:

  • oblíbených technologií

  • nebo kroků nějakého postupu

Tabulky

<table>
    <tr>
        <th>Jméno</th>
        <th>Věk</th>
    </tr>
    <tr>
        <td>Anna</td>
        <td>25</td>
    </tr>
</table>

Základní části tabulky

  • <table> – tabulka

  • <tr> – řádek

  • <th> – hlavička

  • <td> – buňka

Formuláře – úvod

Základ formuláře

<form>
    <label>Jméno:</label>
    <input type="text">
    <button>Odeslat</button>
</form>

Typy inputů

<input type="text">
<input type="password">
<input type="email">
<input type="checkbox">
<input type="radio">

Praktický úkol

Vytvoř formulář:

  • jméno

  • email

  • tlačítko odeslat

Strukturování stránky

Základní sémantické prvky

<header>Hlavička</header>
<nav>Navigace</nav>
<main>Obsah</main>
<footer>Patička</footer>

Proč používat sémantiku

  • lepší přístupnost

  • lepší SEO

  • čitelnější kód

Závěrečný projekt

Zadání

Vytvoř jednoduchou HTML stránku:

  • nadpis

  • text o sobě / projektu

  • obrázek

  • seznam

  • odkaz

  • jednoduchý formulář

Bonus

  • přidat tabulku

  • rozdělit stránku na sekce

Shrnutí

  • HTML definuje strukturu webu

  • Každý web začíná HTML

  • CSS řeší vzhled, JavaScript chování

Doporučené zdroje