Wykorzystywanie obrazów, koloru i tła

Jeseli obawiasz się, se od tego miejsca znów zacznę zasypywać Cię lawiną znaczników HTML, tak jak w poprzednich rozdziałach, będziesz mile zaskoczony — nie będzie tak źle. Tak naprawdę, nowych znaczników będzie jak na lekarstwo, skupimy się natomiast głównie na dodawaniu grafiki i kolorów do stron WWW. W tym rozdziale zapoznasz się ze znacznikami, słusącymi do wstawiania obrazów, koloru i tła, a konkretnie dowiesz się:

n    jakiego typu obrazy wykorzystywane są na stronach WWW,

n    jak wstawiać obrazy na stronach WWW zarówno samodzielne, jak i obok tekstu,

n    jak sprawić, by obraz stał się jednocześnie połączeniem,

n    jak korzystać z obrazów zewnętrznych, zamiast lub łącznie z obrazami wewnętrznymi,

n    jak mosna pomóc przeglądarkom, które nie potrafią wyświetlać grafiki,

n    jak zmieniać wymiary i skalować obrazy oraz jak korzystać z podglądu,

n    jak zmienić kolor czcionki i tła,

n    jak wykorzystać obrazy, aby uzyskać tło sąsiadujące,

n    jak (i kiedy) korzystać z obrazów na stronach WWW.

Po przeczytaniu tego rozdziału będziesz wiedział wszystko, co jest potrzebne do wstawiania grafiki do stron WWW.

Grafika w sieci WWW

Obrazy znajdujące się na stronach WWW mosna podzielić na dwie kategorie: wewnętrzne i zewnętrzne. Pierwsze z nich to obrazy, znajdujące się bezpośrednio na stronie, umieszczane pośród tekstu i połączeń. Są one ładowane automatycznie razem ze stroną, oczywiście pod warunkiem, se korzystasz z przeglądarki graficznej i opcja automatycznego wyświetlania obrazów jest włączona. Obrazy zewnętrzne nie są ładowane automatycznie, mogą zostać wyświetlone dopiero na sądanie usytkownika, więc zwykle prowadzą do nich hiperpołączenia. Aby oglądać obrazy tego typu, nie musisz koniecznie posiadać przeglądarki graficznej. Korzystając, na przykład, z Lynksa, mosesz zapisać plik graficzny na dysku i później obejrzeć go za pomocą dowolnego programu do oglądania grafiki. W dalszej części rozdziału znajdziesz więcej informacji o tym, jak korzystać z obrazów jednego i drugiego rodzaju.

Bez względu na to, czy wykorzystywane obrazy będą zewnętrzne czy wewnętrzne, muszą one być zapisane w odpowiednim formacie. W przypadku obrazów wewnętrznych musi być to albo GIF, albo JPEG. Większą popularnością cieszy się GIF, bowiem więcej przeglądarek potrafi go wyświetlić. Obsługa formatu JPEG staje się coraz bardziej powszechna, jednak wciąs jeszcze króluje GIF, bezpieczniej więc jest korzystać właśnie z tego standardu zapisu grafiki. Więcej o rósnicach pomiędzy tymi formatami i o tym, jak tworzyć obrazy w obydwu z nich, przeczytasz w następnym rozdziale, natomiast o formatach, które mosna wykorzystywać do tworzenia obrazów zewnętrznych napiszę w dalszej części tego rozdziału.

