Сегодня практически каждый интернет сайт имеет какие-либо изображения, за редким исключением тех на которых только текстовая информация. Поэтому каждый вебмастер в том числе и начинающий должен уметь вставлять картинки (изображения) на свой сайт, а соответственно знать код с помощью которого это можно сделать.
Код вставки картинки (изображения) на сайт
Именно с помощью кода, который приведен ниже можно вставить картинку на сайт.
<img src="url" alt="альтернативный текст">
- В этом коде тег <img> отвечает за отображения изображений (GIF, JPEG или PNG).
- С помощью атрибута src указывается адрес (путь) файла с картинкой.
- Атрибут alt устанавливает альтернативный текст для изображений. Этот атрибут является обязательным и нужен на случай того если браузер не сможет отобразить картинку из-за неправильного адреса или ошибки сервера.
Дополнительные атрибуты при вставки картинки
С помощью дополнительных атрибутов мы можем задавать картинке (изображению) те или иные свойства. Вкратце рассмотрим наиболее часто используемые.
Align — атрибут отвечающий за выравнивание картинки (с лева, по центру, с права)
<img src="путь или адрес к картинке" alt="альтернативный текст картинки" align="left"> <!-- Выравнивание с лева--> <img src="путь или адрес к картинке" alt="альтернативный текст картинки" align="middle"> <!-- Выравнивание по центру--> <img src="путь или адрес к картинке" alt="альтернативный текст картинки" align="right"> <!-- Выравнивание с права-->
2. С помощью атрибутов height, width можно задавать высоту и ширину.
<img src="путь или адрес к картинке" alt="альтернативный текст картинки" height="100px" width="100px"> <!-- Высота и ширина 100px-->
3. Атрибуты vspace, hspace используют для вертикального и горизонтального отступов от изображения до окружающего контента. Удобны для точного позиционирования.
<img src="путь или адрес к картинке" alt="альтернативный текст картинки" hspace="5" vspace="7">
Считаются устаревшими можно использовать свойство margin в стилях.
4. Border — атрибут отвечающий за толщину рамки вокруг изображения.
<img src="путь или адрес к картинке" alt="альтернативный текст картинки" border="3">
5. Атрибут style используется для определения стиля элемента с помощью правил CSS. Не путать с тегом <style>.
<span style="color: red;">Красный текст</span>
6. Так же с помощью атрибута class вы можете поместить изображение в класс с нужным Вам стилевым оформлением.
<img src="путь или адрес к картинке" alt="альтернативный текст картинки" class="название класса"> <!-- Указанный класс должен находиться в файле .css-->
Теперь Вы знаете код с помощью которого можно разместить у себя на сайте картинку, а с помощью атрибутов задать нужные Вам свойства.
