Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

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.

Pracownia informatyczna
Rysunek 2_3_2_1. Osadzenie obrazka w formacie .jpg.

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

Pracownia informatyczna
Rysunek 2_3_2_2. Osadzenie obrazka w formacie .png.

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

Animowany gif
Rysunek 2_3_2_3. Animowany gif.

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ę

Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.