[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.27,0:00:01.90,Default,,0000,0000,0000,,Весь час ми говорили\Nпро кроликів,
Dialogue: 0,0:00:01.90,0:00:05.80,Default,,0000,0000,0000,,описували їх за допомогою \Nабзаців та списків,
Dialogue: 0,0:00:05.80,0:00:09.23,Default,,0000,0000,0000,,але ми можемо просто додати зображення\Nна нашу сторінку
Dialogue: 0,0:00:09.23,0:00:12.06,Default,,0000,0000,0000,,і насправді показати,\Nяк виглядають кролики.
Dialogue: 0,0:00:12.40,0:00:16.15,Default,,0000,0000,0000,,Щоб вставити зображення\Nна веб-сторінку, потрібно використати
Dialogue: 0,0:00:16.15,0:00:19.47,Default,,0000,0000,0000,,тег , який, як ви вже здогадались, \Nозначає зображення (англ. image).
Dialogue: 0,0:00:19.47,0:00:22.70,Default,,0000,0000,0000,,Якщо ми просто напишемо "image",\Nми нічого не побачимо.
Dialogue: 0,0:00:22.70,0:00:23.97,Default,,0000,0000,0000,,Чому?
Dialogue: 0,0:00:23.97,0:00:27.51,Default,,0000,0000,0000,,Тому що ми не сказали браузеру, яке саме \Nзображення показувати.
Dialogue: 0,0:00:27.51,0:00:29.28,Default,,0000,0000,0000,,В Інтернеті є мільйони зображень,
Dialogue: 0,0:00:29.28,0:00:31.47,Default,,0000,0000,0000,,і ми точно не хочемо, щоб наше\Nбуло обране навмання,
Dialogue: 0,0:00:31.47,0:00:33.93,Default,,0000,0000,0000,,тому що це може бути якась гидота
Dialogue: 0,0:00:34.70,0:00:37.77,Default,,0000,0000,0000,,або просто щось таке, що нам не потрібне.
Dialogue: 0,0:00:37.77,0:00:40.92,Default,,0000,0000,0000,,Ми маємо вказати URL зображення.
Dialogue: 0,0:00:40.94,0:00:43.07,Default,,0000,0000,0000,,URL – це те, що вказано вгорі браузера
Dialogue: 0,0:00:43.07,0:00:44.77,Default,,0000,0000,0000,,в адресній стрічці,
Dialogue: 0,0:00:44.77,0:00:46.87,Default,,0000,0000,0000,,і це те, що нам потрібно – адреса.
Dialogue: 0,0:00:46.87,0:00:49.30,Default,,0000,0000,0000,,Це спосіб знайти певні джерела\Nв Інтернеті,
Dialogue: 0,0:00:50.48,0:00:52.41,Default,,0000,0000,0000,,і це означає, що ми можемо вставити\Nзображення,
Dialogue: 0,0:00:52.41,0:00:54.55,Default,,0000,0000,0000,,лише якщо воно є десь в Інтернеті.
Dialogue: 0,0:00:54.55,0:00:57.60,Default,,0000,0000,0000,,Ми не можемо просто взяти\Nі вставити зображення з комп'ютера.
Dialogue: 0,0:00:58.23,0:01:00.77,Default,,0000,0000,0000,,Існує багато способів знайти \Nзображення в Інтернеті,
Dialogue: 0,0:01:00.77,0:01:03.14,Default,,0000,0000,0000,,але ми зробимо це простіше,
Dialogue: 0,0:01:03.14,0:01:06.04,Default,,0000,0000,0000,,використавши селектор зображень\Nв колекції фотографій.
Dialogue: 0,0:01:06.25,0:01:07.97,Default,,0000,0000,0000,,Для того, щоб картинка з'явилася\Nна екрані,
Dialogue: 0,0:01:07.97,0:01:10.74,Default,,0000,0000,0000,,ми маємо додати атрибут до \Nтега зображення.
Dialogue: 0,0:01:10.74,0:01:12.80,Default,,0000,0000,0000,,Атрибут – це додаткова інформація про тег.
Dialogue: 0,0:01:12.80,0:01:14.77,Default,,0000,0000,0000,,І це перший атрибут,
Dialogue: 0,0:01:14.77,0:01:17.11,Default,,0000,0000,0000,,з яким ми зустрічаємось.
Dialogue: 0,0:01:17.74,0:01:19.71,Default,,0000,0000,0000,,Щоб сказати браузеру URL-адресу,
Dialogue: 0,0:01:19.71,0:01:22.94,Default,,0000,0000,0000,,ми маємо додати атрибут з іменем та \Nджерелом зображення.
Dialogue: 0,0:01:22.94,0:01:26.49,Default,,0000,0000,0000,,Для цього ставимо пробіл після "img" \Nі друкуємо атрибут "src".
Dialogue: 0,0:01:28.34,0:01:30.87,Default,,0000,0000,0000,,"Src" - означає "джерело" (англ. source), \Nоднак дуже важливо
Dialogue: 0,0:01:30.87,0:01:32.73,Default,,0000,0000,0000,,написати саме "src", тому що браузер \Nпроігнорує
Dialogue: 0,0:01:32.73,0:01:35.33,Default,,0000,0000,0000,,наше повідомлення, \Nякщо ми напишемо його неправильно.
Dialogue: 0,0:01:35.73,0:01:38.70,Default,,0000,0000,0000,,Тепер мені потрібно поставити \Nзнак "дорівнює", щоб сказати
Dialogue: 0,0:01:38.70,0:01:41.40,Default,,0000,0000,0000,,браузеру, яким є значення цього атрибута.
Dialogue: 0,0:01:41.40,0:01:44.92,Default,,0000,0000,0000,,Зараз я відкрию лапки, а редактор
Dialogue: 0,0:01:44.92,0:01:47.29,Default,,0000,0000,0000,,автоматично їх закриє.
Dialogue: 0,0:01:47.29,0:01:51.05,Default,,0000,0000,0000,,Пам'ятайте, шо значення атрибута завжди\Nбереться в лапки.
Dialogue: 0,0:01:51.84,0:01:55.83,Default,,0000,0000,0000,,Гаразд, зазвичай, саме зараз ми б \Nмали ввести URL,
Dialogue: 0,0:01:55.83,0:01:57.60,Default,,0000,0000,0000,,але на сайті Khan Academy,
Dialogue: 0,0:01:57.60,0:02:00.14,Default,,0000,0000,0000,,зараз з'явиться селектор зображень.
Dialogue: 0,0:02:00.14,0:02:04.02,Default,,0000,0000,0000,,Ми просто вибиремо зображення, \Nяке нам сподобається.\N
Dialogue: 0,0:02:04.02,0:02:06.63,Default,,0000,0000,0000,,Оскільки я хочу картинку кролика,\Nя натискаю на вкладку "Тварини",
Dialogue: 0,0:02:06.63,0:02:08.87,Default,,0000,0000,0000,,обираю гарненького кролика\Nі тисну "ok".
Dialogue: 0,0:02:10.24,0:02:13.09,Default,,0000,0000,0000,,Ви бачите, що в лапках з'явилася\NURL-адреса,
Dialogue: 0,0:02:13.09,0:02:16.30,Default,,0000,0000,0000,,і починається вона з "http"?
Dialogue: 0,0:02:16.30,0:02:17.67,Default,,0000,0000,0000,,Саме так ми знаємо, що вона
Dialogue: 0,0:02:17.67,0:02:19.67,Default,,0000,0000,0000,,вказує на певне зображення\Nв Інтернеті.
Dialogue: 0,0:02:19.67,0:02:22.13,Default,,0000,0000,0000,,Хей, погляньте, на моїй сторінці \Nз'явився кролик.
Dialogue: 0,0:02:23.23,0:02:26.23,Default,,0000,0000,0000,,Але що як сервер, на якому знаходиться \Nзображення, "впав",
Dialogue: 0,0:02:26.23,0:02:28.13,Default,,0000,0000,0000,,і браузер не може \Nзавантажити картинку?
Dialogue: 0,0:02:28.13,0:02:31.09,Default,,0000,0000,0000,,Як тоді глядач знатиме, як виглядала\Nмоя чарівна картинка?
Dialogue: 0,0:02:31.09,0:02:33.40,Default,,0000,0000,0000,,Вони нічого не побачать, і \Nїм буде цікаво
Dialogue: 0,0:02:33.40,0:02:35.37,Default,,0000,0000,0000,,протягом всього життя, \Nщо ж вони втратили.
Dialogue: 0,0:02:35.87,0:02:39.43,Default,,0000,0000,0000,,Саме тому, тег  має \Nще один атрибут - "alt",
Dialogue: 0,0:02:39.43,0:02:41.07,Default,,0000,0000,0000,,який ми використовуємо, щоб
Dialogue: 0,0:02:41.07,0:02:44.11,Default,,0000,0000,0000,,сказати браузеру, яким є \Nальтернативний текст для зображення.
Dialogue: 0,0:02:44.11,0:02:46.58,Default,,0000,0000,0000,,Щоб додати інший атрибут, \Nми ставимо пробіл
Dialogue: 0,0:02:46.58,0:02:49.51,Default,,0000,0000,0000,,після заключних лапок \Nостаннього атрибута.
Dialogue: 0,0:02:49.51,0:02:53.64,Default,,0000,0000,0000,,Потім ми друкуємо атрибут alt = "",
Dialogue: 0,0:02:53.64,0:02:57.25,Default,,0000,0000,0000,,і всередині лапок пишемо текст, який
Dialogue: 0,0:02:57.25,0:02:58.92,Default,,0000,0000,0000,,є описом зображення,
Dialogue: 0,0:02:58.92,0:03:03.75,Default,,0000,0000,0000,,наприклад "Клаповухий кролик в сараї".
Dialogue: 0,0:03:04.86,0:03:07.20,Default,,0000,0000,0000,,Це також допомагає людям, \Nякі переглядають веб-сторінки,
Dialogue: 0,0:03:07.20,0:03:09.80,Default,,0000,0000,0000,,але не можуть насправді їх бачити, \Nнаприклад, сліпим.
Dialogue: 0,0:03:09.80,0:03:11.50,Default,,0000,0000,0000,,Вони використовують додаток \N"скрінрідер",
Dialogue: 0,0:03:11.50,0:03:13.61,Default,,0000,0000,0000,,який дослівно читає їм сторінку,
Dialogue: 0,0:03:13.61,0:03:15.70,Default,,0000,0000,0000,,описуючи всі теги, які бачить.
Dialogue: 0,0:03:15.70,0:03:18.48,Default,,0000,0000,0000,,Коли він побачить тег зображення,\Nвін прочитає альтернативний\N
Dialogue: 0,0:03:18.48,0:03:21.34,Default,,0000,0000,0000,,текст, оскільки сліпі люди\Nне можуть бачити картинок.
Dialogue: 0,0:03:21.34,0:03:24.32,Default,,0000,0000,0000,,Тому ви маєте завжди, завжди\Nвикористовувати додатковий текст,
Dialogue: 0,0:03:24.32,0:03:28.08,Default,,0000,0000,0000,,щоб весь світ міг насолодитись\Nвашою веб-сторінкою.
Dialogue: 0,0:03:28.90,0:03:31.23,Default,,0000,0000,0000,,Гаразд, повернімось до нашого зображення.
Dialogue: 0,0:03:31.23,0:03:32.89,Default,,0000,0000,0000,,Воно надто велике.
Dialogue: 0,0:03:32.89,0:03:34.26,Default,,0000,0000,0000,,Змінімо його розмір.
Dialogue: 0,0:03:34.26,0:03:36.21,Default,,0000,0000,0000,,Ми можемо це зробити за допомогою\Nінших атрибутів:
Dialogue: 0,0:03:37.04,0:03:38.96,Default,,0000,0000,0000,,ширина (англ. "width") \Nта висота ("height").
Dialogue: 0,0:03:38.96,0:03:43.16,Default,,0000,0000,0000,,Напишімо: "Ширина = 100".
Dialogue: 0,0:03:43.98,0:03:47.17,Default,,0000,0000,0000,,Тепер ширина – 100 пікселів.
Dialogue: 0,0:03:47.17,0:03:49.42,Default,,0000,0000,0000,,Це трошки замало.
Dialogue: 0,0:03:49.42,0:03:51.35,Default,,0000,0000,0000,,Поставимо курсор всередині
Dialogue: 0,0:03:51.35,0:03:53.90,Default,,0000,0000,0000,,і використаймо скрабер чисел, \Nщоб збільшити зображення.
Dialogue: 0,0:03:54.02,0:03:56.57,Default,,0000,0000,0000,,Добре, так трохи краще.
Dialogue: 0,0:03:56.57,0:03:58.60,Default,,0000,0000,0000,,тепер, спробуймо додати висоти.
Dialogue: 0,0:03:58.60,0:04:00.94,Default,,0000,0000,0000,,Я просто напишу "Висота = 50".
Dialogue: 0,0:04:00.94,0:04:02.61,Default,,0000,0000,0000,,О-о!
Dialogue: 0,0:04:02.61,0:04:05.40,Default,,0000,0000,0000,,Я роздавила свого кролика, \Nбідний кролик!
Dialogue: 0,0:04:05.40,0:04:08.76,Default,,0000,0000,0000,,Бачите, саме тому вам краще\Nвстановлювати лише
Dialogue: 0,0:04:08.76,0:04:10.97,Default,,0000,0000,0000,,або ширину, або висоту,\Nа не обидва атрибути,
Dialogue: 0,0:04:10.97,0:04:13.27,Default,,0000,0000,0000,,тому що ви можете задати\Nнеправильні розміри
Dialogue: 0,0:04:13.27,0:04:16.80,Default,,0000,0000,0000,,і роздавити своїх кроликів.\NТому краще дозвольте браузеру
Dialogue: 0,0:04:16.80,0:04:20.88,Default,,0000,0000,0000,,зайнятись математикою і вирішити,\Nяким має бути другий атрибут.
Dialogue: 0,0:04:20.88,0:04:22.50,Default,,0000,0000,0000,,Я зараз видалю висоту.
Dialogue: 0,0:04:22.50,0:04:25.27,Default,,0000,0000,0000,,Тепер, коли ви можете вставляти \Nзображення, подумайте,
Dialogue: 0,0:04:25.27,0:04:27.97,Default,,0000,0000,0000,,як можна поєднати теги, які ви знаєте.
Dialogue: 0,0:04:27.99,0:04:31.87,Default,,0000,0000,0000,,Наприклад, створити список з картинками\Nта абзацами:
Dialogue: 0,0:04:31.87,0:04:33.26,Default,,0000,0000,0000,,"Топ-10 найбожевільніших тваринок".
Dialogue: 0,0:04:33.26,0:04:35.45,Default,,0000,0000,0000,,Тільки не додавайте надто багато \Nкартинок,
Dialogue: 0,0:04:35.45,0:04:37.58,Default,,0000,0000,0000,,тому що людина, яка переглядатиме\Nвашу веб-сторінку,
Dialogue: 0,0:04:37.58,0:04:40.01,Default,,0000,0000,0000,,буде змушена їх всі завантажити.
Dialogue: 0,0:04:40.01,0:04:43.08,Default,,0000,0000,0000,,Але навіть так ви можете\Nдобре повеселитись.
Dialogue: 0,0:04:43.08,0:04:47.36,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"