Dodawanie obrazów w HTML

Na razie opisywaliśmy króliki

za pomocą akapitów i list,

a moglibyśmy po prostu
wstawić obrazek

i pokazać, jak wygląda królik.

Obraz umieszczamy na stronie
za pomocą znacznika „img”,

od „image” (ang. obraz).

Ale gdy wpiszemy samo „img”,
nic się nie pokaże.

Dlaczego?

Nie powiedzieliśmy przeglądarce,
który obraz wyświetlić.

W sieci są ich miliony,

a nie chcemy wybierać losowo:

może się trafić coś wstrętnego,

no i obraz nie będzie
przedstawiał tego, co powinien.

Musimy podać przeglądarce
URL obrazu.

Adres URL znajdziecie nad stroną,

w pasku adresowym przeglądarki.

Macie? Świetnie.

Adres URL wskazuje na materiały,

które są dostępne w sieci.

Na stronie możecie umieścić
obraz dostępny w sieci,

ale nie taki, który znajduje się
tylko w twoim komputerze.

Obrazów można szukać
na wiele sposobów.

Ułatwimy wam sprawę,

zapewniając kolekcję zdjęć
do wyboru.

Żeby dodać zdjęcie, dopiszemy

atrybut do znacznika „img”.

To dodatkowa informacja

o znaczniku. Ten atrybut

będzie pierwszym, który zobaczycie.

Aby podać URL przeglądarce,

dołożymy atrybut „source”
(ang. źródło),

spacja i „src”.

To oznacza „source”,
ale koniecznie

wpiszcie „src”, bo przeglądarka

zignoruje znacznik,
gdy będzie źle zapisany.

Teraz znak równości,
żeby podać przeglądarce

wartość atrybutu.

Otworzę cudzysłów, a edytor

automatycznie go zamknie.

Wartości atrybutów
zawsze są w cudzysłowie.

W tym momencie zwykle
wpisujemy URL,

ale w portalu Khan Academy

wyskoczy galeria zdjęć.

Wybierzemy obrazek.
Chcę obrazek z królikiem,

klikam na zwierzęta, wybieram

ślicznego królika i zatwierdzam.

Widzicie, że URL
jest w cudzysłowie

i zaczyna się od „http”?

Wiemy, że adres wskazuje

jakiś obraz gdzieś w sieci.

Patrzcie! Na mojej stronie
jest królik,

ale co będzie, gdy serwer
ze zdjęciem przestanie działać

i przeglądarka nie załaduje zdjęcia?

Skąd użytkownik ma wiedzieć,
co przedstawiało?

Nie zobaczy nic
i przez resztę życia

będzie myślał o tym, co go ominęło.

Dlatego znacznik „img”
ma inny atrybut, „alt”,

który informuje przeglądarkę,

jaki tekst ma zastąpić obraz.

By dodać kolejny atrybut,
wstawiamy spację

po cudzysłowie poprzedniego.

Piszemy: alt=
i otwieramy cudzysłów.

Tekst w cudzysłowie

ma być opisem obrazka,

np. „królik z opadniętymi
uszami w stodole".

To pomoże osobom,
które przeglądają strony,

lecz nie mogą ich przeczytać,
jak niedowidzący.

Aplikacja „screen reader”

przeczyta im stronę,

z każdym znacznikiem.

Gdy trafi na „img”,
odczyta tekst z „alt”,

bo ktoś niedowidzący
nie obejrzy obrazów.

Dlatego zawsze wpisujcie
„alt” i tekst,

żeby wszyscy mogli się zapoznać
z waszymi stronami.

Wróćmy do obrazka, który widać.

Trochę za duży.

Zmieńmy rozmiar.

Posłużą temu kolejne atrybuty,

np. szerokość lub wysokość.

Dajmy: „Width=100”
(szerokość=100).

Obraz ma 100 pikseli.

Trochę za mały.

Najedźmy kursorem

i przeciągnijmy,
żeby powiększyć obrazek.

Znacznie lepiej!

Spróbujmy zmienić wysokość.

Wpiszę: „height=50”
(wysokość=50).

Oj!

Zmiażdżyłam biednego króliczka!

Dlatego powinno się określać

albo szerokość, albo wysokość.
Nie obie naraz.

Moglibyście się pomylić

i pozgniatać króliki.
Niech przeglądarka

sama obliczy pozostałe wymiary.

Skasuję wysokość.

Umiecie już wstawiać obrazy.
Teraz pomyślcie,

jak połączyć wszystkie znaczniki:

listy z obrazami i akapitami,
dziesiątkę szalonych zwierzaków…

Tylko nie zamieszczajcie
zbyt wielu zdjęć,

bo osoba oglądająca stronę

będzie musiała czekać,
aż wszystkie się załadują.

Mimo to,
będziecie się dobrze bawić!