HTML - XHTML - CSS

Nie lubimy tabel

Ciągle jeszcze spotykanym sposobem formatowania układu strony jest stosowanie tabel. Jest to zdecydowanie złe rozwiazanie. Tak wykorzystane tabele tworzą zupełnie niesemantyczną strukturę dokumentu i stanowią (zwłaszcza tabele wielokrotnie zagłębione) barierę z punktu widzenia reguł dostępności (Web accessibility). Tabele powinny być stosowane jedynie do prezentacji różnego rodzaju danych i związków pomiedzy tymi danymi, a nie do projektowania wyglądu strony. Poprawnym i najczęściej stosowanym do tego celu sposobem jest tworzenie układu strony w oparciu o elementy <div>, którym można przypisać określone identyfikatory (lub klasy), a wszystkie właściwości prezentacyjne definiuje się przy pomocy arkuszy stylów CSS.

Strona testowa1.html (obejrzyj tekst źródłowy) jest prostym przykładem szkieletu dokumentu (w języku XHTML, ale równie dobrze mógłby to być HTML), którego struktura została w przejrzysty sposób zestawiona z typowych bloków <div>, odpowiednio ("funkcjonalnie") opisanych identyfikatorami (id). Wszystko to, co decyduje o wyglądzie poszczególnych fragmentów strony zostało zdefiniowane w zewnętrznym arkuszu stylów test.css, który oczywiście jest tylko jednym (z nieskończenie wielu możliwych) przykładem CSS. Strona testowa2.html jest tą sama strukturą co poprzednia, została jedynie wypełniona typową zawartością. W głównym "oknie" znajduje się fragment popularnego, testowego tekstu "Lorem ipsum", który może zostać wygenerowany w potrzebnej liczbie akapitów i spełnia rolę "wypełniacza", symulując typową zawartość tekstową dla celów edytorskich.

Przeanalizuj dokładnie zawartość dokumentu testowa2.html i pliku test.css. Zbadaj strukturę tej strony wykorzystując różne możliwości narzędzia Firebug, obserwując również style CSS wskazywane dla poszczególnych elementów strony. Sprawdź wygląd strony bez dołączonych stylów, posługując się narzędziem Web Developer - wybierz kolejno: "Brak błędów w arkuszu CSS" - "Wyłącz style" - "Dołączone arkusze stylów". Na ogół, gdy Web Developer coś zmodyfikuje, w pasku stanu przeglądarki pojawia się ikonka ("zębatka"), która pozwala zresetować stronę. Sprawdź w jaki sposób jest tworzone graficzne tło w module header - w dokumencie strony element graficzny bgr02.jpg nie jest nigdzie dołączany. Pobierz Pliki Lab2 i przeprowadź dowolne eksperymenty zmieniając zawartość dokumentu testowa2.html (np. dołączenie kolejnego akapitu tekstu "Lorem ipsum" - co się wtedy dzieje?), ale przede wszystkim wprowadzaj zmiany w arkuszu stylów test.css modyfikując w poszczególnych definicjach właściwości i ich wartości.

JavaScript w menu? Czy to na pewno potrzebne?

Na stronie menujs.html w sekcji sidebar został wmontowany moduł nawigacji pewnej, rzeczywiście funkcjonującej w sieci, witryny. Został on utworzony przy pomocy programu XARA Webstyle (stara wersja, aktualnym odpowiednikiem jest XARA Menu Maker). Program pozwala na wybranie (z dostarczonych szablonów) wyglądu elementów menu, opisanie ich potrzebnymi tekstami, a nastepnie generuje te elementy w postaci plików graficznych, oraz sterujący nimi kod w języku JavaScript (tutaj - xaramenu.js i index_vnavbar.js). W rezultacie otrzymuje się skomplikowany kod, który w dodatku buduje menu w postaci bardzo złożonej, niesemantycznej struktury opartej o zagłębione tabele, co jest (przynajmniej w tym przypadku - menu jednopoziomowe) przykładem przerostu formy nad treścią. Podobne menu można utworzyć posługując się wyłącznie CSS. Obejrzyj teksty źródłowe w plikach xaramenu.js i index_vnavbar.js. Przy pomocy Firebuga zbadaj stronę menujs.html aby zobaczyć rzeczywistą strukturę modułu nawigacji. Przy pomocy Web Developera wyłącz obsługę JavaScript w przeglądarce (opcje: "Wyłącz" - "Wyłącz JavaScript" - "Cały JavaScript", następnie trzeba odświeżyć stronę) i sprawdź działanie menu. Wyłączanie JavaScript przez użytkownika wcale nie jest taką rzadkością, jaką się wydaje. Można to zrobić także w opcjach przeglądarki.

Niezależnie od rozważań dotyczących menu, zwróć uwagę na wygląd strony menujs. Jest on inny niż strony testowa2 pomimo że obie korzystają z tego samego arkusza stylów test.css. Różnica wynika z tego, że w dokumencie menujs.html umieszczono dodatkowe (osadzone) definicje dla elementów header i sidebar. Style osadzone (wewnętrzne) zajmuja hierachicznie wyższą pozycję niż style dołączone (zewnętrzne), które zostają wtedy przedefiniowane.

Zadanie 2.1

Traktując dostępną tutaj stronę menuli.html jako dokument wyjściowy, należy zaprojektować moduł nawigacji działajacy i wyglądający podobnie jak na rozważanej poprzednio stronie menujs.html (przy okazji można poprawić błędy). Tak więc zamiast JavaScriptu i elementów graficznych, trzeba zastosować strukturę listy (wykazu) z odpowiednio opracowanymi definicjami stylów CSS (np. menuli.css). Warto pamiętać o możliwościach jakie udostępniają pseudoklasy (zwłaszcza :hover), oraz właściwość list-style-type. Jedynymi elemenentami graficznymi jakie można wykorzystać (dla uzyskania wyglądu menu podobnego do pierwowzoru) są pliki index_vnavbar_top.gif oraz index_vnavbar_bottom.gif.

Zadanie 2.2

Dostępna tutaj powtórnie (omawiana w poprzednich ćwiczeniach - Lab1) strona wybrane.html jest dokumentem napisanym w języku HTML 4.01 Transitional. Należy przebudować tę stronę tak, aby stała się poprawnym dokumentem w języku XHTML 1.0 Strict, wyglądającym w oknie przeglądarki identycznie jak pierwowzór, ale struktura dokumentu oparta na tabelach powinna zostać zastąpiona strukturą opartą na elementach <div>, np. w sposób zbliżony do "szablonu" w stronie testowa. Jednak fragment dokumentu prezentujący wybrane płyty (obrazki i opisy) należy zachować w postaci tabeli, przyjmując że jest to prezentacja danych (bo jest!). Należy dążyć do tego, żeby tabela ta była zbudowana wyłącznie z "czystych" elementów (<table>, <tr>, itd.) bez atrybutów. Nietrudno zauważyć, że trzeba także zaprojektować odpowiedni arkusz stylów CSS.