Lekce 1 - Úvod do HTML
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:
![Webové stránky krok za krokem](images/5/html/html-staticky/html_hobi_web.png)
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.
Dropbox nebo OneDrive
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. Podobně funguje i program OneDrive od Microsoft, který již můžete mít nainstalovaný a pokud jej máte nastavený, měl by zálohovat vaši plochu a dokumenty.
Jako další verzovací nástroj se hojně používá GIT, jeho nastavení ale vydalo na samostatný kurz a Dropbox/OneDrive 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 textu a přidělíme jí tak význam. Těmto tagům se potom říká párové a brzy 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. 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 titulku. 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ý soubor. 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 s ním také prázdnou internetovou stránku.
Vytvoření složky
Jelikož náš web bude mít časem více souborů, vytvoříme si na něj
prvně složku, např. prvni_web/
. Ideálně v zálohované složce
Dropboxu nebo ve složce OneDrive, aby byla naše práce zálohovaná:
![Vytvoření složky v onedrive - Webové stránky krok za krokem](images/5/html/onedrive2.png)
Pokud se vám tyto nástroje nastavit nepodaří, můžete si složku vytvořit např. na ploše nebo v dokumentech a nastavit si je později.
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 - Webové stránky krok za krokem](images/5/html/html-staticky/vscode_new_file.png?v=2)
Do pole pro název souboru zadáme index.html
a potvrdíme
Enter:
![Vytvoření HTML souboru ve VS Code - Webové stránky krok za krokem](images/5/html/html-staticky/vscode_new_file_name.png?v=2)
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á.
Soubor nyní do naší složky uložíme pomocí menu Soubor -> Uložit nebo pomocí klávesové zkratky Ctrl + S.
Pokud se nechcete zdržovat s neustálým ukládáním nebo máte strach, že byste změny ukládat zapomínali, zaškrtněte si v Menu -> Soubor -> Automatické ukládání.
Nyní máme skutečně HTML soubor, se kterým můžeme ve VS Code dále pracovat.
Otevření stránky v prohlížeči
Přepneme se do průzkumníka Windows a otevřeme si naši složku
prvni_web/
. Soubor index.html
v ní uložený
otevřeme ve webovém prohlížeči, kde uvidíme prázdnou stránku:
Kódování UTF-8
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ě vpravo 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ě nápis UTF-8:
![UTF-8 ve VS Code - Webové stránky krok za krokem](images/5/html/vscode_utf8.png)
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.
V další lekci, Struktura HTML stránky, si ukážeme, jak vypadá struktura HTML stránky a vytvoříme si první stránku s krátkým textem.