Obrazy HTML

Możesz wyświetlić obraz w dokumencie za pomocą HTML.

Przykład

Wstawianie obrazu
Ten przykład pokazuje, jak wyświetlić obraz na stronie internetowej.
Wstawianie obrazów z różnych lokalizacji
Ten przykład pokazuje, jak wyświetlić obrazy z innych folderów lub serwerów na stronie internetowej.

(Więcej przykładów można znaleźć na dole strony)

Etykieta obrazu (<img>) i atrybut źródłowy (Src)

W HTML obraz jest definiowany za pomocą etykiety <img>.

<img> to pusta etykieta, co oznacza, że zawiera tylko atrybuty i nie ma zamkniętej etykiety.

Aby wyświetlić obraz na stronie, musisz użyć atrybutu źródłowego (src). src oznacza "źródło". Wartością atrybutu źródłowego jest adres URL obrazu.

Gramatyka definiowania obrazu to:

<img src="url" />

URL wskazuje lokalizację przechowywania obrazu. Jeśli obraz o nazwie "boat.gif" znajduje się w katalogu "images" na www.codew3c.com, jego URL to http://www.codew3c.com/images/boat.gif.

Przeglądarka wyświetla obraz w miejscu, gdzie znajduje się etykieta obrazu w dokumencie. Jeśli umieścisz etykietę obrazu między dwoma akapitami, przeglądarka najpierw wyświetli pierwszy akapit, następnie obraz, a na końcu drugi akapit.

Zastąp atrybut tekstowy (Alt)

Atrybut alt służy do zdefiniowania sekwencji alternatywnego tekstu dla obrazu. Wartość atrybutu zastępczego tekstu jest definiowana przez użytkownika.

<img src="boat.gif" alt="Big Boat">

Gdy przeglądarka nie może załadować obrazu, atrybut zastępczy tekst informuje czytelników o utraconej informacji. W tym przypadku przeglądarka wyświetli ten alternatywny tekst zamiast obrazu. Dodać zastępczy tekst do wszystkich obrazów na stronie to dobry zwyczaj, który pomaga lepiej wyświetlać informacje i jest bardzo pomocny dla użytkowników przeglądarek tekstowych.

Podstawowe uwagi - przydatne wskazówki:

Jeśli plik HTML zawiera dziesięć obrazów, aby poprawnie wyświetlić stronę, musi załadować 11 plików. Ładowanie obrazów zajmuje czas, więc naszym zaleceniem jest: uważaj na użycie obrazów.

Więcej przykładów

Obraz tła
Ten przykład pokazuje, jak dodać obraz tła do strony HTML.
Wstawianie obrazów
Ten przykład pokazuje, jak wstawiać obrazy w tekście.
Przykład obrazu
Ten przykład pokazuje, jak umieścić obraz w lewym lub prawym marginesie akapitu.
Dostosowanie rozmiaru obrazu
Ten przykład pokazuje, jak dostosować rozmiar obrazu.
Wyświetlanie zastępczego tekstu dla obrazu
Ten przykład pokazuje, jak wyświetlić zastępczy tekst dla obrazu. W przypadku, gdy przeglądarka nie może załadować obrazu, atrybut zastępczy tekst informuje czytelników o utraconej informacji. Dodać zastępczy tekst do wszystkich obrazów na stronie to dobry zwyczaj, który pomaga lepiej wyświetlać informacje i jest bardzo pomocny dla użytkowników przeglądarek tekstowych.
Tworzenie linku obrazu
Ten przykład pokazuje, jak używać obrazu jako linku.
Tworzenie mapy obrazu
Ten przykład pokazuje, jak utworzyć mapę obrazu z klikalnymi obszarami. Każdy obszar jest hiperlinkiem.
Konwersja obrazu na mapę obrazu
Ten przykład pokazuje, jak zmienić zwykły obraz w mapę obrazu.

Znak obrazu

Znak Opis
<img> Zdefiniuj obraz.
<map> Zdefiniuj mapę obrazu.
<area> Zdefiniuj klikalne obszary mapy obrazu.