Obrazy
Kurs HTML · Wyjaśnienie, przykłady, oczekiwany wynik i ćwiczenie.
Znacznik <img> osadza obraz w dokumencie.
Jak to działa?
Atrybut src wskazuje plik, a alt opisuje istotną zawartość obrazu dla osób korzystających z czytników ekranu. width i height pomagają zarezerwować miejsce na obraz.
Przykład 1 — poznaj zapis
<img src="images/kot.jpg"
alt="Rudy kot odpoczywający na kanapie"
width="640" height="420">Plik images/kot.jpg musi istnieć pod podaną ścieżką.
Przeczytaj kod linijka po linijce
<img src="images/kot.jpg"Dodajemy obraz i jego opis alternatywny.
Obraz po wczytaniu pliku; tekst alternatywny opisuje zdjęcie.
Przykład 2 — podobny problem, inne dane
Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.
<img src="foto.jpg" alt="Uśmiechnięta osoba przy laptopie">Jeśli plik istnieje, widać zdjęcie; w przeciwnym razie opis alternatywny.
Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.
Spróbuj samodzielnie
Dodaj obraz z opisem alt odpowiadającym jego treści.
Jeśli rozumiesz przykład, oznacz lekcję jako ukończoną i przejdź dalej.