Введение в HTML

HTML (HyperText Markup Language, «язык гипертекстовой разметки») описывает структуру веб-страницы. С его помощью браузеру указывают, где находятся заголовки, абзацы, списки, ссылки и изображения. Для этого части текста отмечают тегами, например <p> обозначает абзац.

Подготовка к работе

Для работы понадобятся браузер и редактор кода, например Visual Studio Code. Создайте папку website, а внутри неё два пустых файла с расширением .html. Создавайте их в редакторе кода и проверьте, что к имени не добавилось расширение .txt.

Чтобы увидеть результат, сохраните файл и откройте его в браузере. После каждого изменения сохраняйте код и обновляйте страницу. Если браузер показывает старый вариант, сначала убедитесь, что открыт нужный файл.

Документ и текст

У большинства элементов есть открывающий и закрывающий теги. Например, в записи <p>Привет!</p> тег <p> открывает абзац, а </p> закрывает его. Для главного заголовка страницы используется <h1>, для заголовков разделов подходит <h2>. Всего предусмотрено шесть уровней, от <h1> до <h6>. Выбирайте уровень по смыслу, а внешний вид заголовков позже можно будет изменить через CSS.

Начнём со страницы, на которой есть заголовки и один абзац.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Учебная страница</title>
</head>
<body>
    <h1>Знакомство с HTML</h1>
    <h2>Первый раздел</h2>
    <p>Здесь находится первый абзац.</p>
</body>
</html>

Объявление <!DOCTYPE html> включает стандартный режим отображения документа. Корневой элемент <html> объединяет основные части документа. В <head> размещается служебная информация, а внутри <body> находится видимое содержимое страницы. Текст <title> отображается во вкладке браузера, тогда как <h1> виден на самой странице.

Элементы могут находиться внутри других элементов. В примере абзац целиком расположен внутри <body>, поэтому </p> стоит раньше </body>. Соблюдайте такую вложенность и выделяйте её отступами в коде. Обычные переносы строк в исходнике не создают новые абзацы на странице, для каждого абзаца нужен отдельный <p>.

Записи lang="ru" и charset="UTF-8" называются атрибутами. Они задают свойства элементов и записываются в открывающем теге. Отделяйте атрибуты пробелами, а их значения заключайте в кавычки, как в примере. Атрибут lang указывает язык документа, charset задаёт кодировку, а настройка viewport помогает странице правильно отображаться на мобильных устройствах.

Ниже код можно изменить прямо на странице во вкладке HTML. Встроенный редактор LiveCodes сам добавляет <!DOCTYPE html>, <html>, <head> и <body>, поэтому достаточно написать заголовки и абзацы. В локальных файлах сохраняйте полную структуру документа, как показано выше.

Скопируйте полный документ в practice.html. Где появятся изменения, если задать <title> значение «Встреча клуба», а <h1> значение «Прогулка в субботу»? Предположите результат, затем измените код и откройте страницу.

Теперь на основе этой структуры начните личную страницу-визитку в index.html. Постепенно добавляйте в неё новые элементы, а practice.html оставьте для проб. Из встроенного редактора код нужно переносить в файл самостоятельно.

Задайте название вкладки «Визитка — Имя Фамилия», заменив имя своим. Добавьте один главный заголовок с именем и раздел «О себе» с заголовком <h2>. В двух абзацах расскажите об интересах и о том, чему хотелось бы научиться в веб-разработке.

Сохраните файл и откройте визитку в браузере. Название должно появиться во вкладке, а имя и два абзаца должны быть видны на странице.

Списки

Если нужно перечислить несколько однородных вещей, используйте список. Для перечня без обязательного порядка подходит <ul>, а для последовательности действий используется <ol>. Каждый пункт помещается в <li> внутри выбранного списка.

Для прогулки нужно собрать вещи и спланировать подготовку. Список вещей запишем через <ul>, а порядок действий через <ol>. Что изменится в первом списке, если заменить <ul> на <ol>? Предположите результат, затем замените открывающий и закрывающий теги, сохранив три пункта.

