M. Sokół - ABC języka HTML - Rozdział V - Obrazy w dokumencie HTML, ebooki, KURS HTML
[ Pobierz całość w formacie PDF ]
Rozdział 5.
Obrazy w dokumencie HTML
Gdzie wstawiać obrazy?
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.
Jaką postać ma element img?
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).
Co jest wartością atrybutu src?
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ć
. 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.
Jak przeglądarka zinterpretuje znacznik <img>?
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
Jaki powinien być format wstawianych obrazów?
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).
Co to jest GIF?
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.
Co to jest JPEG?
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.
Czy sam obraz wystarczy?
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ą.
Jak dodać tekst alternatywny?
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.
Jak wstawić obrazy w nagłówkach?
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
<html>
<head>
<title>Zwierzaki</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<!-- to jest nagłówek poziomu h1, w którym umieszczono obraz-->
[ Pobierz całość w formacie PDF ]