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/Списки |
Примечания править
- ↑ См. также "Кафедра компьютерной графики"