7.1 Pierwszy dokument html
Stwórzmy nasz pierwszy dokument html (plik html). Zwykle główny plik html projektu webowego nazywa się index.html: proponuję nie odstępować od tej świętej tradycji. Aby to zrobić, kliknij prawym przyciskiem myszy na folder web-storm-10:
Wpisz nazwę pliku:
WebStorm utworzy dla Ciebie plik i od razu go otworzy:
W rzeczywistości to pusty dokument html. Wszystko, co tu widzisz, to informacje serwisowe. Wszystkie realne dane będą umieszczone w tagach <body> i </body>. Dowiesz się, czym są tagi, na następnym wykładzie.
Napiszmy jakieś ciekawe i podniosłe przesłanie wewnątrz tych tagów. Na przykład takie:
Droga o długości 10 tysięcy mil zaczyna się od jednego kroku!
Możesz po prostu go skopiować i wkleić w linijce 8 (wewnątrz tagów <body>). Przyzwyczaj się do kopiowania tekstów — w ten sposób unikniesz błędów i literówek. Oto jak obecnie wygląda mój dokument:
Jeśli moja wersja tekstu nie jest wystarczająco mroczna i podniosła dla Ciebie, wybierz swoją — to w końcu Twój pierwszy projekt Webowy. Proponuję jeszcze 3 opcje do wyboru:
- "Ciemna strona oferuje mi coś, czego Jasna nie może dać: prawdziwą wolność."
- "Ciemna strona to droga do mocy, która nie zna granic."
- "Wybieram swój los, a jest on w mroku."
7.2 Uruchamianie pierwszego projektu
Zobaczmy teraz, jak „uruchomić” nasz projekt i sprawdzić, jak przeglądarka wyświetli nasz plik html.
Aby uruchomić projekt, kliknij zielony trójkąt w górnym menu. Po lewej stronie od niego znajduje się nazwa pliku, który zacznie się wykonywać:
Możesz też uruchomić swój plik, naciskając Shift+F10.
Zróbmy to, a zobaczysz, jak przeglądarka wyświetli Twój pierwszy plik html. Oto co wyświetliła moja przeglądarka:
Na pomarańczowo napisany jest host w url — serwer webowy naszego projektu, który uruchomił WebStorm.
Na zielono napisany jest ścieżka w url — ścieżka do index.html od korzenia naszego projektu.
Na niebiesko — informacje serwisowe dla WebStorm.
Na czerwono wyróżniony jest tekst, który przeglądarka wyświetliła na podstawie naszego dokumentu html.
7.3 Poprawa błędów
Co się stanie, jeśli popełnimy jakiś błąd? Jak zareagują na to przeglądarka i WebStorm?
Usuńmy pierwszy znak w lini 9 i zobaczmy, jak zareaguje WebStorm. Oto, co otrzymałem:
Co tu widzimy:
- Słowo w lini 9 przestało być tagiem, dlatego WebStorm teraz pisze je na szaro, a nie na żółto.
- W lini 10 masz zamykający tag
<html>, chociaż tag<body>powinien pojawić się przed zamykającym tagiem<html>. Dlatego WebStorm widzi tu błąd. - Liczba błędów w dokumencie jest wyświetlana w prawym górnym rogu – mamy jeden.
- Miejsce błędu jest także zaznaczane na scrollbarze — po prawej na dole. Bardzo wygodne dla długich dokumentów.
Uruchommy teraz ten plik i zobaczmy, jak przeglądarka zareaguje na błąd:
Przeglądarka również uważa, że niepełny tag <body> to po prostu tekst, dlatego wyświetla go jako zwykły tekst.
Brak zamykającego tagu <body> również nie zaniepokoił przeglądarki: problemy z tagami bywają czasami gorsze. Ogólnie wszystko wyszło dość przyzwoicie.
GO TO FULL VERSION