Praktycznie każda strona internetowa stworzona jest za pomocą języka opisu strony, nazwanego HTML (HyperText Markup Language). HTML daje dość dużą swobodę podczas tworzenia witryn, pozwalając formatować tekst, dodawać tabele, wypunktowania, obrazki, odnośniki do innych witryn i wiele innych elementów. Artykuł ten otwiera kurs tworzenia stron internetowych na poziomie podstawowym.
Szkielet
Stałe elementy strony internetowej
Opis strony w HTML-u składa się z tak zwanych tagów (znaczników). Tag jest swoistą informacją dla przeglądarki, mówiącą w jaki sposób ma zostać zinterpretowana informacja, która się w nim znalazła. Wśród wielu tagów istnieje kilka takich, których obecność jest obowiązkowa w każdej poprawnej witrynie. Tagi te tworzą szkielet strony internetowej:
Informacje opisujące stronę
Zawartość wyświetlana w przeglądarce
Jak widać, cała strona zawarta jest w tagu {html}{/html}. Zwróćmy uwagę na to, że wszystkie tagi składają się z dwóch elementów – tagu otwierającego oraz zamykającego. Tak jest w ogromnej większości przypadków, są jednak wyjątki od tej reguły (kilka z tych wyjątków poznamy czytając ten artykuł).
Należy przyjąć, że wszystkie tagi z zawartością (np. jakąś treścią) należy otworzyć, za tagiem otwierającym umieścić zawartość, a następnie zamknąć (tag zamykający ma zawsze taką samą nazwę jak otwierający, poprzedzoną znakiem /).
Należy jeszcze zwrócić uwagę na to, że nie można przeplatać różnych tagów otwierających oraz zamykających. Np. niepoprawny jest taki zapis:
Tagi należy zamykać w kolejności odwrotnej do ich otwierania, czyli gdy pierwszy został otworzony tag {html}{/html}, a po nim {html}
Aby być w zgodzie ze standardem ustalonym przez konsorcjum w3c (http://www.w3c.org), przed całym szkieletem strony należy jeszcze określić wersję HTML-a z której będziemy korzystać – w naszym przypadku będzie to XHTML 1.0 Transitional:
Nagłówek strony internetowej
Ustalamy informacje charakteryzujące naszą stronę
Tworząc stronę internetową, należy stworzyć jej nagłówek. Zawartość nagłówka umieszcza się w bloku {html}
…{/html}, a zawiera on takie informacje jak tytuł strony, jej opis, czy słowa kluczowe. Informacji tych może być o wiele więcej, jednak te są najistotniejsze, więc do nich się ograniczymy.Tytuł strony należy umieścić w tagu {html}
Krótki opis oraz słowa kluczowe (oba te elementy wykorzystywane są przez przeglądarkę internetową) umieszcza się w tagu {html}
Ważne, aby nie przesadzać z długością opisu strony. Maksymalnie powinno się tu umieszczać kilkadziesiąt wyrazów.
Słowa kluczowe są to wyrazy w jakiś sposób związane z tematyką strony. Umieszcza się je rozdzielając kolejne wyrazy spacjami.
Istnieje jeszcze jedna bardzo ważna wersja tagu meta, informująca przeglądarkę o tym, że będziemy korzystali z polskich znaków (takich jak ż czy ś). W świecie komputerów istnieje wiele sposobów na zapisanie takich znaków, przy czym jeden został uznany za standard obowiązujący w internecie. Standardem tym jest ISO-8859-2:
Zauważmy, że {html}
Dzięki temu przeglądarka nie będzie szukała w dokumencie tagu {html}{/html} (co prawda większość przeglądarek poprawnie zinterpretuje informację zawartą w tagach meta, jak i innych nie wymagających tagów zamykających w przypadku pominięcia znaku /, jednak pominięcie go stanowi naruszenie standardu oraz może spowodować problemy w nowszych wersjach przeglądarek).
Rys. 1 pokazuje szkielet strony internetowej oraz opis poszczególnych jego fragmentów.
ezHTML
Edytor do tworzenia stron internetowych
Niestety żaden standardowy edytor dostępny w systemie Windows nie potrafi zapisać dokumentu w wymagany sposób, czyli z wykorzystaniem ISO-8859-2. Darmowy program Edytor Znaczników HTML (ezHTML) nadrabia braki Windows, a jednocześnie zawiera kilka funkcji przyspieszających tworzenie prostych witryn w języku HTML.
W ramce \”Polskie znaki w ezHTML\” opisano, jak skonfigurować program, aby zapisywał dokumenty w standardzie ISO-8859-2.
Korzystając z ezHTML możemy za pomocą kilku kliknięć utworzyć szkielet strony (wymaga on modyfikacji elementu DOCTYPE, który odnosi się do HTML-a 4.0, podczas gdy my zajmujemy się nowszą jego wersją XHTML 1.0 Transitional, oraz dodania znaku / na końcu tagów meta) – patrz rys. 2.
Za pomocą myszki możemy sformatować tekst – zaznaczamy wybrany fragment tekstu, a następnie wybieramy odpowiednią opcję z paska narzędzi, np. na zakładce Format klikamy literkę B, co powoduje objęcie zaznaczonego tekstu tagiem {html}…{/html}. Rys. 3 przedstawia interesujące nas opcje dostępne na pasku narzędzi.
Mimo że będę pokazywał jak dany efekt uzyskać w edytorze ezHTML, nie jesteśmy zmuszeni do jego używania. Jeśli ezHTML nam nie odpowiada, możemy skorzystać z innego edytora (patrz ramka \”Inne edytory HTML\”).
Formatujemy tekst…
…czyli pogrubiamy, pochylamy, podkreślamy…
Gdy mamy już utworzony szkielet strony, możemy zająć się wypełnianiem jej treścią. Między tagi {html}
{/html} oraz {html}{/html} możemy wstawić dowolny tekst, a przeglądarka wyświetli go w swoim oknie. Jednak tak umieszczony tekst nie będzie zachęcający, bowiem przeglądarka internetowa ignoruje nawet typowe znaki nowej linii (czyli wstawione w tekście \”entery\”).Powoduje to wyświetlenie całego dokumentu w jednej linii (lub kilku, łamanych jednak wówczas, gdy reszta nie zmieści się już w linii bieżącej).
Aby nakazać przeglądarce wstawienie znaku nowej linii oraz kontynuowanie wypisywania tekstu już w linii kolejnej, należy skorzystać z tagu {html}
{/html}. Tag ten, jak również {html}
HTML pozwala sformatować tekst na wiele sposobów. Najczęściej wykorzystuje się:
Polskie znaki w ezHTML
W internecie stosujemy polskie znaki w standardzie ISO-8859-2. By skonfigurować edytor do pracy w tym standardzie wybieramy z menu Konfiguracja opcję Ustawienia (przycisk F8), która otworzy nam okno konfiguracyjne. Na drzewie z lewej strony okna wybieramy Edytor / Inne, a następnie z prawej strony zaznaczamy przycisk opcji ISO-8859-2. Teraz możemy kliknąć guzik Gotowe!
- pogrubienie – {html}{/html}tekst pogrubiany{html}{/html},
- pochylenie – {html}{/html}tekst pochylony{html}{/html},
- podkreślenie – {html}{/html}tekst podkreślony{html}{/html},
- przekreślenie – {html}
{/html}tekst przekreślony{html}{/html}.
Inne edytory HTML
ezHTML jest dostępny na stronie http://ezhtml.bydnet.com.pl. Oprócz niego istnieje wiele innych programów wartych uwagi, darmowych i komercyjnych, m.in.:
- Pajączek 5 NxG – http://www.creamsoft.com.pl/pajaczek/
- Nvu – http://aviary.pl/nvu/
- Tiger – http://www.tiger.rubikon.pl
- Extra Page – http://www.extrapage.com/index.php?str=extrapage
- WYSIWYG Web Builder – http://www.pablosoftwaresolutions.com/html/wysiwyg_web_builder.html
A oto inne, rzadziej stosowane style (w celu skrócenia zapisu, podaję tylko nazwę tagu otwierającego, pamiętajmy jednak, że każdy z tych tagów ma postać {html}
- {html}{/html} - wypisanie tekstu czcionką o stałej szerokości,
- {html}{/html} - wypisanie tekstu czcionką większą od pozostałego tekstu,
- {html}{/html} - wypisanie tekstu czcionką mniejszą od pozostałego tekstu,
- {html}{/html} - wypisanie tekstu w postaci indeksu dolnego,
- {html}{/html} - wypisanie tekstu w postaci indeksu górnego,
- {html}{/html} - informuje przeglądarkę, że tekst zawarty między nim ma zostać w jakiś sposób wyróżniony (najczęściej pochylony),
- {html}{/html} - wymusza pogrubienie tekstu,
- {html}
{/html}- informuje przeglądarkę, że tekst zawarty między nim jest fragmentem kodu np. programu) i powinien być wyświetlony czcionką o stałej szerokości znaku, - {html}{/html} - znacznikiem tym obejmuje się teksty przykładowe (np. ilustrujące przykładowy wynik działania jakiegoś programu, przykładowe rozwiązanie jakiegoś problemu itd.); tekst taki jest wyświetlany jak w przypadku znacznika {html}
{/html}, - {html}{/html} - przykładowy tekst komendy wpisanej przez użytkownika z klawiatury (może zostać wykorzystany np. w instrukcji obsługi programu),
- {html}{/html} - nazwa zmiennej bądź element, który powinien zostać zastąpiony przez użytkownika jakąś wartością,
- {html}{/html} - nazwa definicji bądź cała definicja,
- {html}{/html} - krótkie cytaty lub autorzy/źródło cytatów,
- {html}{/html} - skrót słowa,
- {html}{/html} - słowo utworzone z pierwszych liter kilku słów.
Znaczniki te można podzielić na dwie grupy: logiczną, która określa logiczne znaczenie tekstu w nich zawartego, oraz fizyczne, formatujące tekst. Do znaczników fizycznych należą: {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html} oraz {html}{/html}. Wszystkie pozostałe znaczniki należą do grupy znaczników logicznych.
Zgodnie z ewolucją języka HTML, należy wszędzie, gdzie to możliwe stosować znaczniki logiczne. W najnowszej wersji HTML-a (XHTML-u w wersji Strict, którym się tu nie zajmujemy) odchodzi się już zupełnie od stosowania znaczników fizycznych, takich jak {html}{/html}. Rys. 4 pokazuje zachowanie się poszczególnych znaczników w przeglądarce Opera.
Pułapki
Miejsca, na które warto zwrócić uwagę
Jednym z miejsc sprawiających problemy, jest używanie spacji. HTML ignoruje tradycyjne znaki nowej linii (przypominam, że aby wstawić znak nowej linii, należy skorzystać ze znacznika {html}
{/html}), jak również powtarzające się spacje.
Inaczej mówiąc, jeśli w tekście wystąpi kilka spacji pod rząd, przeglądarka potraktuje je tak, jak by to była tylko jedna spacja. Jedynym sposobem na umieszczenie kilku odstępów, jest zastosowanie zamiast nich znaku specjalnego {html} {/html}. W HTML-u jest sporo znaków specjalnych. Każdy z nich rozpoczyna się znakiem {html}&{/html}, a kończy średnikiem.
Innym problemem jest próba wyświetlenia znaku < bądź >. Ponieważ jest on wykorzystywany przez znaczniki, nie zawsze przeglądarka jest w stanie \"domyślić się\", czy występujący w tekście znak < oznacza rozpoczęcie nowego taga, czy też ma być wyświetlony jak każdy inny znak.
Zatem zawsze gdy chcemy wyświetlić znak <, należy użyć znaku specjalnego {html}<{/html}, natomiast w przypadku znaku > - znaku {html}>{/html}. Natomiast znak {html}&{/html} wyświetla po prostu znak &.
Działanie znaków specjalnych pokazuje rys. 5.
Uwaga: wszystkie znaczniki należy pisać małymi literami.
Gdy powstanie już pierwsza strona, aby obejrzeć wyniki w przeglądarce, trzeba zapisać ją na dysku (nadając jej rozszerzenie .html - EzHTML sam o to zadba). Następnie wystarczy odnaleźć zapisany plik na dysku (korzystając np. z Exploratora Windows) i kliknąć go dwukrotnie. Spowoduje to pojawienie się utworzonej strony w przeglądarce internetowej.
