HTML/Вставка изображения
§7. Вставка изображения.[править]
Рассмотрим случай вставки изображения в веб-страницу. Для этого используется тег <img>.
Тег <img>[править]
Описание[править]
Вставляет в содержимое сайта изображение. Обязательно указание URL-адреса изображения или адреса размещения изображения на компьютере.
Пример[править]
Исходный код:
<!DOCTYPE html>
<html>
<head>
<title>
Вставка изображения
</title>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Wikipedia-logo-ru.png/104px-Wikipedia-logo-ru.png">
</body>
</html>
Результат:
Атрибуты[править]
Основные[править]
src[править]
Обязательный атрибут. В нём должен быть указан URL-адрес изображения или адрес файла на компьютере.
width и height[править]
Определяют ширину (width) и высоту (height) изображения. Если значения этих атрибутов не заданны, изображение вставляется в таком размере, в каком оно размещено в файле. Вместо них рекомендуется использовать CSS.
align[править]
Выравнивание изображения в блоке, в котором оно находится. Может иметь значения:
left— слеваcenter- по центруright— справа
Вместо этого атрибута также рекомендуется использовать CSS.
alt[править]
Показывает внутри контейнера, где должно было быть изображение текст, если браузер не поддерживает данный формат рисунков или картинка ещё загружается.
Использование чужих изображений[править]
Файлы изображений охраняются авторскими правами. Авторские права возникают автоматически и не требуют какого-то специального оформления. Лучше, чтобы при использования изображения у Вас было письменное разрешение автора.
В интернете есть базы бесплатных изображений. Обычно, в качестве условий использования - требование указать автора изображения где-то в подписях к сайту. Что, в общем-то, приемлемо.
Создание изображений[править]
Изображения созданные с помощью ворованного ПО не защищаются авторским правом. Но существуют очень даже функциональные бесплатные графические редакторы.[1]
favicon.ico[править]
favicon.ico - это графический значок, который отображается рядом с адресной строкой. Обычно этот файл размещается в корневом каталоге сайта:
<link rel="icon" href="/favicon.ico">
Задания[править]
- Дополните текст главной страницы Вашего сайта несколькими небольшими изображениями или иконками: например, по одной иконке к каждому абзацу, описывающему второстепенные страницы. Изображения должны подходить по смыслу.
- Создайте файл favicon.ico и прикрепите его к своему сайту
- На одной или нескольких второстепенных страницах добавьте изображения, обтекаемые текстом по правому или левому краю.
Дополнительные задания[править]
- Добавьте краткое описание хотя бы одного хранилища бесплатных изображений на страницу Свободные изображения (не менее 10 слов).
| Курс HTML |
| Предыдущий урок: HTML/Элементы стиля шрифта — Следующий урок: HTML/Списки |
Примечания[править]
- ↑ См. также "Кафедра компьютерной графики"