InnoMarts logo
InnoMarts
Fast websites
← Back to course

Obrazy i Media

Obrazy i Media

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się łączyć strony za pomocą linków i nawigacji.

Teraz dodamy obrazy.

Bo tekst jest potężny.

Ale czasem jeden obraz wyjaśnia coś szybciej niż pięć akapitów i mały kryzys emocjonalny.

Obrazy sprawiają, że strony są bardziej wizualne, bardziej osobiste i łatwiejsze do zrozumienia.

Ale trzeba je dodawać poprawnie.

Inaczej przeglądarka pokaże ikonę zepsutego obrazka.

A ta mała ikonka to sposób przeglądarki na powiedzenie:

“Próbowałem, ale dałeś mi chaos.”

Czego Się Nauczysz

W tej lekcji nauczysz się:

Element img

Obrazy dodajemy za pomocą elementu img.

Przykład:

<img src="cat.jpg" alt="Ładny kot siedzący na krześle">

Tag img nie potrzebuje tagu zamykającego.

To nie jest potrzebne:

</img>

Element obrazu zwykle ma dwa bardzo ważne atrybuty:

Małe atrybuty.

Duże konsekwencje.

Jak zapomnieć jednej śrubki przy składaniu krzesła.

Atrybut src

Atrybut src mówi przeglądarce, gdzie znajduje się plik obrazu.

Przykład:

<img src="photo.jpg" alt="Górski krajobraz">

To znaczy:

Znajdź plik photo.jpg i pokaż go tutaj.

Jeśli obraz jest w tym samym folderze co plik HTML, to działa:

project/
  index.html
  photo.jpg

HTML:

<img src="photo.jpg" alt="Górski krajobraz">

Prosto.

Czysto.

Bez dramatu.

Rzadki moment w web developmencie.

Obrazy w Folderach

Zwykle obrazy przechowuje się w folderze.

Przykład:

project/
  index.html
  images/
    profile.jpg

Aby pokazać profile.jpg, napisz:

<img src="images/profile.jpg" alt="Portret osoby">

Ścieżka musi pasować do prawdziwej lokalizacji obrazu.

Jeśli folder nazywa się images, nie pisz image.

Jeśli plik nazywa się profile.jpg, nie pisz Profile.jpg.

Komputery są surowe.

Potrafią wykonywać miliony operacji na sekundę, ale nadal obrażają się o jedną wielką literę.

Atrybut alt

Atrybut alt daje tekst alternatywny dla obrazu.

Przykład:

<img src="dog.jpg" alt="Brązowy pies bawiący się w parku">

Tekst alt jest używany, gdy:

Dobry tekst alt opisuje znaczenie obrazu.

Nie tylko nazwę pliku.

Źle:

<img src="dog.jpg" alt="pies">

Lepiej:

<img src="dog.jpg" alt="Brązowy pies bawiący się w parku">

Dobry alt to nie dekoracja.

To dostępność.

A dostępność nie jest opcjonalna, jeśli chcesz budować porządne strony.

Obrazy Dekoracyjne

Czasami obraz jest tylko dekoracyjny.

Na przykład wzór tła albo mała ozdoba wizualna.

W takim przypadku możesz użyć pustego alt:

<img src="decoration.png" alt="">

To mówi czytnikom ekranu:

Ten obraz jest dekoracyjny. Możesz go pominąć.

Ale ostrożnie.

Nie używaj pustego alt dla obrazów, które mają znaczenie.

Jeśli obraz przekazuje informację, opisz go.

Jeśli jest tylko dekoracją, pusty alt jest akceptowalny.

HTML jest prosty.

Ale oczekuje uczciwości.

Szerokość i Wysokość

Możesz ustawić szerokość i wysokość obrazu:

<img src="profile.jpg" alt="Portret osoby" width="300" height="300">

To mówi przeglądarce, jaki rozmiar ma obraz.

Może pomóc stronie ładować układ bardziej stabilnie.

Ale nie rozciągaj obrazów losowo.

Możesz sprawić, że ludzie będą wyglądać, jakby zaatakowała ich drukarka.

Jeśli oryginalny obraz jest kwadratowy, użyj kwadratowych wymiarów.

Jeśli oryginalny obraz jest szeroki, użyj szerokich wymiarów.

Szanuj obraz.

Obraz ma uczucia.

Prawdopodobnie nie.

Ale i tak.

Stwórz Stronę do Ćwiczeń

Stwórz nowy plik:

touch images.html

Stwórz folder images:

mkdir images

Włóż obraz do folderu i nazwij go:

profile.jpg

Teraz napisz to w images.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ćwiczenie Obrazów</title>
</head>
<body>
  <h1>Ćwiczenie Obrazów</h1>

  <p>Ta strona pokazuje, jak dodać obraz w HTML.</p>

  <img src="images/profile.jpg" alt="Zdjęcie profilowe dla strony ćwiczeniowej" width="300">

  <p>Obraz powyżej jest ładowany z folderu images.</p>
</body>
</html>

Otwórz plik w przeglądarce.

Jeśli obraz się pojawi, świetnie.

Jeśli nie, sprawdź ścieżkę.

Przeglądarka nie jest zła.