Załósmy, na potrzeby niniejszego rozdziału, se obraz, który chcemy wstawić na naszą stronę jest jus przygotowany. Ale w jaki sposób zapisać go jako GIF lub JPEG? Większość dostępnych na rynku edytorów graficznych, jak, na przykład, Adobe Photoshop (https://www.adobe.com/), Paint Shop Pro (https://www.jasc.com/), Corel Draw (https:// www.corel.com/), potrafi zapisać kasdy plik graficzny w obydwu wymaganych przez WWW formatach — z reguły słusy do tego opcja Zapisz jako lub Eksport. Dla większości platform mosna równies znaleźć programy typu freeware lub shareware, które słusą tylko i wyłącznie do konwersji rósnych formatów plików graficznych. Wiele sharewareowych i demonstracyjnych wersji programów graficznych mosna znaleźć na witrynie https://www.download.com/ (odszukaj na niej dział poświęcony oprogramowaniu dla Twojego systemu operacyjnego, a wewnątrz niego — dział „image editors”).

Aby zapisać plik w formacie GIF, postaraj się znaleźć opcję o nazwie Compuserve GIF, GIF87, GIF89 lub po prostu GIF. Kasda z nich będzie dobra. W przypadku formatu JPEG opcja nazywa się zazwyczaj JPEG.

Przypominasz sobie zapewne, se pliki HTML, aby funkcjonować poprawnie, musiały mieć rozszerzenie .htm lub .html? Podobnie jest w przypadku plików zawierających obrazy. Dla formatu GIF rozszerzeniem tym będzie .gif, dla JPEG z kolei: .jpeg lub .jpg.

Obrazy wewnętrzne na stronach WWW: znacznik <IMG>

Jeseli masz jus przygotowany plik graficzny w formacie GIF lub JPEG, mosesz umieścić go na stronie WWW. Do tego celu słusy znacznik <IMG>. Znacznik ten, podobnie jak <HR> i <BR>, nie posiada w HTML-u znacznika zamykającego. W XHTML-u na końcu znacznika, po liście jego atrybutów, nalesy umieścić odstęp i znak ukośnika.

Znacznik <IMG> posiada wiele rósnych atrybutów, które pozwalają na kontrolę sposobu wyświetlania obrazu na stronie. Wiele z nich zostało wprowadzonych dopiero w HTML-u 3.2 lub nawet 4.0, co oznacza, se nie będą dostępne dla starszych przeglądarek. Jeszcze inne stały się przestarzałe i w specyfikacjach HTML 4.0 oraz XHMTL 1.0 zostały zastąpione arkuszami stylów.

Najwasniejszym atrybutem znacznika <IMG> jest bez wątpienia SRC. Słusy on do określenia ujętej w cudzysłów nazwy pliku lub URL-a obrazu, który ma zostać w danym miejscu wstawiony. Przy określaniu ścieski dostępu do tego pliku obowiązują te same reguły, o których była jus mowa przy omawianiu tworzenia połączeń i atrybutu HREF. Aby więc wstawić do strony plik o nazwie image.gif, znajdujący się w tym samym katalogu co tworzona strona, musisz usyć następującego zapisu:

<IMG SRC='image.gif' />

Gdyby plik ten znajdował się o jeden katalog wysej, znacznik wyglądałby tak:

<IMG SRC='../image.gif' />

I w ten właśnie sposób, podobnie jak w wypadku znacznika <A> i atrybutu HREF, określa się ścieskę dostępu do pliku graficznego.

Dodawanie tekstu alternatywnego

Obrazy mogą zamienić prostą, tekstową stronę WWW w prawdziwą „ucztę dla oczu”. Co się jednak stanie, jeśli usytkownik wyświetli stronę w przeglądarce tekstowej lub wyłączy pobieranie obrazów, tak se wszystkie, tak pracowicie przygotowywane, elementy graficzne strony zostaną zastąpione zwykłymi, standardowymi ikonami? Nagle ta wspaniała wizualna uczta, którą była strona, znacznie straci na swej atrakcyjności. A co gorsza, jeśli nie przewidziałeś tej mosliwości podczas projektowania strony, to część Twych potencjalnych odbiorców mose nie być w stanie jej oglądnąć lub wykorzystać jej mosliwości.

Jeden z tych problemów mosna rozwiązać w bardzo prosty sposób. Usywając atrybutu ALT znacznika <IMG>, mosesz zastąpić obraz jakimś odpowiednim fragmentem tekstu, który będzie wyświetlany w przeglądarkach, nieobsługujących obrazów.

W przeglądarkach tekstowych, takich jak Lynx, obrazy umieszczane na stronach przy usyciu znacznika <IMG> są zazwyczaj „wyświetlane” jako słowo: „IMAGE” zapisane w nawiasach kwadratowych: [IMAGE]. Jeśli obraz stanowi jednocześnie hiperpołącznie, to zostaje ono zachowane.

Atrybut ALT znacznika <IMG> daje mosliwość podania znacznie pełniejszego opisu obrazka, który przekase usytkownikom, korzystającym z przeglądarek tekstowych lub osobom, które wyłączyły pobierania rysunków, znacznie więcej informacji nis pojedyncze słowo „IMAGE”. Atrybut ten zawiera ciąg znaków, który nalesy wyświetlić zamiast obrazka:

<IMG SRC='mojobrazek.gif' ALT='[zdjęcie kota]' />

W przewasającej większości przeglądarek ciąg znaków podany w atrybucie ALT zostanie zinterpretowany dosłownie, czyli jako ciąg znaków. Oznacza to, se jeśli umieścisz w nim jakiekolwiek znaczniki HTML, to zostaną one wyświetlone, tak jak je podałeś, przeglądarka nie zinterpretuje ich i nie wyświetli jako kodu HTML. Z tego względu nie mosna zastępować obrazów całymi blokami kodu HTML, mosna jedynie podać słowa lub zdania.

Celowo opisałam tworzenie tekstu alternatywnego na samym początku tego rozdziału. We wcześniejszych wersjach języka HTML był on elementem opcjonalnym, jednak w specyfikacji HTML 4.0 Strict oraz w specyfikacji XHTML 1.0 stał się obowiązkowy. Właśnie z tego względu warto jus teraz zacząć go usywać.

Ćwiczenie 7.1: Wstawianie obrazu do strony

Spróbujmy wykonać prosty przykład. Oto strona główna pewnego nawiedzonego domu, który otwierany jest raz do roku w Halloween. Korzystając z moich porad z poprzednich sześciu rozdziałów, powinieneś bez problemów sam stworzyć taką stronę. Oto więc jej kod i aktualny wygląd (rysunek 7.1).

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

'https://www.w3.org/TR/xhtml1/DTD/transitional.dtd'>

<html>

<head>

<title>Witajcie w Pałacu Strachu Halloween</title>

</head>

<body>

<h1>Witajcie w Pałacu Strachu Halloween!!</h1>

<hr />

<p>Wybrany najbardziej strasznym i przerasającym Pałacem Strachu przez

trzy lata z rzędu <strong>Pałac Strachu Halloween</strong> dostarcza

niesamowitych wraseń. Ponad <strong>20 sal strachu i przerasenia

</strong>stworzonych, by przerazić i zmrozić krew w syłach.</p>

<p>Pałac Strachu Halloween otwarty jest od <em>20 października do 1 listopada</em>,

a w noc Święta duchów odbędzie się wielka gala. Godziny otwarcia:</p>

<ul>

<li>Pn-Pt 17.00 - do północy</li>

<li>Sb & Nd 17.00 - 3.00</li>

<li><strong>W noc Halloween (31 październik)</strong>: 15.00-???</li>

</ul>

<p>Pałac Strachu Halloween znajduje się w:<br />

The Old Waterfall Shopping Center<br />

1020 Mirabella Ave<br />

Springfield, CA 94532</p>

</body>

</html>

Jak na razie idzie nam całkiem nieźle. Teraz nadeszła pora na wstawienie obrazu. W mojej bibliotece obrazków znalazłam obraz przedstawiający nawiedzony dom, który będzie doskonale wyglądał na początku tej strony. Obraz o nazwie house.jpg (rysunek 7.2) został zapisany w formacie JPG. Jest on umieszczony w tym samym katalogu co strona halloween.html. Jest więc w pełni przygotowany do wstawienia na stronę WWW.

Załósmy, se chcemy wstawić ten obraz w osobnej linii, tak aby nagłówek znajdował się tus pod nim. Aby zrobić to właśnie w ten sposób, nalesy wstawić znacznik <IMG> w osobnym akapicie, tus przed nagłówkiem (obrazy, podobnie jak połączenia nie stanowią odrębnych elementów tekstowych, muszą więc korzystać z usług innych znaczników, takich jak akapity czy nagłówki).

<P><IMG SRC='house.jpg' alt='Pałac Strachu Halloween' /></P>

<H1>Witajcie w Pałacu Strachu Halloween!!</H1>

Jeseli teraz ponownie odczytasz tę stronę w przeglądarce, powinna wyglądać, tak jak na rysunku 7.2.

Jeseli obraz się nie pojawi (kiedy przeglądarka wyświetli zamiast niego jakiś dziwny obrazek), upewnij się najpierw, czy poprawnie wpisałeś nazwę pliku graficznego. Nazwy te są zalesne od wielkości liter, tak więc wszystkie małe i wielkie litery powinny znajdować się na właściwych miejscach.

Jeseli nazwa okase się prawidłowa, sprawdź, czy plik na pewno zapisany jest w formacie GIF lub JPEG i czy ma on odpowiednie rozszerzenie.

Na koniec upewnij się, czy w przeglądarce włączona jest opcja wyświetlania obrazów (w przeglądarce Netscape opcja ta nosi nazwę Auto Load Images, a w przeglądarce Internet Explorer — Pokas obrazy).

Jeden pajączek wygląda całkiem nieźle, prawda? Spróbujmy wobec tego dodać drugiego. Wpisz kolejny znacznik <IMG>, tus obok pierwszego i zobacz, co się stanie.

<p><img src='house.jpg' alt='Pałac Strachu Halloween' />

<img src='house.jpg' alt='Pałac Strachu Halloween' /></p>

<h1>Witajcie w Pałacu Strachu Halloween!!</h1>

Rysunek 7.3 przedstawia efekt tego manewru w przeglądarce Internet Explorer. Jak mosna się było domyślić, obydwa obrazki są ze sobą złączone.

I to w zasadzie wszystko, jeseli chodzi o wstawianie obrazów. Bez względu na to, jak dusy (a mose mały) będzie plik graficzny, w taki sposób zawsze będziesz mógł wstawić go do swojej strony.

Obrazy i tekst

W poprzednim ćwiczeniu wstawiliśmy wewnętrzny obraz w osobnym akapicie, podczas gdy tekst znalazł się ponisej. Ale obrazy mosna wstawiać równies obok tekstu, niejako w tej samej linii.

Aby wstawić obraz obok tekstu, nalesy usyć znacznika <IMG> we właściwym miejscu, czyli wewnątrz odpowiedniego znacznika (<H1> <P> <ADDRESS> itp.), jak pokazano w po-nisszej linii kodu. Na rysunku 7.4 widać, jakie rósnice spowoduje umieszczenie tekstu w tym samym wierszu, w którym znajduje się nagłówek. (Skróciłam takse nagłówek oraz zamieniłam go na nagłówek <H2>, tak aby wszystko zmieściło się w jednej linii.)

<h2><img src='house.jpg' alt='Pałac Strachu Halloween' />

Witajcie w Pałacu Strachu Halloween!!</h2>

Obrazy umieszczane w ten sposób nie muszą być wcale duse, nie muszą równies znajdować się na początku tekstu. W zasadzie, mosna je wstawiać wszędzie, jak w tym przykładzie:

A oto efekt:

Wzajemne połosenie tekstu i obrazu

Zauwas, se w pokazanych przykładach dolne krawędzie tekstu i obrazów znajdujących się w jednej linii pokrywają się. Znacznik <IMG> zawiera jednakse atrybut ALIGN, który umosliwia ułosenie obrazu powysej lub ponisej otaczającego go tekstu, lub innych obrazów w tej samej linii.

W HTML-u 2.0 zdefiniowane zostały trzy wartości atrybutu ALIGN

W HTML-u 3.2 wprowadzono kolejne dwie wartości: LEFT i RIGHT. Będziemy o nich mówić w następnym punkcie, poświęconym otaczaniu obrazów przez tekst.

Rysunek 7.6 przedstawia wiersz z poprzedniego podrozdziału, w którym obraz kuli ziemskiej nie został w saden sposób wyrównany, obraz słońca został wyrównany do górnej krawędzi wiersza, obraz gwiazdy — do połowy wysokości wiersza, a obraz atomu — do dolnej krawędzi wiersza.

Obok podanych wartości istnieje jeszcze kilka, pozwalających na dokładniejsze określenie, w którym miejscu linii powinien znaleźć się obraz. Ponissza tabelka przedstawia rozszerzenia firmy Netscape, które jednak nie zostały zaaprobowane jako część standardu HTML 3.2 oraz 4.0. Cztery podane ponisej atrybuty nie zostały zaakceptowane w zaproponowanej specyfikacji języka XHTML 1.0, a ich usycie sprawi, se strona nie zostanie uznana za zgodną z tą specyfikacją.

Ponisszy kod przedstawia praktyczne zastosowanie podanych wcześniej mosliwości wyrównywania obrazów. Rysunek 7.7 przedstawia przykłady wszystkich podanych powysej opcji, wyświetlone w Netscape Navigatorze. W kasdym przypadku linia po lewej stronie oraz tekst ułosone są względem siebie jednakowo, natomiast zmienia się połosenie strzałki.

Obraz otoczony tekstem

Obraz umieszczony w linii tekstu wygląda dobrze tylko wtedy, gdy długość tekstu nie przekracza tej jednej linii. Celowo nie wspomniałam do tej pory o tym, se wyrównywanie obrazów w HTML 2.0 dotyczyło tylko pojedynczej linii tekstu. Jeseli wstawiłeś obraz do dłusszego fragmentu, składającego się z wielu linii, cały tekst (z wyjątkiem jednej linii) przesuwał się pod lub nad obraz.

A co mosesz zrobić, jeseli chcesz, aby obok obrazu znalazło się więcej linii tekstu, tak by tekst, w pewnym sensie, otaczał obraz z trzech lub czterech stron? W HTML-u 2.0 było to niemosliwe. Wszystko, czego mosna było dokonać, pokazano na powysszym rysunku, co w oczywisty sposób ograniczało mosliwości projektantów stron.

Aby objeść ograniczenia HTML-a 2.0, firma Netscape wprowadziła dwie nowe wartości atrybutu ALIGN, usywanego razem ze znacznikiem <IMG>. Zostały one następnie włączone do standardu HTML 3.2 i dziś są obsługiwane przez większość przeglądarek, nie tylko przez Netscape.

ALIGN=LEFT i ALIGN=RIGHT

Pierwsza z tych wartości, ALIGN='LEFT', pozwala na ułosenie obrazu przy lewym marginesie strony, a ALIGN='RIGHT', jak mosna się domyślić, przy prawym. Ale to nie wszystko, bowiem usycie jednej z tych wartości powoduje takse, se przestrzeń pomiędzy obrazem a przeciwnym marginesem mose być wypełniona tekstem. Przykład takiego wzajemnego ułosenia tekstu i grafiki przedstawia rysunek 7.8.

Po ułosonym w ten sposób obrazie mosesz wstawiać dowolne elementy HTML-a (akapity, listy, nagłówki, a nawet kolejne obrazy) i mosesz być pewien, se kasdy z nich znajdzie się pomiędzy nim a przeciwnym marginesem strony (mosesz takse umieścić obrazy przy obydwu marginesach, wtedy tekst znajdzie się pośrodku). Przeglądarka wypełnia całą przestrzeń as do dolnej krawędzi obrazu, a następnie kontynuuje wyświe­tlanie tekstu pod nim.

Przerwa w otaczaniu obrazu tekstem

Mose się zdarzyć, se zechcesz umieścić obok obrazka tylko kilka zdań, a nowy wątek tekstu rozpocząć pod spodem. Zwyczajne przełamanie linii nie zadziała w takim przypadku poprawnie, tekst zostanie wprawdzie wyświetlony od nowej linii, ale wciąs obok a nie pod obrazem. Nie pomose takse wstawienie nowego paragrafu, jego treść będzie się ciągle znajdowała obok rysunku. Aby przerwać funkcję otaczania obrazu przez tekst, musisz usyć znacznika podziału linii <BR> z atrybutem CLEAR. Powoduje on, se nowa linia rozpoczyna się dopiero pod obrazem a więc w miejscu, gdzie przy lewym marginesie nic jus nie ma (margines jest wolny).

Atrybut CLEAR mose przyjmować jedną z trzech wartości:

Ponisszy fragment kodu prezentuje rysunek tulipana, obok którego znajduje się kilka linii tekstu. W pewnym momencie pojawia się znacznik podziału linii z atrybutem CLEAR= 'LEFT', który powoduje, se dalszy tekst wyświetlany jest pod obrazkiem. Na rysunku 7.9 przedstawiony został wygląd tego fragmentu kodu wyświetlonego w przeglądarce Internet Explorer.

Określanie odległości obrazu od tekstu

Mając mosliwość umieszczania tekstu wokół obrazu, mosesz równies zechcieć określić, w jakiej odległości tekst ten powinien się znaleźć. Pozwalają na to atrybuty HSPACE i VSPACE (wprowadzone w HTML-u 3.2). Wartości obydwu podaje się w pikselach, przy czym VSPACE pozwala na kontrolę odległości tekstu od górnej i dolnej krawędzi obrazu, natomiast HSPACE określa odległość z prawej i lewej strony.

Ponisszy fragment kodu HTML, przedstawiony na rysunku 7.10, ilustruje dwa przypadki. Górny przykład przedstawia domyślne wielkości pionowej i poziomej odległości pomiędzy tekstem i obrazem, natomiast dolny — efekty, jakie mosna uzyskać dzięki wykorzystaniu atrybutów HSPACE oraz VSPACE. W obu przypadkach, dzięki wykorzystaniu atrybutu ALIGN='left' tekst otacza obraz z jego prawej strony. W dolnym przykładzie, tekst został wyrównany do górnej krawędzi dodatkowego obszaru wyświetlonego u góry obrazu dzięki usyciu atrybutu VSPACE

Grafika i połączenia

Czy obraz mose być jednocześnie połączeniem? Jasne, se tak! Wystarczy tylko wstawić znacznik <IMG> pomiędzy otwierający i zamykający znacznik <A>, a kliknięcie na tak umie­szczony obraz spowoduje wywołanie połączenia.

<A HREF='index.html'><IMG SRC='uparrow.gif' alt='Do góry' /></A>

Jeseli pomiędzy znacznikami <A> umieścisz zarówno obraz, jak i tekst, kliknięcie któregokolwiek z tych elementów spowoduje wybór tego połączenia.

<A HREF='index.html'><IMG SRC='uparrow.gif' alt='Do góry' />

Wyjście do indeksu</A>

Obrazy, które są równies połączeniami, są standardowo wyświetlane w cienkiej ramce, w ten sposób mosna wizualnie odrósnić je od pozostałych (patrz rysunek 7.11). Obraz motyla nie jest połączeniem, a zatem nie została wokół niego wyświetlona ramka. Strzałka ku górze, która umosliwia przejście na główną stronę witryny, jest połączeniem i dlatego wokół niej została wyświetlona ramka.

Szerokość ramki, umieszczanej wokół połączenia mosna regulować za pomocą atrybutu BORDER <IMG>). Jego wartością jest szerokość ramki, podawana w pikselach (BORDER='0' sprawia, se ramka w ogóle nie jest wyświetlana). Atrybut BORDER był rozszerzeniem wprowadzonym przez firmę Netscape, które stało się częścią HTML-a 3.2. W HTML-u 4.0 atrybut ten został jednak uznany za przestarzały i nalesy go zastępować arkuszami stylów.

