Výuka IT

Jak začít s tvorbou webových stránek

Naštěstí pro psaní webu nepotřebujeme žádné drahé programy ani kouzelné hůlky. Stačí nám jen dvě věci:

  1. 🌐 Webový prohlížeč

    To je ten program, který používáme, když brouzdáme po internetu. Například Google Chrome, Mozilla Firefox, Microsoft Edge nebo Safari. Potřebujeme ho k tomu, abychom viděli, jak naše webová stránka vypadá. Prohlížeč si umí přečíst náš HTML kód a proměnit ho ve vizuální stránku.

    Logo Google Chrome

  2. 📝 Textový editor

    To je speciální program, kde budeme psát náš HTML kód. Můžeme použít i obyčejný Poznámkový blok (Notepad) ve Windows nebo TextEdit na Macu, ale existují mnohem lepší a chytřejší editory, které nám psaní kódu usnadní. My si ukážeme ten nejlepší pro začátečníky: Visual Studio Code (VS Code).

    Logo Visual Studio Code

    VS Code si můžeme zdarma stáhnout z oficiálních stránek: code.visualstudio.com.

První kroky ve VS Code

Až si nainstalujeme VS Code, uděláme pár důležitých věcí:

  1. Stáhněte si "Live Server" (Živý server)

    V VS Code je taková super věc, které se říká "rozšíření" (extensions). Jedno z nejlepších rozšíření pro začátečníky je Live Server. Proč je to super?

    • Když si ho nainstalujeme, můžeme si svoji HTML stránku prohlížet v prohlížeči.
    • A co je nejlepší: Kdykoli něco změníme v kódu a uložíme soubor, stránka se v prohlížeči automaticky obnoví! Nemusíme ji pořád dokola zavírat a otevírat, nebo mačkat tlačítko "obnovit".

    Jak si ho stáhnout:

    1. Otevřme VS Code.
    2. V levém menu uvidíme ikonku čtyř kostiček (to je "Rozšíření"). Klikněme na ni.
    3. Do vyhledávacího pole nahoře napišme "Live Server".
    4. Měl by se objevit "Live Server" od Ritwick Dey. Klikněme na něj a pak na tlačítko "Install" (Nainstalovat).

    Tip pro profíky: Po instalaci Live Serveru se v pravém dolním rohu VS Code objeví tlačítko "Go Live". Když na něj klikneme, naše HTML stránka se otevře v prohlížeči!

  2. Vytvoření složky a prvního HTML souboru

    Teď si připravíme místo pro náš první web. Je dobré mít pro každý projekt samostatnou složku. Udržíme si tak pořádek.

    1. Na ploše (nebo kdekoli jinde, kde si ukládáme věci) si vytvořme novou složku. Můžeme ji nazvat třeba moje_prvni_webovka.
    2. Otevřme VS Code.
    3. Jděme na menu File > Open Folder... (Soubor > Otevřít složku...) a vyberme složku, kterou jsme právě vytvořili (moje_prvni_webovka).
    4. Teď, když máme složku otevřenou ve VS Code, uvidíme ji vlevo v takzvaném "Průzkumníku". Vedle názvu složky uvidíme ikonu pro "New File" (Nový soubor) – vypadá to jako papírek s plusem. Klikněme na ni.
    5. Napišme název souboru: index.html.

    Gratulujeme! Právě jsme vytvořili svůj první HTML soubor! Soubor index.html je velmi speciální, protože to je obvykle ta hlavní, "domovská" stránka každého webu. Když někdo napíše jen adresu naší webové stránky (třeba www.moje_stranka.cz), prohlížeč automaticky hledá soubor index.html.