Пиксели, файлы и первая страница
Содержание
Пиксель изображения
8 столбцов × 8 строк = 64 клетки.
- Пиксель хранит цвет в одной позиции сетки.
- 8 × 8 = 64 пикселя
- Сетка увеличена, чтобы видеть отдельные клетки.
Заметки преподавателя
Покажите клетку, строку и столбец. Объясните, что это условная сетка изображения, а не фотография устройства экрана. Попросите посчитать 8 строк по 8 клеток. Размер картинки на экране может меняться. Изображение можно сохранить в файле. Теперь посмотрим на имя этого файла.
Имя файла и расширение
- Файл — именованный набор данных.
- earth.webp
- earth — основная часть имени
- .webp — расширение. Формат — способ записи данных.
- Переименование .jpg в .png не меняет данные изображения.
Заметки преподавателя
Файл — именованный набор данных. earth.webp — полное имя файла, earth — основная часть. Формат — способ записи данных. Расширение — часть имени. Покажите расширение на реальном файле, проверьте, не скрывает ли его ОС. Для смены формата нужно заново записать данные программой.
Папка и путь к фотографии
Первый_сайт/
- index.html
- style.css
- images/
- earth.webp
- Папка объединяет файлы. Путь показывает расположение файла.
- Путь от папки Первый_сайт: images/earth.webp
Заметки преподавателя
Папка организует файлы. Путь указывает место файла. Относительный путь к фото от папки проекта — images/earth.webp. Полный путь начинается от корня диска или файловой системы. Откройте настоящую папку. Пример пути в конспекте не является папкой ученицы.
Объём файла
- Байт — единица объёма: 8 бит. Бит — значение 0 или 1.
- 1 килобайт (КБ) = 1000 байт
- 1 мегабайт (МБ) = 1000 КБ
- 1 гигабайт (ГБ) = 1000 МБ
- Кибибайт (КиБ) = 1024 байта. Здесь считаем в КБ.
Заметки преподавателя
Бит имеет значение 0 или 1. В уроке используем десятичные единицы. Уточните разницу КБ и КиБ без заучивания всех коэффициентов. Смотрите точные байты в свойствах файла. Число пикселей само по себе не задаёт объём сжатого файла.
Файлы становятся страницей
Файлы страницы
- HTML: содержание
- CSS: оформление
- Фото: изображение
↓
Браузер читает файлы
↓
Страница на экране
- HTML — разметка содержания
- CSS — правила оформления
- Изображение — отдельный файл
- Браузер читает файлы и показывает страницу.
- Браузер — программа показа страниц. Файлы находятся на этом компьютере.
Заметки преподавателя
Браузер — программа показа веб-страниц. Страница — документ, который она читает. Соедините HTML, CSS и изображение с браузером на схеме. В этой демонстрации файлы локальные: на этом устройстве. Сервера и интернета для открытия не требуется.
Содержание и оформление
- HTML: <h1>Клуб наблюдений</h1>
- Это главный заголовок страницы.
- CSS: h1 { color: blue; }
- Это правило делает заголовок синим.
Заметки преподавателя
Это отдельные короткие примеры, они не повторяют дословно следующую страницу. Не просите переписывать код. Ученик узнаёт назначение. h1 обозначает главный заголовок, color — цвет. Помощник меняет текст через HTML, оформление через CSS. Подробную разметку и правила изучим позже.
Первая страница в браузере
- index.html, style.css и images/earth.webp
- «Посмотреть план» ведёт к разделу страницы.
Заметки преподавателя
На слайде настоящий снимок подготовленной страницы. Откройте рабочий HTML отдельно. Нажмите ссылку и проверьте, куда она ведёт. Оформленный прямоугольник здесь — ссылка, а не отправка заявки. Изображение NASA / William Anders, источник под фото в самом проекте.
Одна правка и её проверка
- Описать результат
- Сохранить прежний index.html
- Попросить помощника изменить заголовок
- Обновить страницу и проверить
- Если результат неверный, вернуть прежний index.html и проверить снова.
Заметки преподавателя
Перед изменением показываем место работы. Сохраняем только затронутые исходники, не копируем весь компьютер. Полная команда находится в практике. После обновления проверяем заголовок, фотографию и переход. Если неверно — возвращаем сохранённый файл.
Практика: новый заголовок
- Новый текст: «Мои первые наблюдения за небом»
- Фотография по-прежнему видна.
- Ссылка ведёт к плану наблюдения.
- В узком окне текст читается.
Заметки преподавателя
Откройте Практика_с_Codex.md и скопируйте готовую команду. Пока ученица работает, помогайте сформулировать проверку, не забирайте её себе. Для клавиатуры используйте Tab и Enter. Исправление не должно менять данные за пределами учебной папки.
Что теперь можно объяснить
- Пиксель — элемент сетки изображения.
- Файл хранит данные, папка объединяет файлы.
- Путь указывает место файла.
- Байты описывают объём данных.
- HTML задаёт содержание, CSS — оформление.
Заметки преподавателя
Попросите показать каждый предмет на примере. Полный список терминов, пять вопросов и отдельные ответы лежат в материалах урока. Переходим дальше, когда ученица может найти три файла и проверить изменение, а не когда выучила определения.