Výuka IT

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

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

  1. 🌐 Webový prohlížeč

    To je ten program, který používáte, když brouzdáte 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ůžete použít i obyčejný Poznámkový blok (Notepad) ve Windows nebo TextEdit na Macu, ale existují mnohem lepší a chytřejší editory, které vá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ůžete zdarma stáhnout z oficiálních stránek: code.visualstudio.com.

První kroky ve VS Code

Až si nainstalujete 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 nainstalujete, můžete si svoji HTML stránku prohlížet v prohlížeči.
    • A co je nejlepší: Kdykoli něco změníte v kódu a uložíte soubor, stránka se v prohlížeči automaticky obnoví! Nemusíte ji pořád dokola zavírat a otevírat, nebo mačkat tlačítko "obnovit".

    Jak si ho stáhnout:

    1. Otevřete VS Code.
    2. V levém menu uvidíte ikonku čtyř kostiček (to je "Rozšíření"). Klikněte na ni.
    3. Do vyhledávacího pole nahoře napište "Live Server".
    4. Měl by se objevit "Live Server" od Ritwick Dey. Klikněte 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 kliknete, vaš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žíte si tak pořádek.

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

    Gratuluji! Právě jste 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 vaší webové stránky (třeba www.moje_stranka.cz), prohlížeč automaticky hledá soubor index.html.