HTML/Вставка изображения

Курс 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/Списки

Примечания

↑ См. также "Кафедра компьютерной графики"

[1] См. также "Кафедра компьютерной графики"

[1]