Изображения в HTML
Изображения в 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\” >. И добавим после изображения три абзаца с произвольным текстом.
|
1 2 3 4 5 6 |
<body> <img src=\"images/img.jpg\" align=\"left\" alt=\"Яблоко\" title=\"Зеленое яблоко\" width=\"450\" height=\"350\" hspace=\"10px\" border=\"5px\"> <p>Атрибут alt и title содержат в себе альтернативный текс и всплывающую подсказку изображения. В случае если ваше изображение по каким-либо причинам не загрузится</p> <p>Атрибут alt и title содержат в себе альтернативный текс и всплывающую подсказку изображения. В случае если ваше изображение по каким-либо причинам не загрузится</p> <p>Атрибут alt и title содержат в себе альтернативный текс и всплывающую подсказку изображения. В случае если ваше изображение по каким-либо причинам не загрузится</p> </body> |
Результат выполнения кода:
Таким образом, используя атрибуты и различные значения к ним, можно манипулировать любыми свойствами изображения, но, наверное, у кого-то возник вопрос, а что делать, если я захочу разместить изображение посередине? Ведь атрибут align для изображения не позволяет этого сделать. Да, действительно, такая задача встает довольно часто, но есть простое решение. Если поместить тег изображения в тег абзаца и применить атрибут align=\”center\” к абзацу, то наша проблема перестанет ею быть. Давайте попробуем расположить наше изображение по центру.
Наш код выглядит:
|
1 2 3 4 5 6 |
<body> <p align=\"center\"><img src=\"images/img.jpg\" alt=\"Яблоко\" title=\"Зеленое яблоко\" width=\"450\" height=\"350\" hspace=\"10px\" border=\"5px\"></p> <p>Атрибут alt и title содержат в себе альтернативный текс и всплывающую подсказку изображения. В случае если ваше изображение по каким-либо причинам не загрузится</p> <p>Атрибут alt и title содержат в себе альтернативный текс и всплывающую подсказку изображения. В случае если ваше изображение по каким-либо причинам не загрузится</p> <p>Атрибут alt и title содержат в себе альтернативный текс и всплывающую подсказку изображения. В случае если ваше изображение по каким-либо причинам не загрузится</p> </body> |
То, чего мы смогли этим добиться, видно на скриншоте:
Теперь, я думаю, у вас не осталось вопросов! И я искренне надеюсь, что эта статья будет для вас полезной, и знания вставки и изменения свойств изображений в html вам пригодятся. И не забывайте, что изображения в html являются не только seo инструментом по продвижению веб сайтов, но и просто делают их более привлекательными для юзеров. На этом я с вами прощаюсь, а вы переходите к чтению следующей статьи, о ссылках в html документе. До встречи, дорогие друзья, на страницах блога
