Máme za sebou seznámení se s HTML jazykem a konkrétní ukázkou základní webové stránky. V tomto díle si nainstalujeme vývojové prostředí, ve kterém budeme pracovat a také si vytvoříme první webovou stránku, kterou si spustíme v prohlížeči. A vysvětlíme si první tři HTML značky, které použijeme.
Visual Studio Code
Pokud se chystáte začít s tvorbou webových stránek, je
důležité vybrat si vhodný editor kódu. Jedním z nejlepších editorů kódu na trhu
je Visual Studio Code (VS Code) od společnosti Microsoft. V tomto článku vám
představíme, jak nainstalovat VS Code a jak ho používat k tvorbě webových
stránek.
Reklamní sdělení: Potřebujete vytvořit kvalitní, profesionální a cenově dostupné webové stránky?
Instalace Visual Studio Code
Nejprve musíte nainstalovat VS Code na svůj počítač. VS Code
je zdarma ke stažení pro Windows, macOS a Linux. Stačí navštívit webovou
stránku https://code.visualstudio.com/
a kliknout na tlačítko „Download“.
Po stažení instalátoru spusťte instalační program a
postupujte podle instrukcí na obrazovce. Po dokončení instalace byste měli být
schopni spustit VS Code.
Používání Visual Studio Code
Po úspěšné instalaci můžete začít používat VS Code k tvorbě
webových stránek. Zde je několik tipů, jak co nejlépe využít tento editor.
Otevření projektu
Pro otevření projektu v VS Code jednoduše klikněte na
tlačítko „Open folder“ a vyberte složku obsahující váš projekt. Pokud
projekt ještě nemáte, můžete kliknout na „New file“ a začít psát svůj
kód.
Používání rozšíření
VS Code umožňuje instalaci rozšíření, které vám mohou pomoci
při tvorbě webových stránek. Některá z nejlepších rozšíření pro VS Code jsou:
- Live
Server: umožňuje vám spouštět webové stránky přímo z VS Code, což
zjednodušuje vývoj a testování. - HTML
CSS Support: poskytuje rychlý a snadný přístup k CSS stylům pro vaše HTML
dokumenty. - Bracket
Pair Colorizer: zvýrazňuje dvojice závorek, aby bylo snadnější sledovat
strukturu vašeho kódu.
Používání kóduvých snippetů
VS Code také umožňuje používání kódových snippetů, což jsou
krátké úseky kódu, které lze snadno vložit do vašeho projektu. Tyto kódové
snippet mohou značně zrychlit tvorbu vašich webových stránek. Chcete-li použít
kódový snippet v VS Code, stačí napsat zkratku pro daný snippet a stisknout
klávesu Tab.
Používání klávesových zkratek
VS Code nabízí mnoho klávesových zkratek, které vám mohou
ušetřit spoustu času při psaní kódu. Některé z nejpopulárnějších klávesových
zkratek jsou:
- Ctrl
+ S: uloží aktuální soubor. - Ctrl
+ Shift + P: otevře nabídku příkazů. - Ctrl
+ /: zakomentuje nebo odkomentuje vybraný kód. - Ctrl
+ Shift + L: označí všechny výskyty aktuálního výrazu. - Ctrl
+ Shift + F: spustí hledání v celém projektu.
Tvorba první webové stránky
Visual Studio Code.
nový soubor a pojmenujte ho „index.html“. Tento název zajišťuje,
že se soubor automaticky otevře, pokud zadáte URL vašeho webu bez
specifikace konkrétního souboru.
Tag <p> (z angl. paragraph) nám uvozuje odstavce. Jak je vidět, základní značky, které jsou důležité, souvisí se strukturou textu. Je dobré mít na paměti, že webová stránka může mít teoreticky nekonečně mnoho podob, ale stále se jedná o strukturovaný dokument.
4) Uložte soubor a otevřete ho v prohlížeči. Stačí, když dvakrát kliknete levým tlačítkem myši na náš soubor index.html v průzkumníku souborů.
Dále můžete testovat různé přidávání odstavců nebo nadpisů jiných úrovní – nadpisy si probereme v dalším dílu.
Důležité: Je potřeba soubor vždy uložit a stránku v prohlížeči refreshnout (např. pomocí klávesové zkratky F5)
== Vaše Zvládnu to ==
