Tworzenie stron WWW, projektowanie zgodne z W3C

- tworzenie stron www -

Przyszedł moment, że znalazłem chwilę czasu i co nie co naskrobałem o tworzniu www ;) enjoy!

» Trochę historii

HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to język programowania składający się ze znaczników (ang. tags) stosowany do pisania stron WWW.

Historia HTML'a sięga 1981 roku. Na samym początku było tylko kilka znaczników pozwalających wyświetlać tekst oraz linki. HTML był początkowo rozwijany przez producentów przeglądarek, co spowodowało późniejsze niezgodności w wyświetlaniu stron. W związku z taką sytuacją zostało stworzone W3C - World Wide Web Consortium (organizacja zajmująca się ustalaniem standardów).

Przez te kilkanaście lat aż do dzisiaj powstało wiele wersji HTML'a i kilka sposobów konstruowania strona za jego pomocą (wykaz hronologiczny):

» Czysty HTML, zerowa wersja

Na samym początku do budowy stron został stworzony HTML, który posiadał tylko kilkanaście zaczników umożliwijących umożliwiających wyświetlanie tekstu wraz z linkami do podstron lub innych stron.

» Tworzenie stron za pomocą ramek

Ramki... sam ich kiedyś używałem - czego się nie wstydzę :P
Nie będę tu opisywał jak robić strony oparte na ramkach, bo nie ma się co oszukiwać... to już archaizm. Natomiast warto wspomnieć, o co w nich chodzi i dlaczego nie powinno się ich używać: Ramki - <framset>, <iframe> zostały stworzone po to aby „ułatwić” konstruowanie layout'u strony, w której występują powtarzające się elementy - menu, nagłówek, stopka. Polega to na tym, że podstawowy dokument jest „sklejany” z kilku innych. I teraz warto wymienić najważniejsze wady takiej techniki:

Jeżeli strona nie mieści się w oknie przeglądarki może zostać „ucięta” ważna część którejś ramki... np. menu (kilka razy trafiłem na takie strony)
Strona w ramkach nie nadaję się do druku
Takie strony bardzo źle się indeksuje przez roboty sieciowe (Googlebot), nie jest zliczana cała treść... a co za tym idzie strona traci w rankingu.
Strona posiada cały czas ten sam adres (prowadzący do strony głównej). Nie możemy zatem podać komuś linku do konkretnej podstrony.
Jeżeli otworzymy bezpośrednio którąś podstronę nie zostaną załadowane wszystkie elementy strony, np. menu... (chyba kiedyś widziałem jakiś skrypt JS rozwiązujący ten problem)

Oczywiście jest jeszcze więcej wad ramek... no ale myślę, że wymienione wyżej wystraszą amatorów tej techniki

» Tworzenie stron za pomocą tabelek

Tabele - <table>. Po rewolucji ramkowej, nastąpił rozkwit layout'ów opartych na tabelkach. Tabele jak sama nazwa wskazuje, służą do prezentowania danych tabelarycznych (rozkład jazdy, tabela wyników.. itp.). Niestety ktoś genialny wpadł na pomysł, że przy zastosowaniu border='0' czyli ukryciu obramowania tabel, można je zastosować jako szkielet strony, tj. do wypozycjonowania elementów na stronie. Jak w przypadku ramek przedstawiam najważniejsze wady takiej techniki:

