Osadzanie - Grafika - Kurs HTML - WebRef - Kursy Webowe

Grafika#

Osadzanie#

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="ścieżka dostępu" alt="tekst alternatywny">

gdzie:

• src (source) - to najważniejszy atrybut, służy do określenia nazwy pliku (jeśli plik znajduje się w tym samym katalogu co strona WWW) lub adresu URL obrazu, który ma zostać w danym miejscu wstawiony. Adresy tworzymy na tych samych zasadach jak w przypadku odsyłaczy. Przypominam, że nazwy plików tworzymy wg. następujących reguł.
• alt (alternative text) - atrybut pozwala wprowadzić tekst alternatywny, który zostanie wyświetlony w miejsce obrazka, kiedy przeglądarka nie może go wyświetlić (bo ich nie obsługuje, ma wyłączone, wystąpił błąd albo po prostu obrazek jeszcze się nie ściągnął). Ponadto w MSIE może zostać wyświetlony dymek (tooltip) po wskazaniu obrazka myszką.

W najnowszej specyfikacji HTML 4.01 używanie atrybutu alt dla elementu img jest obowiązkowe! Szerszy opis zagadnienia znajduje się w Guidelines on alt texts in img elements. Nadanie stylów tekstu dla elementu img określa jak będzie wyglądał tekst alternatywny.

Znacznik <img> (image) pozwala wprowadzić grafikę w dowolnym miejscu strony. Jest to element pusty, dlatego w przypadku HTML-a nie wolno go zamykać. Dwa wymienione dotąd atrybuty są obowiązkowe. Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek domyślnie jest ustawiany przy lewym brzegu dokumentu (lub pojemnika nadrzędnego) i ma wielkość oryginału.

Przykład zastosowania:

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/tygrys.jpg" alt="Tygrys syberyjski" />

Efekt:

Kolejny przykład z ostylowaniem opisu alternatywnego (specjalnie wstawiony błędny adres):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../../pliki/html/grafika/osadzanie/pusto.jpg" style="font-weight: bold; color: white; background-color: black;" alt="Tutaj nie ma obrazka" width="200" height="100" />

Efekt:

Specyficzne atrybuty#

Istnieją inne atrybuty, które mogą być użyte razem z elementem image. Zmieniają one położenie, wielkość i inne cechy obrazka.

1. Określone wymiary#

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="ścieżka dostępu" alt="tekst alternatywny" width="x" height="y">

lub:

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="ścieżka dostępu" alt="tekst alternatywny" width="x%" height="y%">

gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość obrazka w pikselach. Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość obrazka w procentach ekranu (bądź elementu nadrzędnego posiadającego ustalone wymiary).

Do określenia szerokości i wysokości obrazka wyświetlanego na stronie służą atrybuty width (szerokość) i height (wysokość). Podanie oryginalnego rozmiaru obrazu pozwala przeglądarce umieścić na stronie pole przeznaczone na obraz, zanim jeszcze pobierze z Sieci sam plik zawierający grafikę. Dzięki temu symbol odpowiadający za brak wczytywania ilustracji nie popsuje ułożenie innych elementów strony. Zabieg taki wywołuje u osoby przeglądającej stronę wrażenie, że jej ładowanie przebiega szybciej.

Najlepiej samemu określać wymiary grafiki dla wszystkich elementów img.

Atrybuty pozwalają także modyfikować rozmiary obrazu (względem wartości oryginalnych). Oczywiście podawanie wartości większych wiąże się ze spadkiem jakości (malejąca rozdzielczość). Pomniejszanie, choć nie wpływa znacząco na pogorszenie jakości obrazu, jest nieekonomiczne - grafika jest pobierana w oryginalnym rozmiarze, a następnie zmniejszana przez przeglądarkę. Większy sens ma przygotowanie pomniejszonej kopii obrazu za pomocą dowolnego programu graficznego. Pomniejszona wersja nie tylko będzie wymagała pobrania z Sieci mniejszej ilości danych, ale również może charakteryzować się znacznie lepszą jakością niż w przypadku pomniejszenia wykonanego za pomocą przeglądarki.

Nie używaj tych atrybutów do pomniejszania obrazków. Mimo ich obecności obrazek będzie tak samo dużo zajmował i tak samo długo będzie pobierany.

Tygrys z pierwszej fotografii ma oryginalne wymiary 250x167. Zmodyfikujmy je następująco:

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/tygrys.jpg" alt="Tygrys syberyjski" width="200" height="200" />

Efekt:

Jak widać przeglądarki internetowe potrafią przeskalować oryginalny obrazek do wartości zadanych przez kodera. Oczywiście taka metoda jest niewskazana, służy jako przykład.

2. Obramowanie#

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="ścieżka dostępu" alt="tekst alternatywny" border="n">

gdzie jako "n" należy wpisać grubość obramowania (w pikselach).

Przeglądarki zazwyczaj nie wyświetlają ramki samodzielnych obrazów, obwodzą za to grubą ramką obrazy będące zarazem odnośnikami. Można jednak samodzielnie ustalić szerokość ramki.

Obecnie atrybut BORDER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Prosty przykład (z użyciem CSS, które oferują większe możliwości):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/jagura.jpg" alt="Jaguar" width="200" height="162" style="border: 10px yellow solid;" />

Efekt:

3. Ustawienie względem tekstu#