Ona się tylko zgubiła.

Popularne Formaty Obrazów

Popularne formaty obrazów to:

Używaj .jpg dla zdjęć.

Używaj .png, gdy potrzebujesz przezroczystości albo ostrej grafiki.

Używaj .webp dla nowoczesnych, zoptymalizowanych obrazów.

Używaj .svg dla logo i ikon, jeśli to możliwe.

Używaj .gif ostrożnie.

Jeden animowany gif może być zabawny.

Dwadzieścia animowanych gifów może zmienić stronę w cyfrowy cyrk.

Nazwy Plików Obrazów

Używaj prostych nazw plików.

Dobrze:

profile.jpg
hero-image.webp
course-cover.png

Źle:

My Final Image NEW VERSION 222!!!.jpg
photo from phone (copy).jpeg
IMG_20240318_174433.jpg

Proste nazwy są łatwiejsze w użyciu.

Używaj małych liter.

Używaj myślników zamiast spacji.

Przykład:

my-profile-photo.jpg

Nie:

my profile photo.jpg

Spacje w nazwach plików mogą powodować irytujące problemy.

A irytujących problemów mamy już wystarczająco.

Internet dostarcza je codziennie.

Obrazy Zewnętrzne

Możesz też użyć obrazu z innej strony:

<img src="https://example.com/photo.jpg" alt="Przykładowy obraz">

Ale uważaj.

Zewnętrzne obrazy mogą zniknąć.

Inna strona może je zablokować.

Mogą ładować się wolno.

Dla własnej strony zwykle lepiej przechowywać obrazy w projekcie.

Twoje pliki.

Twoja kontrola.

Twoje małe królestwo.

Obrazy i Linki

Obraz może być też wewnątrz linku.

Przykład:

<a href="about.html">
  <img src="images/profile.jpg" alt="Przejdź do strony o mnie" width="200">
</a>

Teraz obraz jest klikalny.

To przydatne dla logo, kart, galerii i wizualnej nawigacji.

Ale tekst alt powinien opisywać cel linku.

Nie tylko obraz.

Jeśli kliknięcie obrazu prowadzi do strony “O mnie”, tekst alt powinien to wyjaśniać.

Figure i Figcaption

HTML ma figure i figcaption dla obrazów z podpisami.

Przykład:

<figure>
  <img src="images/mountain.jpg" alt="Górski krajobraz o wschodzie słońca" width="500">
  <figcaption>Górski krajobraz o wschodzie słońca.</figcaption>
</figure>

Używaj tego, gdy obraz potrzebuje widocznego podpisu.

Tekst alt pomaga dostępności.

figcaption daje widoczne wyjaśnienie wszystkim.

Są powiązane.

Ale to nie jest to samo.

Podstawowe Media: Audio i Video

HTML może też pokazywać audio i video.

Przykład audio:

<audio controls>
  <source src="audio/song.mp3" type="audio/mpeg">
  Twoja przeglądarka nie obsługuje elementu audio.
</audio>

Przykład video:

<video controls width="500">
  <source src="videos/demo.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje elementu video.
</video>

Atrybut controls pokazuje play, pauzę i głośność.

Bez controls użytkownicy mogą nie mieć kontroli nad mediami.

A nikt nie lubi strony, która zachowuje się jak radio opętane przez ducha.

Częste Błędy

Zła Ścieżka Obrazu

Jeśli plik jest tutaj:

images/profile.jpg

Nie pisz:

<img src="profile.jpg" alt="Zdjęcie profilowe">

Użyj:

<img src="images/profile.jpg" alt="Zdjęcie profilowe">

Ścieżka musi pasować do lokalizacji pliku.

Brak alt

To jest złe:

<img src="profile.jpg">

Lepiej:

<img src="profile.jpg" alt="Zdjęcie profilowe właściciela strony">

Zawsze myśl o alt.

Nawet jeśli tekst jest pusty dla obrazów dekoracyjnych.

Ogromne Obrazy

Nie wrzucaj gigantycznych obrazów bez myślenia.

Zdjęcie 10 MB może spowolnić stronę.

Wolne strony są bolesne.

Użytkownicy nie czekają.

Odchodzą.

Jak koty, gdy próbujesz wyjaśnić JavaScript.

Praktyka

Stwórz stronę o nazwie:

gallery.html

Powinna zawierać:

Użyj folderu images.

Zachowaj proste nazwy plików.

Bez CSS.

Bez JavaScriptu.

Tylko czysty HTML.

Mini Wyzwanie

Stwórz prostą stronę osobistą z:

Użyj znaczącego tekstu alt.

Nie pisz alt="image".

To nie jest użyteczne.

To HTML-owa wersja wzruszenia ramionami.

Podsumowanie

Dzisiaj nauczyłeś się, że:

Obrazy sprawiają, że strony są bardziej żywe.

Ale tylko wtedy, gdy są używane poprawnie.

Dobry obraz wspiera treść.

Zły obraz po prostu siedzi tam jak zdezorientowany ziemniak.

Następna Lekcja

W następnej lekcji poznamy tabele.

Tabele nie są do layoutu.

Tabele są do danych.

Bardzo ważne.

Bardzo często nadużywane.

Będziemy surowi.