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