Rozdział 7.

Wykorzystywanie obrazów, koloru i tła

Jeżeli obawiasz się, że 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 znacz­nikami, służącymi do wstawiania obrazów, koloru i tła, a konkretnie dowiesz się:

• jakiego typu obrazy wykorzystywane są na stronach WWW,

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

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

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

• jak można pomóc przeglądarkom, które nie potrafią wyświetlać grafiki,

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

• jak zmienić kolor czcionki i tła,

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

• 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 można podzielić na dwie kategorie: wewnętrzne i zewnętrzne. Pierwsze z nich to obrazy, znajdujące się bezpośrednio na stronie, umieszcza­ne pośród tekstu i połączeń. Są one ładowane automatycznie razem ze stroną, oczywiście pod warunkiem, że korzystasz z przeglądarki graficznej i opcja automatycznego wyświetla­nia obrazów jest włączona. Obrazy zewnętrzne nie są ładowane automatycznie, mogą zos­tać wyświetlone dopiero na żądanie użytkownika, więc zwykle prowadzą do nich hiperpołą­czenia. Aby oglądać obrazy tego typu, nie musisz koniecznie posiadać przeglądarki graficz­nej. Korzystając, na przykład, z Lynx'a, możesz zapisać plik graficzny na dysku i później obejrzeć go za pomocą dowolnego programu do oglądania grafiki. W dalszej części roz­działu znajdziesz więcej informacji o tym, jak korzystać z obrazów jednego i drugiego ro­dzaju.

Obrazy wewnętrzne pojawiają się na stronie WWW wraz z tekstem i połączeniami. Są one ładowane automatycznie wraz z resztą strony. Obrazy zewnętrzne są przechowywane poza stroną WWW i wyświetlane dopiero na życzenie użytkownika, który wybiera w tym celu specjalne połącze­nie.

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ąda­rek potrafi go wyświetlić. Obsługa formatu JPEG staje się coraz bardziej powszechna, jednak wciąż jeszcze króluje GIF, bezpieczniej więc jest korzystać właśnie z tego standardu zapisu grafiki. Więcej o różnicach pomiędzy tymi formatami i o tym, jak tworzyć obrazy w obydwu z nich, przeczytasz w następnym rozdziale, natomiast o formatach, które można wykorzystywać do tworzenia obrazów zewnętrznych napiszę w dalszej części tego rozdzia­łu.

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

Notatka

Więcej informacji na temat programów do edycji obrazów znajdziesz w rozdziale 9. „Tworzenie animowanych GIF-ów”.

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

Przypominasz sobie zapewne, że 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.

	Niektóre edytory graficzne zapisują rozszerzenie pliku wielkimi literami (.GIF, .JPEG). Są to wprawdzie poprawne rozszerzenia, ale nazwy plików z obrazami (podobnie jak nazwy plików HTML) są zależne od wielkości znaków, tak więc GIF to nie to samo co gif. Kwestia ta jest nieistotna podczas lokalnego testowania prezentacji, ale stanie się ważna po przeniesieniu plików na serwer; w miarę możliwości staraj się używać małych liter.

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

Jeżeli masz już przygotowany plik graficzny w formacie GIF lub JPEG, możesz umieścić go na stronie WWW. Do tego celu służy 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, należy umieścić odstęp i znak ukośnika.

Znacznik <IMG> posiada wiele różnych atrybutów, któ­re pozwa­lają na kontrolę sposobu wyświetlania obrazu na stronie. Wiele z nich zostało wprowadzo­nych dopiero w HTML-u 3.2 lub nawet 4.0, co oznacza, że 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.

Najważniejszym atrybutem znacznika <IMG> jest bez wątpienia SRC. Służy on do określenia ujętej w cudzysłów nazwy pliku lub URL-a obrazu, który ma zostać w danym miejscu wsta­wiony. Przy określaniu ścieżki dostępu do tego pliku obowiązują te same reguły, o których była już 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 użyć następującego zapisu:

<IMG SRC="image.gif" />

Gdyby plik ten znajdował się o jeden katalog wyżej, 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ę ścieżkę 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 użytkownik wyświetli stronę w przeglądarce tekstowej lub wyłączy pobieranie obrazów, tak że 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 możliwości podczas projektowania strony, to część Twych potencjalnych odbiorców może nie być w stanie jej oglądnąć lub wykorzystać jej możliwości.

Jeden z tych problemów można rozwiązać w bardzo prosty sposób. Używając atrybutu ALT znacznika <IMG>, możesz 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 użyciu 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 możliwość podania znacznie pełniejszego opisu obrazka, który przekaże użytkownikom, korzystającym z przeglądarek tekstowych lub osobom, które wyłączyły pobierania rysunków, znacznie więcej informacji niż pojedyncze słowo „IMAGE”. Atrybut ten zawiera ciąg znaków, który należy wyświetlić zamiast obrazka:

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

W przeważają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, że 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 można zastępować obrazów całymi blokami kodu HTML, można 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 już teraz zacząć go używać.

Ć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 (rys 7.1).

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

"http://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 przerażającym Pałacem Strachu przez

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

niesamowitych wrażeń. Ponad <strong>20 sal strachu i przerażenia

</strong>stworzonych, by przerazić i zmrozić krew w żył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>

