HTML с нуля: от тегов до первого сайта

Практический курс по изучению языка гипертекстовой разметки, необходимого для создания любого веб-сайта. Вы освоите синтаксис HTML, научитесь строить логическую структуру страниц и создадите свой первый одностраничник.

1. Основы синтаксиса и базовая структура HTML-документа

Основы синтаксиса и базовая структура HTML-документа

Добро пожаловать в курс «HTML с нуля»! Если вы читаете эту статью, значит, вы решили узнать, как устроен интернет изнутри, и создать свой первый веб-сайт. Это отличное решение.

Прежде чем мы начнем писать код, давайте разберемся, с чем нам предстоит работать. Представьте, что создание сайта — это строительство дома. В этом процессе участвуют три главных «прораба»:

  • HTML (HyperText Markup Language) — это каркас, стены и перекрытия. Он определяет структуру: где будет дверь, где окно, а где гостиная.
  • CSS (Cascading Style Sheets) — это отделка. Обои, цвет крыши, расстановка мебели. CSS отвечает за красоту.
  • JavaScript — это электрика и водопровод. То, что заставляет дом «оживать»: свет включается по хлопку, вода течет из крана.

    • В этой статье мы сосредоточимся исключительно на первом и самом важном этапе — HTML. Без него некуда будет клеить обои и негде проводить электричество.

    Что такое HTML-тег?

    HTML — это язык разметки. Он не «вычисляет» сложные уравнения, как языки программирования. Его задача — сказать браузеру: «Вот это — заголовок, а вот это — картинка».

    Основной строительный блок HTML — это тег.

    !Анатомия HTML-элемента: открывающий тег, содержимое и закрывающий тег.

    Парные теги

    Большинство элементов в HTML являются парными. Они работают как контейнеры. У них есть начало и конец.

    Синтаксис выглядит так:

    * Открывающий тег: состоит из угловых скобок < и > с именем тега внутри. * Закрывающий тег: выглядит так же, но перед именем тега стоит косая черта /.

    Пример заголовка:

    Одиночные (пустые) теги

    Некоторые элементы не могут содержать текст или другие теги. Например, изображение или перенос строки. У них нет «внутренностей», поэтому им не нужен закрывающий тег.

    Примеры: * <img> — картинка. * <br> — перенос строки. * <hr> — горизонтальная линия.

    В современном стандарте HTML5 их можно писать просто как <br>, но иногда вы можете встретить старую запись <br /> (с закрывающим слешем в конце). Оба варианта допустимы, но первый — современнее.

    Атрибуты: настройка тегов

    Теги могут иметь дополнительные настройки. Эти настройки называются атрибутами. Атрибуты всегда пишутся внутри открывающего тега.

    Формула атрибута:

    Разберем на примере ссылки. Тег ссылки — <a> (от английского anchor — якорь). Но просто написать <a>Перейти</a> недостаточно. Браузер спросит: «Куда перейти?». Для этого нужен атрибут href.

    Здесь: * a — имя тега. * href — имя атрибута (куда ведет ссылка). * "https://google.com" — значение атрибута (адрес). * Поиск в Google — текст, который увидит пользователь.

    > Важное правило: значения атрибутов всегда следует заключать в кавычки (обычно двойные).

    Вложенность: принцип матрешки

    HTML-документ — это набор коробок, вложенных друг в друга. Вы можете поместить один тег внутрь другого. Это называется вложенностью.

    Пример: мы хотим сделать слово «важно» жирным внутри абзаца.

    Здесь тег <strong> (жирный шрифт) находится внутри тега <p> (абзац).

    Главное правило вложенности: Тег, который открылся последним, должен закрыться первым. Нельзя допускать пересечения тегов.

    * Правильно: <p>Текст <strong>Жирный</strong></p> * Неправильно: ~~<p>Текст <strong>Жирный</p></strong>~~

    !Принцип вложенности: внутренний элемент должен полностью находиться внутри внешнего.

    Базовая структура HTML-документа

    Любой, даже самый маленький сайт, должен иметь строгую структуру. Браузер ожидает увидеть определенный набор тегов, чтобы корректно отобразить страницу. Этот набор часто называют «шаблоном» или «бойлерплейтом» (boilerplate).

    Вот как выглядит минимальный код любой HTML-страницы:

    Давайте разберем каждую строчку этого кода.

    1. <!DOCTYPE html>

    Это самая первая строчка любого документа. Технически это не совсем тег, а инструкция для браузера. Она говорит: «Эй, браузер! Я использую современный стандарт HTML5». Если вы забудете эту строку, браузер может решить, что сайт написан в 1999 году, и отобразить его в «режиме совместимости», что может сломать верстку.

    2. <html>

    Это корневой элемент. Весь ваш код (кроме DOCTYPE) должен находиться внутри него. Атрибут lang="ru" подсказывает браузеру и поисковым системам, что основной язык страницы — русский.

    3. <head> (Голова)

    Этот раздел содержит служебную информацию. Всё, что находится внутри <head>, не отображается на самой странице (в белом поле браузера). Это «мозг» вашего документа.

    Что обычно лежит в <head>: * <meta charset="UTF-8">: Критически важная строка. Она устанавливает кодировку символов. Без неё вместо русского текста вы можете увидеть «кракозябры» (). * <title>: Заголовок вкладки браузера. То, что написано на ярлычке вкладки, когда вы открываете сайт. * Подключения стилей (CSS) и скриптов (об этом мы поговорим в следующих статьях).

    4. <body> (Тело)

    Это видимая часть документа. Всё, что вы хотите показать пользователю — текст, картинки, видео, кнопки — пишется строго между открывающим <body> и закрывающим </body>.

    Дерево документа (DOM)

    Если посмотреть на структуру выше, можно заметить, что она напоминает перевернутое дерево или родословную. В программировании это называется DOM (Document Object Model).

    * html — это предок всех элементов (корень). head и body — это дети элемента html и братья (siblings*) по отношению друг к другу. * title — это ребенок head и внук html.

    Понимание этой иерархии («родитель», «ребенок», «сосед») будет критически важно, когда мы начнем изучать CSS, так как стили часто наследуются от родителей к детям.

    Пробелы и переносы строк

    В HTML есть интересная особенность работы с текстом. Браузер игнорирует лишние пробелы и переносы строк в коде.

    Если вы напишете в редакторе:

    Браузер отобразит это как: Привет, мир!

    Он «схлопывает» любые последовательности пробелов и переносов в один единственный пробел. Если вам нужно принудительно перенести строку, используйте тег <br>. Если нужны множественные пробелы, используются специальные символы (например, &nbsp;), но об этом позже.

    Комментарии

    Иногда вам нужно оставить заметку в коде для себя или другого разработчика, которая не должна быть видна пользователю. Для этого используются комментарии.

    Синтаксис комментария:

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

    Итог

    Мы заложили фундамент. Теперь вы знаете, что:

  • HTML состоит из тегов (парных и одиночных).
  • Теги могут иметь атрибуты для настройки.
  • Структура документа всегда стандартна: <!DOCTYPE>, html, head, body.
  • В head лежит техническая информация, а в body — контент.

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

    2. Работа с контентом: форматирование текста, списки, изображения и ссылки

    Работа с контентом: форматирование текста, списки, изображения и ссылки

    В предыдущей статье мы создали «скелет» нашей страницы: разобрали структуру html, head и body. Но пока наш сайт выглядит пустым. Пришло время наполнить его смыслом. В этой статье мы научимся работать с текстом, составлять списки, добавлять изображения и связывать страницы между собой с помощью ссылок.

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

    Заголовки: иерархия страницы

    Заголовки играют ключевую роль в структуре документа. Они помогают пользователю (и поисковым роботам, таким как Google или Яндекс) понять, о чем ваша страница и какие разделы в ней главные, а какие — второстепенные.

    В HTML существует 6 уровней заголовков: от <h1> до <h6>.

    * <h1> — Самый важный заголовок. Обычно это название всей страницы или статьи. На странице должен быть только один заголовок первого уровня. * <h2> — Заголовки основных разделов. * <h3> — Подзаголовки внутри разделов. * <h4>, <h5>, <h6> — Используются реже для глубокой вложенности.

    Пример кода:

    !Визуализация иерархии заголовков: от самого важного h1 к менее значимым.

    > Важное правило: Никогда не используйте заголовки только для того, чтобы сделать текст жирным или крупным. Заголовки нужны для структуры. Если вам просто нужно выделить текст визуально, используйте CSS (о котором мы поговорим позже) или теги форматирования.

    Абзацы и форматирование текста

    Основной текст на сайте всегда должен быть обернут в тег <p> (от английского paragraph — абзац). Браузер автоматически добавляет отступы сверху и снизу от абзаца, чтобы текст было удобно читать.

    Акцентирование внимания

    Иногда внутри текста нужно выделить важное слово или фразу. Для этого используются теги логического форматирования:

  • Важность (Жирный текст): Тег <strong>. Он говорит браузеру: «Это очень важный текст». Визуально он отображается жирным шрифтом.
  • Акцент (Курсив): Тег <em> (от emphasis). Используется для изменения интонации или смыслового акцента. Визуально отображается курсивом.

    • Существуют также теги <b> (просто жирный) и <i> (просто курсив), которые пришли из старых версий HTML. Разница между ними и современными <strong>/<em> заключается в семантике (смысле).

    * <b> и <i> — говорят, как текст должен выглядеть (визуально). * <strong> и <em> — говорят, чем текст является (важным или акцентированным).

    Современный стандарт рекомендует использовать <strong> и <em>.

    Пример:

    Списки: наводим порядок

    В интернете мы постоянно сталкиваемся со списками: меню навигации, список товаров, рецепт пирога. В HTML есть два основных вида списков.

    Маркированный список (Unordered List)

    Используется, когда порядок пунктов не важен (например, список покупок). Создается с помощью тега <ul>. Каждый пункт списка внутри него оборачивается в тег <li> (list item).

    Браузер отобразит это как список с точками (маркерами) слева.

    Нумерованный список (Ordered List)

    Используется, когда важен порядок действий (например, инструкция по сборке или топ-10 фильмов). Создается тегом <ol>. Пункты также оборачиваются в <li>.

    Браузер автоматически проставит цифры: 1, 2, 3. Если вы добавите новый пункт в середину, нумерация пересчитается сама.

    Изображения: делаем красиво

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

    Синтаксис:

    Атрибут src (source)

    Указывает путь к изображению. Это может быть: * Абсолютная ссылка: Полный адрес картинки в интернете (например, https://example.com/cat.jpg). * Относительная ссылка: Путь к файлу, который лежит в папке вашего проекта (например, images/logo.png).

    Атрибут alt (alternative text)

    Это текст, который появится, если картинка не загрузится (например, из-за плохого интернета). Также этот текст читают скринридеры — программы для незрячих пользователей. Поисковые системы используют alt, чтобы понять, что изображено на картинке.

    > Всегда заполняйте атрибут alt. Это правило хорошего тона и профессиональной верстки.

    !Как браузер обрабатывает изображение и зачем нужен альтернативный текст.

    Ссылки: связываем всё воедино

    Самая суть интернета — это гиперссылки. Они позволяют переходить с одной страницы на другую. Для создания ссылки используется тег <a> (от anchor — якорь).

    Атрибут href (Hypertext Reference)

    Самый важный атрибут. Он указывает, куда именно мы перейдем при клике. Значением может быть адрес другого сайта или имя файла другой страницы вашего сайта (например, about.html).

    Открытие в новой вкладке

    Если вы хотите, чтобы ссылка открылась в новой вкладке браузера, добавьте атрибут target="_blank".

    Ссылка-якорь

    Ссылки могут вести не только на другие страницы, но и на конкретное место на той же странице. Для этого нужно задать элементу уникальный идентификатор id, а в ссылке указать его с символом решетки #.

    Практика: Пути к файлам

    Новички часто путаются в путях к файлам. Давайте разберем это подробнее, так как это критично для картинок и ссылок.

    Представьте, что у вас есть папка проекта my-site. В ней лежит файл index.html (ваша страница) и папка img, внутри которой лежит photo.jpg.

  • Если вы находитесь в index.html и хотите подключить картинку, путь будет: src="img/photo.jpg".
  • Если бы картинка лежала рядом с index.html, путь был бы просто: src="photo.jpg".

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

    Итог

    Теперь ваш арсенал значительно расширился. Вы умеете:

  • Структурировать текст заголовками (h1-h6).
  • Разбивать текст на абзацы (p) и выделять важное (strong, em).
  • Создавать списки (ul, ol).
  • Вставлять изображения (img) и не забывать про alt.
  • Создавать ссылки (a) на внешние сайты и внутренние страницы.

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

    3. Создание интерактивных элементов: формы обратной связи и поля ввода

    Создание интерактивных элементов: формы обратной связи и поля ввода

    До этого момента мы занимались созданием статического контента. Мы писали тексты, вставляли картинки и создавали ссылки. Наш сайт был похож на цифровую газету: пользователь мог читать, смотреть и переходить по страницам, но не мог ничего нам ответить. Это был монолог.

    Сегодня мы превратим монолог в диалог. Мы научимся создавать формы — основной инструмент взаимодействия пользователя с сайтом. Регистрация, вход в почту, поиск в Google, комментарии в блоге, заказ пиццы — всё это работает благодаря формам.

    Тег <form>: обертка для данных

    Любая форма начинается с парного тега <form>. Это контейнер, который объединяет все поля ввода и кнопки. Он сообщает браузеру: «Всё, что находится внутри меня, нужно собрать и куда-то отправить».

    У этого тега есть два критически важных атрибута:

  • action (действие) — адрес, куда будут отправлены данные. Это может быть файл на вашем сервере (например, send_mail.php). Если атрибут не указан, данные отправятся на ту же страницу, где находится пользователь.
  • method (метод) — способ отправки данных. Существует два основных метода:
    • * GET — данные прикрепляются к адресному строке браузера (как в поиске Google: ?q=котики). Используется для получения данных. * POST — данные передаются скрыто. Используется для отправки паролей, личной информации и больших текстов.

    Пример каркаса формы:

    !Как данные путешествуют от пользователя к серверу через форму.

    Тег <input>: универсальный солдат

    Самый главный тег в формах — это <input>. Это одиночный тег (ему не нужен закрывающий). Его поведение кардинально меняется в зависимости от атрибута type.

    Давайте рассмотрим самые популярные типы инпутов.

    Текстовое поле (type="text")

    Базовое поле для ввода короткого текста: имени, логина, города.

    Заметили атрибут placeholder? Это текст-подсказка, который отображается внутри поля серым цветом и исчезает, когда пользователь начинает печатать.

    Поле пароля (type="password")

    Выглядит как текстовое поле, но скрывает вводимые символы точками или звездочками. Это критично для безопасности, чтобы никто не подсмотрел пароль из-за плеча.

    Email (type="email")

    Специальное поле для электронной почты. На мобильных телефонах при клике на такое поле клавиатура автоматически меняется (появляется значок @). Кроме того, браузер проверит, есть ли в введенном тексте «собачка», перед отправкой.

    Лейблы: связываем текст и поле

    Просто разместить <input> недостаточно. Пользователь должен понимать, что именно от него требуют. Можно просто написать текст рядом с полем, но профессиональный способ — использовать тег <label>.

    Лейбл связывается с инпутом с помощью атрибута for и уникального id.

    Почему это важно?

  • Удобство: Если кликнуть мышкой на текст «Ваш логин», курсор автоматически прыгнет в поле ввода. Это особенно удобно на смартфонах, где попасть пальцем в маленькое поле бывает сложно.
  • Доступность: Скринридеры (программы для незрячих) прочтут название поля, когда фокус попадет на инпут.

    • > Всегда используйте <label> для текстовых полей. Это стандарт качественной верстки.

    Выбор вариантов: чекбоксы и радиокнопки

    Иногда нужно дать пользователю выбор из предложенных вариантов.

    Чекбокс (type="checkbox")

    Используется, когда можно выбрать несколько вариантов одновременно (или ни одного). Классический пример: «Я согласен с правилами» или выбор ингредиентов для пиццы.

    Обратите внимание: здесь мы вложили input внутрь label. Это альтернативный способ связывания, при котором for и id не нужны.

    Радиокнопка (type="radio")

    Используется, когда нужно выбрать только один вариант из группы. Например, пол (М/Ж) или способ оплаты (Карта/Наличные).

    Чтобы радиокнопки работали как группа (переключались), у них должен быть одинаковый атрибут name.

    Если убрать name="delivery", вы сможете выбрать оба варианта одновременно, что сломает логику.

    !Чекбоксы позволяют множественный выбор, радиокнопки — только один вариант.

    Другие элементы форм

    Не всё в формах делается через <input>.

    Текстовая область (<textarea>)

    Если нужно ввести много текста (комментарий, отзыв, биография), используется парный тег <textarea>. В отличие от input, у него есть закрывающий тег.

    Атрибут rows задает высоту поля в строках.

    Выпадающий список (<select> и <option>)

    Компактный способ предложить выбор из множества вариантов (например, выбор страны или года рождения).

    Кнопка отправки

    Форма бесполезна, если её нельзя отправить. Для этого нужна кнопка. Есть два способа её создать:

  • Старый способ: <input type="submit" value="Отправить">
  • Современный способ: <button type="submit">Отправить</button>

    • Тег <button> предпочтительнее, так как внутрь него можно положить не только текст, но и иконку или картинку.

    Важные атрибуты валидации

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

    * required — делает поле обязательным. Браузер не даст отправить форму, если поле пустое. * minlength / maxlength — минимальное и максимальное количество символов. * disabled — блокирует поле (делает его серым и недоступным для редактирования).

    Пример формы с валидацией:

    Атрибут name: имя переменной

    Вы могли заметить атрибут name в примерах выше. Это критически важный атрибут для разработчика, который будет обрабатывать данные на сервере (backend). Если id нужен для стилей и лейблов, то name — это имя переменной, под которой данные придут на сервер.

    Если вы напишете <input type="text"> без name, сервер не увидит, что пользователь что-то ввел в это поле.

    Итог

    Мы разобрали основные кирпичики интерактивности:

  • <form> — контейнер для отправки данных.
  • <input> — универсальное поле (текст, пароль, чекбокс, радио).
  • <label> — подпись, улучшающая доступность и удобство.
  • <textarea> и <select> — для больших текстов и списков.
  • <button> — для отправки формы.

    • Теперь вы можете создать страницу контактов, форму регистрации или опросник. Но пока наши формы выглядят серыми и стандартными, как в 90-х годах. В следующем модуле мы начнем изучать CSS, чтобы раскрасить наши черно-белые чертежи и придать им современный стиль.

    4. Семантическая верстка: современные стандарты и доступность веб-страниц

    Семантическая верстка: современные стандарты и доступность веб-страниц

    Мы уже научились создавать каркас страницы, наполнять её текстом, картинками и формами. Технически, вы уже можете сверстать сайт. Но будет ли этот сайт качественным? Будет ли он понятен не только вам, но и поисковым роботам или людям с ограниченными возможностями?

    В этой статье мы переходим от вопроса «как заставить это работать» к вопросу «как сделать это правильно». Мы поговорим о семантике — смысле, который вы вкладываете в свой код.

    Что такое семантика и зачем она нужна?

    В HTML семантика означает использование тегов в соответствии с их смысловым значением, а не внешним видом.

    Раньше, на заре интернета, верстальщики использовали универсальный тег <div> (от division — раздел) практически для всего. Шапка сайта — это <div>, меню — <div>, статья — <div>, подвал — тоже <div>. Это называлось «суп из дивов» (div soup).

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

    !Сравнение несемантической верстки на дивах и современной семантической структуры.

    Семантическая верстка решает три главные задачи:

  • SEO (Search Engine Optimization): Поисковые системы (Google, Яндекс) лучше понимают структуру вашего сайта. Если вы обернете заголовок статьи в <h1>, а не просто сделаете текст жирным, робот поймет: «Ага, это главная тема страницы».
  • Доступность (Accessibility): Люди с нарушениями зрения используют скринридеры — программы, которые читают содержимое экрана вслух. Семантические теги позволяют таким пользователям быстро переключаться между навигацией, основным контентом и поиском.
  • Читаемость кода: Другому разработчику (или вам через полгода) будет проще разобраться в коде, где написано <header>, чем в коде, где написано <div id="top-block-123">.

    • Основные семантические теги HTML5

    В стандарте HTML5 появился набор тегов, которые описывают структуру типичной веб-страницы. Давайте разберем их.

    <header>: Шапка сайта или раздела

    Не путайте этот тег с <head>!

    * <head> — это техническая «голова» документа (мета-теги, кодировка), которая не видна пользователю. * <header> — это видимая верхняя часть страницы или секции. Обычно там находится логотип, меню, поиск или заголовок статьи.

    <nav>: Навигация

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

    <main>: Основное содержимое

    Самый главный тег для уникального контента страницы. Внутри <main> должно лежать то, ради чего пользователь пришел на эту страницу (статья, каталог товаров, форма регистрации).

    > Важное правило: На странице должен быть только один тег <main>. Нельзя вкладывать его внутрь других структурных элементов.

    <section> и <article>: В чем разница?

    Эти два тега часто вызывают путаницу. Оба используются для группировки контента, но есть смысловой нюанс.

    * <article> (статья) — это самодостаточный контент. Если вы вырежете этот кусок кода и вставите его на другой сайт или в RSS-ленту, он сохранит смысл. Примеры: пост в блоге, комментарий пользователя, карточка товара. * <section> (секция) — это тематическая группировка. Обычно у секции есть заголовок. Это просто часть чего-то большего. Примеры: глава книги, блок «Наши преимущества», раздел «Новости».

    Пример структуры:

    <aside>: Боковая панель

    Используется для контента, который косвенно связан с основным. Часто это боковая колонка (сайдбар), где размещаются рекламные баннеры, список категорий, облако тегов или ссылки на похожие статьи.

    <footer>: Подвал

    Нижняя часть страницы или секции. Здесь обычно располагают копирайт (значок ©), контактную информацию, ссылки на политику конфиденциальности и социальные сети.

    Теги <div> и <span>: когда их использовать?

    Значит ли появление семантических тегов, что <div> и <span> больше не нужны? Конечно, нет. Они остаются важными инструментами, но теперь у них другая роль.

    Они используются как нейтральные контейнеры для стилизации (CSS), когда ни один семантический тег не подходит.

    * <div> — блочный контейнер (занимает всю ширину). Используется для создания сеток, колонок, оберток для выравнивания. * <span> — строчный контейнер (занимает место только по ширине контента). Используется для выделения части текста внутри строки, чтобы покрасить его в другой цвет или изменить шрифт.

    Пример:

    Доступность (Accessibility или a11y)

    Доступность — это практика создания сайтов, которыми могут пользоваться все люди, независимо от их физических возможностей или технических ограничений.

    Семантическая верстка — это фундамент доступности. Скринридеры ориентируются именно по тегам.

    !Схематичное представление навигации скринридера по семантическим областям страницы.

    Простые правила доступности:

  • Всегда заполняйте alt у картинок. Если картинка декоративная (для красоты), оставьте alt="" пустым, чтобы скринридер её проигнорировал.
  • Соблюдайте иерархию заголовков. Не перепрыгивайте с <h1> сразу на <h3>. Структура должна быть вложенной: h1 -> h2 -> h3.
  • Подписывайте поля форм. Используйте <label>, как мы учили в прошлой статье. Без этого незрячий пользователь не поймет, что нужно ввести в поле.
  • Ссылки должны быть понятными. Избегайте ссылок с текстом «нажмите здесь». Ссылка должна говорить, куда она ведет: «Читать подробнее о семантике».

    • Практика: Структура одностраничного сайта

    Давайте соберем все знания из курса и напишем структуру для небольшого сайта-портфолио. Это будет вашим шаблоном для будущих проектов.

    Итог

    Теперь ваш код не просто работает — он имеет смысл. Вы научились:

  • Использовать семантические теги (header, nav, main, footer, section, article, aside).
  • Отличать <head> (метаданные) от <header> (шапка).
  • Понимать разницу между <div> (блок без смысла) и семантическими блоками.
  • Заботиться о доступности сайта для всех пользователей.

    • На этом мы завершаем большой блок изучения HTML. Вы знаете структуру, контент, формы и семантику. Но наши сайты всё ещё выглядят черно-белыми и скучными. В следующем модуле мы начнем изучать CSS — язык стилей, который превратит этот каркас в произведение искусства.

    5. Итоговый проект: верстка полноценного одностраничного сайта

    Итоговый проект: верстка полноценного одностраничного сайта

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

    В этой итоговой статье мы не будем изучать новые теги. Вместо этого мы объединим все полученные знания и сверстаем полноценный одностраничный сайт-портфолио (Landing Page).

    Мы пройдем весь процесс: от планирования структуры до написания финальной строчки кода. Готовы? Поехали!

    Этап 1: Планирование и структура

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

    Наш сайт будет состоять из следующих смысловых блоков:

  • Шапка (Header): Логотип (или ваше имя) и навигационное меню.
  • Герой (Hero Section): Приветствие, ваша фотография и краткий текст о том, кто вы.
  • Навыки (Skills): Список технологий, которыми вы владеете.
  • Портфолио (Portfolio): Примеры ваших работ.
  • Контакты (Contacts): Форма обратной связи.
  • Подвал (Footer): Копирайт и ссылки на соцсети.

    • !Схематичная структура будущего сайта-портфолио.

    Этап 2: Подготовка рабочего пространства

    Создайте на своем компьютере новую папку, назовите её my-portfolio. Внутри этой папки создайте:

  • Файл index.html — это будет наш основной документ.
  • Папку img — сюда положите вашу фотографию (назовите её me.jpg) и пару картинок для примеров работ.

    • Откройте index.html в редакторе кода и создайте базовый шаблон (бойлерплейт), который мы изучили в первой статье.

    Теперь мы будем наполнять тег <body> шаг за шагом.

    Этап 3: Шапка и навигация

    Начнем с самого верха. Используем семантический тег <header>. Внутри него разместим заголовок с именем и навигацию <nav>.

    Чтобы навигация работала внутри одной страницы (скроллила к нужным разделам), мы будем использовать якорные ссылки. Обратите внимание на атрибуты href, начинающиеся с решетки #.

    Мы добавили тег <hr> (горизонтальная линия), чтобы визуально отделить шапку, пока у нас нет CSS-стилей.

    Этап 4: Основной контент

    Весь уникальный контент страницы мы обернем в тег <main>. Внутри него мы будем создавать секции с помощью тега <section>. Каждой секции мы дадим уникальный id, который совпадает с тем, что мы написали в ссылках меню (about, skills и т.д.).

    Секция «Обо мне»

    Здесь будет заголовок первого уровня (самый важный на странице), ваша фотография и пара абзацев текста.

    Обратите внимание: мы использовали атрибут width="300" для картинки. Обычно размеры задаются через CSS, но в чистом HTML это допустимый способ ограничить размер огромного фото.

    Секция «Навыки»

    Для перечисления навыков идеально подходит маркированный список <ul>.

    Секция «Портфолио»

    Это самая важная часть для работодателя. Здесь мы используем тег <article> для каждой отдельной работы, так как каждый проект — это самостоятельная единица контента.

    Мы добавили target="_blank" к ссылкам, чтобы при клике портфолио открывалось в новой вкладке, и пользователь не уходил с вашего сайта.

    Секция «Контакты»

    Здесь мы применим знания о формах. Создадим форму, где пользователь сможет оставить свое имя, email и сообщение.

    Мы использовали теги <br>, чтобы элементы формы не слипались в одну строку. В будущем это будет делаться через CSS, но сейчас это необходимая мера для читаемости.

    Этап 5: Подвал

    Завершаем страницу подвалом. Это место для технической информации.

    Полный код проекта

    Если собрать все части вместе, у вас получится следующий код. Скопируйте его в свой файл и проверьте результат в браузере.

    Почему сайт выглядит «сломанным»?

    Когда вы откроете этот файл в браузере, вы увидите текст, картинки и ссылки, идущие друг за другом сверху вниз. Всё прижато к левому краю, шрифт стандартный (Times New Roman), нет цветов и красивых отступов.

    Не пугайтесь. Так и должно быть.

    HTML отвечает только за структуру и смысл. Вы сказали браузеру: «Это заголовок, это список, а это картинка». И браузер честно это отобразил. Вы не давали инструкций вроде «сделай фон синим» или «поставь меню горизонтально».

    За красоту отвечает CSS (Cascading Style Sheets). Именно CSS превратит этот скучный список элементов в стильный современный сайт.

    Чек-лист проверки качества

    Перед тем как считать работу завершенной, проверьте себя по этому списку:

  • Валидность: Все парные теги закрыты? (</h1>, </p>, </div>).
  • Атрибуты: У всех картинок есть alt? У всех ссылок есть href?
  • Формы: У полей ввода есть атрибут name? (Без него сервер не поймет, что пришло).
  • Семантика: Использовали ли вы <header>, <main>, <footer> вместо бесконечных <div>?
  • Иерархия: На странице только один <h1>? Заголовки идут по порядку (h2 после h1)?

    • Заключение курса

    Поздравляю! Вы завершили курс «HTML с нуля». Вы проделали огромную работу.

    Чему вы научились: * Понимать язык, на котором говорит весь интернет. * Создавать структуру документов. * Работать с текстом, списками и изображениями. * Создавать интерактивные формы. * Писать чистый, семантический код, понятный роботам и людям.

    Этот файл index.html, который вы создали сегодня — это ваш билет в мир веб-разработки. Сохраните его. В следующем курсе по CSS мы возьмем именно этот файл и превратим его в профессиональное портфолио, которое не стыдно показать работодателю.

    Удачи в обучении, и до встречи на курсе по CSS!