Изображения
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 23 из 60.
Изображения могут сделать вашу веб-страницу более привлекательной, и добавить их в HTML очень просто с помощью тега <img>. Тег <img> является самозакрывающимся, что означает, что ему не нужен закрывающий тег.
Для отображения изображения вам необходимо использовать атрибут src. Этот атрибут указывает местоположение изображения (URL или путь к файлу). Вот пример:
<img src="https://coddy.tech/images/bit.svg" />В этом примере браузер загрузит и отобразит изображение по URL-адресу https://coddy.tech/images/bit.svg.
Самозакрывающиеся теги, такие как <img>, не требуют закрывающего тега. Они заканчиваются на /> и используются для элементов, которые не имеют содержимого внутри.
Задание
ЛегкоДобавьте изображение в HTML-документ, вы можете использовать URL из примера в уроке или любой другой URL.
Убедитесь, что вы видите изображение!
Шпаргалка
Тег <img> отображает изображения и является самозакрывающимся (закрывающий тег не требуется):
<img src="https://coddy.tech/images/bit.svg" />Атрибут src определяет местоположение изображения (URL или путь к файлу). Самозакрывающиеся теги заканчиваются на />.
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2