Перейти к содержанию

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>

Результат:

Атрибуты

[править]

Основные

[править]

Обязательный атрибут. В нём должен быть указан URL-адрес изображения или адрес файла на компьютере.

width и height
[править]

Определяют ширину (width) и высоту (height) изображения. Если значения этих атрибутов не заданны, изображение вставляется в таком размере, в каком оно размещено в файле. Вместо них рекомендуется использовать CSS.

Выравнивание изображения в блоке, в котором оно находится. Может иметь значения:

  • left — слева
  • center - по центру
  • right — справа

Вместо этого атрибута также рекомендуется использовать CSS.

Показывает внутри контейнера, где должно было быть изображение текст, если браузер не поддерживает данный формат рисунков или картинка ещё загружается.

Использование чужих изображений

[править]

Файлы изображений охраняются авторскими правами. Авторские права возникают автоматически и не требуют какого-то специального оформления. Лучше, чтобы при использования изображения у Вас было письменное разрешение автора.

В интернете есть базы бесплатных изображений. Обычно, в качестве условий использования - требование указать автора изображения где-то в подписях к сайту. Что, в общем-то, приемлемо.

Создание изображений

[править]

Изображения созданные с помощью ворованного ПО не защищаются авторским правом. Но существуют очень даже функциональные бесплатные графические редакторы.[1]

favicon.ico - это графический значок, который отображается рядом с адресной строкой. Обычно этот файл размещается в корневом каталоге сайта:

      <link rel="icon" href="/favicon.ico">

Задания

[править]
  1. Дополните текст главной страницы Вашего сайта несколькими небольшими изображениями или иконками: например, по одной иконке к каждому абзацу, описывающему второстепенные страницы. Изображения должны подходить по смыслу.
  2. Создайте файл favicon.ico и прикрепите его к своему сайту
  3. На одной или нескольких второстепенных страницах добавьте изображения, обтекаемые текстом по правому или левому краю.

Дополнительные задания

[править]


Курс HTML
Предыдущий урок: HTML/Элементы стиля шрифтаСледующий урок: HTML/Списки

Примечания

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