Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

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í/uza­ví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:

Větší než; menší než na české klávesnici

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:

Vytvoření HTML stránky ve VS Code

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

Vytvoření HTML souboru ve VS Code

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:

Moje první webová stránka
index.html

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 3788x (184 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
Přeskočit článek
(nedoporučujeme)
Základní HTML tagy
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
1150 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti 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 (280)

Avatar
Tomáš Pup
Člen
Avatar
Tomáš Pup:26. července 14:29

Ahoj, přemýšlím co dělám špatně, ale šel jsem přesně podle toho co je psáno. Zkoušel jsem dvakrát vytvořit webovou stránku, ale neslučuje se s posledním obrázkem, nicméně když kliknu na index.html tak je vše správně.

Zkusím poslat screen

Toto je druhý odstavec

 
Odpovědět
26. července 14:29
Avatar
Tomáš Pup
Člen
Avatar
Odpovídá na Tomáš Pup
Tomáš Pup:26. července 19:17

Dobrý, už jsem na to přišel kde byla chyba. Zmátlo mě ten přesun do hlavičky. Bylo by dobré také mít natočené videa s postupy (můj názor), pomáhá to tak lépe při učení.

 
Odpovědět
26. července 19:17
Avatar
Renáta Vyšatová:6. října 18:50

Tato lekce byla fajn, líbí se mi, jak je všechno vysvětlené, aby to pochopil i debil 😁

 
Odpovědět
6. října 18:50
Avatar
Andrea Hošková:28. října 13:59

Ahoj, vše chápu, až na otevření v prohlížeči, když to zadám rovnou do řádku, tak mi to vyjede všechno možné na googlu, jen ne mou vzorovou stránku. Díky. A.

 
Odpovědět
28. října 13:59
Avatar
Jan Trnka
Člen
Avatar
Jan Trnka:3. listopadu 0:58

Ahoj, lekce byla velmi přínosná a vše fungovalo jak mělo. Stránka se krásně zobrazila. Díky Honza.

 
Odpovědět
3. listopadu 0:58
Avatar
Oleh Čuprin :17. listopadu 7:57

Dobrý den ! Mám VS 2022. Otevřel jsem nový soubor jako bylo uvedeno na obrázku a vyskočila mne lišta ve které jsem našel HTML soubor a otevřel jeho. Mělo to úplně jiný výhled než ten který je tady na obrázku a ne dalo mně to možnost jeho pojmenovat index.HTML. Teď ten soubor mám ve DropBoxu a Text normálně se editují ve VS a mohu vyvést na obrazovku, ale otevřít v internet prohlížeči ne mohu a nový soubor kontakt, který jsem vytvořil ve 3 lekce má odkaz na ten soubor, a odkaz také ne funguji. Píše že stránku ne muže najít.
Předem děkuji za odpověď .

 
Odpovědět
17. listopadu 7:57
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Oleh Čuprin
David Čápka:19. listopadu 12:43

Ahoj, v lekci se nikde VS 2022 nepoužívá, používá se VS Code, coz je úplně jiný program.

Odpovědět
19. listopadu 12:43
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
Oleh Čuprin :19. listopadu 21:36

Ahoj ! Děkuji za odpověď. VS vodě už nainstalovat.

 
Odpovědět
19. listopadu 21:36
Avatar
Filip Rykala
Člen
Avatar
Filip Rykala:20. listopadu 12:54

Ahoj, všechno v pořádku, vše srozumitelné a jasné.

 
Odpovědět
20. listopadu 12:54
Avatar
Alice Hajná
Člen
Avatar
Alice Hajná:23. listopadu 15:58

Ahoj. V zobrazovači se mi po naprogramování neukazuje nadpis v horní šedivé liště Moje první webová stránka. Kontrolovala jsem všechno podle zadání a všechno podle vzoru v lekci, ale tohle se mi prostě nezobrazuje. Nevíte někdo proč?

 
Odpovědět
23. listopadu 15:58
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 290. Zobrazit vše