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:
WojtiD8