Przykłady
Jak dodać obrazy do dokumentu HTML.
Wstawianie obrazów z różnych lokacji
Jak dodać obraz z innego folderu lub innego serwera.
Obrazy HTML - Znacznik <img> i atrybut Src
W języku HTML, obrazy są definiowane za pomocą znacznika <img>.Znacznik <img> jest pusty, co oznacza że zawiera on tylko atrybuty i nie ma znacznika zamykającego.
Żeby wyświetlić obrazek na stronie trzeba użyć atrybutu src. Src oznacza "source" (ang. źródło). Wartością atrybutu src jest URL (adres) grafiki, którą chcesz wyświetlić.
Składnia definiowania obrazu:
<img src="url" alt="jakiś_tekst">
Przeglądarka wyświetla obraz w miejscu gdzie w dokumencie występuje znacznik <img>. Jeśli umieścisz znacznik <img> pomiędzy dwoma akapitami, przeglądarka pokaże pierwszy akapit, potem obrazek, a następnie drugi akapit.
Obrazy HTML - Atrybut Alt
Wymagany atrybut alt określa alternatywny tekst dla obrazka, jeżeli nie można go wyświetlić.Wartością atrybutu alt jest tekst wymyślony przez autora strony:
<img src="boat.gif" alt="Duża Łódź">
Atrybut alt zapewnia alternatywną informację o obrazku jeżeli z jakichś powodów użytkownik nie może go zobaczyć ( wolne łącze, błąd w atrybucie src, lub jeśli użytkownik korzysta z czytnika ekranu).
Obrazy HTML - Ustawianie wysokości i szerokości obrazu
Do ustawienia wysokości i szerokości obrazka są używane atrybuty, odpowiednio height i width.Domyślną jednostką wartości atrybutów są piksele:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Wskazówka: Dobrą praktyką jest określenie obydwu atrybutów obrazu (szerokości i wysokości) naraz. Jeśli te atrybuty są ustawione, miejsce na obrazek zostaje zarezerwowane w chwili gdy strona się wczytuje. Bez tych atrybutów przeglądarka nie wie jaki rozmiar ma obrazek. Efektem jest zmieniający się wygląd strony w trakcie jej wczytywania (w chwili gdy wczytywany zostaje obrazek).
Wskazówki
Zapamiętaj: Jeżeli plik HTML zawiera 10 obrazków - do poprawnego wyświetlenia strony wymaganych jest 11 plików. Ładowanie obrazków zabiera trochę czasu, dlatego najlepiej używaj obrazków ostrożnie.Zapamiętaj: W chwili gdy ładowana jest strona, dzieje się to w przeglądarce (lokalnie), obrazki pobierane są z serwera i wklejane na stronę internetową. Zatem upewnij się że obrazki znajdują się w miejscach wskazywanych przez atrybut src, ponieważ w przeciwnym wypadku odwiedzający stronę zobaczą ikonę uszkodzonego linka. Ikona uszkodzonego linka jest pokazywana jeżeli przeglądarka nie może odnaleźć obrazka.
Więcej Przykładów
Jak wyrównać obrazek wewnątrz tekstu.
Ustawianie obrazu po lewej lub prawej stronie opływającego tekstu
Jak ustawić obrazek po lewej lub prawej stronie opływającego go tekstu.
Tworzenie hiperłącza z obrazka
Jak użyć obrazka jako łącza (linka).
Tworzenie mapy obrazka
Jak stworzyć mapę obrazka, z klikalnymi regionami. Każdy region to hiperłącze.
Znaczniki Obrazu HTML
| Znacznik | Opis |
|---|---|
| <img> | Definiuje obraz |
| <map> | Definiuje mapę obrazka |
| <area> | Definiuje klikalny obszar wewnątrz mapy obrazka |
