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

Весь час ми говорили
про кроликів,

описували їх за допомогою
абзаців та списків,

але ми можемо просто додати зображення
на нашу сторінку

і насправді показати,
як виглядають кролики.

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

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

Якщо ми просто напишемо "image",
ми нічого не побачимо.

Чому?

Тому що ми не сказали браузеру, яке саме
зображення показувати.

В Інтернеті є мільйони зображень,

і ми точно не хочемо, щоб наше
було обране навмання,

тому що це може бути якась гидота

або просто щось таке, що нам не потрібне.

Ми маємо вказати URL зображення.

URL – це те, що вказано вгорі браузера

в адресній стрічці,

і це те, що нам потрібно – адреса.

Це спосіб знайти певні джерела
в Інтернеті,

і це означає, що ми можемо вставити
зображення,

лише якщо воно є десь в Інтернеті.

Ми не можемо просто взяти
і вставити зображення з комп'ютера.

Існує багато способів знайти
зображення в Інтернеті,

але ми зробимо це простіше,

використавши селектор зображень
в колекції фотографій.

Для того, щоб картинка з'явилася
на екрані,

ми маємо додати атрибут до
тега зображення.

Атрибут – це додаткова інформація про тег.

І це перший атрибут,

з яким ми зустрічаємось.

Щоб сказати браузеру URL-адресу,

ми маємо додати атрибут з іменем та
джерелом зображення.

Для цього ставимо пробіл після "img"
і друкуємо атрибут "src".

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

написати саме "src", тому що браузер
проігнорує

наше повідомлення,
якщо ми напишемо його неправильно.

Тепер мені потрібно поставити
знак "дорівнює", щоб сказати

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

Зараз я відкрию лапки, а редактор

автоматично їх закриє.

Пам'ятайте, шо значення атрибута завжди
береться в лапки.

Гаразд, зазвичай, саме зараз ми б
мали ввести URL,

але на сайті Khan Academy,

зараз з'явиться селектор зображень.

Ми просто вибиремо зображення,
яке нам сподобається.

Оскільки я хочу картинку кролика,
я натискаю на вкладку "Тварини",

обираю гарненького кролика
і тисну "ok".

Ви бачите, що в лапках з'явилася
URL-адреса,

і починається вона з "http"?

Саме так ми знаємо, що вона

вказує на певне зображення
в Інтернеті.

Хей, погляньте, на моїй сторінці
з'явився кролик.

Але що як сервер, на якому знаходиться
зображення, "впав",

і браузер не може
завантажити картинку?

Як тоді глядач знатиме, як виглядала
моя чарівна картинка?

Вони нічого не побачать, і
їм буде цікаво

протягом всього життя,
що ж вони втратили.

Саме тому, тег має
ще один атрибут - "alt",

який ми використовуємо, щоб

сказати браузеру, яким є
альтернативний текст для зображення.

Щоб додати інший атрибут,
ми ставимо пробіл

після заключних лапок
останнього атрибута.

Потім ми друкуємо атрибут alt = "",

і всередині лапок пишемо текст, який

є описом зображення,

наприклад "Клаповухий кролик в сараї".

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

але не можуть насправді їх бачити,
наприклад, сліпим.

Вони використовують додаток
"скрінрідер",

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

описуючи всі теги, які бачить.

Коли він побачить тег зображення,
він прочитає альтернативний

текст, оскільки сліпі люди
не можуть бачити картинок.

Тому ви маєте завжди, завжди
використовувати додатковий текст,

щоб весь світ міг насолодитись
вашою веб-сторінкою.

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

Воно надто велике.

Змінімо його розмір.

Ми можемо це зробити за допомогою
інших атрибутів:

ширина (англ. "width")
та висота ("height").

Напишімо: "Ширина = 100".

Тепер ширина – 100 пікселів.

Це трошки замало.

Поставимо курсор всередині

і використаймо скрабер чисел,
щоб збільшити зображення.

Добре, так трохи краще.

тепер, спробуймо додати висоти.

Я просто напишу "Висота = 50".

О-о!

Я роздавила свого кролика,
бідний кролик!

Бачите, саме тому вам краще
встановлювати лише

або ширину, або висоту,
а не обидва атрибути,

тому що ви можете задати
неправильні розміри

і роздавити своїх кроликів.
Тому краще дозвольте браузеру

зайнятись математикою і вирішити,
яким має бути другий атрибут.

Я зараз видалю висоту.

Тепер, коли ви можете вставляти
зображення, подумайте,

як можна поєднати теги, які ви знаєте.

Наприклад, створити список з картинками
та абзацами:

"Топ-10 найбожевільніших тваринок".

Тільки не додавайте надто багато
картинок,

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

буде змушена їх всі завантажити.

Але навіть так ви можете
добре повеселитись.

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