WEBVTT

00:00:00.271 --> 00:00:01.900
Na razie opisywaliśmy króliki

00:00:01.900 --> 00:00:05.800
za pomocą akapitów i list,

00:00:05.800 --> 00:00:09.228
a moglibyśmy po prostu
wstawić obrazek

00:00:09.228 --> 00:00:12.060
i pokazać, jak wygląda królik.

00:00:12.400 --> 00:00:16.149
Obraz umieszczamy na stronie
za pomocą znacznika „img”,

00:00:16.149 --> 00:00:19.466
od „image” (ang. obraz).

00:00:19.466 --> 00:00:22.700
Ale gdy wpiszemy samo „img”,
nic się nie pokaże.

00:00:22.700 --> 00:00:23.966
Dlaczego?

00:00:23.966 --> 00:00:27.511
Nie powiedzieliśmy przeglądarce,
który obraz wyświetlić.

00:00:27.511 --> 00:00:29.284
W sieci są ich miliony,

00:00:29.284 --> 00:00:31.469
a nie chcemy wybierać losowo:

00:00:31.469 --> 00:00:33.930
może się trafić coś wstrętnego,

00:00:34.699 --> 00:00:37.766
no i obraz nie będzie
przedstawiał tego, co powinien.

00:00:37.766 --> 00:00:40.925
Musimy podać przeglądarce
URL obrazu.

00:00:40.939 --> 00:00:43.073
Adres URL znajdziecie nad stroną,

00:00:43.073 --> 00:00:44.770
w pasku adresowym przeglądarki.

00:00:44.770 --> 00:00:46.874
Macie? Świetnie.

00:00:46.874 --> 00:00:49.301
Adres URL wskazuje na materiały,

00:00:50.485 --> 00:00:52.413
które są dostępne w sieci.

00:00:52.413 --> 00:00:54.552
Na stronie możecie umieścić
obraz dostępny w sieci,

00:00:54.552 --> 00:00:57.602
ale nie taki, który znajduje się
tylko w twoim komputerze.

00:00:58.233 --> 00:01:00.772
Obrazów można szukać
na wiele sposobów.

00:01:00.772 --> 00:01:03.137
Ułatwimy wam sprawę,

00:01:03.137 --> 00:01:06.037
zapewniając kolekcję zdjęć
do wyboru.

00:01:06.246 --> 00:01:07.967
Żeby dodać zdjęcie, dopiszemy

00:01:07.967 --> 00:01:10.735
atrybut do znacznika „img”.

00:01:10.735 --> 00:01:12.800
To dodatkowa informacja

00:01:12.800 --> 00:01:14.772
o znaczniku. Ten atrybut

00:01:14.772 --> 00:01:17.106
będzie pierwszym, który zobaczycie.

00:01:17.736 --> 00:01:19.714
Aby podać URL przeglądarce,

00:01:19.714 --> 00:01:22.945
dołożymy atrybut „source”
(ang. źródło),

00:01:22.945 --> 00:01:26.490
spacja i „src”.

00:01:28.337 --> 00:01:30.866
To oznacza „source”,
ale koniecznie

00:01:30.866 --> 00:01:32.733
wpiszcie „src”, bo przeglądarka

00:01:32.733 --> 00:01:35.333
zignoruje znacznik,
gdy będzie źle zapisany.

00:01:35.733 --> 00:01:38.700
Teraz znak równości,
żeby podać przeglądarce

00:01:38.700 --> 00:01:41.400
wartość atrybutu.

00:01:41.400 --> 00:01:44.925
Otworzę cudzysłów, a edytor

00:01:44.925 --> 00:01:47.286
automatycznie go zamknie.

00:01:47.286 --> 00:01:51.053
Wartości atrybutów
zawsze są w cudzysłowie.

00:01:51.838 --> 00:01:55.833
W tym momencie zwykle
wpisujemy URL,

00:01:55.833 --> 00:01:57.600
ale w portalu Khan Academy

00:01:57.600 --> 00:02:00.135
wyskoczy galeria zdjęć.

00:02:00.135 --> 00:02:04.024
Wybierzemy obrazek.
Chcę obrazek z królikiem,

00:02:04.024 --> 00:02:06.630
klikam na zwierzęta, wybieram

00:02:06.630 --> 00:02:08.871
ślicznego królika i zatwierdzam.

00:02:10.238 --> 00:02:13.089
Widzicie, że URL
jest w cudzysłowie

00:02:13.089 --> 00:02:16.300
i zaczyna się od „http”?

00:02:16.300 --> 00:02:17.666
Wiemy, że adres wskazuje

00:02:17.666 --> 00:02:19.666
jakiś obraz gdzieś w sieci.

00:02:19.666 --> 00:02:22.134
Patrzcie! Na mojej stronie
jest królik,

