Урок 6. Изображения в HTML

Тег <img/>

Чтобы вставить изображение в нашу HTML страницу необходимо использовать тег <img/>. Тег <img/> содержит атрибуты и не имеет закрывающего тега.

Ссылка на изображение добавляется при помощи атрибута scr (source-источник).

<img src="image.png" />

Давайте немного потренируемся:

Создайте папку на вашем компьютере и скопируйте внутрь свою HTML страницу, у меня это к примеру first.html.
Загрузите в папку любое изображение и назовите его image.
Вставим изображение с помощью тега <img/> в нашу HTML страницу.

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <img src="image.png" />
 </body>
</html>

Атрибут alt

Атрибут alt создает альтернативный текст для изображения. В случае, если изображение не может быть отображено, атрибут alt в качестве альтернативы должен указать текст со словесным описанием. Атрибут alt обязателен.

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <!--Испортим ссылку на изображение с помощью / -->
  <img src="/image.png" alt="Альтернативный текст"/>
 </body>
</html>

Размер изображения

Чтобы указать размер изображения используются атрибутыwidth(ширина) и heigth(высота).

Размер может быть указан в процентах(%) или же в пикселях(px).

По умолчанию размер моего изображения 800(ШИРИНА)х600(ВЫСОТА)px, уменьшим его.

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <!--Не забудьте убрать / для корректного отображения изображения -->
  <img src="image.png" width="400px" heigth="300px" 
   alt="Альтернативный текст"/>
  <!--Или -->
  <img src="image.png" width="%" heigth="10%" alt="Альтернативный текст"/>
 </body>
</html>

Не старайтесь загружать изображения больших размеров, так как это замедляет загрузку сайта и негативно сказывается на его продвижении.

Рамка вокруг изображения

По умолчанию вокруг изображения нет рамки. Рамку можно добавить с помощью атрибута border.

Размер рамки указываем в px(пикселях).

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <img src="image.png" width="400px" heigth="300px" border="2px"
   alt="Альтернативный текст"/>
 </body>
</html>

В уроке мы не станем затрагивать такие атрибуты как align, hspace(атрибут отвечающий за отступ от изображения по горизонтали), vspace (атрибут отвечающий за отступ от изображения по вертикали).

Некоторые из них устарели и используются вСss.

Урок 7. Ссылки в HTML