WEBVTT

00:00:00.271 --> 00:00:01.900
Весь час ми говорили
про кроликів,

00:00:01.900 --> 00:00:05.800
описували їх за допомогою 
абзаців та списків,

00:00:05.800 --> 00:00:09.228
але ми можемо просто додати зображення
на нашу сторінку

00:00:09.228 --> 00:00:12.060
і насправді показати,
як виглядають кролики.

00:00:12.400 --> 00:00:16.149
Щоб вставити зображення
на веб-сторінку, потрібно використати

00:00:16.149 --> 00:00:19.466
тег , який, як ви вже здогадались, 
означає зображення (англ. image).

00:00:19.466 --> 00:00:22.700
Якщо ми просто напишемо "image",
ми нічого не побачимо.

00:00:22.700 --> 00:00:23.966
Чому?

00:00:23.966 --> 00:00:27.511
Тому що ми не сказали браузеру, яке саме 
зображення показувати.

00:00:27.511 --> 00:00:29.284
В Інтернеті є мільйони зображень,

00:00:29.284 --> 00:00:31.469
і ми точно не хочемо, щоб наше
було обране навмання,

00:00:31.469 --> 00:00:33.930
тому що це може бути якась гидота

00:00:34.699 --> 00:00:37.766
або просто щось таке, що нам не потрібне.

00:00:37.766 --> 00:00:40.925
Ми маємо вказати URL зображення.

00:00:40.939 --> 00:00:43.073
URL – це те, що вказано вгорі браузера

00:00:43.073 --> 00:00:44.770
в адресній стрічці,

00:00:44.770 --> 00:00:46.874
і це те, що нам потрібно – адреса.

00:00:46.874 --> 00:00:49.301
Це спосіб знайти певні джерела
в Інтернеті,

00:00:50.485 --> 00:00:52.413
і це означає, що ми можемо вставити
зображення,

00:00:52.413 --> 00:00:54.552
лише якщо воно є десь в Інтернеті.

00:00:54.552 --> 00:00:57.602
Ми не можемо просто взяти
і вставити зображення з комп'ютера.

00:00:58.233 --> 00:01:00.772
Існує багато способів знайти 
зображення в Інтернеті,

00:01:00.772 --> 00:01:03.137
але ми зробимо це простіше,

00:01:03.137 --> 00:01:06.037
використавши селектор зображень
в колекції фотографій.

00:01:06.246 --> 00:01:07.967
Для того, щоб картинка з'явилася
на екрані,

00:01:07.967 --> 00:01:10.735
ми маємо додати атрибут до 
тега зображення.

00:01:10.735 --> 00:01:12.800
Атрибут – це додаткова інформація про тег.

00:01:12.800 --> 00:01:14.772
І це перший атрибут,

00:01:14.772 --> 00:01:17.106
з яким ми зустрічаємось.

00:01:17.736 --> 00:01:19.714
Щоб сказати браузеру URL-адресу,

00:01:19.714 --> 00:01:22.945
ми маємо додати атрибут з іменем та 
джерелом зображення.

00:01:22.945 --> 00:01:26.490
Для цього ставимо пробіл після "img" 
і друкуємо атрибут "src".

00:01:28.337 --> 00:01:30.866
"Src" - означає "джерело" (англ. source), 
однак дуже важливо

00:01:30.866 --> 00:01:32.733
написати саме "src", тому що браузер 
проігнорує

00:01:32.733 --> 00:01:35.333
наше повідомлення, 
якщо ми напишемо його неправильно.

00:01:35.733 --> 00:01:38.700
Тепер мені потрібно поставити 
знак "дорівнює", щоб сказати

00:01:38.700 --> 00:01:41.400
браузеру, яким є значення цього атрибута.

00:01:41.400 --> 00:01:44.925
Зараз я відкрию лапки, а редактор

00:01:44.925 --> 00:01:47.286
автоматично їх закриє.

00:01:47.286 --> 00:01:51.053
Пам'ятайте, шо значення атрибута завжди
береться в лапки.

00:01:51.838 --> 00:01:55.833
Гаразд, зазвичай, саме зараз ми б 
мали ввести URL,

00:01:55.833 --> 00:01:57.600
але на сайті Khan Academy,

00:01:57.600 --> 00:02:00.135
зараз з'явиться селектор зображень.

00:02:00.135 --> 00:02:04.024
Ми просто вибиремо зображення, 
яке нам сподобається.


00:02:04.024 --> 00:02:06.630
Оскільки я хочу картинку кролика,
я натискаю на вкладку "Тварини",

00:02:06.630 --> 00:02:08.871
обираю гарненького кролика
і тисну "ok".

00:02:10.238 --> 00:02:13.089
Ви бачите, що в лапках з'явилася
URL-адреса,

00:02:13.089 --> 00:02:16.300
і починається вона з "http"?

00:02:16.300 --> 00:02:17.666
Саме так ми знаємо, що вона

00:02:17.666 --> 00:02:19.666
вказує на певне зображення
в Інтернеті.

00:02:19.666 --> 00:02:22.134
Хей, погляньте, на моїй сторінці 
з'явився кролик.

