Wykorzystywanie obrazów, koloru i tła.pdf

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 znacznikami, 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: we-

wnętrzne i zewnętrzne. Pierwsze z nich to obrazy, znajdujące się bezpośrednio na stro-

nie, umieszczane 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 au-

tomatycznego wyświetlania obrazów jest włączona. Obrazy zewnętrzne nie są ładowane

automatycznie, mogą zostać wyświetlone dopiero na żądanie użytkownika, więc zwykle

158

Część 3. Grafika na WWW

prowadzą do nich hiperpołączenia. Aby oglądać obrazy tego typu, nie musisz koniecz-

nie posiadać przeglądarki graficznej. Korzystając, na przykład, z Lynksa, możesz zapi-

sać 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.

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łączenie.

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ąż 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ępnych na rynku edytorów graficznych, jak, na przykład, Adobe

Photoshop ( http://www.adobe.com/ ), Paint 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”).

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.

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ó

HTML) są zależne od wielkości znaków, tak więc GIF to nie to samo co

gif . Kwestia ta jest

Przypominasz sobie zapewne, że pliki HTML, aby funkcjonować poprawnie, musiały

mieć rozszerzenie . htm lub . html ? Podobnie jest w przypadku plików zawierających

Rozdział 7. Wykorzystywanie obrazów, koloru i tła

159

nieistotna podczas lokalnego testowania prezentacji, ale stanie się waż

plików na serwer; w miarę możliwości staraj się używać małych liter.

na po przeniesieniu

zy wewnętrzne na stronach WWW:

nik <IMG>

Jeżeli masz już przygotowany plik graficzny w formacie GIF lub JPEG, możesz um

ś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.

ie-

Znacznik <IMG> posiada wiele różnych 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, że nie będą dostępne dla starszych przegląda-

rek. 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 wstawiony. Przy określaniu ścieżki dostępu do tego pliku obowiązują te same

r omawianiu tworzenia połączeń i atrybutu HREF .

Aby więc wstawić do strony plik o nazwie image.gif , znajdujący się w tym samym kata-

eguły, o których była już mowa przy

logu co tworzona strona, musisz użyć następującego zapisu:

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

I w ten właśnie sposób, podobnie jak w

śla się ścieżkę dostępu do pliku graficzne

wypadku znacznika <A> i atrybutu HREF , okre-

go.

Dodaw

anie 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 graficz

ne strony zostaną zastąpione zwykłymi, standardowymi ikonami? Nagle ta wspaniała w

zualna 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 poten-

cjalnych 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.

Obra

znacz

160

Część 3. Grafika na WWW

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

zekaże użytkownikom, korzystającym z przeglądarek tekstowych lub

osobom, które wyłączyły pobierania rysunków, znacznie więcej informacji niż pojedyn-

ze słowo „IMAGE”. Atrybut ten zawiera ciąg znaków, który

miast obrazka:

należy wyświetlić za-

W przeważającej większości przeglądarek ciąg znaków podany w atrybucie ALT zo-

stanie zinterpretowany dosłownie, czyli jako ciąg znaków. Oznacza to, że jeśli umie-

ścisz w nim jakiekolwiek

względu nie można zastępować obrazów całymi blokami kodu HTML, można jedynie

podać słowa lub zdania.

m 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

rona główna pewnego nawiedzonego domu,

który otwierany jest raz do roku w Halloween. Korzystając z moich porad z poprzed-

ch sześciu rozdziałów, powinieneś bez problemów sam stworzyć t

tualny wygląd (rysunek 7.1).

aką stronę

. Oto więc

j kod i ak

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

://www.w3.org/TR/xhtml1/DTD/transitional.dtd

ional//EN"

<title>

</head>

<body>

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

<hr />

<p>Wybrany najbardziej strasznym i przerażającym Pałacem Strachu prze

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

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

ong>stworzonych, by przerazić i zmrozić krew w żyłach.</p>

</str

<p>Pałac Strachu Halloween otwarty

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>

en (31 październ

jest od <em>20 października do 1

<li><strong>W noc Hallowe

</ul>

ik)</strong>: 15.00-???</li>

<p>Pałac

Strachu Halloween

znajduje się w:<br />

w nawiasach kwadratowych: [IMAGE] . Jeśli obraz stanowi jednocześnie hiperpołącz-

nie, to zostaje ono zachowane.

Atrybut ALT znacznika <IMG> daje możliwość podania znacznie pełniejszego opisu ob-

razka, który pr

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

Celowo opisałam tworzenie tekstu alternatywnego na samy

Spróbujmy wykonać prosty przykład. Oto st

"http

<html>

<head>

Witajcie w Pałacu Strachu Halloween</titl

Rozdział 7. Wykorzystywanie obrazów, koloru i tła

161

The Old Waterfall Shopping Center<br />

20 Mirabella

eld, CA

Ave<br />

94532</p>

Springfi

</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 mo-

jej 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 hallo-

ween.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

osobnym akapicie, tuż przed nagłówkiem (obrazy, podobnie jak połącz

rzystać z usług in

ten sposób, należy wstawić znacznik <IMG>

enia nie sta-

owią odrębnych elementów tekstowych, muszą więc ko

nych znacz-

ników, takich jak akapity czy nagłówki).

<H1>Witajc

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

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

rysunku 7.2.

ądarka wyświetli zamiast niego jakiś dziwny

obrazek), upewnij się najpierw, czy poprawnie wpisałeś nazwę pliku graficznego. Na-

zwy 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 forma-

cie 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

Jeżeli obraz się nie pojawi (kiedy przegl

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: