Вывод изображений

Нет комментариев.

Здесь рассмотрены варианты вывода изображений на сайте..


<img src="html.jpg" alt="Описание" title="Содержимое" style="width:380px; height:200px" >

Получится так

<img>
Тег отвечает за вывод изображения на странице сайта.

src
Указывает путь к изображению в форматах GIF, JPEG, PNG, APNG, SVG, BMP, ICO.

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

title
Это дополнительный параметр, который видит пользователь при наведении курсора на картинку. Его задача объяснить пользователю, что изображено на иллюстрации. Индексируется поисковым роботом.

style="width:380px; height:200px"
С помощью стилей CSS задаём размеры изображения.

vspace="10" hspace="10"
Позволяет делать вертикальный и горизонтальный отступ от изображения до окружающего контента.


  <style>

   figure {

    background: #5f6a72; /* Цвет фона */

    padding: 10px; /* Поля вокруг */

    width: 100%; /* Ширина */

    float: left; /* Блоки выстраиваются по горизонтали */

    margin: 0 10px 10px 0; /* Отступы */

    text-align: center; /* Выравнивание по центру */

   }

   figcaption {

    color: #fff; /* Цвет текста */

   }

  </style>



<figure>

<img src="html.jpg" alt="Описание" title="Содержимое" style="width:380px; height:200px" >

<figcaption> Пример &lt;figure&gt; </figcaption>

</figure>

Получится так

<figure>
Применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу. Не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Можно применять CSS, для его оформления.

<figcaption>
Тег не обязателен, выводит пояснение к содержимому, которое находится внутри тега <figure>. Должен размещаться как первый, или последний элемент

Стили изображения.

Нет комментариев.

Оставить комментарий