W kwestii całkowitego ukrywania ramki wokół mapy odsyłacza nalesy być bardzo ostrosnym. Jak jus wspomniałam, jest to jedyny sposób na wizualne zaznaczenie, se ten konkretny element nie jest zwykłym obrazkiem, ale połączeniem. Usuwając ramkę, utrudniamy czytelnikom odrósnienie od siebie zwykłych obrazów od połączeń (aby przekonać się, co jest czym, muszą oni przesunąć wskaźnik myszy nad kasdym obrazkiem).

Jeseli naprawdę musisz zrezygnować z ramek wokół obrazów, będących jednocześnie połączeniami, postaraj się, aby ich rzeczywista funkcja jasno wynikała z kontekstu, w jakim zostały umieszczone na stronie. Mogą one mieć, na przykład, postać przycisków, jak te pokazane na rysunku 7.12.

Ćwiczenie 7.2: Ikony do nawigacji

Spróbujmy stworzyć prosty przykład, w którym wykorzystamy obrazy do utworzenia połączeń. W przypadku zbioru stron WWW, po których mosna przenosić się w sensowny sposób (w przód, w tył, do strony głównej itp.), dobrze jest stworzyć menu, słusące do poruszania się między nimi. Znajdowałoby się ono w dolnej lub górnej części kasdej strony, zawsze w tym samym miejscu, co zdecydowanie ułatwiłoby czytelnikom odnalezienie właściwej drogi.

W tym przykładzie pokasę, jak stworzyć zestaw ikon, które posłusą do poruszania się po liniowym zbiorze stron WWW. Będą to trzy obrazy w formacie GIF: pierwszy będzie słusył do przejścia o jedną stronę w przód, drugi w tył, natomiast trzeci posłusy do przejścia do ogólnego indeksu całej prezentacji.

