Lekcja 9: Obrazki

Czy nie było by wspaniale mieć możliwość umieszczania obrazków na swojej stronie?

Brzmi jak wyzwanie...

Możliwe, ale w praktyce jest to bardzo łatwe. Wszystko czego potrzebujesz to element:

Przykład 1:


<img src="david.jpg" alt="David" />

będzie wyglądał następująco w przeglądarce:

Jedyne co musisz zrobić to powiedzieć przeglądarce, że chcesz umieścić obrazek (img) i gdzie obrazek jest zlokalizowany (src, skrót od "Źródło"). Wiesz już o co chodzi?

Zauważ jak element img jest otwierany i zamykany przy użyciu tego zamego znacznika. Tak jak znacznik <br /> , nie jest on związany z tekstem.

"david.jpg" to nazwa pliku obrazka który chcemy umieścić na stronie. ".jpg" to typ obrazka. Tak jak rozszerzenie ".htm" oznacza dokument HTML, tak ".jpg" mówi przeglądarce że plikiem jest obrazek. Istnieją trzy różne typy plików obrazków które możesz umieścić na stronie:

GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

Obrazki GIF są często najlepszym rozwiązaniem dla orzedstawiania grafiki i rysunków, podczas gdy JPEG wykorzystywany jest przy fotografiach. Istnieją dwa powody takiego zachowania: Po pierwsze, obrazki GIF mogą składać się z maksymalnie 256 kolorów, podczas gdy obrazki JPEG mogą zawierać miliony kolorów. Po drugie, format GIF lepiej kompresuje prostą grafikę, natomiast format JPEG jest optymalny dla złożonych obrazków. Im większa kompresja, tym mniejsza wielkość pliku obrazka, i mniejszy czas ładowania strony. Pewnie wiesz z własnego doświadczenia, że 'ciężkie' strony potrafią być bardzo męczące dla użytkownika.

Tradycyjnie, formaty GIF i JPEG są dominującymi typami obrazków, ale prawdopodobnie, format PNG staje się coraz bardziej popularny (przede wszystkim z powodu kosztów formatu GIF). Format PNG zawiera pod wieloma względami cechy formatu JPEG oraz GIF: miliony kolorów i efektywna kompresja.

Skąd mam wziąść mój obrazek?

Aby zrobić swój własny obrazek, potrzebujesz edytora graficznego. Edytor graficzny to najistotniejszy program jakim będziesz się posługiwał przy tworzeniu pięknych stron Internetowych.

Niestety, żaden dobry edytor graficzny nie jest dostarczony wraz z systemem Windows lub innym. Z tego powodu, spróbuj skorzystać z programu takiego jak np. Paint Shop Pro, PhotoShop lub Macromedia Fireworks. Te trzy programy to najlepsze edytory graficzne aktualnie dostępne na rynku.

Jednakże, jak wcześniej powiedziałem, nie jest konieczne zakupienie drogich programów aby ukończyć ten kurs. Narazie, możesz ściągnąć wspaniały edytor graficzny o nazwie IfranView który jest tak zwanym programm typu 'freeware'. Jak sama nazwa wskazuję jest on darmowy.

Albo możesz po prostu porzyczyć zdjęcia z innych stron ściągając je. Ale proszę bądź ostrożny i nie łam przepisów prawnych ściągając zdjęcia. Wytłumaczymy teraz jak ściągać zdjęcia z Internetu:

Kliknij prawym przyciskiem myszki na obrazek na stronie.
Wybierz "Zapisz obrazek jako ..." w menu które się pojawi.
Wybierz miejsce gdzie chcesz zapisać swój obrazek i naciśnij "Zapisz ".

Zrób tak z obrazkiem poniżej i zapisz go na swoim komputerze w tym samym miejscu gdzie umieszczasz swoje dokumenty HTML. (Zauważ że plik jest zapisany w formacie PNG: logo.png):

Teraz możesz umieścić obrazek na swojej stronie internetowej. Spróbuj sam.

Czy to wszystko co muszę wiedzieć na temat obrazków?

Jest jeszczę parę spraw o których musisz się dowiedzieć.

Po pierwsze, możesz z łatwością umieścić obrazek w innym folderze, lub nawet obrazek zamieszczony na innej stronie Internetowej:

