Základy HTML pro Začátečníky

Úvod - Webový Prohlížeč?

Webový prohlížeč je aplikace, která umožňuje uživatelům zobrazovat a interagovat s obsahem na internetu. Podobně jako QuickTime Player zobrazuje videa nebo Microsoft Word zobrazuje dokumenty a PDF, browser umí zobrazit soubory / dokumenty jejichž data jsou zapsána v "jazyce" HTML nebo prostém textu. Otevření webových stránek je prakticky pak jen stažení tohoto HTML dokumentu ze vzdáleného místa a jeho následné zobrazení v prohlížeči.

Co je HTML?

HTML (HyperText Markup Language) je formát, ve kterém definujeme strukturu webových stránek a dokumentů. Slouží k vytváření a organizaci obsahu na webové stránce.

HTML používá značky (tagy), které určují různé části stránky, jako jsou nadpisy, odstavce, odkazy, obrázky a další prvky.

Příklad Jednoduchého HTML Dokumentu

Následující příklad ukazuje základní strukturu HTML dokumentu:

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>Základy HTML</title>
</head>
<body>
    <h1>Vítejte na naší stránce!</h1>*
    <p>Toto je jednoduchý odstavec textu v HTML.</p>
    <a href="https://www.example.com">Navštivte Example.com</a>
</body>
</html>

Takto může například vypadat soubor / dokument, který váš prohlížeč zvládne otevřít / načíst a zobrazit.

Vysvětlení předchozího HTML Dokumentu

Každý HTML dokument má základní strukturu, která zahrnuje několik klíčových částí:

<!DOCTYPE html> – Deklarace typu dokumentu, která informuje prohlížeč o verzi HTML.
<html> – Kořenový element dokumentu.
<head> – Obsahuje metadata, jako jsou titulky, odkazy na styly a skripty.
<body> – Obsahuje viditelný obsah webové stránky, jako jsou texty, obrázky a odkazy. Například u zlaté hvěždičky v příkladu <h1>Vítejte na naší stránce!</h1> tento text by se zobrazil jako nadpis na stránce.

Základní HTML Tagy

Existuje mnoho HTML tagů, ale zde jsou některé z nejzákladnějších:

<h1> až <h6> – Nadpisy různých úrovní. <h1> je nejdůležitější, <h6> nejméně.
<p> – Odstavec textu.
<a> – Odkaz na jinou stránku nebo část stránky. Používá se atribut href k určení cíle odkazu.
<img> – Vkládání obrázků. Vyžaduje atributy src (zdroj obrázku) a alt (alternativní text).
<ul> a <li> – Neuspořádaný seznam a položky seznamu.
<div> – Blokový element používaný k seskupování dalších elementů pro účely stylování a skriptování.

Vyzkoušejte si HTML

Pomocí HTML tagů zkuste napsat nadpis "Ahoj světe"

HTML kód
Zobrazená webová stránka

Reference na Standardy

Pro hlubší pochopení HTML a jeho standardů doporučujeme navštívit oficiální dokumentaci:

Závěr

Základy HTML jsou nezbytné pro každého, kdo se chce věnovat webovému vývoji. Pochopení základní struktury a nejčastěji používaných tagů vám umožní efektivně vytvářet a spravovat webové stránky. S dalším učením můžete postupně rozšiřovat své znalosti o pokročilejší techniky a technologie, které HTML nabízí.