Lekce 1 - Úvod do HTML a váš první web
Vítejte v první lekci kurzu o tvorbě webových stránek. Naučíme se zde používat jazyk HTML, který je základem pro tvorbu webů. Sám o sobě je velmi jednoduchý a všechny webové stránky ho využívají. Složitější weby HTML míchají s několika dalšími jazyky, např. s CSS, které si v kurzu také uvedeme. Projdeme zde úplné základy HTML a CSS a vytvoříme své první webové stránky, které také nahrajeme na internet. Budou vypadat takto:

Minimální požadavky kurzu
Na tento kurz nepotřebujete žádné speciální znalosti, stačí běžná
práce s počítačem
Příprava nástrojů
Začněme přípravou nástrojů.
Instalace Visual Studio Code
K psaní HTML kódu nebudeme používat editory typu Poznámkový blok, jelikož jim chybí mnoho funkcí. Mezi ně patří zejména přehledné zvýrazňování kódu nebo podpora kódování češtiny a konců řádek. Stáhněme si tedy nějaký chytřejší editor. Skvělým pomocníkem, ale také nástrojem pro vývoj složitějších projektů, je Visual Studio Code. Je zadarmo a funguje na všech platformách. Tento editor si nyní stáhneme a nainstalujeme.
Pokročilejší uživatelé mohou použít placená profesionální IDE jako např. WebStorm nebo PhpStorm, pokud plánujete později pracovat i v PHP.
Instalace Dropboxu
Kromě editoru potřebujeme nějaký nástroj, který bude zálohovat a verzovat naši práci. Nemůžeme se spolehnout na to, že stránku prostě budeme ukládat, protože jsme lidé a ne stroje. Lidé dělají chyby a když přijdete o několikadenní nebo dokonce několikatýdenní práci, může to zabolet. Je dobré naučit se na toto myslet hned od začátku. Velmi doporučuji program Dropbox, který je extrémně jednoduchý a sám vaše soubory verzuje (tedy zachovává změny v čase a je možné se vrátit ke starším verzím projektu) a zároveň synchronizuje s webovým úložištěm. I kdybyste si projekt omylem smazali, přepsali, ukradli vám notebook nebo vám zkolaboval pevný disk, vaše data zůstanou v bezpečí. Dropbox také umožňuje sdílet jeden projekt mezi více vývojáři. Více o Dropboxu viz tento článek, který obsahuje zároveň pozvánku do Dropboxu s 0,5 GB prostoru navíc.
Jako další verzovací nástroj se hojně používá GIT, jeho nastavení ale vydalo na samostatný kurz a Dropbox zatím pro naše účely bohatě postačuje.
Jazyk HTML
HTML je tzv. značkovací jazyk a skládá se ze značek, tzv. tagů. Tagy slouží k tomu, abychom jimi mohli obalovat text, a tak mu dávat určitý význam (např. "toto je důležitý text", "toto nadpis", "seznam", "tabulka"). Pro tento účel slouží obvykle otevírající a ukončovací/uzavírací tagy, kterými ohraničíme danou oblast a přidělíme jí tak význam. Těmto tagům se potom říká párové a za moment si je ukážeme.
HTML není programovací jazyk, protože neumožňuje provádět žádné logické operace, slouží pouze k sestavování dokumentů. Programovací jazyky pak často HTML generují nebo upravují, což si ukážeme v navazujících kurzech. Dříve se HTML používalo i na designování stránek, ale protože vzniklý kód byl pak nepřehledný, oddělil se design do samostatného souboru a v HTML řešíme pouze obsah stránky.
Tagy se píší do špičatých závorek, např. <title>
,
což, jak dále zjistíme, označuje titulek stránky. Pokud nevíte, kde se na
české klávesnici tyto závorky píší, je to pomocí Pravého Alt
a následujících kláves:

