R 07 07, HTML
[ Pobierz całość w formacie 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 (
), Paint Shop Pro (
), Corel
Draw (
), 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
(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
w
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:
<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
ś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.
-
i-
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-
c
ze słowo „IMAGE”. Atrybut ten zawiera ciąg znaków, który
miast obrazka:
należy wyświetlić za-
<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 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-
ni
ch sześciu rozdziałów, powinieneś bez problemów sam stworzyć t
tualny wygląd (rysunek 7.1).
aką stronę
. Oto więc
je
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>
e>
z
</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>
<li>Sb & Nd 17.00 - 3.00</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>
w
enia nie sta-
n
owią odrębnych elementów tekstowych, muszą więc ko
nych znacz-
ników, takich jak akapity czy nagłówki).
<P><IMG SRC="house.jpg" alt="Pałac Strachu Halloween" /></P>
<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
10
Jeżeli obraz się nie pojawi (kiedy przegl
[ Pobierz całość w formacie PDF ]