1. diel - Úvod do HTML

Vitajte v prvej lekcii kurzu o tvorbe webových stránok. Naučíme sa tu používať jazyk HTML, ktorý je základom pre tvorbu webov. Sám o sebe je veľmi jednoduchý a všetky webové stránky ho využívajú. Zložitejšie weby HTML miešajú s niekoľkými ďalšími jazykmi, napríklad s CSS, ktoré si v kurze tiež uvedieme. Prejdeme tu úplné základy HTML a CSS a vytvoríme svoje prvé webové stránky, ktoré tiež nahráme na internet. Budú vyzerať takto:

Minimálne požiadavky kurzu

Na tento kurz nepotrebujete žiadne špeciálne znalosti, stačí bežná práca s počítačom

Príprava nástrojov

Začnime prípravou nástrojov.

Inštalácia Visual Studio Code

Na písanie HTML kódu nebudeme používať editory typu Poznámkový blok, pretože im chýba mnoho funkcií. Medzi ne patrí najmä prehľadné zvýrazňovanie kódu alebo podpora kódovania slovenčiny a koncov riadkov. Stiahnime si teda nejaký šikovnejší editor. Skvelým pomocníkom a nástrojom pre vývoj zložitejších projektov je Visual Studio Code. Je zadarmo a funguje na všetkých platformách. Tento editor si teraz stiahneme a nainštalujeme.

Pokročilejší používatelia môžu použiť platené profesionálne IDE ako napríklad WebStorm alebo PhpStorm, ak plánujete neskôr pracovať aj v PHP.

Dropbox alebo OneDrive

Okrem editora potrebujeme nejaký nástroj, ktorý bude zálohovať a verzovať našu prácu. Nemôžeme sa spoľahnúť na to, že stránku jednoducho budeme ukladať, pretože sme ľudia a nie stroje. Ľudia robia chyby a keď prídete o niekoľkodennú alebo dokonca niekoľkotýždňovú prácu, môže to zabolieť. Je dobré naučiť sa na toto myslieť hneď od začiatku. Veľmi odporúčam program Dropbox, ktorý je extrémne jednoduchý a sám vaše súbory verzuje (teda zachováva zmeny v čase a je možné sa vrátiť k starším verziám projektu) a zároveň synchronizuje s webovým úložiskom. Aj keby ste si projekt omylom zmazali, prepísali, ukradli vám notebook alebo vám skolaboval pevný disk, vaše dáta zostanú v bezpečí. Dropbox tiež umožňuje zdieľať jeden projekt medzi viacerými vývojármi. Viac o Dropboxe si prečítate v tomto článku, ktorý obsahuje zároveň pozvánku do Dropboxu s 0,5 GB priestoru navyše. Podobne funguje aj program OneDrive od Microsoft, ktorý už môžete mať nainštalovaný, a pokiaľ ho máte nastavený, mal by zálohovať vašu plochu a dokumenty.

Ako ďalší verzovací nástroj sa hojne používa GIT, jeho nastavenie ale vydalo na samostatný kurz a Dropbox/OneDrive zatiaľ na naše účely bohato postačuje.

Jazyk HTML

HTML je takzvaný značkovací jazyk a skladá sa zo značiek, tzv. tagov. Tagy slúžia na to, aby sme nimi mohli obaľovať text, a tak mu dávať určitý význam (napríklad "toto je dôležitý text", "toto nadpis", "zoznam", "tabuľka"). Na tento účel slúžia obvykle otváracie a ukončovacie/u­zatváracie tagy, ktorými ohraničíme danú oblasť textu a pridelíme jej tak význam. Týmto tagom sa potom hovorí párové a čoskoro si ich ukážeme.

HTML nie je programovací jazyk, pretože neumožňuje vykonávať žiadne logické operácie, slúži iba na zostavovanie dokumentov. Programovacie jazyky potom často HTML generujú alebo upravujú, čo si ukážeme v nadväzujúcich kurzoch. Predtým sa HTML používalo aj na designovanie stránok, ale pretože vzniknutý kód bol potom neprehľadný, oddelil sa design do samostatného súboru a v HTML riešime iba obsah stránky.

