3. Изучаем документ

Видео на Rutube

Здравствуйте, дорогие студенты! Добро пожаловать на третий урок нашего курса веб-разработки. На прошлом занятии мы сделали первые шаги в HTML и CSS, написав наш первый HTML-код и узнали, как форматировать текст.

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

Давайте начнем и шаг за шагом разберем, из чего состоит HTML-документ и для чего нужен каждый его элемент.

Подготовка к уроку

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

  1. Создайте новую папку для урока. В папке курса создайте новую папку и назовите ее, например, lesson3.

  2. Внутри папки lesson3 создайте новый файл и назовите его document.html. Убедитесь, что файл имеет расширение .html.

Этот файл document.html станет основой для всех последующих уроков в этом блоке, поэтому важно правильно задать его базовую структуру HTML-документа.

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

Существует несколько способов быстро создать базовую структуру HTML-документа.

Способ 1: Использование встроенного функционала Visual Studio Code

Если вы используете Visual Studio Code, то у вас есть отличная возможность – воспользоваться Emmet. Emmet – это набор инструментов, встроенный в VS Code, который позволяет очень быстро писать HTML и CSS код.

  1. Откройте файл document.html в Visual Studio Code.

  2. В пустом файле введите символ ! (восклицательный знак).

  3. Нажмите клавишу Enter или Tab.

VS Code автоматически сгенерирует базовую структуру HTML-документа! Это очень быстро и удобно.

Способ 2: Ввод структуры вручную (Универсальный способ)

Если вы используете другой текстовый редактор или хотите лучше понять структуру, вы можете ввести ее вручную. Просто скопируйте или наберите следующий код в файле document.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Разбор базовой структуры HTML-документа

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

<!DOCTYPE html>

<!DOCTYPE html> - это декларация типа документа. Это самая первая строка в HTML-документе. Она сообщает браузеру, что это HTML5 документ. Исторически существовали разные версии HTML, и эта декларация помогает браузеру правильно интерпретировать код, написанный в стандарте HTML5 – самой современной версии HTML. Всегда начинайте ваш HTML-документ с <!DOCTYPE html>.

<html lang="ru">

<html> - это корневой тег HTML-документа. Он ограничивает всё содержимое вашего HTML-документа. Всё, что вы хотите отобразить на веб-странице, должно быть внутри открывающего тега <html> и закрывающего тега </html>.

  • lang="ru" - это атрибут тега <html>. Атрибуты используются для добавления дополнительной информации об HTML-элементах. В данном случае, атрибут lang="ru" указывает язык содержимого документа. "ru" означает русский язык. Для английского языка нужно использовать lang="en", для немецкого lang="de" и так далее. Указание языка помогает браузерам и поисковым системам правильно обрабатывать текст и, например, предлагать перевод страниц на другие языки.
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<head> - это секция заголовка HTML-документа. Всё, что находится внутри тега <head>, не отображается непосредственно на веб-странице. Секция <head> содержит метаданные – информацию о веб-странице, которая важна для браузеров, поисковых систем и других программ, но не для отображения пользователю напрямую.

  • <meta charset="utf-8"> - это тег <meta>, который используется для предоставления различных метаданных о HTML-документе. Атрибут charset="utf-8" указывает кодировку символов для веб-страницы. utf-8 - это стандартная кодировка для большинства современных веб-страниц и поддерживает практически все языки мира, включая русский, английский, китайский, арабский и многие другие. Использование utf-8 гарантирует, что текст на вашей странице будет отображаться правильно, независимо от языка. Всегда используйте <meta charset="utf-8"> в секции <head> ваших HTML-документов.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - это еще один важный тег <meta>. Он отвечает за адаптацию страницы под разные устройства – компьютеры, планшеты, смартфоны.2 Атрибут name="viewport" сообщает браузеру, что мы настраиваем область просмотра (viewport). Атрибут content="width=device-width, initial-scale=1.0" задает параметры:

    • width=device-width: Ширина области просмотра должна быть равна ширине экрана устройства.

    • initial-scale=1.0: Начальный масштаб страницы должен быть 100%. Этот тег <meta name="viewport"> очень важен для создания адаптивных веб-страниц, которые корректно отображаются на экранах разных размеров. Мы подробнее поговорим об адаптивности в следующих уроках. Рекомендуется всегда включать этот тег в секцию <head> ваших HTML-документов.

  • <title>Document</title> - это тег <title>. Он задает заголовок веб-страницы, который отображается:

    • Во вкладке браузера (рядом с иконкой сайта).

    • В заголовке окна браузера.

    • В результатах поиска поисковых систем (например, Google, Yandex) в качестве заголовка ссылки на вашу страницу.

    Тег <title> важен не только для пользователей, но и для SEO (поисковой оптимизации). Заголовок страницы должен быть кратким, информативным и релевантным содержанию страницы. Измените текст Document на что-то более осмысленное, например, Структура HTML-документа, и обновите страницу в браузере, чтобы увидеть изменения на вкладке браузера.

