Урок 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.