Как вставить картинку на сайт код?

Дмитрий Новоселов0

Сегодня практически каждый интернет сайт имеет какие-либо изображения, за редким исключением тех на которых только текстовая информация. Поэтому каждый вебмастер в том числе и начинающий должен уметь вставлять картинки (изображения) на свой сайт, а соответственно знать код с помощью которого это можно сделать.

Код вставки картинки (изображения) на сайт

Именно с помощью кода, который приведен ниже можно вставить картинку на сайт.

<img src="url" alt="альтернативный текст">
  • В этом коде тег <img> отвечает за отображения изображений  (GIF, JPEG или PNG).
  • С помощью атрибута src указывается адрес (путь) файла с картинкой.
  • Атрибут alt  устанавливает альтернативный текст для изображений. Этот атрибут является обязательным и нужен на случай того если браузер не сможет отобразить картинку из-за неправильного адреса или ошибки сервера.

Дополнительные атрибуты при вставки картинки

С помощью дополнительных атрибутов мы можем задавать картинке (изображению) те или иные свойства. Вкратце рассмотрим наиболее часто используемые.

Align — атрибут отвечающий за выравнивание картинки (с лева, по центру, с права)

img_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-->

Теперь Вы знаете код с помощью которого можно разместить у себя на сайте картинку, а с помощью атрибутов задать нужные Вам свойства.