Список может быть вложенным. В этом случае внутренний <ul> или <ol> размещается внутри соответствующего <li>, до его закрывающего тега. Браузер сам показывает маркеры и номера, поэтому писать их в тексте пунктов не нужно.

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

В визитке списки пригодятся для интересов и образования. Дополните раздел «О себе» списком из трёх интересов. После него создайте раздел «Образование» с заголовком <h2> и списком учебных заведений или пройденных курсов. Если пока есть только один пункт, этого достаточно. Существующие заголовки и абзацы сохраните.

На странице должны появиться два списка. Маркеры должен рисовать браузер, а в исходном коде каждый пункт должен находиться внутри <li>.

Ссылки и изображения

Ссылки создаются при помощи <a>. Адрес записывается в атрибут href, а между тегами помещается понятный текст ссылки. Для внешнего сайта укажите полный адрес с https://. Чтобы предложить написать письмо, используйте адрес с mailto:.

<a href="https://developer.mozilla.org/ru/docs/Web/HTML">Справочник HTML на MDN</a>
<a href="mailto:student@example.com">Написать письмо</a>

По умолчанию ссылка открывается в текущей вкладке. Атрибут target="_blank" позволяет открыть её в новой. Если используете этот вариант, предупредите об этом в тексте ссылки. Ссылка с mailto: передаёт адрес почтовому приложению, если оно настроено на компьютере.

Для изображения используется <img>. Это пустой элемент, у которого нет закрывающего тега. Атрибут src указывает путь к файлу, alt содержит текстовую замену изображения, а width позволяет задать его ширину. В alt для фотографии напишите, что на ней изображено, например «Портрет Анны».

<img src="assets/images/photo.jpg" alt="Портрет Анны" width="200">

В отличие от внешнего адреса, путь assets/images/photo.jpg отсчитывается от папки текущего HTML-файла. Добавьте в проект папку для изображений и поместите туда фотографию или аватар. Файлы index.html и practice.html должны остаться рядом.

Сверяйте имя файла, его расширение и регистр букв. Например, photo.jpg и Photo.png обозначают разные имена. Онлайн-редактор не получает доступ к папке assets на компьютере, поэтому упражнения с локальной фотографией выполняйте в practice.html.

Вставьте фотографию в practice.html. Останется ли она на странице, если ошибиться в имени файла в src? Проверьте предположение, изменив одну букву в пути. Посмотрите, что произойдёт с изображением и текстом alt, после чего восстановите путь.

После проверки пути добавьте фотографию или аватар в раздел «О себе» в index.html. Создайте раздел «Контакты» с заголовком <h2>, ссылкой для письма и ссылкой на подходящий профиль или другой ресурс. Используйте данные, которые готовы разместить в учебной работе. Для тренировки можно оставить адрес student@example.com.

Откройте именно index.html и проверьте, что фотография загружается, а ссылка на внешний ресурс ведёт по указанному адресу.

Таблицы

Таблица подходит для данных, которые удобно сравнивать по строкам и столбцам. Саму таблицу задаёт <table>, строки создаются через <tr>, а ячейки через <td>. Для заголовочных ячеек используется <th>. Подпись <caption> поясняет назначение таблицы и размещается сразу после открывающего <table>.

Составим расписание встреч клуба. В первом столбце укажем день, во втором занятие. Атрибут scope="col" указывает, что заголовочная ячейка относится к своему столбцу. Сколько ячеек потребуется для ещё одного дня? Добавьте строку для понедельника и проверьте, что получилось три строки данных и одна строка заголовков, в каждой по две ячейки.

Браузер может показывать таблицу без видимых границ. Добавить рамки и отступы можно через CSS, к которому перейдём после разметки страницы. Атрибут border устарел, использовать его не следует.

<tr>
    <td colspan="2">Встреча отменена</td>
</tr>

Для визитки составьте таблицу навыков. Между разделами «О себе» и «Образование» добавьте раздел «Навыки» и разместите в нём таблицу с колонками «Категория» и «Навыки». В одной строке перечислите технические навыки, а в другой надпрофессиональные, например работу в команде и управление временем. Добавьте подпись таблицы.