00:02:23.226 --> 00:02:26.233
Але що як сервер, на якому знаходиться 
зображення, "впав",

00:02:26.233 --> 00:02:28.133
і браузер не може 
завантажити картинку?

00:02:28.133 --> 00:02:31.092
Як тоді глядач знатиме, як виглядала
моя чарівна картинка?

00:02:31.092 --> 00:02:33.401
Вони нічого не побачать, і 
їм буде цікаво

00:02:33.401 --> 00:02:35.367
протягом всього життя, 
що ж вони втратили.

00:02:35.867 --> 00:02:39.433
Саме тому, тег  має 
ще один атрибут - "alt",

00:02:39.433 --> 00:02:41.066
який ми використовуємо, щоб

00:02:41.066 --> 00:02:44.108
сказати браузеру, яким є 
альтернативний текст для зображення.

00:02:44.108 --> 00:02:46.579
Щоб додати інший атрибут, 
ми ставимо пробіл

00:02:46.579 --> 00:02:49.510
після заключних лапок 
останнього атрибута.

00:02:49.510 --> 00:02:53.635
Потім ми друкуємо атрибут alt = "",

00:02:53.635 --> 00:02:57.250
і всередині лапок пишемо текст, який

00:02:57.250 --> 00:02:58.922
є описом зображення,

00:02:58.922 --> 00:03:03.746
наприклад "Клаповухий кролик в сараї".

00:03:04.858 --> 00:03:07.200
Це також допомагає людям, 
які переглядають веб-сторінки,

00:03:07.200 --> 00:03:09.805
але не можуть насправді їх бачити, 
наприклад, сліпим.

00:03:09.805 --> 00:03:11.496
Вони використовують додаток 
"скрінрідер",

00:03:11.496 --> 00:03:13.613
який дослівно читає їм сторінку,

00:03:13.613 --> 00:03:15.701
описуючи всі теги, які бачить.

00:03:15.701 --> 00:03:18.478
Коли він побачить тег зображення,
він прочитає альтернативний


00:03:18.478 --> 00:03:21.335
текст, оскільки сліпі люди
не можуть бачити картинок.

00:03:21.335 --> 00:03:24.317
Тому ви маєте завжди, завжди
використовувати додатковий текст,

00:03:24.317 --> 00:03:28.076
щоб весь світ міг насолодитись
вашою веб-сторінкою.

00:03:28.900 --> 00:03:31.233
Гаразд, повернімось до нашого зображення.

00:03:31.233 --> 00:03:32.893
Воно надто велике.

00:03:32.893 --> 00:03:34.263
Змінімо його розмір.

00:03:34.263 --> 00:03:36.206
Ми можемо це зробити за допомогою
інших атрибутів:

00:03:37.037 --> 00:03:38.960
ширина (англ. "width") 
та висота ("height").

00:03:38.960 --> 00:03:43.159
Напишімо: "Ширина = 100".

00:03:43.975 --> 00:03:47.171
Тепер ширина – 100 пікселів.

00:03:47.171 --> 00:03:49.423
Це трошки замало.

00:03:49.423 --> 00:03:51.347
Поставимо курсор всередині

00:03:51.347 --> 00:03:53.900
і використаймо скрабер чисел, 
щоб збільшити зображення.

00:03:54.023 --> 00:03:56.572
Добре, так трохи краще.

00:03:56.572 --> 00:03:58.603
тепер, спробуймо додати висоти.

00:03:58.603 --> 00:04:00.945
Я просто напишу "Висота = 50".

00:04:00.945 --> 00:04:02.608
О-о!

00:04:02.608 --> 00:04:05.401
Я роздавила свого кролика, 
бідний кролик!

00:04:05.401 --> 00:04:08.764
Бачите, саме тому вам краще
встановлювати лише

00:04:08.764 --> 00:04:10.969
або ширину, або висоту,
а не обидва атрибути,

00:04:10.969 --> 00:04:13.273
тому що ви можете задати
неправильні розміри

00:04:13.273 --> 00:04:16.800
і роздавити своїх кроликів.
Тому краще дозвольте браузеру

00:04:16.800 --> 00:04:20.884
зайнятись математикою і вирішити,
яким має бути другий атрибут.

00:04:20.884 --> 00:04:22.500
Я зараз видалю висоту.

00:04:22.500 --> 00:04:25.266
Тепер, коли ви можете вставляти 
зображення, подумайте,

00:04:25.266 --> 00:04:27.971
як можна поєднати теги, які ви знаєте.

00:04:27.991 --> 00:04:31.870
Наприклад, створити список з картинками
та абзацами:

00:04:31.870 --> 00:04:33.264
"Топ-10 найбожевільніших тваринок".

00:04:33.264 --> 00:04:35.448
Тільки не додавайте надто багато 
картинок,

00:04:35.448 --> 00:04:37.576
тому що людина, яка переглядатиме
вашу веб-сторінку,

00:04:37.576 --> 00:04:40.006
буде змушена їх всі завантажити.

00:04:40.006 --> 00:04:43.084
Але навіть так ви можете
добре повеселитись.

00:04:43.084 --> 00:04:47.364
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"