Po co właściwie przejmować się standardami, pisząc kod HTML i CSS? To pytanie zadaje sobie niejeden webmaster. Konieczność dbania o zgodność z dodatkowymi wytycznymi wymaga często większych nakładów pracy i zmiany wyrobionych nawyków. A przecież dotychczas wszystko wszystko działało i wyglądało tak, jak powinno.
Za wyznaczanie i nadzorowanie standardów
tworzenia stron WWW odpowiedzialna jest
organizacja World Wide Web Consortium,
w skrócie W3C. To właśnie dokumentacja przygotowana
przez W3C powinna być punktem odniesienia
dla każdego twórcy stron internetowych.
Pisanie stron w zgodzie ze standardami ma
wiele zalet. Po pierwsze daje efekt w postaci
bardziej zwięzłego kodu. Wszystkich zmian wyglądu
możesz dokonywać w arkuszu stylów CSS,
bez zaglądania do plików opisujących strukturę
dokumentu (XHTML). Wprowadzanie modyfikacji
okaże się także mniej czasochłonne, ponieważ
zamiast szukać fragmentów odpowiedzialnych
np. za odnośniki, nadasz im inny wygląd jednym
wpisem w pliku CSS.
Dodatkowo warto pamiętać, że strony oparte
o CSS ładują się szybciej, ponieważ przeglądarka
internetowa zapamiętuje style i wczytuje je potem
już z pamięci podręcznej. Kolejny plus jest taki, że
strony zgodne ze standardami, są lepiej indeksowane
przez roboty wyszukiwarek. Jeżeli chcesz
się o tym przekonać na własne oczy, sprawdź
jak wygląda dowolna poprawna strona w trybie
tekstowym (http://www.delorie.com/web/lynxview.html), czyli tak jak widzą ją roboty. A następnie
porównaj ją ze swoją i sprawdź czy jest tak samo
czytelna, zarówno dla ciebie jak i robotów.
Nie można również zapominać o osobach
niedowidzących i zadbać o to, aby strona była
poprawnie odczytywana przez programy czytające.
Dlatego zamiast zagnieżdżać setki zbędnych tabel,
lepiej poświęcić czas na naukę dobrych zasad
tworzenia stron WWW.
Właściwy doctype
DTD (document type declaration) jest elementem,
który określa wersję użytego w dokumencie
języka HTML. Niejednokrotnie bywa pominięty,
a powinien być umieszczony w pierwszej linijce,
przed innymi poleceniami. Obecnie zalecanym
standardem jest XHTML 1.1, usunięte w nim zostały
definitywnie elementy zdeprecjonowane, czyli
takie, których W3C nie poleca używać .
W takich dokumentach na początku należy
dodać deklarację XHTML 1.1 Strict (tylko taka
istnieje):
Inne deklaracje nie są zalecane, ale mogą być
stosowane. Jeszcze niedawno organizacja W3C
dopuszczała stosowanie przestarzałych znaczników
przy jednoczesnym zachowaniu zgodności ze
standardami.
Specyfikacja XHTML 1.0 oraz HTML 4.01
dopuszczały stosowanie wersji przejściowych. Dawało
to gwarancję, że taka strona jest poprawna.
DOCTYPE wskazuje bowiem ścieżkę do pliku DTD,
który podpowiada przeglądarce, jak dany symbol
odczytać. Warto przybliżyć zapisy poprzednich
standardów, aby móc lepiej zrozumieć strukturę
dokumentu, z którym przyjdzie nam pracować.
Dla standardu XHTML 1.0, wersja DTD Strict
czyli ścisła deklaracja pozwala, by dokument zawierał
jedynie elementy i atrybuty, które nie zostały
zdeprecjonowane:
Transitional DTD, czyli wersja przejściowa,
umożliwia stosowanie zdeprecjonowanych znaczników:
Istnieje jeszcze wersja deklaracji dla dokumentów,
które zawierają elementy ramek: FRAME,
FRAMESET, NOFRAMESET. Jest to Frameset DTD:
Analogicznie wyglądają deklaracje dla standardu
HTML 4.01. Należy tu jednak podkreślić,
że obecnie W3C zaleca używanie dla wszystkich
nowo powstałych stron internetowych XHTML
1.1 Strict. Nie ma już wersji przejściowych,
co oznacza, że używanie zdeprecjonowanych
znaczników nie będzie zgodne z obowiązującymi
standardami.
Warto w tym miejscu wspomnieć o pracach
nad XHTML 2.0 oraz HTML 5. Kolejne projekty
standardu XHTML 2.0 zakładają wprowadzenie
wielu zmian. Między innymi wycofanie znaczników
{html}{/html}, tytułów {html}
…
{/html} jest nagłówkiem najwyższej rangi).
Dla elementów tekstowych stosujemy znaczniki
akapitu czyli np. {html}
…
{/html}, a dla wszelkiego
rodzaju list, w tym również menu powinniśmy
używać znaczników do tego przeznaczonych np.
{html}
- …
{/html}.
Jak więc powinna wyglądać struktura dokumentu?
Najważniejsze elementy to tytuł, a także
nagłówki, które mogą dodatkowo zawierać słowa
kluczowe. Przyjrzyj się uważnie przykładowej
podstronie z wpisem na blogu:
Notka 1 | Blog X
Blog X
Notka 1
...
Zgodnie z zaleceniami W3C tytuł strony i h1
są tożsame, natomiast h2 powinno zawierać
elementy tytułu.
Z kolei menu na stronie powinno wykorzystywać
znaczniki {html}
- …
{/html} lub {html}
- …
{/html}:
Ta metoda jest również wykorzystywana do
tworzenia poziomych menu. Aby menu było
poziome, wystarczy dodać odpowiednią klasę.
Najważniejszą rolę odgrywa atrybut display:
.menu {
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
.menu li{
display: inline;
margin: 0;
}
Od nagłówków i menu przejdźmy teraz do
zawartości strony. Treść powinna być umieszczona
w elementach blokowych {html}
{/html}. Każdy
div może zawierać w sobie inne elementy blokowe,
co nie jest poprawne np. w przypadku akapitu
{html}
…
{/html}.
Jeśli chcemy dodać notkę na blogu składającą
się z kilku akapitów, jej kod będzie następujący:
pierwszy akapit
drugi akapit
Niejednokrotnie zaistnieje potrzeba umieszczenia
ilustracji we wpisie. Właśnie wtedy można
wykorzystać drugi element blokowy zagnieżdżony
w pierwszym:
pierwszy akapit
drugi akapit
podpis do ilustracji
W ten sposób stworzyliśmy blok tekstowy
\”treść_notki\” zawierający dwa akapity tekstu
i blok \”ilustracja\”, w którym umieściliśmy ilustrację
z podpisem.
W samym akapicie możemy natomiast umieszczać
znaczniki odpowiedzialne za wygląd tekstu,
takie jak na przykład wytłuszczenie, albo stosować
znacznik liniowy {html}…{/html} z odpowiednią
klasą zdefiniowaną w arkuszu stylów. Dzięki
temu możemy zawrzeć i wyróżnić w akapicie
nazwy plików, fragmenty kodu, wyrażenia matematyczne
lub cytaty:
pierwszy akapit fragment, który chcemy wyróżnić np. cytat dalsza cześć akapitu
Jak widzisz, semantyczny kod to taki, w którym
wszystkie elementy są jasne i zrozumiałe. Pamiętając
o tym, używaj znaczników zgodnie z ich
funkcją, a nie w celu osiągnięcia doraźnego efektu.
Tworząc semantyczny kod warto pamiętać
o jeszcze jednej rzeczy. Identyfikatory oraz nazwy
klas powinny odnosić się do funkcji, jaki dany
element pełni na stronie, np. \”tresc_wpisu\”
odpowiada za treść, natomiast za wygląd \”lewy_
box_zielony\”. Na stronie http://www.w3.org/QA/Tips/goodclassnames znajdziesz wiele przykładów
semantycznych nazw identyfikatorów.
Style CSS
Tworząc stronę WWW, warto trzymać się zasady
wedle której treść i część reprezentacyjna powinny
być od siebie oddzielone. W tym celu stosuj
style CSS, za pomocą których będziesz kontrolować
wszystkie elementy odpowiedzialne za rozstawienie
elementów, grafiki oraz inne ozdobniki strony.
Celem, do którego powinni dążyć twórcy stron
WWW, jest wykluczenie elementów odpowiedzialnych
za wygląd strony z kodu HTML.
Pewnie zastanawiasz się, czyli w takiej sytuacji
liczba klas ma znaczenie. Otóż nawet jeśli każdy
element będzie miał swoją klasę czy identyfikator,
nie będzie miało to wpływu na semantykę.
Taki kod stanie się po prostu mniej zrozumiały
i bardziej rozwlekły. Dlatego tylko z tego powodu
warto zachować umiar, aby nie przesadzić z ilością
zbędnych klas, które będą zadeklarowane
prawie wszędzie, a plik CSS będzie rozrastał się
bez opamiętania.
Odnośniki oraz ilustracje
Jednak same znaczniki to nie wszystko. Należy
również wspomnieć o kilku dobrych zasadach
tworzenia odnośników i wstawiania grafik na
strony WWW.
Po pierwsze odnośniki. Zadbaj, aby na stronie,
którą tworzysz nie było niedziałających odnośników.
Występowanie takowych nie tylko będzie
kłopotliwe dla odwiedzających, ale również utrudni
pracę robotom indeksującym strony. Warto również
pamiętać o dodawaniu atrybutu \”title\”, który
określa dokąd prowadzi dany link:
link
Kolejnym atrybutem, którego nie można pominąć,
jest alt, stosowany przy grafikach. Jest to tekst
alternatywny dla elementów nietekstowych, czyli
właśnie grafik:
Pomijanie atrybutu \”alt\” utrudni przeglądanie
strony użytkownikom, którzy mają wyłączone wyświetlanie
obrazków, np. ze względu na oszczędność
transferu. Również roboty, które odczytują
dokumenty w trybie tekstowym, mogą \”pogubić\”
się na stronie, tym bardziej jeśli stosujesz odsyłacze
graficzne. W celu sprawdzenia, jak twoja strona
prezentuje się w przeglądarce tekstowej, skorzystaj
z narzędzi dostępnych pod adresem www.delorie.
com/web/lynxview.
Strona do druku
Tworząc stronę powinieneś zadbać o możliwość
łatwego wydrukowania jej zawartości.
Przygotuj w związku z tym style odpowiadający za
drukowanie. Powinieneś w nich wyeliminować elementy,
które na wydruku są zbędne, jak chociażby
niektóre grafiki. Najlepszym przykładem jest strona
http://www.csszengarden.com, gdzie zastosowany
kod XHTML jest taki sam, a różnice w wariantach
strony do wydruku i do przeglądania wynikają
z kodu CSS.
Warto wykorzystać tę wiedzę przygotowując
swoją wersję do druku. Unikniesz dzięki temu
tworzenia osobnej podstrony.
Aby do jednego pliku XHTML załączyć dwa pliki
CSS należy wystarczy zapis:
W ten sposób jeden plik CSS będzie odpowiedzialny
za wyświetlanie strony podczas oglądania
(screen), a drugi podczas drukowania (print). Aby
sprawdzić działanie tej metody, wystarczy że stworzysz
dla swojej strony pusty arkusz stylów drukuj.
css i włączysz w przeglądarce podgląd wydruku.
Więcej informacji na temat typów mediów obsługiwanych
przez CSS znajdziesz na stronie http://www.w3.org/TR/CSS21/media.html#media-types.
Adresy URL
Szykując nową stronę warto od razu rozprawić
się ze wszystkimi kwestiami związanymi z adresami
URL. Po pierwszy zadbaj o to, by użytkownik,
który wpisze adres z błędem lub kliknie w nieaktualny
odnośnik nie trafił w pustkę. Czyli na stronę
o niewiele mówiącej treści \”błąd 404\”. Przyjazna użytkownikowi strona, to taka, która nie pozostawi
go z tym problemem samego. Dlatego zadbaj
o zdefiniowanie stron błędów.
Przyczyną takich pomyłek mogą być zagmatwane
lub zbyt długie adresy podstron. Aby
rozwiązać ten problem zadbaj o przyjazne linki.
Użytkownikom o wiele łatwiej przyjdzie zapamiętać
adres www.strona.pl/lodowki niż www.strona.
pl/kategoria-2.html. Na tej zmianie zyska również
sama witryna, która będzie lepiej indeksowana
przez roboty wyszukiwarek. Przyjazne linki tworzy
się poprzez edycję pliku .htaccess i zastosowanie
komendy mod_rewrite. Dokładną instrukcję,
jak tego dokonać, znajdziesz w Internet
Makerze 1/2008.
Test Acid
Niejednokrotnie może się okazać, że strona
którą przygotowaliśmy w zgodzie ze standardami,
nie wyświetla się poprawnie we wszystkich przeglądarkach
internetowych. Dlatego warto wiedzieć,
jak poszczególne z dostępnych programów sobie
z tym radzą. Pomoże nam w tym test Acid stworzony
przez WaSP.
WaSP czyli Web Standards Project jest organizacją,
która zachęca producentów przeglądarek do
przestrzegania standardów W3C. Nie jest to zadanie
łatwe, ponieważ już od samych początków,
twórcy przeglądarek próbują wymyślać własne
rozwiązania. Jednak zdaniem WaSP przestrzeganie
ogólnych standardów W3C zredukuje pracochłonność
nad aplikacjami nawet o 25%.
|
|
|
Testy Acid2 i Acid3 ilustrują, w jakim procencie
dana przeglądarka internetowa spełnia stawiane
wymogi. Uznaje się, że przeglądarka przeszła test,
jeśli obrazek w niej wyświetlany jest identyczny
jak ten ze wzorca. Dla przykładu test Acid2
(http://www.webstandards.org/action/acid2/) zdały
przeglądarki Firefox 3.0, Safari 3.1.2 i Opera 9.5.
Prawie bezbłędnie przechodzi go również Internet
Explorer 7 z tą tylko różnicą, że na stronie pozostaje
widoczny pionowy pasek przewijania.
Od marca tego roku dostępny jest również
test Acid3. Można go samodzielnie przeprowadzić
pod adresem http://acid3.acidtests.org. Jak
pokazują ilustracje, jedyną przeglądarką, która
przechodzi bez problemów jest Safari 3.1.2.
Zarówno Internet Explorer 7 jak i Firefox 3.0
wypadają kiepsko w tym eksperymencie. Najbliżej
sukcesu jest Opera 9.5, która osiągnęła 83 punkty
na 100 możliwych.
Tworząc dzisiaj stronę, która zgodna jest ze
standardami masz pewność, że również w przyszłości
będzie ona się poprawnie wyświetlać.
Dzieje się tak, ponieważ nie została ona przygotowała
pod konkretną wersję programu, lecz z zachowaniem
ogólnych reguł. I nawet wówczas, gdy
będzie już dostępna nowa wersja przeglądarki, nie
będzie to oznaczać konieczności przebudowywania
kodu całej strony.
|
|
|
Strony w sieci
Jak się okazuje, wiele dużych serwisów internetowych
ma problemy z poprawnym kodem HTML.
Dla przykładu strona wyszukiwarki Google.pl nie
waliduje się poprawnie. Jeśli zajrzysz w źródło
strony, okaże się, że w kodzie HTML znalazły się
znaczniki odpowiedzialne za wygląd, a także
te uznane za przestarzałe, jak chociażby {html}{/html}. Również portal Yahoo! generuje podczas
walidacji błędy.
Warto zastanowić się nad generowanymi w ten
sposób kosztami. Tak rozbudowany kod popularnej
witryny przyczynia się do większego transferu.
Każdy zbędny bajt w połączeniu ze sporą ilością
odsłon, daje w efekcie tysiące bajtów przesyłanych
zupełnie bez potrzeby. A wystarczyłoby zastąpić
przestarzałe znaczniki stylami CSS i przenieść je do
oddzielnego pliku. To, co wydaje się mniej istotne
w przypadku stron o mniejszej oglądalności, dla
autorów często odwiedzanych serwisów zaczyna
mieć duże znaczenie.
Podsumowanie
Jak już zapewne rozumiesz, strona zgodna ze
standardami to taka, która jest zarazem czytelna,
stworzona z najnowszymi trendami i zaleceniami
a także przyjazna użytkownikom, również tym
niedowidzącym.
Ponadto dobrze zaprojektowana strona jest
lepiej indeksowana w wyszukiwarkach internetowych,
co bezpośrednio przekłada się na jej pozycję.
A który webmaster nie chciałby, aby jego serwis
internetowy stał się popularny?
