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

Введение

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

Участники начнут с создания HTML5-документа, узнав, как объявить тип документа, структурировать базовый макет страницы и понять назначение ключевых элементов, таких как <html>, <head> и <body>. К концу практического занятия (лабораторной работы) студенты получат всестороннее понимание того, как создать корректно сформированный HTML-документ и использовать различные HTML-теги для структурирования содержимого веб-страницы.

Настройка HTML-документа с объявлением DOCTYPE

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

Сначала откройте WebIDE и создайте новый файл с именем index.html в директории ~/project.

Объявление DOCTYPE для HTML5 простое и понятное. Вы добавите его в качестве первой строки своего HTML-документа:

<!doctype html>

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

Давайте создадим полную базовую структуру HTML-документа с объявлением DOCTYPE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>

Структура HTML-документа

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE.

Пример вывода в браузере будет выглядеть так:

Welcome to HTML!

Основные моменты, которые необходимо запомнить:

Объявление DOCTYPE должно быть первой строкой в вашем HTML-документе.
Оно помогает браузерам понять, какую версию HTML вы используете.
Для современной веб-разработки используйте <!DOCTYPE html> для HTML5.
Объявление не является HTML-тегом; это инструкция для браузера.

Добавление корневого тега HTML и базовой структуры

На этом этапе вы узнаете о фундаментальной структуре HTML-документа, сконцентрировавшись на корневом теге HTML и базовой структуре документа. Тег <html> является контейнером для всех других HTML-элементов и служит корневым элементом HTML-страницы.

Откройте файл index.html, который вы создали на предыдущем этапе, в WebIDE. Давайте расширим предыдущую структуру HTML, добавив полный корневой тег и его важные компоненты:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML Structure</h1>
    <p>This is the basic structure of an HTML document.</p>
  </body>
</html>

Разберем основные компоненты:

Тег <html>: Корневой элемент, который заключает все остальное HTML-содержимое.
Атрибут lang="en": Указывает язык документа (в данном случае - английский).
Два основных дочерних элемента:
- <head>: Содержит метаданные о документе.
- <body>: Содержит видимое содержимое веб-страницы.

Пример вывода в веб-браузере будет выглядеть так:

Welcome to HTML Structure
This is the basic structure of an HTML document.

Основные моменты, которые необходимо запомнить:

Каждый HTML-документ должен иметь корневой тег <html>.
Атрибут lang помогает в обеспечении доступности и оптимизации для поисковых систем.
Документ разделен на секции <head> и <body>.
Правильное вложение тегов является важным для валидного HTML.

