HTML   Lekcja 2.1  - Grafika na stronach WWW

Poznaliśmy już główne znaczniki blokowe służące do formatowania tekstu. Zajmiemy się teraz przez chwilę wstawianiem grafiki na stronę internetową. Grafika jaką spotykamy na stronach WWW to głównie grafika rastrowa. Oznacza to, że sposób opisania obrazka polega na opisaniu cech każdego segmentu, z którego składa się obrazek tzw. pixel-a. Pixel to umowna najmniejsza część ekranu pracującego w danej rozdzielczości. Oto obrazek przedstawiający niebieską literę x na białym tle.

Po lewej pokazano to w powiększeniu... Pixel żółty ma współrzędne 0,0
Pixel zielony ma wsółrzędne 5,2, pomarańczowy 7,6

Jeżeli mamy ustawioną rozdzielczość np. na 1024X768 to oznacza, że nasz ekran jest podzielony na 1024 wiersze i 768 kolumn, tak jak strona zeszytu w kratkę, tylko niewidzialna siatką. Najmniejszy element tej siatki (rastra) to właśnie nasz pixel.

Jak już mówiliśmy pixele posiadają współrzędne x,y , a początek tych współrzędnych znajduje się zazwyczaj w lewym górnym rogu obrazka. Jest tam zatem pixel o współrzędnych 0,0.
W odróżnieniu od tradycyjnego układu współrzędnych, numerujemy wiersze i kolumny, przyporządkowując im kolejne liczby całkowite począwszy od zera. Rzeczywiście pojęcie punktu w sensie matematycznym tutaj nie jest używane, zamiast tego mamy pixel, który możemy uczynić jednak dostatecznie małym, a zależy to od możliwości naszego ekranu.

Do wstawiania obrazków na stronę służy specjalny znacznik <img >.
Znacznik <img > posiada kilka atrybutów umożliwiających kontrolę nad wstawianym obrazkiem, oto one:

SRC podaje ścieżkę dostępu do pliku zawierającego wstawianą grafikę.

width szerokość jaką będzie miał obrazek.

height wysokośc jaką będzie miał obrazek.

BORDER szerokość obramowania obrazka w pixelach.

HSPACE odległość ramki obrazka od elementów po lewej i prawej jego stronie. Podana w pixelach.

HSPACE odległość ramki obrazka od elementów znajdujących się nad nim i pod nim. Podana w pixelach.

ALT tekst, który ukaże się zanim obrazek zostanie ściągnięty z serwera, oraz w momencie najechania na obrazek myszką.

ALIGN sposób położenia obrazka na stronie i zachowanie się tekstu w stosunku do niego. Użycie tego atrybutu powoduje oblewanie obrazka przez tekst. Wartość left ustawia obrazek po lewej stronie, a right po prawej.
Jeżeli nie wstawimy atrybutu align do znacznika obrazka, a obrazek jest dostatecznie duży, zajmie on wówczas na stronie pas odpowiadający jego wysokości. Jeżeli jest mały zajmie należne mu miejsce na lini tekstu... Do dodatkowego ustawienia małego obrazka w stosunku do tekstu możemy użyć wówczas atrybutu align o wartości równej middle lub absmiddle

A oto przykład kompletnego znacznika:

<img src="../../../grafika/mickey.gif" width=50" height="100" border="0" alt="uśmiechnij się" hspace="7" vspace="5" align="left" >

uśmiechnij się

Wstawiony obrazek widać obok. Zauważmy, że obrazek nie znajduje się w tym samym katalogu co strona i dlatego musieliśmy podać do niego ścieżkę dostępu w postaci adresu względnego. O adresowaniu będziemy jeszcze mówić szerzej na następnych lekcjach.

Przy wstawianiu grafiki należy zachować proporcje wymiarów dla wartości atrybutów width i width, w przeciwnym razie obrazek ulegnie deformacji zgodnie z naszymi poleceniami. Wstawianą grafikę można w ten sposób zmniejszać lub zwiększać, ale nie radzimy zbytnio przesadzać, gdyż odbije się to na jakości.

Stosowane na Internecie popularne typy plików graficznych to pliki z rozszerzeniami .gif, jpg i .png. Przystosowane są one do używania na stronach WWW dzięki zastosowanej w nich kompresji pozwalającej na zmniejszenie pliku w stosunku do innych typów plików graficznych. Kompresja polegać może na usunięciu nadmiaru informacji w stosunku ilości wystarczającej do opisania obrazka, a także zastosowaniu pewnych uproszczeń np. ograniczenia ilości kolorów i szczegółów.

W zależności od treści grafiki, a dokładniej technologii jej utworzenia zaleca się taki, a nie inny wybór typu pliku graficznego. I tak w sytuacji kiedy obrazek zawiera niezbyt dużą liczbę kolorów oraz posiada obszary posiadające ten sam kolor wskazane jest zapisywanie go w formacie .gif, jeśli przeciwnie zawiera dużo kolorów, świateł i cieni jak np. fotografie należy użyć formatu .jpg. Format .png zachowuje informacje o warstwach składających się na finalny wygląd obrazka i jest wygodny ze względu na archiwizacje i ewentualną modyfikacje grafiki. Posiada również skuteczne narzędzia jej kompresowania.

W przypadku giff-ów ilość kolorów ograniczona jest do 256 i stanowią one tzw. paletę. Paleta może zawierać dowolne kolory. Stosowanie gifów uatrakcyjnia możliwość zadeklarowania jednego z kolorów jako przezroczysty. Przeglądarka napotykając wówczas na taki kolor zamiast pixeli obrazka wyświetla to, co się pod nimi znajduje, czyli tło. Na ogół elementem przezroczystym jest tło obrazka, wówczas wygląda on tak jakby nie posiadał obramowania i był wycięty z otaczającego go tła.

Dodatkową korzyścią stosowania gif-ów jest możliwość grupowania ich w zespoły umożliwiające animację.

Taki specjalnie stworzony plik gifa animowanego zawiera wiele obrazków, które kolejno wyświetlane tworzą efekt animacji. Specjalnie wstawione pomiędzy obrazki bloki kontrolne ustalają czas wyświetlania każdej klatki i sposób zastępowania jednej klatki inną.

Możliwe jest ustawienie wspólnej palety i ustawienie przezroczystości.

Niektóre programy graficzne posiadają opcję tworzenia gif-ów animowanych. Te, które nie mają takiej możliwości nie potrafią także prawidłowo otworzyć tego pliku i pokazują zazwyczaj jedynie pierwszą klatkę animacji.
Choć większość gif-ów animowanych posiada poszczególne klatki tej samej wielkości, nie jest to absolutnie konieczne...
Jeśli nie posiadasz programu graficznego z możliwością tworzenia animacji możesz go ściągnąć tutaj.

[dalej]