"Информатика (в 2-х частях)", Горячев А.В., Островский С.Л., Паволоцкий А.В., Семёнов А.А., Чернышёва Т.Л., Широков Д.В.
Иллюстрации дополняют текст web-страницы, помогают объяснить содержание, привлечь внимание и создать оформление. Чтобы браузер показал изображение, его добавляют тегом img и указывают в атрибуте src адрес файла. Атрибут alt содержит текстовое описание на случай, если картинка недоступна или её нельзя увидеть. Путь, имя и расширение файла должны быть указаны точно, а размер стоит выбирать так, чтобы изображение не исказилось и страница не загружалась слишком долго.
Текст подготовлен нейронной сетью по теме параграфа и не заменяет учебник — важные факты и формулировки сверяйте с ним.
Иллюстрация web-страницы — изображение, которое дополняет текст и помогает передать информацию или оформить страницу. Это может быть фотография, схема, карта или рисунок. Иллюстрация нужна не просто для украшения: она должна помогать читателю разобраться в теме. Поэтому её содержание выбирают в соответствии с текстом страницы.
Тег img — одиночный HTML-тег, с помощью которого изображение размещают на web-странице. «Одиночный» значит, что тег не обрамляет другой текст и не требует парного закрывающего тега. Сам по себе img не сообщает браузеру, какой именно файл показывать. Адрес файла задают в атрибуте src.
Атрибут src — атрибут тега img, задающий путь к файлу изображения. Браузер использует этот адрес, чтобы найти файл и загрузить его для отображения. Путь должен соответствовать расположению изображения относительно HTML-страницы либо вести к ресурсу в интернете. Ошибка в адресе не даст браузеру найти картинку.
Атрибут alt — атрибут тега img, содержащий текстовую альтернативу изображению на случай, если оно не отображается. В описании передают смысл картинки, а не просто повторяют её имя на диске. Такой текст помогает разобраться в содержании страницы при сбое загрузки. Он также полезен людям, которые воспринимают страницы с помощью программ чтения с экрана.
Иллюстрация может показать то, что трудно или долго описывать словами: например, расположение объектов на карте или внешний вид устройства. Она привлекает внимание, а подобранные в одном стиле изображения помогают оформить страницу. Однако случайная картинка способна отвлечь читателя и запутать его. Поэтому изображение должно соответствовать теме и поддерживать смысл текста, а не противоречить ему.
Браузер не угадывает, где хранится нужная картинка: он обращается по адресу, заданному в src. Относительный путь описывает положение файла по отношению к HTML-файлу: если оба находятся в одной папке, достаточно указать photo.jpg, а для папки images — images/photo.jpg. Такой способ удобен, когда весь сайт перемещают вместе. Полный адрес указывает местоположение ресурса в интернете, поэтому он зависит от доступности сайта, на котором хранится картинка.
Запись img состоит из имени тега и атрибутов, помещённых в открывающий знак тега. Например: <img src="photo.jpg" alt="Горный пейзаж">. Здесь src указывает браузеру, какой файл загрузить, а alt описывает изображение словами. Тег img одиночный, потому что у изображения нет содержимого, которое нужно было бы заключить между открывающей и закрывающей частями. Если забыть указать src, браузеру будет нечего отображать.
Alt нужен не только на случай ошибки: программы чтения с экрана озвучивают его, помогая понять назначение картинки. Поэтому описание должно быть коротким и передавать главное, а не состоять из слов вроде «фото» или «картинка» без уточнений. Размер файла тоже влияет на работу страницы: тяжёлое изображение может долго загружаться, особенно при медленном соединении. Подготовленная заранее иллюстрация подходящего размера быстрее открывается, а сохранение пропорций не позволяет ей выглядеть растянутой или сжатой.
| Элемент или атрибут | Что задаёт | На что обратить внимание |
|---|---|---|
| Тег img | Размещение изображения на web-странице | Это одиночный тег, закрывающая пара ему не нужна |
| Атрибут src | Путь к файлу изображения | Проверь расположение, имя, расширение и регистр символов |
| Атрибут alt | Текстовую альтернативу изображению | Опиши смысл картинки, а не только имя файла |
| Атрибуты размера | Ширину и высоту отображаемого изображения | Сохраняй исходные пропорции, чтобы не исказить картинку |
Пользуйся таблицей как проверочным списком: сначала найди тег, который добавляет изображение, затем проверь адрес и описание. После этого оцени, подходят ли размеры и не меняют ли они форму картинки. Так проще заметить пропуск или неверное значение до просмотра страницы в браузере.
Задача 1. Добавьте файл photo.jpg, который находится в той же папке, что и HTML-страница, и задайте ему альтернативный текст. Сначала выясним, как браузеру найти файл: раз папка общая, полный адрес не нужен. Затем выберем описание, которое сообщает содержание изображения, а не дублирует название photo.jpg. В этом примере предположим, что на фото изображён кот.
Ответ: <img src="photo.jpg" alt="Рыжий кот на подоконнике">. Если на фотографии другой объект, текст alt нужно заменить описанием именно этой картинки. Тег закрывать не требуется.
Задача 2. Изображение не появляется, хотя фрагмент HTML содержит путь к файлу. Нужно выяснить, почему браузер не может его загрузить, а не менять все элементы подряд. Сначала сравним адрес в src с папками и названием настоящего файла. Допустим, запись выглядит так: <img src="images/Photo.JPG" alt="Сосна в лесу">, а на диске файл назван photo.jpg и лежит рядом со страницей.
Ответ: в указанном примере верный адрес — photo.jpg, поэтому запись src="photo.jpg" позволит найти файл. Если у файла действительно другое имя или расширение, указывают именно его. После исправления проверь, что картинка загрузилась, а не только что исчезла ошибка в коде.
Задача 3. Иллюстрация хранится в папке images, должна отображаться шириной 300 пикселей, а высота должна сохранить исходные пропорции. Путь записываем относительно HTML-файла, поэтому используем папку images. Чтобы не исказить изображение, недостаточно произвольно подобрать две величины: исходная ширина и высота должны иметь то же соотношение, что и новые. Если задать только ширину и позволить высоте подстроиться пропорционально, форма картинки сохранится.
Ответ: <img src="images/photo.jpg" alt="Маяк на берегу моря" width="300">. Высота при таком изменении должна соответствовать исходным пропорциям; если способ отображения требует указать оба размера, рассчитай высоту по исходному соотношению сторон. Не растягивай картинку ради точного совпадения с произвольным прямоугольником.
Первая ошибка — считать путь в src относительно любой папки на компьютере, например папки, из которой открыли редактор. На деле относительный адрес отсчитывают от расположения HTML-файла, потому что браузер ищет изображение рядом с документом или в указанной относительно него папке. Такое заблуждение возникает, когда файлы разложены по нескольким папкам. Проверь путь, мысленно начиная от папки страницы, и убедись, что по нему действительно можно дойти до картинки.
Вторая ошибка — допустить опечатку в имени или расширении либо не заметить разницу между заглавными и строчными буквами. Браузер ищет файл по указанному адресу, а не по похожему названию, поэтому photo.jpg и Photo.JPG могут оказаться разными именами. Опечатки часто появляются при наборе адреса вручную или переименовании файла. Сверь запись в src с именем файла посимвольно и проверь его реальное расширение.
Третья ошибка — оставлять alt пустым без причины или вписывать туда только имя файла. Такое происходит, когда alt принимают за техническую подпись, хотя его задача — сообщить смысл изображения тем, кто не видит картинку. Подумай, что полезного узнает читатель из этого описания; если ответ неясен, текст стоит переписать. Указывай предмет или действие, значимые для страницы, а не название вроде photo2.
Четвёртая ошибка — задать ширину и высоту с несоответствующими пропорциями. Изображение тогда растягивается или сжимается, потому что браузер подгоняет его под указанные размеры. Так бывает, когда значения выбирают независимо, стремясь заполнить нужное место на странице. Сравни отношение ширины к высоте с исходным изображением; если оно изменилось, задай один размер или пересчитай второй.
Для добавления картинки нужны знания о назначении HTML-тегов и атрибутов: img задаёт элемент, а его атрибуты — характеристики изображения. Кроме того, нужно уметь сохранять файлы и ориентироваться в папках, иначе верный код может ссылаться на отсутствующий файл. Относительные пути применяются не только к картинкам. Они пригодятся при создании многостраничных сайтов и подключении таблиц стилей, скриптов и ссылок.
Умение выбирать подходящие иллюстрации и описывать их важно при подготовке web-проектов. Текстовая альтернатива делает содержание доступнее пользователям, которые не могут увидеть изображение или столкнулись с проблемой загрузки. Значит, оформление страницы связано не только с внешним видом, но и с тем, насколько разным людям удобно получать информацию.
Почему изображение не отображается, хотя тег img записан?
Чаще всего браузер не находит файл: в src допущена ошибка в пути, имени или расширении. Сверь адрес с расположением HTML-файла и проверь, что изображение действительно находится в указанной папке.
Как понять, какой путь указывать в атрибуте src?
Путь указывают относительно расположения HTML-файла или задают полный адрес ресурса в интернете. Например, для файла в той же папке подойдёт photo.jpg, а для файла в папке images — images/photo.jpg.
Зачем нужен атрибут alt, если изображение видно?
Alt помогает понять содержание картинки, если файл не загрузился. Текст также могут использовать программы чтения с экрана, чтобы описать изображение незрячему пользователю.
Нужно ли закрывать тег img?
Нет, img — одиночный тег: он не охватывает текст или другие элементы. Поэтому после него не пишут отдельный закрывающий тег.
Как изменить размер изображения и не исказить его?
Задай ширину или высоту, сохраняя исходное соотношение сторон. Если указываешь оба значения, рассчитай их пропорционально; иначе картинка может стать вытянутой или сплющенной.
§ 4. Иллюстрирование web-страниц
