< Return to Video

Додавання зображень за допомогою HTML (Відео версія)

  • 0:00 - 0:02
    Весь час ми говорили
    про кроликів,
  • 0:02 - 0:06
    описували їх за допомогою
    абзаців та списків,
  • 0:06 - 0:09
    але ми можемо просто додати зображення
    на нашу сторінку
  • 0:09 - 0:12
    і насправді показати,
    як виглядають кролики.
  • 0:12 - 0:16
    Щоб вставити зображення
    на веб-сторінку, потрібно використати
  • 0:16 - 0:19
    тег , який, як ви вже здогадались,
    означає зображення (англ. image).
  • 0:19 - 0:23
    Якщо ми просто напишемо "image",
    ми нічого не побачимо.
  • 0:23 - 0:24
    Чому?
  • 0:24 - 0:28
    Тому що ми не сказали браузеру, яке саме
    зображення показувати.
  • 0:28 - 0:29
    В Інтернеті є мільйони зображень,
  • 0:29 - 0:31
    і ми точно не хочемо, щоб наше
    було обране навмання,
  • 0:31 - 0:34
    тому що це може бути якась гидота
  • 0:35 - 0:38
    або просто щось таке, що нам не потрібне.
  • 0:38 - 0:41
    Ми маємо вказати URL зображення.
  • 0:41 - 0:43
    URL – це те, що вказано вгорі браузера
  • 0:43 - 0:45
    в адресній стрічці,
  • 0:45 - 0:47
    і це те, що нам потрібно – адреса.
  • 0:47 - 0:49
    Це спосіб знайти певні джерела
    в Інтернеті,
  • 0:50 - 0:52
    і це означає, що ми можемо вставити
    зображення,
  • 0:52 - 0:55
    лише якщо воно є десь в Інтернеті.
  • 0:55 - 0:58
    Ми не можемо просто взяти
    і вставити зображення з комп'ютера.
  • 0:58 - 1:01
    Існує багато способів знайти
    зображення в Інтернеті,
  • 1:01 - 1:03
    але ми зробимо це простіше,
  • 1:03 - 1:06
    використавши селектор зображень
    в колекції фотографій.
  • 1:06 - 1:08
    Для того, щоб картинка з'явилася
    на екрані,
  • 1:08 - 1:11
    ми маємо додати атрибут до
    тега зображення.
  • 1:11 - 1:13
    Атрибут – це додаткова інформація про тег.
  • 1:13 - 1:15
    І це перший атрибут,
  • 1:15 - 1:17
    з яким ми зустрічаємось.
  • 1:18 - 1:20
    Щоб сказати браузеру URL-адресу,
  • 1:20 - 1:23
    ми маємо додати атрибут з іменем та
    джерелом зображення.
  • 1:23 - 1:26
    Для цього ставимо пробіл після "img"
    і друкуємо атрибут "src".
  • 1:28 - 1:31
    "Src" - означає "джерело" (англ. source),
    однак дуже важливо
  • 1:31 - 1:33
    написати саме "src", тому що браузер
    проігнорує
  • 1:33 - 1:35
    наше повідомлення,
    якщо ми напишемо його неправильно.
  • 1:36 - 1:39
    Тепер мені потрібно поставити
    знак "дорівнює", щоб сказати
  • 1:39 - 1:41
    браузеру, яким є значення цього атрибута.
  • 1:41 - 1:45
    Зараз я відкрию лапки, а редактор
  • 1:45 - 1:47
    автоматично їх закриє.
  • 1:47 - 1:51
    Пам'ятайте, шо значення атрибута завжди
    береться в лапки.
  • 1:52 - 1:56
    Гаразд, зазвичай, саме зараз ми б
    мали ввести URL,
  • 1:56 - 1:58
    але на сайті Khan Academy,
  • 1:58 - 2:00
    зараз з'явиться селектор зображень.
  • 2:00 - 2:04
    Ми просто вибиремо зображення,
    яке нам сподобається.
  • 2:04 - 2:07
    Оскільки я хочу картинку кролика,
    я натискаю на вкладку "Тварини",
  • 2:07 - 2:09
    обираю гарненького кролика
    і тисну "ok".
  • 2:10 - 2:13
    Ви бачите, що в лапках з'явилася
    URL-адреса,
  • 2:13 - 2:16
    і починається вона з "http"?
  • 2:16 - 2:18
    Саме так ми знаємо, що вона
  • 2:18 - 2:20
    вказує на певне зображення
    в Інтернеті.
  • 2:20 - 2:22
    Хей, погляньте, на моїй сторінці
    з'явився кролик.
  • 2:23 - 2:26
    Але що як сервер, на якому знаходиться
    зображення, "впав",
  • 2:26 - 2:28
    і браузер не може
    завантажити картинку?
  • 2:28 - 2:31
    Як тоді глядач знатиме, як виглядала
    моя чарівна картинка?
  • 2:31 - 2:33
    Вони нічого не побачать, і
    їм буде цікаво
  • 2:33 - 2:35
    протягом всього життя,
    що ж вони втратили.
  • 2:36 - 2:39
    Саме тому, тег має
    ще один атрибут - "alt",
  • 2:39 - 2:41
    який ми використовуємо, щоб
  • 2:41 - 2:44
    сказати браузеру, яким є
    альтернативний текст для зображення.
  • 2:44 - 2:47
    Щоб додати інший атрибут,
    ми ставимо пробіл
  • 2:47 - 2:50
    після заключних лапок
    останнього атрибута.
  • 2:50 - 2:54
    Потім ми друкуємо атрибут alt = "",
  • 2:54 - 2:57
    і всередині лапок пишемо текст, який
  • 2:57 - 2:59
    є описом зображення,
  • 2:59 - 3:04
    наприклад "Клаповухий кролик в сараї".
  • 3:05 - 3:07
    Це також допомагає людям,
    які переглядають веб-сторінки,
  • 3:07 - 3:10
    але не можуть насправді їх бачити,
    наприклад, сліпим.
  • 3:10 - 3:11
    Вони використовують додаток
    "скрінрідер",
  • 3:11 - 3:14
    який дослівно читає їм сторінку,
  • 3:14 - 3:16
    описуючи всі теги, які бачить.
  • 3:16 - 3:18
    Коли він побачить тег зображення,
    він прочитає альтернативний
  • 3:18 - 3:21
    текст, оскільки сліпі люди
    не можуть бачити картинок.
  • 3:21 - 3:24
    Тому ви маєте завжди, завжди
    використовувати додатковий текст,
  • 3:24 - 3:28
    щоб весь світ міг насолодитись
    вашою веб-сторінкою.
  • 3:29 - 3:31
    Гаразд, повернімось до нашого зображення.
  • 3:31 - 3:33
    Воно надто велике.
  • 3:33 - 3:34
    Змінімо його розмір.
  • 3:34 - 3:36
    Ми можемо це зробити за допомогою
    інших атрибутів:
  • 3:37 - 3:39
    ширина (англ. "width")
    та висота ("height").
  • 3:39 - 3:43
    Напишімо: "Ширина = 100".
  • 3:44 - 3:47
    Тепер ширина – 100 пікселів.
  • 3:47 - 3:49
    Це трошки замало.
  • 3:49 - 3:51
    Поставимо курсор всередині
  • 3:51 - 3:54
    і використаймо скрабер чисел,
    щоб збільшити зображення.
  • 3:54 - 3:57
    Добре, так трохи краще.
  • 3:57 - 3:59
    тепер, спробуймо додати висоти.
  • 3:59 - 4:01
    Я просто напишу "Висота = 50".
  • 4:01 - 4:03
    О-о!
  • 4:03 - 4:05
    Я роздавила свого кролика,
    бідний кролик!
  • 4:05 - 4:09
    Бачите, саме тому вам краще
    встановлювати лише
  • 4:09 - 4:11
    або ширину, або висоту,
    а не обидва атрибути,
  • 4:11 - 4:13
    тому що ви можете задати
    неправильні розміри
  • 4:13 - 4:17
    і роздавити своїх кроликів.
    Тому краще дозвольте браузеру
  • 4:17 - 4:21
    зайнятись математикою і вирішити,
    яким має бути другий атрибут.
  • 4:21 - 4:22
    Я зараз видалю висоту.
  • 4:22 - 4:25
    Тепер, коли ви можете вставляти
    зображення, подумайте,
  • 4:25 - 4:28
    як можна поєднати теги, які ви знаєте.
  • 4:28 - 4:32
    Наприклад, створити список з картинками
    та абзацами:
  • 4:32 - 4:33
    "Топ-10 найбожевільніших тваринок".
  • 4:33 - 4:35
    Тільки не додавайте надто багато
    картинок,
  • 4:35 - 4:38
    тому що людина, яка переглядатиме
    вашу веб-сторінку,
  • 4:38 - 4:40
    буде змушена їх всі завантажити.
  • 4:40 - 4:43
    Але навіть так ви можете
    добре повеселитись.
  • 4:43 - 4:47
    Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
Title:
Додавання зображень за допомогою HTML (Відео версія)
Description:

more » « less
Video Language:
English
Duration:
04:45

Ukrainian subtitles

Revisions