00:02:23.226 --> 00:02:26.233
ale co będzie, gdy serwer
ze zdjęciem przestanie działać

00:02:26.233 --> 00:02:28.133
i przeglądarka nie załaduje zdjęcia?

00:02:28.133 --> 00:02:31.092
Skąd użytkownik ma wiedzieć,
co przedstawiało?

00:02:31.092 --> 00:02:33.401
Nie zobaczy nic
i przez resztę życia

00:02:33.401 --> 00:02:35.367
będzie myślał o tym, co go ominęło.

00:02:35.867 --> 00:02:39.433
Dlatego znacznik „img”
ma inny atrybut, „alt”,

00:02:39.433 --> 00:02:41.066
który informuje przeglądarkę,

00:02:41.066 --> 00:02:44.108
jaki tekst ma zastąpić obraz.

00:02:44.108 --> 00:02:46.579
By dodać kolejny atrybut,
wstawiamy spację

00:02:46.579 --> 00:02:49.510
po cudzysłowie poprzedniego.

00:02:49.510 --> 00:02:53.635
Piszemy: alt=
i otwieramy cudzysłów.

00:02:53.635 --> 00:02:57.250
Tekst w cudzysłowie

00:02:57.250 --> 00:02:58.922
ma być opisem obrazka,

00:02:58.922 --> 00:03:03.746
np. „królik z opadniętymi
uszami w stodole".

00:03:04.858 --> 00:03:07.200
To pomoże osobom,
które przeglądają strony,

00:03:07.200 --> 00:03:09.805
lecz nie mogą ich przeczytać,
jak niedowidzący.

00:03:09.805 --> 00:03:11.496
Aplikacja „screen reader”

00:03:11.496 --> 00:03:13.613
przeczyta im stronę,

00:03:13.613 --> 00:03:15.701
z każdym znacznikiem.

00:03:15.701 --> 00:03:18.478
Gdy trafi na „img”,
odczyta tekst z „alt”,

00:03:18.478 --> 00:03:21.335
bo ktoś niedowidzący
nie obejrzy obrazów.

00:03:21.335 --> 00:03:24.317
Dlatego zawsze wpisujcie
„alt” i tekst,

00:03:24.317 --> 00:03:28.076
żeby wszyscy mogli się zapoznać
z waszymi stronami.

00:03:28.900 --> 00:03:31.233
Wróćmy do obrazka, który widać.

00:03:31.233 --> 00:03:32.893
Trochę za duży.

00:03:32.893 --> 00:03:34.263
Zmieńmy rozmiar.

00:03:34.263 --> 00:03:36.206
Posłużą temu kolejne atrybuty,

00:03:37.037 --> 00:03:38.960
np. szerokość lub wysokość.

00:03:38.960 --> 00:03:43.159
Dajmy: „Width=100”
(szerokość=100).

00:03:43.975 --> 00:03:47.171
Obraz ma 100 pikseli.

00:03:47.171 --> 00:03:49.423
Trochę za mały.

00:03:49.423 --> 00:03:51.347
Najedźmy kursorem

00:03:51.347 --> 00:03:53.900
i przeciągnijmy,
żeby powiększyć obrazek.

00:03:54.023 --> 00:03:56.572
Znacznie lepiej!

00:03:56.572 --> 00:03:58.603
Spróbujmy zmienić wysokość.

00:03:58.603 --> 00:04:00.945
Wpiszę: „height=50”
(wysokość=50).

00:04:00.945 --> 00:04:02.608
Oj!

00:04:02.608 --> 00:04:05.401
Zmiażdżyłam biednego króliczka!

00:04:05.401 --> 00:04:08.764
Dlatego powinno się określać

00:04:08.764 --> 00:04:10.969
albo szerokość, albo wysokość.
Nie obie naraz.

00:04:10.969 --> 00:04:13.273
Moglibyście się pomylić

00:04:13.273 --> 00:04:16.800
i pozgniatać króliki.
Niech przeglądarka

00:04:16.800 --> 00:04:20.884
sama obliczy pozostałe wymiary.

00:04:20.884 --> 00:04:22.500
Skasuję wysokość.

00:04:22.500 --> 00:04:25.266
Umiecie już wstawiać obrazy.
Teraz pomyślcie,

00:04:25.266 --> 00:04:27.971
jak połączyć wszystkie znaczniki:

00:04:27.971 --> 00:04:32.971
listy z obrazami i akapitami,
dziesiątkę szalonych zwierzaków…

00:04:33.301 --> 00:04:35.833
Tylko nie zamieszczajcie
zbyt wielu zdjęć,

00:04:35.833 --> 00:04:37.576
bo osoba oglądająca stronę

00:04:37.576 --> 00:04:40.006
będzie musiała czekać, 
aż wszystkie się załadują.

00:04:40.006 --> 00:04:42.938
Mimo to,
będziecie się dobrze bawić!