Aby zostać profesjonalnym programistą, trzeba umieć posługiwać się narzędziami. W tym rozdziale dowiesz się, jak tworzyć i uruchamiać kod HTML na własnym komputerze.
Krok 1: Pobierz edytor tekstu
Do pisania kodu nadaje się każdy edytor tekstu. Notatnik jest również dobrym rozwiązaniem, ale korzystanie z jego wszystkich funkcji może być trudne. Zainstaluj edytor, który został zaprojektowany specjalnie do tworzenia stron internetowych. Jako przykład weźmy Visual Studio Code.
Wejdź na stronę code.visualstudio.com i pobierz edytor. Kliknij dowolny z niebieskich przycisków, jeśli masz system Windows. Jeśli zainstalowany jest system OS X, kliknij opcję Inne platformy.
Strony pobierania programu Visual Studio Code
Instalacja przebiega w normalny sposób. Trzeba będzie uruchomić Notepad ++, kliknąć „Next” kilka razy, a następnie umieścić kilka znaczników wyboru.
Krok 2: Uruchom edytor, a następnie rozejrzyj się po nim
Na świeżo zainstalowanym VS Code pojawia się ekran z wieloma odnośnikami. Do tych odnośników można się odwołać później, ale musisz mieć wszystko gotowe do użycia.
Byłoby wspaniale, gdyby wszystkie pliki potrzebne do pracy znajdowały się w jednym folderze. Jeśli tylko Twój projekt nie jest zbyt duży, jest to możliwe. Utwórzmy folder o nazwie „Working”, aby VS Code wyświetlał tylko jego zawartość.
Visual Studio Code: Dodawanie folderów
Otwórz menu wyboru folderów, aby dodać folder obszaru roboczego.
Utwórzmy folder personal_page w dowolnej lokalizacji, a następnie wprowadźmy go.
Po lewej stronie zostanie wyświetlony panel Explorer z pustym obszarem roboczym Untitled. Utwórzmy folder.
Krok 3: Dodaj pliki
Po utworzeniu folderu jest on teraz pusty. Kliknijmy prawym przyciskiem myszy nagłówek personal_page i dodajmy pliki index.html style.css script.js. To wystarczy, aby rozpocząć pracę.
Visual Studio Code pozwala na tworzenie plików
Krok 4: Zrób to prosto
Wszystkie trzy pliki będą teraz otwarte w zakładkach. Trudno jest się między nimi przełączać. Aby to ułatwić, kod ze stylami można przenieść do innej części okna, np. na dół. Aby zobaczyć rezultaty, kliknij prawym przyciskiem myszy zakładkę style.css.
Podzielony ekran w Visual Studio Code
Krok 5: Dodaj kod
Edytujemy tylko index.html (znaczniki) i style.css (pliki stylów), pozostawiając script.js do edycji w przyszłości. Kod można napisać samemu lub skorzystać z gotowego kodu. Będziemy również pobierać kod z kursów interaktywnych.
