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

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} html/head_elems -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} html/charset -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} html/lang_decl -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} html/viewport -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} html/text_head -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} html/doc_flow -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} html/inter_elems -.-> lab-451029{{"Создание базовой структуры и тегов HTML"}} end

Настройка 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-файлов в 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.

Настройка раздела head с использованием мета-тегов и тега title

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

Откройте файл index.html в WebIDE и обновите раздел <head> с помощью следующего примера:

<!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>

Разберем основные мета-теги и их назначения:

<meta charset="UTF-8">: Указывает кодировку символов для документа.
<meta name="viewport">: Гарантирует правильное отображение на различных устройствах.
<meta name="description">: Предоставляет краткое описание страницы для поисковых систем.
<title>: Устанавливает заголовок страницы, отображаемый во вкладке браузера.

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

My HTML Learning Journey

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

Раздел <head> содержит метаданные о HTML-документе.
Мета-теги предоставляют дополнительную информацию для браузеров и поисковых систем.
Тег <title> важен для идентификации страницы и SEO (поисковая оптимизация).
Всегда включайте мета-теги кодировки символов и viewport.

Понимание одиночных и двойных HTML-тегов

На этом этапе вы узнаете о двух типах HTML-тегов: одиночных (самозакрывающихся) тегах и двойных тегах. Понимание различий между этими тегами является важным для создания хорошо структурированных HTML-документов.

Откройте файл index.html в WebIDE и обновите раздел body с помощью следующего примера:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Tags Exploration</title>
  </head>
  <body>
    <!-- Double Tags (Opening and Closing) -->
    <h1>Welcome to HTML Tags</h1>
    <p>This is a paragraph with <strong>bold text</strong>.</p>

    <!-- Single (Self-Closing) Tags -->
    <img src="example.jpg" alt="Example Image" />
    <br />
    <input type="text" placeholder="Enter your name" />
  </body>
</html>

Разберем разные типы тегов:

Двойные теги (парные теги):

Имеют открывающий тег <tag> и закрывающий тег </tag>.
Содержимое помещается между открывающим и закрывающим тегами.
Примеры: <h1>, <p>, <strong>, <div>.

Одиночные теги (самозакрывающиеся теги):

Не имеют отдельного закрывающего тега.
Закрываются сами внутри тега.
Примеры: <img>, <br>, <input>.

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

Welcome to HTML Tags
This is a paragraph with bold text.
[Здесь должна быть отображена картинка]
[Здесь должен быть показано текстовое поле ввода]

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

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

Исследование тега body и размещения контента на странице

На этом этапе вы узнаете о теге <body> и о том, как структурировать контент в HTML-документе. Тег body - это место, где размещается все видимое содержимое веб-страницы.

Откройте файл index.html в WebIDE и обновите раздел body с помощью следующего примера:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Content Placement Example</title>
  </head>
  <body>
    <!-- Headings -->
    <h1>Welcome to HTML Content Placement</h1>
    <h2>Subheading Level 2</h2>
    <h3>Subheading Level 3</h3>

    <!-- Paragraphs -->
    <p>This is a paragraph explaining the importance of content structure.</p>

    <!-- Lists -->
    <h4>Key HTML Elements:</h4>
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
      <li>Lists</li>
    </ul>

    <!-- Div for grouping content -->
    <div>
      <p>This paragraph is inside a div container.</p>
    </div>

    <!-- Links and Images -->
    <a href="https://example.com">Visit Example Website</a>
    <img src="example.jpg" alt="Example Image" width="300" />
  </body>
</html>

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

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

Тег <body> содержит все видимое содержимое страницы.
Используйте заголовочные теги (<h1> - <h6>), чтобы создать иерархию контента.
Абзацы, списки и другие элементы помогают организовать информацию.
Тег <div> может группировать и структурировать контент.
Включайте ссылки и изображения, чтобы повысить интерактивность страницы.

Резюме

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

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