Start (X)HTML Grafika w dokumecie HTML


Designed by:
Peery

Grafika w dokumecie HTML PDF Drukuj Email
Wpisany przez Webmaster   
wtorek, 28 grudnia 2010 09:52

Grafika jest jednym z najważniejszych elementów strony WWW. Bez niej dokumenty HTML byłyby tylko czystym plikiem tekstowym. Należy pamietać, że grafika i elementy multimedialne (o nich w kolejnym rozdziale) są przychyną wzrostu ruch w Sieci. Dlatego też przygotowując pliki graficzne musimy starać się aby wielkość plików była jak najmniejsza, ale nie na tyle mała, żeby nie stracić na jagości elementu graficznego. Podstawowymi standardami graficznymi są pliki JPG, GIF oraz PNG. Można stosować jeszcze pliki BMP, aczkolwiek nie posiadają one kompresji i ich wielkość jest bardzo duża.

 

 

Grafika w dokumencie

Podstawowa konstrukcja kodu HTML dla elementu graficzego:

<img src="/sciezka/plik_graficzny" alt="nazwa alternatywna">

IMG to skrót od angielskiego Image (obraz) - znacznik odpowiadający za obiekt graficzny.
SRC to skrot od angielskiego Source (źródło) - znacznik odpowiedzialny za ścieżkę dostępu i nazwę pliku.
ALT to skrot od angielskiego Alternativ (alternatywny) - znacznik odpowiadający za nazwę alternatywną dla obiektu graficznego.

Wynikiem zastosowania tej konstrukcji jest:

Duży wodospad

Standardowo obrazek jest wyrównany do lewej strony i ma oryginalne rozmiary. Bez problemu możemy to zmienić stosując dodatkowe atrybuty, ktore to zmienią.

Modyfikacja wielkości obrazka następuje po przez zmianę paramentrów width (szerokość) i height (wysokość).

<img src="/images/wodospad.jpg" alt="Duży wodospad" width="200" height="325">

Duży wodospad

Kolejnym atrybutem elementu graficznego jest ramka. W starszej wersji HTML używało się polecenia border obecnie się już od tego odchodzi i zastępuje stylami CSS.

<img src="/images/wodospad.jpg" alt="Duży wodospad" width="300" height="225" style="border: 6px green solid;">

Duży wodospad

Obiekt graficzny wstawiony między tekst domyślnie ściśle do niego przylega. Przerwę można zwiększyć stosując polecenia hspace i vspace - odległość od obiektu w pionie i poziomie. Jednakże obecnie już się nie stosuje tych atrybutów. Zastąpiono je stylami CSS - marginesem globalnym (margin) lub cząstkowym (margin-top, margin-bottom, margin-left, margin-right).

<img src="/images/wodospad.jpg" style="margin-top: 50px; margin-bottom: 50px;">

Tekst 100px nad grafiką

Duży wodospad

Tekst 100px pod grafiką

<img src="/images/wodospad.jpg" style="margin-left: 50px; margin-right: 50px;">

Tekst 50px z lewej Duży wodospad Tekst 50px z prawej

Pozycja grafiki

Element graficzny możemy pozycjonować w poziomie lub pionie. W starszej wersji HTML stużył do tego atrybut align z parametrami: left, center, right dla pozycji w poziomie i top, middle, bottom dla pozycji w pionie. Obecnie nie stosuje się już atrybutu algin. Funkcja ta została przejęta przez style CSS.

<img src="/images/wodospad.jpg" style="float: right"> - grafika z prawej

<img src="/images/wodospad.jpg" style="float: left"> - grafika z lewej

<img src="/images/wodospad.jpg" style="vertical-align: top; "> - wyrównanie do góry

<img src="/images/wodospad.jpg" style="vertical-align: middle; "> - wyrownanie do środka

<img src="/images/wodospad.jpg" style="vertical-align: bottom; ">- wysównanie do dołu

Dodatkowo na obiekty graficzne możemy nanieść tzw. mapę odnośników (więcej na ten temat w artykule XHTML -> Listy)

Tags:
 

Przydatne linki