CHOMIKOWY KURS HTML [23.4.12].docx

(22 KB) Pobierz

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ć
 

<IMG SRC="plik_graficzny">

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:
 

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


 
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:
 

<IMG SRC="foot.gif" BORDER=5>


 
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:
 

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


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



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=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

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. Dowolny tekst.


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

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. Dowolny tekst.


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

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. Dowolny tekst.


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

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. Dowolny tekst.


ALIGN=BASELINE - wyrównanie do lini bazowej

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. Dowolny tekst. Dowolny tekst.

Konstrukcja ma postać:
 

<IMG SRC="plik_graficzny" ALIGN=......>

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

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


 
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:
 


 

 

...
Zgłoś jeśli naruszono regulamin