Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00051 009118 10485401 na godz. na dobę w sumie
HTML i  XHTML. Przewodnik encyklopedyczny - książka
HTML i XHTML. Przewodnik encyklopedyczny - książka
Autor: , Liczba stron: 624
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-440-X Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).
Język HTML zmienia się tak szybko, że trudno nadążyć za coraz to nowszymi technologiami, które się z nim wiążą. Skąd wiedzieć, czego i jak należy używać? 'HTML i XHTML. Przewodnik encyklopedyczny' pomaga odpowiedzieć na te pytania. Książka ta w sposób najbardziej całościowy ze wszystkich dostępnych w sprzedaży traktuje o języku HTML. Opisuje najświeższe standardy, HTML 4.01 i XHTML 1.0, a także wszystkie funkcje obsługiwane przez popularne przeglądarki.

Poznawanie HTML-a lub XHTML-a to jak poznawanie każdego innego języka. Większość uczących się zaczyna od przyswojenia przykładów. Czerpanie z doświadczenia innych osób to naturalny, prosty i atrakcyjny sposób nauki. Ale czerpanie wiedzy z czyichś rozwiązań ma też swoje ograniczenia. Przecież przykład może być dobry albo zły. Lepiej przyswajać sobie HTML trzymając w ręku całościowy materiał referencyjny, obejmujący składnię, semantykę i wariacje języka oraz pomagający w rozróżnieniu co jest złym, a co dobrym przykładem użycia HTML-a.

Książka pomaga Czytelnikowi na oba sposoby: autorzy szczegółowo opisują każdy element obu standardów i wyjaśniają zasadę jego działania oraz sposób interakcji z innymi elementami. Przedstawiono wiele praktycznych wskazówek pomocnych przy tworzeniu zarówno prostych podręczników online, jak i złożonych prezentacji marketingowych. Setki przykładów ułatwiają Czytelnikowi stworzyć wydajną stronę WWW, a także opanować bardziej zaawansowane mechanizmy publikacji w Sieci. Książka opisuje również, jak 'przestawić się' z HTML-a na XHTML.

W książce opisano następujące zagadnienia:

