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: