Emoji jako obrazki

Listy, linki i obrazki - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Zwykle obrazek wstawia się znacznikiem <img>, ale w naszym podglądzie nie wczytamy plików z internetu. Świetnym zastępstwem są emoji: to zwykłe znaki tekstu, więc wklejasz je wprost do kodu. Gdy emoji ma znaczenie, otocz je znacznikiem <span> z atrybutami role="img" i aria-label, aby czytnik ekranu przeczytał jego opis. Atrybut title pokaże podpowiedź po najechaniu myszką.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Emoji</title>
</head>
<body>
  <h1>Pogoda na tydzień</h1>
  <ul>
    <li><span role="img" aria-label="słońce" title="słonecznie">☀️</span> Poniedziałek: słonecznie</li>
    <li><span role="img" aria-label="chmura" title="pochmurno">☁️</span> Wtorek: pochmurno</li>
    <li><span role="img" aria-label="deszcz" title="deszczowo">🌧️</span> Środa: deszcz</li>
  </ul>
  <p><span role="img" aria-label="tęcza">🌈</span> Po deszczu często widać tęczę.</p>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.