0:00:00.271,0:00:01.900
Na razie opisywaliśmy króliki

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

0:00:05.800,0:00:09.228
a moglibyśmy po prostu[br]wstawić obrazek

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

0:00:12.400,0:00:16.149
Obraz umieszczamy na stronie[br]za pomocą znacznika „img”,

0:00:16.149,0:00:19.466
od „image” (ang. obraz).

0:00:19.466,0:00:22.700
Ale gdy wpiszemy samo „img”,[br]nic się nie pokaże.

0:00:22.700,0:00:23.966
Dlaczego?

0:00:23.966,0:00:27.511
Nie powiedzieliśmy przeglądarce,[br]który obraz wyświetlić.

0:00:27.511,0:00:29.284
W sieci są ich miliony,

0:00:29.284,0:00:31.469
a nie chcemy wybierać losowo:

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

0:00:34.699,0:00:37.766
no i obraz nie będzie[br]przedstawiał tego, co powinien.

0:00:37.766,0:00:40.925
Musimy podać przeglądarce[br]URL obrazu.

0:00:40.939,0:00:43.073
Adres URL znajdziecie nad stroną,

0:00:43.073,0:00:44.770
w pasku adresowym przeglądarki.

0:00:44.770,0:00:46.874
Macie? Świetnie.

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

0:00:50.485,0:00:52.413
które są dostępne w sieci.

0:00:52.413,0:00:54.552
Na stronie możecie umieścić[br]obraz dostępny w sieci,

0:00:54.552,0:00:57.602
ale nie taki, który znajduje się[br]tylko w twoim komputerze.

0:00:58.233,0:01:00.772
Obrazów można szukać[br]na wiele sposobów.

0:01:00.772,0:01:03.137
Ułatwimy wam sprawę,

0:01:03.137,0:01:06.037
zapewniając kolekcję zdjęć[br]do wyboru.

0:01:06.246,0:01:07.967
Żeby dodać zdjęcie, dopiszemy

0:01:07.967,0:01:10.735
atrybut do znacznika „img”.

0:01:10.735,0:01:12.800
To dodatkowa informacja

0:01:12.800,0:01:14.772
o znaczniku. Ten atrybut

0:01:14.772,0:01:17.106
będzie pierwszym, który zobaczycie.

0:01:17.736,0:01:19.714
Aby podać URL przeglądarce,

0:01:19.714,0:01:22.945
dołożymy atrybut „source”[br](ang. źródło),

0:01:22.945,0:01:26.490
spacja i „src”.

0:01:28.337,0:01:30.866
To oznacza „source”,[br]ale koniecznie

0:01:30.866,0:01:32.733
wpiszcie „src”, bo przeglądarka

0:01:32.733,0:01:35.333
zignoruje znacznik,[br]gdy będzie źle zapisany.

0:01:35.733,0:01:38.700
Teraz znak równości,[br]żeby podać przeglądarce

0:01:38.700,0:01:41.400
wartość atrybutu.

0:01:41.400,0:01:44.925
Otworzę cudzysłów, a edytor

0:01:44.925,0:01:47.286
automatycznie go zamknie.

0:01:47.286,0:01:51.053
Wartości atrybutów[br]zawsze są w cudzysłowie.

0:01:51.838,0:01:55.833
W tym momencie zwykle[br]wpisujemy URL,

0:01:55.833,0:01:57.600
ale w portalu Khan Academy

0:01:57.600,0:02:00.135
wyskoczy galeria zdjęć.

0:02:00.135,0:02:04.024
Wybierzemy obrazek.[br]Chcę obrazek z królikiem,

0:02:04.024,0:02:06.630
klikam na zwierzęta, wybieram

0:02:06.630,0:02:08.871
ślicznego królika i zatwierdzam.

0:02:10.238,0:02:13.089
Widzicie, że URL[br]jest w cudzysłowie

0:02:13.089,0:02:16.300
i zaczyna się od „http”?

0:02:16.300,0:02:17.666
Wiemy, że adres wskazuje

0:02:17.666,0:02:19.666
jakiś obraz gdzieś w sieci.

0:02:19.666,0:02:22.134
Patrzcie! Na mojej stronie[br]jest królik,

0:02:23.226,0:02:26.233
ale co będzie, gdy serwer[br]ze zdjęciem przestanie działać

0:02:26.233,0:02:28.133
i przeglądarka nie załaduje zdjęcia?

