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ć!