245

7

              Wykorzystywanie  obrazów, koloru i tła

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ę:

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 można 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 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.

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.

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>

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.

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.

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>

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:

Wzajemne położenie tekstu i obrazu

Zauważ, że w pokazanych przykładach doln...