Obrazki

Osadzanie obrazków

Na stronie można umieszczać obrazki w formatach .jpg, .png oraz .gif (w tym gify animowane). Przy okazji należy przypomnieć o prawach autorskich - nie możesz dowolnie "pożyczać" obrazków z innych stron i publikować ich na swojej stronie. Podstawowa konstrukcja znacznika wstawiającego obrazek przedstawia się następująco:
<img src="ścieżka do pliku" alt="Podpis alternatywny" /> - gdzie Podpis alternatywny będzie wyświetlony w przypadku, gdy użytkownik wyłączył pokazywanie grafiki (kiedyś z racji małych prędkości łączy wyłączano często). Jak widać znacznik ten należy do grupy znaczników pojedynczych (nie ma znacznika zamykającego).

Poza atrybutami src="" oraz alt="" znacznik img może posiadać atrybuty width="szerokość obrazka w pikselach" oraz width="wysokość obrazka w pikselach". Jeżeli pokazujemy obrazek w rozmiarze oryginalnym, to atrybuty te pomijamy. Przy czym co jest ważne - nie zaleca się zmieniać rozmiarów obrazka, co prawda przeglądarka dopasuje jego rozmiary do wyznaczonych przez nas ale kosztem jakości wyświetlania tego obrazka.

Przykłady wstawionych obrazków

Wszystkie obrazki wstawiono z wykorzystaniem znacznika figure. Za pomocą stylów CSS ustawiłem tło w kolorze jasnoniebieskim aby pokazać krawędzie obrazków.

Format .jpg jest najbardziej popularny. Stosuj oryginalny rozmiar obrazka, jeżeli jest za duży, to przeskaluj go, np. za pomocą GIMPa.

Format .png pozwala na uzyskanie przeźroczystości tła. Nie widać wtedy prostokątnych ram obrazka, jest on wtopiony w tło.

W formacie .gif możemy wykonać animację, np. za pomocą GIMPa.

Co jeszcze warto wiedzieć o obrazkach w dokumencie HTML

• Warto tutaj nadmienić, że najczęściej wygodniejszym sposobem osadzania i formatowania obrazków oraz sterowania "oblewania" obrazka tekstem jest zastosowanie stylów CSS.
• Obrazek może być odsyłaczem do innej strony co niebawem poznasz.
• Można stosować obrazek jako nagłówek h1..h6. W tym celu tworzymy następującą konstrukcję:
  <h2><img src="jakis_obrazek.jpg" alt="Opis obrazka" /></h2>.

Ćwiczenie 2_3_2_1

Przeanalizuj żródło tej strony, ze zwróceniem uwagi na wstawianie przykładowych obrazków. Wykonaj stronę, na której pokażesz obrazki ściągnięte z Internetu - w formacie .jpg, .png oraz animowany .gif.

Praca domowa

1. Wykonaj za pomocą GIMPa, prostego animowanego gifa. Zapisz obrazek w formacie .gif, a także w oryginalnym formacie GIMPa - .xcf
2. Wykonaj stronę, na której osadzisz wykonaną przez siebie animację