Веб-страница и сайт. Структура HTML-документа

Веб-страница и сайт. Структура HTML-документа

Собери первую веб-страницу в простом текстовом редакторе и открой её в браузере.

Текст в файле становится веб-страницей, когда в нём появляется разметка HTML.

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

Создашь в своей папке файл index.html с каркасом <!DOCTYPE html>, html, head (meta charset и title), body (h1 и абзацы); сохранишь его с расширением .html; откроешь в браузере; сверишь текст вкладки и текст на странице; найдёшь и исправишь ошибку вложенности тегов.

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

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор (Блокнот или Notepad++) и браузер. Среда программирования сегодня не нужна, интернет для работы тоже.

На учебной странице размещай только учебный текст: без домашнего адреса, телефона и личных фотографий.

Вспомни: файл, папка и расширение имени файла тебе уже знакомы. Новое — язык разметки и каркас документа.

Основа — § 6 и начало § 7 учебника. Оформление цветом и шрифтами (CSS), списки, гиперссылки и изображения сегодня не вводим: это уроки 10–15.

Веб-страница и веб-сайт

Веб-страница — отдельный документ, который показывает браузер. Веб-сайт — несколько связанных между собой страниц с общей темой и структурой.

Сайт обычно создают по шагам: определяют тему и задачи, проектируют структуру и связи страниц, готовят текст и графику, описывают разметку страниц, задают оформление и только потом тестируют и размещают сайт. Сегодня мы работаем на четвёртом шаге — описываем разметку одной страницы.

Зачем нужен язык HTML

HTML (HyperText Markup Language) — язык разметки гипертекстовых документов. Разметка — это описание частей документа и их взаимного расположения. HTML отвечает на вопрос «что это за фрагмент», а не «каким он должен быть на вид».

Разметка выполняется тегами.

Парный тег состоит из открывающего и закрывающего: <p>текст</p>. Непарный тег стоит один: <br>. Содержание элемента — то, что находится между открывающим и закрывающим тегами. Теги браузер выполняет и на экран не печатает: если ты видишь сами теги, значит что-то пошло не так.

Инструменты веб-конструирования бывают ручные (текстовый редактор) и визуальные (редакторы, которые генерируют код сами). Сегодня работаем вручную: так видно каждую строку разметки.

Минимальная структура документа

У любой страницы один и тот же каркас: внешний элемент html, а внутри него две части — head и body.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя страница</title>
</head>
<body>
  <h1>Моя первая страница</h1>
  <p>Это первый абзац.</p>
</body>
</html>

head и body

В head — сведения о документе: кодировка и название страницы. В body — то, что читатель видит. Абзац, случайно записанный внутри head, на странице не появится.

Кодировка UTF-8

Строка <meta charset="utf-8"> сообщает браузеру, в какой кодировке сохранён текст файла. Без неё вместо русских букв могут появиться «кракозябры». Сам файл при сохранении тоже должен быть в кодировке UTF-8.

В учебнике та же настройка записана длиннее: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">. Это равнозначная устаревшая форма; короткую запись использовать проще.

Два разных заголовка

Текст из title виден на вкладке браузера. Текст из h1 виден на самой странице. Это разные тексты, и совпадать они не обязаны. Сверка вкладки и страницы — быстрый способ проверить, что каркас собран верно.

Заголовок и абзацы

h1 — главный заголовок страницы, p — отдельный абзац.

<body>
  <h1>Информатика, 11 класс</h1>
  <p>Эту страницу я создал в простом редакторе.</p>
  <p>Файл сохранён с расширением .html.</p>
</body>

Пустая строка в редакторе абзац не создаёт: переводы строк браузер игнорирует. Нужен тег p для каждого абзаца.

Сохранение файла

HTML-документы сохраняют с расширением .html (допустимо и .htm). В Блокноте выбери тип файла «Все файлы», иначе получится index.html.txt, и браузер покажет код с тегами вместо страницы. Кодировка при сохранении — UTF-8.

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

Открой файл из своей папки двойным щелчком или через «Открыть с помощью». Интернет не нужен: файл читается с диска. Держи редактор и браузер в двух окнах: правишь код, сохраняешь, обновляешь страницу клавишей F5.

Вложенность тегов

Теги могут вкладываться друг в друга, но не пересекаться. Закрываем их в обратном порядке.

<!-- верно -->
<p><b>Важный</b> абзац.</p>

<!-- ошибка: теги пересекаются -->
<p><b>Важный абзац.</p></b>

Приём проверки: веди взглядом от открывающего тега к его закрывающему. Линии могут быть вложены, но не должны пересекаться.

Чек-лист: найди причину

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

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

Практика: MyPage_07

Создай папку MyPage_07 (07 — номер места) в своей рабочей папке.

Файл можно назвать и page.html — важно расширение, а не имя. В title и h1 напиши свои тексты.

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

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

Шесть диагностических баллов: папка с файлом .html создана; каркас полный; кодировка задана и русский текст читается; в body есть h1 и не менее двух абзацев; правка видна после обновления; ошибка вложенности найдена и объяснена. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: третий абзац, второй заголовок, свой текст о теме урока, просмотр кода страницы в браузере (Ctrl + U).

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

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

1. Зачем нужен язык разметки HTML и чем тег отличается от содержания?
2. Что помещают в head, а что в body? Зачем строка кодировки?
3. Что покажет браузер, если файл сохранить как .txt?

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

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

§ 6 и начало § 7, вопросы после параграфа. Письменно: 1) зачем нужен язык разметки HTML; 2) что помещают в head, а что в body; 3) зачем в head строка с кодировкой utf-8. По желанию — дописать свой текст на странице MyPage. Оформление средствами CSS, списки, гиперссылки и изображения не задаются: это следующие уроки раздела. Установка программ дома не требуется.

Источники

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

MDN Web Docs: doctype, meta charset, head, body, title, p.

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