Как вставить картинку в html на фон: Как добавить фоновый рисунок на веб-страницу?

HTML IMG: вставка изображений на вашу страницу

В этом уроке мы узнаем, как использовать тег HTML IMG для вставки изображений или GIF-файлов на наши HTML-страницы. Поэтому здесь вы найдете следующие темы:

• Тег HTML
• Локальная вставка изображения с помощью HTML img
• Вставка глобального изображения с помощью HTML img
• Атрибуты заголовка и альтернативного текста
• HTML ширина и высота изображения
• Плавающие изображения
• Рекомендации для HTML img

Тег HTML

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

В HTML за вставку изображений отвечает тег . Однако технически HTML не включает само изображение, а лишь связывает изображение со страницей. Таким образом, вы можете использовать его, как если бы он был вставлен на страницу. Вы можете видеть, что это похоже на ссылку тег процесса. Поэтому мы можем добавлять изображения как локально, так и глобально, то есть через внешний URL на основной домен.

Кроме того, важно подчеркнуть, что тег HTML img не имеет закрывающего тега и содержит шаблон отображения встроенного блока CSS. Вы также можете заметить, что регулировка ширины и высоты стандартно выполняется автоматически.

Локальная вставка изображения с помощью HTML img

Чтобы вставить изображение в HTML, просто используйте тег img с атрибутом src . То есть: атрибут src или источник будет содержать URL-адрес вставляемого изображения.

Таким образом, окончательный синтаксис будет таким:

Чтобы вставить локальное изображение, мы можем включить только имя изображения с его расширением, как в примере ниже:

Если он содержится в локальной папке, мы также должны ссылаться на эту папку. Например, если моя главная страница содержится в папка public_html и внутри нее у нас есть папка с именем images, где находится наше изображение, мы будем использовать следующий URL:

Теперь допустим, что у нас есть public_html папка. Если вы не знакомы, полезно знать, что каталог public_html часто используется по умолчанию для файлов вашего веб-сайта на большинстве веб-серверов. Внутри него мы включаем два каталога, папки изображений и страницы . В папке наших страниц вы можете найти HTML-код наших страниц. В папке с изображениями вы найдете локальные файлы изображений, которые мы будем использовать, как в нашем примере image.jpg. Таким образом, мы можем использовать ../, чтобы указать, что необходимо вернуть каталог. Позже мы можем получить доступ к нужной нам папке (изображения). См. пример ниже:

  ./images/image.jpg"> 

С другой стороны, мы также можем включить полный URL нашего изображения. Допустим, наш домен https://mydomain.com и используя предыдущий пример. Таким образом, мы будем использовать следующий код:

Благодаря этому теперь вы можете включить любое изображение локально на свою страницу, используя HTML-код. функция изображения.

Вставка глобального изображения с помощью HTML img

Теперь, когда мы изучили базовый синтаксис HTML img и как вставлять локальные изображения, давайте изучим, как вставлять глобальное изображение . Глобальное изображение означает, что оно находится за пределами нашего домена. Для этого просто добавьте абсолютный URL-адрес изображения в атрибут src.

Допустим, вы хотите включить изображение, расположенное по абсолютному URL-адресу https://www.example.com/pictures/picture_01.png. Таким образом, просто используйте следующий код:

  example.com/pictures/picture_01"> 

Однако при использовании глобального образа, то есть внешнего, мы сталкиваемся с проблемой. Делая это, вы можете зависеть от того, что другой домен всегда работает. Это потому, что если в какой-то момент этот домен перестанет работать, изображение не будет загружено.

Во избежание проблем с изображением в формате HTML мы рекомендуем избегать использования внешних изображений. Кроме того, еще одной серьезной проблемой может стать использование изображений, содержащих авторских права . Поэтому всегда помните об этих проблемах и, при необходимости, не забывайте обращаться к ним должным образом.

Атрибуты заголовка и альтернативного текста

Помимо атрибута src, тег имеет другие атрибуты, дополняющие его структуру. Вы можете включить атрибут title для изображения. Этот заголовок будет отображаться только тогда, когда пользователь наводит курсор на изображение. Поэтому, чтобы включить заголовок в изображение, просто вызовите его, используя атрибут title = «…» . Давайте посмотрим на пример ниже:

