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