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
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
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
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 pierwszegoBEHAVIOR=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 lewoDIRECTION=RIGHT - okre艣la pocz膮tkowy kierunek ruchu jako kierunek w prawoLOOP=x okre艣la ilo艣膰 powt贸rze艅 ruchu tekstu x razyHEIGHT=x - wymiary elementu, w kt贸rym przesuwa si臋 napis; x mo偶e przyjmowa膰 warto艣ci wyra偶one w pikselach lub procentach wysoko艣ci ekranuWIDth=y - wymiary elementu, w kt贸rym przesuwa si臋 napis; y mo偶e przyjmowa膰 warto艣ci wyra偶one w pikselach lub procentach szeroko艣ci ekranuHSPACE=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 pikselachSCROLLDELAY=x - okre艣la odst臋pu czasowe mi臋dzy kolejnymi skokami (szybko艣膰 przemieszczania si臋 napisu); warto艣膰 x jest wyra偶ona w milisekundach聽Przyk艂ady:聽聽
Maggia