0:00:00.271,0:00:01.900
Весь час ми говорили[br]про кроликів,

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

0:00:05.800,0:00:09.228
але ми можемо просто додати зображення[br]на нашу сторінку

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

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

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

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

0:00:22.700,0:00:23.966
Чому?

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

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

0:00:29.284,0:00:31.469
і ми точно не хочемо, щоб наше[br]було обране навмання,

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

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

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

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

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

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

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

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

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

0:00:54.552,0:00:57.602
Ми не можемо просто взяти[br]і вставити зображення з комп'ютера.

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

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

0:01:03.137,0:01:06.037
використавши селектор зображень[br]в колекції фотографій.

0:01:06.246,0:01:07.967
Для того, щоб картинка з'явилася[br]на екрані,

0:01:07.967,0:01:10.735
ми маємо додати атрибут до [br]тега зображення.

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

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

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

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

0:01:19.714,0:01:22.945
ми маємо додати атрибут з іменем та [br]джерелом зображення.

0:01:22.945,0:01:26.490
Для цього ставимо пробіл після "img" [br]і друкуємо атрибут "src".

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

0:01:30.866,0:01:32.733
написати саме "src", тому що браузер [br]проігнорує

0:01:32.733,0:01:35.333
наше повідомлення, [br]якщо ми напишемо його неправильно.

0:01:35.733,0:01:38.700
Тепер мені потрібно поставити [br]знак "дорівнює", щоб сказати

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

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

0:01:44.925,0:01:47.286
автоматично їх закриє.

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

0:01:51.838,0:01:55.833
Гаразд, зазвичай, саме зараз ми б [br]мали ввести URL,

0:01:55.833,0:01:57.600
але на сайті Khan Academy,

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

0:02:00.135,0:02:04.024
Ми просто вибиремо зображення, [br]яке нам сподобається.[br]

0:02:04.024,0:02:06.630
Оскільки я хочу картинку кролика,[br]я натискаю на вкладку "Тварини",

0:02:06.630,0:02:08.871
обираю гарненького кролика[br]і тисну "ok".

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

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

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

0:02:17.666,0:02:19.666
вказує на певне зображення[br]в Інтернеті.

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

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

0:02:26.233,0:02:28.133
і браузер не може [br]завантажити картинку?

0:02:28.133,0:02:31.092
Як тоді глядач знатиме, як виглядала[br]моя чарівна картинка?

0:02:31.092,0:02:33.401
Вони нічого не побачать, і [br]їм буде цікаво

0:02:33.401,0:02:35.367
протягом всього життя, [br]що ж вони втратили.

0:02:35.867,0:02:39.433
Саме тому, тег  має [br]ще один атрибут - "alt",

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

0:02:41.066,0:02:44.108
сказати браузеру, яким є [br]альтернативний текст для зображення.

0:02:44.108,0:02:46.579
Щоб додати інший атрибут, [br]ми ставимо пробіл

0:02:46.579,0:02:49.510
після заключних лапок [br]останнього атрибута.

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

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

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

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

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

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

0:03:09.805,0:03:11.496
Вони використовують додаток [br]"скрінрідер",

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

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

0:03:15.701,0:03:18.478
Коли він побачить тег зображення,[br]він прочитає альтернативний[br]

0:03:18.478,0:03:21.335
текст, оскільки сліпі люди[br]не можуть бачити картинок.

0:03:21.335,0:03:24.317
Тому ви маєте завжди, завжди[br]використовувати додатковий текст,

0:03:24.317,0:03:28.076
щоб весь світ міг насолодитись[br]вашою веб-сторінкою.

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

0:03:31.233,0:03:32.893
Воно надто велике.

0:03:32.893,0:03:34.263
Змінімо його розмір.

0:03:34.263,0:03:36.206
Ми можемо це зробити за допомогою[br]інших атрибутів:

0:03:37.037,0:03:38.960
ширина (англ. "width") [br]та висота ("height").

0:03:38.960,0:03:43.159
Напишімо: "Ширина = 100".

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

0:03:47.171,0:03:49.423
Це трошки замало.

0:03:49.423,0:03:51.347
Поставимо курсор всередині

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

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

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

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

0:04:00.945,0:04:02.608
О-о!

0:04:02.608,0:04:05.401
Я роздавила свого кролика, [br]бідний кролик!

0:04:05.401,0:04:08.764
Бачите, саме тому вам краще[br]встановлювати лише

0:04:08.764,0:04:10.969
або ширину, або висоту,[br]а не обидва атрибути,

0:04:10.969,0:04:13.273
тому що ви можете задати[br]неправильні розміри

0:04:13.273,0:04:16.800
і роздавити своїх кроликів.[br]Тому краще дозвольте браузеру

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

0:04:20.884,0:04:22.500
Я зараз видалю висоту.

0:04:22.500,0:04:25.266
Тепер, коли ви можете вставляти [br]зображення, подумайте,

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

0:04:27.991,0:04:31.870
Наприклад, створити список з картинками[br]та абзацами:

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

0:04:33.264,0:04:35.448
Тільки не додавайте надто багато [br]картинок,

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

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

0:04:40.006,0:04:43.084
Але навіть так ви можете[br]добре повеселитись.

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