Rysunek 7.1 Strona Pałacu Strachu Halloween

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 (rys 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łóżmy, że chcemy wstawić ten obraz w osobnej linii, tak aby nagłówek znajdował się tuż pod nim. Aby zrobić to właśnie w ten sposób, należy wstawić znacznik <IMG> w osobnym akapicie, tuż przed nagłówkiem (obra­zy, 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>

Jeżeli teraz ponownie odczytasz tę stronę w przeglądarce, powinna wyglądać, tak jak na rys. 7.2.

Rysunek 7.2 Strona Pałacu Strachu Halloween z nawiedzonym domem

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

Jeżeli nazwa okaże 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 Netscape'ie opcja ta nosi nazwę Auto Load Images, a w Internet Explorerze — Pokaż obrazy).

Jeden pajączek wygląda całkiem nieźle, prawda? Spróbujmy wobec tego dodać drugiego. Wpisz kolejny znacznik <IMG>, tuż 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>

Rys. 7.3 przedstawia efekt tego manewru w Internet Explorerze. Jak można się było domyślić, obyd­wa obrazki są ze sobą złączone.

Rysunek 7.3 Dwa obrazy na stronie WWW

I to w zasadzie wszystko, jeżeli chodzi o wstawianie obrazów. Bez względu na to, jak duży (a może 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ę poniżej. Ale obrazy można wstawiać również obok tekstu, niejako w tej samej linii.

Aby wstawić obraz obok tekstu, należy użyć znacznika <IMG> we właściwym miejscu, czyli wewnątrz odpowiedniego znacznika (<H1>, <P>, <ADDRESS> itp.), jak pokazano w po­niższej linii kodu. Na rysunku 7.4 widać, jakie różnice spowoduje umieszczenie tekstu w tym samym wierszu, w którym znajduje się nagłówek. (Skróciłam także 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>

Rysunek 7.4 Strona Pałacu Strachu Halloween — obraz umieszczony w nagłówku

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

Wpisz

<blockquote>

Nie ma Świat <img src="world.gif" alt="Świat" /> takiego początku

ani końca,<br />

Niezbadany kosmos tak jasnego Słońca

<img src="sun.gif" alt="Słońce" />,<br />

Nie ma tylu atomów <img src="atom.gif" alt="Atom" /> w elektrowni

atomowej,<br />

Ani głębi w morskiej bombie głębinowej,<br />

Tylu pięknych gwiazd <img src="star.gif" alt="Gwiazda" /> na wieczornym

niebie,<br />

Jak piękne jest żyć od czasu, gdy poznałem Ciebie.<br />

</blockquote>

A oto efekt:

Rysunek 7.5 Obrazy można wstawiać wszędzie...

Wzajemne położenie tekstu i obrazu

Zauważ, że w pokazanych przykładach dolne krawędzie tekstu i obrazów znajdujących się w jednej linii pokrywają się. Znacznik <IMG> zawiera jednakże atrybut ALIGN, który umożli­wia ułożenie obrazu powyżej lub poniżej otaczającego go tekstu, lub innych obrazów w tej samej linii.

	Korzystanie z atrybutu ALIGN w powiązaniu ze znacznikiem <IMG> nie jest zalecane prze twórców standardu HTML 4.0, zamiast niego należy stosować arkusze stylów. Więcej o arkuszach stylów dowiesz się w rozdziale 10. „XHTML i arkusze stylów”.

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

ALIGN="TOP"	Wyrównuje górną krawędź obrazu względem górnej krawędzi linii (może to być górna krawędź tekstu lub innego obrazu).
ALIGN="MIDDLE"	Wyrównuje obraz w taki sposób, że jego środek leży dokładnie pośrodku linii.
ALIGN="BOTTOM"	Wyrównuje dolną krawędź obrazu względem dolnej krawędzi linii.

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 żaden 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.

WPISZ

<blockquote>

Nie ma Świat <img src="world.gif" alt="Świat" />

takiego początku ani końca<br />

Niezbadany kosmos tak jasnego Słońca

<img src="sun.gif" alt="Słońce" align="top" />,<br />

Nie ma tylu atomów

<img src="atom.gif" alt="Atom" align="middle" />

w elektrowni atomowej<br />

Ani głębi w morskiej bombie głębinowej,<br />

Tylu pięknych gwiazd

<img src="star.gif" alt="Gwiazda" align="bottom" />

na wieczornym niebie<br />

Jak pięknie jest żyć od czasu, gdy poznałem Ciebie.<br />

</blockquote>

Rysunek 7.6 Obrazy: bez wyrównania, wyrównany do górnej krawędzi wiersza, połowy wysokości wiersza oraz 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. Poniższa tabelka przedstawia rozszerze­nia firmy Netscape, które jednak nie zostały zaaprobowane jako część standardu HTML 3.2 oraz 4.0. Cztery podane poniżej atrybuty nie zostały zaakceptowane w zaproponowanej specyfikacji języka XHTML 1.0, a ich użycie sprawi, że strona nie zostanie uznana za zgodną z tą specyfikacją.

ALIGN="TEXTTOP"	Wyrównuje górną krawędź obrazu względem górnej krawędzi najwyższej litery w linii (ALIGN="TOP" wyrównuje obraz względem najwyższego elementu linii, czyli nie tylko liter, ale również innych obrazów).
ALIGN="ABSMIDDLE"	Wyrównuje obraz w taki sposób, że jego środek leży pośrodku największego elementu linii (ALIGN="MIDDLE" działa tak, że środek obrazu znajduje się pośrodku samego tekstu).
ALIGN="BASELINE"	Wyrównuje dolną krawędź obrazu względem dolnej krawędzi tekstu.
ALIGN="ABSBOTTOM"	Wyrównuje dolną krawędź obrazu względem dolnej krawędzi największego elementu w linii.

Poniższy kod przedstawia praktyczne zastosowanie podanych wcześniej możliwości wyrównywania obrazów. Rys. 7.7 przedstawia przykłady wszystkich podanych powyżej opcji, wyświetlone w Netscape Navigatorze. W każdym przypadku linia po le­wej stronie oraz tekst ułożone są względem siebie jednakowo, natomiast zmienia się położe­nie strzałki.

WPISZ:

<h2>Linia i tekst wyrównane, położenie strzałek zmienne:</h2>

<img src="line.gif" alt="Line" width="25" height="90" />

Align: Top

<img src="uparrow.gif" alt="Up" align="top" width="60" height="60" />

Align: Text Top

<img src="uparrow.gif" alt="Up" align="texttop" width="60" height="60" />

<h2>Linia i tekst wyrównane, położenie strzałek zmienne:</h2>

<img src="line.gif" alt="Line" width="25" height="90" />

Align: Absolute Middle

<img src="forward.gif" alt="Next" align="absmiddle" width="60" height="60" />

Align: Middle

<img src="forward.gif" alt="Next" align="middle" width="60" height="60" />

<h2>Linia i tekst wyrównane, położenie strzałek zmienne:</h2>

<img src="line.gif" alt="Line" width="25" height="90" />

Align: Baseline / Bottom

<img src="down.gif" alt="Down" align="baseline" width="60" height="60" />

Align: Absolute Bottom

<img src="down.gif" alt="Down" align="absbottom" width="60" height="60" />

Rysunek 7.7 Opcje wyrównywania obrazów wyświetlone w Netscape'ie

Obraz otoczony tekstem

Obraz umieszczony w linii tekstu wygląda dobrze tylko wtedy, gdy długość tekstu nie przekra­cza tej jednej linii. Celowo nie wspomniałam do tej pory o tym, że wyrównywanie obrazów w HTML 2.0 dotyczyło tylko pojedynczej linii tekstu. Jeżeli wstawiłeś obraz do dłuższego fra­gmentu, składającego się z wielu linii, cały tekst (z wyjątkiem jednej linii) przesuwał się pod lub nad obraz.

A co możesz zrobić, jeżeli 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 niemożliwe. Wszystko, czego można było dokonać, pokazano na powyższym rysunku, co w oczywisty sposób ograniczało możliwości projektantów stron.

Aby objeść ograniczenia HTML-a 2.0, firma Netscape wprowadziła dwie nowe wartości at­rybutu ALIGN, używanego 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'a.

ALIGN=LEFT i ALIGN=RIGHT

Pierwsza z tych wartości, ALIGN="LEFT", pozwala na ułożenie obrazu przy lewym marginesie strony, a ALIGN="RIGHT", jak można się domyślić, przy prawym. Ale to nie wszystko, bo­wiem użycie jednej z tych wartości powoduje także, że przestrzeń pomiędzy obrazem a przeciwnym marginesem może być wypełniona tekstem. Przykład takiego wzajemnego ułożenia tekstu i grafiki przedstawia rys. 7.8.

Wpisz

<img src="tulip.gif" align="left" alt="Tulipany" />

<h1>Tajemniczy zabójca tulipanów</h1>

<p>Ktoś lub coś, zniszczyło tulipany w New South Haverford,

w Wirginii. Mieszkańcy tego małego miasteczka są zaszokowani i

oburzeni tym bezsensownym aktem wandalizmu, który wydarzył się

w ich małym mieście.</p>

<p>New South Haverford jest znane z ekstrawaganckich pokazów

tulipanów w czasie wiosny, dzięki czemu przyciąga całą rzeszę

turystów, zwabionych niezwykłym widokiem dwustu tysięcy

kwitnących w kwietniu i maju tulipanów.</p>

<p>Ostatnio jednak turyści tłumnie przybyli do New South

Haverford, w czasie gdy w ciągu trzech dni, wszystkie tulipany

oraz inne kwiaty w mieście zwiędły nagle w tajemniczych

okolicznościach, podczas gdy niemal wszyscy mieszkańcy spali.</p>

Rysunek 7.8 Tekst i obraz obok siebie

Po ułożonym w ten sposób obrazie możesz wstawiać dowolne elementy HTML-a (akapity, listy, nagłówki, a nawet kolejne obrazy) i możesz być pewien, że każdy z nich znajdzie się pomiędzy nim a przeciwnym marginesem strony (możesz także umieścić obrazy przy obydwu marginesach, wtedy tekst znajdzie się pośrodku). Przeglądarka wypełnia całą przestrzeń aż do dolnej krawędzi obrazu, a następnie kontynuuje wyświetlanie tekstu pod nim.

Przerwa w otaczaniu obrazu tekstem

Może się zdarzyć, że 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ąż obok a nie pod obrazem. Nie pomoże także wstawienie nowego paragrafu, jego treść będzie się ciągle znajdowała obok rysunku. Aby przerwać funkcję otaczania obrazu przez tekst, musisz użyć znacznika podziału linii <BR> z atrybutem CLEAR. Powoduje on, że nowa linia rozpoczyna się dopiero pod obrazem a więc w miejscu, gdzie przy lewym marginesie nic już nie ma (margines jest wolny).

Atrybut CLEAR może przyjmować jedną z trzech wartości:

LEFT	nowa linia rozpoczyna się od miejsca, gdzie wolny jest lewy margines (dotyczy obrazów ułożonych po lewej stronie),
RIGHT	nowa linia rozpoczyna się od miejsca, gdzie wolny jest prawy margines (dotyczy obrazów ułożonych po prawej stronie),
ALL	nowa linia rozpoczyna się od miejsca, gdzie obydwa marginesy są wolne.

Notatka

Atrybut CLEAR znacznika <BR> został uznany w HTML-u 4.0 za przestarzały, a zamiast niego należy stosować arkusze stylów.

Poniższy 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, że dalszy tekst wyświetlany jest pod obrazkiem. Na rysunku 7.9 przedstawiony został wygląd tego fragmentu kodu wyświetlonego w Internet Explorerze.

Wpisz

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

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Tajemniczy zabójca tulipanów</title>

</head>

<body>

<img src="tulip.gif" align="left" alt="Tulipany" />

<h1>Tajemniczy zabójca tulipanów</h1>

<br clear="left" />

<p>Ktoś lub coś, zniszczyło tulipany w New South Haverford,

w Virgini. Mieszkańcy tego małego miasteczka są zaszokowani i

oburzeni tym bezsensownym aktem wandalizmu, który wydarzył się

w ich małym mieście.</p>

<p>New South Haverford jest znane z ekstrawaganckich pokazów

tulipanów w czasie wiosny, dzięki czemu przyciąga całą rzeszę

turystów, zwabionych niezwykłym widokiem dwustu tysięcy

kwitnących w kwietniu i maju tulipanów.</p>

<p>Ostatnio jednak turyści tłumnie przybyli do New South

Haverford, w czasie gdy w ci±gu trzech dni, wszystkie tulipany

oraz inne kwiaty w mieście zwiędły nagle w tajemniczych

okolicznościach, podczas gdy niemal wszyscy mieszkańcy spali.</p>

Rysunek 7.9 Przełamanie linii do wolnego marginesu

Określanie odległości obrazu od tekstu

Mając możliwość umieszczania tekstu wokół obrazu, możesz również 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.

Notatka

Atrybuty VSPACE oraz HSPACE znacznika <IMG> zostały w HTML-u 4.0 uznane za przestarzałe i zamiast nich należy raczej stosować arkusze stylów.

Poniższy 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 można 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 użyciu atrybutu VSPACE.

Wpisz

<img src="eggplant.gif" alt="Oberżyna" align="left" />

<p>To jest plantacja oberżyn. Mamy zamiar trzymać się z dala,

ponieważ naprawdę bardzo nie lubimy oberżyn.</p>

<br clear="left" />

<hr />

<img src="eggplant.gif" vspace="50" hspace="50" align="left" />

<p>To jest plantacja oberżyn. Mamy zamiar trzymać się z dala,

ponieważ naprawdę bardzo nie lubimy oberżyn.</p>

Rysunek 7.10 Na górze — obraz wyświetlony w domyślny sposób, u dołu — obraz wyświetlony przy wykorzystaniu atrybutów HSPACE oraz VSPACE

Grafika i połączenia

Czy obraz może być jednocześnie połączeniem? Jasne, że tak! Wystarczy tylko wstawić zna­cznik <IMG> pomiędzy otwierający i zamykający znacznik <A>, a kliknięcie na tak umiesz­czony obraz spowoduje wywołanie połączenia.

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

Jeżeli pomiędzy znacznikami <A> umieścisz zarówno obraz, jak i tekst, kliknięcie którego­kolwiek 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ównież połączeniami, są standardowo wyświetlane w cienkiej ramce, w ten sposób można wizualnie odróżnić je od pozostałych (patrz rys. 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 umożliwia przejście na główną stronę witryny, jest połączeniem i dlatego wokół niej została wyświetlona ramka.

Rysunek 7.11 --> [Author:MMP] Wokół obrazów, będących jednocześnie połącze­niami, są wyświetlane ramki

Szerokość ramki, umieszczanej wokół połączenia można regulować za pomocą atrybutu BORDER (<IMG>). Jego wartością jest szerokość ramki, podawana w pikselach (BORDER="0" sprawia, że 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 należy go zastępować arkuszami stylów.

W kwestii całkowitego ukrywania ramki wokół mapy odsyłacza należy być bardzo ostroż­nym. Jak już wspomniałam, jest to jedyny sposób na wizualne zaznaczenie, że ten konkret­ny element nie jest zwykłym obrazkiem, ale połączeniem. Usuwając ramkę, utrud­niamy czytelnikom odróżnienie od siebie zwykłych obrazów od połączeń (aby przekonać się, co jest czym, muszą oni przesunąć wskaźnik myszy nad każdym obrazkiem). Jeżeli naprawdę musisz zrezygnować z ramek wokół obrazów, będących jednocześnie połącze­niami, posta­raj się, aby ich rzeczywista funkcja jasno wynikała z kontekstu, w jakim zostały umiesz­czone na stronie. Mogą one mieć, na przykład, postać przycisków, jak te pokazane na rys. 7.12.

Rysunek 7.12 Obrazy przypominające przyciski

Ć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 można przenosić się w sensowny sposób (w przód, w tył, do strony głównej itp.), dobrze jest stworzyć menu, służące do po­ruszania się między nimi. Znajdowałoby się ono w dolnej lub górnej części każdej strony, zawsze w tym samym miejscu, co zdecydowanie ułatwiłoby czytelnikom odnalezienie właś­ciwej drogi.

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

Pracę należy rozpocząć od utworzenia całej struktury stron. W naszym przypadku treść nie jest ważna, założymy więc, że tematem będzie instrukcja wymiany świec w motocyklu, ale nie będziemy wgłębiać się w szczegóły. Rys. 7.13 przedstawia początkową postać tej stro­ny:

Wpisz

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

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Obsługa motocykli: Wymiana świec zapłonowych</title>

</head>

<body>

<h1>Wymiana świec zapłonowych</h1>

<p>(tutaj wstaw opis wymiany świec zapłonowych)</p>

<hr />

</body>

</html>

Rysunek 7.13 Strona bez ikon

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

Wpisz

<img src="next.gif" alt="Dalej" />

<img src="back.gif" alt="Wstecz" />

<img src="uparrow.gif" alt="Do góry" />

Rysunek 7.14 Strona z ikonami

Teraz należy uaktywnić połączenia, dodając znaczniki <A>. Wynik tej operacji przedstawia rys. 7.15.

Wpisz

<a href="next.html"><img src="next.gif" alt="Dalej" /></a>

<a href="back.html"><img src="back.gif" alt="Wstecz" /></a>

<a href="index.html"><img src="uparrow.gif" alt="Do góry" /></a>

Rysunek 7.15 Strona z połączeniami w formie ikon

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.

Jeżeli już mówimy o tekście, to należy zastanowić się, czy w obecnej postaci ikony są dos­tatecznie czytelne. Może warto byłoby dodać do nich jakiś tekst, który opisywałby bliżej stronę, do której prowadzi połączenie? Tekst ten można wstawić jako element samego połą­czenia (wtedy jego wybór również spowoduje wybór połączenia), ale może on również zna­leźć się poza nim. W naszym przykładzie zastosujemy to drugie rozwiązanie, tak więc do wybierania połączeń będą służyły tylko ikony. Można tu również skorzystać z możli­wości wyrównywania tekstu względem grafiki, które daje nam znacznik <IMG> w połączeniu z at­rybutem ALIGN. Na koniec należy również umieścić każdą ikonę wraz z tekstem w oddziel­nej linii, bowiem w innym razie nie zmieściłyby się w jednym wierszu. Ostateczna postać strony przedstawiona została na rys. 7.16.

Wpisz

<hr />

<a href="next.html"><img src="next.gif" alt="Dalej" /></a>

Wejście do "Odstęp iskiernika"<br />

<a href="back.html"><img src="back.gif" alt="Wstecz" /></a>

Powrót do "Kiedy powinieneś wymieniać świece"<br />

<a href="index.html"><img src="uparrow.gif" alt="Do góry" /></a>

Przejście do strony głównej<br />

Rysunek 7.16 Strona z połączeniami w formie ikon i dodatkowym tekstem

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 ta­kie same połączenia, jakie tworzy się do innych zwykłych dokumentów.

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

• Większość przeglądarek WWW obsługuje obrazy wewnętrzne w formacie GIF, sporo potrafi również wyświetlić format JPEG. Wiele z nich może jednakże obsłużyć również inne formaty plików graficznych, ale tylko w postaci obrazów zewnętrznych (lub też wywołując inne aplikacje). Zastosowanie tego typu obrazów poz­wala na wykorzystanie wielu innych popularnych typów grafiki, jak, na przykład, BMP (mapy bitowe Windows) czy PICT (mapy bitowe Macintosha).

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

• Można zastosować połączenie tych dwóch technik. Mały, zawierający mniej szczegółów obrazek można 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 należy je również zapi­sać z odpowiednią nazwą. Podobnie jak w przypadku innych plików, wykorzystywanych w sieci WWW, tak i tutaj bardzo istotne jest rozszerzenie nazwy pliku. W zależności od formatu pliku, można używać następujących rozszerzeń, wymienionych w tabeli poniżej.

Tabela 7.1: Formaty graficzne i rozszerzenia plików

Format	Rozszerzenie
GIF	.gif
JPEG	.jpg, .jpeg
XBM	.xbm
TIFF	.tiff, .tif
BMP	.bmp
PICT	.pict

Jeżeli plik, który ma zostać wykorzystany jako obraz zewnętrzny, jest już gotowy, wystar­czy tylko utworzyć do niego połączenie na stronie:

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

<a href="bigpomidor.jpeg" alt="Duże 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 ob­razków wewnętrznych („miniaturek”), które stanowią połączenia do swoich większych od­powiedników. Przewaga takiego podejścia nad włączaniem dużych obrazów bezpośrednio do stron wyraża się w dwóch zasadniczych punktach.

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

• Czytelnik może ujrzeć przedsmak tego, co go czeka w dalszej kolejności. Uzyskuje w ten sposób możliwość wyboru i, jeżeli 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 duży obraz prezentuje zamek nad rzeką (plik castle.jpg — rys. 7.17).

Rysunek 7.17 Duży obraz zamku

Pierwszym krokiem będzie utworzenie miniaturki tego obrazka — możesz do tego celu wy­korzystać 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. Może być to pomniejszona wersja całego obrazu lub cokolwiek innego, co tylko może symbolizować pełną wersję obrazu.

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

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

"http://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 należy połączyć mały plik z jego większym odpowiednikiem, używają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 rys. 7.18. Kliknięcie miniaturki zamku spo­woduje załadowanie i wyświetlenie dużego obrazu. Może on zostać wyświetlony w oknie przeglądarki, ale może ona również skorzystać z usług zewnętrznego programu, służącego do wyświetlania obrazów typu JPEG.

Rysunek 7.18 Strona główna Zamku o wschodzie słońca z połączeniem

Alternatywą takiego rozwiązania jest utworzenie pliku zewnętrznego w kilku różnych for­matach i zamieszczenie połączeń tekstowych do kilku wersji tego samego zdjęcia (może być to dobre rozwiązanie dla czytelników, posiadających oprogramowanie obsługujące tyl­ko jeden z dostępnych formatów). W naszym przykładzie dołożymy połączenie do rysunku zamku zapisanego w formacie GIF.

Do utworzenia pliku w formacie GIF znów będzie nam potrzebny program graficzny lub też 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, poz­bę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 rys. 7.19.

Wpisz

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

<ul>

<li>Zamek o wschodzie słońca (<a href="castle.jpg">25KB JPEG</a>)</li>

<li>Zamek o wschodzie słońca (<a href="castle.gif">49KB GIF</a>)</li>

</ul>

Rysunek 7.19 Połączenia do plików graficznych
	Zastosowanie plików zewnętrznych na stronach WWW nie ogranicza się tylko i wyłącznie do obrazów. W ten sposób można również podłączać pliki dźwiękowe, wideo, archiwa zip itp. Więcej na ten temat przeczytasz w rozdziale 13. „Multimedia: Dodawanie dźwięków, obrazów wideo i innych elementów multimedialnych”.

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 już w zasadzie wszy­stko, 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 rozsze­rzenia Netscape'a, 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 wyso­kość 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 należy je zastępować arkuszami stylów.

Jeżeli jako wartości tych atrybutów podasz rzeczywiste wymiary obrazu (można je odczytać za pomocą większości edytorów graficznych), strona ta w wielu przeglądarkach będzie ładowana i wyświetlana nieco szybciej niż 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, że 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. Jeżeli więc szerokość i długość obrazu zostaną podane w kodzie strony, przeglądarka może 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 umożliwia odbiorcom czytanie treści, zanim jeszcze pojawi się grafika. A ponieważ przeglądarki, które nie obsługują atrybutów HEIGHT i WIDTH po prostu je igno­rują, nie widzę powodów, aby z nich nie korzystać; przynoszą one bowiem same korzyści i absolutnie w niczym nie przeszkadzają.

	Jeżeli do testowania stron używasz programu Netscape Navigator 4, spróbuj wybrać opcję View|Page info. W tym momencie na ekranie powinno pojawić się okno, w którym zobaczysz listę wszystkich obrazów, znajdujących się na aktualnie wyświetlanej stronie. Wybierając każdy z tych obrazów, uzyskasz pewne informacje o nim, w tym również jego wymiary. Dane te możesz następnie umieścić na stronie.

Jeżeli wartości atrybutów WIDTH i HEIGHT różnią się od rzeczywistej wielkości obrazu, prze­glądarka przeskaluje go i wyświetli z podanymi wymiarami. Ponieważ mniejsze obrazy zaj­mują mniej miejsca, a ich transfer przez sieć zajmuje mniej czasu, można skorzystać z tej metody, aby skrócić czas potrzebny na załadowanie strony. Polega to na tym, że używa się mniejszych obrazów, a wyświetla się je na stronie w formacie powiększonym. Należy jednak przy tym pamiętać, że powiększony zostanie każdy pojedynczy piksel, tak więc obraz na stronie może być ziarnisty i w ogóle wyglądać nieciekawie. Na etapie tworzenia strony należy więc poświęcić jakiś czas na przetestowanie skalowania obrazów, tak aby uzyskać odpowiedni efekt.

	Nie próbuj używać skalowania w drugą stronę, tzn. nie twórz dużych obrazów i nie wyświetlaj ich pomniejszonych, bowiem powoduje to zwiększenie czasu potrzebnego na odczyt strony. Jeżeli chcesz wyświetlić mniejszy obraz, pomniejsz go wcześniej za pomocą edytora graficznego.

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

Z atrybutem BORDER zapoznałeś się już przy okazji omawiania technik wykorzystania obra­zów jako połączeń. Przypominam, że za jego pomocą można zmienić szerokość ramki wo­kół 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 można również umieszczać ramki wokół zwykłych obiektów graficznych:

<p><img src="eggplant.gif" alt="Oberżyna" align="left"

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

To jest plantacja oberżyn. Mamy zamiar trzymać się z dala,

ponieważ naprawdę bardzo nie lubimy oberżyn.</p>

Rys. 7.20 przedstawia przykładowy obraz z ramką.

Rysunek 7.20 Ramka wokół obrazu

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łuży do udostępnienia czegoś w ro­dzaju podglądu właściwego obrazu, znajdującego się na stronie. Korzysta się z niego do­kładnie tak samo, jak z atrybutu SRC, podając ścieżkę 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óż 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 zbliżonej do efektu końcowego (pamiętaj, że plik zawierający obraz typu LOWSRC powinien być rzeczywiście mniejszy od docelowego, inaczej umieszczanie go nie ma żadnego sensu). W tym momencie czytelnik może 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 najzwyczaj­niej go ignorują.

Kolory

Jednym ze sposobów „pokolorowania” stron WWW jest stosowanie grafiki — w ten sposób można zdecydowanie ożywić 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 najbliższych 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, także i atrybuty koloru zostały uznane w HTML-u 4.0 za przestarzałe, a zamiast nich należy 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 można określać za pomocą rozszerzeń kolorów HTML na dwa różne sposoby:

• za pomocą liczby szesnastkowej,

• 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 (każda liczba odpowiada natężeniu jednego z trzech kolorów: czerwonego [R — ang. red], zielonego [G — ang. green] oraz niebieskiego [B — ang. blue]). W takim zapisie liczby 0 0 0 oznaczają kolor czarny, natomiast 255 255 255 to kolor biały.

Jeżeli znasz już wartość koloru w postaci RGB, musisz zamienić te liczby na wartość szes­nastkową. Do tego celu możesz wykorzystać jakikolwiek kalkulator inżynierski. Na rynku istnieje również cała gama programów shareware'owych 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 też 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ążki. Na tym etapie możesz skorzystać z formularza rgb.html znajdującego pod adresem http://www.lne.com/rgb.html — poz­woli Ci on wyliczyć wartość szesnastkową dla trzech dowolnych liczb. Przykładowo, wartość szesnastkowa liczb RGB 0 0 0 wynosi 00 00 00, a 255 255 255 równe jest FF FF FF.

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

#000000

#DE04E4

#FFFF00

Netscape i Internet Explorer obsługują dużo łatwiejszy sposób określania kolorów. Zamiast żmudnego wyliczania liczb szesnastkowych można 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 (żółty), Blue (niebieski), Teal, Lime (cytrynowy), Aqua, Fuchsia (fuksja) czy Silver (srebrny).

Wprawdzie nazwy kolorów są zdecydowanie łatwiejsze do zapamiętania niż wartości licz­bowe, nie są jednak w stanie opisać tak dużej liczby kolorów, no i nie wszystkie przeglądar­ki potrafią je obsłużyć. Korzystając z nazw, musisz być świadom, że w większości przeglą­darek kolory określone w ten sposób nie będą widoczne.

Jeżeli znasz już nazwę lub wartość szesnastkową żądanego koloru, możesz go przypisać różnym elementom strony WWW.

Zmiana koloru tła

Aby zmienić kolor tła strony WWW, należy umieścić jego wartość (nazwę lub liczbę szesnastkową) obok atrybutu BGCOLOR, w znaczniku <BODY>. Jeżeli zdążyło Ci to już wyle­cieć z pamięci, to przypominam, że znacznik ten obejmuje swoim zakresem całą treść stro­ny 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), należy 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">

	Niektóre przeglądarki pozwalają na wpisanie szesnastkowego kodu koloru bez znaku # (hash). Metoda ta może wydawać się nieco prostsza, ale biorąc pod uwagę fakt, że zapis ten może nie zadziałać odpowiednio we wszystkich przeglądarkach, nie radzę go stosować. W końcu dopisanie jednego znaku to nie taka wielka praca, prawda?

Zmiana koloru tekstu

Jeżeli istnieje możliwość zmiany koloru tła, logiczne jest, że można również zmienić kolor tekstu, znajdującego się na stronie. Do tego celu służy 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, możesz wstawić do znacznika <BODY> któryś z poniż­szych atrybutów.

TEXT	Określa kolor każdego fragmentu tekstu na stronie, który nie jest połącze­niem razem z nagłówkami, tekstem w tabelach itp.
LINK	Określa kolor tekstu połączeń, które nie zostały jeszcze wybrane (standardo­wo oznaczane są one kolorem niebieskim)
VLINK	Określa kolor tekstu połączeń, które zostały już przynajmniej raz wybrane (standardowo oznaczane kolorem fioletowym lub czerwonym)
ALINK	Określa kolor tekstu połączeń, na których został naciśnięty, ale jeszcze nie zwolniony przycisk myszy (połączenie aktywowane). Standardowo połącze­nia takie są wyświetlane na czerwono.

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> zdefiniowa­ny następująco:

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

Taki sam efekt można osiągnąć używają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 rys. 7.21.

Rysunek 7.21 Kolory tła i tekstu

Kolor pojedynczego znaku

Jeżeli do zmiany koloru tekstu używasz znacznika <BODY>, przekształcenia te dotyczą całe­go tekstu, znajdującego się na danej stronie. Istnieje jednakże możliwość zmiany barwy po­jedynczych znaków, co może być wykorzystywane zamiast lub łącznie ze zmianą koloru całości tekstu.

W poprzednim rozdziale mówiliśmy o znaczniku <FONT>, który służył 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 może 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 może być wykorzystywany w znaczniku <FONT> łącznie z SIZE i NAME.

Grafika w tle

Ostatnim tematem, który pragnę poruszyć w tym rozdziale jest możliwość wykorzystywania obrazów jako tła dokumentu WWW w miejsce tła o jednolitym kolorze. Obraz wykorzysty­wany w taki sposób jest wyświetlany na zasadzie kafli, co oznacza, że 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łużył jako pojedyn­czy element („kafelek”). Tworząc tego typu grafikę, należy zwrócić baczną uwagę, aby przejście od jednej części do drugiej, po ich połączeniu, było możliwie jak najbardziej płynne, co można 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 (rys. 7.22 przed­stawia „kafelki”, niepasujące do siebie). Jest to dość trudne zadanie, możesz więc skorzys­tać z wielu gotowych bibliotek obrazów, zaprojektowanych specjalnie pod tym kątem.

Rysunek 7.22 Części niepasujące do siebie

Jeżeli odpowiedni rysunek jest już przygotowany, należy umieścić go jako tło strony. Do tego celu służy 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">

Rys. 7.23 przedstawia przykładowe tło.

Rysunek 7.23 Tło w Internet Explorerze

Internet Explorer posiada ciekawą cechę związaną z tłem, a mianowicie tzw. tło nierucho­me. Polega to na tym, że 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> należy wstawić atrybut BGPROPERTIES="FIXED", jak w poniższym przykła­dzie:

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

Kilka pożytecznych wskazówek

Wykorzystanie obrazów na stronach WWW jest przedmiotem bardzo gorącej dyskusji wśród użytkownikó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ą możliwości sieci WWW. Z kolei użytkownicy 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. Należy znaleźć kompromis pomiędzy chęcią stworzenia stron jak najbardziej atrak­cyjnych wizualnie, a potrzebami informacyjnymi użytkowników, także tych, którzy nie mają możliwoś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 można zaprezentować w formie tekstowej? A może wstawiasz go tylko dlatego, że Ci się podoba?

Nie zapełniaj stron ładnymi, ale tak naprawdę niepotrzebnymi obrazami. Prosta strona z kil­koma niedużymi ikonami jest często dużo bardziej efektowna niż prezentacja, która rozpo­czyna się od olbrzymiego rysunku, po czym atakuje użytkownika wspaniałymi, trójwymia­rowymi przyciskami i wymyślnymi liniami.

Obrazy nie powinny być duże

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 użytkowników wolnych połączeń. Nic prostszego, prawda?

Aby stworzyć mniejszy obraz, możesz go fizycznie pomniejszyć, ale nie jest to jedyny spo­sób. Można także zredukować liczbę kolorów, co również sprawi, że plik z grafiką będzie mniejszy. W końcu chodzi o to, aby do przesłania było jak najmniej bajtów, a przecież czarno-biały rysunek o wielkości 10x10 cm będzie zajmował mniej miejsca niż mniejsza (np. 5x5 cm), ale kolorowa fotografia. Redukcję liczby kolorów możesz wykonać przy pomocy większości edytorów graficznych. Zawsze porównuj efekt końcowy tej operacji z oryginałem, jeżeli będzie on niezadowalający, możesz z tego zrezygnować.

Dobrze jest trzymać się zasady, by wielkość obrazów wewnętrznych nie przekraczała 20 kB. Może się wydawać, że jest to za mało, ale należy pamiętać, iż transmisja pliku o takiej wiel­kości przez połączenie z prędkością 28,8 Kbps, trwa około 10 sekund. Jeżeli pom­nożyć ten czas przez liczbę obrazów na stronie okaże się, że trzeba się na nią sporo naczekać (nawet jeżeli przeglądarka potrafi odczytywać kilka obrazów jednocześnie, nie przeskoczy bariery, jaką jest przepustowość łącza). Czy odbiorcy będą zainteresowani treścią strony, jeżeli w trakcie jej ładowania będą za każdym 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ę możliwości, tych samych obrazów na jednej lub wielu stronach. Jeżeli wykorzystujesz ikonki graficzne do oznaczenia elemen­tów listy wy­punktowanej, postaraj się używać za każdym razem tego samego, a nie różnych plików. Wielokrotne wykorzystywanie tych samych obrazów ma dwie podstawowe zalety.

• Używanie tego samego obrazu na jednej stronie nadaje jej jednolity charakter i stanowi jednocześnie element kreowania ogólnego obrazu prezentacji.

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

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

Zamiast grafiki ...

Jeżeli, 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 użytkownikami, 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 można umieścić połączenie do jej tekstowej wersji, jak w poniższym 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 może być niesłychanie pożyteczne. Możesz być pewien, że użytkownicy 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 możesz w pełni rozwinąć skrzydła i nie przejmować się już ilością i wielkością wstawianych obra­zów.

Podsumowanie

Jedną z najważniejszych cech, która wyróżnia sieć WWW spośród innych form przesyłania informacji w Internecie, jest możliwość umieszczania na stronach w pełni kolorowych obrazów. W zasadzie można stwierdzić, że to właśnie dzięki grafice WWW została tak szybko zaakceptowana przez społeczność Internetową i zaczęła się tak gwałtownie roz­wijać.

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

SRC	określa lokalizację i nazwę pliku graficznego,
ALIGN	określa pionowe położenie obrazu w stosunku do otaczającego go tekstu, możliwe wartości to TOP, MIDDLE, BOTTOM (w HTML 4.0 atrybut ten jest przestarzały),
ALT	określa tekst, który zastępuje obraz w przeglądarkach tekstowych.

Obrazy można umieszczać wewnątrz znacznika połączenia <A>. Pełnią one w takim przy­padku tę samą rolę jak tekst, co oznacza, że kliknięcie takiego obiektu spowoduje wybra­nie połączenia.

Obok atrybutów wymienionych powyżej istnieje jeszcze kilka dodatkowych, które umożli­wiają dokładniejsze określenie położenia 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.

ALIGN="LEFT" i ALIGN="RIGHT"	Powoduje, że obraz zostaje wyświetlony przy jednym z marginesów, a tekst jest umieszczany obok, w przestrzeni powstałej po­między przeciwległym marginesem a obrazem.
	Oprócz tego, atry­but CLEAR znacznika <BR>, będący rozszerzeniem firmy Netscape powoduje, że dalsza część tekstu jest wyświetlana już pod obrazem. Możliwe wartości atrybutu CLEAR to LEFT, RIGHT i ALL.
ALIGN="TEXTTOP" ALIGN="ABSMIDDLE" ALIGN="BASELINE" ALIGN="ABSBOTTOM"	Atrybuty umożliwiające pełniejszą kontrolę pionowego położenia obrazu względem tekstu, znajdującego się w tej samej linii.
VSPACE i HSPACE	Określają odległość obrazu od otaczającego go tekstu.
BORDER	Określa szerokość ramki wokół obrazu (niezależnie od tego, czy jest on połączeniem, czy też nie). BORDER="0" powoduje całkowite ukrycie ramki.
LOWSRC	Za pomocą tego atrybutu można zdefiniować dodatkowy obraz o mniejszej rozdzielczości, który jest odczytywany i wyświetlany przed obrazem właściwym.

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

Warsztat

Teraz, gdy dowiedziałeś się, jak można umieszczać obrazy na stronach WWW oraz jak stosować kolory, możesz 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

16. Jaka jest różnica pomiędzy obrazami GIF i JPEG? Czy istnieje jakaś zasada określająca, kiedy należy stosować taki format a nie inny?

17. Jako regułę powinieneś przyjąć zapisywanie obrazów w formacie GIF, jeśli nie wykorzystują one więcej niż 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 należy także 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 możliwe, użyć programu graficznego do zmniejszenia ilości kolorów w palecie obrazu, dzięki temu można 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, iż umożliwiają one wyświetlanie obrazów o wielkiej liczbie kolorów. Większość programów graficznych umożliwia określenie stopnia kompresji obrazów JPEG. Wielkość pliku maleje wraz ze wzrostem stopnia kompresji obrazu; jednak zbyt wysoka kompresja może 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 każdego obrazka punkt ten może być inny.

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

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

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

17. Oto przykład kolejnego zadania, jakie można zrealizować przy wykorzystaniu programów graficznych. Obrazy tego typu określane są jako przeźroczyste obrazy GIF. Efekt ten można 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, nieprawdaż? Ale, niestety, nie mogą — w tym miejscu możesz wstawić tylko i wyłącznie tekst. Jeżeli będzie w miarę krótki, wszystko będzie w porządku.

P. W tym rozdziale wspomniałaś o atrybucie LOWSRC, który służy do określania obra­zó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, że 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 żadnych efektów specjalnych.

P. Podczas przeglądania różnych stron WWW natknąłem się na obrazy, gdzie klik­nięcie różnych części powodowało wybór różnych 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 używanych na stronach WWW.

2. Jaki jest najważniejszy 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, że obraz nie został załadowany. Wymień kilka przyczyn, które mogą sprawić, że przeglądarka nie będzie w stanie pobrać obrazu.

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

5. Dlaczego ważne jest używanie 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 żądanie użytkownika, zazwyczaj w wyniku kliknięcia połączenia.

2. Najważniejszym atrybutem znacznika <IMG> jest atrybut SRC. Określa on nazwę pliku lub URL obrazu, jaki należy wyświetlić na stronie.

3. Istnieje kilka czynników, które mogą spowodować, że obraz nie będzie wyświetlany na stronie. Podany URL może być niepoprawny, nazwa pliku może być błędna (przy jej podawaniu ważna 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, gdyż niektórzy użytkownicy mogą używać przeglądarek tekstowych lub wyłączać pobieranie obrazów. Stosowanie tekstu alternatywnego jest najważniejsze w przypadku, gdy obrazy są jednocześnie połączeniami.

Ćwiczenia

1. Stwórz lub odszukaj obrazy, których będziesz mógł użyć jako ikon nawigacyjnych lub przycisków na jednej lub kilku stronach własnej witryny. Pamiętaj, że 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ł użyć do uatrakcyjnienia wyglądu swoich strony WWW. Obrazy tego typu, na przykład, paski (używane przy tworzeniu tytułów), punkty, poziome kreski oraz tła strony, zawsze warto mieć pod ręką. Kiedy już znajdziesz takie obrazy, spróbuj wybrać pasujące do nich kolory tła strony, tekstu oraz połączeń.

244

HTML 4 - Czarna księga Webmastera

245

Wykorzystywanie obrazów, koloru i tła

7

---