NIELOGICZNOŚĆ - nie miałem „przyjemności” tworzyć tabelkowych stron, ale domyślam się, że nie robi się tego ręcznie, tj. za pomocą edytorów testowych (nie wliczając wyjątków, prawdziwych twardzieli). Tabelkowy kod strony to naprawdę niezły śmietnik, tworzony zazwyczaj przez generatory. Dlaczego nielogiczność? Treść upchana jest w komórki tabel, porównywująć treść w kodzie strony z treścią prezentowaną w przeglądarce ciężko doszukać się podobieństwa... A przecież o to chodzi, żeby najważniejsze teksty na stronie zaprezentować na początku i w odpowiedniej kolejności... zarówno dla użytkownika jak i dla robota (Googlebot).
Śmietnik w kodzie. Jak już wyżej pisałem, w kodzie jest naprawdę nieciekawa sieczka, masa niepotrzebnych tagów. Jaka jest tego wada poza trudnością edycji? Jednym z kryteriów oceny strony przez Googlebota jest stosunek ilości treści do ilości tagów.
Odbiór stron przez osoby niepełnosprawne (np. przeglądarki czytające) jest bardzo ograniczony.
W tabelkowych stronach rzadko można się doszukać logiki - nie widziałem żeby ktoś w stronie tabelkowej miał w poprawny sposób użyte nagłówki, akapity... czasem zwykła lista jest oparta na tabelce... OK, klient, czy zwykły internauta nie zagląda do kodu strony... Ale Pan Gógiel zagląda i to często. Poprawne wykorzystanie nagłówków podnosi pozycje strony w wyszukiwarkach.

Mam nadzieję, że to powinno wystarczyć. Ale w takim razie co powinniśmy stosować przy tworzniu stron WWW

» Tworzenie stron - metoda poprawna ;) - DIV+CSS

CSS - kaskadowe arkusze stylów

HTML - nie trzeba chyba tłumaczyć co to :P

PHP - najczęściej stosowana funkcja(przeze mnie.. i chyba nie tylko) - include(); - pozwala wklejać do dokumentów powtarzające się elementy (menu, nagłówek, stopka, reklamy :PP )

Jeżeli strona nie jest za bardzo skomplikowana PHP nie będzie nam za bardzo potrzebny (ja oczywiście namawiam do korzystania z niego.. wystarczy załapać kilka funkcji i PHP rozwiązuje wiele problemów).

Zanim za cokolwiek się zabierzemy trzeba sobie coś uświadomić - do czego służy HTML, a do czego CSS.

HTML - język znacznikowy za pomocą, którego budujemy strony WWW. HTML służy do podziału treści strony, tj. utorznie nagłówków, stworzenie elementów blokowych <div>, a w nich kolejne elementów blokowzch lub liniowych (<span>, <span>, <p>), innych nagłówków (niższego stopnia). HTML nie odpowiada za wygląd strony, tj. kolory, tło, wypozycjonowanie elementów względem siebie.

CSS - bazując na poprzednim opisie łatwo wywnioskować, że CSS uzupełnia HTML właśnie o wygląd strony. Tło, kolory, wielkość i krój czcionek, wzajemne relacje między elementami strony, czyli pozycjonowanie nagłówków, paragrafów, elementów blokowych itp.

Jak najprościej sprawdzić czy strona jest zbudowana zgodnie z poprawnym zastosowaniem HTML i CSS ? Wyłączyć style, strona powinna wyglądać „czarno na białym”, czyli jak za starych czasów :D - obejrzyj bieżącą stronę bez CSS. Oczywiście ta metoda nie jest nieomylna ;) ale jak mamy np. /np. bo ja tak mam ;)/ FireFox'a z pluginem Web Developer to klikamy Shift+Ctrl+s i jak na stronie zostaje kolorowe tło, wypozycjonowane elementy nie zmieniają za bardzo swojego położenia - oznacza to, że coś tu nie gra.
Tak na marginesie to plecam ten dodatek do Fx - Web Developer - ma bardzo wiele przydatnych bajerów dla webmasterów... teoretycznie może służyć jako edytor HTML i CSS... no ale do tego to ja już wole kED'a... którego też zresztą polecam :P

Tyle na razie, jeżeli chodzi o tworzenie www. Dalsze artykuły, które będę tutaj umieszczać będą się odnosić tylko i wyłącznie do html i css... przy czym nie będzie tutaj kursów od podstaw itp. Od tego są inne strony. Postaram się natomiast poruszać często spotykane problemy podczas tworzenia stron www. Sporo takich znalazłem podczas mojej przygody z projektowaniem stron... więc czemu nie podać moich rozwiązań :D