Настройка раздела с использованием мета-тегов и тега </h2> <p>На этом этапе вы узнаете о разделе <code><head></code> HTML-документа и о том, как использовать мета-теги и тег title для предоставления важной информации о вашей веб-странице.</p> <p>Откройте файл <code>index.html</code> в WebIDE и обновите раздел <code><head></code> с помощью следующего примера:</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="A simple HTML learning page" /> <title>My HTML Learning Journey</title> </head> <body> <h1>Welcome to HTML Metadata</h1> <p>This page demonstrates head section configuration.</p> </body> </html> </code></pre> <p>Разберем основные мета-теги и их назначения:</p> <ol> <li><code><meta charset="UTF-8"></code>: Указывает кодировку символов для документа.</li> <li><code><meta name="viewport"></code>: Гарантирует правильное отображение на различных устройствах.</li> <li><code><meta name="description"></code>: Предоставляет краткое описание страницы для поисковых систем.</li> <li><code><title></code>: Устанавливает заголовок страницы, отображаемый во вкладке браузера.</li> </ol> <p>Пример вывода во вкладке браузера:</p> <pre><code>My HTML Learning Journey </code></pre> <p>Основные моменты, которые необходимо запомнить:</p> <ul> <li>Раздел <code><head></code> содержит метаданные о HTML-документе.</li> <li>Мета-теги предоставляют дополнительную информацию для браузеров и поисковых систем.</li> <li>Тег <code><title></code> важен для идентификации страницы и SEO (поисковая оптимизация).</li> <li>Всегда включайте мета-теги кодировки символов и viewport.</li> </ul> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%B8%D0%BD%D0%BE%D1%87%D0%BD%D1%8B%D1%85-%D0%B8-%D0%B4%D0%B2%D0%BE%D0%B9%D0%BD%D1%8B%D1%85-html-%D1%82%D0%B5%D0%B3%D0%BE%D0%B2"></div> <h2 id="понимание-одиночных-и-двойных-html-тегов">Понимание одиночных и двойных HTML-тегов</h2> <p>На этом этапе вы узнаете о двух типах HTML-тегов: одиночных (самозакрывающихся) тегах и двойных тегах. Понимание различий между этими тегами является важным для создания хорошо структурированных HTML-документов.</p> <p>Откройте файл <code>index.html</code> в WebIDE и обновите раздел body с помощью следующего примера:</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML Tags Exploration</title> </head> <body>  <h1>Welcome to HTML Tags</h1> <p>This is a paragraph with <strong>bold text</strong>.</p>  <img src="example.jpg" alt="Example Image" /> <br /> <input type="text" placeholder="Enter your name" /> </body> </html> </code></pre> <p>Разберем разные типы тегов:</p> <p>Двойные теги (парные теги):</p> <ul> <li>Имеют открывающий тег <code><tag></code> и закрывающий тег <code></tag></code>.</li> <li>Содержимое помещается между открывающим и закрывающим тегами.</li> <li>Примеры: <code><h1></code>, <code><p></code>, <code><strong></code>, <code><div></code>.</li> </ul> <p>Одиночные теги (самозакрывающиеся теги):</p> <ul> <li>Не имеют отдельного закрывающего тега.</li> <li>Закрываются сами внутри тега.</li> <li>Примеры: <code><img></code>, <code><br></code>, <code><input></code>.</li> </ul> <p>Пример вывода в браузере будет выглядеть так:</p> <pre><code>Welcome to HTML Tags This is a paragraph with bold text. [Здесь должна быть отображена картинка] [Здесь должен быть показано текстовое поле ввода] </code></pre> <p><img src="/cdn-cgi/image/format=auto,quality=60,onerror=redirect/https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/ru/../assets/20250110-10-53-27-6sPaawNK.png" alt="Пример вывода HTML-тегов"></p> <p>Основные моменты, которые необходимо запомнить:</p> <ul> <li>Двойные теги заключают содержимое и требуют как открывающего, так и закрывающего тегов.</li> <li>Одиночные теги являются самодостаточными и не заключают содержимое.</li> <li>Всегда закрывайте двойные теги, чтобы сохранить правильную структуру HTML.</li> <li>Некоторые одиночные теги могут иметь атрибуты для предоставления дополнительной информации.</li> </ul> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D0%B8%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%B3%D0%B0-%3Cbody%3E-%D0%B8-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></div> <h2 id="исследование-тега--и-размещения-содержимого-страницы">Исследование тега <body> и размещения содержимого страницы</h2> <p>На этом этапе вы узнаете о теге <code><body></code> и о том, как структурировать контент в HTML-документе. Тег body - это место, где размещается все видимое содержимое веб-страницы.</p> <p>Откройте файл <code>index.html</code> в WebIDE и обновите раздел body с помощью следующего примера:</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Content Placement Example</title> </head> <body>  <h1>Welcome to HTML Content Placement</h1> <h2>Subheading Level 2</h2> <h3>Subheading Level 3</h3>  <p>This is a paragraph explaining the importance of content structure.</p>  <h4>Key HTML Elements:</h4> <ul> <li>Headings</li> <li>Paragraphs</li> <li>Lists</li> </ul>  <div> <p>This paragraph is inside a div container.</p> </div>  <a href="https://example.com">Visit Example Website</a> <img src="example.jpg" alt="Example Image" width="300" /> </body> </html> </code></pre> <p>Пример вывода в браузере будет выглядеть так:</p> <p><img src="/cdn-cgi/image/format=auto,quality=60,onerror=redirect/https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/ru/../assets/20250113-15-36-31-2tbySUGL.png" alt="Пример вывода размещения контента HTML"></p> <p>Основные моменты, которые необходимо запомнить:</p> <ul> <li>Тег <code><body></code> содержит все видимое содержимое страницы.</li> <li>Используйте заголовочные теги (<code><h1></code> - <code><h6></code>), чтобы создать иерархию контента.</li> <li>Абзацы, списки и другие элементы помогают организовать информацию.</li> <li>Тег <code><div></code> может группировать и структурировать контент.</li> <li>Включайте ссылки и изображения, чтобы повысить интерактивность страницы.</li> </ul> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D1%80%D0%B5%D0%B7%D1%8E%D0%BC%D0%B5"></div> <h2 id="резюме">Резюме</h2> <p>В этом практическом занятии (лабораторной работе) участники научились основным этапам создания базовой структуры HTML-документа. Процесс начался с настройки объявления DOCTYPE, которое является важным для обеспечения правильного отображения страницы в браузере и совместимости с HTML5. Участники изучили основные HTML-теги, включая корневой тег <code><html></code>, разделы <code><head></code> и <code><body></code>, и поняли их конкретные роли в организации документа.</p> <p>В рамках практического занятия студенты были приведены к созданию полноценного HTML-документа. Было показано, как добавлять мета-теги, устанавливать кодировку символов, определять заголовок страницы и размещать контент внутри тега body. Участники получили практический опыт в создании хорошо структурированной HTML-страницы, изучив ключевые концепции, такие как одиночные и двойные HTML-теги, правильное вложение тегов и важность семантической разметки в веб-разработке.</p>