Przykład 2:


<img src="images/logo.png" />

Przykład 3:


<img src="http://www.html.net/logo.png" />

Po drugie, obrazek może być odnośnikiem:

Przykład 4:


<a href="http://www.html.net">
<img src="logo.png" /></a>

będzie wyglądał następująco w przeglądarce (kliknij na obrazek):

Czy są jeszcze inne atrybuty o których powinienem wiedzieć?

Zawsze musisz używać atrybutu src, który określa położenie obrazka umieszczanego na stronie. Poza tym, jest parę innych atrybutów które mogą być użyteczne podczas umieszczania obrazków.

Atrybut alt używamy aby dodać alternatywny opis do obrazka, wykorzystywany w przypadku, gdy z jakiegoś powodu obrazek nie zostanie pokazany na stronie. To jest wyjątkowo ważne dla użytkowników z gorszym wzrokiem, lub gdy strona ładuje się bardzo wolno. Z tego powodu, zawsze używaj atrybutu alt:

Przykład 5:


<img src="logo.png" alt="Logo HTML.net" />

Niektóre przeglądarki w przypadku najechania kursorem myszy na obrazek wyświetlają małe okienko z wartością tego atrybutu umieszczoną jako tekst w tym okienku. Proszę zapamiętaj że celem atrybutu alt jest dostarczenie alternatywnego opisu obrazka. Atrybut alt nie powinien być używany do wyświetlania specjalnej wiadomości typu pop-up (wyskakującej) gdyż użytkownicy o słabym wzroku usłyszą tą wiadomość ale nie będą wiedzieć co przedstawia obrazek.

Atrybut title może być używany aby dodawać informację do obrazka:

Przykład 6:


<img src="logo.png" title="Ucz się języka HTML na stronie HTML.net" />

Będzie tak wyglądał w przeglądarce:

Jeżeli, bez klikania, umieścisz kursor nad obrazkiem, zobaczysz tekst "Ucz się języka HTML na stronie HTML.net" wyświetlony w specjalnym wyskakującym okienku.

Dwa dodatkowe ważne atrybuty to width i height:

Przykład 7:


<img src="logo.png" width="141" height="32" />

Będzie tak wyglądał w przeglądarce:

Atrybuty width i height mogą zostać użyte do określenia szerokości oraz wysokości obrazka. Wartość użyta w tych atrybutach wyrażona jest w pikselach. Piksele to jednostka miary używana do określania rozdzielczości ekranu. (Najczęściej używamy rozdzielczości: 1024x768 pikseli). Odwrotnie niż w przypadku centymetrów, piksele to relatywna jednostka miary która zależna jest od rozdzielczości ekranu. Dla użytkownika z wysoką rozdzielczością ekranu, 25 pikseli może oznaczać 1 centymetr na ekranie, podczas gdy te same 25 pikseli w przypadku małej rozdzielczości mogą oznaczać 1.5 centymetra na ekranie.

Jeżeli nie ustawisz szerokości i wysokości, obrazek zostanie umieszczony z aktualną wielkością. Dzięki szerokości i wysokości możesz manipulować wielkością:

Przykład 8:


<img src="logo.png" width="32" height="32" />

Będzie tak wyglądał w przeglądarce:

Także, warto zapamiętać że wielkość pliku obrazka będzie taka sama i nie zmieni szybkości ładowania strony, nawet jeżeli zmniejszysz rozmiar obrazka na stronie. Z tego powodu, nie powinieneś nigdy zmniejszać rozmiaru obrazka za pomocą atrybutów width oraz height. Zamiast tego, powinieneś zawsze zmieniać rozmiar obrazka w edytorze graficznym jeżeli chcesz żeby strona ładowała się szybciej.

Tak jak powiedziałem, nadal dobrym pomysłem jest używanie atrybutów width oraz height ponieważ przeglądarka będzie mogła wykryć ile miejsca potrzebuje na umieszczenie obrazka zanim załaduje do końca plik obrazka. To pozwala przeglądarce ustawić stronę ładnie i w szybki sposób.

Narazie wystarczy o Dawidzie Hasselhoff i obrazkach.