Структура HTML: строительные блоки
Разберитесь в базовой структуре HTML-документа.
«Структура HTML: строительные блоки» — бесплатный урок HTML for Kids на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.
Структура HTML: строительные блоки
Добро пожаловать во второй урок! Сегодня мы изучим структуру HTML-документа и разберёмся, как его части соединяются друг с другом. Представьте, что Вы изучаете скелет веб-страницы.
Структура HTML-документа
HTML-документ имеет определённую структуру, которую понимает браузер. Это похоже на рецепт, объясняющий браузеру, что делать.
Основные части HTML-документа:
- Объявление типа документа: сообщает браузеру, что это HTML-документ.
- Тег HTML: содержит всё содержимое страницы.
- Заголовок: содержит информацию о странице, например её название.
- Тело: содержит содержимое, видимое пользователю.
Как выглядит структура
Вот как выглядит базовая структура HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
Объявление типа документа
Объявление <!DOCTYPE html> находится в начале каждого HTML-документа. Оно сообщает браузеру, что нужно ожидать HTML5 — последнюю версию HTML.
Представьте его как отправную точку Вашего HTML-рецепта!
Тег HTML
Тег <html> — основной контейнер для всего кода документа. Он сообщает браузеру: «Всё внутри — это HTML».
Вот как он выглядит:
<html>
<!-- All other HTML tags go here -->
</html>
Раздел заголовка
Раздел <head> содержит информацию о веб-странице, которая не отображается непосредственно на странице. Например:
- Название: текст, отображаемый на вкладке браузера.
- Метаинформация: дополнительные сведения, например описание страницы.
Пример:
<head>
<title>My Cool Web Page</title>
</head>
Раздел тела
Раздел <body> содержит всё, что видит пользователь: текст, изображения и ссылки. Это основная область содержимого.
Пример:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
Собираем всё вместе
Вот полный пример HTML-документа со всеми изученными частями:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
Отличная работа
Поздравляем! Вы изучили структуру HTML-документа. Теперь Вы знаете, как все части соединяются и образуют веб-страницу. В следующем уроке мы начнём добавлять на страницы настоящее содержимое. Приготовьтесь создать свой первый шедевр в интернете!
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 16
- Уроки
- 35
Часто задаваемые вопросы
Урок «Структура HTML: строительные блоки» бесплатный?
Да — полный текст урока «Структура HTML: строительные блоки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.
Чему я научусь в уроке «Структура HTML: строительные блоки»?
Разберитесь в базовой структуре HTML-документа. Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Структура HTML: строительные блоки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое HTML?
- Структура HTML: строительные блоки
- Теги и элементы HTML
- Создание первой HTML-страницы