Od lat piszemy o szczegółach tworzenia stron internetowych, ale brakuje informacji o tym jak zacząć. Pora to zmienić.

Odwiedzane przez przeglądarkę strony są specyficznymi dokumentami, które można przygotować samemu. Większość z nich tworzona jest przy pomocy języków opisu treści (np. HTML).

Aby utworzyć własny dokument konieczny jest dowolny edytor tekstu (np. Notatnik lub specjalny {link_wew 5465}edytor dla web developerów{/link_wew}). Po prostu tworzymy nowy plik, wstawiamy w nim treść i zapisujemy go z rozszerzeniem .html. Na początku można skorzystać z załączonego przykładowego pliku (należy rozpakować archiwum).

Jak opisać dane?

Pobieramy przykładowy plik index.html (zwyczajowa nazwa dla głównego pliku) i otwieramy w edytorze tekstu. Jak widać plik taki specyficzną strukturę – składa się z informacji które chcemy opublikować i otaczających je znaczników (tagów), które informują jaką funkcję pełni dany element.

Tagami oznacza się akapit tekstu, nagłówek, odnośnik do innej strony (link) itp. Jeśli otworzymy plik w przeglądarce (edytor może zostać otwarty), to zobaczymy, że wyświetla się on inaczej niż w edytorze. Taki sposób tworzenia dokumentów nazywany jest WYWIWYG (to co napiszesz jest tym co otrzymasz). Spróbujemy rozszyfrować co zawiera dokument i jak go stworzyć.

Poznajemy pierwsze tagi

HTML zawiera zestaw standardowych tagów obsługiwanych przez popularne przeglądarki. Treść opisuje się w następujący sposób: {html}informacje{/html}. Dodatkowo każdy znacznik może mieć swoje własności i ich wartości. W przypadku odnośnika własnością będzie to, że wskazuje na jakiś adres a wartością lokacja pliku docelowego: {html}informacje{/html}. Przykładowy kod poniżej oznacza, że akapit (p) posiada swoją nazwę (id) która brzmi „akapit”, a informacja znajdująca się w akapicie to zdanie „Hello World!”. Tylko ono zostanie wyświetlone, a tagi służą do interpretacji dokumentu przez przeglądarkę.

{html}

Hello World!

{/html}

Niektóre tagi nie mają znacznika zamykającego – zapisuje się je w postaci {html}{/html} jeśli korzystamy z języka opartego o XML (XHTML, HTML 5) lub po prostu {html}{/html} jeśli piszemy w HTML-u 4.01.

W poprawnym pliku koniecznych jest kilka tagów. Na początku umieszczamy informacje o tym, jakiego typu będzie to dokument. Następnie otwieramy dokument (w naszym przypadku HTML). Standardowo zawiera on dwie sekcje: head, zawierającą informacje dla przeglądarki i body, w której znajduje się treść.

Szkielet dokumentu HTML 4.01

	
    		Informacje dla przeglądarki
	
	
    		Treść do wyświetlenia na stronie
	

Na razie w sekcji head umieścimy tylko tytuł strony, który wyświetla się na pasku tytułowym przeglądarki i informacje o kodowaniu – bez tego zamiast polskich znaków pojawią się nieprawidłowe symbole.

Dodajemy treść strony

W sekcji body, czyli „ciele” dokumentu możemy wstawić to co chcemy opublikować. Modyfikując wybrane fragmenty dołączonego pliku możemy zmienić treść albo ilość linków. To dobra pora, żeby skopiować akapity, zamienić je miejscami czy zamienić tag p (oznaczający akapit) na h1 (tytuł) i zobaczyć co się stanie. Należy pamiętać, żeby zamieniać zarówna tagi otwierające ({html}

{/html}) jak i zamykające ({html}

{/html}).

Przy opisywaniu treści tagami musimy przestrzegać następujących zasad formalnych:

1. Znaczniki zwyczajowo piszemy małymi literami

Dobrze: {html}

tytuł

{/html}

Źle: {html}

tytuł

2. Każdy znacznik musi zostać zamknięty (poza wyjątkami takimi jak img)

Dobrze: {html}

Akapit1

Akapit2

{/html}

Źle: {html}

Akapit1

Akapit2{/html}

3. Znacznik znajdujący się wewnątrz innego znacznika musi zostać zamknięty przed znacznikiem zewnętrznym

Dobrze: {html}

Akapit

{/html}

Źle: {html}

Akapit

{/html}

4. Wartości własności piszemy w nawiasach

Dobrze: {html}odnośnik{/html}

Źle: {html}odnośnik, odnośnik{/html}

Uwaga! Przeglądarka może poprawnie wyświetlić nawet błędne dokumenty. Aby sprawdzić poprawność pliku można skorzystać z tzw. validatora. Są one dostępne w edytorach, jako dodatki do przeglądarek i w sieci (http://validator.w3.org/#validate_by_upload). W ostatnim przypadku wystarczy wysłać plik, a strona pokaże nam czy jest on poprawny. Na początku ta opcja powinna wystarczyć.

Zaczynamy bez złych nawyków!

Są też inne rzeczy o których należy pamiętać, a które są niemożliwe do sprawdzenia przez program. Wygląd każdego elementu możemy zmienić przy pomocy arkusza stylów. Jeśli chcemy, nagłówek może być mniejszy od tekstu, a tekst pogrubiony, czerwony i pisany Comic Sansem. Wszystko to zmienia się jednak przy pomocy stylów; tagi służą do opisu czym jest dany element, a nie tego jak ma wyglądać.

Dawniej, kiedy nie było CSS-a, webmasterzy często korzystali z tego, że domyślnie nagłówki (np. h3) są większe niż tekst i… stosowali je zamiast akapitów (p), których rozmiar miał być większy. Żeby nie nabawić się złych nawyków należy od razu zapamiętać, że HTML-a używa się wyłącznie do opisu treści, a nie wyglądu (tzw. oddzielenie warstwy informacyjnej i prezentacji).

Takie podejście, nazywane „semantycznym” ułatwia pracę programom analizującym dokumenty. Dzięki niemu mogą je poprawnie zinterpretować. Człowiek widzący powiększony tekst na górze dokumentu domyśli się, że to tytuł, ale komputery tego nie potrafią. Musimy im to powiedzieć stosując odpowiedni tag (jaki?).

Przykład

Pobierz przykładowy plik

Co dalej?

Te podstawowe informacje oraz załączony plik powinny wystarczyć do stworzenia prostych dokumentów HTML. Kolejne informacje którymi należy się zainteresować to kaskadowe arkusze stylów (Cascade Style Sheet – CSS) dzięki którym możemy modyfikować wygląd strony oraz hosting, czyli miejsce na serwerze, który pozwala na upublicznienie dokumentów.

Przedstawione strony będą statycznymi dokumentami, których treść jest zawsze taka sama. W serwisach i portalach nie tworzy się jednak oddzielnych plików dla każdej strony, a generuje je za pomocą skryptów i programów, najczęściej pisanych w językach takich jak PHP, Java czy Python i wykorzystujących bazy danych (MySQL, MS SQL, Oracle Database). To tematy na oddzielne artykuły.