. Element ten stanowił podstawę dołączania apletów Javy na stronie. W XHTML-u dostajemy z zamian element object. Skrócone parametry Chcąc umieScić na stronie domySlnie zaznaczone pole wyboru, w HTML-u pisało się zazwyczaj . Za pomocą tego elementu mogliSmy ustawić domySlną czcion- Taki wpis jest całkowicie niedopuszczalny w XHTML-u, w którym kę dla głównej sekcji strony. Element ten został usunięty każdy atrybut musi posiadać wartoSć. Chcąc napisać poprawnie po- w XHTML-u, a identyczny w działaniu efekt uzyskamy korzysta- wyższy fragment kodu, będziemy więc musieli dodać wartoSć dla atry- jąc z arkuszy stylów. butu selected, którym będzie jego nazwa: selected= selected />. Atrybutami tego typu, na które powinniSmy Kod CSS: body { font-family: Arial; color: red; } zwracać uwagę zarówno przy pisaniu kodu, jak i poprawianiu istnieją- cego są: compact, nowrap, ismap, declare, noshade, checked, disa- bled, readonly, multiple, selected, noresize oraz defer. Element wykorzystywany był do dołączania dłuższych cytatów do tre- Sci strony, a często był także nieprawidłowo wykorzystywany jako Alternatywny tekst sposób na dołączenie marginesów do wySwietlanego tekstu. Ponieważ Atrybut alt elementu img jest wymagany i powinniSmy go umieScić blockquote jest elementem blokowym, musimy jako zamiennika użyć w każdym elemencie tego typu, jeSli chcemy, aby nasz kod był elementu div, przypisując mu dodatkowe definicje stylów. poprawny z XHTML-em. Atrybut ten okreSla alternatywny tekst dla Kod HTML:
Cytat...
pliku graficznego w przypadku kiedy ten nie może być wySwietlony. Kod XHTML:
Cytat...
Łącząc to z poprzednim otrzymamy następujący kod dla przykładowe- go pliku graficznego: />. Pamiętajmy, że dotyczy to wszystkich elementów img bez wyjątku. Wykorzystywany do wySrodkowania tekstu lub dowolnych elementów JeSli nie chcemy, aby po naprowadzeniu kursora myszki na obrazek umieszczonych wewnątrz niego. Został usunięty ze specyfikacji pokazywała się podpowiedx lub gdy alternatywny tekst nie jest XHTML i zastąpiony definicją text-align arkuszy stylów. potrzebny, wystarczy napisać: .
Prawidłowe zagnieżdżanie elementów Element służył do modyfikacji ustawień związanych ze stylem W języku HTML zamykanie elementów zagnieżdżonych wewnątrz wySwietlanego tekstu. Zamiast niego możemy wykorzystać element innych odbywało się bez żadnych zasad, czasami nie było w ogóle span wraz z odpowiednimi definicjami CSS. znacznika zamykającego, a innym razem były one zamykane w niepra- widłowej kolejnoSci. W XHTML-u wszystkie elementy zagnieżdżone wewnątrz innych muszą zostać zamknięte w odpowiedniej kolejnoSci. Z jego pomocą mogliSmy pochylić wySwietlaną czcionkę. Ten sam Tak więc wszystkie wpisy rodzaju Tekst muszą zostać efekt można uzyskać wykorzystując wspomniany już element span poprawione, a prawidłowa składniowo linijka wyglądać będzie nastę- w połączeniu z definicją font-style arkuszy stylów. pująco: Tekst. , Dołączanie JavaScriptu Użycie tego elementu w połączeniu z dowolnym tekstem powodowało Znana wszystkim linijka kodu elementy języka HTML w celu poprawienia użytecznoSci wySwietla- nych stron. Tak też otrzymaliSmy np. element marquee, który począt- Nowe, stare elementy i atrybuty kowo obsługiwała jedynie przeglądarka firmy Microsoft, czy też blink, Razem z wprowadzeniem pierwszej wersji języka XHTML niektóre powodujący migotanie tekstu, dodany przez autorów przeglądarki Net- elementy znane z HTML-a zostały uznane za niepotrzebne i zostały scape. Za pomocą arkuszy stylów całkowicie oddzielamy częSć zwią- usunięte ze specyfikacji. To samo dotyczy atrybutów, które w więk- zaną z wyglądem strony od jej właSciwego kodu HTML. Dzięki takie- szoSci zostały usunięte na rzecz arkuszy CSS. Przyjrzyjmy się bliżej mu rozwiązaniu modyfikacja wyglądu strony lub nawet kilku stron INTERNET.maj.2005 91 CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT XHTML może przebiegać znacznie sprawniej. Arkusze stylów dostępne były go w połączeniu z elementem a. W tym przypadku jedynym sposobem już za czasów języka HTML, jednak dopiero z wprowadzeniem otwierania odnoSników w nowym oknie staje się wykorzystanie języka XHTML-a zyskują prawdziwe znaczenie dla webmasterów. Obecnym skryptowego, np. JavaScript. standardem tego języka jest CSS w wersji 2.1. Przyjrzyjmy się teraz liScie atrybutów, które zostały usunięte ze * * * specyfikacji języka XHTML, a ich użycie w połączeniu z nim nie jest Edytory dozwolone. Wszystkie zostały zastąpione przez odpowiednie deklara- Przyjrzyjmy się liScie aplikacji, które pomogą nie tylko zacząć progra- cje arkuszy stylów. mowanie w XHTML, ale również w konwersji istniejących plików na- pisanych w HTML. align Najlepszym z testowanych edytorów okazał się XML Atrybut align pozwalał na zmianę położenia elementu, np. jego wy- Editor, który jest nie tylko skutecznym rozwiązaniem, jeSli chodzi Srodkowanie. W celu uzyskania identycznego efektu musimy zastoso- o dokumenty XHTML, ale w pełni obsługuje języki XML, WSDL, wać odpowiedni styl w stosunku do rodzica elementu, którego położe- XSL i kilka innych. Na drugim miejscu znalazł się Top Style Pro 3. nie chcemy zmodyfikować. Jest to edytor typowo ukierunkowany na programowanie w CSS. HTML: align= center Dalej w rankingu znajdują się dwa edytory, dostępne za darmo. CSS: text-align: center; Altova XMLSpy posiada jedynie podstawowe funkcje, jeSli chodzi o programowanie w języku XHTML, a ponadto jest to aplikacja alink, link, vlink stworzona wyłącznie do programowania w XML-u i językach po- Te atrybuty umieszczone wewnątrz elementu body pozwalały na zmia- chodnych, więc nie obsługuje języka CSS. Z kolei HTMLGate nę koloru, kolejno: aktywnego, dowolnego i wczeSniej odwiedzonego FREE jest typowym edytorem tekstu z podSwietlaniem składni. odnoSnika. Ten sam efekt uzyskamy dodając definicje stylów dla ele- Edytor ten nie posiada większoSci funkcji, które znajdziemy w opi- mentów a:active oraz a:link i a:visited. sywanych wczeSniej edytorach, ale obsługuje XHTML. Na uwagę zasługują konwerter plików graficznych, edytor WYSIWYG oraz to, background, bgcolor że program jest darmowy. Atrybuty te używane w połączeniu z elementami body, table czy td po- Pełna lista omawianych edytorów wraz z dostępnymi funkcja- zwalały na okreSlenie pliku graficznego lub koloru, który stanowił tło mi znajduje się w tabeli na płycie CD. dla danego elementu. Zostały one zastąpione przez definicje, odpo- wiednio: background-image oraz background-color. Zasadność konwersji Po co właSciwie konwertować stronę na XHTML i CSS, po co trzy- border mać się standardów programowania, jeSli strona działa bez zarzutów. Atrybut border dawał możliwoSć ustawienia obramowania np. dla ob- WiększoSć starszych stron zoptymalizowana jest pod przeglądarkę razka umieszczonego na stronie. Korzystając z CSS możemy nie tylko Microsoftu, a obecnie popularnoSć zyskują takie aplikacje jak Mozil- ustawić gruboSć obramowania, ale także jego kolor i styl. la, Firefox czy Opera. Konwertując stronę zgodnie z najnowszymi HTML: tendencjami w programowaniu zyskujemy m.in. odseparowanie CSS: img { border-width: 2px; border-color: struktury od elementów definiujących wygląd, które powoduje, że #ff0000; border-style: solid; } strona jest zoptymalizowana pod wyszukiwarki internetowe, a co za tym idzie możemy uzyskać wyższą pozycję podczas szukania treSci color, face, size związanych z tematyką naszej strony. Pamiętajmy, że dla wyszuki- Modyfikacja koloru, kroju i wielkoSci czcionki stosowana była w połą- warki nie mają znaczenia pliki graficzne (stąd koniecznoSć użycia czeniu z elementami font oraz basefont. Odpowiednikami w CSS są atrybutu alt dla elementu img) czy animacje we Flashu ważna jest definicje, odpowiednio: color, font-family oraz font-size. wyłącznie właSciwa treSć. Ma na to wpływ nie tylko wykorzystanie arkuszy stylów, ale również umieszczenie opisu i słów kluczowych hspace, vspace w znacznikach meta znajdujących się w nagłówku strony. To wszyst- Atrybuty te pozwalały na ustawienie odstępów poziomych i piono- ko odnosi się również do przeglądarek tekstowych oraz specjalnych wych naokoło elementu. Zostały zastąpione przez definicję CSS wersji przeglądarek internetowych przeznaczonych dla osób niepeł- o nazwie padding (styl ten można podzielić na cztery inne, co po- nosprawnych. JeSli chodzi o tego typu przeglądarki, musimy jednak zwoli na ustawienie wartoSci odstępów dla każdego miejsca osob- pamiętać, aby wykorzystywać elementy języka XHTML zgodnie no; wyróżniamy więc: padding-left, padding-right, padding-top z przeznaczeniem, by uniknąć nieprawidłowej interpretacji. Dodat- oraz padding-bottom). kowym atutem takiego rozwiązania jest to, że mając jeden kod XHTML możemy produkować kilka (jeSli chodzi o strukturę) doku- nowrap mentów. Ten sam kod XHTML w połączeniu z różnymi plikami CSS Powodował niezałamywanie wierszy w komórce tabeli, zastąpiony może dać w wyniku wersje z różnymi wielkoSciami czcionek, kolo- stylem white-space. rami czy też wersję przystosowaną do wydruku. Wykorzystanie arkuszy stylów redukuje objętoSć właSciwego type kodu strony, znacznie ułatwia jego edycję, a dla dużych serwisów W połączeniu z elementami związanymi z listami (li, ol, ul) ustawienie znacznie przyspiesza operację ładowania. Jednorazowa wizyta na odpowiedniej wartoSci tego argumentu pozwalało na modyfikację wy- stronie spowoduje bowiem umieszczenie pliku CSS w cache, tak glądu elementów listy. Jego odpowiednikiem w CSS jest definicja więc przy ponownej wizycie ładowana będzie jedynie właSciwa list-style-type. treSć dokumentu i ewentualnie pliki graficzne czy wszelkiego HTML:
rodzaju dynamiczna zawartoSć. Trzymanie się standardów progra- CSS: ul { list-style-type: square; } mowania jest więc ważne nie tylko dla programistów, ale również Dodatkowo, jeSli chcemy, aby nasza strona korzystała z definicji dla odbiorców. Mamy także pewnoSć, że nasza strona będzie do- typu strict, musimy zrezygnować z atrybutu target, wykorzystywane- stępna dla każdego, bez względu na system operacyjny czy sprzęt, 92 INTERNET.maj.2005 CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD XHTML z którego korzysta, a ponadto łatwa do rozbudowy i edycji oraz o mniejszej objętoSci. Skończone? Gdy skończymy pisać kod XHTML, nie możemy być pewni, że nasz kod jest w pełni zgodny ze specyfikacją. Może zawierać pojedyncze błędy, które powinniSmy usunąć przed umieszczeniem strony na ser- werze. JeSli korzystamy z edytora, który ma wbudowaną funkcję sprawdzania poprawnoSci dokumentu XHTML, to bez problemu mo- żemy z niej korzystać jeszcze podczas pisania kodu xródłowego. JeSli jednak nasz edytor nie ma takiej opcji, możemy skorzystać z darmo- wego skryptu z W3C, dostępnego pod adresem http://validator.w3.org. Na tej samej zasadzie działa skrypt walidujący kod CSS, dostępny pod adre- sem http://jigsaw.w3.org/css-validator/. Automatyzacja konwersji dokumentu Konwersja dokumentu z HTML4 na język XHTML to nie lada wy- zwanie, szczególnie jeSli nazwy elementów i atrybutów pisane były Serwis stworzony przez konsorcjum W3, sprawdzający poprawnoSć dużymi literami, nie korzystaliSmy z cudzysłowów lub gdy strona kodu XHTML w ogóle nie wykorzystuje arkuszy stylów. Możemy jednak wyko- rzystać rozszerzenie języka PHP o nazwie Tidy (http://tidy.sourcefor- dokonujemy edycji pliku konfiguracyjnego php.ini, dodając linię ge.net), które sprawdzi, oczySci oraz naprawi dokumenty HTML, w postaci extension=php_tidy.dll. W przypadku kompilacji PHP5 XHTML i XML. Ma również funkcje umożliwiające konwersję do- wystarczające staje się dodanie parametru -with-tidy. kumentu HTML4 na kod XHTML wykorzystujący kaskadowe arku- sze stylów. Instalacja tego rozszerzenia jest prosta, a wersja dla sys- Podsumowanie temów UNIX znajduje się pod adresem http://pecl.php.net/package/tidy. JeSli Języki XHTML i CSS są obecnie standardem programowania stron in- korzystamy z Windows, konieczne będzie Sciągnięcie archiwum ze ternetowych. Język HTML jest już przeszłoScią, ale odegrał wielką ro- strony http://snaps.php.net/win32/PECL_STABLE/, a po jego rozpakowaniu sko- lę w rozwoju internetu i doprowadził go do obecnego stanu. n piowanie pliku php_tidy.dll do katalogu z rozszerzeniami. Następnie REKLAMA INTERNET.maj.2005 93
.