0:02:28.133,0:02:31.092
Skąd użytkownik ma wiedzieć,[br]co przedstawiało?

0:02:31.092,0:02:33.401
Nie zobaczy nic[br]i przez resztę życia

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

0:02:35.867,0:02:39.433
Dlatego znacznik „img”[br]ma inny atrybut, „alt”,

0:02:39.433,0:02:41.066
który informuje przeglądarkę,

0:02:41.066,0:02:44.108
jaki tekst ma zastąpić obraz.

0:02:44.108,0:02:46.579
By dodać kolejny atrybut,[br]wstawiamy spację

0:02:46.579,0:02:49.510
po cudzysłowie poprzedniego.

0:02:49.510,0:02:53.635
Piszemy: alt=[br]i otwieramy cudzysłów.

0:02:53.635,0:02:57.250
Tekst w cudzysłowie

0:02:57.250,0:02:58.922
ma być opisem obrazka,

0:02:58.922,0:03:03.746
np. „królik z opadniętymi[br]uszami w stodole".

0:03:04.858,0:03:07.200
To pomoże osobom,[br]które przeglądają strony,

0:03:07.200,0:03:09.805
lecz nie mogą ich przeczytać,[br]jak niedowidzący.

0:03:09.805,0:03:11.496
Aplikacja „screen reader”

0:03:11.496,0:03:13.613
przeczyta im stronę,

0:03:13.613,0:03:15.701
z każdym znacznikiem.

0:03:15.701,0:03:18.478
Gdy trafi na „img”,[br]odczyta tekst z „alt”,

0:03:18.478,0:03:21.335
bo ktoś niedowidzący[br]nie obejrzy obrazów.

0:03:21.335,0:03:24.317
Dlatego zawsze wpisujcie[br]„alt” i tekst,

0:03:24.317,0:03:28.076
żeby wszyscy mogli się zapoznać[br]z waszymi stronami.

0:03:28.900,0:03:31.233
Wróćmy do obrazka, który widać.

0:03:31.233,0:03:32.893
Trochę za duży.

0:03:32.893,0:03:34.263
Zmieńmy rozmiar.

0:03:34.263,0:03:36.206
Posłużą temu kolejne atrybuty,

0:03:37.037,0:03:38.960
np. szerokość lub wysokość.

0:03:38.960,0:03:43.159
Dajmy: „Width=100”[br](szerokość=100).

0:03:43.975,0:03:47.171
Obraz ma 100 pikseli.

0:03:47.171,0:03:49.423
Trochę za mały.

0:03:49.423,0:03:51.347
Najedźmy kursorem

0:03:51.347,0:03:53.900
i przeciągnijmy,[br]żeby powiększyć obrazek.

0:03:54.023,0:03:56.572
Znacznie lepiej!

0:03:56.572,0:03:58.603
Spróbujmy zmienić wysokość.

0:03:58.603,0:04:00.945
Wpiszę: „height=50”[br](wysokość=50).

0:04:00.945,0:04:02.608
Oj!

0:04:02.608,0:04:05.401
Zmiażdżyłam biednego króliczka!

0:04:05.401,0:04:08.764
Dlatego powinno się określać

0:04:08.764,0:04:10.969
albo szerokość, albo wysokość.[br]Nie obie naraz.

0:04:10.969,0:04:13.273
Moglibyście się pomylić

0:04:13.273,0:04:16.800
i pozgniatać króliki.[br]Niech przeglądarka

0:04:16.800,0:04:20.884
sama obliczy pozostałe wymiary.

0:04:20.884,0:04:22.500
Skasuję wysokość.

0:04:22.500,0:04:25.266
Umiecie już wstawiać obrazy.[br]Teraz pomyślcie,

0:04:25.266,0:04:27.971
jak połączyć wszystkie znaczniki:

0:04:27.971,0:04:32.971
listy z obrazami i akapitami,[br]dziesiątkę szalonych zwierzaków…

0:04:33.301,0:04:35.833
Tylko nie zamieszczajcie[br]zbyt wielu zdjęć,

0:04:35.833,0:04:37.576
bo osoba oglądająca stronę

0:04:37.576,0:04:40.006
będzie musiała czekać, [br]aż wszystkie się załadują.

0:04:40.006,0:04:42.938
Mimo to,[br]będziecie się dobrze bawić!