<body>
    
</body>

<body> - это секция тела HTML-документа. Всё, что находится внутри тега <body>, отображается непосредственно на веб-странице и видно пользователю. Это основная часть HTML-документа, где вы будете размещать весь визуальный контент: текст, изображения, видео, ссылки, формы и другие элементы.

Добавляем контент в <body>

Давайте добавим немного контента в секцию <body> нашего document.html, чтобы увидеть, как он отображается в браузере.

  1. Создайте заголовок первого уровня <h1> и добавьте в него текст "Структура проекта".

  2. Создайте абзац <p> и добавьте текст "Это моя первая страница".

Измените содержимое тега <body> в вашем файле document.html следующим образом:

<body>
    <h1>Структура проекта</h1>
    <p>Это моя первая страница</p>
</body>

Просмотр результата в браузере и изучение в инструментах разработчика

  1. Сохраните файл document.html.

  2. Откройте document.html в браузере (двойным кликом или через "Open in Default Browser" в VS Code).

  3. Теперь вы должны увидеть в окне браузера заголовок "Структура проекта" и под ним абзац "Это моя первая страница".

  4. Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements".

  5. В инструментах разработчика вы увидите полную структуру вашего HTML-документа:

    • Строка <!DOCTYPE html> подтверждает, что используется HTML5.

    • Тег <html> с атрибутом lang="ru" задает язык страницы.

    • Секция <head> содержит метаданные (кодировку, viewport, заголовок страницы). Обратите внимание, что значение тега <title> ("Document" или то, что вы указали) отображается как название вкладки браузера.

    • Секция <body> содержит весь видимый контент страницы: наши теги <h1> и <p>.

    Вы можете выбирать элементы в дереве элементов в инструментах разработчика и изучать их стили и структуру, как мы делали на прошлом уроке.

Подведем итоги урока

Сегодня мы подробно изучили базовую структуру HTML-документа, которая является фундаментом для создания любого веб-сайта. Вы узнали о назначении каждого ключевого элемента:

  • <!DOCTYPE html>: Декларация типа документа – говорит браузеру, что это HTML5.

  • <html>: Корневой тег – содержит весь HTML-документ.

  • <head>: Секция заголовка – содержит метаданные (невидимую информацию о странице).

    • <meta charset="utf-8">: Установка кодировки символов (UTF-8 - стандарт для большинства языков).

    • <meta name="viewport">: Настройка адаптивности страницы для разных устройств.

    • <title>: Заголовок страницы, отображаемый на вкладке браузера.

  • <body>: Секция тела – содержит весь видимый контент веб-страницы.

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

Спасибо за ваше внимание! Не забывайте практиковаться! Попробуйте изменять содержимое файла document.html, добавлять разные метатеги в <head>, менять заголовок страницы <title>, добавлять больше контента в <body> (параграфы, другие текстовые элементы, которые вы уже знаете). Изучайте структуру вашего HTML-документа с помощью инструментов разработчика.

На следующем уроке мы изучим какие бывают заголовки и зачем они нужны.

До встречи на следующем уроке!

Updated on
2. Первый HTML-код
4. Заголовки