Изображения в HTML

Изображения в HTML

Опубликовано в Все для сайта - Автор VARIATECHnik В Понедельник, июля 30, 2018 Нет комментариев

Изображения в HTML

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

 

Как вставить изображение в html документ?

Для вставки изображений в html используется тег , у него множество атрибутов, но среди них есть один обязательный, это атрибут src, который указывает путь к изображению. Путь можно указывать как файлу, где находится изображение, так и ссылку на него, если изображение располагается в сети интернет.

Самым простым примером может служить вставка изображения в пустой html документ, такой код будет выглядеть:

<img src=\»image.jpg\»>

При вставке изображения, обращайте внимание на его формат (в нашем случае jpg), иначе код может просто не сработать.

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

 

Атрибуты и значения атрибутов изображений в html документе

-src – путь к изображению (обязательный атрибут);

-width – ширина изображения, в пикселях или в процентах;

-height – высота изображения;

-alt— альтернативный текс изображения;

-title — название изображения;

-border — устанавливает рамку для изображения, в пикселях;

-vspase – верхний и нижний отступ от изображения, в пикселях;

-hspase – отступ от изображения слева и справа, в пикселях;

-align – выравнивание изображения, со значениями:

-left – по левому краю;

-right – по правому краю.

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

 

Атрибут alt и title содержат в себе альтернативный текс и всплывающую подсказку изображения. В случае если ваше изображение по каким-либо причинам не загрузится (например, пользователь отключит в браузере загрузку изображений), то высветится текст из атрибута alt, а если пользователь наведет мышку на изображение, то увидит текс из атрибута title. Оба этих атрибута являются мощными SEO инструментами в продвижении ваших сайтов, и их содержимое, учитывают поисковые роботы, при ранжировании сайтов, поэтому, старайтесь всегда использовать эти атрибуты в своих проектах.

Атрибуты vspase и hspase позволяют задать отступ от других элементов html страницы. Например, вы хотите, чтобы текст не вплотную прилегал к изображению, а отступал от нее на 10px, тогда необходимо воспользоваться данными атрибутами.

Атрибут align позволяет задать нужное расположение изображения, у него есть два значения left и right. Использование атрибута left, позволяет расположить картинку по левому краю, а все содержимое (текст), будет обтекать ее справа. Использование атрибута right, позволяет расположить картинку по правому краю, а все содержимое будет обтекать изображение слева.

Чтобы предотвратить обтекание используется тег <br>, у которого есть атрибут clear, со значениями left, right, all. Значение left, позволяет предотвратить обтекание слева. Значение right, позволяет предотвратить обтекание справа. Значение all полностью запрещает обтекание.

Давайте попробуем вставить изображение в html документ и применить к нему некоторые из вышеприведенных атрибутов. Для этого воспользуемся минимальной структурой html документа из первого урока по html. А также в папке с нашим сайтом, которая называется mySite, создадим еще одну папку, и назовем ее images. Внутрь папки images поместим любое изображение и назовем его img.jpg.

Пропишем между тегами <body> тег изображения со следующими атрибутами: <img src=\»images/img.jpg\» alt=\»Яблоко\» title=\»Зеленое яблоко\» width=\»450\» height=\»350\» align=\»left\» hspace=\»10px\» border=\»5px\»  >. И добавим после изображения три абзаца с произвольным текстом.

 

Результат выполнения кода:

Таким образом, используя атрибуты и различные значения к ним, можно манипулировать любыми свойствами изображения, но, наверное, у кого-то возник вопрос, а что делать, если я захочу разместить изображение посередине? Ведь атрибут align для изображения не позволяет этого сделать. Да, действительно, такая задача встает довольно часто, но есть простое решение. Если поместить тег изображения в тег абзаца и применить атрибут align=\»center\» к абзацу, то наша проблема перестанет ею быть. Давайте попробуем расположить наше изображение по центру.

 

Наш код выглядит:

То, чего мы смогли этим добиться, видно на скриншоте:

Теперь, я думаю, у вас не осталось вопросов! И я искренне надеюсь, что эта статья будет для вас полезной, и знания вставки и изменения свойств изображений в html вам пригодятся. И не забывайте, что изображения в html являются не только seo инструментом по продвижению веб сайтов, но и просто делают их более привлекательными для юзеров. На этом я с вами прощаюсь, а вы переходите к чтению следующей статьи, о ссылках в html документе. До встречи, дорогие друзья, на страницах блога

Об - Всем привет! На данном ТехноСайте мы постараемся выкладывать только полезные и занимательные статьи, с пошаговыми иллюстрациями и видео уроками. По всем вопросам пишите в комментариях. Обещаем будет интересно!

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

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

в