Продвинутый HTML Квест: Путь Веб-Мастера

Глава 1

Основы HTML

Вы стоите перед входом в Храм Веб-Разработки. Древний мудрец протягивает вам свиток и говорит: "Чтобы пройти дальше, ты должен понять основы языка разметки HTML. Начни с самого главного - структуры документа".

HTML (HyperText Markup Language) - это язык разметки, который определяет структуру веб-страницы.

HTML-структура
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>

Первый тег, который должен быть в любом HTML-документе - это <!DOCTYPE html>. Он сообщает браузеру, что это документ HTML5.

Вопрос 1: Какой тег содержит основной контент веб-страницы, который видит пользователь?

<head>

<body>

<html>

<main>

Вопрос 2: Какой тег используется для определения заголовка документа (отображается во вкладке браузера)?

<h1>

<title>

<meta>

Вопрос 3: Впишите недостающий тег в структуру HTML-документа:

                    <!DOCTYPE html>

                    <html>

                      <head>

                        <title>Документ</title>

                      </head>

                      <>

                        <h1>Заголовок</h1>

                      </>

                    </html>

Показать подсказку

Этот тег содержит весь контент, который отображается в браузере.

Глава 2

Текстовые элементы и форматирование

Вы прошли через врата храма и оказались в Зале Текста. На стенах высечены различные текстовые элементы. Страж зала говорит: "Чтобы продолжить, покажи мне, как правильно размечать текст".

HTML предоставляет различные теги для форматирования текста:

Текстовые элементы HTML
<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<p>Это абзац текста.</p>
<strong>Жирный текст</strong>
<em>Курсивный текст</em>
<br> - перенос строки
<hr> - горизонтальная линия

Заголовки имеют иерархию от <h1> (самый важный) до <h6> (наименее важный).

Вопрос 1: Какой тег используется для создания абзаца?

<h1>

<div>

<p>

<span>

Вопрос 2: Какой из этих тегов используется для самого важного заголовка?

<h1>

<h2>

<h6>

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

<b>

<i>

<em>

Глава 3

Ссылки, изображения и списки

Вы подходите к магическому порталу. Надпись гласит: "Чтобы активировать портал, создай путь к другим мирам и покажи образы далеких земель".

Ссылки, изображения и списки - важные элементы веб-страниц:

Ссылки, изображения и списки
<!-- Ссылка -->
<ahref="https://example.com">Текст ссылки</a>

<!-- Изображение -->
<imgsrc="image.jpg"alt="Описание изображения">

<!-- Неупорядоченный список -->
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>

<!-- Упорядоченный список -->
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ol>

Обрати внимание, что тег <img> не имеет закрывающего тега - это одиночный тег.

Вопрос 1: Какой атрибут у тега <a> указывает адрес, куда ведет ссылка?

src

href

link

url

Вопрос 2: Какой атрибут у тега <img> содержит альтернативный текст для изображения?

title

alt

description

text

Вопрос 3: Какой тег используется для создания упорядоченного (нумерованного) списка?

<ul>

<ol>

<li>

<list>

Глава 4

Таблицы и формы

Вы попадаете в Зал Данных. Древний архив содержит таблицы с информацией и формы для взаимодействия. Хранитель архива говорит: "Покажи, что ты умеешь работать с таблицами и формами".

Таблицы и формы - важные элементы для организации данных и взаимодействия с пользователем:

Таблицы в HTML
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
</tr>
</table>

Формы в HTML
<formaction="/submit"method="post">
<labelfor="name">Имя:</label>
<inputtype="text"id="name"name="name">
<br>
<inputtype="submit"value="Отправить">
</form>

Вопрос 1: Какой тег используется для создания строки в таблице?

<td>

<tr>

<th>

<table>

Вопрос 2: Какой тег используется для ячейки-заголовка в таблице?

<td>

<th>

<thead>

Вопрос 3: Какой атрибут у тега <form> указывает URL для отправки данных?

action

method

url

submit

Глава 5

Семантические элементы HTML5

Вы достигаете Святилища Семантики. Здесь всё имеет четкое значение и предназначение. Жрец семантики говорит: "Покажи, что понимаешь смысл семантических элементов".

Семантические элементы HTML5 придают смысл структуре веб-страницы:

Семантические элементы HTML5
<header>Верхняя часть страницы или раздела</header>
<nav>Навигационное меню</nav>
<main>Основное содержимое страницы</main>
<article>Самостоятельный контент (статья)</article>
<section>Тематическая группа контента</section>
<aside>Боковая панель, связанная с контентом</aside>
<footer>Нижняя часть страницы или раздела</footer>

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

<main>

<body>

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

<menu>

<nav>

<ul>

Вопрос 3: Какой тег используется для независимого контента, который может быть распространен отдельно?

<div>

Глава 6

Метатеги и атрибуты

Вы подходите к Залу Мета-Знаний. Здесь хранятся секреты, невидимые обычным посетителям, но важные для работы сайта. Хранитель мета-знаний говорит: "Покажи, что понимаешь невидимую часть веб-страниц".

Метатеги и атрибуты предоставляют дополнительную информацию о странице:

Метатеги и важные атрибуты
<!-- Кодировка страницы -->
<metacharset="UTF-8">

<!-- Описание страницы для поисковых систем -->
<metaname="description"content="Описание страницы">

<!-- Ключевые слова -->
<metaname="keywords"content="HTML, CSS, JavaScript">

<!-- Атрибут для адаптивности -->
<metaname="viewport"content="width=device-width, initial-scale=1.0">

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

Вопрос 2: Какой атрибут тега <meta> используется для адаптивного дизайна?

name="responsive"

name="viewport"

name="adaptive"

name="mobile"

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

Завершение

Поздравляем!

Портал активирован! Яркий свет озаряет комнату, и перед вами появляется древний артефакт - Куб Веб-Мастера. Вы успешно прошли initiation в мир HTML и стали настоящим веб-разработчиком!

Ваш результат

0

Правильных ответов

0/18

Время прохождения

0:00

Вы изучили все основные аспекты HTML:

Структуру HTML-документа
Текстовые элементы и форматирование
Ссылки, изображения и списки
Таблицы и формы
Семантические элементы HTML5
Метатеги и атрибуты

Полная структура HTML-документа
<!DOCTYPE html>
<htmllang="ru">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Мой сайт</title>
</head>
<body>
<header>
<h1>Добро пожаловать!</h1>
<nav>
<ahref="#">Главная</a>
</nav>
</header>
<main>
<article>
<h2>Заголовок статьи</h2>
<p>Содержание статьи...</p>
</article>
</main>
<footer>
<p>© 2023 Мой сайт</p>
</footer>
</body>
</html>

Продолжайте изучать веб-разработку! Рекомендуемые темы для дальнейшего изучения:

CSS для стилизации веб-страниц
JavaScript для интерактивности
Фреймворки и библиотеки (React, Vue, Angular)
Серверные технологии (Node.js, PHP, Python)
Базы данных (MySQL, MongoDB)