Strona bez obrazów to smutna strona. Nawet strony traktujące o super poważnej tematyce zyskują na atrakcyjności, gdy znajdzie się na nich choćby malutki obrazek. Obrazy można wstawiać w odrębnym akapicie, wewnątrz tekstu lub w obszarze nagłówka – wystarczy umieścić znacznik <img> wewnątrz odpowiedniego elementu. Jeśli chcesz, by obraz ubarwił nagłówek, umieść znacznik <img> między znacznikami nagłówka.
Obrazy można wstawiać na stronie bezpośrednio lub zastępować je połączeniami prowadzącymi do odpowiednich plików. W tym drugim przypadku mówimy o obrazach zewnętrznych. Mając do dyspozycji połączenie czytelnik sam podejmuje decyzję, czy chce zobaczyć obraz.
Obraz może także stanowić tło strony, lecz tym nie będziemy się tutaj zajmować. W rozdziale 4. znajdziesz parę przykładów stosowania obrazów jako tła.
Zacznij od tego, aby zobaczyć jak to robią inni. Przejrzyj zasoby sieciowe, wyświetl postaci źródłowe stron WWW i przyglądnij się znacznikowi <img>, bowiem on właśnie pozwala na wstawianie obrazów. Znacznik ten jest pusty – oznacza to, że nie posiada znacznika zamykającego, ale ma szereg atrybutów, które kontrolują sposób prezentacji obrazu na stronie. Atrybuty te zostały zgromadzone w tabeli 5.1. Najważniejszym z nich jest atrybut src. Umożliwia on określenie ulokowania obrazu i zdefiniowanie jego nazwy. Wygląda to mniej więcej tak:
<img src="url">.
Dlaczego mniej więcej? Bo dokładna postać tego wyrażenia zależy od tego, gdzie umieściłeś obraz, oraz od jego formatu (to znaczy typu pliku).
Wartością atrybutu src jest adres URL, który określa ulokowanie obrazu – inaczej mówiąc jest to adres, pod którym obraz jest dostępny. Jeśli więc obraz o nazwie obraz.gif jest przechowywany w katalogu images witryny www.mojastrona.com, to bezwzględny adres URL będzie miał postać http://www.mojastrona.com/images/obraz.gif. Adres względny zależeć będzie natomiast od ulokowania pliku html. Więcej informacji na temat adresowania znajdziesz w rozdziale 6. poświęconym połączeniom.
Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element img. Jeśli znacznik <img> zostanie umieszczony między dwoma akapitami (definiowanymi za pomocą elementów p), to najpierw wyświetlony zostanie tekst pierwszego akapitu, potem obraz, a za nim tekst drugiego akapitu (patrz wydruk 5.1 i rysunek 5.1).
Jeśli obraz się nie pojawia, sprawdź poprawność podanej nazwy, a jeśli plik nie znajduje się w tym samym katalogu co strona, poprawność ścieżki dostępu.
Wydruk 5.1. Wstawiamy obrazy
<html>
<head>
<title>Zwierzaki</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<!-- to jest pierwszy akapit tekstu -->
<p><b>Lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i <b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>Felidae</i>). Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>, <b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p>
<!--tu wstawimy obraz-->
<img src="images/lampart.gif">
<!-- to jest drugi akapit tekstu -->
<p><b>Kot domowy</b> najprawdopodobniej pochodzi od dwóch gatunków: od <b>kota nubijskiego</b> (<i>Felis silvestris lybica</i>) i od <b>azjatyckiego kota stepowego</b> (<i>Felis silvestris ornata</i>).
<br><br>Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p>
</body>
</html>
Rys. 5.1.
Obraz wstawiono między dwoma akapitami tekstu
Skąd wziąć obrazy? Poszukaj ich w swoich zasobach, w sieci (pamiętając o prawach autorskich!) lub zeskanuj coś – obrazy powinny być w formacie GIF lub JPEG (innymi słowy rozszerzenie nazwy pliku powinno być .gif lub .jpg). Zapisz je w tym samym katalogu, w którym zapisany jest plik html zawierający Twoją stronę – to uprości znacznie definiowanie atrybutu src lub w osobnym katalogu, podrzędnym względem katalogu przechowującego pliki Twojej strony WWW (patrz informacja zamieszczona powyżej).
Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest format GIF (Graphics Interchange Format). Obrazy GIF są interpretowane niemal przez wszystkie typy przeglądarek (oczywiście zawsze są wyjątki).
Obrazy GIF najbardziej nadają się do szkiców i prostych ilustracji (do fotografii stosuj format JPEG, o którym później). Format GIF pozwala również wybrać liczbę kolorów. Pamiętaj, że im więcej kolorów, tym większy plik. Pliki GIF można jednak poddawać kompresji. Inna zaleta formatu GIF to możliwość zdefiniowania obrazu jako przeźroczystego.
Drugim na liście formatów plików graficznych stosowanych w Internecie jest format JPEG (Joint Photographics Experts Group). Format JPEG to najlepszy wybór dla prezentacji fotografii. Stosowany do szkiców i prostych ilustracji spowoduje pojawienie się na obrazach rozmyć (naszą one nazwę artefaktów), z których na pewno nie byłbyś zadowolony, oraz zupełnie zbędny przyrost wielkości pliku. Za to fotografie zapisane w formacie JPEG wyglądają wspaniale.
Sam obraz, nawet najwspanialszy, to za mało. Musisz pomyśleć o tych, którzy wyłączyli opcję ładowania obrazów oraz tych, choć nielicznych, którzy nie korzystają z przeglądarek graficznych. Jeśli wstawiasz w swoim dokumencie obrazy, powinieneś zaopatrzyć je w tekst alternatywny. Informuje on użytkowników o treści obrazu, jeśli przeglądarka z jakichś względów go nie wyświetla. Strona pozbawiona grafiki straci niewątpliwie na atrakcyjności, ale znacznie ważniejsze jest to, że nie ucierpi przekaz informacji. Choć oglądający Twoją stronę nie będą obrazów widzieć, dowiedzą się przynajmniej co przedstawiają.
Dodanie tekstu alternatywnego umożliwia atrybut alt znacznika <img>. Atrybut ten działa w ten sposób, że wstawia na miejsce obrazu coś, co jest go w stanie zastąpić w tych przeglądarkach, które nie mogą go obsłużyć (patrz rysunek 5.2) . Tekst ten jest przydatny także wówczas, gdy przeglądarka wyświetla obrazy – nie zawsze bowiem są one oczywiste dla oglądającego (czy ktoś sam domyśli się, że zwierzak na obrazie to Twoja maskotka?).
Rys. 5.2.
Jeśli przeglądarka nie może wyświetlić obrazu, zastępuje go tekstem alternatywnym
Aby zaopatrzyć obraz w tekst alternatywny, wyświetl kod źródłowy tworzonej strony w oknie edytora – możesz skorzystać z przykładu zaprezentowanego na wydruku 5.1. Zdefiniuj tekst alternatywny opisujący obraz i dodaj do znacznika <img> atrybut alt. Przypisz mu jako wartość tekst alternatywny: <img src="images/lampart.gif" alt=”To jest mój malutki kotek :)”>.
Zapisz plik i zobacz jak wygląda w przeglądarce (patrz rysunek 5.3).
Rys. 5.3.
Obraz zaopatrzono w tekst alternatywny
Tekst alternatywny pojawi się nad obrazem, gdy przesuniesz nad niego wskaźnik myszki.
Wróćmy do naszej strony testowej o zwierzakach i dodajmy nagłówki anonsujące omawianą tematykę. Duże zwierzaki prezentowane będą z pomocą nagłówka h1, a dla małych zarezerwujemy nagłówek h2. Aby prezentacja lepiej przemawiała do wyobraźni, oprócz samego tekstu, umieścimy w elementach h1 i h2 obrazy.
Wyświetl kod źródłowy tworzonej strony w oknie edytora. Umieść znaczniki <img SRC="url"> w obrębie elementów h1 i h2. Na wydruku 5.2 odpowiednie fragmenty kodu zaznaczono czcionką pogrubioną. Zapisz plik i zobacz jak wygląda Twoja strona (patrz rysunek 5.4).
Wydruk 5.2. Wstawiamy obrazy w obszarze nagłówka
<!-- to jest nagłówek poziomu h1, w którym umieszczono obraz-->
<h1 align="center"><img src="images/lampart.gif" alt="Lampart" width="75" height="100">Koty duże</h1>
<!-- to jest pierwszy akapit tekstu i elementy formatowania-->
<p><b>Lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i <b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>Felidae</i>). Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>, <b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych
obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p>
<!—tu wstawimy linię poziomą-->
<hr>
<!-- to jest nagłówek poziomu h2, w którym umieszczono obraz-->
<h2 align="center"><img src="images/kot.gif" alt="Kotek" width="75" height="75"> Koty małe</h2>
<!-- to jest drugi akapit tekstu i elementy formatowania-->
Rys. 5.4.
Obrazy umieszczono w nagłówkach
Jeśli chcesz wstawić obraz w odrębnym akapicie, umieść znacznik <img> między znacznikami <p> </p>:
<p><img src="images/lampart.gif" alt=”To jest mój malutki kotek :)”></p>.
Obraz może się także pojawić w akapicie zawierającym tekst. Jest wówczas traktowany dokładnie tak samo jak sam tekst. Jeśli chcesz skorzystać z tej opcji, musisz zastanowić się nad kwestią wyrównania obrazu względem otaczającego tekstu.
Korektę umiejscowienia obrazu w obszarze tekstu umożliwia atrybut align. Sprawdźmy jego działanie na prostych przykładach. Na wydruku 5.3 znajdziesz akapity tekstu, w których wstawiono element img stosując do niego atrybut align z różnymi wartościami: bottom, middle i top. Kontrolują one pionowe położenie obrazu względem tekstu, który znajduje się w tym samym wierszu co obraz. Przeanalizuj ten kod i porównaj z zaprezentowanymi na rysunku 5.5 efektami działania.
Przećwicz sam wyrównywanie obrazów w tekście – wyświetl kod źródłowy tworzonej strony w oknie edytora, wstaw element img w tekście akapitu, dodaj do znacznika <img> atrybut align i przypisz mu różne wartości.
Wydruk 5.3. Wyrównujemy obraz względem tekstu otaczającego
<title>Sposoby wyrównania obrazu względem tekstu</title>
<p>
Obraz
<img src ="images/kot.gif"
align="bottom" width="90" height="75">
w obrębie tekstu.
</p>
align="middle" width="90" height="75">
align="top" width="90" height="75">
w obrębie tekstu
<p>Oto domyślny sposób wyrównania - odpowiada on wartości bottom:</p>
width="90" height="75">
Obraz przed tekstem.
Obraz za tekstem
Rys. 5.5.
Oto różne sposoby wyrównywania obrazu względem otaczającego tekstu
Sposób wyrównania obrazu względem marginesu także kontroluje się za pomocą atrybutu align. Jeśli nadasz mu wartość left, obraz zostanie wyrównany do lewego marginesu, jeśli right, przesunięty zostanie do prawego marginesu. Innymi słowy te dwie wartości umożliwiają określenie relacji między obrazem i tekstem. Jeśli obraz po lewej stronie, to tekst po prawej i odwrotnie. Tę relację określa się też mianem obłamywania tekstu.
Możesz też wymusić umieszczenie tekstu pod obrazem – skorzystaj w tym celu z atrybutu clear elementu br i przypisz mu wartość all. Szczegóły tej operacji poznasz analizując wydruk 5.4, a efekty zobaczysz na rysunku 5.6.
Wydruk 5.4. Wyrównujemy obraz względem marginesów
<title>Sposoby wyrównania obrazu względem marginesu</title>
<img src="images/kot.gif" alt="Kot" width="90" height="75" align="left">Ten tekst pojawi się z prawej strony obrazu,
który zostanie wyświetlony przy lewym marginesie.
<br>
<img src="images/kot.gif" alt="Kot" width="90" height="75" align="right">Ten tekst pojawi się z lewej strony obrazu,
który zostanie wyświetlony przy prawym marginesie.
<img src="images/kot.gif" alt="Kot" width="90" height="75" align="left"><br clear="all">Aby wymusić umieszczenie tekstu pod obrazem, skorzystaj z atrybutu <i>clear</i> elementu br i przypisz mu wartość <i>all</i>, tak jak w tym przypadku.
Rys. 5.6.
Oto różne sposoby wyrównywania obrazu względem marginesów
Jeśli uważnie analizowałeś kod z wydruków 5.3 i 5.4, zauważyłeś zapewne, że w znaczniku img znajdują się pewne dodatkowe atrybuty, o których nie było jeszcze mowy. To atrybuty width i height – definiują one szerokość i wysokość obrazu. Wartości tych atrybutów podaje się pikselach lub w procentach wymiarów oryginalnych obrazu. W tej przykładowej definicji znacznika <img>:
<img src="images/kot.gif" alt="Kot" width="90" height="75" align="right">
rozmiary obrazu zdefiniowano w pikselach. Na podstawie kodu z wydruku 5.5 i rysunku 5.7 możesz prześledzić, w jaki sposób ustawienia takie jak width i height wpływają na sposób prezentacji obrazu.
Wydruk 5.5. Dostosowujemy rozmiar obrazu
<title>Dostosowywanie rozmiarów obrazu</title>
<p>Tu szerokość i wysokość są równe 40:</p>
<img src="images/kot.gif" alt="Kot"
width="40" height="40">
<p>Tu szerokość i wysokość są równe 80:</p>
width="80" height="80">
<p>Tu szerokość i wysokość są równe 140:</p>
width="140" height="140">
...
kicaniec