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:

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

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:

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á.

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:

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.