Посмотрите на любой страница в Интернете онлайн сегодня, и вы заметите, что у них есть некоторые общие черты. Одна из этих общих черт - образы. Правильные изображения так много добавляют в презентацию веб-сайта. Некоторые из этих изображений, например логотип компании, помогают брендировать сайт и связывать эту цифровую сущность с вашей физической компанией.
Как добавить изображение на веб-страницу с помощью HTML
Чтобы добавить изображение, значок или графику на вашу веб-страницу, вам необходимо использовать тег в HTML-коде страницы. Вы размещаете.
IMGтег в вашем. HTML именно там, где вы хотите отображать графику. Веб-браузер, отображающий код страницы, заменит этот тег соответствующим изображением после просмотра страницы. Возвращаясь к примеру с логотипом нашей компании, вот как вы можете добавить это изображение на свой сайт:
Атрибут SRC
Посмотрев на приведенный выше HTML-код, вы увидите, что элемент включает два атрибута. Каждый из них необходим для изображения.
Первый атрибут - это «src». Это буквально файл изображения, который вы хотите отображать на странице. В нашем примере мы используем файл с именем «logo.png». Это изображение, которое веб-браузер будет отображать при отображении сайта.
Вы также заметите, что перед этим именем файла мы добавили некоторую дополнительную информацию «/ images /». Это путь к файлу. Начальная косая черта указывает серверу заглянуть в корень каталога. Затем он будет искать папку с именем «images» и, наконец, файл с именем «logo.png». Использование папки под названием «изображения» для хранения всей графики сайта - довольно распространенная практика, но путь к файлу будет изменен на любой, имеющий отношение к вашему сайту.
Атрибут Alt
Второй обязательный атрибут - это текст «alt». Это «альтернативный текст», который отображается, если изображение не загружается по какой-либо причине. Этот текст, который в нашем примере читается как «Логотип компании», будет отображаться, если изображение не загрузится. Почему так могло случиться? Множество причин:
- Неверный путь к файлу
- Неправильное имя файла или орфографическая ошибка
- Ошибка передачи
- Файл удален с сервера
Это всего лишь несколько возможных причин, по которым наше указанное изображение может отсутствовать. В этих случаях вместо этого будет отображаться наш замещающий текст.
Для чего используется замещающий текст?
Альтернативный текст также используется программами чтения с экрана, чтобы «прочитать» изображение посетителю с нарушением зрения. Поскольку они не могут видеть изображение, как мы, этот текст позволяет им узнать, что это за изображение. Вот почему требуется альтернативный текст и почему он должен четко указывать, что такое изображение!
Распространенное заблуждение относительно альтернативного текста состоит в том, что он предназначен для поисковых систем. Это неправда. Хотя Google и другие поисковые системы действительно читают этот текст, чтобы определить, что это за изображение (помните, они также не могут "видеть" ваше изображение), вам не следует писать замещающий текст, чтобы обращаться исключительно к поиску двигатели. Автор четкого альтернативного текста, предназначенного для людей. Если вы также можете добавить в тег несколько ключевых слов, которые нравятся поисковым системам, это нормально, но всегда следите за тем, чтобы альтернативный текст служит своей основной цели, указывая, что это за изображение, для тех, кто не может видеть графику файл.
Другие атрибуты изображения
Файл.
IMG.
Тег также имеет два других атрибута, которые вы можете использовать при размещении изображения на своей веб-странице - ширину и высоту. Например, если вы используете редактор WYSIWYG, такой как Dreamweaver, он автоматически добавляет эту информацию за вас. Вот пример:
Файл.
ШИРИНА.
а также.
ВЫСОТА.
атрибуты сообщают браузеру размер изображения. Затем браузер точно знает, сколько места в макете выделить, и может перейти к следующему элементу на странице во время загрузки изображения. Проблема с использованием этой информации в вашем HTML заключается в том, что вы не всегда хотите, чтобы ваше изображение отображалось в точном размере. Например, если у вас есть.
отзывчивый веб-сайт
чей размер изменяется в зависимости от экрана посетителей и размера устройства, вы также захотите, чтобы ваши изображения были гибкими. Если вы укажете в своем HTML, что такое фиксированный размер, вам будет очень трудно переопределить его с помощью адаптивного.
CSS медиа-запросы
. По этой причине и для сохранения разделения стиля (CSS) и структуры (HTML) рекомендуется НЕ добавлять атрибуты ширины и высоты в свой HTML-код.
Одно примечание: если вы оставите эти инструкции по изменению размеров отключенными и не укажете размер в CSS, браузер все равно будет показывать изображение с размером по умолчанию.
Под редакцией Джереми Жирара