Velmi specifickým tagem je odkaz, který umožňuje procházet mezi jednotlivými stránkami, a tak je provázat. Od toho zkratka HTML (HyperText MarkUp Language = odkazovací a značkovací jazyk).
Tag vs. element
V HTML se budeme setkávat také s pojmem element, čímž se myslí
prvek, který na stránku pomocí tagů vkládáme. Tagy jsou
tedy textové značky, pomocí kterých definujeme elementy. Např. pomocí
tagů <title>
a </title>
definujeme
element <title>
. Pomůckou může být, že tag vždy
referuje na kód, zatímco element na výsledný prvek
ve stránce jako v dokumentu.
Naše první webová stránka
HTML stránku je velmi jednoduché vytvořit, je to vlastně jen
textový dokument. Soubory s HTML kódem mají obvykle
příponu .html
nebo někdy i jen .htm
. Úvodní
soubor webové stránky je zvykem pojmenovávat index.html
. Právě
tento soubor bude potom internetový server hledat jako první, když naše
stránky nahrajeme na internet a někdo na ně vstoupí.
Pojďme si tento soubor nyní vytvořit a v něm jednoduchou stránku s úvodním textem.
Vytvoření HTML souboru
Spusťme si VS Code a klikněme v horním menu na Soubor -> Nový soubor:

Do pole pro název souboru zadáme index.html
a potvrdíme
Enter:

