Grafika

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 i zatykania się łącz. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a twardymi 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.

Autorzy regularnie odwiedzanych stron (zawierających stałe aktualizacje) mogą jednak liczyć na fakt, że dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i dźwiękowe, pozwalając przeglądarce sięgać do zasobów na dysku lokalnym, a nie do Sieci, co wydatnie zmniejsza ruch na łączach. Z tego też powodu w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Nie przyjął się jeszcze dostatecznie powszechnie chwalony przez specjalistów format PNG (Portable Network Graphics).

Warto też zwrócić uwagę na fakt, że Internet Explorer akceptuje formaty BMP i WMF - nie powinno się ich umieszczać w Internecie, ale mogą być z powodzeniem stosowane w archiwach HTML Help opartych na kontrolce Internet Explorera.

Zaprezentujmy zatem podstawowe metody posługiwania się grafiką w procesie budowania dokumentów internetowych.

Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny">

IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (żródło). Efekt zastosowania konstrukcji jest następujący:

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

Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład:

<IMG SRC="tucows.gif" HEIGHT=150>

<IMG SRC="tucows.gif" WIDTH=200>

Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka:

<IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50>

Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy o malejącej rozdzielczości obrazka na ekranie przeglądarki.

Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli:

<IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5>

Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu:

<IMG SRC="tucows.gif" HSPACE=50>

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

A ten, o 100 pikseli

<IMG SRC="tucows.gif" VSPACE=50>

Ten obrazek jest odsunięty od akapitu poprzedzającego i następującego po nim o 100 pikseli w pionie

Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu.

Konstrukcja ma postać <IMG SRC="obrazek" ALIGN=abc>

ALIGN=left abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=right abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=top abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=bottom abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=middle abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

Przypomnijmy sobie również uwagi na temat roli parametru CLEAR, który pozwala regulować wzajemne położenie obrazka i tekstu (polecenie <BR> w Blokach).

Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron.

Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER></CENTER>

Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD></TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań, na przykład: