Niemal wszystkie współczesne witryny WWW zawierają elementy graficzne. Ikony, tła, fragmenty obramowań, ilustracje czy elementy tworzące menu to tylko niektóre z licznych przykładów dekoracji pojawiających się na stronach WWW. Artykuł omawia podstawowe wiadomości dotyczące umieszczania ilustracji na stronach WWW.
Obrazy cyfrowe są zapisywane w wielu różnych formatach. Najbardziej popularnymi formatami są wprawdzie JPEG oraz GIF, jednak w zależności od stosowanego oprogramowania w naszym systemie mogą pojawiać się dziesiątki innych formatów, takich jak BMP, XCF, PSD, CDR, PNG czy TIFF. Format zapisu pliku graficznego możemy odgadnąć na podstawie rozszerzenie nazwy.
Na stronach WWW możemy umieszczać trzy rodzaje plików graficznych: .gif, .jpg oraz .png. Pozostałych plików nie należy stosować.
Jeśli chcemy plik zapisany w innym formacie, na przykład BMP umieścić na stronie WWW, należy go najpierw przekonwertować. Niemal wszystkie programy do obróbki plików graficznych umożliwiają dokonanie konwersji formatu. Na przykład w Gimpie wystarczy otworzyć plik .bmp, po czym wykonać operację Zapisz jako .... Jeśli podamy nazwę zakończoną rozszerzeniem .jpg, wówczas plik zostanie zapisany w formacie JPEG. Taki obraz możemy umieścić na stronie WWW.
Umieszczenie ilustracji na stronie WWW rozpoczynamy oczywiście od przygotowania pliku graficznego. Może to być zdjęcie lub rysunek, czy bardziej skomplikowana kompozycja stanowiąca połączenie kilku elementów wzbogaconych o efekty specjalne. Gotową ilustrację zapisujemy w jednym z formatów .jpg, .gif lub .png.
Gdy obraz jest gotowy, możemy przystąpić do umieszczenie go na stronie WWW. Witryna, na której umieścimy ilustrację będzie się składała z dwóch plików: jednym z nich będzie plik .html zawierający opis strony w języku HTML, drugim - plik graficzny.
Jeśli wykonamy stronę, na której umieścimy dziesięć ilustracji, wówczas witryna taka będzie się składała z jedenastu plików: dziesięciu ilustracji oraz jednego pliku .html.
Po wykonaniu strony nie możemy usunąć plików graficznych. Do prawidłowego wyglądu strony potrzebne są zarówno plik o rozszerzeniu .html jak i pliki graficzne. Plik .html zawiera jedynie informacje, w którym miejscu należy umieścić ilustrację. Sama ilustracja pochodzi z pliku graficznego.
Strony WWW różnią się pod tym względem od wielu innych formatów. Zarówno dokumenty edytora Word, pliki PDF czy dokumenty tworzone w pakiecie Open Office składają się z pojedynczego pliku (nawet, jeśli zawierają ilustracje). W przypadku strony WWW musimy pamiętać, że strona zawierająca ilustracje wymaga osobnych plików graficznych. Nie istnieje metoda osadzenia plików graficznych wewnątrz dokumentu HTML.
Do umieszczania ilustracji na stronie WWW służy element IMG. Element ten posiada dwa obowiązkowe atrybuty: src oraz alt. Atrybut src wskazuje plik graficzny, natomiast atrybut alt zawiera opis ilustracji. Opis ten jest skierowany do osób, które z jakichkolwiek powodów nie zobaczą ilustracji. Powodów, dla których oglądanie obrazów jest niemożliwe może być kilka: internauta może być niewidomy, przeglądarka, jakiej używa może nie umożliwiać wyświetlania grafik, wreszcie oprogramowanie może ignorować pliki graficzne z powodu ograniczeń transferu danych. Pamiętajmy o dołączeniu do każdego pliku graficznego krótkiego opisu będącego wartością atrybutu alt. W wielu przeglądarkach wartość atrybutu alt jest wyświetlana po wskazaniu obrazu kursorem myszy.
Jeśli zdjęcie, które chcemy umieścić na stronie WWW, przedstawia kotka i jest zapisane w pliku kot.jpg, wówczas w odpowiednim miejscu strony umieszczamy kod:
<IMG src="kot.jpg" alt="Zdjęcie kotka">
Zwróćmy uwagę na fakt, że element IMG jest elementem pustym. Oznacza to, że nie wolno go zamykać. Nigdy w kodzie nie umieszczamy więc znacznika </IMG>. Znacznik taki nie istnieje!
W programie NotH do wpisywania elementu IMG korzystamy ze skrótu Ctrl+P+I.
Zanim przejdziemy do wykonania ćwiczeń, zatrzymajmy się na chwilę, by przedyskutować ewentualne problemy, jakie mogą wystąpić.
Pierwszym, często spotykanym błędem, jest literówka scr. Atrybut src jest skrótem angielskiego wyrazu source oznaczającego źródło. Błędu tego unikniemy stosując wspomniany skrót klawiszowy.
Drugim zmartwieniem nękającym początkujących webmasterów są nazwy plików. Problemy z nazwami plików są dość zdradliwe. Ujawniają się zazwyczaj dopiero po przegraniu witryny na serwer. Skąd one wynikają? Z różnic pomiędzy systemami rodziny Windows, a systemami unixowymi. W systemie Windows nazwy plików mogą zawierać duże i małe litery. Jednakże litery te nie są odróżniane. Jeśli plik nazwiemy Kot.jpg (litera K jest duża), wtedy do pliku takiego możemy się odwoływać podając nazwę kot.jpg, KOT.jpg, kot.JPG czy jakąkolwiek inną kombinację liter dużych i małych. Powyższe stwierdzenie "odwoływać" dotyczy dowolnej aplikacji działającej w systemie nie tylko stron WWW i przeglądarki. W szczególności, na stronie WWW możemy umieścić podane zdjęcie stosując dowolny z poniższych zapisów:
<IMG src="Kot.jpg" alt="Zdjęcie kota"> <IMG src="KOT.jpg" alt="Zdjęcie kota"> <IMG src="kot.JPG" alt="Zdjęcie kota">
Dopóki pracujemy w systemie Windows, dopóty wszystko działa poprawnie. Jeśli natomiast witrynę przekopiujemy na serwer pracujący w systemie rodziny unix, np. Linux, wtedy spośród powyższych odwołań poprawne będzie jedynie:
<IMG src="Kot.jpg" alt="Zdjęcie kota">
Dzieje się tak dlatego, że w systemach unixowych wielkość liter występujących w nazwach plików jest odróżniana. W jednym folderze możemy zapisać pliki kot.jpg, Kot.jpg oraz KOT.jpg. Jeśli plik nazywa się Kot.jpg, to w kodzie HTML musimy używać nazwy Kot.jpg. Żadna inna nazwa, np.:
<IMG src="kot.jpg" alt="Zdjęcie kota"> <IMG src="KOT.jpg" alt="Zdjęcie kota"> <IMG src="kot.JPG" alt="Zdjęcie kota">
nie da oczekiwanego efektu!
Jak się w tym wszystkim połapać? Czy musimy uczyć się nazw plików graficznych występujących na stronie WWW na pamięć? Oczywiście nie. Wystarczy stosować jasne reguły nazywania plików.
Pamiętajmy o tym, by w nazwach plików używać jedynie małych liter alfabetu łacińskiego, cyfr, minusów oraz znaków podkreślenia. Szczególną uwagę należy zwrócić na unikanie polskich znaków, spacji oraz wielkich liter. W ten sposób wyeliminujemy kłopoty dotyczące nazw plików.
Przykładowymi nazwami, które spełniają powyższe reguły są:
kot.jpg zachod_slonca.jpg trojkat-rownoboczny.png strona_glowna_logo.gif foto-034.jpg
Niestety, pracując w systemie Windows nie widzimy faktycznych liter występujących w nazwie pliku. Jeśli plik nazwiemy lis.JPG, to eksplorator systemu Windows wyświetli tenże plik jako lis.jpg. Wielkość liter występujących w nazwie możemy oczywiście zmienić wykonując operację Zmień nazwę. Nową nazwę pliku należy napisać małymi literami.
Wielkość liter w nazwach plików możemy zobaczyć na przykład w programie WinSCP. Program ten służy do przegrywania plików na serwer.
A zatem po ukończeniu witryny kopiujemy pliki na serwer, po czym sprawdzamy wygląd. Jeśli którykolwiek z plików graficznych nie pojawia się na stronie, wówczas należy się przyjrzeć wielkości liter w nazwie pliku, oraz należy przeanalizować kod HTML, szczególnie atrybuty src elementów IMG.
Pierwsze ćwiczenia pokazują, w jaki sposób umieścić na stronie WWW jedną lub więcej ilustracji. Każde z poniższych ćwiczeń należy wykonywać w osobnym folderze.
Wykonaj stronę WWW, która przedstawia zdjęcie zapisane w pliku zalew.jpg. Witryna została przedstawiona na rysunku 1.
Rys. 1. Zdjęcie Zalewu zemborzyckiego umieszczone na stronie WWW
W kodzie witryny umieszczamy nagłówek H1 zawierający tytuł, a zaraz pod nim sekcję DIV. W sekcji tej umieszczamy element IMG:
<H1>Zalew zemborzycki</H1> <DIV> <IMG src="zalew.jpg" alt="Zdjęcie zalewu zemborzyckiego"> </DIV>
Element IMG musi być umieszczony wewnątrz elementu blokowego, na przykład DIV, P lub TD. Nie można umieszczać elementów IMG bezpośrednio w elemencie BODY:
PRZYKŁAD NIEPOPRAWNY <BODY> <IMG src="zalew.jpg" alt="Zdjęcie..."> </BODY>
Gdy strona jest gotowa, zapisujemy ją w pliku index.html. Otrzymana witryna składa się z dwóch plików: index.html oraz zalew.jpg. Plik o rozszerzeniu .html zawiera opis wyglądu strony, zaś plik o rozszerzeniu .jpg zawiera zdjęcie, które zostało umieszczone na stronie WWW elementem IMG. Oba pliki muszą znajdować się w tym samym folderze.
Przygotuj stronę WWW przedstawiającą rysunki zapisane w plikach p1.png oraz p2.png.
Rys. 2. Rysunki w formacie png umieszczamy w identyczny sposób jak pliki jpg
Umieszczanie na stronie WWW ilustracji w formacie PNG niczym nie różni się od umieszczania ilustracji JPG. W sekcji DIV wstawiamy dwa elementy IMG:
<IMG src="p1.png" alt="Rysunek przedstawiający ptaka"> <IMG src="p2.png" alt="Drugi rysunek przedstawiający ptaka">
W zależności od szerokości okna przeglądarki, rysunki będą znajdowały się obok siebie lub - w przypadku, gdy okno przeglądarki będzie zbyt wąskie - jedno pod drugim.
Gotowa witryna składa się tym razem z trzech plików: index.html, p1.png oraz p2.jpg. Wszystkie trzy pliki muszą znajdować się w tym samym folderze.
Przygotuj stronę WWW prezentującą sześć modeli lokomotyw. Zdjęcia są zapisane w plikach o nazwach train1.jpg, ... train6.jpg.
Rys. 3. Storna WWW może zawierać wiele ilustracji
Tym razem zdjęcia umieszczamy wewnątrz akapitu:
<P> <IMG src="train1.jpg" alt="Model lokomotywy"> ... <IMG src="train6.jpg" alt="Model lokomotywy"> </P>
Podobnie jak w poprzednim przykładzie, ułożenie zdjęć zależy od szerokości okna przeglądarki.
Tym razem rozwiązanie składa się aż z siedmiu plików: jednego pliku .html oraz z sześciu ilustracji. Podobnie jak poprzednio, wszystkie pliki muszą się znajdować w tym samym folderze.
Druga seria ćwiczeń pokazuje, w jaki sposób dodać ilustracje do dokumentów zawierających teksty.
Przygotuj witrynę przedstawiającą tekst i tabulaturę piosenki pt. Hoochie Coochie Man oraz zdjęcia Muddy'ego Watersa.
Rys. 4. Witryna, na której tekst przeplata się z ilustracjami
Stronę rozpoczynamy od nagłówka H1 zawierającego napis Muddy Waters. Następnie umieszczamy akapit zawierający pierwsze ze zdjęć:
<P><IMG src="muddy1.jpg" alt="Fotografia Muddiego Watersa"></P>
Pod fotografią umieszczamy nagłówek H2 zawierający tytuł piosenki, po którym następuje element PRE zawierający tekst i tabulaturę piosenki. Stronę kończymy drugim elementem IMG:
<P><IMG src="muddy2.jpg" alt="Fotografia Muddiego Watersa"></P>
Przygotuj witrynę na temat języka Logo. Wykorzystaj ilustracje zapisane w plikach fdrt.jpg oraz turtle.jpg.
Rys. 5. Witryna na temat języka Logo
W kodzie strony umieszczamy, pod nagłówkiem, akapit:
<P> Język programowania Logo ... </P>
Pod pierwszym akapitem umieszczamy sekcję DIV, która zawiera ilustrację:
<DIV> <IMG src="fdrt.jpg" alt="Działanie komend FD oraz RT"> </DIV>
Następnie dodajemy drugi akapit, pod którym umieszczamy sekcję DIV prezentującą drugą z fotografii.
Przygotuj artykuł na temat programu C.a.R w postaci strony WWW. Artykuł jest zapisany w formacie tekstowym, zaś wszystkie ilustracje są zapisane w plikach JPG.
Rys. 6. Ilustracje do zadań z geometrii opatrzone podpisem
Przygotowanie artykułu wymaga dodania elementów P definiujących kolejne akapity oraz nagłówków ustalających tytuł i kolejne części artykułu. Gdy akapity i nagłówki są już dodane, umieszczamy w dokumencie ilustracje. Pod akapitem omawiającym treść zadania pierwszego umieszczamy następującą sekcję DIV:
<DIV> <IMG src="1_400.jpg" alt="Ilustracja do zadania pierwszego."> <P class="podpis"><STRONG>Rys. 1.</STRONG> Konstrukcja kwadratu o zadanym boku. </P> </DIV>
Podobnie postępujemy z pozostałymi zadaniami.
Kolejnym etapem są obrazy będące hiperłączami. Kliknięcie obrazu powoduje otwarcie osobnego dokumentu.
Przygotuj stronę przedstawiającą dwie miniaturowe ilustracje sieci energetycznej. Niech każda z ilustracji będzie hiperłączem do ilustracji o dużych rozmiarach. Miniaturowe ilustracje są zapisane w plikach mini-linia1.jpg oraz mini-linia2.jpg, natomiast duże obrazy nazywają się linia1.jpg i linia2.jpg.
Rys. 7. Ilustracje będące hiperłączami
W celu umieszczenia na stronie WWW pierwszej miniaturki, stosujemy następujący element IMG:
<IMG src="mini-linia1.jpg" alt="Zdjęcie linii energetycznej.">
Jeśli teraz ten element ma stać się hiperłączem, to musimy go otoczyć znacznikami <A href=""> oraz </A>. Ponieważ aktywacja hiperłącza ma przenosić internautę do pliku przedstawiającego dużą fotografię, zatem kompletny kod hiperłącza będzie następujący:
<A href="linia1.jpg"> <IMG src="mini-linia1.jpg" alt="Zdjęcie linii energetycznej."> </A>
Drugie hiperłącze wykonujemy podobnie. Skończona witryna składa się z pięciu plików: index.html, mini-linia1.jpg, mini-linia2.jpg, linia1.jpg oraz linia2.jpg. Wszystkie pliki muszą znajdować się w tym samym folderze.
Zauważmy, że obrazy będące hiperłączami są otoczone niebieskim obramowaniem.
Przygotuj artykuł na temat definiowania miejsc geometrycznych punktów w postaci strony WWW. Tekst artykułu jest zapisany w formacie tekstowym. Ilustracje do zadań opisanych w artykule są zapisane w plikach graficznych o rozmiarach 400x300 pikseli oraz 800x600. Pierwsza cyfra nazwy pliku mówi o numerze zadania. Na przykład ilustracje do zadania 3 zapisano w plikach 3_400.jpg i 3_800.jpg, natomiast ilustracje do zadania 7 stanowią pliki 7_400.jpg i 7_800.jpg.
Dokument przygotuj w takiej postaci, by w treści artykułu znajdowały się ilustracje o szerokości 400 pikseli, będące hiperłączami do ilustracji o szerokości 800 pikseli.
Rys. 8. Miniaturowe ilustracje-hiperłącza zawarte w treści artykułu
Pod odpowiednimi akapitami tekstu umieszczamy hiperłącza zawierające obrazy. Pod akapitem opisującym zadanie pierwsze należy umieścić kod:
<DIV> <A href="1_800.jpg"> <IMG src="1_400.jpg" alt="Ilustracja do zadania pierwszego."> </A> </DIV>
Podobnie jak poprzednio, tak i tym razem ilustracje będące hiperłączami są otoczone niebieskim obramowaniem.
Dane są pliki p1.jpg, p2.jpg, ..., p10.jpg. Przygotuj "tunel" prezentujący wszystkie dziesięć ilustracji. Każda strona tunelu powinna prezentować pojedyncze zdjęcie będące hiperłączem do kolejnej strony tunelu.
Rys. 9. Tunel
Wykonanie ćwiczenia wymaga przygotowania dziesięciu stron WWW. Na każdej z nich umieścimy jeden obraz będący hiperłączem. Niech strony nazywają się kolejno 1.html, 2.html, ..., 10.html. Na stronie 1.html mamy umieścić rysunek p1.jpg. W tym celu wprowadzamy na stronie kod:
<IMG src="p1.jpg" alt="Wojna">
Obraz ten ma być hiperłączem do strony 2.html. Zatem dodajemy element A:
<A href="2.html"> <IMG src="p1.jpg" alt="Wojna"> </A>
Powyższy element A umieszczamy wewnątrz akapitu. Wykonując strony z tego ćwiczenia zastosujmy zewnętrzne arkusze stylów. W nagłówku strony, poniżej znacznika META ustalającego kodowanie strony wprowadźmy odwołanie do zewnętrznych arkuszy stylów:
<LINK rel="stylesheet" href="style.css" type="text/css">
W programie NotH służy do tego skrót Ctrl+S+Z.
Następnie utwórzmy plik o nazwie style.css, w którym umieszczamy następujące definicje stylów:
BODY { text-align : center; background : rgb(0,0,0); } IMG { border : none; }
W ten sposób wszystkie strony będą miały czarne tło, a ilustracje będą wycentrowane na stronie. Ponadto obrazy będące hiperłączami stracą niebieskie obramowanie.
Rozwiązanie tego ćwiczenia składa się z 21 plików: dziesięciu plików .html, dziesięciu plików .jpg oraz jednego pliku .css.
Kolejnym zagadnieniem są tabele zawierające fotografie. Dzięki tabelom możemy zaplanować układ fotografii na stronie WWW.
Przygotuj witrynę przedstawiającą cztery fotografie drzew. Zdjęcia umieść w tabelce o wymiarach 2x2.
Rys. 10. Tabelka zawierająca zdjęcia
Po wykonaniu tabeli 2x2 w komórkach umieszczamy elementy IMG:
<TD> <IMG src="buk.jpg" alt="Buk"> <BR>BUK </TD>
Po każdym elemencie dodajemy znak złamania wiersza i podpis - nazwę drzewa.
Przygotuj stronę WWW przedstawiającą chwyty gitarowe. Czternaście ilustracji zapisanych w plikach o nazwach a-mol.jpg, a-dur.jpg, ..., itd. umieść w tabelce o wymiarach 4x4.
Rys. 11. W pustych komórkach umieszczamy twarde spacje
Wykonanie ćwiczenia rozpoczynamy od przygotowania tabelki. Następnie w pierwszych trzech wierszach umieszczamy podpisane fotografie stosując elementy IMG oraz BR:
<TD> <IMG src="a-dur.jpg" alt="A-dur"> <BR>A-dur </TD>
Ponieważ dysponujemy czternastoma plikami, zaś tabela posiada szesnaście komórek, zatem dwie komórki musimy pozostawić puste. W komórkach tych umieszczamy twarde spacje:
<TD> </TD>
Przygotuj stronę WWW przedstawiającą pięć ilustracji do książki "O czym szumią wierzby".
Rys. 12. Zagnieżdżone tabele ułatwiają rozkład ilustracji na stronie
Ilustracji jest pięć. Ułożymy je stosując zagnieżdżone tabele. Zewnętrzna tabela ma jeden wiersz i dwie kolumny (1x2). Wewnątrz lewej komórki umieszczamy tabelę o jednej kolumnie i dwóch wierszach (2x1). Natomiast w prawej komórce zewnętrznej tabeli umieszczamy tabelę o trzech wierszach i jednej kolumnie (3x1). Rysunek 12 przedstawia strukturę trzech przygotowanych tabel oraz gotową witrynę.
Ostatnim krokiem jest oczywiście umieszczenie w komórkach wewnętrznych tabel ilustracji.
Przygotuj stronę prezentującą tekst piosenki oraz zdjęcia z westernu "Rio Bravo".
Rys. 13. Drugi przykład zagnieżdżania tabel
Do rozłożenia tekstu i ilustracji ponownie wykorzystamy zagnieżdżone tabele. Tabela zewnętrzna posiada jeden wiersz i dwie kolumny. W lewej komórce tabeli zewnętrznej umieszczamy tekst piosenki. Natomiast w komórce prawej zagnieżdżamy dodatkową tabelę. Tabela ta posiada trzy wiersze i jedną kolumnę. W jej komórkach umieszczamy fotografie.
Przygotuj stronę WWW przedstawiającą fotografie samochodów.
Rys. 14. Kilka tabel umieszczonych jedna pod drugą
Fotografie umieszczamy w tabelkach. Osiem fotografii samochodów marki Jeep wędruje do tabeli o wymiarach 2x4. Następna tabela o czterech wierszach i trzech kolumnach zawiera zdjęcia samochodów marki BMW. Ostatnia z tabel zawiera piętnaście fotografii samochodów marki Chrysler. Fotografie umieszczamy w tabeli o wymiarach 3x5.
Zwróćmy uwagę na fotografie samochodów BMW. Tło każdej fotografii samochodów BMW jest białe. W podobny sposób na stronach WWW umieszczamy między innymi ikony. Białe tło strony płynnie przechodzi w białe tło samochodu i na stronie WWW widzimy sam samochód bez żadnego obramowania czy dodatkowych detali, jakie widać na przykład na fotografiach Jeepów.
Ostatnia seria ćwiczeń łączy zagadnienia dotyczące umieszczanie fotografii w tabelach oraz tworzenie hiperłączy.
Przygotuj witrynę przedstawiającą rysunki maszyn. Niezbędne rysunki zapisano w plikach o rozszerzeniu .gif. Każdy rysunek jest zapisany w dwóch wymiarach. Na przykład miniaturowy rysunek koparki jest zapisany w pliku kopara.gif. Ten sam rysunek w większej rozdzielczości znajdziemy w pliku kopara-duza.gif.
Rys. 15. Tabela zawierająca obrazy będące hiperłączami
Najpierw przystępujemy do wykonania tabeli. Struktura tabeli została przedstawiona na rysunku 15. W tabeli o wymiarach 5x5, w komórkach oznaczonych literami X, Y oraz Z, umieszczamy miniaturowe ilustracje maszyn. Do umieszczenia miniaturowego rysunku koparki wykorzystamy kod:
<IMG src="kopara.gif" alt="Koparka">
Rysunek miniaturowy ma być hiperłączem do rysunku o większych wymiarach. Zatem powyższy znacznik IMG przekształcamy w hiperłącze:
<TD> <A href="kopara_duza.gif"> <IMG src="kopara.gif" alt="Koparka"> </A> </TD>
Podobnie postępujemy z pozostałymi rysunkami. Rozwiązanie składa się z jedenastu plików: pięciu dużych rysunków, pięciu miniatur oraz jednego pliku HTML.
Przygotuj witrynę przedstawiającą obrazy Cezanne'a. Dziesięć obrazów jest zapisanych w folderze cezanne. Miniatury obrazów są natomiast zapisane w podfolderze o nazwie 100px. Nazwy miniatur są identyczne jak nazwy plików o większej rozdzielczości.
Rys. 16. Obrazy Cezanne'a
Ćwiczenie to pokazuje, że pliki graficzne nie muszą znajdować się w tym samym folderze co pliki HTML. Dziesięć miniatur umieszczamy w tabeli o dwóch wierszach i pięciu kolumnach. Miniatury pochodzą z folderu cezanne/100px, zatem w komórkach tabeli umieszczamy następujące elementy IMG:
<IMG src="cezanne/100px/cezanne.drinker.jpg" alt="Miniaturka obrazu Cezanne'a">
Ponieważ miniaturowe ilustracje mają być hiperłączami do dużych plików, zatem znacznik IMG umieszczamy wewnątrz elementu A:
<A href="cezanne/cezanne.drinker.jpg"> <IMG ...> </A>
Poprawny wygląd witryny z obrazami Cezanne'a zależy od struktury folderów. Rozwiązanie składa się z 21 plików: jednego pliku HTML, oraz dwudziestu obrazów. W folderze, w którym znajduje się plik HTML musi znajdować się folder cezanne. W folderze tym należy umieścić pliki graficzne o dużej rozdzielczości. Następnie w folderze cezanne umieszczamy podfolder o nazwie 100px. W folderze tym należy umieścić miniaturki obrazów.
Przygotuj stronę WWW przedstawiającą kolejne kroki instrukcji zestawu klocków Lego nr 8425.
Rys. 17. Obrazy o identycznych wymiarach tworzą równomierną tabelę
W tabelce o wymiarach 3x3 umieszczamy ilustracje będące hiperłączmi. Z wróćmy uwagę na równomierne rozłożenie ilustracji widocznych na rysunku 17. Tabela jest symetryczna, każda z komórek ma identyczny rozmiar. Efekt taki osiągniemy, gdy obrazy umieszczone w tabelce mają identyczne wymiary. W ćwiczeniach 1.3 (modele lokomotyw) oraz 5.2 (obrazy Cezanne'a) wyraźnie widać różnice w wymiarach obrazów. Różnice takie pojawiały się również w ćwiczeniach 3.3 (rysunki wojenne) oraz 4.3 (ilustracje do książki "O czym szumią wierzby"). Jednakże rysunki zarówno w ćwiczeniu 3.3 jak i 4.3 różniły się jedynie wysokością. Zatem umieszczenie ich na osobnych stronach (ćw. 3.3) lub w tej samej kolumnie tabeli (4.3) dawało dobry efekt.
Najłatwiej przygotować stronę, gry ilustracje mają identyczne wymiary. W ćwiczeniach 4.1 (zdjęcia drzew), 4.2 (chwyty gitarowe), 4.5 (samochody) oraz 5.3 (Lego 8425) komórki tabel mają identyczne wymiary, dzięki czemu strony wyglądają dość ładnie.
Przygotowując ilustracje do umieszczenia na stronie WWW warto od początku mieć na uwadze wymiar tworzonych grafik. Czasami modyfikacja rozmiaru ilustracji sprowadza się do przeskalowania. Bywa jednak i tak, że musimy zmienić wymiar obrazu. Jeśli nie chcemy utracić proporcji, wówczas konieczne staje się ucięcie fragmentu zdjęcia. Nie zawsze jest to proste. Na przykład przekształcenie ilustracji z ćwiczenia 1.3 (modele lokomotyw) jest dość skomplikowane. Jeśli nie chcemy utracić ani proporcji ani fragmentów lokomotyw to musimy dorysować fragment tła.
Przygotuj witrynę WWW przedstawiającą różne konfiguracje sieci ethernet. Niezbędne ilustracje są zapisane w dwóch folderach. Folder 100x75 zawiera miniatury o rozmiarach 100x75 pikseli, natomiast w folderze 400x300 znajdują się ilustracje o rozmiarach 400x300 pikseli. Nazwy plików w obu folderach są identyczne.
Rys. 18. Menu składające się z tabeli miniaturowych obrazów
Ćwiczenie to jest nieco bardziej skomplikowane od poprzednich. We wszystkich poprzednich ćwiczeniach hiperłącza wskazywały pliki graficzne. Tym razem hiperłącza odwołują się od plików HTML. Wykonanie ćwiczenia polega na przygotowaniu piętnastu plików HTML. Każdy z tych plików będzie zawierał z lewej strony menu ilustracji, a z prawej - jeden z dużych plików graficznych. Rysunek 18 pokazuje wygląd witryny po wybraniu z menu ilustracji pierwszej oraz siódmej.
Przystąpmy do wykonania pierwszego pliku HTML. Plik ten nazwiemy cw01.html. W treści strony umieszczamy tabelę o wymiarach 1x2 (jeden wiersz, dwie kolumny). W lewej komórce umieścimy menu, a w prawej - wybraną dużą ilustrację. Menu składa się z tabeli o pięciu wierszach i trzech kolumnach. W komórkach tabeli menu umieszczamy miniaturowe ilustracje będące hiperłączami. Oto pierwszy wiersz tabeli menu:
<TR> <TD><A href="cw01.html"><IMG src="100x75/cw01.jpg" alt="Ćwiczenie 1"></A></TD> <TD><A href="cw02.html"><IMG src="100x75/cw02.jpg" alt="Ćwiczenie 2"></A></TD> <TD><A href="cw03.html"><IMG src="100x75/cw03.jpg" alt="Ćwiczenie 3"></A></TD> </TR>
Miniaturki pochodzą z folderu 100x75, zaś hiperłącza wskazują pliki HTML. Pozostałe wiersze tabeli menu wyglądają analogicznie.
W prawej komórce dużej tabeli umieszczamy dużą ilustrację:
<TD> <IMG src="400x300/cw01.jpg" alt="Ćwiczenie 01"> </TD>
Na stronie cw01.html umieszczamy dużą ilustrację cw01.jpg. Na stronie cw02.html umieszczamy dużą ilustrację cw02.jpg. Podobnie postępujemy z pozostałymi plikami. Pamiętajmy, że duże ilustracje znajdują się w folderze 400x300. Atrybut src musi zawierać nazwę folderu i nazwę pliku, np. src="400x300/cw01.jpg".
Dodajmy, że menu (czyli tabela 5x3 zawierająca miniaturki-hiperłącza) jest identyczna na każdej z piętnastu stron WWW.
W kodzie stron dodajmy jeszcze odwołanie do zewnętrznych arkuszy stylów:
<LINK rel="stylesheet" href="style.css" type="text/css">
i usuńmy niebieskie obramowanie miniatur wpisując w pliku style.css:
IMG { border: none; }
Rozwiązanie ćwiczenia składa się z piętnastu plików HTML, jednego pliku CSS, piętnastu ilustracji miniaturowych zapisanych w folderze 100x75 oraz piętnastu ilustracji dużych zapisanych w folderze 400x300 (łącznie czterdzieści sześć plików).
Przygotuj stronę WWW na temat bramek logicznych.
Rys. 19. Witryna poświęcona bramkom logicznym
Rozwiązanie ćwiczenia składa się z następujących plików:
Kończąc ćwiczenia dotyczące ilustrowania witryn WWW chciałbym zwrócić jeszcze uwagę na jeden drobiazg. Element IMG w starszych wersjach języka HTML posiadał atrybuty width oraz height. Korzystając z nich, lub z atrybutów width i height występujących w arkuszach stylów możemy zmienić szerokość i wysokość obrazu. Należy unikać takiej metody skalowania, gdyż ściągnięcie takiej "miniaturki" trwa tyle samo, co ściągnięcie dużego obrazu.
Atrybuty width i height pozwalają przeglądarce ustalić rozmiar obrazu przed pobraniem go. Dzięki temu obraz, który jeszcze nie został pobrany zajmuje w oknie przeglądarki swój pełny rozmiar. Ponadto, niekiedy obrazy nie posiadające atrybutów ustalających szerokość i wysokość są urwane. Tendencje takie wykazuje głównie Internet Explorer. Możemy to zaobserwować klikając różne pozycje w menu strony z ćwiczenia 5.4. Odświeżenie strony usuwa wprawdzie błąd, jeśli jednak chcemy uniknąć konieczności odświeżania, to należy użyć atrybutów width i height.