Obrazek jest elementem liniowym domyślnie umieszczanym na linii bazowej tekstu. Z tego powodu przeglądarki rezerwują dodatkowe miejsce na resztę linii tekstu (dół liter y, p, j, g, q) pozostawiając odstęp pod obrazkiem. Odstęp ten (góra/dół) można regulować za pomocą odpowiednich poleceń.

Rysunek. Położenie obrazka na linii bazowej pisma

Ustawienie grafiki względem tekstu odbywa się następująco:

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="ścieżka dostępu" alt="tekst alternatywny" align="rodzaj">

gdzie jako "rodzaj" należy wpisać:

• left - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
• right - obrazek ustawiony po prawej stronie względem otaczającego go tekstu
• top - tekst ustawiony na górze obrazka
• middle - tekst ustawiony na średniej wysokości względem obrazka
• bottom - tekst ustawiony na dole obrazka (domyślnie)

Obecnie atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Atrybut align w przypadku obrazka nie służy do określenia położenia obrazka, lecz znajdującego się wokół niego tekstu. Wyjątek stanowią wartości left i right, które powodują zmianę początkowego położenia obrazka. Wartość left spowoduje, że obrazek znajdzie się przy lewym marginesie, natomiast wartość right spowoduje, że obrazek znajdzie się przy prawym marginesie. Najlepiej zobaczyć całość na przykładach (stosuję alternatywne polecenia stylów).

Domyślne ustawienie (bottom):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/kotek.jpg" alt="Dachowiec" width="100" height="100" />

Efekt:

y, p, j, g, q, align="bottom" align="bottom" align="bottom" align="bottom"

Efekt (więcej tekstu):

y, p, j, g, q, align="bottom" align="bottom" align="bottom" align="bottom" align="bottom" align="bottom" align="bottom" align="bottom" align="bottom" align="bottom" align="bottom"

Zwróć uwagę na niewielki odstęp między dolną krawędzią grafiki a napisem, wynikający z domyślnego położenia zdjęcia na linii bazowej tekstu. Odstęp ten można zniwelować stosując CSS (polecenie vertical-align: bottom):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/kotek.jpg" style="vertical-align: bottom;" alt="Dachowiec" width="100" height="100" />

Efekt:

y, p, j, g, q, align="bottom" align="bottom" align="bottom" align="bottom"

Tekst na górze (top):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/kotek.jpg" style="vertical-align: top;" alt="Dachowiec" width="100" height="100" />

Efekt:

Y, y, p, j, g, q, align="top" align="top" align="top" align="top"

Efekt (więcej tekstu):

Y, y, p, j, g, q, align="top" align="top" align="top" align="top" align="top" align="top" align="top" align="top" align="top" align="top" align="top" align="top" align="top"

Tekst na średniej wysokości (middle):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/kotek.jpg" style="vertical-align: middle;" alt="Dachowiec" width="100" height="100" />

Efekt:

Y, y, p, j, g, q, align="middle" align="middle" align="middle" align="middle"

Efekt (więcej tekstu):

Y, y, p, j, g, q, align="middle" align="middle" align="middle" align="middle" align="middle" align="middle" align="middle" align="middle" align="middle" align="middle" align="middle" align="middle" align="middle"

Obrazek z lewej strony (left):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/kotek.jpg" style="float: left;" alt="Dachowiec" width="100" height="100" />

Efekt:

Y, y, p, j, g, q, align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left" align="left"

Obrazek z prawej strony (right):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../pliki/html/grafika/osadzanie/kotek.jpg" style="float: right;" alt="Dachowiec" width="100" height="100" />

Efekt:

Y, y, p, j, g, q, align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right" align="right"

4. Odstęp wokół obrazu#

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="ścieżka dostępu" alt="tekst alternatywny" hspace="x" vspace="y">

gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość w pikselach.

Do wprowadzenia odstępów między grafiką a sąsiadującymi elementami służą atrybuty hspace (horizontal space - odstęp z prawej i lewej strony) i vspace (vertical space - odstęp u góry i dołu).

Obecnie atrybuty HSPACE i VSPACE są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykładowy odstęp w poziomie (hspace):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

Dowolny tekst <img src="../pliki/html/grafika/osadzanie/lew.jpg" style="margin: 0 50px;" alt="Lew" width="100" height="100" /> Dowolny tekst

Efekt:

Dowolny tekst Dowolny tekst

Przykładowy odstęp w pionie (vspace):

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<div>Dowolny blok umieszczony przed grafiką.</div> <img src="../pliki/html/grafika/osadzanie/lew.jpg" style="margin: 50px 0;" alt="Lew" width="100" height="100" /> <div>Dowolny blok umieszczony za grafiką.</div>

Efekt:

Dowolny blok umieszczony przed grafiką.Dowolny blok umieszczony za grafiką.

Dodatkowe informacje o obrazie#

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="ścieżka dostępu" alt="tekst alternatywny" title="dodatkowy opis">

Za pomocą standardowego atrybuty title można umieścić opis dla grafiki. Przeglądarki najczęściej wyświetlają jego zawartość jako dymek (tooltip) po najechaniu myszą nad ilustrację.

Prosty przykład:

1. —
2. L
3. K
4. T'
5. T
6. A
7. O
8. Z'
9. Z
10. #

<img src="../../pliki/html/grafika/osadzanie/ekipa.jpg" alt="Nasza banda" title="Marian to ten po prawej" width="300" height="175" />

Efekt (widoczny po najechaniu kursorem myszki na zdjęcie):

Pasek społecznościowy

• Wstęp
• Odsyłacz obrazkowy