STOP -- Najnoszwe informacje! Netscape Navigator 6.0! Internet Explorer 5.0! HTML 4.01! XML i XHTML! Arkusze stylów! Przestają być tajemnicą! STOP Tylko z tym przewodnikiem odnajdziesz właściwą drogę -- STOP.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl HTML i XHTML przewodnik encyklopedyczny Autorzy: Chuck Musciano, Bill Kennedy T‡umaczenie: Adam Podstawczyæski ISBN: 83-7197-440-X Tytu‡ orygina‡u: guide. Fourth Edition. Format: B5, stron: 700 HTML and XHTML. The definitive JŒzyk HTML zmienia siŒ tak szybko, ¿e trudno nad„¿y(cid:230) za coraz to nowszymi technologiami, kt(cid:243)re siŒ z nim wi„¿„. Sk„d wiedzie(cid:230), czego i jak nale¿y u¿ywa(cid:230)? (cid:132)HTML i(cid:160) XHTML. Przewodnik encyklopedyczny(cid:148) pomaga odpowiedzie(cid:230) na te pytania. Ksi„¿ka ta (cid:160) spos(cid:243)b najbardziej ca‡o(cid:156)ciowy ze wszystkich dostŒpnych w sprzeda¿y traktuje o(cid:160) jŒzyku HTML. Opisuje naj(cid:156)wie¿sze standardy, HTML 4.01 i XHTML 1.0, a tak¿e wszystkie funkcje obs‡ugiwane przez popularne przegl„darki. Poznawanie HTML-a lub XHTML-a to jak poznawanie ka¿dego innego jŒzyka. WiŒkszo(cid:156)(cid:230) ucz„cych siŒ zaczyna od przyswojenia przyk‡ad(cid:243)w. Czerpanie z do(cid:156)wiadczenia innych os(cid:243)b to naturalny, prosty i atrakcyjny spos(cid:243)b nauki. Ale czerpanie wiedzy z czyich(cid:156) rozwi„zaæ ma te¿ swoje ograniczenia. Przecie¿ przyk‡ad mo¿e by(cid:230) dobry albo z‡y. Lepiej przyswaja(cid:230) sobie HTML trzymaj„c w rŒku ca‡o(cid:156)ciowy materia‡ referencyjny, obejmuj„cy sk‡adniŒ, semantykŒ i wariacje jŒzyka oraz pomagaj„cy w rozr(cid:243)¿nieniu co jest z‡ym, a(cid:160) co(cid:160) dobrym przyk‡adem u¿ycia HTML-a. Ksi„¿ka pomaga Czytelnikowi na oba sposoby: autorzy szczeg(cid:243)‡owo opisuj„ ka¿dy element obu standard(cid:243)w i wyja(cid:156)niaj„ zasadŒ jego dzia‡ania oraz spos(cid:243)b interakcji z(cid:160) innymi elementami. Przedstawiono wiele praktycznych wskaz(cid:243)wek pomocnych przy tworzeniu zar(cid:243)wno prostych podrŒcznik(cid:243)w online, jak i z‡o¿onych prezentacji marketingowych. Setki przyk‡ad(cid:243)w u‡atwiaj„ Czytelnikowi stworzy(cid:230) wydajn„ stronŒ WWW, a tak¿e opanowa(cid:230) bardziej zaawansowane mechanizmy publikacji w Sieci. Ksi„¿ka opisuje r(cid:243)wnie¿, jak (cid:132)przestawi(cid:230) siŒ(cid:148) z HTML-a na XHTML. W ksi„¿ce opisano nastŒpuj„ce zagadnienia: Arkusze styl(cid:243)w i ich wp‡yw na wygl„d dokumentu Tabele (od prostych do z‡o¿onych) Ramki pomagaj„ce w prezentowaniu grup dokument(cid:243)w Spos(cid:243)b projektowania i tworzenia interaktywnych formularzy i dokument(cid:243)w dynamicznych Spos(cid:243)b umieszczania na stronach grafiki, plik(cid:243)w d(cid:159)wiŒkowych, film(cid:243)w, aplet(cid:243)w i(cid:160) program(cid:243)w JavaScript Spos(cid:243)b tworzenia dokument(cid:243)w dobrze prezentuj„cych siŒ na r(cid:243)¿nych przegl„darkach XHTML -- jŒzyk publikacji elektronicznych przysz‡o(cid:156)ci STOP -- Najnoszwe informacje! Netscape Navigator 6.0! Internet Explorer 5.0! HTML 4.01! XML i XHTML! Arkusze styl(cid:243)w! Przestaj„ by(cid:230) tajemnic„! STOP Tylko z tym przewodnikiem odnajdziesz w‡a(cid:156)ciw„ drogŒ -- STOP. #4786/- 6/.3;+ 3.+o $(cid:20)$ 36. ./ /,  1.1. Internet, intranety i ekstranety...................................................i........................................17 1.2. Internetowy żargon...................................................i...................................................i......20 1.3. Czym jest HTML?...................................................i...................................................i.......23 1.4. Czym jest XHTML?...................................................i...................................................i....24 1.5. Czym nie są HTML i XHTML?...................................................i.....................................24 1.6. Niestandardowe rozszerzenia...................................................i.........................................25 1.7. Narzędzia dla projektanta stron WWW ...................................................i.........................27 3.+o #,78+68  2.1. Narzędzia ...................................................i...................................................i....................31 2.2. Pierwszy dokument HTML...................................................i............................................32 2.3. Zagnieżdżone znaczniki ...................................................i.................................................33 2.4. Szkielet dokumentu HTML...................................................i............................................34 2.5. Sedno dokumentu HTML lub XHTML ...................................................i.........................35 2.6. Tekst ...................................................i...................................................i............................36 2.7. Odsyłacze ...................................................i...................................................i....................40 2.8. Elementy graficzne — coś specjalnego ...................................................i.........................43 2.9. Listy, dokumenty z możliwością przeszukiwania, formularze .........................................45 2.10. Tabele........................................i...................................................i...................................47 2.11. Ramki ...................................................i...................................................i........................48 2.12. Arkusze stylów i JavaScript...................................................i.........................................49 2.13. Co dalej? ...................................................i...................................................i...................50  $$  6/;3.2/2-34/.-2 3.+o 2+83+.39/289$  3.1. Zwodniczy wygląd ...................................................i...................................................i......51 3.2. Struktura dokumentu HTML...................................................i..........................................52 3.3. Znaczniki i atrybuty ...................................................i...................................................i....53 3.4. Poprawnie uformowane dokumenty a XHTML...................................................i.............56 3.5. Zawartość dokumentu ...................................................i...................................................i.57 3.6. Elementy dokumentu HTML ...................................................i.........................................59 3.7. Nagłówek dokumentu ...................................................i...................................................i.62 3.8. Treść dokumentu ...................................................i...................................................i.........65 3.9. Znaczniki redaktorskie ...................................................i...................................................67 3.10. Znacznik bdo ...................................................i...................................................i........70 3.+o  3.78+;3;/34/6+-/2+8/-/  4.1. Działy i akapity ...................................................i...................................................i...........73 4.2. Nagłówki ...................................................i...................................................i.....................80 4.3. Zmiana wyglądu tekstu ...................................................i..................................................86 4.4. Znaczniki stylów opartych na zawartości ...................................................i......................87 4.5. Znaczniki stylów fizycznych...................................................i..........................................94 4.6. Rozszerzona obsługa fontów w HTML-u ...................................................i......................98 4.7. Precyzyjne sterowanie odstępami i układem ...................................................i...............104 4.8. Cytaty blokowe ...................................................i...................................................i.........117 4.9. Adresy ...................................................i...................................................i.......................120 4.10. Specjalne kodowanie znaków ...................................................i....................................122 3.+o 2/(cid:20)16+0+98/.+  5.1. Linie poziome...................................................i...................................................i............125 5.2. Wstawianie elementów graficznych ...................................................i............................132 5.3. Kolory dokumentu i grafika w tle ...................................................i................................155 5.4. Dźwięk w tle ...................................................i...................................................i.............162 5.5. Animacja tekstu...................................................i...................................................i.........164 5.6. Inna zawartość multimedialna...................................................i......................................167 3.+o .7o+-/™4+/-2˜  6.1. Podstawy hipertekstu ...................................................i...................................................i171 6.2. Odwoływanie się do dokumentów: adres URL...................................................i............172 6.3. Tworzenie odsyłaczy...................................................i...................................................i.187 6.4. Wydajne odsyłacze...................................................i...................................................i....195 #4786/-  6.5. Obrazki zawierające mapy odsyłaczy ...................................................i..........................199 6.6. Tworzenie dokumentów z możliwością przeszukiwania................................................209 6.7. Relacje ...................................................i...................................................i......................212 6.8. Wspomaganie automatyzacji ...................................................i.......................................217 3.+o 78036+83;+2/  7.1. Listy nieuporządkowane ...................................................i..............................................221 7.2. Listy uporządkowane ...................................................i...................................................i224 7.3. Znacznik li ...................................................i...................................................i............227 7.4. Zagnieżdżanie list ...................................................i...................................................i.....230 7.5. Listy definicji ...................................................i...................................................i............232 7.6. Poprawne korzystanie z list..................................................i...........................................236 7.7. Listy typu „katalog” ...................................................i...................................................i..237 7.8. Listy typu „menu” ...................................................i...................................................i.....238 3.+o +7+.3;/+697/783;  8.1. Elementy stylów.................................................i...................................................i..........242 8.2. Składnia arkuszy stylów ...................................................i..............................................250 8.3. Klasy stylów.................................................i...................................................i................255 8.4. Właściwości ...................................................i...................................................i..............260 8.5. Style „bezznacznikowe”: znacznik span ...................................................i.................288 8.6. Stosowanie stylów w dokumentach ...................................................i.............................289 3.+o 369+6/  9.1. Formularze — podstawy ...................................................i..............................................293 9.2. Znacznik form ...................................................i...................................................i.......294 9.3. Przykład prostego formularza ...................................................i......................................301 9.4. Pobieranie danych poprzez e-mail ...................................................i...............................302 9.5. Znacznik input ...................................................i...................................................i......304 9.6. Znacznik button ...................................................i...................................................i....315 9.7. Obszary tekstu wielowierszowego...................................................i...............................317 9.8. Elementy umożliwiające wybór...................................................i...................................319 9.9. Ogólne atrybuty elementów formularzy ...................................................i......................323 9.10. Oznaczanie i grupowanie elementów formularza ...................................................i......327 9.11. Efektywne formularze ...................................................i................................................331 9.12. Programowanie formularzy...................................................i........................................334  $$  6/;3.2/2-34/.-2 3.+o $+,//  10.1. Standardowy model tabeli...................................................i..........................................341 10.2. Znaczniki tworzące tabelę...................................................i..........................................343 10.3. Najnowsze znaczniki związane z tabelami ...................................................i................359 10.4. Więcej niż zwykłe tabele ...................................................i...........................................370 3.+o  +  11.1. Ramki — charakterystyka...................................................i..........................................371 11.2. Znaczniki opisujące ramki ...................................................i.........................................372 11.3. Układ ramkowy ...................................................i...................................................i.......373 11.4. Zawartość ramek ...................................................i...................................................i.....379 11.5. Znacznik noframes ...................................................i.................................................382 11.6. Ramki zagnieżdżone ...................................................i..................................................383 11.7. Ramki nazwane lub okna docelowe...................................................i...........................385 3.+o  +;+683;32;+2+  12.1. Aplety i obiekty...................................................i...................................................i.......391 12.2. Zawartość zagnieżdżona ...................................................i............................................394 12.3. JavaScript...................................................i...................................................i................409 12.4. Arkusze stylów JavaScript...................................................i.........................................417 3.+o  +;+683.2+-2+  13.1. Dokumenty dynamiczne — przegląd...................................................i.........................425 13.2. Dokumenty pobierane przez klienta...................................................i...........................426 13.3. Dokumenty wypychane przez serwer ...................................................i........................430 3.+o   37/6/2+/87-+4/  14.1. Pusta przestrzeń...................................................i...................................................i.......436 14.2. Układ wielokolumnowy ...................................................i.............................................440 14.3. Warstwy ...................................................i...................................................i..................445 3.+o    15.1. Języki i metajęzyki...................................................i...................................................i..458 15.2. Dokumenty i definicje DTD...................................................i.......................................460 15.3. Zrozumieć definicje XML DTD ...................................................i................................461 15.4. Gramatyka elementów ...................................................i...............................................465 #4786/-  15.5. Atrybuty elementów................................................i...................................................i...469 15.6. Bloki warunkowe ...................................................i...................................................i....471 15.7. Tworzenie definicji XML DTD ...................................................i.................................472 15.8. Korzystanie z XML-a...................................................i.................................................473 3.+o  $  16.1. Dlaczego XHTML?...................................................i...................................................i.477 16.2. Tworzenie dokumentów XHTML...................................................i..............................479 16.3. HTML kontra XHTML ...................................................i..............................................482 16.4. Czy korzystać z XHTML-a? ...................................................i......................................486 3.+o  ™69-789-˜  17.1. Porada dnia....................................i...................................................i.............................491 17.2. Drobiazg czy nadużycie? ...................................................i...........................................493 17.3. Specjalne wypunktowanie...................................................i..........................................493 17.4. Sztuczki z tabelami ...................................................i...................................................i.494 17.5. Przezroczyste obrazki...................................................i.................................................501 17.6. Triki z oknami i ramkami...................................................i...........................................503 3.+8   3.+8/6++8+/+$   Konwencje gramatyczne ...................................................i...................................................i..509 Gramatyka ...................................................i...................................................i........................511 3.+8/2+-2$ $  Podstawowe atrybuty ...................................................i...................................................i.......521 Spis znaczników i atrybutów HTML ...................................................i..................................522 3.+8/ o+-;3-+697783;  3.+8//02-+$$  3.+8//02-+$$  3.+8/#47/2-   $$  6/;3.2/2-34/.-2 3.+8/+;;+683-3363;  Wartości kolorów...................................................i...................................................i.............601 Nazwy kolorów...................................................i...................................................i................601 Standardowa paleta kolorów.................................................i.................................................603 #363;.    2/(cid:5)16+0+98/.+ Tekst stanowi najczęściej większość zawartości dokumentu. „Czyste” informacje tekstowe warto jednak czasem uatrakcyjnić za pomocą linii poziomych, obrazków lub innych elementów graficz- nych. Takie „wstawki” nie muszą pełnić roli tylko dekoracyjnej. Ożywiają dokument i umożli- wiają przekazanie informacji innego typu, często niedostępnej na innych nośnikach (np. w druku). W niniejszym rozdziale dokładnie opisano sposób wstawiania do dokumentów elementów multi- medialnych, a także kiedy warto je stosować, a kiedy ich unikać. Część Czytelników być może zechce także zerknąć teraz do rozdziału 12., Zawartość wykonywalna. Opisane tam zostały znaczniki ogólne: zdefiniowany w HTML 4 i XHTML object oraz ob- sługiwany przez Netscape embed . Umożliwiają one wstawianie do dokumentu dowolnej za- wartości i typów danych, w tym multimediów.  2/433/ Linie poziome (ang. horizontal rules) pozwalają na wizualne, przejrzyste rozdzielenie części do- kumentu. Za ich pomocą można w prosty sposób wydzielić niewielką porcję zawartości, odgrani- czyć nagłówek i stopkę, czy dodatkowo podkreślić nagłówki części.  2+-26 Znacznik hr informuje przeglądarkę, że w danym miejscu ma zostać wyświetlona linia pozio- ma. Podobnie jak znacznik br , hr powoduje przełamanie wiersza, ale dodatkowo wymusza jeszcze domyślne wyrównanie następnego akapitu (do lewej strony). Przeglądarka umieszcza linię bezpośrednio pod bieżącym wierszem; normalny „tok” tekstu przywracany jest pod linią. Sposób wyświetlania linii poziomej zależy od przeglądarki. Zazwyczaj linia rysowana jest na całej szerokości dokumentu. Przeglądarki graficzne mogą ozdabiać linię „efektami specjalnymi” — li- nia „wyciśnięta” lub „wyżłobiona”. Przeglądarki tekstowe wykorzystują w tym miejscu najczę- ściej sekwencję łączników lub znaków podkreślenia. Ani nad, ani pod linią nie jest wstawiany żaden dodatkowy odstęp. Jeśli chcemy taki odstęp uzy- skać, musimy jawnie umieścić linię w znacznikach akapitu. Na przykład, spójrzmy jak wstawiane są odstępy w poniższym kodzie źródłowym oraz jak wyglądają one na rysunku 5.1. 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+ 6 Funkcja: Przerywa ciągłość tekstu i wstawia poziomą linię Atrybuty: ALIGN CLASS COLOR ID NOSHADE ONCLICK ONDBLCLICK ONKEYDOWN ONKEYPRESS ONKEYUP ONMOUSEDOWN Znacznik zamykajcy: ONMOUSEMOVE ONMOUSEOUT ONMOUSEOVER ONMOUSEUP LANG DIR SIZE STYLE TITLE WIDTH w HTML-u brak, w XHTML-u /hr lub hr ... / Zawiera: Nic Stosowany wewntrz: body_content Niniejszy tekst znajduje się bezpośrednio ponad linią. hr A ten bezpośrednio pod nią. p Podczas gdy między tym tekstem a następną linią zachowano pewien odstęp. p hr p Odstęp jest też po linii. Znacznik akapitu po znaczniku linii jest konieczny, jeśli chcemy, aby tekst pod linią był wyrów- nany w jakikolwiek inny sposób niż wyrównanie domyślne (do lewej). 792/ 2+-2++489;(cid:20)7+3.78(cid:20)446/.2432/  2.6/ $$  6/;3.2/2-34/.-2  .3-  2/433/  86,987/  Zazwyczaj przeglądarki wyświetlają linie poziome o grubości jednego lub dwóch pikseli1, trój- wymiarowe i „wyżłobione” — jakby „wciśnięte” w stronę. Linię można pogrubić za pomocą atry- butu size. Wymagana wartość atrybutu to grubość w pikselach. Spójrzmy na poniższy przykład i rysunek 5.2. p Oto typowy tekst dokumentu, po którym zobaczymy linię wyświetlaną przez IE jako kreskę o grubości 2 pikseli. hr Następne trzy linie będą miały grubość odpowiednio 12, 36 i 72 pikseli. hr size=12 hr size=36 hr size=72 792/  28/62/8436/6/87-+4/43;++/2+169,32   86,98237+./ Nie musi nam się podobać linia rysowana „w trzech wymiarach”. Po dodaniu atrybutu noshade uzyskana linia będzie dwuwymiarowa. W HTML-u atrybut ten nie wymaga podania żadnej warto- ści, w XHTML-u użyjemy noshade= noshade . Porównajmy „normalną” linię 3D z tą na ry- sunku 5.3 (specjalnie pogrubioną tak, aby różnica była bardziej ewidentna): hr size=32 p hr size=32 noshade Standardy HTML 4 i XHTML nie zalecają korzystania z atrybutu noshade, ten sam efekt można uzyskać za pomocą stylów. w 1 Piksel to jeden z wielu małych punktów składających się na wyświetlany obraz komputerowy. Ekrany mają różne przekątne, ale zazwyczaj jeden piksel równa się jednemu punktowi na monitorze o rozdzielczości 75 dpi (punktów na cal). Punkt to jednostka miary wykorzystywana w drukowaniu i równa ok. 1/72 cala (dokładnie w calu jest 72,27 punkta). Typowy krój czcionki wykorzystywany w popularnych przeglądarkach ma wysokość 12 punktów — czyli na jeden cal przypada sześć linii tekstu. 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+ 792/  2/8645.;9;+63;+   86,98;.8 Domyślnie linia rysowana jest na całej szerokości okna przeglądarki. Można to zmienić za pomocą atrybutu width — umożliwia on tworzenie linii albo o bezwzględnej szerokości w pikselach, albo zajmujących określoną szerokość procentową otaczającego tekstu. Większość przeglądarek auto- matycznie wyśrodkowuje linie, tę cechę można zmienić za pomocą atrybutu align (podpunkt 5.1.1.4). Poniżej przedstawiono kilka przykładów użycia parametru width przy tworzeniu linii (rysunek 5.4): Poniższe linie mają szerokość 40 i 320 pikseli, bez względu na szerokość samego okna przeglądarki: hr width=40 hr width=320 Natomiast te linie będą zawsze zajmowały 10 i 75 procent szerokości okna, bez względu na jego rozmiary: hr width= 10 hr width= 75 792/  2/.o91/648/8;1(cid:20).2/,/;1(cid:20).2/ Zauważmy również, że wartość względna (procentowa) w atrybucie width została umieszczona w cudzysłowach. Tak naprawdę w standardowym HTML-u nie są one absolutnie wymagane 2, ale ponieważ symbol procentu zazwyczaj służy do oznaczania symbolu zakodowanego, pominięcie cudzysłowów może spowodować niepoprawne wyświetlenie dokumentu. w 2 W XHTML-u wszystkie wartości atrybutów umieszcza się w cudzysłowach.  2.6/ $$  6/;3.2/2-34/.-2  .3-  2/433/  W większości przypadków nie powinno się określać bezwzględnej szerokości linii. Okno przeglą- darki może mieć różne wymiary i to, co u jednego użytkownika będzie krótką kreseczką, u innego może się okazać nieproporcjonalnie długą linią. Dlatego zaleca się stosowanie wartości procento- wych — po zmianie rozmiaru okna przeglądarki linie zachowają odpowiednią długość względną. Standardy HTML 4 oraz XHTML nie zalecają już stosowania atrybutu width — ten sam efekt można uzyskać za pomocą stylów.   86,98+12 Atrybut align w znaczniku hr może przybierać trzy różne wartości: left, center lub right. Te linie, których szerokość jest mniejsza niż otaczający tekst, zostaną umieszczone w odpowied- nim miejscu względem marginesów okna. Domyślne położenie to środek, czyli center. Za pomocą różnie wyrównanych linii można w ciekawy sposób rozdzielać poszczególne części dokumentu. Na przykład, w poniższym fragmencie linia o 35-procentowej szerokości wyświetlana jest kolejno po prawej stronie, pośrodku i po lewej (rysunek 5.5): hr width= 35 align=right h3 Zalecenia odnośnie pakowania owoców /h3 ... hr width= 35 align=center h3 Transport kumkwatów /h3 ... hr width= 35 align=left h3 Przetwarzanie soku /h3 ... 792/   3./+2/-(cid:20)-.39/289+433-2;64;2+2-;64 274374, Standardy HTML 4 oraz XHTML nie zalecają już stosowania atrybutu align — ten sam efekt można uzyskać za pomocą stylów.   86,98-336 Atrybut color jest obsługiwany tylko przez przeglądarkę Internet Explorer i umożliwia zmianę koloru linii. Wartość tego atrybutu to albo nazwa koloru, albo zbiór trzech cyfr szesnastkowych opisujących jego wartość. Pełną listę nazw i wartości kolorów znajdziemy w dodatku G. 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+ Domyślnie linia jest tego samego koloru, co tło dokumentu i ma „wyżłobione” krawędzie (nieco ciemniejsze i jaśniejsze od tła). Po określeniu własnego koloru, czy to poprzez atrybut color, czy przez style, efekt trójwymiarowości ulega zniweczeniu.   n-/2/+86,98(cid:30);2+-2+6 Atrybuty opisujące wygląd linii można łączyć, a ich kolejność nie ma znaczenia. Na przykład, że- by uzyskać duży prostokąt, łączymy atrybuty size i width (rysunek 5.6): hr size=32 width=50 align=center 792/  n-/2/+86,984;2+-2+643;++3712™/0/874/-+2/˜ Zresztą łączenie niektórych atrybutów w przypadku linii jest wymagane — na przykład, sam atry- but align w zasadzie nie ma żadnego znaczenia, bo przecież domyślnie linia rozciąga się na całej szerokości okna.   86,98-+77#.6#/:/28#.#+21#78/88/ W wielu znacznikach opisujących zawartość obsługiwany jest pewien zestaw wspólnych atrybu- tów. Pozwalają one na identyfikację (title) oraz oznaczenie (id) zawartości znacznika w celu późniejszego odwołania się do danego elementu lub uproszczenia automatycznego przetwarzania. Inne umożliwiają zmianę wyglądu elementu (class, style) oraz określenie języka i kierunku wyświetlania tekstu (lang i dir). Oczywiście trudno powiedzieć, w jaki sposób te dwa ostatnie mogą wpłynąć na wyświetlanie linii poziomej, tym niemniej stanowią one standardowe atrybuty tego znacznika. [atrybut dir, 3.6.1.1] [atrybut lang, 3.6.1.2] [atrybut id, 4.1.1.4] [atrybut title, 4.1.1.5] [atrybut style, 8.1.1] [atrybut class, 8.3] Ponadto istnieją jeszcze atrybuty opisujące reakcję na różne zdarzenia związane z danym elemen- tem i wymagające pewnych zabiegów programistycznych (atrybuty on(cid:1)). [procedury obsługi zdarzeń JavaScript, 12.3.3]    -/2.343.+o9.39/289 Linie poziome bardzo upraszczają nawigację w obrębie dokumentu. Żeby jednak ich obecność była uzasadniona, najpierw trzeba określić, ile poziomów nagłówków znajduje się w dokumencie oraz ile miejsca zostało przewidziane na każdą część. Dopiero wtedy można zdecydować, w któ- rych nagłówkach użycie linii poziomej będzie uzasadnione. Liniami można również oddzielać informacje „organizacyjne” dokumentu — np. spis treści, in- deks, bibliografię czy spis rysunków.  2.6/ $$  6/;3.2/2-34/.-2  .3-  2/433/  Doświadczeni autorzy wykorzystują również linie poziome do oznaczania początku i końca for- mularza. Jest to szczególnie przydatne w długich formularzach, wymagających przewijania okna przeglądarki. Konsekwentne oznaczanie początku i końca formularza upraszcza poruszanie się po nim i gwarantuje, że użytkownik nie przeoczy tej części, która znajduje się akurat poza „polem widzenia” przeglądarki.    -/2.33..//2+2+1o(cid:31);+7834 Przy tworzeniu całych zbiorów dokumentów bardzo istotne jest, aby zachować spójny i konsekwent- ny układ stron. Dotyczy to również obecności standardowego nagłówka i stopki na każdej z nich. Zazwyczaj w nagłówku znajdują się narzędzia nawigacyjne umożliwiające proste przejście do części wewnętrznych danego dokumentu oraz do innych dokumentów. W stopce znajdują się informacje o autorze i dokumencie oraz np. adres umożliwiający wysłanie komentarza do opiekuna strony. Linie pozwalają odgraniczyć nagłówek i stopkę od reszty dokumentu. Spójrzmy na poniższy kod oraz sposób jego wyświetlenia (rysunek 5.7): Podręcznik hodowców kumkwatów - sezon hodowlany hr h1 Sezon hodowlany /h1 Sezon hodowlany szlachetnego owocu występuje w Stanach Zjednoczonych w różnym czasie, zależnie od położenia geograficznego. Zostało to przedstawione na poniższej mapie: p img src= mapa.jpg p hr i Dane opublikowane przez a href= komentarze.html Stowarzyszenie Miłośników Kumkwatów /a /i 792/  .16+2-/2/2+1o4;+7834+433-2433- 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+    78+;+2////28(cid:20);16+0-2- Jedną z najatrakcyjniejszych cech standardów HTML i XHTML jest możliwość urozmaicenia do- kumentu tekstowego elementami graficznymi. Elementy takie mogą zostać albo wstawione bezpo- średnio do dokumentu, albo opisane odsyłaczami i udostępnione do oddzielnego pobrania, mogą również stanowić tło dokumentu. Rozsądne korzystanie z grafiki — animowanych ikon, obraz- ków, ilustracji, rysunków itd., zwiększa atrakcyjność dokumentu, przyciąga uwagę czytelnika i przyczynia się do „profesjonalnego” wyglądu. Rysunek można również przygotować tak, że bę- dzie stanowił mapę odsyłaczy. Jednak nadmiar grafiki może spowodować bałagan na stronie, utrudnić wyszukiwanie informacji oraz wydłużyć czas jej ładowania.   36+84(cid:31); Ani HTML, ani XHTML nie definiują „oficjalnego” formatu plików graficznych. Jednak popular- ne przeglądarki obsługują tylko pewną grupę takich formatów — przede wszystkim GIF i JPEG (ich opisy znajdują się poniżej). Przeglądanie większości innych formatów multimedialnych wy- maga zastosowania specjalnego oprogramowania, instalowanego dodatkowo. Nic więc dziwnego, że GIF i JPEG to de facto standardowe pliki graficzne sieci WWW. Oba te formaty były szeroko stosowane jeszcze zanim pojawiła się usługa WWW, a więc istnieje cała gama programów pozwalających na przygotowanie grafiki w tej postaci. Każdy z tych for- matów ma swoje zalety i wady, posiadają one także pewne cechy wykorzystywane przez niektóre przeglądarki w sposób specjalny.    Graphics Interchange Format (GIF) to format pierwotnie opracowany w celu przesyłania obiektów graficznych w sieci CompuServe. Pewne cechy tego formatu zadecydowały o jego popularności wśród autorów stron HTML i XHTML. Algorytm kodowania GIF jest niezależny od platformy, a więc oprogramowanie dekodujące (wbudowane w większość przeglądarek) pozwala na wyświe- tlenie np. pliku stworzonego na macintoshu, czy w komputerze PC pod kontrolą systemu Windows. Druga istotna cecha to specjalna technologia kompresji, zapewniająca znaczące zmniejszenie roz- miaru pliku graficznego i tym samym szybsze przesyłanie w sieci. Kompresja GIF jest „bezstrat- na”, tzn. dane oryginalnego obrazu nie są zmieniane czy „gubione”; po dekompresji obraz wyglą- da tak, jak pierwowzór. Do tego dochodzi jeszcze łatwość animacji obrazów GIF. Pliki GIF mają niezmiennie rozszerzenie .gif (lub .GIF), ale tak naprawdę istnieją dwie wersje te- go formatu: oryginalny GIF87 oraz rozszerzony GIF89a, bogatszy o nowe możliwości, często wy- korzystywane przez autorów stron WWW: przezroczyste tła, zachowywanie z przeplotem, anima- cja (patrz podpunkt 5.2.1.2). Współczesne przeglądarki obsługują obie wersje formatu. W obu tych wersjach zastosowano taki sam typ kodowania: 8-bitowe wartości odpowiadające poszcze- gólnym pikselom odwzorowywane są na paletę kolorów, zawierającą maksymalnie 256 kolorów dla jednego pliku. Większość obrazków GIF zbudowana jest z nawet mniejszej liczby kolorów, istnieją też narzędzia do zmniejszania palety nawet w bogatych w barwy grafikach. Im prostszy obrazek GIF, tym mniejsza wystarczy mu paleta kolorów i tym większa kompresja (a więc szyb- sze ładowanie).  2.6/ $$  6/;3.2/2-34/.-2  .3-    78+;+2////28#;16+0-2-  Jednakże, właśnie z powodu ograniczonej liczby kolorów, format GIF nie nadaje się do wszystkich zastosowań. Szczególnie dotyczy to fotografii (patrz opis formatu JPEG, podpunkt 5.2.1.3). „GIF-y” świetnie spisują się natomiast w ikonkach, obrazkach o niewielkiej liczbie kolorów i rysunkach. Ponieważ większość przeglądarek graficznych obsługuje format GIF bez żadnych dodatkowych zabiegów, obecnie jest to najpopularniejszy format graficzny sieci WWW. Elementy GIF można dołączać bezpośrednio do dokumentu, jak i odwoływać się do nich za pośrednictwem odsyłaczy. W razie wątpliwości odnośnie tego, jaki format graficzny wybrać, wybierzmy GIF. W większości sytuacji będzie to wybór trafny.     6/438#46/63-783+2+-+ Format GIF umożliwia uzyskanie trzech efektów specjalnych: przeplotu, przezroczystości oraz animacji. Dzięki przeplotowi grafika ładowana na stronie WWW nie jest wyświetlana po kawałku od góry w dół, ale sprawia wrażenie stopniowej „materializacji”. Zazwyczaj obrazek zakodowany w formacie GIF to sekwencja danych o pikselach, pogrupowanych w rzędy, w kolejności od góry do dołu. Typowy element w formacie GIF jest wyświetlany od góry i przypomina zsuwanie pod- ciągniętych żaluzji. Obrazek z przeplotem pojawia się od razu cały i jest stopniowo „uzupełniany” — przypomina obracanie już zsuniętych żaluzji. W „GIF-ie” z przeplotem wyświetlany jest naj- pierw co czwarty rząd pikseli. Najpierw grafika jest więc rozmyta (ale obraz widać czterokrotnie szybciej niż zwykle), a potem coraz ostrzejsza. Ten rozmyty obrazek pozwala już dobrze zoriento- wać się odnośnie zawartości pliku graficznego i tym samym upraszcza użytkownikom „surfowanie”. Wszystkie przeglądarki graficzne potrafią wyświetlać pliki GIF z przeplotem, jednak nie we wszystkich udaje się osiągnąć efekt „materializacji”. A nawet w tych, które to potrafią, użytkow- nik może zawsze włączyć opcję mówiącą przeglądarce, że ma odczekać aż do pełnego pobrania obrazka i dopiero wtedy go wyświetlić. Starsze przeglądarki zawsze pobierają i dekodują takie elementy przed wyświetleniem, zupełnie ignorując „materializację”. Kolejny popularny efekt specjalny formatu GIF89a to przezroczystość. W takich obrazkach część grafiki jest „niewidzialna” i prześwituje przez nią to, co znajduje się pod spodem (zazwyczaj tło strony). W takich plikach GIF jeden z kolorów w palecie został określony jako kolor tła. Przeglą- darka po prostu ignoruje ten kolor i z tego wynika efekt „prześwitywania”. Staranne dobranie rozmiarów obrazka oraz użycie jednolitego tła umożliwia uzyskanie efektu „wtopienia się” lub „unoszenia” grafiki nad stroną. Przezroczyste elementy GIF świetnie nadają się wszędzie tam, gdzie grafika ma zostać wpleciona w dokument i gdzie zależy nam na uniknięciu prostokątnego kształtu obrazka. Popularne są na przykład przezroczyste emblematy firm, ikony i ozdobniki — czyli wszystko to, co ma zostać wy- świetlone w naturalnym kształcie. Przezroczysty GIF może również zostać wpleciony w sam tekst i pełnić rolę jakiegoś symbolu, niemożliwego do uzyskania w standardowy sposób. Kłopot z przezroczystością polega na tym, że taki obrazek GIF będzie wyglądał mało zachęcająco, jeśli nie usuniemy jego otoczki (ramki) będącej rezultatem wstawienia tego elementu w odsyłacz (znacznik a ) albo po prostu stanowiącej część stylu. Wszystko to, co „opływa” obrazek, przyle- ga do jego kształtu faktycznego — czyli prostokątnego, a nie tylko tego „widzialnego”. To potrafi bardzo zepsuć wygląd strony. Trzeci trik wynikający ze stosowania formatu GIF89a, to możliwość tworzenia animacji. Za po- mocą specjalnych narzędzi tworzy się jeden plik składający się z wielu „klatek” GIF. Przeglądarka wyświetla kolejne klatki takiego elementu, podobnie jak klatki filmu rysunkowego. Dzięki istnieniu 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+ specjalnych segmentów sterujących pomiędzy poszczególnymi częściami składowymi obrazka możliwe jest określenie liczby powtórzeń całego „filmu”, ustalenie odstępów pomiędzy poszcze- gólnymi klatkami, określenie, czy poprzednia klatka na czas wyświetlania następnej ma zostać przeniesiona do tła, itp. Połączenie tych wszystkich funkcji sterujących z innymi cechami „GIF-ów” (indywidualne palety kolorów, przezroczystość i przeplot) umożliwia tworzenie naprawdę pięk- nych i wyszukanych animacji3. Proste animacje z użyciem plików GIF są ciekawym rozwiązaniem z jeszcze jednego powodu: aby je wstawić do dokumentu, nie musimy wykonywać żadnych dodatkowych zabiegów. Ale wszyst- ko ma swoją cenę: pliki GIF z animacją (poza tymi małymi — ikonkami i symbolami) bywają bardzo duże objętościowo, nawet jeśli przy ich tworzeniu zabiegaliśmy o to, aby w animacji nie były powtarzane miejsca statyczne obrazu. A jeśli w jednym dokumencie znajduje się wiele ani- macji, to jego ładowanie może się bardzo wydłużyć. Tak więc, przy projektowaniu strony trzeba bacznie uważać, aby nie przesadzić z animacjami. Wszystkie te triki z plikami GIF — przeplot, przezroczystość i animacja, nie dzieją się tak same z siebie. Do przygotowania takiego pliku wymagane jest specjalne oprogramowanie. Wiele narzę- dzi graficznych pozwala zachować wykonaną pracę w formacie GIF i określić miejsca przezroczy- ste. Są również programy shareware i freeware wyspecjalizowane w tworzeniu przezroczystych i animowanych elementów graficznych GIF — wystarczy poszukać ich w archiwach oprogramo- wania w Internecie. Dodatkowe informacje o tworzeniu elementów przezroczystych znajdują się w rozdziale 17., „Kruczki i sztuczki”.      Format kodowania obrazu JPEG powstał w wyniku prac grupy Joint Photographic Experts Group. Podobnie jak pliki GIF, obrazy JPEG są niezależne od platformy i skompresowane, co ułatwia transport w sieciach cyfrowych. W przeciwieństwie do formatu GIF, obrazy JPEG mogą się skła- dać z dziesiątków tysięcy kolorów, a więc format ten lepiej nadaje się do prezentacji wysublimo- wanych, fotorealistycznych elementów graficznych. W formacie JPEG zastosowano specjalne al- gorytmy pozwalające na uzyskanie o wiele większego stopnia kompresji. Całkiem powszechne są sytuacje, w których 200-kilobajtowy plik GIF można przekonwertować do postaci 30-kilobajtowego „JPEG-a”. Tak wielki stopień kompresji wynika z faktu, że JPEG jest formatem „stratnym”. Jed- nak stopień „stratności” można regulować za pomocą specjalnych, przeznaczonych do tego celu narzędzi — a więc, choć zdekompresowany obraz może nieco różnić się od oryginału, to ta różni- ca będzie na tyle niewielka, że większość osób jej po prostu nie zauważy. JPEG świetnie nadaje się do prezentacji fotografii, ale gorzej do zwykłych ilustracji, czy rysun- ków. Zastosowane algorytmy kompresji i dekompresji powodują pozostawianie zauważalnych „otoczek” przy dużych obszarach jednolitego koloru. Jeśli więc trzeba przedstawić rysunek, GIF będzie się nadawał do tego lepiej. Pliki formatu JPEG (rozszerzenie .jpg lub .JPG) są rozumiane przez niemal wszystkie współcze- sne przeglądarki graficzne. Rzadko już spotyka się te starsze, nie obsługujące tego formatu. w 3 Wydawnictwo Songline Studios opublikowało całą książkę o animacji w formacie GIF: GIF Animation Studio Richarda Komana.  2.6/ $$  6/;3.2/2-34/.-2  .3-    78+;+2////28#;16+0-2-     /.;78+;+///2816+0-2/ Dobry obrazek jest więcej wart niż tysiąc słów. Trzeba jednak uważać, żeby tymi „tysiącami słów” nie przegadać odbiorcy. Przede wszystkim należy pamiętać, że elementy graficzne na stronie są narzędziem wizualnym, a nie przynętą na czytelnika. Mają wspierać zawartość tekstową i poma- gać w nawigacji. Mają wyjaśniać, ilustrować lub służyć jako przykład. Fotografie wzbogacające treść, wykresy, diagramy, mapy i rysunki — to właśnie doskonali kandydaci do umieszczenia na stronie WWW. Na przykład, w katalogach sklepowych zdjęcia produktów są wręcz nieodzowne. Natomiast ikony lub symbole-odsyłacze (także animowane) bardzo wspomagają nawigację po wewnętrznych i zewnętrznych zasobach strony. Jeśli element graficzny nie pasuje do żadnej z po- wyższych kategorii, warto zastanowić się, czy w ogóle jest potrzebny! Jednym z najważniejszych problemów związanych z obecnością grafiki w dokumencie jest wy- dłużony czas ładowania. Problem ten doskwiera szczególnie osobom korzystającym z modemów. Typowy dokument tekstowy ma najwyżej 10 – 15 tysięcy bajtów; obrazki mogą tę objętość zwięk- szyć o setki i tysiące bajtów każdy. A całkowity czas pobierania dokumentu nie zależy wyłącznie od sumy objętości wszystkich komponentów, ale także od opóźnień przy ich pobieraniu. W zależności od szybkości połączenia — tzw. przepustowości (ang. bandwidth) zazwyczaj wyra- żanej w bitach lub bajtach na sekundę oraz aktualnego ruchu w sieci, jeden dokument zawierający 100-kilobajtowy obrazek może się ładować od 15 sekund (modem 57,6 Kb/s wczesnym rankiem) aż do ponad dziesięciu minut (modem 9600 b/s o północy). Tak to właśnie wygląda. Ale, oczywiście, powszechność grafiki i innych obiektów multimedialnych skłania usługodawców internetowych do oferowania szybszych i wydajniejszych połączeń. Wkrótce modemy 57,6 Kb/s odejdą w niepamięć (tak jak odeszły te o prędkości 9600 b/s) na korzyść modemów kablowych i technologii ADSL. Wkrótce większość użytkowników będzie łączyła się z prędkościami niedaw- no dostępnymi tylko dla najbogatszych — ponad megabit na sekundę. Ale w miarę obniżania cen dostępu do Internetu, wzrasta także liczba użytkowników i tym samym ruch w sieci. Jeśli staramy się uzyskać dostęp do przeciążonego serwera, prędkość naszego połą- czenia nie ma w ogóle praktycznego znaczenia.    /.9 ;+8/789 Tekst nie przestał być modny. W przypadku niektórych użytkowników jest to jedyna zawartość strony, do jakiej mają dostęp. W większości wypadków powinno się tak tworzyć dokumenty, aby mogli z nich skorzystać także ci, którzy nie mogą zobaczyć elementów graficznych lub w swoich przeglądarkach wyłączyli automatyczne ładowanie takich elementów (np. w celu przyspieszenia pobierania stron). Pokusa wzbogacania wszystkich dokumentów obrazkami może być silna, trzeba jednak pamiętać, że w niektórych sytuacjach o wiele sensowniejszy będzie po prostu zwykły tekst. Dokumenty konwertowane do postaci HTML z innych formatów rzadko zawierają grafikę. Mate- riały referencyjne i inna „poważna” zawartość często wystarczająco dobrze jest reprezentowana jako „czysty” tekst. Jeśli bardzo zależy nam na szybkim ładowaniu strony, warto poprzestać na zawartości tekstowej. Kiedy wiadomo, że stronę będzie pobierać wiele osób, nie można przeładowywać dokumentu gra- fiką — czytelnikom trudniej będzie „dostać się” do takiej strony. W ekstremalnych przypadkach 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+ można wstawić stronę wprowadzającą, na której czytelnik będzie mógł wybrać wersję naszej stro- ny zawierającą obrazki lub nie. Popularne przeglądarki wstawiają specjalne ikonki w miejscach, gdzie powinny zostać załadowane elementy graficzne — mogą one spowodować bałagan i spadek czytelności dokumentu. Jeżeli dokument ma zostać poprawnie zindeksowany przez wyszukiwarki WWW, powinien zawie- rać większość tekstu i tylko uzasadnione elementy graficzne — bez niepotrzebnych ozdóbek. Wy- szukiwarki takie niemal zawsze ignorują pliki graficzne. Jeśli większość strony zawiera grafikę, wyszukiwarki internetowe być może nie będą potrafiły uzyskać z takiego dokumentu żadnych sen- sownych informacji.     674/7+2/43,/6+2+16+0 Istnieje kilka sposobów przyspieszenia ładowania elementów graficznych (oczywiście, poza samą powściągliwością przy wstawianiu ich do dokumentu): Uprościć grafikę Pełnoekranowa grafika w 24-bitowym kolorze, nawet skompresowana do postaci pliku GIF lub JPEG, i tak spowoduje zapchanie połączenia. Warto zdobyć narzędzia do optymalizacji rozmiarów obrazka i liczby kolorów i korzystać z nich. Należy w miarę możliwości upraszczać elementy graficzne. Unikać panoramicznych fotografii i dużych obszarów pustych, a także pokaźnych obramowań i innych zajmujących wiele miejsca komponentów. Trzeba również z rezerwą stosować dithering (łączenie przylegających punktów w różnych kolorach w celu uzyskania trzeciego); technika ta zmniejsza możliwości kompresji. Nie stosować dużych obszarów o jednolitym kolorze — kiepsko się kompresują zarówno w formacie GIF, jak i JPEG. Używać wielokrotnie tych samych elementów Szczególnie dotyczy to ikon i animowanych „GIF-ów”. Większość przeglądarek przechowuje raz pobrane elementy strony w pamięci podręcznej (ang. cache), dzięki czemu ich kolejne ładowanie nie wymaga łączenia z siecią i odbywa się bardzo szybko. W animacjach GIF kolejne „klatki” należy budować poprzez zmianę tylko fragmentu poprzednich, a nie przerysowywać cały obrazek (to również przyspiesza samą animację). Dzielić duże dokumenty na części Ta ogólna zasada dotyczy również elementów graficznych. Dokumenty rozdzielone na wiele małych segmentów i połączone za pomocą odsyłaczy oraz spisów treści są lepiej przyjmowane przez czytelników niż strony bardzo duże. Odbiorca woli zazwyczaj „przerzucić” kilka stron niż czekać na załadowanie jednej, ale długiej (to jest jak przełączanie kanałów w pilocie — syndrom choroby telewizyjnej). Często przytacza się praktyczną zasadę, mówiącą, że jeden dokument nie powinien przekroczyć objętości 50 kilobajtów — wtedy odbiorca korzystający nawet z wolnego połączenia nie zniechęci się długim czasem ładowania. Oddzielać duże elementy graficzne Duże elementy graficzne warto oddzielić od właściwego dokumentu i zastąpić je odsyłaczem do pliku (np. w postaci miniaturki obrazka). Wtedy czytelnik sam zadecyduje, czy pobrać taki element graficzny. A ponieważ pobrana w ten sposób grafika nie jest „wymieszana” z innymi elementami strony (np. obrazkami wplecionymi w tekst), łatwiej jest ją zachować i przejrzeć w późniejszym czasie (więcej o pobieraniu takich elementów graficznych w punkcie 5.6.2).  2.6/ $$  6/;3.2/2-34/.-2  .3-    78+;+2////28#;16+0-2-  Podawać rozmiary obrazka Jeszcze inny sposób zwiększenia wydajności to określenie wysokości i szerokości obrazka w jego znaczniku. W ten sposób eliminuje się dodatkowe czynności, jakie musi wykonać przeglądarka w celu zaplanowania rozmieszczenia elementów strony; takie postępowanie ma jednak również wady — o nich w podpunkcie 5.2.6.12.     - Jeśli posiadamy już gotowe obrazki w jednym tylko formacie, lub korzystamy z narzędzia zapisu- jącego tylko GIF lub tylko JPEG, możemy wzbogacać stronę elementami graficznymi tylko tego jednego typu. Po stronie czytelnika nie powinno być natomiast żadnych problemów z odczytaniem i jednego, i drugiego formatu. Tym niemniej zaleca się zdobycie narzędzi pozwalających na zapis lub konwersję do obu tych formatów; każdy z nich ma charakterystyczne cechy. Na przykład, w ikonach i symbolach przy- daje się możliwość uzyskania przezroczystości (GIF), a w dużych i kolorowych zdjęciach specjal- na kompresja stratna (JPEG).    2+-21 Znacznik img umożliwia wstawienie elementu graficznego w bieżącym miejscu dokumentu. Ani przed, ani po tym znaczniku nie jest wstawiane domyślnie przełamanie wiersza, tak więc do- myślnie wszystkie obrazki zostają „zagnieżdżone” w tekście, czy innej zawartości. Format samego pliku graficznego nie jest zdefiniowany w standardach HTML i XHTML. Popu- larne przeglądarki obsługują dwa formaty: GIF i JPEG. Standardy nie opisują ani nie ograniczają również rozmiarów obrazka. Grafika może mieć dowolną liczbę kolorów, ale sposób ich wyświe- tlania w dużym stopniu zależy od przeglądarki. Prezentacja grafiki w ogóle bardzo zależy od „browsera”. Przeglądarki tekstowe mogą ignorować grafikę, a te pracujące w ograniczonym środowisku mogą zaś przedstawiać ją w zmodyfikowany sposób. Część użytkowników, szczególnie tych korzystających z powolnych połączeń, może w ogóle wyłączyć pobieranie obrazków. Trzeba więc zaplanować stronę tak, aby miała ona dla czytelnika sens nawet bez żadnych elementów graficznych.    86,9876- Atrybut src jest w znaczniku img wymagany (chyba że zastosowano atrybut dynsrc obsługi- wany przez Internet Explorer i wykorzystywany do prezentacji filmów). Wartość atrybutu src to adres URL pliku, absolutny albo względny w stosunku do bieżącego dokumentu. Aby nie zaśmie- cać katalogu strony, autorzy zazwyczaj przenoszą wszystkie pliki graficzne do oddzielnego folde- ru o odpowiedniej nazwie, np. „obrazki” czy „pics”. [adresy URL, 6.2] 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+ 1 Funkcja: Powoduje wstawienie do dokumentu elementu graficznego Atrybuty: ALIGN ALT BORDER CLASS CONTROLS DIR DYNSRC HEIGHT HSPACE ID ISMAP LANG LONGDESC LOOP LOWSRC NAME ONABORT ONCLICK ONDBLCLICK ONERROR ONKEYDOWN ONKEYPRESS ONKEYUP ONLOAD ONMOUSEDOWN ONMOUSEMOVE ONMOUSEOUT ONMOUSEOVER ONMOUSEUP SRC START STYLE TITLE USEMAP VSPACE WIDTH Znacznik zamykajcy: w HTML-u brak, w XHTML-u /img lub img ... / Zawiera: Nic Stosowany wewntrz: text Na przykład, poniższy fragment kodu HTML powoduje umieszczenie w dokumencie zdjęcia ku- mkwatów (rysunek 5.8): Poniżej widzimy, w całej swej okazałości, szlachetne owoce kumquat: p img src= kumquat.jpg p Czyż nie piękny widok? W przykładzie tym wokół znacznika img wstawiono znaczniki akapitów, dzięki czemu przed obrazkiem i po nim przeglądarka dodała nieco pustego miejsca. Jak opisano to w podpunkcie 5.2.6.4, tekst może także „przystawać” z boku obrazka.  2.6/ $$  6/;3.2/2-34/.-2  .3-    78+;+2////28#;16+0-2-  792/  ,6+/;.39/2-/     86,983;76- Przeglądarka Netscape umożliwia uzupełnienie atrybutu src atrybutem lowsrc, za którego pomocą można przyspieszyć ładowanie dokumentu. Wartością lowsrc, podobnie jak src, jest adres URL pliku graficznego ładowanego przez przeglądarkę po napotkaniu znacznika img . Plik ten jest ładowany natychmiast; dopiero po załadowaniu całej strony, gdy może ona już być odczytana przez użytkownika, ładowany jest plik podany jako wartość atrybutu src. Obrazek określany atrybutem lowsrc ma niską rozdzielczość i jest „uboższą” wersją pliku wła- ściwego. Użytkownik poznaje zawartość obrazka nie czekając długo na pobranie. Atrybut ten mo- że jednak służyć również do uzyskiwania efektów specjalnych. Przeglądarka Netscape rezerwuje pewien obszar dokumentu na element graficzny, zgodnie z roz- miarami obrazka podanego jako wartość lowsrc, chyba że wielkości te (szerokość i wysokość) podane zostaną jawnie za pomocą atrybutów height i width. Jeśli więc rozmiary obrazka okre- ślonego w atrybucie src są różne od tego w lowsrc, albo jeśli jawnie podano atrybuty wysokości i szerokości, obrazek podany jako src zostanie wyświetlony jako zmniejszony, powiększony, roz- ciągnięty lub ściśnięty — tak, aby pasował do przydzielonego miejsca. Co więcej, obrazki okre- ślone w atrybutach lowsrc i src nie muszą przedstawiać tego samego, a więc opóźnione wy- świetlanie można zamienić w prostą animację. Atrybut lowsrc jest obsługiwany wyłącznie przez Netscape. Inne przeglądarki ignorują go i ła- dują tylko ten element, który określono jako wartość atrybutu src. Jeśli użytkownik wyłączy po- bieranie obrazków w Netscape, przeglądarka ta nie załaduje żadnej z tych dwóch wersji pliku. W takim przypadku obrazki te zostaną pobrane w odpowiedniej kolejności dopiero wtedy, gdy użytkownik kliknie na ikonie wstawionej w miejsce grafiki. Żadna przeglądarka nie ładuje tylko elementu opisanego jako lowsrc; zawarcie atrybutu src jest więc konieczne — inaczej w oknie przeglądarki nie pojawi się żaden obrazek poza ikonką-„wypełniaczem”. 2.6/ $$  6/;3.2/2-34/.-2  .3-   3.+o 2/(cid:17)16+0+98/.+     86,98+8321./7- Atrybut alt umożliwia określenie alternatywnego tekstu, jaki zostanie wyświetlony przez prze- glądarkę nie obsługującą grafiki lub, w której użytkownik wyłączył pobieranie obrazków. Znacz- nik ten jest opcjonalny, ale naprawdę warto korzystać z niego w większości przypadków. Jeśli element graficzny nie będzie dostępny, użytkownik zobaczy chociaż co miało się tam znaleźć. Ponadto, najnowsze przeglądarki wyświetlają tekst podany jako wartość argumentu alt w ramce tekstowej, gdy użytkownik umieści wskaźnik myszy nad obrazkiem. Można więc umieścić tam informacje dodatkowe, wyświetlane np. po najechaniu myszą na małą ikonkę (rysunek 5.9). 792/   744o-/72/46/1.+6;;/8++;+683+86,989+8;3/298/783; Wartość atrybutu alt to łańcuch tekstowy o długości do 1024 znaków, w tym spacje i znaki prze- stankowe. Zawsze wstawiany jest w cudzysłowach. Może zawierać encje, ale nie znaczniki; nie jest możliwe sterowanie stylem takiego tekstu. Jeśli obrazek jest dostępny, a użytkownik włączył pobieranie grafiki, przeglądarki graficzne za- zwyczaj nie wyświetlają wartości atrybutu alt. W przeciwnym razie wartość ta pokazywana jest obok ikonki wstawianej w miejscu obrazka. Dobrze dobrane etykiety alt mogą więc bardzo po- móc użytkownikom nie pobierającym grafiki z powodu posiadania powolnego łącza. Przeglądarki tekstowe, takie jak Lynx, umieszczają zawartość atrybutu alt bezpośrednio w tek- ście, tak jak każdy inny element zawartości dokumentu. Odpowiedni tekst takiego atrybutu może więc z powodzeniem zastąpić grafikę (użytkownicy przeglądarek tekstowych bardzo to docenią — nie lubią, kiedy na każdym kroku udowadnia się im, że są internautami drugiej kategorii). Na przykład, w poniższym przykładzie użytkownik przeglądarki graficznej zobaczy kulkę służącą do wypunktowania, a użytkownik przeglądarki tekstowej — gwiazdkę: h3 img src= obrazki/kulka.gif alt= * Wprowadzenie /h3 Natomiast w poniższym przykładzie tekst zastępuje symboliczną ikonkę: ul li Przepisy na przyrządzanie kumkwatów img src= obrazki/nowosc.gif alt= (Nowość!) li Okresy zbiorów /ul W przeglądarce tekstowej zamiast ikonki nowosc.gif pojawi się napis „(Nowość!)”. W atrybucie alt może się znaleźć nawet dłuższy tekst (patrz rysunek 5.10):  2.6/ $$  6/;3.2/2-34/.-2  .3-    78+;+2////28#;16+0-2-  Poniżej widzimy, w całej swej okazałości, szlachetne owoce kumquat: p img src= kumquat.jpg alt= [Zdjęcie owoców kumkwata w naturalnym otoczeniu] p Czyż nie piękny widok? 792/  6/1.+68/783;/++783,6++;;/8+8/78+;+68;+86,9-/+8 Atrybut longdesc jest podobny do atrybutu alt, ale umożliwia stosowanie dłuższych opisów. Wartością tego atrybutu jest adres URL dokumentu zawierającego opis obrazka. Jeśli chcemy umie- ścić opis dłuższy niż 1024 znaki, to robimy to właśnie za pomocą longdesc. Ani HTML 4, ani XHTML nie wyszczególniają, jaka może być zawartość takiego opisu. Obecnie żadna przeglądarka nie obsługuje także tego atrybutu, trudno więc przytoczyć jakąkolwiek praktyczną radę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML i XHTML. Przewodnik encyklopedyczny
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: