Розпочати навчання

Кабінет

Контакти

Про нас

Програми

ГЛАВА 1 из 40 • Введение в HTML

Пробуждение в Цифровом Мире

Заброшенные руины. Пыльный подвал старой библиотеки.

Алекс осторожно спустился по каменным ступеням, освещая путь фонариком. Шестнадцатилетний парень увлекался археологией и часто исследовал старые здания в поисках артефактов. Но то, что он нашел сегодня, превзошло все его ожидания.

На полу, среди обломков древних книг, лежал странный кулон. Металлический диск с геометрическими узорами тускло светился голубым светом. Алекс поднял артефакт и надел на шею. В тот же момент символы на кулоне вспыхнули ярким светом!

"Инициализация... Перенос сознания... Добро пожаловать в Цифровой Мир."

Мир вокруг взорвался потоками света и кода. Алекс почувствовал, как его тело растворяется в миллионах светящихся частиц. Через мгновение он оказался на центральной площади невероятного города. Вокруг парили футуристические платформы, а в воздухе мерцали голографические символы.

💬 "Приветствую тебя, Алекс. Я — Кодекс, твой проводник в Цифровом Мире."

Перед Алексом материализовалась фигура из голубого светящегося кода. Андрогинный силуэт постоянно менял узоры — на его "теле" появлялись и исчезали странные символы.

— Где я? Что происходит? — растерянно спросил Алекс, разглядывая свои руки. Они выглядели реальными, но слегка светились изнутри.

— Ты активировал Артефакт Переноса древней цивилизации, — спокойно ответил Кодекс. — Эта цивилизация создала основы того, что вы, люди, называете "интернетом". Цифровой Мир построен на их технологии — на языке HTML. Всё здесь имеет структуру, порядок, иерархию.

Кодекс взмахнул рукой, и в воздухе появилась голографическая схема:

 <html>

                  <head>

                    [Информация о мире]

                  </head>

                  <body>

                    [Видимое содержимое мира]

                  </body>

                </html>

— Видишь? — продолжил Кодекс. — Каждый мир, каждая страница имеет три основных части. Корневой элемент <html> — это основа всего. Внутри него <head> хранит невидимую информацию: заголовок мира, его настройки, метаданные. А <body> — это то, что ты видишь вокруг: площадь, здания, небо.

— Хорошо, но как мне вернуться домой? — Алекс начал немного приходить в себя от шока.

— Для этого тебе нужно активировать Портальную Сеть, — ответил Кодекс. — Древняя цивилизация разместила узлы по всему Цифровому Миру. Чтобы открыть портал домой, ты должен пройти через все локации и изучить основы их технологии — HTML и CSS. Только тогда ты сможешь создать свой собственный портал.

🎯 Задача: Начни свое путешествие с изучения базовой структуры HTML-документа — основы всех основ Цифрового Мира!

📚 Что изучаем в этой главе:

Базовую структуру HTML-документа
Назначение тегов <html>, <head> и <body>
Понятие "корневого элемента" в HTML

💻 Практические задания:

🔍 Кодекс приготовил для тебя три простых вопроса о структуре HTML. Ответь на них, чтобы доказать, что ты понял основы Цифрового Мира.

Задание 1: Корневой элемент

?

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

 <___>

                      <head>...</head>

                      <body>...</body>

                    </___>

Этот тег сообщает системе: "Здесь начинается HTML-документ". Без него Цифровой Мир не сможет понять структуру.

Вопрос: Как называется корневой (главный) тег HTML-документа?

Задание 2: Невидимая информация

?

Кодекс указывает на часть структуры, которая не видна на площади, но содержит важную информацию о мире: его название, настройки, инструкции для системы.

 <html>

                      <____>

                        <title>Цифровой Мир</title>

                      </____>

                      <body>...</body>

                    </html>

В этом разделе хранятся метаданные, подключаются стили и скрипты — всё, что нужно для правильной работы страницы, но что пользователь не видит напрямую.

Вопрос: Как называется тег для невидимой части документа с метаинформацией?

Задание 3: Видимое содержимое

?

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

 <html>

                      <head>...</head>

                      <____>

                        <h1>Центральная площадь</h1>

                        <p>Добро пожаловать в Цифровой Мир!</p>

                      </____>

                    </html>

Это основная часть страницы — всё, что отображается в окне браузера: текст, изображения, кнопки, формы. Именно здесь происходит всё видимое взаимодействие с пользователем.

Вопрос: Как называется тег для видимого содержимого страницы?

Алекс стоит на футуристической площади Цифрового Мира рядом с голографическим проводником Кодексом

🚀 Первая встреча

Алекс впервые попадает в Цифровой Мир и встречает своего проводника — ИИ по имени Кодекс. Центральная площадь Города Основ поражает воображение: парящие платформы, голографические структуры и потоки светящегося кода создают невероятную атмосферу.