27/06/2023
Každý den trávíme hodiny procházením webových stránek na našich iPhonech, ale málokdo se zamýšlí nad tím, co se skrývá pod povrchem. Za každou stránkou, kterou vidíte – od jednoduchého textu po složité galerie obrázků – stojí jazyk zvaný HyperText Markup Language, zkráceně HTML. Je to základní stavební kámen, který dává webovému obsahu jeho struktura a umožňuje webovým prohlížečům, jako je Safari na vašem iPhonu, smysluplně interpretovat a zobrazit informace. Pochopení HTML není jen pro vývojáře; je to klíč k hlubšímu porozumění digitálnímu světu, ve kterém žijeme. V tomto článku se ponoříme do základů HTML, vysvětlíme si jeho klíčové elementy a ukážeme, jak se používají k vytvoření obsahu, který denně konzumujeme.
HTML je v podstatě jazyk pro popis struktury dokumentů. Jeho původním záměrem bylo poskytnout webovým prohlížečům nezbytnou strukturu pro analýzu obsahu do smysluplného formátu. Tato struktura může definovat celé dokumenty, doplněné nadpisy, textem, seznamy, datovými tabulkami, obrázky a mnoha dalšími. Jak se web rozvíjel, začal HTML zahrnovat také aspekty stylu a multimédií. Nicméně, nejnovější revize standardu HTML se vracejí k „starým dobrým časům“ oddělování struktury webového obsahu (HTML) od jeho prezentace (pomocí technologie zvané Cascading Style Sheets, neboli CSS). To znamená, že HTML se soustředí na to, co je na stránce, zatímco CSS určuje, jak to vypadá. Pro správné fungování a zobrazení na zařízeních, jako je iPhone, je klíčové, aby bylo vaše HTML dobře strukturované a validní.
Co je HTML a proč je důležité?
HTML je páteří každé webové stránky. Představte si knihu bez kapitol, odstavců nebo nadpisů – byla by to jen změť textu. HTML funguje podobně; dává obsahu smysl a hierarchii. Jeho nejdůležitější funkcí je schopnost vytvářet hypertextové odkazy. Tyto odkazy umožňují propojit text s jiným obsahem na webu, ať už jde o jinou stránku na stejném webu, nebo zcela jiný web. Díky tomu se můžeme snadno pohybovat mezi informacemi, což je základní princip fungování internetu. Bez HTML by web nebyl nic víc než hromada nepřiřazených souborů. Pro uživatele iPhonu to znamená, že dobře napsané HTML zajišťuje rychlé načítání, správné zobrazení a snadnou interakci s obsahem v prohlížeči Safari. Pokud je HTML špatně strukturované, může to vést k pomalému načítání, rozbitému rozložení nebo dokonce nedostupnosti obsahu pro uživatele s asistenčními technologiemi.
Základní stavební kameny HTML dokumentu
Každý HTML dokument má základní strukturu, která je nezbytná pro jeho správné fungování. Tyto bloky tvoří kostru, do které se vkládá veškerý viditelný obsah. Zde jsou ty nejdůležitější:
<!DOCTYPE html>: Toto prohlášení není HTML tag, ale instrukce pro webový prohlížeč, která mu říká, jakou specifikaci HTML má použít pro vykreslení stránky. Pro moderní webové stránky byste měli vždy používat<!DOCTYPE html>, který odpovídá standardu HTML5.<html>...</html>: Toto je kořenový element celého HTML dokumentu. Vše, co se týká vaší webové stránky, je obsaženo uvnitř těchto tagů.<head>...</head>: Blok<head>definuje metadata o webové stránce. Obsahuje informace, které nejsou přímo viditelné na stránce, ale jsou důležité pro prohlížeče a vyhledávače. Zde se nachází například název stránky, popis, klíčová slova, odkazy na externí CSS soubory a skripty JavaScriptu.<title>...</title>: Tento element se nachází uvnitř bloku<head>a definuje název webové stránky, který se zobrazuje v záložce prohlížeče nebo v panelu okna. Je to také to, co vidíte, když si stránku uložíte do záložek.<body>...</body>: Blok<body>definuje veškerý viditelný obsah dokumentu. Vše, co uživatel uvidí na webové stránce – text, obrázky, videa, tabulky – je umístěno uvnitř těchto tagů.
Příklad základní struktury:
<!DOCTYPE html><html><head><title>Můj první web</title></head><body><p>Vítejte na mé webové stránce!</p></body></html>
Strukturální elementy: Od nadpisů po seznamy
Jakmile máte základní kostru, můžete začít plnit <body> obsahem pomocí různých HTML elementů:
- Nadpisy (
<h1>až<h6>): Tyto tagy definují nadpisy různých úrovní.<h1>je největší a nejdůležitější nadpis (obvykle pro hlavní název stránky nebo sekce), zatímco<h6>je nejmenší. Používání správné hierarchie nadpisů je klíčové pro sémantiku dokumentu a pro přístupnost. - Odstavec (
<p>): Element<p>je jedním ze základních blokových elementů pro webový obsah. Každý individuální odstavec by měl obsahovat řádkový textový obsah, který definuje čitelný obsah webové stránky. Obecně platí, že bloky odstavců jsou určeny pouze pro text. - Dělení/Sekce (
<div>): Element<div>je navržen tak, aby obsahoval všechny druhy obsahu, včetně textu, obrázků a dalšího multimédia. Může také zahrnovat další blokové elementy, jako jsou odstavce. Obecně se bloky dělení používají k definování jednotných stylů pro bloky obsahu nebo k jejich seskupování pro účely rozvržení. - Seznamy (
<ul>a<ol>): HTML podporuje dva základní typy seznamů: nečíslovaný seznam (<ul>, unordered list) a číslovaný seznam (<ol>, ordered list). Každá položka v seznamu je definována tagem<li>(list item). Nečíslovaný seznam zobrazuje položky s odrážkami, zatímco číslovaný seznam je očísluje.
Příklad použití těchto elementů:
<h2>Nadpis sekce</h2><p>Toto je první odstavec s nějakým textem.</p><div><h3>Podsekce</h3><ul><li>Položka jedna</li><li>Položka dvě</li></ul></div>
Vkládání obsahu: Text, obrázky a odkazy
Webová stránka je k ničemu bez obsahu. Jakmile máte položený základ, je čas umístit na stránku skutečný obsah, aby uživatelé měli bohatý zážitek. Mezi nejběžnější typy obsahu patří text, obrázky a samozřejmě odkazy.
- Text: Vkládání textu je v HTML jednoduché. Jakmile máte obklopující blokový element – například odstavec (
<p>) – text lze jednoduše umístit dovnitř. - Obrázky (
<img>): Obrázky jsou v HTML specifikovány tagem<img>. Je důležité si uvědomit, že obrázek je řádkový element, takže musí být umístěn uvnitř blokového elementu, jako je odstavec nebo div. Tag<img>nevyžaduje uzavírací tag. Dva klíčové atributy pro obrázky jsousrc(zdroj) aalt(alternativní text):src: Definuje URL k obrázku. Může to být relativní cesta (např."obrazek.jpg") nebo plná URL adresa (např."https://example.com/obrazek.jpg").alt: Tento atribut poskytuje alternativní text, který se zobrazí, pokud se obrázek nenačte, nebo je přečten asistenčními technologiemi pro zrakově postižené uživatele. Je to nesmírně důležité pro přístupnost.
- Hypertextové odkazy (
<a>): Jak již bylo zmíněno, odkazy jsou jednou z nejmocnějších funkcí HTML. Element<a>(anchor) se používá k vytvoření odkazu na jinou webovou stránku, soubor nebo místo v rámci stejného dokumentu. Dva nejdůležitější atributy jsouhrefatitle:href: Tento atribut obsahuje URL adresu cíle odkazu.title: Volitelný atribut, který poskytuje dodatečný popis odkazu. V Safari se tento text zobrazí jako tooltip, když uživatel podrží myš nad odkazem (na iPhonu se to chová jinak, ale pro přístupnost je stále důležitý).
- Zalomení řádku (
<br>): Element<br>slouží k vynucení nového řádku. Je to řádkový element a nevyžaduje uzavírací tag. Používá se například pro zalomení adresy nebo básně.
Příklad použití těchto elementů:
<p><img src="cesta/k/obrazku.jpg" alt="Popis obrázku"><br>Dnes jsme navštívili krásné místo. Více informací naleznete na <a href="https://www.example.com" title="Navštivte naše stránky">našem webu</a>.</p>
Tabulky a další pokročilé prvky
HTML nabízí také elementy pro složitější struktury, jako jsou tabulky, které jsou ideální pro zobrazení tabulkových dat.
- Tabulky (
<table>): Element<table>se používá k vytvoření tabulky. Uvnitř tabulky se používají další tagy:<tr>(table row): Definuje řádek v tabulce.<th>(table header): Definuje buňku hlavičky tabulky (obvykle tučně a vycentrovaně).<td>(table data): Definuje standardní datovou buňku v tabulce.
Příklad tabulky:
<table><tr><th>Čas</th><th>Teplota</th></tr><tr><td>9:00</td><td>20°C</td></tr><tr><td>12:00</td><td>25°C</td></tr></table>
Kromě těchto elementů existuje mnoho dalších, které umožňují vkládat formuláře, multimédia (audio, video) a mnoho dalšího. Důležité je si pamatovat, že HTML se zaměřuje na strukturu a sémantiku. Prezentace (barvy, písma, rozvržení) se obvykle řeší pomocí CSS, a interaktivita pomocí JavaScriptu.
Přehled běžných HTML tagů a jejich účel
| Tag | Účel | Příklad použití |
|---|---|---|
<html> | Kořenový element dokumentu HTML | <html>...</html> |
<head> | Obsahuje metainformace o stránce | <head><title>Můj web</title></head> |
<body> | Obsahuje veškerý viditelný obsah stránky | <body><p>Vítejte!</p></body> |
<h1>-<h6> | Nadpisy různých úrovní (od nejdůležitějšího po nejméně důležitý) | <h1>Hlavní nadpis</h1> |
<p> | Odstavec textu | <p>Toto je odstavec textu.</p> |
<div> | Generický blokový kontejner pro seskupování obsahu | <div>Obsah sekce</div> |
<ul> | Nečíslovaný seznam (s odrážkami) | <ul><li>Položka</li></ul> |
<ol> | Číslovaný seznam | <ol><li>První položka</li></ol> |
<li> | Položka seznamu (používá se uvnitř <ul> nebo <ol>) | <li>Káva</li> |
<a> | Hypertextový odkaz | <a href="stranka.html">Odkaz</a> |
<img> | Obrázek | <img src="obrazek.jpg" alt="Popis obrázku"> |
<br> | Zalomit řádek | Text<br>na novém řádku |
<table> | Tabulka | <table>...</table> |
<tr> | Řádek tabulky | <tr>...</tr> |
<th> | Hlavička tabulky | <th>Název sloupce</th> |
<td> | Datová buňka tabulky | <td>Hodnota</td> |
Často kladené dotazy (FAQ)
- Proč je HTML důležité pro uživatele iPhonu?
- HTML je zásadní, protože definuje, jak je obsah strukturován a prezentován na webových stránkách. Prohlížeč Safari na vašem iPhonu spoléhá na správné HTML, aby mohl stránky rychle a přesně vykreslit. Dobře napsané HTML zajišťuje, že se obsah zobrazí čitelně, je přístupný pro všechny uživatele (včetně těch s asistenčními technologiemi) a správně reaguje na různé velikosti obrazovek, což je pro mobilní zařízení klíčové.
- Jaký je rozdíl mezi HTML a CSS?
- HTML se stará o strukturu a sémantiku obsahu – říká, co je na stránce (např. toto je nadpis, toto je odstavec, toto je obrázek). CSS (Cascading Style Sheets) se naopak stará o prezentaci – říká, jak má obsah vypadat (např. nadpis má být modrý, odstavec má mít velikost písma 16px, obrázky mají mít okraj). Tyto dva jazyky pracují ruku v ruce, aby vytvořily plně funkční a vizuálně přitažlivé webové stránky.
- Co jsou to „blokové“ a „řádkové“ elementy?
- HTML elementy se dělí na blokové a řádkové. Blokové elementy vždy začínají na novém řádku a zabírají celou dostupnou šířku (např.
<p>,<div>,<h1>). Řádkové elementy naopak nezpůsobují zalomení řádku a zabírají pouze tolik místa, kolik potřebují (např.<a>,<img>,<span>). Pochopení tohoto rozdílu je klíčové pro správné rozvržení obsahu. - Musím umět HTML, abych mohl používat internet?
- Rozhodně ne! Pro běžné používání internetu nemusíte znát HTML. Prohlížeče jako Safari se o interpretaci HTML postarají za vás. Nicméně, základní znalost HTML vám může pomoci lépe pochopit, jak web funguje, jak jsou stránky strukturovány, a dokonce vám to může pomoci při řešení drobných problémů s webovým obsahem, nebo jen tak pro zvědavost, jak vypadá „kód“ za vašimi oblíbenými stránkami.
HTML je neviditelným hrdinou internetu, který umožňuje, aby se miliardy webových stránek zobrazovaly konzistentně a efektivně na miliardách zařízení, včetně vašeho iPhonu. Ačkoli se nejedná o programovací jazyk v tradičním smyslu, jeho mistrovství ve strukturování obsahu je nezbytné pro každého, kdo se chce podílet na tvorbě webu nebo jen hlouběji porozumět tomu, jak funguje digitální svět kolem nás. Doufáme, že tento článek vám poskytl pevný základ pro vaše další poznávání HTML!
Chceš-li si přečíst další články podobné jako HTML: Jádro webu a jak ho ovládat, navštiv kategorii iPhone.