Je velmi důležité dodržet přesné názvy souborů, protože při nahrání na linuxový server může tento server rozlišovat velká a malá písmena. Všechna písmena v názvu souboru jsou proto malá.
Ve složce Dropboxu si vytvoříme podsložku, např.
prvni_web/
. Do ní poté soubor ve VS Code uložíme pomocí menu
Soubor -> Uložit nebo pomocí klávesové zkratky Ctrl +
S. Nyní máme skutečně HTML soubor, se kterým můžeme ve VS Code
dál pracovat.
Pokud se nechcete zdržovat s neustálým ukládáním nebo máte strach, že byste na to zapomínali, zaškrtněte si v Menu -> Soubor -> Automatické ukládání.
V některých editorech je potřeba nastavit způsob kódování
(nejen) českých znaků, k čemuž v dnešní době slouží moderní
univerzální kódování UTF-8
. Visual Studio Code bere
UTF-8
jako výchozí, a proto se s nastavováním nemusíme
trápit. Pokud se však chcete ujistit, že opravdu používáte UTF-8, na
dolní liště byste kromě informace o tom, kde se nacházíte v kódu nebo
jaký jazyk používáte, měli vidět právě UTF-8. Je velmi
důležité, abyste své stránky editovali pouze v editorech, co
UTF-8
podporují, jinak dojde k rozbití diakritiky. Například je
špatný nápad vytvořit stránky ve VS Code a poté do nich něco dopsat v
Poznámkovém bloku.
Struktura HTML stránky
Může být překvapením, že HTML stránka obsahuje kromě obsahu pro uživatele také další informace pro prohlížeč a vyhledávače. Proto má určitou strukturu, která tyto informace odděluje od našeho obsahu.
<!DOCTYPE>
Na začátek souboru vložíme tzv. DOCTYPE
. Přidáme
řádek:
<!DOCTYPE html>
Tím definujeme, že textový soubor je HTML dokumentem.
Vykřičníku si nevšímejte, prostě se tam píše
Hlavička <head>
a tělo
<body>
Dále definujeme samotný HTML dokument. Ten je rozdělen na 2 části:
- Hlavičku - Ta obsahuje informace pro prohlížeč a vyhledávače.
- Tělo - Zde nalezneme samotný obsah webové stránky.
Vložme nyní hlavičku a tělo do našeho dokumentu. Hlavičku si necháme zatím prázdnou, do těla vložíme text, který na své stránce chceme mít. Bude to vypadat takto:
<!DOCTYPE html> <html lang="cs-cz"> <head></head> <body>Vítejte na mé stránce!</body> </html>
Prvně otevíráme tag <html>
. Tím sdělujeme, že odtud
bude začínat naše HTML stránka. Následuje hlavička,
která je vložena mezi tagy <head>
a
</head>
a dále tělo mezi tagy
<body>
a </body>
. Nakonec ukončíme i
samotnou HTML stránku pomocí </html>
.
Párové tagy
Všimněte si, že konec hlavičky </head>
se od začátku
hlavičky <head>
liší lomítkem /
. Takto se
píší tzv. párové tagy. Párové proto, že jsou dva
(začátek a konec) a mezi nimi je vložen jejich
obsah, zde konkrétně za moment vložíme obsah hlavičky. Stejně to
máme i s tělem (tag <body>
), kde definujeme jeho začátek
a konec s lomítkem a celá HTML stránka je pak uzavřena v
<html>
a </html>
.
Ukončovací lomítko píšeme vždy po první lomené
závorce, ne na konci. Častá chyba začátečníků je psát chybně např.
<body/>
namísto </body>
.
Atributy tagů
Některé tagy vyžadují zadat také atributy, což jsou
doplňující parametry. Vkládáme je do otevírajícího tagu a jejich hodnotu
píšeme do uvozovek ""
za znak =
. U tagu
<html>
si všimněte atributu lang="cs-cz"
,
který definuje jazyk stránky. Zde říká, že HTML stránka je v češtině.
Pokud bychom chtěli specifikovat, že se jedná o slovenštinu, hodnota by byla
sk
. K atributům se ještě vrátíme.
Odsazování
Když vkládáme jeden element do druhého,
odsadíme řádek pomocí klávesy Tab nebo 4 mezer.
Odsazování nemá na funkčnost žádný vliv, ale pomáhá nám jasně vidět,
že je <head>
a <body>
zleva odskočené a
tudíž patří do výše otevřeného <html>
elementu.
Obsah hlavičky
Přesuňme se do hlavičky, kam nyní přidáme ještě několik informací.
Kódování
Mezi <head>
a </head>
vložme
informaci o kódování. Dělá se to tagem
<meta>
(metadata) s následujícím atributem:
... <head> <meta charset="utf-8" /> </head> ...
Prohlížeči jsme tímto sdělili, že je stránka kódována v
UTF-8
, bude tak vědět, jak zobrazit speciální znaky jako např.
č
. Zde je nutné dodat, že toto je pouze informace pro
prohlížeč a je nutné stránku v UTF-8 opravdu uložit (což za nás řeší
VS Code). Hlavičku jsme také roztáhli na více řádek, protože do ní
budeme ještě přidávat elementy. Opět si všimněte dalšího odsazení
elementu <meta ...>
zleva.
Nepárové tagy
Všimněme si i lomítka na konci tagu
<meta charset="utf-8" />
. Takto se mohou ukončovat
nepárové tagy. To jsou ty, které nemají dvě části
(začátek a konec), ale píší se pouze jednou. Mezi ně
právě tag <meta ... >
patří. U každého tagu si během
kurzu řekneme, jestli je párový nebo nepárový.
Uzavírání nepárových tagů lomítkem na
konci není povinné a zda jej psát je otázka preferencí.
Výhody jsou, že je na první pohled vidět, že tag nemá nikde dále v kódu
uzavírací značku a také, že je dokument kompatibilní s XML, kde se
všechny značky musí uzavírat. Pokud vám tato praktika nesedí, lze psát
jen např. <meta charset="utf-8">
. Párové tagy je
samozřejmě nutné uzavírat vždy, jinak by nebylo poznat, kde končí. V
kurzu budeme uzavírat i nepárové tagy, abychom se vždy zamysleli nad
uzavíráním tagů.
Titulek <title>
Jako další řádek přidejme do hlavičky titulek. Jedná se o párový tag
s názvem <title>
, dovnitř tagu napíšeme text titulku:
... <head> <meta charset="utf-8" /> <title>Moje první webová stránka</title> </head> ...
Otevření stránky v prohlížeči
Celkový kód naší stránky nyní vypadá takto:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <title>Moje první webová stránka</title> </head> <body>Vítejte na mé stránce!</body> </html>
Když soubor nyní otevřeme ve webovém prohlížeči, uvidíme náš první
web. Bude vypadat jako obrázek níže Všimněte si i našeho titulku v textu záložky:
PRO tip: Napsáním vykřičníku na samostatný řádek a stisknutím Enter nám VS Code HTML strukturu samo vygeneruje. To nám určitě ušetří spoustu času s vytvářením nových stránek. Tato struktura se ovšem může lišit s každou verzí VS Code, může mít různé věci navíc a může v ní být potřeba přepsat atribut "lang" na "cs", aby byl obsah vyhledávači chápán jako český.
HTML stránku lze definovat i jinak a jistě se setkáte s
odlišnými definicemi. Ta uvedená v dnešní lekci je však nejstručnější
a nejmodernější. Pokud do stránky neuvedete hlavičku nebo např. element
<body>
, nebude validní a nemusí se ve všech
prohlížečích vykreslit správně.
V příští lekci, Základní HTML tagy, si uvedeme základní HTML tagy, které budete pro váš web potřebovat.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 4027x (184 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS