Vytvářejte webové stránky pomocí HTML a CSS 2.část - instalace VSC a první stránka

Vystavil dne

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

V následujících krocích si ukážeme, jak vytvořit webovou stránku ve Visual Studio Code, vepsat do těla stránky text a zobrazit si výsledek v prohlížeči.

1) Otevřete Visual Studio Code.

2) Vytvořte 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.

3) Vepište následující kód. Visual Studio Code Vám bude v průběhu napovídat - tím si zajistíte správné napsání značek a vyhnete se tak syntaktické chybě.

 

 Pojďme si trochu rozebrat značky, které jsme napsali. Vynecháme popisování struktury dokumentu (tedy tagy <head>,<body>,<html>), protože bychom je měli znát z předešlého dílu. 

Tag <title> nám ukuazuje název naší stránky v záložce prohlížeče.


Tag <h1> (z angl. heading) je tag, který nám říká, že obsah mezi značkami bude nadpis úrovně 1. 

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 ==


Komentáře

Okomentovat