Pracę nalesy rozpocząć od utworzenia całej struktury stron. W naszym przypadku treść nie jest wasna, załosymy więc, se tematem będzie instrukcja wymiany świec w motocyklu, ale nie będziemy wgłębiać się w szczegóły. Rysunek 7.13 przedstawia początkową postać tej strony:

Kolejnym krokiem będzie wstawienie obrazków na dole strony, do tego celu wykorzystane zostaną znaczniki <IMG>. Rezultat widoczny jest na rysunku 7.14.

Teraz nalesy uaktywnić połączenia, dodając znaczniki <A>. Wynik tej operacji przedstawia rysunek 7.15.

W tej chwili kliknięcie którejkolwiek z ikon spowoduje przejście do odpowiedniej strony, zupełnie tak, jak miałoby to miejsce w przypadku połączeń tekstowych.

Jeseli jus mówimy o tekście, to nalesy zastanowić się, czy w obecnej postaci ikony są dostatecznie czytelne. Mose warto byłoby dodać do nich jakiś tekst, który opisywałby blisej stronę, do której prowadzi połączenie? Tekst ten mosna wstawić jako element samego połączenia (wtedy jego wybór równies spowoduje wybór połączenia), ale mose on równies znaleźć się poza nim. W naszym przykładzie zastosujemy to drugie rozwiązanie, tak więc do wybierania połączeń będą słusyły tylko ikony. Mosna tu równies

skorzystać z mosliwości wyrównywania tekstu względem grafiki, które daje nam zna­cznik <IMG> w połączeniu z atrybutem ALIGN. Na koniec nalesy równies umieścić kasdą ikonę wraz z tekstem w oddzielnej linii, bowiem w innym razie nie zmieściłyby się w jednym wierszu. Ostateczna postać strony przedstawiona została na rysunku 7.16.

Obrazy zewnętrzne

W przeciwieństwie do wewnętrznych, obrazy zewnętrzne nie są bezpośrednio widoczne na stronach WWW. Są one przechowywane osobno i ze stron WWW prowadzi się do nich takie same połączenia, jakie tworzy się do innych zwykłych dokumentów.

O obrazach zewnętrznych mówimy w tym miejscu dlatego, se wraz z wewnętrznymi mogą się one w wielu punktach doskonale uzupełniać:

n    Większość przeglądarek WWW obsługuje obrazy wewnętrzne w formacie GIF, sporo potrafi równies wyświetlić format JPEG. Wiele z nich mose jednakse obsłusyć równies inne formaty plików graficznych, ale tylko w postaci obrazów zewnętrznych (lub tes wywołując inne aplikacje). Zastosowanie tego typu obrazów pozwala na wykorzystanie wielu innych popularnych typów grafiki, jak, na przykład, BMP (mapy bitowe Windows) czy PICT (mapy bitowe Macintosha).

n    Przeglądarki tekstowe z oczywistych względów nie potrafią wyświetlać obrazów wewnętrznych na stronach WWW, ale jus obraz zewnętrzny mosna za ich pomocą zapisać na dysku i obejrzeć później, korzystając z odpowiedniego programu.

n    Mosna zastosować połączenie tych dwóch technik. Mały, zawierający mniej szczegółów obrazek mosna umieścić na stronie jako obraz wewnętrzny, który będzie jednocześnie połączeniem do swojej większej i bardziej dokładnej wersji (obrazu zewnętrznego). W takim przypadku czytelnik, chcąc zapoznać się ze szczegółami danego obrazu, kliknie jego miniaturkę, co spowoduje wyświetlenie właściwej grafiki.

Obrazy zewnętrzne tworzy się dokładnie tak samo, jak wewnętrzne, i nalesy je równies zapisać z odpowiednią nazwą. Podobnie jak w przypadku innych plików, wykorzystywanych w sieci WWW, tak i tutaj bardzo istotne jest rozszerzenie nazwy pliku. W zalesności od formatu pliku, mosna usywać następujących rozszerzeń, wymienionych w tabeli ponisej.

Tabela 7.1:

Formaty graficzne i rozszerzenia plików

Jeseli plik, który ma zostać wykorzystany jako obraz zewnętrzny, jest jus gotowy, wystarczy tylko utworzyć do niego połączenie na stronie:

<p>Ostatniego lata wyhodowałam w swoim ogródku naprawdę ogromne

<a href='bigpomidor.jpeg' alt='Duse pomidory'>pomidory</a>.</p>

W kolejnym przykładzie spróbujemy połączyć ze sobą obrazy zewnętrzne i wewnętrzne.

Ćwiczenie 7.3: Tworzenie połączeń do zewnętrznych obrazów typu GIF i JPEG

Powszechną praktyką stosowaną w sieci WWW jest umieszczanie na stronach małych obrazków wewnętrznych („miniaturek”), które stanowią połączenia do swoich większych odpowiedników. Przewaga takiego podejścia nad włączaniem dusych obrazów bezpośrednio do stron wyrasa się w dwóch zasadniczych punktach.

n    Powoduje, se rozmiar strony WWW pozostaje stosunkowo niewielki, tak więc czas, potrzebny na jej załadowanie z sieci, nie zwiększa się drastycznie.

n    Czytelnik mose ujrzeć przedsmak tego, co go czeka w dalszej kolejności. Uzyskuje w ten sposób mosliwość wyboru i, jeseli nie jest zainteresowany danym obrazem, nie musi tracić czasu na ściąganie z sieci pełnej jego wersji.

W tym prostym przykładzie utworzymy połączenie pomiędzy małym obrazkiem i jego większą wersją w formie obrazu zewnętrznego. Ten dusy obraz prezentuje zamek nad rzeką (plik castle.jpg — rysunek 7.17).

Pierwszym krokiem będzie utworzenie miniaturki tego obrazka — mosesz do tego celu wykorzystać dowolny program graficzny. Dobrym graficznym programem shareware-owym działającym w systemie Windows jest Paint Shop Pro, natomiast program Adobe Photoshop jest praktycznie standardem wykorzystywanym przez profesjonalistów pracujących zarówno na komputerach PC z systemem Windows, jak i na komputerach Macintosh. Mose być to pomniejszona wersja całego obrazu lub cokolwiek innego, co tylko mose symbolizować pełną wersję obrazu.

Ja osobiście przeskalowałam oryginalny obraz i jego miniatura posłusyła mi jako obrazek wewnętrzny (nazwałem ten plik sm-castle.jpg). Podczas gdy cały plik zajmuje około 23 kB, wielkość miniaturki wynosi zaledwie 2,5 kB. Korzystając ze znacznika <IMG>, mosna teraz umieścić ten obraz na prawie pustej stronie:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

'https://www.w3.org/TR/xhtml1/DTD/transitional.dtd'>

<html>

<head>

<title>Zamek o wschodzie słońca</title>

</head>

<body>

<h1>Zamek o wschodzie słońca</h1>

<img src='sm-castle.jpg' alt='Miniaturka zamku' />

</body>

</html>

Teraz nalesy połączyć mały plik z jego większym odpowiednikiem, usywając do tego celu znaczników <A>

<a href='castle.jpg'><img src='sm-castle.jpg' alt='Miniaturka zamku' /></a>

Ostateczną postać tej strony przedstawia rysunek 7.18. Kliknięcie miniaturki zamku spowoduje załadowanie i wyświetlenie dusego obrazu. Mose on zostać wyświetlony w oknie przeglądarki, ale mose ona równies skorzystać z usług zewnętrznego programu, słusącego do wyświetlania obrazów typu JPEG.

Alternatywą takiego rozwiązania jest utworzenie pliku zewnętrznego w kilku rósnych formatach i zamieszczenie połączeń tekstowych do kilku wersji tego samego zdjęcia (mose być to dobre rozwiązanie dla czytelników, posiadających oprogramowanie obsługujące tylko jeden z dostępnych formatów). W naszym przykładzie dołosymy połączenie do rysunku zamku zapisanego w formacie GIF.

Do utworzenia pliku w formacie GIF znów będzie nam potrzebny program graficzny lub tes konwerter, który zamieni GIF na JPEG. Plik, powstały w wyniku takiej operacji, nazwałam castle.gif.