В результате на визитке должны быть четыре раздела с заголовками <h2>. У таблицы проверьте соответствие каждой ячейки заголовку своего столбца.

Семантическая разметка и навигация

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

Для перехода к разделу на той же странице ему задают атрибут id, а в href ссылки записывают это значение с символом #. Значение id должно быть уникальным в пределах страницы и не содержать пробелов. Для визитки удобно выбрать короткие имена латиницей, например about, skills, education и contacts.

Будет ли ссылка работать, если переименовать только id раздела? Измените id="education" на id="study", затем исправьте href, чтобы ссылка снова указывала на раздел.

Если раздел уже виден во встроенном примере, переход к нему может не вызвать заметной прокрутки. В локальной визитке после нажатия ссылки в адресной строке появится её фрагмент, например #education. Само совпадение href и id проверяйте по коду.

Атрибуты id, class и title относятся к глобальным, их можно задавать у разных HTML-элементов. В отличие от id, один и тот же class может повторяться у нескольких элементов, позволяя задать им общее оформление через CSS. Глобальный атрибут title содержит дополнительную подсказку об элементе, его не следует путать с тегом <title>, задающим название вкладки.

Осталось обозначить части самой визитки. В index.html оберните главный заголовок с именем в <header>. Четыре раздела поместите в один <main>, каждый раздел оберните в <section> и задайте ему отдельный id. После шапки добавьте <nav> со ссылками на эти разделы, а после основного содержимого разместите <footer> с краткой подписью автора. Перемещайте уже написанный код, сохраняя фотографию, списки, таблицу и контакты.

Внешний вид страницы может почти не измениться, но теперь разметка обозначает назначение каждого раздела. Проверьте, что на странице остался один <h1>, а все четыре ссылки меню соответствуют id разделов.

Проверка и требования к работе

Откройте готовую визитку и пройдите по всем ссылкам. Затем проверьте исходный код через Nu HTML Checker, выбрав загрузку файла или вставку текста. Исправляйте сообщения по одному, начиная с самого первого, поскольку одна ошибка вложенности может вызвать несколько последующих сообщений.

Перед сдачей проверьте работу по списку.

• index.html открывается в браузере, русский текст отображается корректно, а вкладка имеет осмысленное название.
• Есть один главный заголовок и четыре раздела «О себе», «Навыки», «Образование», «Контакты» с заголовками <h2>.
• В разделе «О себе» есть два абзаца и список из трёх интересов.
• Фотография или аватар загружается и имеет подходящий alt.
• Навыки оформлены таблицей с подписью, заголовочными ячейками и двумя категориями.
• Образование представлено списком, а контакты содержат ссылку для письма и внешнюю ссылку.
• Разметка содержит <header>, <nav>, один <main>, четыре <section> и <footer>.
• Значения id не повторяются, каждая ссылка меню указывает на нужный раздел.
• Ошибки HTML, найденные валидатором, исправлены, оставшиеся предупреждения разобраны.

Для сдачи сохраните в папке website файл index.html и изображение в assets/images/. Эта же папка понадобится для оформления визитки через CSS в следующей лабораторной.

Полезные источники и инструменты

• Основы HTML на MDN содержат объяснения на русском и примеры первой страницы.
• Справочник HTML-элементов MDN поможет уточнить назначение тега и доступные атрибуты.
• Задания MDN по разметке текста подходят для дополнительной тренировки с заголовками, абзацами и списками. Материал на английском.
• Основы HTML-таблиц на MDN пригодятся для повторения строк, ячеек и объединения столбцов. Материал на английском.
• MDN Playground позволяет проверять небольшие фрагменты HTML, CSS и JavaScript в браузере.
• CodePen подходит для экспериментов с кодом и просмотра результата. Код визитки сохраняйте также в локальном проекте.
• Работа с HTML в Visual Studio Code описывает подсказки редактора и форматирование документа. Материал на английском.
• Nu HTML Checker поможет обнаружить ошибки в структуре и атрибутах документа.