Autorem strony jest Aktualizacja Powrót do pomocy programu
Paweł Wimmer
[e-poczta] pawel.wimmer@lupus.waw.pl
[klepsydra] 15-VI-1997 [Pajaczek 2.0] Pajaczek 2.0
[zielona kropka][zielona kropka][zielona kropka]

Grafika

Uwaga: Jeśli przykład nie odzwierciedla oznakowania, oznacza to, że przeglądarka nie akceptuje danego znacznika



[hand]Uwagi ogólne

Grafika jest jednm z najbardziej charakterystycznych elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. Im strona bogatsza graficznie, tym bardziej atrakcyjna w odbiorze. Zręczne wykorzystywanie grafiki podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie grafika jest 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.

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

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:

[TUCOWS]

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="tucows.gif" HEIGHT=150>

[TUCOWS]

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

[TUCOWS]

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>

[TUCOWS]

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

[TUCOWS]

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

[TUCOWS]

[zielona kropka] 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 [TUCOWS] jest odsunięty od obrazka o 50 pikseli w poziomie.

A ten, [TUCOWS] o 100 pikseli

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

[TUCOWS] 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=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu.

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

[List]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

[List]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

[List]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

[List]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

[List]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).

[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, musimy objąć go 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:

Oferta Wydawnictwa Lupus


[Amiga] [ENTER] [PCkurier] [Gambler]
[CADCAMforum] [TELECOMforum] [UNIXforum] [NETforum]



[hand]Zagnieżdżanie grafiki

Uwaga: polecenie EMBED, akceptowane przez przeglądarkę Netscape Navigator, nie jest częścią języka HTML 3.2.

Możliwe jest zagnieżdżenie grafiki w dokumencie HTML (podobnie jak w przypadku obiektu OLE). Służy do tego polecenie:

<EMBED SRC=grafika>

Wstawiony w ten sposób obrazek może nie być bezpośrednio widoczny w przeglądarce, gdzie pojawić się może jego szkieletowa reprezentacja, w postaci ikony zawierającej podpis z nazwą pliku. Na przykład:

Dwukrotne kliknięcie na zagnieżdżonym obiekcie uruchomi skojarzony z danym typem pliku program. Na przykład, jeśli macierzystą aplikacją dla pliku BMP jest program Paintbrush (Paint), zostanie on uruchomiony z wczytanym automatycznie plikiem. Gdy w systemie jest zainstalowana wtyczka QuickView Plus (i zintegrowana z przeglądarką), obiekt jest bezpośrednio widoczny w przeglądarce.

Zagnieżdżony obiekt można objąć ramką, za pomocą parametru BORDER=x, a także ustawiać w stosunku do akapitu za pomocą ALIGN. Parametry WIDTH i HEIGHT pozwalają zdefiniować wymiary ikony.



[hand]Animacja Marquee

Uwaga: animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 3.2.

Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions, jest animacja Marquee. Jest to "pływający" w poprzek ekranu napis.

Animacji można przypisać wiele parametrów, które bardzo urozmaicają zachowanie napisu.

[zielona kropka] Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</MARQUEE>. Na przykład:

Tekst sobie pływa

Dodatkowe parametry są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE parametr>

[zielona kropka] Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD>:

Oferta Wydawnictwa Lupus

[zielona kropka] Tekst może się poruszać na trzy sposoby:

BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu.

behavior=scroll

BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.

behavior=slide

BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.

behavior=alternate

[zielona kropka] BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.

Kolor Red

Kolor Yellow

Kolor Fuchsia

[zielona kropka] Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo.

Ruch w lewo

Ruch w prawo

[zielona kropka] Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu.

Wysokość 50 pikseli

Szerokość 50 procent

[zielona kropka] Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy.

Ten napis przesunie się 20 razy i zatrzyma się

[zielona kropka] Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu.

Tekst przed animacjąTa animacja jest oddalona o 100 pikseli od sąsiadującego tekstuTekst za animacją

Tekst nad animacją
Ta animacja jest oddalona o 30 pikseli od sąsiadujących akapitów
Tekst pod animacją

Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>.

[zielona kropka] Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE.

Jak wiemy, definicja koloru fragmentu tekstu ma postać <FONT COLOR=kolor> Tekst </FONT>.

Kilka przykładów:

Biały tekst na czerwonym tle

Zauważmy, że w polu animacji można wstawić więcej spacji, w przeciwieństwie do zwykłego tekstu.

Czerwony tekst na żółtym tle

Biały, pogrubiony tekst na zielonym tle

Biały, pochylony tekst na zielonym tle

Biały, podkreślony tekst na zielonym tle

Uwaga: z nieznanych powodów nie jest możliwe zdefiniowanie białego tekstu na czarnym tle!

[zielona kropka] Pola animacji można bezpośrednio ze sobą łączyć. W poniższym przykładzie każde pole zajmuje 50% szerokości ekranu, a definicje zostały podane jedna po drugiej.

Biały tekst na zielonym tle Biały tekst na czerwonym tle Biały tekst na czerwonym tle Biały tekst na zielonym tle

[zielona kropka] Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy.

Scrollamount=5

Scrollamount=30

Scrollamount=50

[zielona kropka] Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami. 1000 = 1 sekunda.

Scrolldelay=500 - skok co 0,5 sekundy

Scrolldelay=2000 - skok co 2 sekundy o 50 pikseli

[zielona kropka] Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją:

Tekst u góry pola Animacja

Tekst w połowie pola Animacja

Tekst u dołu pola Animacja


Źródła:
  1. Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa 1996
  2. Stephen Le Hunte "HTML Reference Library", plik Helpu dla Windows 3.1 i 95
  3. Ian Graham "HTML Sourcebook. A Complete Guide to HTML 3.0", New York 1996
  4. Hot Dog Professional, plik Helpu
  5. Rafał Wiosna "Każdy chce mieć własną stronę", cykl publikacji w numerach 26/95, 3/96 dwutygodnika PCkurier