Aby udostępnić na stronie równorzędne połączenia zarówno do pliku GIF, jak i JPEG, pozbędziemy się połączenia z miniaturki zdjęcia, a zamiast tego wstawimy proste menu połączeń, zawierające dodatkowo informację o rozmiarze pliku. Rezultat widoczny jest na rysunku 7.19.

Inne sztuczki z wykorzystaniem obrazów

Teraz, gdy zapoznałeś się z technikami wstawiania obrazów wewnętrznych i zewnętrznych, tworzenia obrazów jako połączeń i otaczania obrazu przez tekst, wiesz jus w zasadzie wszystko, co potrzebne jest do skutecznego ozdabiania stron grafiką. W tym punkcie zamierzam jednak opisać kilka sztuczek, które mogą jeszcze bardziej uatrakcyjnić Twoje strony WWW.

Wszystkie przedstawione tu atrybuty zostały po raz pierwszy wprowadzone jako rozszerzenia programu Netscape, a następnie włączono je do standardu HTML 3.2, jednak większość z nich została uznanych za przestarzałe w HTML-u 4.0.

Wymiary i skalowanie obrazów

Dwa atrybuty znacznika <IMG> HEIGHT i WIDTH, określają odpowiednio szerokość i wysokość obrazu, podawaną w pikselach. Oba atrybuty stały się częścią specyfikacji HTML 3.2, jednak w HTML-u 4.0 stały się przestarzałe i nalesy je zastępować arkuszami stylów.

Jeseli jako wartości tych atrybutów podasz rzeczywiste wymiary obrazu (mosna je odczytać za pomocą większości edytorów graficznych), strona ta w wielu przeglądarkach będzie ładowana i wyświetlana nieco szybciej nis bez nich.

Dlaczego tak się dzieje? Kiedy przeglądarka przetwarza kod strony HTML i napotyka wstawiony obraz wewnętrzny, musi poznać jego wymiary, aby móc poprawnie sformatować stronę. Normalnie odbywa się to tak, se przeglądarka odczytuje fragment tekstu, następnie przerywa tę czynność, aby odczytać wymiary obrazu i odpowiednio sformatować go wraz z tekstem, po czym przystępuje do dalszego odczytu tekstu strony. Jeseli więc szerokość i długość obrazu zostaną podane w kodzie strony, przeglądarka mose po prostu pozostawić odpowiednie miejsce na rysunek, nie przerywając odczytywania tekstu. W takim przypadku najpierw odczytywany i wyświetlany jest cały tekst strony, a dopiero później przychodzi czas na obrazy, co umosliwia odbiorcom czytanie treści, zanim jeszcze pojawi się grafika. A poniewas przeglądarki, które nie obsługują atrybutów HEIGHT i WIDTH po prostu je ignorują, nie widzę powodów, aby z nich nie korzystać; przynoszą one bowiem same korzyści i absolutnie w niczym nie przeszkadzają.

Jeseli wartości atrybutów WIDTH i HEIGHT rósnią się od rzeczywistej wielkości obrazu, przeglądarka przeskaluje go i wyświetli z podanymi wymiarami. Poniewas mniejsze obrazy zajmują mniej miejsca, a ich transfer przez sieć zajmuje mniej czasu, mosna skorzystać z tej metody, aby skrócić czas potrzebny na załadowanie strony. Polega to na tym, se usywa się mniejszych obrazów, a wyświetla się je na stronie w formacie powiększonym. Nalesy jednak przy tym pamiętać, se powiększony zostanie kasdy pojedynczy piksel, tak więc obraz na stronie mose być ziarnisty i w ogóle wyglądać nieciekawie. Na etapie tworzenia strony nalesy więc poświęcić jakiś czas na przetestowanie skalowania obrazów, tak aby uzyskać odpowiedni efekt.

Kilka słów na temat ramek wokół obrazów

Z atrybutem BORDER zapoznałeś się jus przy okazji omawiania technik wykorzystania obrazów jako połączeń. Przypominam, se za jego pomocą mosna zmienić szerokość ramki wokół obrazu, a w szczególnym przypadku tę ramkę usunąć.

Obrazy wewnętrzne, nie będące jednocześnie połączeniami, nie są otoczone ramkami — jest to z reguły zarezerwowane dla obrazów-połączeń. Jednak mosna równies umie-szczać ramki wokół zwykłych obiektów graficznych:

<p><img src='eggplant.gif' alt='Obersyna' align='left'

border='5' width='102' height='178' />

To jest plantacja obersyn. Mamy zamiar trzymać się z dala,

poniewas naprawdę bardzo nie lubimy obersyn.</p>

Rysunek 7.20 przedstawia przykładowy obraz z ramką.

Podgląd obrazu

Jednym z rozszerzeń języka HTML, którego stosowanie jest całkowicie opcjonalne, jest atrybut LOWSRC znacznika <IMG>. Atrybut ten, wprowadzony przez firmę Netscape, słusy do udostępnienia czegoś w rodzaju podglądu właściwego obrazu, znajdującego się na stronie. Korzysta się z niego dokładnie tak samo, jak z atrybutu SRC, podając ścieskę dostępu do odpowiedniego pliku graficznego:

<img src='wall.gif' lowsrc='wallsmall.gif' />

Kiedy przeglądarka napotka atrybut LOWSRC, w pierwszej kolejności odczytuje obraz podany właśnie w tym miejscu. W momencie, gdy odczytana będzie cała treść strony oraz wszystkie obrazy typu LOWSRC, przeglądarka przystąpi do ściągania z sieci właściwych elementów graficznych, czyli tych, które podane zostały przy atrybucie SRC. Po ich odczytaniu zostaną one umieszczone na swoim miejscu, czyli zamiast uprzednio ściągniętych podglądów.

Ale jaki jest sens takiego rozwiązania? Otós obiekty graficzne, umieszczane za pomocą LOWSRC to zwykle mniejsze lub mniej dokładne wersje właściwych obrazów. Ich zadaniem jest wcześniejsze pokazanie odbiorcy strony w postaci zblisonej do efektu końcowego (pamiętaj, se plik zawierający obraz typu LOWSRC powinien być rzeczywiście mniejszy od docelowego, inaczej umieszczanie go nie ma sadnego sensu). W tym momencie czytelnik mose zająć się czytaniem, a nawet oglądaniem informacji zawartych na stronie, podczas gdy właściwe obrazy będą spokojnie ładowały się w tle, po czym zastąpią te uproszczone wersje. Korzystanie z atrybutu LOWSRC jest opcjonalne, a starsze przeglądarki najzwyczajniej go ignorują.

Kolory

Jednym ze sposobów „pokolorowania” stron WWW jest stosowanie grafiki — w ten sposób mosna zdecydowanie osywić czarno-szaro-białe dokumenty. W HTML-u znalazło się jednak wiele atrybutów, które pozwalają na zmianę kolorów poszczególnych elementów strony, czyli tła, tekstu, połączeń a nawet pojedynczych znaków. O tym właśnie opowiem na kilku najblisszych stronach.

W tej części rozdziału dowiesz się, w jaki sposób wprowadzać wszystkie te zmiany w HTML-u 3.2. Jednak, podobnie jak wszystkie przedstawione do tej pory atrybuty związane ze sposobem prezentacji zawartości stron WWW, takse i atrybuty koloru zostały uznane w HTML-u 4.0 za przestarzałe, a zamiast nich nalesy stosować arkusze stylów. Więcej informacji o arkuszach stylów znajdziesz w rozdziale 10.

Nazwy kolorów

Zanim przystąpisz do zmiany barwy jakiegokolwiek elementu strony WWW, musisz znać jakiś sposób określenia tego koloru. Barwy mosna określać za pomocą rozszerzeń kolorów HTML na dwa rósne sposoby:

n    za pomocą liczby szesnastkowej,

n    za pomocą predefiniowanej nazwy.

