Tematy: Grafika | Dźwięk, wideo i animacje

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.


[hand]Wstawianie grafiki do dokumentu

[zielona kropka] 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:

Sufi w tulipanach

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.

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

<IMG SRC="sufinka.jpg" HEIGHT=150>

Sufi w tulipanach

<IMG SRC="sufinka.jpg" WIDTH=200>

Sufi w tulipanach

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

<IMG SRC="sufinka.jpg" WIDTH=200 HEIGHT=80>

Sufi w tulipanach

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

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

<IMG SRC="sufinka.jpg" WIDTH=342 HEIGHT=353 BORDER=5>

Sufi w tulipanach

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

<IMG SRC="sufinka.jpg" HSPACE="50">

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="sufinka.jpg" VSPACE=50>

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

[zielona kropka] Odrębny, specjalny zespół parametrów, ALIGN=wartość, steruje pozycją obrazka w stosunku do oblewającego go akapitu.

Uwaga: align jest parametrem uznanym za przestarzały i obecnie zalecane jest stosowanie stylów.

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

Sufi w tulipanachALIGN=left 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, 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, 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 tulipanachALIGN=right 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, 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, 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 tulipanachALIGN=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, 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 tulipanachALIGN=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, 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 tulipanachALIGN=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, 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,  

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).

[zielona kropka] 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.

[zielona kropka] Gdybyśmy chcieli umieścić obrazek na środku wiersza, możemy go objąć znacznikami <CENTER></CENTER>

[List]

[zielona kropka] 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:



[ENTER] [PCkurier] [Gambler]