Первый HTML-документ
Для начала создай файл с названием /. Внутри документа браузер должен понимать, где начинается страница, где находятся служебные сведения и где видимый текст. Обычно документ включает объявление doctype, элемент html, раздел head и раздел body. В head можно указать название вкладки и кодировку, а в body разместить заголовки, абзацы и другие элементы. Не нужно запоминать всё за один раз — попробуй создать шаблон и посмотреть, что появится в браузере.
Заголовки и абзацы
Заголовки обозначают названия страницы и её разделов. Самый главный заголовок обычно записывают с помощью h1, а заголовки разделов — с помощью h2. Обычный текст помещают в p. Важно выбирать заголовок по смыслу, а не потому, что он кажется крупным или красивым. Позже размер и внешний вид можно будет изменить с помощью CSS. Попробуй написать небольшую заметку о любимой игре, книге или занятии и разделить её на несколько частей.
Ссылки и изображения
Ссылка создаётся элементом a и помогает перейти на другую страницу или сайт. Адрес указывают в атрибуте href. Изображение добавляют элементом img, а путь к файлу записывают в src. У картинки также есть alt — короткое описание, которое помогает понять её содержание, если изображение не загрузилось или человек использует программу чтения с экрана. Попробуй добавить на свою страницу одну ссылку и одну картинку, а затем проверь, что они действительно работают.
Списки и смысловые блоки
Если нужно перечислить несколько вещей, используй список. Элемент ul подходит для пунктов без заданного порядка, а ol — для последовательности шагов. Каждый пункт помещают в li. Для крупных частей страницы есть элементы header, nav, main и footer: они помогают обозначить шапку, навигацию, основное содержимое и нижнюю часть. Благодаря таким элементам код становится понятнее не только браузеру, но и человеку, который откроет его позже.
Формы и кнопки
Форма позволяет человеку ввести данные, например имя или поисковый запрос. Для поля ввода используют input, а для действия — button. Полезно добавлять подпись label, чтобы было понятно, что именно нужно ввести. Ссылка и кнопка — не одно и то же: ссылка ведёт в другое место, а кнопка выполняет действие на текущей странице. Попробуй сделать простую форму с полем и кнопкой, даже если пока она ещё ничего не отправляет.
Проверка своей страницы
Открой файл в браузере и проверь, что все заголовки и абзацы расположены в нужном порядке. Нажми на ссылку, убедись, что картинка отображается, и проверь, что в коде нет забытых закрывающих тегов. Попробуй пройти по ссылкам клавишей Tab — это помогает понять, удобно ли пользоваться страницей без мыши. Если результат не совпадает с ожиданием, меняй код небольшими шагами и обновляй страницу.
Попробуй собрать страницу сам
Создай файл / и добавь в него заголовок, два абзаца, список из трёх пунктов и ссылку на полезный ресурс. Сохрани файл и открой его двойным нажатием в браузере. Если видишь текст, значит первый шаг уже сделан. Теперь измени порядок элементов и обнови страницу. Посмотри, как изменение порядка в HTML отражается на расположении содержимого.
Что делать, если не получается
Если браузер показывает не то, что ожидалось, проверь название файла и убедись, что ты редактируешь именно ту копию, которую открыл. Затем проверь кавычки, закрывающие угловые скобки и названия тегов. HTML часто продолжает отображаться даже при некоторых ошибках, поэтому полезно сравнивать результат с простым примером. Исправляй одну вещь за раз и обновляй страницу после каждого изменения.
Мини-викторина
Какой тег создаёт основной заголовок страницы?
Выбери ответ — результат появится здесь.
Итого: 0 из 1 правильных ответов
Тег <h1> обозначает главный заголовок видимой страницы.
Отметь результат и выбери одну вещь для самостоятельной практики.
Отметка сохранится в этом браузере.