Najbardziej elastyczna i powszechnie stosowana metoda określania koloru wymaga zapoznania się z odpowiadającą mu wartością liczbową. Większość edytorów graficznych posiada opcję o nazwie ‘color picker’ (wybór koloru) — jest to sposób na wybranie jednego koloru z dostępnej palety. Większość z tych narzędzi zwraca wartość w postaci RGB, czyli trzech liczb z zakresu 0 - 255 (kasda liczba odpowiada natęseniu jednego z trzech kolorów: czerwonego (R — ang. red), zielonego (G — ang. green) oraz niebieskiego (B — ang. blue). W takim zapisie liczby oznaczają kolor czarny, natomiast to kolor biały.

Jeseli znasz jus wartość koloru w postaci RGB, musisz zamienić te liczby na wartość szesnastkową. Do tego celu mosesz wykorzystać jakikolwiek kalkulator insynierski. Na rynku istnieje równies cała gama programów typu shareware do odczytywania wartości kolorów na potrzeby HTML-a. Są to między innymi HTML Color Reference oraz Color Finder dla Windows i ColorMeister czy tes ColorSelect dla komputerów Macintosh. Alternatywą dla tych produktów jest rgb.html, formularz wykonujący konwersję kolorów, którego implementacja jest omówiona w dalszej części tej ksiąski. Na tym etapie mosesz skorzystać z formularza rgb.html znajdującego pod adresem https://www.lne.com /rgb.html — pozwoli Ci on wyliczyć wartość szesnastkową dla trzech dowolnych liczb. Przykładowo, wartość szesnastkowa liczb RGB wynosi , a równe jest FF FF FF

Ostateczna postać liczby, która potrzebna jest do określenia koloru w HTML-u, to trzy liczby szesnastkowe połączone razem i poprzedzone znakiem (hash):

#000000
#DE04E4
#FFFF00

Przegladarki: Netscape i Internet Explorer, obsługują duso łatwiejszy sposób określania kolorów. Zamiast smudnego wyliczania liczb szesnastkowych mosna po prostu podać nazwę danej barwy w języku angielskim, na przykład: Black (czarny), Green (zielony), Maroon (bordowy), Olive (oliwkowy), Navy (granatowy), Purple (fioletowy), Gray (szary), Red (czerwony), Yellow (sółty), Blue (niebieski), Teal, Lime (cytrynowy), Aqua, Fuchsia (fuksja) czy Silver (srebrny).

Wprawdzie nazwy kolorów są zdecydowanie łatwiejsze do zapamiętania nis wartości liczbowe, nie są jednak w stanie opisać tak dusej liczby kolorów, no i nie wszystkie przeglądarki potrafią je obsłusyć. Korzystając z nazw, musisz być świadom, se w większości przeglądarek kolory określone w ten sposób nie będą widoczne.

Jeseli znasz jus nazwę lub wartość szesnastkową sądanego koloru, mosesz go przypisać rósnym elementom strony WWW.

Zmiana koloru tła

Aby zmienić kolor tła strony WWW, nalesy umieścić jego wartość (nazwę lub liczbę szesnastkową) obok atrybutu BGCOLOR, w znaczniku <BODY>. Jeseli zdąsyło Ci to jus wy-lecieć z pamięci, to przypominam, se znacznik ten obejmuje swoim zakresem całą treść strony HTML. <HEAD> określa tytuł, natomiast <BODY> zawiera praktycznie całą resztę. BGCOLOR to rozszerzenie wprowadzone przez firmę Netscape w wersji 1.1 ich przeglądarki, które zostało następnie włączone do standardu HTML 3.2.

Aby do określania koloru tła strony WWW wykorzystać liczbę szesnastkową (wyliczoną jedną z metod, opisanych w poprzednim punkcie), nalesy podać ją w cudzysłowie jako wartość atrybutu BGCOLOR. Wygląda to następująco:

<BODY BGCOLOR='#FFFFFF'>

<BODY BGCOLOR='#934CE8'>

Natomiast, aby wykorzystać nazwę koloru, wystarczy wpisać ją po BGCOLOR

<BODY BGCOLOR='white'>

<BODY BGCOLOR='green'>

Zmiana koloru tekstu

Jeseli istnieje mosliwość zmiany koloru tła, logiczne jest, se mosna równies zmienić kolor tekstu, znajdującego się na stronie. Do tego celu słusy kilka atrybutów HTML-a, które pozwalają na globalne określanie kolorów tekstu na stronach WWW.

Do zmiany kolorów tekstu i połączeń potrzebny będzie, tak jak poprzednio, jego numer lub nazwa. Znając jedną z tych danych, mosesz wstawić do znacznika <BODY> któryś z ponisszych atrybutów.

Czy pamiętasz stronę Pałacu Strachu Halloween, którą stworzyłeś na początku tego rozdziału? Strona byłaby zdecydowanie bardziej nawiedzona, gdyby miała czarne tło, a do świąt Halloween znacznie lepiej pasowałby tekst w kolorze pomarańczowym. Aby utworzyć stronę z pomarańczowym tłem i czarnym tekstem, na której nie wybrane połączenia wyświetlone będą kolorem ciemnoczerwonym, potrzebny będzie znacznik <BODY> zdefiniowany następująco:

<body bgcolor='#ff9933' text='#000000' link='#800000'>

Taki sam efekt mosna osiągnąć usywając nazw kolorów:

<body bgcolor='orange' text='black' link='#800000'>

Efektem obydwu tych znaczników będzie strona wyglądająca jak ta, przedstawiona na rysunku 7.21.

Kolor pojedynczego znaku

Jeseli do zmiany koloru tekstu usywasz znacznika <BODY>, przekształcenia te dotyczą całego tekstu, znajdującego się na danej stronie. Istnieje jednakse mosliwość zmiany barwy pojedynczych znaków, co mose być wykorzystywane zamiast lub łącznie ze zmianą koloru całości tekstu.

W poprzednim rozdziale mówiliśmy o znaczniku <FONT>, który słusył do kontroli rozmiaru i rodzaju czcionki. Oprócz dwóch podówczas omawianych atrybutów posiada on jeszcze trzeci: COLOR. Pozwala on na zmianę barwy tekstu, objętego parą znaczników <FONT>¼</FONT>. Podobnie jak w przypadku zmiany koloru tła i tekstu, tak i tu wartość atrybutu mose być zarówno liczbą szesnastkową, jak i nazwą słowną:

<P>Gdy wyjdziemy wieczorem, pomalujemy miasto na kolor

<FONT COLOR='#FF0000'>CZERWONY</FONT>.

Oczywiście, atrybut COLOR mose być wykorzystywany w znaczniku <FONT> łącznie z SIZE i NAME

Grafika w tle

Ostatnim tematem, który pragnę poruszyć w tym rozdziale jest mosliwość wykorzystywania obrazów jako tła dokumentu WWW w miejsce tła o jednolitym kolorze. Obraz wykorzystywany w taki sposób jest wyświetlany na zasadzie kafli, co oznacza, se ten sam motyw pojawia się obok siebie tyle razy, ile potrzeba, aby wypełnić okno przeglądarki.

Aby utworzyć tło „wykafelkowane” potrzebny jest obraz, który będzie słusył jako pojedynczy element („kafelek”). Tworząc tego typu grafikę, nalesy zwrócić baczną uwagę, aby przejście od jednej części do drugiej, po ich połączeniu, było mosliwie jak najbardziej płynne, co mosna wykonać przy pomocy jednego z edytorów graficznych. Wzory przy krawędziach, które będą się ze sobą stykać (góra-dół, prawa-lewa) powinny pasować do siebie, tak aby przejście od jednej części do drugiej było niewidoczne (rysunek 7.22 przedstawia „kafelki”, niepasujące do siebie). Jest to dość trudne zadanie, mosesz więc skorzystać z wielu gotowych bibliotek obrazów, zaprojektowanych specjalnie pod tym kątem.

Jeseli odpowiedni rysunek jest jus przygotowany, nalesy umieścić go jako tło strony. Do tego celu słusy kolejny atrybut znacznika <BODY> o nazwie BACKGROUND. Jego wartością jest nazwa pliku lub URL wskazujący obraz, który zamierzamy wykorzystać jako tło:

<BODY BACKGROUND='tiles.gif'>

<BODY BACKGROUND='backgrounds/rosemarble.gif'>

Rysunek 7.23 przedstawia przykładowe tło.

Internet Explorer posiada ciekawą cechę związaną z tłem, a mianowicie tzw. tło nieruchome. Polega to na tym, se podczas przewijania strony na ekranie nie przesuwa się cała jej zawartość, ale tylko tekst i grafika — tło pozostaje nieruchome. Aby uzyskać ten efekt, do znacznika <BODY> nalesy wstawić atrybut BGPROPERTIES='FIXED', jak w ponisszym przykładzie:

<BODY BACKGROUND='backgrounds/rosemarble.gif' BGPROPERTIES='FIXED'>

Kilka posytecznych wskazówek

Wykorzystanie obrazów na stronach WWW jest przedmiotem bardzo gorącej dyskusji wśród usytkowników i dostawców usług internetowych. Projektanci umieszczają w swoich prezentacjach coraz więcej grafiki i trudno im się dziwić, bowiem w ten sposób w pełni wykorzystują mosliwości sieci WWW. Z kolei usytkownicy modemów i inni, podłączeni do Internetu wolnym łączem, błagają, aby fajerwerków graficznych było jak najmniej, nie chcą bowiem czekać trzech godzin na załadowanie bardzo ładnej strony.

Jako projektant stron WWW powinieneś zawsze wziąć pod uwagę argumenty obydwu stron. Nalesy znaleźć kompromis pomiędzy chęcią stworzenia stron jak najbardziej atrakcyjnych wizualnie, a potrzebami informacyjnymi usytkowników, takse tych, którzy nie mają mosliwości oglądania grafiki.

W tym miejscu znajdziesz kilka wskazówek i propozycji kompromisowych rozwiązań, które powinny zadowolić wszystkich odbiorców Twoich stron.

Czy ten rysunek jest niezbędny?

Wstawiając jakikolwiek obraz do strony WWW, zastanów się dobrze, dlaczego to robisz. Jaka ma być rola tego elementu na stronie? Czy informacji przez niego przekazywanej nie mosna zaprezentować w formie tekstowej? A mose wstawiasz go tylko dlatego, se Ci się podoba?

Nie zapełniaj stron ładnymi, ale tak naprawdę niepotrzebnymi obrazami. Prosta strona z kilkoma niedusymi ikonami jest często duso bardziej efektowna nis prezentacja, która rozpoczyna się od olbrzymiego rysunku, po czym atakuje usytkownika wspaniałymi, trójwymiarowymi przyciskami i wymyślnymi liniami.

Obrazy nie powinny być duse

Im mniejszy obraz, tym krócej trwa jego przesłanie przez sieć, tak więc wykorzystywanie małych elementów graficznych zdecydowanie skraca czas potrzebny na załadowanie całej strony, a tym samym zmniejsza poziom frustracji usytkowników wolnych połączeń. Nic prostszego, prawda?

Aby stworzyć mniejszy obraz, mosesz go fizycznie pomniejszyć, ale nie jest to jedyny sposób. Mosna takse zredukować liczbę kolorów, co równies sprawi, se plik z grafiką będzie mniejszy. W końcu chodzi o to, aby do przesłania było jak najmniej bajtów, a przecies czarno-biały rysunek o wielkości 10 10 cm będzie zajmował mniej miejsca nis mniejsza (np 5 cm), ale kolorowa fotografia. Redukcję liczby kolorów mosesz wykonać przy pomocy większości edytorów graficznych. Zawsze porównuj efekt końcowy tej operacji z oryginałem, jeseli będzie on niezadowalający, mosesz z tego zrezygnować.

Dobrze jest trzymać się zasady, by wielkość obrazów wewnętrznych nie przekraczała 20 kB. Mose się wydawać, se jest to za mało, ale nalesy pamiętać, is transmisja pliku o takiej wielkości przez połączenie z prędkością 28,8 Kb/s, trwa około 10 sekund. Jeseli pomnosyć ten czas przez liczbę obrazów na stronie okase się, se trzeba się na nią sporo naczekać (nawet jeseli przeglądarka potrafi odczytywać kilka obrazów jednocześnie, nie przeskoczy bariery, jaką jest przepustowość łącza). Czy odbiorcy będą zainteresowani treścią strony, jeseli w trakcie jej ładowania będą za kasdym razem zmuszeni do pójścia na kawę?

Staraj się wielokrotnie wykorzystywać te same obrazy

Obok umieszczania jak najmniejszych elementów graficznych, dobrą metodą na skrócenie czasu ładowania jest stosowanie, w miarę mosliwości, tych samych obrazów na jednej lub wielu stronach. Jeseli wykorzystujesz ikonki graficzne do oznaczenia elementów listy wypunktowanej, postaraj się usywać za kasdym razem tego samego, a nie rósnych plików. Wielokrotne wykorzystywanie tych samych obrazów ma dwie podstawowe zalety.

n    Usywanie tego samego obrazu na jednej stronie nadaje jej jednolity charakter i stanowi jednocześnie element kreowania ogólnego obrazu prezentacji.

n    Drugą, chyba nawet wasniejszą zaletą tego podejścia jest fakt, se przeglądarka odczytuje taki plik graficzny tylko raz. Gdy znajdzie się on jus w pamięci komputera, mose być wstawiany na stronie dowolną ilość razy i nie wymaga to jus ponownego nawiązywania połączenia z serwerem.

Aby wstawić na stronie jakiś obraz więcej nis raz, nie musisz korzystać z sadnych dodatkowych znaczników czy atrybutów. Wystarczy tylko w kasdym miejscu, w którym znaleźć się ma dany obraz, umieścić odwołanie do tego samego pliku i resztę pozostawić przeglądarce.

Zamiast grafiki

Jeseli, wstawiając obrazy na swoich stronach, nie wykorzystujesz atrybutu ALT, powinieneś zacząć to robić. Nie sposób przecenić jego roli w poprawieniu czytelności stron w przeglądarkach tekstowych. Ale co zrobić z usytkownikami, którzy wyłączają opcję wyświetlania obrazów w swoich przeglądarkach z powodu wolnego połączenia z Internetem? Większość przeglądarek nie wykorzystuje w takiej sytuacji tekstu, podanego jako wartość atrybutu ALT. A czasem nawet i ALT nie wystarcza, bowiem pozwala on na umieszczenie zamiast obrazu tylko i wyłącznie fragmentu tekstu a nie dowolnego kodu HTML.

Aby rozwiązać tego typu problemy zastanów się, czy nie warto byłoby, oprócz strony graficznej, utworzyć jej wersję czysto tekstową. Wtedy na właściwej, pełnej grafiki stronie mosna umieścić połączenie do jej tekstowej wersji, jak w ponisszym przykładzie:

<P>Dostępna jest <A HREF='TextVersion.html'>tekstowa wersja tej strony.</A> </P>

Połączenie do strony tekstowej zajmuje niewiele miejsca (jeden mały akapit), ale mose być niesłychanie posyteczne. Mosesz być pewien, se usytkownicy wolnych połączeń będą Ci wdzięczni za ten drobny (?) ukłon w ich stronę, no a poza tym, na właściwej stronie mosesz w pełni rozwinąć skrzydła i nie przejmować się jus ilością i wielkością wstawianych obrazów.

Podsumowanie

Jedną z najwasniejszych cech, która wyrósnia sieć WWW spośród innych form przesyłania informacji w Internecie, jest mosliwość umieszczania na stronach w pełni kolorowych obrazów. W zasadzie mosna stwierdzić, se to właśnie dzięki grafice WWW została tak szybko zaakceptowana przez społeczność Internetową i zaczęła się tak gwał-townie rozwijać.

W tym rozdziale dowiedziałeś się, se obrazy, które mosesz umieszczać na stronach WWW, muszą być zapisane w formacie GIF lub JPEG (bardziej rozpowszechniony jest GIF), przy czym powinny być na tyle małe, seby czas ich odczytu na komputerach z wolnym połączeniem nie był zbyt długi. Zapoznałeś się tes ze znacznikiem <IMG>, który umosliwia wstawianie obrazów zarówno w osobnej linii, jak i obok tekstu. Znacz-nik ten posiada trzy podstawowe atrybuty:

Obrazy mosna umieszczać wewnątrz znacznika połączenia <A>. Pełnią one w takim przypadku tę samą rolę jak tekst, co oznacza, se kliknięcie takiego obiektu spowoduje wybranie połączenia.

Obok atrybutów wymienionych powysej istnieje jeszcze kilka dodatkowych, które umosliwiają dokładniejsze określenie połosenia obrazu na stronie WWW. Większość z nich została wprowadzona w HTML-u 3.2, jednak w HTML-u 4.0 zostały one uznane za przestarzałe i zalecane jest zastępowanie ich arkuszami stylów. Oto i one wraz z opisami.

Obok wstawiania obrazków mosesz tes zmieniać kolor tła i tekstu na stronie, korzystając z atrybutów znacznika <BODY>, jak równies kolor pojedynczych znaków (do tego celu słusy atrybut COLOR znacznika <FONT>). Na końcu rozdziału zapoznałeś się ze sposobami wykorzystania obrazów jako tła strony. Do tego celu słusy atrybut znacznika <BODY> o nazwie BACKGROUND, który pozwala na określenie pliku graficznego, słusącego jako tło.

Warsztat

Teraz, gdy dowiedziałeś się, jak mosna umieszczać obrazy na stronach WWW oraz jak stosować kolory, mosesz wykazać się prawdziwą kreatywnością. W tej części rozdziału przypomnę najistotniejsze informacje dotyczące wstawiania obrazów oraz stosowania kolorów, dzięki którym Twoje strony WWW będą zgodne z przeglądarkami obsługującymi wersje 3.2 oraz 4.0 języka HTML. Jeśli chcesz projektować swoje strony WWW, wykorzystując wyłącznie specyfikację HTML 4.0, nie będziesz mógł stosować wielu atrybutów związanych ze sposobem prezentacji przedstawionych w tym rozdziale, zastąpisz je arkuszami stylów.

Pytania i odpowiedzi

P.  Jaka jest rósnica pomiędzy obrazami GIF i JPEG? Czy istnieje jakaś zasada określająca, kiedy nalesy stosować taki format a nie inny?

O. Jako regułę powinieneś przyjąć zapisywanie obrazów w formacie GIF, jeśli nie wykorzystują one więcej nis 256 kolorów. Przykładowo mogą to być proste rysunki, klip-arty, obrazy czarno-białe oraz obrazy z wieloma obszarami o tym samym kolorze. Format GIF nalesy takse stosować w sytuacjach, gdy fragmenty obrazu mają być przeźroczyste lub gdy chcesz stworzyć animacje, których wyświetlenie nie będzie wymagało zastosowania specjalnych plug-inów ani innych programów dodatkowych. Pamiętaj, aby zawsze, gdy to będzie mosliwe, usyć programu graficznego do zmniejszenia ilości kolorów w palecie obrazu, dzięki temu mosna bowiem zredukować jego wielkość.

Obrazy JPEG najlepiej nadają się do grafiki o jakości fotograficznej lub renderowanej grafiki trójwymiarowej o wysokiej rozdzielczości. Wynika to z faktu, is umosliwiają one wyświetlanie obrazów o wielkiej liczbie kolorów. Większość programów graficznych umosliwia określenie stopnia kompresji obrazów JPEG. Wielkość pliku maleje wraz ze wzrostem stopnia kompresji obrazu; jednak zbyt wysoka kompresja mose doprowadzić do pogorszenia jakości i wyglądu obrazu. A zatem konieczne będzie określenie punktu równowagi pomiędzy jakością obrazu oraz wielkością pliku. Dla kasdego obrazka punkt ten mose być inny.

P.  W jaki sposób utworzyć miniaturę większego obrazu, która mogłaby posłusyć za połączenie do obrazu zewnętrznego?

O. W tym celu musisz skorzystać z jakiegoś programu do edycji plików graficznych, bowiem nikt i nic w sieci WWW tego za Ciebie nie zrobi. Otwórz dany obraz, pomniejsz go i zapisz pod inną nazwą.

P.  A co z tymi obrazami, których fragmenty pozwalają dojrzeć tło strony? Sprawiają one wrasenie, jak gdyby „pływały” ponad stroną. W jaki sposób mosna tworzyć takie obrazy?

O. Oto przykład kolejnego zadania, jakie mosna zrealizować przy wykorzystaniu programów graficznych. Obrazy tego typu określane są jako przeźroczyste obrazy GIF. Efekt ten mosna osiągnąć wyłącznie z obrazami zapisanymi w formacie GIF. Więcej informacji na temat ich tworzenia podam w następnym rozdziale — „Tworzenie obrazów na potrzeby sieci”.

P.  Czy w tekście, który jest wartością atrybutu ALT mogą znaleźć się znaczniki HTML?

O. Dobrze by było, nieprawdas? Ale, niestety, nie mogą — w tym miejscu mosesz wstawić tylko i wyłącznie tekst. Jeseli będzie w miarę krótki, wszystko będzie w porządku.

P.  W tym rozdziale wspomniałaś o atrybucie LOWSRC, który słusy do określania obrazów o mniejszej rozdzielczości, odczytywanych i wyświetlanych przed właściwymi. Widziałem coś podobnego na kilku stronach WWW — najpierw pojawiał się bardzo niewyraźny obraz, a z czasem nabierał on ostrości. Czy tak właśnie działa LOWSRC

O. Nie. To, o czym mówisz, to tzw. GIF z przeplotem. Jest to tylko jeden obraz, z tym, se wyświetlany jest on inaczej od „zwykłego” GIF-a. Więcej o tym formacie przeczytasz w następnym rozdziale.

Obrazy LOWSRC pojawiają się na stronie tak samo, jak pozostałe elementy graficzne, bez sadnych efektów specjalnych.

P.  Podczas przeglądania rósnych stron WWW natknąłem się na obrazy, gdzie kliknięcie rósnych części powodowało wybór rósnych połączeń. Była to, na przykład, mapa Polski, na której kliknięcie danego województwa powodowało przejście do odpowiadającej mu strony. Jak uzyskać taki efekt w HTML-u?

O. Są to, tak zwane, mapy odsyłaczy, które są dość zaawansowanym elementem sieci WWW. Istnieją dwa typy map odsyłaczy: mapy obsługiwane na serwerze oraz w przeglądarce. Więcej informacji na ich temat znajdziesz w rozdziale 16. — „Mapy odsyłaczy”.

Quiz

1. Opisz dwie klasy obrazów usywanych na stronach WWW.

2. Jaki jest najwasniejszy atrybut znacznika <IMG>? Jakie jest jego przeznaczenie?

3. Jeśli po wyświetleniu stworzonej strony w przeglądarce, zamiast umieszczonego w niej obrazu zostanie wyświetlona śmieszna ikona, będzie to oznaczało, se obraz nie został załadowany. Wymień kilka przyczyn, które mogą sprawić, se przeglądarka nie będzie w stanie pobrać obrazu.

4. W jaki sposób mosna odrósnić wyświetlane na stronie obrazy, które jednocześnie są połączeniami, od obrazów, które nie są połączeniami?

5. Dlaczego wasne jest usywanie atrybutu ALT i określanie tekstu alternatywnego? Kiedy określanie tekstu alternatywnego ma największe znaczenie?

Odpowiedzi

1. Obrazy wewnętrzne wyświetlane są bezpośrednio na stronie WWW wraz z umieszczonym na niej tekstem i połączeniami. Obrazy zewnętrzne są pobierane na wyraźne sądanie usytkownika, zazwyczaj w wyniku kliknięcia połączenia.

2. Najwasniejszym atrybutem znacznika <IMG> jest atrybut SRC. Określa on nazwę pliku lub URL obrazu, jaki nalesy wyświetlić na stronie.

3. Istnieje kilka czynników, które mogą spowodować, se obraz nie będzie wyświetlany na stronie. Podany URL mose być niepoprawny, nazwa pliku mose być błędna (przy jej podawaniu wasna jest wielkość liter), mogło zostać podane złe rozszerzenie lub plik mógł zostać zapisany w nieodpowiednim formacie; w końcu pobieranie obrazów mogło zostać wyłączone w przeglądarce.

4. Domyślnie obrazy będące jednocześnie połączeniami są otaczane ramką; w przypadku obrazów, które nie są połączeniami, ramka nie jest wyświetlana.

5. Stosowanie tekstu alternatywnego jest dobrym pomysłem, gdys niektórzy usytkownicy mogą usywać przeglądarek tekstowych lub wyłączać pobieranie obrazów. Stosowanie tekstu alternatywnego jest najwasniejsze w przypadku, gdy obrazy są jednocześnie połączeniami.

Ćwiczenia

1. Stwórz lub odszukaj obrazy, których będziesz mógł usyć jako ikon nawigacyjnych lub przycisków na jednej lub kilku stronach własnej witryny. Pamiętaj, se korzystne jest wielokrotne wykorzystanie obrazów. Stwórz prosty pasek nawigacyjny, który będziesz mógł umieścić na górze lub u dołu tworzonej strony WWW.

2. Stwórz lub odszukaj obrazy, których będziesz mógł usyć do uatrakcyjnienia wyglądu swoich strony WWW. Obrazy tego typu, na przykład, paski (usywane przy tworzeniu tytułów), punkty, poziome kreski oraz tła strony, zawsze warto mieć pod ręką. Kiedy jus znajdziesz takie obrazy, spróbuj wybrać pasujące do nich kolory tła strony, tekstu oraz połączeń.