Tagy sa píšu do špicatých zátvoriek, napríklad <title>, čo, ako ďalej zistíme, označuje titulok stránky. Veľmi špecifickým tagom je odkaz, ktorý umožňuje prechádzať medzi jednotlivými stránkami, a tak ich previazať. Od toho skratka HTML (HyperText MarkUp Language = odkazovací a značkovací jazyk).

Tag vs. element

V HTML sa budeme stretávať aj s pojmom element, čím sa myslí prvok, ktorý na stránku pomocou tagov vkladáme. Tagy sú teda textové značky, pomocou ktorých definujeme elementy. Napríklad pomocou tagov <title> a </title> definujeme element titulku. Pomôckou môže byť, že tag vždy referuje na kód, zatiaľ čo element na výsledný prvok v stránke ako v dokumente.

Naša prvá webová stránka

HTML stránku je veľmi jednoduché vytvoriť, je to vlastne len textový súbor. Súbory s HTML kódom majú obvykle príponu .html alebo niekedy len .htm. Úvodný súbor webovej stránky je zvykom pomenovávať index.html. Práve tento súbor bude potom internetový server hľadať ako prvý, keď naše stránky nahráme na internet a niekto na ne vstúpi.

Poďme si tento súbor teraz vytvoriť a s ním aj prázdnu internetovú stránku.

Vytvorenie priečinka

Keďže náš web bude mať časom viacero súborov, vytvoríme si preň najprv priečinok, napríklad first_web/. Ideálne v zálohovanom priečinku Dropboxu alebo OneDrive, aby bola naša práca zálohovaná:

Ak sa vám tieto nástroje nastaviť nepodarí, môžete si priečinok vytvoriť napríklad na ploche alebo v dokumentoch a nastaviť si ich neskôr.

Vytvorenie HTML súboru

Spustíme si Visual Studio Code a v hornom menu klikneme na File -> New File...:

Do poľa pre názov súboru zadáme index.html a potvrdíme Enter:

Je veľmi dôležité dodržať presné názvy súborov, pretože pri nahraní na linuxový server môže tento server rozlišovať veľké a malé písmená. Všetky písmená v názve súboru sú preto malé.

Súbor teraz do nášho priečinka uložíme pomocou menu File -> Save alebo pomocou klávesovej skratky Ctrl + S.

Ak sa nechcete zdržiavať neustálym ukladaním alebo máte strach, že by ste zmeny ukladať zabúdali, zaškrtnite si v Menu -> File -> Auto Save.

Teraz máme skutočne HTML súbor, s ktorým môžeme vo Visual Studio Code ďalej pracovať.

Otvorenie stránky v prehliadači

Prepneme sa do prieskumníka Windows a otvoríme si náš priečinok first_web/. Súbor index.html v ňom uložený otvoríme vo webovom prehliadači, kde uvidíme prázdnu stránku:

Kódovanie UTF-8

V niektorých editoroch je potrebné nastaviť spôsob kódovania (nielen) slovenských znakov, k čomu v dnešnej dobe slúži moderné univerzálne kódovanie UTF-8. Visual Studio Code berie UTF-8 ako predvolené, a preto sa s nastavovaním nemusíme trápiť. Ak sa však chcete uistiť, že naozaj používate UTF-8, na dolnej lište vpravo by ste okrem informácie o tom, kde sa nachádzate v kóde alebo aký jazyk používate, mali vidieť práve nápis UTF-8:

Je veľmi dôležité, aby ste svoje stránky editovali iba v editoroch, čo UTF-8 podporujú, inak dôjde k rozbitiu diakritiky. Napríklad je zlý nápad vytvoriť stránky vo Visual Studio Code a potom do nich niečo dopísať v Poznámkovom bloku.

V ďalšej lekcii, Štruktúra HTML stránky, si ukážeme, ako vyzerá štruktúra HTML stránky a vytvoríme si prvú stránku s krátkym textom.