2. Первый HTML-код

Видео на Rutube

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

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

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

Создайте новую папку для урока. В папке курса создайте новую папку и назовите ее, например, lesson_2.
В папке lesson_2 создайте новый файл и дайте ему имя paragraph.html. Очень важно, чтобы файл имел расширение .html. Это расширение говорит браузеру, что перед ним HTML-документ. Внутри этого файла мы будем писать наш HTML-код.
Добавьте простой текст в файл paragraph.html. Откройте paragraph.html в вашем текстовом редакторе и напишите в нем фразу: Это пример текста. Пока не добавляйте никаких HTML-тегов, просто текст.

Это пример текста.

Просмотр файла в браузере

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

Сохраните файл paragraph.html. Обязательно сохраните изменения, которые вы внесли в файл. Обычно это можно сделать сочетанием клавиш Ctrl+S (Windows) или Cmd+S (Mac).
Откройте файл paragraph.html в браузере. Найдите файл paragraph.html в папке lesson_2 и просто дважды кликните на него мышкой. Ваш браузер по умолчанию должен автоматически открыть этот файл.

Вы должны увидеть в окне браузера только текст: "Это пример текста." Пока что это просто текст, без какого-либо специального оформления.
Установите расширение "Open in Browser". Установка расширения "Open in Browser" сделает процесс открытия файлов в браузере еще проще.
- В VS Code перейдите на боковую панель и кликните на значок Extensions (обычно выглядит как квадрат). Или используйте сочетание клавиш Ctrl+Shift+X (Windows) или Cmd+Shift+X (Mac).
- В поле поиска введите Open in Browser и нажмите Enter.
- Найдите расширение "Open in Browser" и нажмите кнопку Install.
- После установки расширения, щелкните правой кнопкой мыши на файл paragraph.html в VS Code и в контекстном меню выберите "Open in Default Browser". Файл откроется в вашем браузере по умолчанию.

Знакомство с инструментами разработчика браузера

Инструменты разработчика (Developer Tools) – это мощный встроенный инструмент в каждом современном браузере. Они позволяют веб-разработчикам изучать и отлаживать веб-страницы. Для начинающих, инструменты разработчика – это отличный способ понять, как браузер "видит" ваш HTML-код и какие стили к нему применяются.

Откройте инструменты разработчика. В большинстве браузеров это можно сделать, нажав клавишу F12 на клавиатуре. Также, вы можете кликнуть правой кнопкой мыши в любом месте веб-страницы в браузере и выбрать в контекстном меню пункт "Посмотреть код" (в Chrome), "Исследовать элемент" (в Firefox) или аналогичный пункт в других браузерах.

В нижней или боковой части окна браузера откроется панель инструментов разработчика.
В инструментах разработчика перейдите на вкладку "Elements" (или "Элементы" на русском языке). Эта вкладка показывает HTML-разметку текущей веб-страницы в виде дерева элементов. Вы увидите структуру вашего HTML-кода, даже если мы пока написали только текст без тегов.
Изучите HTML-разметку и стили. В панели "Elements" вы можете увидеть HTML-код, который браузер создал для отображения вашей страницы. Даже если вы не добавили никаких тегов, браузер автоматически добавил базовые теги <html>, <head>, <body> для правильного отображения. Справа от HTML-кода вы увидите вкладку "Styles" (или "Стили"). Здесь отображаются CSS-стили, которые применяются к выбранному HTML-элементу. Пока что стилей будет немного, это стандартные стили браузера.
Изучите отступы и границы элементов. В инструментах разработчика, при наведении курсора мыши на какой-либо HTML-элемент в дереве элементов, этот элемент будет выделен на веб-странице. Кроме того, вы можете увидеть отступы (margin) и внутренние отступы (padding) элемента, которые выделяются разными цветами:
- Внешние отступы (margin) обычно выделяются оранжевым цветом. Margin – это расстояние от внешней границы элемента до границ соседних элементов.
- Внутренние отступы (padding) обычно выделяются зеленым или синим цветом. Padding – это расстояние от границы элемента до его внутреннего содержимого (текста или других вложенных элементов).
Экспериментируйте, наводя курсор на разные элементы в панели "Elements" и наблюдайте, как они выделяются на странице и как отображаются их отступы и границы в инструментах разработчика. Это очень полезно для понимания макета веб-страниц.

Используем тег <p> для создания параграфа

Теперь давайте добавим наш первый HTML-тег – тег <p>, который используется для создания параграфов текста.

