Графические изображения на веб-странице

Графические изображения на веб-странице

Подготовь учебное изображение и размести его на локальной HTML-странице.

Текст рассказывает, картинка показывает. Вместе они делают страницу понятнее — если файл лежит рядом и путь записан верно.

Результат урока

Объяснишь назначение элемента img; положишь учебный PNG или JPEG в папку PhotoPage_10 (рядом со страницей или в images/); создашь HTML с заголовком, абзацем и одним <img src alt width height>; проверишь относительный путь; убедишься, что при отсутствии файла виден текст alt; найдёшь и исправишь сломанный путь.

Перед началом

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор и браузер. Интернет для практики не нужен. PascalABC.NET сегодня не используется.

На учебной странице размещай только учебные изображения: пейзаж, объект, схема. Личные фото одноклассников — только с разрешения учителя.

Вспомни: каркас HTML, сохранение .html, просмотр в браузере — с урока 9. Теги текста и списки — с уроков 10–11. Относительные адреса — с урока 12. Новое — вставка изображения.

Основа — § 7 учебника (изображения на странице). CSS background-image, звук и видео — следующие уроки / резерв.

Зачем изображение на странице

Изображение показывает объект, место или схему, которые трудно описать одним абзацем. Файл картинки хранится отдельно от HTML; страница только указывает, какой файл вставить.

Без правильного пути браузер не найдёт файл. С верным src картинка появляется рядом с текстом.

Элемент img

Изображение вставляет одиночный тег <img>. У него нет закрывающей пары </img>. Путь, подпись и размеры задают атрибуты.

<img src="park.png" alt="Парк у школы" width="480" height="300">

Теги браузер выполняет: если на странице видны сами <img> и src, файл, скорее всего, сохранён не как .html.

Атрибут src

Атрибут src (source) указывает, откуда взять файл. Для картинки в той же папке, что и HTML, достаточно имени файла: park.png.

Браузер читает файл с диска. Интернет для локальной практики не нужен.

Атрибут alt

Атрибут alt описывает изображение текстом. Если файл не найден или не загрузился, читатель видит эту подпись. alt должен говорить о содержании: «Зелёный парк с дорожкой», а не «картинка1».

Проверка: временно переименуй файл, обнови страницу (F5) и прочитай alt. Затем верни имя файла.

Размеры width и height

width и height задают место картинки на странице в пикселях. Сохраняй пропорции: не растягивай маленькое фото огромными числами без нужды.

Папка страницы и images/

Два удобных варианта на уроке:

Относительный путь

Относительный путь считается от HTML-файла к картинке — так же, как относительный href на уроке 12. Если файл лежит в другой папке, а в src только имя, браузер его не найдёт.

Сломанный путь

Путь «ломается», когда браузер не находит файл по адресу из src.

Типичные ошибки: Park.png вместо park.png (регистр), prak.png (опечатка), файл в другой папке, забыто расширение .png / .jpg.

Сохранение страницы и фото

Сохраняй HTML в папку PhotoPage_10 (10 — номер места), тип «Все файлы», кодировка UTF-8, расширение .html. Учебный PNG или JPEG положи рядом или в images/.

Просмотр в браузере

Открой index.html двойным щелчком. Убедись, что фото видно. После правки кода сохрани файл и обнови страницу (F5). Интернет не нужен.

Чек-лист изображения

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем переходи к своей папке.

Практика: PhotoPage_10

Создай папку PhotoPage_10 в своей рабочей папке.

Лист проверки

Критерии готовности

Шесть диагностических баллов: в папке есть .html и файл изображения; на странице есть заголовок, абзац и одно фото; у img заданы src, alt, width и height; относительный путь совпадает с расположением файла; при отсутствии файла виден alt; сломанный путь найден и исправлен после сохранения и F5. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: второе учебное фото в images/; кратко объяснить, почему background-image сегодня не обязателен.

Если результат отличается

Объясни самостоятельно

1. Какие атрибуты нужны у элемента img и зачем каждый?
2. Чем src="park.png" отличается от src="images/park.png"?
3. Что проверить в первую очередь, если картинка «не отображается»?

Показать ответ после выполнения

Домашнее задание

§ 7, фрагмент об изображениях. Письменно: 1) какие атрибуты у img и зачем; 2) чем src="foto.jpg" отличается от src="images/foto.jpg"; 3) две причины, почему картинка может «не отображаться». По желанию — второе учебное фото в images/. CSS background-image, звук и видео не задаются. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2, § 7 «Создание веб-страниц» (изображения, элемент img). Мультимедиа — последующие темы. Содержание главы. Электронное приложение.

MDN Web Docs: элемент img, изображения в HTML.

PhotoPage, чек-лист пути, лист и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора.