Hledáme pomocníky pro kurzy programování - pohodová brigáda. Více info
Nauč se s námi víc. Využij 50% zdarma na e-learningové kurzy. Zároveň pouze tento týden sleva až 80 % na e-learning týkající se Javy

Lekce 1 - Úvod do HTML a váš první web

Vítejte v první lekci on-line kurzu o tvorbě jednoduchých webových stránek. Jazyk HTML 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, některé z nich si v seriálu také ukážeme. Projdeme úplné základy HTML a vytvoříme své jednoduché první stránky, které umístíme na internet.

Editor

K psaní HTML kódu nebudeme používat poznámkový blok, jelikož mu 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, které je zadarmo a funguje na všech platformách. Dále doporučujeme například IDE od JetBrains, ve kterých programujeme ITnetwork. Pro HTML se hodí WebStorm, PhpStorm, pokud plánujete později pracovat i v PHP.

Spusťme si VSCode a klikněme v horním menu na Soubor -> Nový soubor. Visual Studio Code podporuje využívání klávesových zkratek, a tak se nebojte je používat, usnadní vám budoucí práci.

První webová stránka

HTML stránku je velmi jednoduché vytvořit, je to vlastně jen textový dokument. Po kliknutí na Nový soubor zvolíme jazyk, ve kterém chceme kód psát, samozřejmě je to HTML. Ještě zbývá druhý, zásadní krok. Pomocí zkratky Ctrl + S uložíme náš soubor do nové složky, např. První web, a pojmenujeme ho přitom jako index.html. Je velmi důležité správně zapsat koncovku souboru, všechna písmena jsou malá. Nyní máme skutečně HTML soubor, se kterým můžeme ve VSCode 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 programech je potřeba nastavit způsob kódování (nejen) českých znaků, k čemuž u všech správně napsaných webů slouží 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 VSCode a poté do nich něco dopsat v Poznámkovém bloku.

Začínáme psát kód

HTML se skládá ze značek (tzv. tagů). Samo o sobě umožňuje hlavně dodávat prvkům (dále elementům) na stránce určitý význam a to je i jeho hlavní úkol. Dříve se používal i na grafické stylování stránek, ale protože vzniklé weby byly nepřehledné, byl omezen pouze na webový obsah.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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). Tagy se píší do špičatých závorek. 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 (Hyper Text MarkUp Language = odkazovací a značkovací jazyk).

HTML soubor má určitou strukturu. Na začátek souboru vložíme tzv. doctype:

<!DOCTYPE html>

Tím definujeme, že textový soubor je HTML dokumentem. Vykřičníku si zatím nevšímejte, prostě se tam píše :) Dále definujeme samotný HTML dokument. Ten je rozdělen na 2 části - hlavičku a tělo. Hlavička obsahuje informace pro prohlížeč a vyhledávače, v těle nalezneme samotný obsah webové stránky.

Upravme náš soubor, aby vypadal takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
    </head>

    <body>
    </body>
</html>

Na dalším řádku otevíráme tag html, tím sdělujeme, zde odtud bude začínat naše HTML stránka.

Následuje hlavička, která je vložena v tagu <head>. Všimněte si, že konec hlavičky se od začátku 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 obsah hlavičky. Stejně to máme i s tělem (tag body), kde definujeme jeho začátek a konec s lomítkem. Nakonec ukončíme i samotnou HTML stránku.

U začátku HTML si všimněte atributu lang, který definuje jazyk stránky. Atribut je nějaká rozšiřující informace k určitému HTML elementu. 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. Hodnoty atributů se píší do uvozovek, k atributům se ještě vrátíme.

Přesuňme se do hlavičky a mezi její začátek a konec vložme informaci o kódování. Dělá se to tagem meta s následující syntaxí (zápisem):

<meta charset="utf-8" />

Všimněte si lomítka na konci tagu. Takto se ukončují nepárové tagy, tedy ty, které nemají 2 části (začátek a konec), ale píší se pouze jednou. Mezi ně tag meta patří. U každého tagu si během seriálu řekneme, jestli je párový nebo nepárový. Kódování jsme nastavili na UTF-8.

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:

<title>Moje první webová stránka</title>

Celý váš HTML dokument by měl nyní vypadat takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
    </head>

    <body>
    </body>
</html>

Hlavičku již máme prozatím vyplněnou, nyní se přesuňme do těla (body), což je ta část stránky, která je v prohlížeči vidět.

Do těla si vložíme dva odstavce textu. Využijeme k tomu párový tag <p> (jako paragraph = odstavec). V HTML je vše jako element, i text zde nemůžeme nechat jen tak plavat, ale musí být obalen na jednotlivé odstavce.

<p>Toto je moje první webová stránka, zatím na ní nic není, ale i tak jsem s ní spokojen</p>
<p>Toto je druhý odstavec</p>

Když soubor nyní otevřete ve webovém prohlížeči, měli byste vidět váš první web. Bude vypadat jako obrázek níže :) Pokud tak nevypadá, nezoufejte a stáhněte si soubor s hotovým webem na konci článku. Můžete se tak podívat, kde jste udělali chybu.

