Budujemy naszą pierwszą stronę internetową
Rozdział 2
Przypuśćmy, że chcemy zbudować stronę z ogłoszeniem o pracę. Powinno ono wyglądać tak, jak poniżej:
Przed tworzeniem jakiejkolwiek strony, bardzo dobrze jest podzielić jej treść na mniejsze elementy pod względem ich znaczenia. Spróbujmy wyróżnić każdą z części tego ogłoszenia, podobnie, jak zrobiliśmy to w przypadku newsa z The Verge.
Szybka analiza pomoże nam lepiej zrozumieć, jakie fragmenty tekstu powinniśmy zaznaczyć. Na czerwono – nagłówek artykułu, na zielono – obrazek, a fioletowym kolorem oznaczyliśmy dwa akapity z treścią ogłoszenia.
Wracając na chwilkę do analogii z edytorami tekstu, gdyby strony internetowe tworzono, jak zwykłe dokumenty tekstowe, prawdopodobnie otworzyłbyś teraz notatnik lub podobny program i napisał w nim treść ogłoszenia, a całość zapisał jako plik tekstowy:
Po chwili oddechu sprawdziłbyś swoje dzieło w przeglądarce internetowej:
Nie wygląda to jednak tak, jak sobie zamierzyliśmy. Mamy przed sobą jedną masę tekstu, nie wyświetla się też obrazek. Co teraz? Może powinniśmy spróbować stworzyć to ogłoszenie w Wordzie? Albo w Photoshopie? Nie do końca. Popełniliśmy kilka błędów, które trzeba naprawić. Największy z nich polega na tym, iż uznaliśmy, że strony internetowe to tylko zwykły tekst.
Przede wszystkim przeglądarka nie zrozumiała, który fragment tekstu jest tytułem, a który powinien być obrazkiem. Musimy nazwać dla niej każdy element według funkcji, jaką pełni w tekście. Dokonajmy więc małego tłumaczenia.
Jak zapewne zauważyłeś, pojawiły się specjalne oznaczenia, które na razie jednak nic Ci nie mówią. Zaufaj mi, lada moment dowiesz się, dlaczego są tutaj. Na razie spróbuj tylko skopiować je po kolei od góry do dołu, jakbyś brał do ręki klocki i układał je jeden pod drugim.
Powinieneś uzyskać coś podobnego:
Następnie zapisz całość do pliku html (przy okazji – do kodowania dobrze jest ściągnąć specjalny edytor kodu, taki jak Sublime Text Editor – zapewnie on o wiele wyższą wygodę w pisaniu kodu HTML niż w normalnym edytorze tekstu):
Spróbujmy teraz wyświetlić nowy plik w przeglądarce:
Jest nieco lepiej. Każdy z fragmentów tekstu wygląda teraz nieco inaczej, dodatkowo wyświetlił się obrazek. Nie jest to jeszcze finalna wersja, bo brakuje kolorów, pogrubienia i krój tekstu jest nieco inny. Nim się tym zajmiemy, skupmy się jeszcze na samej strukturze strony. Porównajmy, jak wyglądał zwykły dokument tekstowy, a jak prezentuje się kod HTML:
Dzięki temu, że otoczyliśmy fragmenty tekstu specjalnym znacznikami, powstał zupełnie inny dokument, który zrozumiała przeglądarka. Brawo! To właśnie jest HTML, czyli Hypertext Markup Language, a prościej - język znaczników (zwanych też tagami), dzięki którym możesz opisać tekst tak, by dogadać się z przeglądarką (a także z wyszukiwarkami i kilkoma innymi programami, o których dowiesz się na kolejnych stronach). Znaczniki HTML są jak słowa w mowie. Bez nich nie można zbudować strony internetowej.
W naszym przypadku użyliśmy tylko kilku tagów. Oto ich lista wraz z funkcją, jaką pełnią:
- <h1> - nagłówek pierwszego stopnia
- <img> - obrazek
- <p> - akapit tekstu
Jeśli więc na swojej stronie masz kilka akapitów z tekstem - otaczasz je znacznikiem <p>. Jeśli najważniejszy nagłówek w tekście - <h1>. I tak analogicznie.
Budowa każdego z tagów jest bardzo prosta:
<nazwa>treść</nazwa>Zwróć uwagę, że każdy znacznik trzeba, jak to się mówi w żargonie HTMLowców, "zamknąć". Jeśli więc uznasz, że w danym miejscu kończy się akapit, piszesz </p>. Jeśli to już koniec nagłówka pierwszego stopnia, dodajesz </h1>. Zwróć uwagę na ukośnik przed nazwą znacznika, to on daje znać przeglądarce, że to już koniec danego elementu.
Musisz też wiedzieć, że są też takie, których nie musisz zamykać. Na przykład <img>, służący do wstawiania obrazków. W naszym przykładzie użyliśmy go następująco:
<img src="images/white-cat.jpg">Jest ich jeszcze kilka - dowiesz się o wszystkich w dalszej części tej książki.
Najważniejsze, byś pamiętał, że tak jak słowniki językowe definiują zasób słów danego języka, tak i w HTML występuje swego rodzaju słownik, gdzie znajdziesz wszystkie znaczniki wraz z opisem, kiedy należy ich użyć. Na razie poznaliśmy tylko kilka. Klasyfikacją wszystkich zajmuje się W3C, specjalna organizacja, która na bieżąco reguluje, jak ma wyglądać język HTML. Nie zasiada w niej co prawda Bralczyk, ale możesz sobie wyobrazić, że podobnie do języka polskiego, pracują tam specjaliści. Listę wszystkich możliwych znaczników znajdziesz na ich stronie: http://www.w3.org/TR/html-markup/elements.html. Zapamiętaj również, że podobnie jak języki naturalne, HTML pod wpływem czasu co jakiś czas się zmienia. Obecnie mamy do czynienia z jego piątą wersją. Poprzednie wersje nosiły nazwę XHTML i HTML4.
Wracając do naszego przykładu, uzyskaliśmy rozwiązanie, którym jest poniższy kod:
<h1>Poszukujemy developera HTML i CSS</h1>
<img src="images/white-cat.jpg">
<p>Dla naszego klienta, Kociej Fabryki, poszukujemy zdolnego programisty stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>
<p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>Zawiera on dwa akapity tekstu:
<p>Dla naszego klienta, Kociej Fabryki, poszukujemy zdolnego programisty stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>
<p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>Kontynuując dalszą analizę treści naszego ogłoszenia warto zwrócić uwagę na fragment pierwszego akapitu: “poszukujemy zdolnego programisty". Wydaje mi się, że jest to najistotniejszy element całego tekstu. Zaznaczmy w HTML ten fakt, powiedzmy przeglądarce “hej, to jest nieco ważniejszy fragment" z całego kontekstu. Posłuży nam do tego element <strong>, którym oznaczamy ważniejsze znaczeniowo fragmenty tekstu. Dodajmy go do akapitu:
<p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>
<p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>Zauważ, że znalazł się on wewnątrz elementu <p> - to znaczy najpierw otworzyliśmy tag <p> i pomiędzy nim umieściliśmy kolejny - <strong>. W slangu programistycznym mówimy, że <strong> jest “dzieckiem" elementu <p>. Zapytasz zapewne, czy w ten sposób można zagnieżdżać różne tagi. Oczywiście, jednak każdy tag ma określoną listę możliwych elementów HTML, które można w nim umieścić, a więc zagnieżdżając dwa tagi HTML musimy najpierw sprawdzić, czy jest to dozwolone. To tak, jakby jeden klocek zbudowany byłby z kilku – w tym wypadku <p> stworzony został z tekstu i tagu <strong>.
Efekt wyróżnienia fragmentu tekstu prezentuje się następująco:
Zapamiętaj też, że przeglądarka internetowa wyświetla taki fragment jako pogrubiony, jednak nie jest to reguła, a jedynie miły efekt uboczny. Utarło się, że <strong> powoduje pogrubienie tekstu, jednak nie należy na tym polegać. Powodem użycia tego tagu HTML powinno być zaznaczenie ważnego fragmentu, a nie uzyskanie pogrubienia tekstu. Wszelkie efekty wizualne uzyskujemy dzięki językowi CSS, o którym dowiesz się więcej na dalszych stronach.