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

Материал из Викиверситета
Перейти к навигации Перейти к поиску
Applications-internet.svg
Logo HTML.png
Курс 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>

Результат:
Wikipedia-logo-ru.png

Атрибуты[править]

Основные[править]

src[править]

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

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

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

align[править]

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

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

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

alt[править]

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

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

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

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

Создание изображений[править]

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

favicon.ico[править]

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

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

Задания[править]

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

Дополнительные задания[править]


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

Примечания[править]

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