Оберните текст в тег <p>. Вернитесь в ваш файл paragraph.html в текстовом редакторе и измените его содержимое следующим образом:
```
<p>Это пример текста</p>
```
Мы поместили наш текст "Это пример текста" между открывающим тегом <p> и закрывающим тегом </p>.
Сохраните файл и обновите страницу в браузере. Сохраните изменения в paragraph.html и вернитесь в браузер, где открыт этот файл. Обновите страницу, нажав кнопку "Обновить" (обычно значок круглой стрелки) в браузере или клавишу F5.

Теперь вы увидите, что текст выглядит немного иначе. Он получил отступы сверху и снизу, и, возможно, шрифт стал немного другим – это стандартное оформление параграфов, которое браузер применяет по умолчанию.
Изучите параграф в инструментах разработчика. Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Найдите в HTML-коде тег <p>, который вы добавили (скорее всего, он будет внутри тега <body>). Выберите тег <p> в дереве элементов.

Теперь посмотрите на вкладку "Styles" или "Computed" справа в инструментах разработчика. Вы увидите CSS-стили, которые браузер автоматически применяет к тегу <p>. Вы увидите, что для параграфов заданы отступы сверху и снизу (margin), а также другие свойства, определяющие его внешний вид. Наведите курсор на тег <p> в дереве элементов, и вы увидите, как отступы параграфа выделяются на странице оранжевым цветом (margin).

Используем тег <h1> для создания заголовка

Давайте добавим еще один важный HTML-тег – тег <h1>. Теги от <h1> до <h6> используются для создания заголовков разных уровней важности. <h1> – это заголовок первого уровня (самый важный), а <h6> – заголовок шестого уровня (наименее важный). <h1> обычно используется для основного заголовка страницы или раздела.

Добавьте заголовок с помощью тега <h1>. Вернитесь в paragraph.html и добавьте перед параграфом тег <h1> с текстом "Заголовок":
```
<h1>Заголовок</h1>
<p>Это пример текста</p>
```
Сохраните файл и обновите страницу. Сохраните изменения и обновите страницу в браузере.

Теперь вы увидите, что "Заголовок" отображается крупнее и жирнее, чем параграф, и тоже имеет дополнительные отступы. Заголовки выделяются визуально, чтобы привлекать внимание к важным разделам страницы.
Изучите заголовок в инструментах разработчика. Снова откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Найдите тег <h1>. Выберите его и посмотрите на вкладку "Styles" или "Computed". Вы увидите, что для <h1> браузер применяет другие стили, чем для <p>. Заголовки имеют больший размер шрифта (font-size), они жирные (font-weight: bold) и также имеют отступы (margin), но, возможно, другие, чем у параграфа.

Важный момент: Автоматическая структура HTML-документа

Вы могли заметить, что в нашем HTML-файле paragraph.html мы написали только теги <p> и <h1>, но в инструментах разработчика на вкладке "Elements" вы видите гораздо более сложную структуру, включающую теги <html>, <head> и <body>.

Браузеры очень "умные" и стараются отобразить веб-страницу корректно, даже если HTML-код написан не совсем правильно. В случае простых HTML-файлов, таких как наш paragraph.html, браузер автоматически добавляет минимальную необходимую структуру HTML-документа, если она отсутствует. Он самостоятельно "достраивает" ваш код, добавляя:

<html>: Корневой тег, обозначающий начало и конец HTML-документа.
<head>: Секцию заголовка для метаданных (пока пустую в нашем случае).
<body>: Секцию тела документа, в которую браузер помещает все видимое содержимое страницы (наши теги <p> и <h1>).

Это очень удобно для начинающих, потому что позволяет им начать изучать HTML, не углубляясь сразу во все детали структуры. Однако, в дальнейшем, при создании более сложных веб-страниц, очень важно самостоятельно прописывать полную структуру HTML-документа, включая теги <!DOCTYPE html>, <html>, <head> и <body>, чтобы обеспечить корректное отображение страницы во всех браузерах и соблюдать стандарты веб-разработки. Мы подробно изучим структуру HTML-документа на следующем уроке.

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

Сегодня на уроке вы узнали, как использовать HTML-теги для форматирования текста. Вы познакомились с тегами:

<p> (параграф) – для создания обычного текста.
<h1> (заголовок первого уровня) – для создания заголовков.

Вы также узнали, как:

Просматривать HTML-файлы в браузере.
Использовать инструменты разработчика браузера для изучения HTML-структуры и CSS-стилей.
Браузеры автоматически добавляют базовую структуру HTML-документа, если она не указана явно.

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

На следующем уроке мы более подробно рассмотрим структуру HTML-документа, изучим обязательные теги и посмотрим на другие популярные HTML-теги, которые часто используются при веб-разработке.

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