Aby stworzyć stronę HTML w Visual Studio Code, należy przejść przez kilka kroków, które obejmują: instalację edytora, konfigurację środowiska, tworzenie pliku HTML, organizację projektu oraz uruchomienie podglądu w przeglądarce. Poniżej znajdziesz szczegółowy przewodnik, zilustrowany przykładami oraz propozycjami praktycznych zastosowań.
Instalacja Visual Studio Code
- Pobierz najnowszą wersję programu Visual Studio Code ze strony producenta.
- Zainstaluj edytor, postępując zgodnie z instrukcjami instalatora.
- Po zakończonej instalacji uruchom Visual Studio Code.
Przygotowanie folderu roboczego
- Otwórz Visual Studio Code.
- W menu wybierz opcję File > Open Folder i wskaż miejsce, w którym chcesz przechowywać swoje projekty. Utwórz nowy folder np. MojaStrona i zaakceptuj wybór.
Tworzenie nowego pliku HTML
- W panelu Explorer kliknij ikonę Nowy plik i nazwij plik np. index.html.
- Otwórz plik index.html do edycji.
Szybkie generowanie szablonu HTML (Emmet)
Visual Studio Code posiada wsparcie dla narzędzia Emmet, które pozwala szybko generować szablony kodu.
- W pustym pliku wpisz wykrzyknik
!i naciśnijTab. - Automatycznie wstawiony zostanie podstawowy szablon HTML5:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
</head>
<body>
</body>
</html>
Pisanie i organizacja treści
W obrębie elementu <body> możesz dodawać swoje treści:
<h1>Witamy na mojej stronie!</h1>
<p>To jest mój pierwszy akapit.</p>
<p>Kolejna linia tekstu na stronie.</p>
<ul>
<li>Pierwszy punkt listy</li>
<li>Drugi punkt listy</li>
</ul>
<a href="https://www.przyklad.pl">Zobacz więcej</a>
Rozszerzenia zwiększające wygodę pracy
Aby zwiększyć komfort i możliwości pracy, warto zainstalować pomocne rozszerzenia –
- Live Server – umożliwia podgląd strony na żywo w przeglądarce; instalujesz je poprzez zakładkę Extensions w VS Code, wpisując Live Server i zatwierdzając instalację;
- Prettier – automatyczne formatowanie kodu;
- Auto Rename Tag – automatyczne zmienianie odpowiadających tagów HTML.
Podgląd strony w przeglądarce
- Po zainstalowaniu Live Server, kliknij prawym przyciskiem myszy na plik HTML i wybierz polecenie Open with Live Server;
- Strona otworzy się automatycznie w przeglądarce i każda zmiana w kodzie HTML będzie natychmiast widoczna po zapisaniu pliku.
Przykładowe zastosowania własnej strony HTML
Możesz stworzyć:
- Wizytówkę osobistą – zawierającą Twoje imię, kontakt i listę umiejętności;
- Portfolio projektów – prezentację swoich prac, np. zdjęcia, linki do repozytoriów;
- Zbiór notatek – prosty, przejrzysty dokument z linkami, listami i tabelami;
- Stronę informacyjną – np. harmonogram wydarzenia, cennik lub prezentację miejsc.
Przykład prostego portfolio
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Portfolio Jana Kowalskiego</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<p>Web developer | Grafik | Entuzjasta nowych technologii</p>
<h2>Moje projekty:</h2>
<ul>
<li><a href="projekt1.html">Strona firmowa ABC</a></li>
<li><a href="projekt2.html">Aplikacja ToDo</a></li>
</ul>
<h2>Kontakt</h2>
<p>Email: [email protected]</p>
</body>
</html>
Organizacja plików i folderów
Dla porządku zaleca się:
- Umieszczanie dodatkowych plików CSS w folderze css;
- Plików graficznych w folderze img;
- Dodatkowych skryptów JavaScript w folderze js.
Przykładowa struktura projektu:
MojaStrona/
├── index.html
├── css/
│ └── style.css
├── img/
│ └── logo.png
└── js/
└── script.js
Ułatwienia w pracy z Visual Studio Code
- Funkcja podświetlania składni dla HTML, CSS i JS;
- Możliwość składania kodu (folding), np. zwiń cały element
<html>, aby skupić się na wybranej części dokumentu; - Obsługa skrótów klawiszowych, np.
Ctrl+Sdo szybkiego zapisywania pliku.
Visual Studio Code to potężne narzędzie dla początkujących i zaawansowanych twórców stron internetowych. Umożliwia szybkie tworzenie, edycję, organizację i podgląd plików HTML, a dzięki bogatemu ekosystemowi rozszerzeń praca nad projektami staje się efektywna i przyjemna.
