Grafika

niedziela, 13 grudzień 2009 15:01 Administrator
Email Drukuj PDF

Tematy: Uwagi ogólne | Wstawianie grafiki | Obramowania i odstępy | Pozycja grafiki | Grafika jako blok | Pozycjowanie poziome | Pozycjowanie pionowe | Zbiór grafik | Mapy odsyłaczy | Grafika SVG | Canvas

logo HTML 5O rozdziale (aktualizacja 25.02.2013): 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 - ulegaja one nieustannemu doskonaleniu, czego dowodem jest technika Canvas przeznaczona dla twórców aplikacji webowych, a także powszechnie już znana grafika wektorowa SVG, z której bez problemu może korzystać zwykły webmaster, nawet o stosunkowo skromnej jeszcze znajomości rzemiosła webmasterskiego.

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 (format ten traci już jednak na znaczeniu). W ostatnim okresie spotyka się też grafiki w wektorowym, opartym na XML formacie SVG (zapoznaj się z kursem Scalable Vector Graphics w naszym serwisie), które obsługują już wszystkie przeglądarki, zaś dla twórców aplikacji webowych przygotowana została technika Canvas oparta na JavaScript.

Pamiętajmy też, że grafika ma istotne znaczenie w pokrewnych językowi HTML formatach książek elektronicznych - szybka ekspansja ebooków w ostatnich latach spopularyzowała takie formaty, jak standard ePub (opis ePub 2 w naszym serwisie) i format Mobi, firmy Amazon, znany przede wszystkim z czytnika Kindle. Oba formaty są zreszta wykorzystywane w księgarni Ebookpoint wydawnictwa Helion.

Wstawianie grafiki do dokumentu

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

<img src="/sciezka/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:

Sufi w kwiatach

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">

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 obrys 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; ">

Sufi w tulipanach

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="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="margin-left: 50px; margin-right: 50px; ">

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

A ten Sufi w tulipanach o 100 pikseli

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

Akapit 50 pikseli nad grafiką.

Sufi w tulipanach

Akapit 50 pikseli pod grafiką.

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.

Sufi w tulipanachSufi w tulipanach

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>

Sufi w tulipanach

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 Sufi w tulipanach 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. Sufi w tulipanachTreść 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; ">

Sufi w tulipanachTreść 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 tulipanachSufi 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 tulipanachSufi 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 tulipanachSufi 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.

Zbiór grafik

W HTML 5 pojawiło sie polecenie figure, które we współpracy z figcaption pozwala wydzielić zbiór elementów multimedialnych, m. in. także grafik.

<figure>
<figcaption>Podpis</figcaption>
<img src="/obrazX.jpg" alt="Tytuł obrazu X" width="400" height="200">
<img src="/obrazY.jpg" alt="Tytuł obrazu Y" width="400" height="200">
</figure>

cherry strawberry
Rysunek 1. Owoce na deser

Położenie podpisu zależy od położenia kodu figcaption - w naszym przykładzie jest on za grafikami.

Informacje o FIGURE

Informacje o FIGCAPTION

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.

Grafika SVG

Polecenie SVG nie jest formalnie częścią języka HTML, jednak właśnie za pomocą tego polecenia wstawiamy do dokumentu wydzielony obszar z grafiką wektorową w tym formacie.

<svg width="250" height="200" xmlns="http://www.w3.org/2000/svg"> 
<circle cx="100" cy="100" r="70" stroke-width="10" stroke="red" fill="#4a90d6"/>
</svg>

Polecenie tworzy kontener, obszar o zadanej szerokości (width) i wysokości (height), a między znacznikiem otwierającym i zamykającym umieszczany jest kod definiujący rysunek - w powyższym przykładzie okrag. Jest to bezpośrednia metoda wstawiania rysunku do kodu źródłowego strony. Są jeszcze metody odwoływania się do zewnętrznego pliku SVG umieszczonego na serwerze, za pomoca poleceń object, iframe lub embed. Informacje o umieszczaniu plików SVG znajdzie Czytelnik w naszym kursie SVG.

I jeszcze jako przykład, efekt zastosowania powyższego kodu:

Canvas

Polecenie Canvas jest nowym poleceniem HTML 5, które wprowadza kontener, w którym dynamicznie, za pomocą skryptów JavaScript, generowana jest dynamicznie grafika bitowa (rastrowa). Technika ta służy przede wszystkim potrzebom aplikacji webowych, a nie zwykłym witrynom - składnia poleceń generujących rozmaitem obiektym jest rozbudowana, podobnie jak składnia Scalable Vector Graphics - można ją przedstawić jedynie w oddzielnym, obszernym opracowaniu, np. HTML 5 Canvas. Receptury.

Przykład z Wikipedii:

<canvas id="example" width="200" height="100">
Tekst wyświetlany, gdy przeglądarka nie obsługuje Canvas.
</canvas>

<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
</script>

Przykład:

This text is displayed if your browser does not support HTML5 Canvas.

Informacje o CANVAS

gość specjalny Helion.pl