В прошлом уроке у TaskBoard появилась папка проекта. В ней уже есть место для будущих страниц, оформления, поведения, данных и заметок. Теперь пора сделать первый файл, который браузер сможет открыть как страницу.
Создайте внутри taskboard-static файл index.html и запишите в него две строки:
<h1>TaskBoard</h1>
<p>Прототип системы управления проектами и задачами.</p>
Если открыть файл в браузере, вы увидите заголовок и короткое описание. Это уже похоже на начало страницы. Браузер прочитал файл и показал содержимое.
Но у такого файла есть слабое место. В нем есть видимый текст, а служебной части пока нет. Браузер не получил название страницы для вкладки. В файле не указан язык документа. Не записана кодировка, по которой нужно читать русские буквы. Не задана общая рамка HTML-документа.
Для маленького фрагмента браузер часто сам достраивает недостающие части. В учебном примере это выглядит удобно, но для проекта TaskBoard нам нужен аккуратный файл, который явно сообщает браузеру: перед ним современный HTML-документ, написанный на русском языке, с понятной служебной частью и видимым содержимым.
В этом уроке мы превратим короткий фрагмент в полноценный index.html.
Зачем странице служебная рамка
В первом уроке мы говорили о веб-странице как о документе. Документу нужно не только видимое содержимое. Ему нужны сведения о самом себе: по каким правилам его читать, на каком языке написан текст, какое название показать во вкладке.
Представьте обычный бумажный документ. На листе может быть основной текст, а вокруг него - название, дата, номер страницы, подпись, служебные пометки. Эти детали помогают правильно понять документ. В HTML похожая идея: часть файла видит пользователь, а часть помогает браузеру обработать страницу.
Минимальный HTML-документ TaskBoard будет состоять из нескольких частей:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>TaskBoard</title>
</head>
<body>
<h1>TaskBoard</h1>
<p>Прототип системы управления проектами и задачами.</p>
</body>
</html>
Пока этот код может выглядеть большим по сравнению с двумя строками из разведки. Дальше разберем каждую часть по порядку. Главная цель урока - понять, какие области есть у HTML-документа и зачем они нужны.
<!doctype html>: первая строка документа
Первая строка современного HTML-файла:
<!doctype html>
Она называется объявлением типа документа. Эта строка сообщает браузеру, что файл нужно обрабатывать по современным правилам HTML.
Историю браузеров оставим за рамками урока. Практическое правило такое: <!doctype html> пишется первой строкой HTML-файла. Заголовки, абзацы и другие теги идут после нее. У этой строки нет закрывающей пары, потому что это служебное объявление.
Если в index.html TaskBoard первой строкой стоит <!doctype html>, браузер получает ясный сигнал: документ написан для современного веба.
<html lang="ru">: оболочка всего документа
После doctype открывается главный элемент документа:
<html lang="ru">
...
</html>
Внутри <html> находится вся HTML-страница. Этот элемент работает как общая оболочка: в нем лежит и служебная часть, и видимое содержимое.
Запись lang="ru" внутри открывающего тега называется атрибутом. Атрибут уточняет элемент. В данном случае он сообщает, что основной язык страницы - русский.
Язык документа нужен не только человеку. Браузер, поисковые системы и программы для чтения с экрана используют эту информацию. Например, программа для чтения текста вслух сможет выбрать правильное произношение, если знает язык страницы.
Для TaskBoard в этом курсе подходит русский язык, поэтому в корневом элементе пишем:
<html lang="ru">
Позже у нас появятся другие атрибуты, но сейчас достаточно понять общий принцип: тег может иметь дополнительные свойства, которые уточняют его роль.
<head>: служебная часть
Внутри <html> документ делится на две крупные области. Первая область - head.
<head>
<meta charset="utf-8">
<title>TaskBoard</title>
</head>
head хранит служебную информацию о странице. Пользователь не видит эту область как обычный текст на экране, но браузер читает ее перед показом страницы.
Для первого index.html нам нужны две служебные строки: кодировка и название вкладки.
Кодировка записывается так:
<meta charset="utf-8">
Кодировка - это правила, по которым символы хранятся в файле. Если браузер неверно определит кодировку, русские буквы могут превратиться в странные символы. Значение utf-8 подходит для современного веба и спокойно хранит русский текст.
Название вкладки записывается в title:
<title>TaskBoard</title>
Этот текст браузер показывает во вкладке, в истории и в закладках. Если title не указан, вкладка может получить имя файла или путь к нему. Для учебного проекта лучше сразу дать странице человеческое название.
<body>: видимая часть
Вторая крупная область документа - body.
<body>
<h1>TaskBoard</h1>
<p>Прототип системы управления проектами и задачами.</p>
</body>
Все, что пользователь видит в основной области страницы, находится внутри body. В нашем первом файле это заголовок и короткое описание TaskBoard.
h1 здесь обозначает главный заголовок страницы. p обозначает абзац текста. Мы подробно вернемся к заголовкам, абзацам и другим смысловым элементам в блоке про HTML-структуру интерфейса. Сейчас эти два тега нужны как самый короткий видимый текст для первой страницы.
Разделение на head и body помогает держать документ аккуратным. Кодировка и название вкладки лежат в head. Заголовок и описание продукта лежат в body. Если видимый текст случайно попадет в служебную часть, документ станет труднее читать и поддерживать. Если служебная строка окажется среди видимого содержимого, браузер может обработать ее не так, как вы ожидали.
Собираем index.html TaskBoard
Теперь можно собрать файл целиком. Откройте taskboard-static/index.html и замените короткий фрагмент на полноценный документ:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>TaskBoard</title>
</head>
<body>
<h1>TaskBoard</h1>
<p>Прототип системы управления проектами и задачами.</p>
</body>
</html>
Сохраните файл и откройте его в браузере. В основной области вы увидите тот же заголовок и тот же абзац. Главное изменение находится в устройстве документа. Теперь у файла есть современный режим HTML, указан русский язык, задана кодировка, а вкладка получает название TaskBoard.
Разберем путь браузера по файлу сверху вниз. Сначала он встречает doctype и понимает, что перед ним современный HTML-документ. Затем открывает корневой элемент html и видит язык ru. Внутри head читает кодировку и название вкладки. Затем переходит к body и показывает видимое содержимое.
Такой файл уже можно считать аккуратной стартовой страницей TaskBoard. Он еще не похож на настоящий интерфейс, но его структура правильная. Это важный шаг: перед тем как добавлять ссылки, списки, карточки и формы, нужно иметь надежный каркас документа.
Частые ошибки в первом HTML-документе
Первые ошибки обычно связаны с порядком и закрытием тегов.
Первая ошибка - забыть doctype или поставить его не в начало файла. В этом курсе держите простое правило: <!doctype html> всегда первая строка.
Вторая ошибка - положить title или meta charset внутрь body. Эти строки относятся к служебной части документа, поэтому должны быть внутри head.
Третья ошибка - положить видимый заголовок внутрь head. Заголовок TaskBoard, который пользователь должен увидеть на странице, находится в body.
Четвертая ошибка - забыть закрывающие теги head, body или html. Браузер часто пытается исправить неполный HTML сам, но разработчику лучше не полагаться на догадки браузера. Аккуратная структура легче читается и меньше ломается при расширении.
Пятая ошибка - перепутать title и h1. title дает название вкладке. h1 показывает главный заголовок в области страницы. В первом index.html оба текста могут быть одинаковыми - TaskBoard, но они живут в разных местах и выполняют разные задачи.
Что будет дальше
После этого урока у TaskBoard есть первая полноценная страница. Она пока очень маленькая: только название и описание. Но теперь у проекта есть рабочий index.html, который браузер читает как нормальный HTML-документ.
Следующий вопрос появится сразу, как только страниц станет больше одной. У TaskBoard будут проекты, доска и страница задачи. Чтобы пользователь мог переходить между ними, нужны ссылки. А чтобы ссылки работали надежно, нужно понимать пути к файлам.
В следующем уроке мы создадим несколько страниц TaskBoard и свяжем их между собой. Это будет отдельный шаг: сейчас мы закончили именно каркас первого HTML-документа.
HTML-страница оформляется как документ со служебной и видимой частью. Служебная часть помогает браузеру правильно прочитать файл, а видимая часть содержит то, что пользователь увидит на странице.
Минимальный index.html начинается со строки <!doctype html>. Она сообщает браузеру, что файл нужно читать как современный HTML-документ. Весь документ находится внутри <html lang="ru">, где атрибут lang указывает язык страницы.
Внутри <head> лежит служебная информация. <meta charset="utf-8"> задает кодировку, чтобы русский текст отображался корректно. <title>TaskBoard</title> задает название вкладки браузера.
Внутри <body> лежит видимое содержимое страницы. В первом файле TaskBoard это главный заголовок <h1>TaskBoard</h1> и короткий абзац с описанием продукта.
К концу урока у вас должен получиться полноценный taskboard-static/index.html. В следующем уроке мы добавим другие страницы TaskBoard и разберем ссылки между файлами.
Служебная часть страницы
Где в HTML-документе обычно находится кодировка и название вкладки браузера?
Части HTML-документа
Соотнесите часть HTML-документа с её ролью.
Заполните каркас
Вставьте ключевые части минимального HTML-документа.
Полный index.html
Соберите корректный index.html для TaskBoard: укажите doctype, язык страницы, кодировку, title, h1 и один абзац с описанием.
Почините структуру
Исправьте HTML: служебные элементы должны оказаться в head, а видимое содержимое — в body.
Проверка понимания
Ответьте коротко своими словами.
1Почему двух тегов h1 и p недостаточно для аккуратного HTML-документа?
2Что изменится во вкладке браузера после добавления title?
3Какая информация должна находиться в head, а какая — в body?
Подсказка
Подсказка: Опирайтесь на doctype, lang, meta charset, title, head и body.