Moje první webová stránka
index.html

Pokud se vám i nadále místo znaků s diakritikou zobrazují otazníky, přidejte do hlavičky (head) HTML souboru meta tag: <meta charset="iso-8859-2" />

HTML stránku lze definovat i jinak a jistě se setkáte s odlišnými definicemi. Tato je však nejstručnější a nejmodernější.

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 3123x (299 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
201 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (239)

Avatar
weverka
Člen
Avatar
weverka:12. května 20:37

Pokud nemáš 32-bit OS, což nemáš tak v tom pes zakopaný nebude. Zkus jít do kódová stránka a tam vybrat UTF 8.

Odpovědět
12. května 20:37
Weby jsou budoucnost IT
Avatar
Petr Havlík
Člen
Avatar
Petr Havlík:26. května 16:36

Mám to všechno podle návodu, ale nezobrazuje se mi hořejšek (Nadpis č.1)

 
Odpovědět
26. května 16:36
Avatar
ssmrek
Člen
Avatar
ssmrek:2. července 16:15

Rád by som sa opýtal, či je nejaký rozdiel v nastavení kódovej stránky Unicode UTF-8 no BOM (65001) a kódovej stránky Unicode UTF-8 BOM (65001) v editore PSPad.

Tá prvá možnosť je zvolená na obrázku v tejto lekcii na začiatku, ale mne nefunguje.
Naproti tomu tá druhá možnosť mi funguje bezchybne, i keď v článku uvedená nie je.

Obidve sú UTF-8, no funguje iba tá druhá. Vie niekto v čom je háčik ?
Čo znamená BOM 65001 ?

Odpovědět
2. července 16:15
Správaj sa tak, ako chceš, aby sa druhí správali k tebe.
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovídá na ssmrek
Petr Štechmüller:2. července 16:29

Budu citovat wikipedii.

V kódování UTF-8 je tento znak reprezentován trojicí bajtů 0xEF 0xBB 0xBF („UTF-8 signatura“), v kódování UTF-16 big-endian dvojicí bajtů 0xFE 0xFF a v UTF-16 little-endian 0xFF 0xFE. Grafický význam znaku je „nedělitelná mezera nulové šířky“ (zero-width no-break space), je tak podobný znaku U+2060 (word joiner)

Odpovědět
2. července 16:29
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
ssmrek
Člen
Avatar
Odpovídá na Petr Havlík
ssmrek:2. července 16:36

V html súbore chybu nevidím, takže si myslím, že sa ti to zobrazuje správne, no nie tak, ako si čakal.
Totiž text Nadpis č.1 sa nemá zobraziť hneď nad textom první odstavec a druhý odstavec,
čo si možno predpokladal, ale ako titulok (záhlavie) karty, ktorú prehliadač otvorí, keď začne vykonávať tvoj index.html súbor.

Ak sa mýlim, tak prepáč

Odpovědět
2. července 16:36
Správaj sa tak, ako chceš, aby sa druhí správali k tebe.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
ssmrek
Člen
Avatar
Odpovídá na Petr Štechmüller
ssmrek:2. července 17:00

Dík za rýchlu a presnú odpoveď :-)

Odpovědět
2. července 17:00
Správaj sa tak, ako chceš, aby sa druhí správali k tebe.
Avatar
Lubomír Štícha:4. srpna 20:50

Uvítal bych když by to vysvětlení bylo podrobnější, například kam přesně vložit tuto část :
<p>Toto je moje první webová stránka, zatím na ní nic není, ale i tak jsem s ní spokojen</p>
<p>Toto je druhý odstavec</p>
Tak aby to bylo i zobrazeno, myslím že tam mám chybu kterou jsem úplně neodhalil vzhledem k tomu že se mi zobrazují otazníky v černém kosočtverci jinak postup vysvětlení ok

 
Odpovědět
4. srpna 20:50
Avatar
Katka Mlázovská:16. srpna 8:57

Škoda, že článek nezmiňuje VisualStudioCode - je TOP!

Odpovědět
16. srpna 8:57
easy choices => hard life; hard choices => easy life;
Avatar
Jakub Žitný:17. srpna 14:32

Ahoj, stáhnul jsem PSPad a po dopsání a zobrazení se mi vyskytl problém se znaky (všechna písmena s diakritikou se zobrazovala jako otazníky). Google mi poradil přepsat tag <meta charset="iso-8859-2" /> . Třeba to někomu tady taky píchne :)

 
Odpovědět
17. srpna 14:32
Avatar
Tano7
Člen
Avatar
Odpovídá na Katka Mlázovská
Tano7:9. září 23:22

Jo, Visual Studio Code je špičkové, programuji poslední dobou jen v něm.
Tam je UTF-8 defaultně nastaveno na On. Pro kontrolu: "Soubor/Předvol­by/Nastavení/ " vyhledat UTF-8, Nastavení na "auto".

Odpovědět
9. září 23:22
Život by byl mnohem snazší, kdybychom k němu měli zdrojový kód.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 249. Zobrazit vše