Изображения являются очень важной частью веб-страницы, поскольку они улучшают внешний вид веб-страницы и усиливают взаимодействие с клиентами. УТП нескольких веб-сайтов заключается в том, как они организуют разные изображения на своих веб-страницах и добавляют к ним оттенки. В этом В статье изображения, мы поймем, как вставлять изображения на веб-страницу с помощью HTML в следующем порядке:
Как добавить изображение в HTML
Чтобы вставить изображение на веб-страницу, HTML дает вам тег. Еще один важный момент, о котором следует помнить:
не имеет закрывающего тега. scr Атрибут используется для указания пути к изображению, который может быть URL-адресом или путем к изображению из системы / сервера. Давайте сначала начнем с основного синтаксиса встраивания изображения на веб-страницу с помощью HTML.
Синтаксис
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Образец кода
HTML-изображение, встраивание изображений в веб-страницу
Подобно другим тегам, есть различные атрибуты, связанные с тег. Давайте посмотрим на каждого из них по очереди, поймем их нужды и способы их использования.
HTML-теги изображений
- alt Атрибут
Атрибут alt - это альтернативный текст для изображения. Причина, по которой был введен атрибут alt, заключается в том, что если по какой-либо причине изображение не может загрузиться, должен появиться альтернативный текст, дающий представление об изображении. Причиной того, что изображение не загружается, может быть медленное подключение к Интернету или изображение не находится в предоставленном источнике и т. Д.
Если изображение находится в той же папке, где находится файл HTML, вы можете указать имя файла напрямую. В противном случае вы должны указать абсолютный путь к файлу изображения.
Значение атрибута alt должно описывать изображение.
пример
HTML-изображение, встраивание изображений в веб-страницу
установить java classpath windows 7
- Ширина и высота изображения
Атрибут стиля используется для установки высоты и ширины изображения. В атрибуте style вы указываете стиль CSS.
HTML-изображение, встраивание изображений в веб-страницу
Некоторые из важных моментов при встраивании изображения на веб-страницу с использованием HTML:
- Атрибуты ширины и высоты определены в пикселях.
- Вы также можете определить ширину и высоту изображения в процентах. Он будет считать процентное отношение ко всей веб-странице.
- Если вы укажете только один из них, он соответствующим образом настроит другой.
- Встраивание изображений с использованием URL
HTML также дает вам гибкость, когда вы можете выбрать изображение с другого сервера, просто указав URL-адрес. Вы можете использовать отдельный сервер для размещения изображений, а затем встраивать эти изображения с помощью URL.
HTML-изображение, встраивание изображений в веб-страницу
- Изображение как ссылка
Вы также можете использовать изображение в качестве ссылки, по которой пользователь может щелкнуть изображение и перейти на новую веб-страницу. Для этого вам просто нужно поставить день в тег.
HTML-изображение, встраивание изображений в веб-страницу
- Плавающее изображение
Вы также можете настроить выравнивание изображения с помощью свойства CSS float. Все свойства CSS должны быть указаны в атрибуте style.
как выйти из программы на java
HTML изображение
- Карты изображений
Это одна из важных функций HTML. тег помогает в определении изображения-карты. Вам должно быть интересно, что такое карта изображений. Изображение-карта - это изображение с интерактивными областями.
HTML изображение
- Фоновая картинка
Вы также можете добавить фоновое изображение на веб-страницу. Вам просто нужно использовать свойство CSS, то есть фоновое изображение, в теге стиля и добавить его в элемент HTML.
HTML изображениеФоновая картинка
Элемент BODY
На этом мы подошли к концу этого блога HTML-изображений.Теперь после выполнения приведенных выше фрагментов вы бы поняли, как вставить изображение в HTML. Я надеюсь, что этот блог будет информативным и принесет вам дополнительную пользу.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «HTML-изображения», и мы свяжемся с вами.