Každá stránka, kterou vidíte online, je postavena na základech HTML (HyperText Markup Language). HTML je stavebním kamenem internetu, jazykem, který prohlížečům říká, jak mají zobrazit obsah – od textu a obrázků po interaktivní prvky. Pochopení základních HTML tagů a jejich funkce je klíčové pro každého, kdo se chce ponořit do tvorby webu, anebo jen lépe rozumět tomu, jak web funguje.
Pojďme se podívat na klíčové elementy, které tvoří strukturu každé webové stránky a jak s nimi pracovat.
HTML je univerzální značkovací jazyk webu. HTML vám umožňuje formátovat text, přidávat grafiku, vytvářet odkazy, vstupní formuláře, rámečky a tabulky a mnoho dalšího, a vše uložit do textového souboru, který si libovolný prohlížeč může přečíst a zobrazit.
Tyto tagy definují základní hierarchii a strukturu celého HTML dokumentu.
<!DOCTYPE html>
Tato deklarace musí být první věcí v každém HTML dokumentu.
Není to HTML tag, ale instrukce pro webový prohlížeč, která mu sděluje, jaký typ dokumentu má očekávat a jakou verzi HTML má použít pro vykreslení stránky.
Proč je důležitá?
Všechny HTML dokumenty musí začínat deklarací <!DOCTYPE>. Deklarace není HTML tag. Je to „informace“ pro prohlížeč o tom, jaký typ dokumentu očekávat. Zajišťuje, že prohlížeč přepne do „standardního režimu“ (standards mode), což zaručuje konzistentní vykreslování stránky napříč různými prohlížeči a zabraňuje problémům způsobeným „quirks mode“. (Více zde v EN).
Pro HTML5 je tato zkrácená forma univerzální a doporučená.
<html> ... </html>
Element <html> je kořenový prvek celého HTML dokumentu.
Je to nejvyšší úroveň hierarchie, a všechny ostatní HTML elementy (kromě <!DOCTYPE>) musí být jeho „potomky“. Také se označuje jako kořenový prvek.
Důležité atributy:
lang=“en“ (nebo pro nás spíše cs – česky). Určuje jazyk obsahu dokumentu. Je důležitý pro vyhledávače, asistenční technologie (čtečky obrazovky) a prohlížeče (např. pro nabídky překladu).
<head> ... </head>
Tento tag se používá k určení meta dat o webové stránce.
Zahrnuje název webové stránky, její závislosti (JS a CSS skripty), použití písem atd.
Element <head> je kontejner pro metadata dokumentu. Obsahuje informace o stránce, které se přímo nezobrazují uživateli, ale jsou zásadní pro fungování, vzhled a SEO.
Obsah <head>: Zahrnuje elementy jako <title>, <meta>, <link>, <style> a <script>, které probereme podrobněji níže.
Všechny tyto elementy poskytují důležité instrukce pro prohlížeč a vyhledávače.
<body> ... </body>
Tento tag obsahuje vše, co uživatel vidí na webové stránce.
Je to kontejner pro veškerý obsah webové stránky. Nadpisy, odstavce, obrázky, hypertextové odkazy, tabulky a seznamy jsou příklady viditelného obsahu.
Element <body> je nejdůležitější částí HTML dokumentu z pohledu uživatele. Obsahuje veškerý viditelný obsah webové stránky – vše, co uživatel vidí a s čím může interagovat.
Obsah <body> může zahrnovat nadpisy (<h1> až <h6>) – více o nadpisech ZDE, odstavce (<p>), obrázky (<img>), hypertextové odkazy (<a>), tabulky (<table>), seznamy (<ul>, <ol>), formuláře (<form>), navigační lišty, tlačítka a mnoho dalších interaktivních i statických prvků.
Je to „tělo“ vaší webové stránky, kde se nachází skutečný obsah.
Zde je příklad, který ilustruje použití probraných elementů.
Je zde zapsána základní struktura.
Tento příklad demonstruje minimální, ale funkční strukturu HTML dokumentu.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dokument</title>
</head>
<body>
<!-- Zde si vložíte váš obsah -->
</body>
</html>
<head> podrobněji)Tyto tagy se nacházejí uvnitř elementu <head> a poskytují prohlížeči a vyhledávačům důležité informace o stránce, aniž by se přímo zobrazovaly uživateli.
<base>
Element <base> slouží k určení základní URL adrese pro všechny relativní URL adresy v dokumentu. To znamená, že pokud na své stránce používáte relativní cesty k obrázkům, CSS souborům, nebo odkazům (např. /obrazky/logo.png), prohlížeč je bude interpretovat vzhledem k URL definované v <base>.
Proč je to užitečné?
Používá se k určení základní URL vaší stránky, tento tag zjednodušuje vytváření interních odkazů na vaší stránce. Zjednodušuje to správu odkazů a assetů, zejména pokud přesouváte stránky nebo chcete zajistit, aby všechny relativní cesty vedly ke správnému serveru nebo složce. Místo psaní plné URL pro každý obrázek nebo odkaz, stačí uvést relativní cestu a <base> se postará o zbytek.
Element <base> může mít také atribut target, který definuje výchozí cíl pro všechny odkazy na stránce.
Zde je příklad: <base href=“http://mojestranka.cz“ target=“_blank“ /> – všechny relativní odkazy na této stránce povedou na http://mojestranka.cz a budou se otevírat v novém okně/panelu prohlížeče.
<meta>
Toto je meta datový tag pro webovou stránku.
Může být užitečný pro zmínku o autorovi stránky, klíčových slovech, původním datu publikace atd. <meta> tagy poskytují metadata o HTML dokumentu, což jsou data o datech.
Jsou klíčové pro prohlížeče (jak stránku vykreslit), vyhledávače (jak ji indexovat) a další webové služby.
<meta> tagy nemají uzavírací tag a obvykle se vyskytují v <head> sekci.
Příklady a vysvětlení:
meta charset="utf-8": Definuje znakovou sadu dokumentu. utf-8 je nejrozšířenější a podporuje většinu znaků na světě, což zabraňuje problémům se zobrazením speciálních znaků a diakritiky.meta name="description" content="Stručný popis obsahu stránky pro vyhledávače.": Obsah tohoto meta tagu se často zobrazuje pod titulkem ve výsledcích vyhledávání. Je klíčový pro SEO, protože pomáhá uživatelům pochopit, o čem stránka je, ještě než na ni kliknou.meta name="keywords" content="html, základy, web, programování": Dříve důležitý pro SEO, dnes má pro většinu vyhledávačů menší význam, ale stále se může používat.meta name="author" content="Jméno Autora": Udává jméno autora stránky.meta name="viewport" content="width=device-width, initial-scale=1.0": Nezbytný pro responzivní design. Instruuje prohlížeč, aby šířka stránky odpovídala šířce zařízení a aby se stránka načetla s počátečním zoomem 1:1.meta http-equiv="refresh" content="5;url=http://example.com/": Automaticky přesměruje uživatele na jinou URL po 5 sekundách.meta name="blank": Toto není standardní meta tag. Je možné, že se jedná o placeholder nebo specifické použití v nějakém frameworku, ale ve standardním HTML nemá definovaný význam.
<title> ... </title>
Jak název napovídá, tento tag obsahuje název webové stránky.
Vidíte jej v záhlaví prohlížeče u každé webové stránky otevřené v prohlížeči.
Vyhledávače používají tento tag k extrakci tématu webové stránky, což je poměrně výhodné při řazení relevantních výsledků vyhledávání.
Element <title> obsahuje název webové stránky. Tento název se zobrazuje v záhlaví okna prohlížeče nebo na panelu (tabu) prohlížeče.
Proč je to důležité?
<link>
Používá se k propojení s externími skripty webové stránky. Typicky se využívá pro zahrnutí stylů.
Element <link> se používá k propojení HTML dokumentu s externími zdroji.
Typicky se používá pro zahrnutí externích CSS stylů, které definují vzhled a rozložení stránky.
Příklady a vysvětlení:
link rel="stylesheet" href="/css/styles.css": Toto je nejčastější použití, které propojuje stránku s externím souborem CSS (styles.css). Atribut rel="stylesheet" říká prohlížeči, že se jedná o soubor se styly.link rel="icon" href="/favicon.ico": Slouží k propojení s faviconou – malou ikonkou, která se zobrazuje v panelu prohlížeče vedle titulu stránky, v záložkách nebo v seznamu oblíbených položek.
<style> ... </style>
Tag stylu lze použít jako alternativu k externímu stylovému souboru nebo ho doplnit.
Zahrnuje informace o vzhledu webových stránek. Element <style> se používá k definování interních stylů CSS přímo v HTML dokumentu.
Obsahuje CSS pravidla, která ovlivňují vzhled prvků na dané stránce.
Kdy ho použít? Je vhodný pro styly specifické pro jednu konkrétní stránku, nebo pokud potřebujete rychle přidat či testovat styly bez vytváření samostatného CSS souboru.
Pro větší projekty a konzistentní design se však doporučuje používat externí CSS soubory s elementem <link>, aby se styl oddělil od struktury HTML.
<script> ... </script>
Používá se k přidání úryvků kódu, typicky v JavaScriptu, pro dynamizaci webové stránky.
Lze jej také použít pouze k odkazu na externí skript.
Element <script> se používá k vkládání spustitelného kódu, nejčastěji JavaScriptu, do HTML dokumentu.
JavaScript dodává webovým stránkám interaktivitu, dynamiku a komplexní funkcionalitu.
<script type="text/javascript">
var dummy = 0;
console.log("Ahoj světe z JavaScriptu!");
</script>
<script type="text/javascript" src="/js/main.js"></script>
Propojuje stránku s externím souborem JavaScriptu (main.js). Toto je preferovaný způsob pro větší projekty, protože odděluje strukturu od chování a umožňuje sdílení skriptů napříč více stránkami.
Atributy async a defer:
async načítá skript asynchronně a spouští ho, jakmile je dostupný (může být před vykreslením obsahu), zatímco defer načítá skript na pozadí a spouští ho až po dokončení analýzy celého HTML dokumentu (po vykreslení obsahu, ale před událostí DOMContentLoaded), což je často ideální pro skripty, které manipulují s DOM.Zde je další příklad ilustrující použití probraných elementů.
Je zde základní struktura, která ukazuje použití specifických elementů hlavičky.
Tento příklad demonstruje minimální, ale funkční strukturu HTML dokumentu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="http://mojestranka.cz" target="_blank" />
<meta name="blank"> <!-- Nejedná se o standardní meta tag. -->
<title>Moje stránky</title>
<link rel="stylesheet" href="/css/styles.css">
<script type="text/javascript">
var dummy = 0;
</script>
</head>
<body>
</body>
</html>
Prosím, všimněte si, že v tomto příkladu je <meta name="blank">, jak již bylo zmíněno, tento tag není standardní součástí HTML specifikace a jeho význam by závisel na konkrétním použití v rámci projektu. Dále si můžete všimnout, že <base> tag má i atribut target="_blank", který zajistí, že všechny odkazy, které používají tuto základní URL, se otevřou v nové záložce prohlížeče.
Dovysvětlím vám zápis var dummy v JavaScriptu.
var dummy je deklarace proměnné v JavaScriptu.
Rozdělme si to:
var:var mají funkční rozsah (function scope). To znamená, že jsou viditelné a dostupné v rámci celé funkce, ve které byly deklarovány, bez ohledu na bloky kódu (např. if cykly, for cykly) uvnitř této funkce.let a const, které byly zavedeny v ES6 (ECMAScript 2015). Tyto mají blokový rozsah (block scope), což je často bezpečnější a předvídatelnější. var se stále používá, ale let a const jsou doporučeny pro novou tvorbu kódu.dummy:dummy naznačuje, že se pravděpodobně jedná o zástupnou (dummy) proměnnou.var dummy = 0;), se jednoduše inicializuje na hodnotu 0, ale její skutečné použití (pokud nějaké je) by bylo definováno později v kódu. Bez dalšího kódu je to jen proměnná, která drží nulu.
Shrnutí: var dummy tedy znamená „deklaruj proměnnou s názvem dummy„. V kontextu kódu var dummy = 0; to znamená „deklaruj proměnnou s názvem dummy a inicializuj ji hodnotou 0„.
Je to velmi základní a častý způsob, jak začít pracovat s daty v JavaScriptu.
Zde je konkrétní příklad použití var dummy v rámci JavaScriptové funkce, abychom lépe ilustrovali jeho zápis a potenciální využití jako zástupné proměnné.
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Příklad s var dummy</title>
</head>
<body>
<h1>Ukázka JavaScriptu s 'var dummy'</h1>
<p id="vysledek">Zde se zobrazí výsledek.</p>
<button onclick="spustitPříklad()">Spustit příklad</button>
<script type="text/javascript">
// Globální deklarace proměnné 'dummy'
// Všimněte si, že "var" zde dává 'dummy' globální rozsah,
// takže je dostupná i uvnitř funkcí, pokud ji tam nepřepíšeme.
var dummyGlobal = "Jsem globální dummy!";
function spustitPříklad() {
// Deklarace proměnné 'dummy' uvnitř funkce.
// Tato 'dummy' má funkční rozsah a je viditelná pouze uvnitř 'spustitPříklad'.
// Navíc, inicializujeme ji na 0, jako v původním příkladu.
var dummy = 0;
console.log("Hodnota 'dummy' na začátku funkce: " + dummy); // Výstup: 0
// Předstíráme nějakou složitou operaci, která by mohla využívat dočasnou proměnnou.
// Zde ji použijeme jen jako jednoduchý čítač.
for (let i = 0; i < 5; i++) {
dummy = dummy + 1; // Změna hodnoty 'dummy'
console.log("Dummy v cyklu: " + dummy);
}
// Po cyklu má 'dummy' novou hodnotu
console.log("Hodnota 'dummy' po cyklu: " + dummy); // Výstup: 5
// Můžeme také ukázat globální proměnnou
console.log("Hodnota 'dummyGlobal': " + dummyGlobal); // Výstup: Jsem globální dummy!
// Vložíme výsledek do HTML
document.getElementById("vysledek").textContent = "Příklad dokončen. Finální hodnota 'dummy' uvnitř funkce byla: " + dummy;
}
// Pokud bychom se pokusili přistoupit k 'dummy' mimo funkci 'spustitPříklad',
// dostali bychom chybu, protože má pouze funkční rozsah (function scope).
// console.log(dummy); // Toto by vyhodilo chybu: ReferenceError: dummy is not defined
</script>
</body>
</html>
Vysvětlení tohoto příkladu:
var dummyGlobal = "Jsem globální dummy!";: Tuto proměnnou jsem deklaroval mimo jakoukoli funkci (v globálním rozsahu). Proto je přístupná odkudkoli v tomto skriptu.function spustitPříklad() { ... }: Toto je JavaScriptová funkce, která se spustí, když kliknete na tlačítko.var dummy = 0;:var dummy je uvnitř funkce spustitPříklad().dummy je lokální pro tuto funkci. Její existence a hodnota jsou omezeny pouze na kód uvnitř této funkce. Jakmile funkce skončí, proměnná dummy přestane existovat (nebo se stane nepřístupnou).dummy mimo funkci spustitPříklad (jak je ukázáno v zakomentovaném řádku console.log(dummy);), dostali byste chybu ReferenceError, protože proměnná dummy tam není definována.dummy použita jako jednoduchý čítač v cyklu for. Její název „dummy“ naznačuje, že je to jen dočasná proměnná pro tento konkrétní účel v rámci funkce.console.log(...): Tyto příkazy vypisují hodnoty proměnných do konzole prohlížeče (kterou můžete otevřít stisknutím F12 a přepnutím na záložku „Console“), což vám pomůže sledovat, jak se hodnoty mění.document.getElementById("vysledek").textContent = ...: Tímto se výsledek vypíše přímo na webovou stránku, abyste jej viděli.Tento příklad jasně ukazuje, jak je var dummy deklarována a používána uvnitř funkce, a jaký má rozsah v porovnání s globální proměnnou.
Význam „dummy“ v programování a IT:
dummy variable (dummy proměnná): Jako naše var dummy = 0;. Je to proměnná, která drží hodnotu, ale nemusí mít žádný hluboký smysl pro celou aplikaci, často slouží jen jako počítadlo nebo dočasné úložiště.dummy data (dummy data): Data, která nejsou skutečná, ale používají se pro testování (např. vkládání fiktivních jmen a adres do databáze při vývoji).dummy function (dummy funkce): Funkce, která nic nedělá nebo jen vrátí předem danou hodnotu. Používá se, když potřebujete, aby nějaká funkce existovala, ale její plnou implementaci ještě nemáte.dummy file (dummy soubor): Prázdný nebo minimální soubor pro testovací účely.
Takže v kontextu var dummy se jedná o proměnnou, která je zástupná nebo dočasná, bez nějakého speciálního hlubšího významu pro hlavní logiku aplikace. Je to standardní a akceptovaný termín v programování.
