Grafika

O rozdziale: Trudno sobie wyobrazić strony internetowe bez grafiki, gdyż często jest ona z jednej strony niezbędnym elementem informacyjnym, z drugiej zaś nadaje stronom efektowny wygląd, jeśli tylko autor umie nią zręcznie operować. W rozdziale prezentujemy niebędne techniki dotyczące wstawiania ilustracji.

Uwagi ogólne

Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w Sieci. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Wiele ciekawych efektów graficznych można dziś osiągnąć za pomocą stylów, bez udziału samej grafiki.

W Internecie zostały przyjęte trzy podstawowe standardy graficzne - GIF, JPG, a w ostatnich latach także PNG (Portable Network Graphics) - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Warto też zwrócić uwagę na fakt, że Internet Explorer akceptuje formaty BMP i WMF - nie powinno się ich jednak umieszczać w Internecie, ale mogą być z powodzeniem stosowane w archiwach HTML Help opartych na kontrolce Internet Explorera. W ostatnim okresie spotyka się też grafiki w wektorowym, opartym na XML formacie SVG (Scalable Vector Graphics), aczkolwiek na razie (2006 r.) obsługuje je natywnie jedynie Opera, zaś inne przeglądarki wymagają zewnętrznych wtyczek.

Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać:

<img src="plik_graficzny" alt="nazwa alternatywna">

Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazwą alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki. Efekt zastosowania konstrukcji jest następujący:

Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu atrybutów, które zmienią położenie, wielkość i inne cechy obrazka.

Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane, np.

<img src="../grafika/sufinka.jpg" width="342" height="353" alt="Sufi w tulipanach">

Jeśli z jakichś powodów zależy nam na deformacji oryginalnych wymiarów, możemy je ręcznie zmienić, podając arbitralnie inne rozmiary, na przykład:

<img src="../grafika/sufinka.jpg" height="150" width="200" alt="Sufi w tulipanach">

Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarką. Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy również o malejącej rozdzielczości obrazka na ekranie przeglądarki.

Informacje o IMG

Obramowania i odstępy

W starszych wersjach HTML stosowano atrybut border, za pomocą którego nadawano grafice obwódkę. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS, o znacznie większych możliwościach - obramowanie border lub obwódka outline.

<img src="../grafika/sufinka.jpg" width="171" height="177" alt="Sufi w tulipanach" style="border: 5px red solid; ">

<img src="../grafika/sufinka.jpg" width="171" height="177" alt="Sufi w tulipanach" style="outline: 5px green double; ">

Poprzednio stosowano atrybuty hspace i vspace, za pomocą których tworzono dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami. Obecnie są to atrybuty przestarzałe, które zastąpiono stylami CSS - marginesem globalnym (margin) lub cząstkowym (margin-top, margin-bottom, margin-left, margin-right).

<img src="sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="margin-left: 50px; margin-right: 50px; ">

Ten tekst jest odsunięty od obrazka o 50 pikseli w poziomie.

A ten o 100 pikseli

<img src="sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="margin-top: 50px; margin-bottom: 50px; ">

Pozycja grafiki

W starszych wersjach HTML stosowano atrybut align (left, center, right), za pomoca którego ustawiano grafikę przy lewym lub prawym marginesie, względnie na środku wiersza. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS.

Grafika jako blok

Przede wszystkim zwróć uwagę, że grafika nie jest elementem blokowym, zajmującym na wyłączność miejsce w wierszu, lecz tzw. zastępowanym, i możliwe jest ustawienie kilku grafik obok siebie.

Chcąc umieścić grafikę jako samodzielny element w wierszu, można by ją umieścić w elemencie blokowym div, ustawionym po lewej czy prawej stronie lub na środku wiersza.

<div style="text-align:center; ">
<img src="../grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach">
</div>

Jeśli nie zapewnisz osobnego miejsca grafice, sąsiadująca z nią inna grafika zostanie ustawiona w tym samym wierszu.

Możesz też nadać grafice blokowy charakter, jawnie zmieniając domyślny sposób jej wyświetlania, korzystając z polecenia stylów display:block;

<img src="../grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="display:block; ">

Pozycjonowanie poziome

Grafikę często umieszcza się w ramach akapitu, a wtedy ujawnia swój naturalny charakter, czyli ukazuje się w jednym wierszu w treścią akapitu.

Przykład:

Najpierw rozpoczniemy akapit, potem umieścimy w nim zdjęcie psa i wreszcie zakończymy akapit.

Oczywiście takie rozwiązanie jest rażące z estetycznego punktu widzenia. Stosuje się zatem pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku), natomiast treść akapitu oblewa ilustrację. Więcej informacji znajdziesz w dziale o stylach - przepływanie elementów.

Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ".

<img src="../grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="float: right; ">

I rezultat:

Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku.

Analogicznie, aby umieścić ilustrację przy lewym marginesie, należy jej nadać styl style="float: left; ".

<img src="../grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="float: left; ">

Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku.

Jak widać, ilustracja jest wtedy swobodnie oblewana z lewej strony przy definicji float:right i z prawej strony przy definicji float:left.

Pozycjonowanie pionowe

Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie stylów vertical-align, które zastąpiło przestarzały atrybut align (top, middle, bottom).

Kilka przykładów z użyciem grafiki i akapitu.

<img src="../grafika/sufinka.jpg" width="85" height="88" alt="Sufi w tulipanach" style="vertical-align: top; ">

Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach.

<img src="../grafika/sufinka.jpg" width="85" height="88" alt="Sufi w tulipanach" style="vertical-align: middle; ">

Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach.

<img src="../grafika/sufinka.jpg" width="85" height="88" alt="Sufi w tulipanach" style="vertical-align: bottom; ">

Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach.

Mapy odsyłaczy

Na ilustracjach można także tworzyć tzw. mapy odsyłaczy po stronie klienta czyli specjalne układy odsyłaczy internetowych związanych z poszczególnymi miejscami na grafice - np. kliknięcie na jednym fragmencie zdjęcia prowadziłoby do jakiejś strony, a kliknięcie na innym fragmencie tego samego zdjęcia, do innej.

Technikę tworzenia map odsyłaczy przedstawiamy dokładniej w rozdziale poświęconym odsyłaczom.