Języki HTML i CSS mają tę zaletę, że do ich nauki potrzeba naprawdę niewiele. Jeśli używasz systemu Windows, to na upartego wystarczy Ci nawet Notatnik i dowolna przeglądarka internetowa. Oczywiście, jak już była mowa w poprzednich rozdziałach, Notatnik nie jest idealnym wyborem, ale na początek w zupełności by wystarczył.
Jeśli jednak nauka ma przebiegać sprawnie, przyjemnie i efektywnie, to warto od samego początku przygotować sobie odpowiednie środowisko pracy, aby poznawać profesjonalne narzędzia, które i tak wcześniej czy później staną Ci się potrzebne. Dotyczy to w szczególności osób, które poważnie myślą o opanowaniu technologii sieciowych.
Potrzebne programy
Jak w takim razie powinien wyglądać zestaw podstawowych narzędzi do rozpoczęcia pracy z HTML i CSS? Poniżej znajduje się ich lista:
- Dobry edytor kodu HTML i CSS – np. Visual Code Studio i ewentualnie dodatkowo Notepad++ do wprowadzania szybkich i prostych zmian w plikach.
- Kilka przeglądarek internetowych do testowania tworzonych stron – zainstaluj przynajmniej Chrome, Firefoksa, Operę i Safari. W Edge też należy testować swoje strony, ale jeśli używasz systemu Windows, to tę przeglądarkę już masz zainstalowaną.
- Edytor grafiki – jeśli nie planujesz profesjonalnie zajmować się projektowaniem grafiki, to w zupełności wystarczy Ci Paint.net.
To jest podstawowy zestaw programów, który świetnie sprawdzi się podczas nauki. Jeśli któregoś z nich jeszcze nie masz zainstalowanego na swoim komputerze, zrób to teraz – wszystkie są bezpłatne i łatwo dostępne w internecie.
Po zainstalowaniu potrzebnych programów należy przygotować środowisko pracy na dysku. To brzmi szumnie, ale tak naprawdę chodzi po prostu o utworzenie folderu i podfolderów w wybranym miejscu na dysku, w których będą zapisywane różne pliki.
Struktura katalogów
Podstawowa strona internetowa mieści się w pojedynczym pliku z rozszerzeniem .html, ale jeśli chcemy utworzyć bardziej rozbudowany i atrakcyjny wizualnie serwis, to musimy dodać podstrony, grafiki, arkusze stylów i skrypty, które też gdzieś musimy przechowywać. Aby nad wszystkim zapanować i się nie pogubić, najlepiej jest utworzyć folder główny do przechowywania całego serwisu, a w nim – podfoldery do przechowywania plików określonego rodzaju.
Powiedzmy na przykład, że chcemy stworzyć serwis internetowy poświęcony różnym ciekawym osobom. W takim przypadku możemy utworzyć folder główny o nazwie Ciekawi_ludzie, a w nim podfoldery o nazwach img, css i js.
W folderze img będziemy przechowywać wszystkie grafiki używane przez różne strony serwisu, w folderze css umieścimy arkusze stylów, a w folderze js znajdą się skrypty JavaScript, jeśli zdecydujemy się ich używać. Pliki .html będą zapisywane w folderze głównym. Omawiana struktura katalogów wygląda tak:
Ciekawi_ludzie css js img
Następnie folder Ciekawi_ludzie możemy otworzyć w Visual Studio Code, aby uczynić go naszą przestrzenią roboczą w tym edytorze.
Teraz jeszcze powiemy sobie parę słów na temat rozszerzeń i typów plików.
Czym jest rozszerzenie pliku
Rozszerzenie pliku (albo rozszerzenie nazwy pliku) to ostatni człon jego nazwy, który określa rodzaj treści, czyli typ pliku. Na przykład rozszerzenie .txt oznacza plik tekstowy, .html – stronę internetową, .xls – arkusz kalkulacyjny programu Excel, .docx – dokument programu Word itd. Domyślnie system Windows nie wyświetla rozszerzeń znanych typów plików, ale ich typ można rozpoznać po charakterystycznej ikonie programu, w którym są otwierane.
W systemie Windows i wielu innych systemach rozszerzeniem nazwy pliku jest jej część od ostatniej kropki do końca. Na przykład w nazwie plik.txt rozszerzeniem jest .txt, natomiast w nazwie plik.txt.html rozszerzeniem jest .html.
Pliki .html
Dokument HTML to plik tekstowy z rozszerzeniem .html. Dlatego można sobie ułatwić pracę przez zmianę jednego ustawienia systemu. Aby łatwo tworzyć pliki tekstowe o dowolnym rozszerzeniu, takim jak .html, należy w opcjach folderów włączyć wyświetlanie rozszerzeń znanych typów plików. Jeśli tego nie zrobisz, wszystko co wpiszesz w polu nazwy pliku, system Windows będzie traktował jako nazwę pliku, do której doda rozszerzenie .txt.
Na przykład, jeśli klikniesz prawym przyciskiem myszy w pustym miejscu w folderze, wybierzesz opcję Nowy/Dokument tekstowy i utworzysz plik tekstowy o nazwie strona, to jego pełną nazwą z rozszerzeniem będzie strona.txt, a jeśli potem dodasz na końcu nazwy swojego pliku rozszerzenie .html, to otrzymasz plik o nazwie strona.html.txt.
Sprawdź to. Otwórz dowolny folder albo przejdź na Pulpit i kliknij w pustym miejscu prawym przyciskiem myszy. Następnie w menu podręcznym kliknij pozycję Nowy, po czym wybierz opcję Dokument tekstowy. Nadaj swojemu nowemu plikowi dowolną nazwę, na przykład test i naciśnij klawisz Enter. W ten sposób otrzymasz plik tekstowy o nazwie test. Jeśli masz włączone pokazywanie rozszerzeń znanych typów plików, to nazwa pliku będzie miała postać test.txt, w przeciwnym przypadku będzie widoczna tylko cześć test. W każdym razie rozpoznasz plik tekstowy po jego charakterystycznej domyślnej ikonie (pod warunkiem, że nic wcześniej nie zostało zmienione).
Jeżeli zmienisz rozszerzenie swojego pliku .txt na .html, to powinna zmienić się także jego ikona na ikonę domyślnej przeglądarki internetowej w Twoim systemie. Jeśli po dodaniu na końcu nazwy pliku członu .html jego ikona pozostaje bez zmian, to znaczy, że masz wyłączone pokazywanie rozszerzeń znanych typów plików i teraz pełna nazwa Twojego pliku to test.html.txt – czyli nadal jest to plik z rozszerzeniem .txt.
Pokazywanie rozszerzeń wszystkich plików
Aby uniknąć przykrych niespodzianek, najlepiej jest włączyć wyświetlanie rozszerzeń plików w ustawieniach folderów. W systemie Windows 10 jest to bardzo proste. Należy w tym celu wykonać następujące czynności:
- Otwórz dowolny folder
- U góry ekranu kliknij kartę Widok
- Znajdź grupę opcji Pokazywanie/ukrywanie
- W tej grupie zaznacz kliknięciem myszy pole wyboru Rozszerzenia nazw plików
Od tej pory system Windows będzie pokazywał rozszerzenia wszystkich plików, dzięki czemu będzie można je dowolnie zmieniać.
Wprowadzanie drobnych zmian
Czasami podczas pracy nad stroną chcemy wprowadzić tylko drobną zmianę w jednym z plików .html. W takim przypadku najwygodniej jest użyć prostszego edytora niż Visual Studio Code, np. Notatnika albo programu Notepad++. Notatnik też się nadaje, ale jest aż za bardzo prymitywny. Idealnym wyborem w takiej sytuacji jest Notepad++.
Jeśli na Twoim komputerze jest już zainstalowany program Notepad++, to wystarczy, że klikniesz wybrany plik .html prawym przyciskiem myszy i wybierzesz z menu opcję Edit with Notepad++ (Edytuj w Notepad++). Poniżej widać stronę testową z poprzedniego rozdziału otwartą właśnie w ten sposób w tym edytorze.
Notepad++ jest równie szybki, co Notatnik, ma bardzo prosty interfejs, a jednocześnie zapewnia wiele funkcji przydatnych programiście, jak chociażby kolorowanie składni, które bardzo ułatwia pracę.
Wiesz i masz już praktycznie wszystko, czego potrzebujesz, aby zacząć uczyć się języków HTML i CSS. W następnym rozdziale przechodzimy więc już do właściwej nauki języków HTML i CSS. Dowiesz się w nim, jak wygląda podstawowa struktura dokumentu HTML.
Podsumowanie
- Przed rozpoczęciem pracy zainstaluj wszystkie potrzebne programy.
- Przed rozpoczęciem pracy utwórz strukturę katalogów, aby mieć wszystko pod kontrolą.
- Rozszerzenie pliku określa jego typ.
- Do szybkiego wprowadzania drobnych zmian w plikach z kodem źródłowym doskonale nadaje się edytor Notepad++.
Ćwiczenia
- Zainstaluj wszystkie omówione w tym rozdziale programy.
- Utwórz opisaną w tym rozdziale strukturę katalogów.
- Ręcznie utwórz plik tekstowy o nazwie test.txt w folderze Ciekawi_ludzie, po czym zmień jego rozszerzenie na .html, tak aby uzyskać plik o pełnej nazwie test.html.
- Otwórz plik test.html utworzony w poprzednim ćwiczeniu za pomocą edytora Notepad++ i przepisz do niego kod widoczny na powyższym zrzucie ekranu.
- Otwórz plik test.html w przeglądarce internetowej.