Czas podsumowań

Pora na chwilę odetchnąć. Na poprzednich stronach poznałeś wiele zasadniczych konceptów tworzenia stron internetowych. Myślę, że to dobry moment na podsumowanie tego, co do tej pory wiemy, by być przygotowanym na kolejne rozdziały.

Zaczęliśmy od określenia, jak zbudowane są strony internetowe. Ustaliliśmy, że jest to zwykły tekst z pewnymi dodatkami, które opisują jego poszczególne fragmenty. Wybraliśmy więc najmniejsze, niepowtarzające się części strony według funkcji, jaką pełnią w całym dokumencie. Porównaliśmy je do klocków, które ułożone byłyby jeden pod drugim.

Dokonując takiej analogii ustaliliśmy, że każdemu klockowi odpowiada jakiś tag HTML. Tagi HTML są z góry zdefiniowane i nie wymyślamy ich. Jeśli musimy zaznaczyć na stronie akapit z tekstem - używamy tagu <p>. Jeśli oznaczamy cały artykuł - <article>. Jeśli mamy do czynienia ze swego rodzaju nagłówkiem – wybieramy <h1>, <h2>, <h3>, <h4>, <h5> lub <h6>, w zależności od tego kontekstu. Całą listę tagów HTML, które możemy użyć znajdziemy na stronie specyfikacji HTML.

Stwierdziliśmy, że tagi możemy zagnieżdżać. Na przykładzie artykułu z portalu internetowego zgodziliśmy się, że składa się on z tytułu, dodatku multimedialnego (najczęściej obrazek) i akapitów z treścią. Dokonując takiego podziału, wybraliśmy tagi HTML, które pełnią te właśnie funkcje. Były to <header>, <h1>, <figure> i <p>, które znalazły się z kolei w obrębie <article>. Nazwaliśmy je "dziećmi" <article>, który jest z kolei "rodzicem". W HTML staramy się właśnie myśleć hierarchicznie. Jeśli widzimy na stronie jakiś prostokąt, dajmy na to z tłem i obramowaniem, a w nim kolejnych kilka (np. akapity tekstu), to zapewne w kodzie HTML znajdziemy odpowiednik tego prostokąta, a w jego obrębie zapisane pozostałe elementy. Nic w przeglądarce nie wyświetla się bez przyczyny. Każda warstwa, każdy element, który widzisz na stronie ma swój odpowiednik w kodzie HTML i CSS.

Następnie ustaliliśmy, że strony internetowe zbudowane tylko w HTML-u są nieatrakcyjne wizualnie. Dzięki CSS można to na szczęście zmienić. Pisząc kod CSS wybieramy tagi, które chcemy ozdobić, zapisując to w specjalnym selektorach. A więc jeśli chcemy "dostać się"" do wszystkich akapitów w <article> piszemy tak:

article p {}

Oprócz tego, bardzo pomocne są klasy w CSS. Dzięki nim możemy uniezależnić kod CSS od tagów w pliku HTML (przecież to w sumie dwa, osobne pliki!). Każdy tag może być oznaczony klasą poprzez dodanie mu atrybutu class="nazwa klasy". Nazwy klas wymyślasz sam. Utarło się, że są to angielskie wyrazy, które opisują funkcję, jaką pełni w dokumencie dany element HTML. Na przykład jeśli przechowujemy w nim informację prasową, możemy napisać tak:

<article class="news">...</article>

Wtedy w CSS znajdziemy taki element w poniższy sposób:

.news {}

Oprócz klas możemy używać identyfikatorów. Dodajemy je w ten sposób:

<article id="main-news">...</article>

Za każdym razem należy dobrze przemyśleć użycie atrybutu id, ponieważ identyfikatorami oznaczamy unikatowe w dokumencie elementy.

Używając identyfikatora "main-news", w kodzie CSS dostajemy się do nich tak:

#main-news {}

W ten sposób nauczyliśmy się najbardziej istotnych założeń HTML i CSS. Tworząc strony zawsze dokonuj najpierw podziału treści na mniejsze części i oceń, jaką funkcję pełnią w dokumencie. Wyróżnij menu, poszczególne artykuły, a w nich tytuły, daty, akapity, cytaty i obrazki. Bądź szczegółowy jak tylko się da. Następnie opisz wyróżnione części odpowiednimi tagami HTML, które pasują do treści, jaką chcesz w nich zawrzeć. Jeśli dany element jest istotny z wizualnego punktu widzenia, prawdopodobnie warto dodać mu klasę w CSS, by potem łatwo zmienić jego wygląd, jak i innych elementów tej samej klasy. Zapamiętaj, że HTML odpowiada za treść, a CSS za wygląd. Nigdy nie sugeruj się tym, że przeglądarka wyświetla dany element pogrubiony lub podkreślony bez Twojej ingerencji. Jest to zapewne jej domyślne zachowanie i nie należy na tym polegać, bo równie dobrze kolejna wersja programu może je zmienić.

Wielu zapyta zapewne, jak to się dzieje, że po wpisaniu danego adresu widzimy konkretną stronę. Na przykład po wpisaniu w przeglądarce adresu ferrante.pl pokazuje się mój blog. Otóż aby publikować nasze strony w Internecie musimy zdobyć dostęp do serwera www i wykupić domenę internetową (w moim wypadku nazwa domeny to "ferrante.pl"). Domenę można nabyć w wielu firmach (np. nazwa.pl) i jest to koszt kilkudziesięciu złotych. Kupując na przykład "jankowalski.pl" zakładamy, że nasze strony będą dostępne pod właśnie tym adresem. Zdobywając domenę, należy następnie wykupić powierzchnię serwerową. Tak jak strony najpierw testujemy u siebie na dysku, tak aby były dostępne w internecie należy wgrać je na serwer, który sprawia, że nasza witryna będzie widoczna dla innych internautów, nie tylko dla nas. Z reguły w tym momencie trzeba skonfigurować naszą domenę, by wskazywała na nasz świeżo zakupiony serwer. Czas teraz na umieszczenie w internecie pierwszego pliku ze stroną w HTML. Uznajmy, że nazywa się on blog.html. Musimy więc wgrać go na serwer (podobnie jak wgrywamy zdjęcia czy inne pliki). Posłuży nam do tego dowolny program tzw. klient FTP (np. Filezilla). Po wszystkim, gdy nasz plik blog.html wyląduje na serwerze, strona będzie dostępna pod jankowalski.pl/blog.html.