Таким образом, мы получим следующий результат:

Таким же образом мы можем включить альтернативный текст . Этот текст появится вместо изображения, если изображение загружено неправильно. Обычно это может происходить из-за неправильного URL-адреса изображения, изображения в неподдерживаемом формате или во время загрузки изображения. Чтобы включить альтернативный текст, вы можете использовать атрибут alt = «…» . Этот атрибут также является практикой, которая высоко ценится поисковыми системами. Поэтому вы должны использовать его, если хотите выполнить SEO оптимизация . Ниже приведен пример использования альтернативного текста в HTML-изображении:

Ширина и высота HTML-изображения

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

Если мы будем использовать только один из них, то другой будет подстраиваться автоматически, пропорционально, без искажения изображения. Используя оба, он будет содержать точно определенные высоты и ширины , поэтому вы можете исказить изображение. Кроме того, если вы используете изображения с низким разрешением в размерах больше оригинала, оно, скорее всего, тоже будет искажено. Из-за этого очень важно, чтобы вы использовали изображения с разрешением, подходящим для ваших страниц, или в векторных форматах.

Давайте используем логотип CopaHost в примере ниже:

В этом исходном изображении стандартная ширина составляет 250 пикселей, а высота — 100 пикселей. Однако вы можете определить для него размер. Итак, давайте установим ширину 100 пикселей, чтобы посмотреть, что произойдет.

Таким образом, вы можете увидеть результат изображения ниже:

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

Плавающие изображения

Хотя HTML img по умолчанию имеет встроенный блочный дисплей, вы часто можете захотеть, чтобы он плавал в тексте. Это делается для того, чтобы текст мог адаптироваться к своему положению без потери исходного форматирования.

Таким образом, вы можете использовать плавание в изображении через CSS. Давайте посмотрим на приведенный ниже пример применения CSS в атрибуте стиля и с текстом, сгенерированным с помощью генератора Lorem Ipsum:

  

<тело>
 
 
Плавающие изображения
 
Перемещение изображения вправо

<р>
 png" alt="Логотип CopaHost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. В efficitur vehicula эрат.
Fusce vitae velit et risus imperdiet finibus quis a eros.
Donec ut Diam Lobortis Dui Viverra Tincidunt.
Nullam consequat lacinia lacus vel scelerisque.
Curabitur maximus, mi a elementum malesuada, libero dolor suscipit turpis,
vitae mollis augue mauris convallis ex. Sed feugiat neque in dolor lacinia,
vitae eleifend ex consequat.Lorem ipsum dolor sit amet,
consectetur adipiscing elit. В efficitur vehicula эрат. Фуше
vitae velit et risus imperdiet finibus quis a eros.
Donec ut Diam Lobortis Dui Viverra Tincidunt. Нуллам консекват
lacinia lacus vel scelerisque. Curabitur maximus, mi a elementum malesuada,
libero dolor suscipit turpis, vitae mollis augue mauris convallis ex.
Sed feugiat neque in dolor lacinia, vitae eleifend ex consequat.

  

Перемещение изображения влево
<р>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  В efficitur vehicula эрат.
Fusce vitae velit et risus imperdiet finibus quis a eros.
Donec ut Diam Lobortis Dui Viverra Tincidunt.
Nullam consequat lacinia lacus vel scelerisque.
Curabitur maximus, mi a elementum malesuada, libero dolor suscipit turpis,
vitae mollis augue mauris convallis ex. Sed feugiat neque in dolor lacinia,
vitae eleifend ex consequat.Lorem ipsum dolor sit amet,
consectetur adipiscing elit. В efficitur vehicula эрат. Фуше
vitae velit et risus imperdiet finibus quis a eros.
Donec ut Diam Lobortis Dui Viverra Tincidunt. Нуллам консекват
lacinia lacus vel scelerisque. Curabitur maximus, mi a elementum malesuada,
libero dolor suscipit turpis, vitae mollis augue mauris convallis ex.
Sed feugiat neque in dolor lacinia, vitae eleifend ex consequat.
  
 

 

Учитывая приведенный выше пример, вы можете увидеть результат в виде изображения ниже:

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