Obrazy JPG
GIF
PNG
Przykład
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Spróbuj sam " Zawsze określić szerokość i wysokość obrazu. Jeżeli szerokość i wysokość nie są określone, strona będzie migać podczas obciążeń graficznych.
Składnia HTML Images
W HTML, obrazy są zdefiniowane z <img> tagu.
<img> tag jest pusty, zawiera tylko atrybuty, a nie posiada znacznika zamykającego.
src atrybut określa URL (web address) z obrazka:
<img src=" url " alt=" some_text ">alt Atrybut
alt atrybut określa alternatywny tekst dla obrazu, jeśli obraz nie może zostać wyświetlona.
alt atrybut zapewnia alternatywną informacje o obrazie, jeśli użytkownik z jakiegoś powodu nie można go zobaczyć (z powodu powolnego połączenia, błąd w src atrybutu, lub jeśli użytkownik korzysta z czytnika ekranu).
Jeśli przeglądarka nie może znaleźć obraz, będzie on wyświetlany tekst alt:
alt jest wymagany atrybut. Strona internetowa nie potwierdzi poprawnie bez niego.
HTML czytniki ekranu
Czytnik ekranu jest to program, który można odczytać, co jest wyświetlane na ekranie.
Czytniki ekranu są użyteczne dla osób niewidomych, niedowidzących lub uczących się osób niepełnosprawnych.
Czytniki ekranu można odczytać alt atrybut.
Wielkość obrazu - szerokość i wysokość
Można użyć style atrybut, aby określić szerokość i wysokość obrazu.
Wartości podane są w pikselach (use px after the value) :
Alternatywnie, można użyć width i height atrybuty. Tutaj, wartości są określone w pikselach domyślnie:
Szerokość i wysokość lub styl?
Zarówno szerokość, wysokość i atrybuty stylu obowiązują w najnowszym standardzie HTML5.
Proponujemy użyć style atrybut. Zapobiega to style arkuszy zmianę oryginalnego rozmiaru obrazów:
Przykład
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> Spróbuj sam " Obrazy w innym folderze
Jeśli nie podano, przeglądarka spodziewa się znaleźć obraz w tym samym folderze co strona WWW.
Jednak powszechne jest przechowywanie obrazów w podkatalogu. Następnie należy zawierać nazwę folderu w src atrybutu:
Przykład
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Spróbuj sam " Obrazy na innym serwerze
Niektóre strony internetowe przechowują swoje obrazy na serwerach graficznych.
Faktycznie, można uzyskać dostęp do obrazów z dowolnego adresu WWW na świecie:
animacjami
Standardowo pozwala animowanych obrazów GIF:
Przykład
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Spróbuj sam " Zauważ, że składnia wstawianie animowanych obrazów nie różni się od innych animowanych obrazów.
Używanie obrazu jako link
Aby użyć obrazu jako link, po prostu zagnieździć <img> tag wewnątrz <a> tagu:
Przykład
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Spróbuj sam " Dodaj "border:0;" aby zapobiec IE9 (and earlier) wyświetlanie obramowanie wokół obrazu.
Obraz Pływający
Użyj właściwości CSS pływaka pozwolić pływaka obrazu.
Obraz może unosić się na prawo lub na lewo od tekstu:
Przykład
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> Spróbuj sam " obraz mapy
Użyj <map> tag w celu określenia obrazu-mapy. Obraz-map jest obraz z obszarów klikalne.
name atrybutem <map> znacznik jest związany z <img> „s atrybut Usemap i tworzy relację między obrazem i mapy.
<map> tag zawiera szereg <area> tagów, który definiuje klikalne obszary obrazu-mapy:
Przykład
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> Spróbuj sam " Podsumowanie rozdziału
- Użyj HTML <img> elementu do zdefiniowania obrazu
- Użyj HTML src atrybut, aby określić adres URL obrazu
- Użyj HTML alt atrybut zdefiniować alternatywny tekst na obrazie, jeśli nie może zostać wyświetlona
- Użyj HTML width i height atrybuty, aby określić rozmiar obrazu
- Używać CSS width i height właściwości, aby określić rozmiar obrazu (alternatively)
- Użyj CSS float własność pozwolić pływaka obrazu
- Użyj HTML <map> elementem do zdefiniowania obrazu-mapy
- Użyj HTML <area> elementu zdefiniowanie klikalne obszary w obrazie-mapie
- Użyj HTML <img> „s elementu usemap przypisują wskazują na zdjęciu-mapie
Ładowanie zdjęć wymaga czasu. Duże obrazy mogą spowolnić swoją stronę. Używaj ostrożnie obrazów.
Sprawdź się z ćwiczeniami!
Zadanie 1 » ćwiczenia 2» Zadanie 3 » ćwiczenia 4» ćwiczenia 5 » ćwiczenia 6»
HTML: Tagi
| Etykietka | Opis |
|---|---|
| <img> | Określa obraz |
| <map> | Definiuje obrazu-mapy |
| <area> | Definiuje klikalny obszar wewnątrz obrazu-mapy |