CHOMIKOWY KURS HTML [23.4.12], Chomikowe porady

Kurs HTML - Grafika

Grafika jest ważnym elementem na stronach WWW, gdyż ubarwia i uprzyjemnia ich przeglądanie. Należy pamiętać, że duża ilość odpowiednio dobranej grafiki bardzo dobrze wpływa na atrakcyjność strony w odbiorze. Jednak to właśnie grafika jest przyczyną zmniejszenia szybkości ładowania się strony. W sieci internetowej najczęściej spotykanymi typami plików graficznych są GIF i JPG, które charakteryzują się znaczną kompresją i niewielkimi rozmiarami.

1. Umieszczanie elementów graficznych w dokumencie HTML

Aby umieścić dowolny element graficzny należy wpisać

Znacznik IMG jest skrótem od ang. Image (obraz) i określa miejsce w dokumencie HTML, w którym powinna znaleźć się grafika, natomiast atrybut SRC powinien zawierać nazwę źródłowego pliku graficznego.

Przykład:

< IMG SRC="http://www.webtips.pl/banery/webtips140.gif">

co w wyniku powinno wyglądać następująco:

Istnieje możliwość zastosowania wielu innych atrybutów, które umożliwiają m.in.:

a) zmiana rozmiaru obrazka jest realizowana przy pomocy atrybutów HEIGHT (wysokość) oraz WIDth (szerokość). Jednostką jest piksel.

Przykład:

Powyższe polecenie automatycznie zmienia wysokość i szerokość obrazka.

b) zmiana rozmiaru grubości ramki wokół obrazka jest realizowana przy pomocy atrybutu BORDER, który podobnie jak w przypadku rozmiaru obrazu posiada wartość podaną w pikselach.

Przykład:

c) określenie odległości obrazka od pozostałych otaczających elementów poprzez użycie atrybutów VSPACE (vertical space) oraz HSPACE (horizontal space).

Przykład nr 1:

< IMG SRC="http://www.webtips.pl/banery/webtips140.gif" HSPACE=100>

Dowolny tekst.Dowolny tekst.

Przykład nr 2:

d) zmiana położenia obrazka względem otaczających elementów jest realizowana za pomocą atrybutu ALIGN, który może przyjmować następujące wartości:

Wartość

Efekt końcowy

ALIGN=LEFT

Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.

ALIGN=RIGHT

ALIGN=TOP - obrazek wyrównany do najwyższego elementu w linii

Dowolny tekst. tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny

ALIGN=BOTTOM - dolna krawędz obrazka wyrównana jest do linii bazowej

ALIGN=ABSBOTTOM - dolna krawędz obrazka wyrównana jest do najwyższego elementu w linii

ALIGN=MIDDLE - środek obrazka wyrównany do linii bazowej - jest to wartość domyślna

ALIGN=ABSMIDDLE - środek obrazka wyrównany do środka najwyższego elementu w linii

ALIGN=BASELINE - wyrównanie do lini bazowej

Konstrukcja ma postać:

Obrazek może być także umieszczony na środku wiersza dzięki parze znaczników <center> </center>.

Przykład:

Można także umieścić go wewnątrz tabeli wstawiając go między znaczniki <td> </td>. W ten sposób można w łatwy sposób tworzyć efektownie wyglądające obramowania.

2. Animacja MARQUEE

Efektownym elementem graficznym, obsługiwanym tylko przez przeglądarkę Internet Explorer firmy Microsoft jest animacja Marquee. Jest to "płynący" w poprzek ekranu napis. Przykład:

<MARQUEE>Płynący tekst</MARQUEE>

i wygląda to tak:

Znacznik posiada wiele atrybutów. Oto one:

BEHAVIOR=SCROLL - powoduje, że tekst przemieszcza się od jednego brzegu strony do drugiego, po czym znika za nim i następnie wypływa ponownie zza pierwszego
BEHAVIOR=SLIDE - powoduje, że tekst przemieszcza się od pierwszego brzegu, dociera do drugiego i zatrzymuje się
BEHAVIOR=ALTERNATE - powoduje, że tekst przemieszcza się od pierwszego brzegu, dociera do drugiego i wraca z powrotem (odbija się)
BGCOLOR=kolor - określa kolor tła; wartość koloru (kolor) można być podana w postaci numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua)
DIRECTION=LEFT - określa początkowy kierunek ruchu jako kierunek w lewo
DIRECTION=RIGHT - określa początkowy kierunek ruchu jako kierunek w prawo
LOOP=x określa ilość powtórzeń ruchu tekstu x razy
HEIGHT=x - wymiary elementu, w którym przesuwa się napis; x może przyjmować wartości wyrażone w pikselach lub procentach wysokości ekranu
WIDth=y - wymiary elementu, w którym przesuwa się napis; y może przyjmować wartości wyrażone w pikselach lub procentach szerokości ekranu
HSPACE=x - określa odległość elementu MARQUEE w poziomie od sąsiadujących elementów, np. tekstu, grafiki; akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>
VSPACE=y - określa odległość elementu MARQUEE w pionie od sąsiadujących elementów, np. tekstu, grafiki; akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>
SCROLLAMOUNT=x - określa szybkość przemieszczania się napisu; wartość x określa długość pojedynczego skoku wyrażoną w pikselach
SCROLLDELAY=x - określa odstępu czasowe między kolejnymi skokami (szybkość przemieszczania się napisu); wartość x jest wyrażona w milisekundach

Przykłady:

... [ Pobierz całość w formacie PDF ]

CHOMIKOWY KURS HTML [23.4.12]

CHOMIKOWY KURS HTML [23.4.12], Chomikowe porady

Odnośniki