Пиксели, файлы и первая страница
Цель: понять, что мы открываем в браузере и какие файлы нужны своей странице. Результат: ты находишь страницу, её оформление и картинку, открываешь её и поручаешь изменить один заголовок.
Из чего складывается изображение
У цифровой фотографии есть сетка маленьких элементов — пикселей. У каждого пикселя записан цвет. Размер 800 × 600 означает 800 столбцов и 600 строк. Умножаем: всего 480 000 пикселей. Это размер изображения в пикселях, а не количество байтов и не сантиметры на экране.
В нашей демонстрации нарисована условная сетка 8 × 8. Она увеличена, чтобы клетки было видно. Настоящий экран гораздо плотнее, а отдельный пиксель изображения может занимать при показе разное число точек экрана. Подробно разберём это на второй встрече.
Файл, имя и расширение
Файл — именованный набор данных. Фото, текст страницы и её оформление можно хранить в отдельных файлах. Папка объединяет файлы и другие папки. У earth.webp полное имя файла — earth.webp, основная часть — earth, расширение — .webp. Расширение подсказывает предполагаемый формат — способ записи данных.
Переименование photo.jpg в photo.png не переводит изображение в другой формат. Для перевода программа должна прочитать данные и записать их заново. Некоторые системы скрывают расширения. Посмотри свойства файла в Проводнике Windows или сведения в Finder на Mac, прежде чем делать вывод по видимому имени. Не открывай неизвестную программу только из-за знакомого названия файла.
Как найти файл
Путь — последовательность папок до файла. В нашем проекте путь относительно папки Первый_сайт — images/earth.webp. Относительный путь начинается от выбранного места. Полный, или абсолютный, путь начинается от корня файловой системы, например C:\Учёба\Первый_сайт\index.html в Windows или /Users/student/Study/first-site/index.html на Mac. Это учебные примеры путей, а не подтверждённые папки твоего компьютера.
Если перенести только index.html, а папку images оставить на другом месте, путь до фото перестанет совпадать. Обычно страницу переносят вместе с её ресурсами. Ресурсы — нужные странице файлы, например стиль и изображение.
Сколько места занимает файл
Байт — единица количества данных, в одном байте восемь бит. Бит может иметь одно из двух значений, 0 или 1. Для этого урока считаем 1 КБ = 1000 байт, 1 МБ = 1000 КБ, 1 ГБ = 1000 МБ. В других программах встречаются КиБ = 1024 байта, МиБ = 1024 КиБ, ГиБ = 1024 МиБ. Поэтому при точном сравнении записываем количество байтов и обозначение единицы.
Число пикселей и объём файла связаны, но не равны: ещё влияют формат, содержание, прозрачность и сжатие. Точный объём можно узнать по свойствам. Вторая встреча будет о том, как выбирать картинку для страницы.
Почему файл становится страницей
Браузер — программа, которая показывает веб-страницы. Веб-страница — документ, который браузер читает и отображает. HTML — язык разметки: он обозначает, где заголовок, абзац, ссылка и изображение. Например, <h1>Клуб наблюдений</h1> обозначает главный заголовок. Этот фрагмент нужен для узнавания, набирать его вручную не надо.
CSS — язык описания оформления: цвет, размер букв и расположение элементов. В примере содержание лежит в index.html, оформление — в style.css, фотография — в images/earth.webp. Файл CSS подключён из HTML. Пока мы открываем локальную страницу: файл с твоего компьютера. Слово «локальный» означает «на этом устройстве». Публикацию для других людей изучим позже.
Ссылка ведёт к адресу или разделу. Наша кнопка «Посмотреть план» выглядит как кнопка, а по устройству является ссылкой на раздел этой же страницы. Нажми и проверь место перехода. Красивая кнопка ещё не доказывает, что действие работает.
Как поручать работу и проверять
Начни с маленького результата: «Измени только главный заголовок». Помощник показывает затрагиваемый файл и сохраняет его прежнее состояние. После правки обнови страницу и прочитай заголовок. Затем проверь, что фото и переход к плану по-прежнему работают. Возврат прежнего файла — способ отменить последнюю учебную правку. На восьмой встрече добавим систему версий Git.
Новые слова
Пиксель — элемент сетки изображения. Файл — именованный набор данных. Папка — место организации файлов. Расширение — окончание имени, подсказывающее формат. Формат — способ записи данных. Путь — место файла в папках. Бит — значение 0 или 1. Байт — восемь бит. Браузер — программа показа страниц. HTML — разметка содержания. CSS — правила оформления. Локальный — находящийся на этом устройстве. Ресурс страницы — нужный ей файл.
Я понимаю и могу сделать
- [ ] Объяснить размер 800 × 600 и не назвать его весом файла.
- [ ] Найти расширение, файл страницы, стиль и фото.
- [ ] Показать полный и относительный путь.
- [ ] Открыть страницу и проверить переход по ссылке.
- [ ] Поручить одну правку и вернуть прежний файл при ошибке.
Источники
Проверены 04.11.2026: MDN: пиксель, файлы проекта, основы HTML. Подписи интерфейса ОС могут отличаться. Перед встречей преподаватель проверяет их на компьютере ученицы.