Первая веб-страница. Блочные и строчные теги

Устанавливаем редактор кода и создаём первую страницу. Разбираемся, чем блочные теги отличаются от строчных.

📋 Заданий: 6✅ С автопроверкой: 6✨ Новых: 5

⬇️Как запустить дома Visual Studio Code

Скачай и установи Visual Studio Code.
Установи расширения.
Создай новую папку для проекта.
В папке создай файл index.html.
Напиши в документе html, выбери html:5 и нажми Enter.
Можно начинать работать!

✍️Задания

Пиши код в редакторе — ниже сразу появится результат. Когда закончишь, нажми «✓ Проверить». Код сохраняется в браузере сам.

Страница из блочных и строчных тегов

легкоавтопроверка

Создай страницу, используя все известные тебе блочные (h1–h6, p, div) и строчные (b, i, em, mark, span) теги.

Посмотри образец и сделай похожую страницу про себя.

👀 Открыть образец

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <h1>Добро пожаловать на мою <em>страничку</em></h1>
    <p>Меня зовут <b>Аня</b>, я учусь <mark>делать сайты</mark>.</p>
    <p>Больше всего мне нравится <i>рисовать</i> и играть в шахматы.</p>
    <h6>Слишком маленький заголовок, чтобы его рассмотреть</h6>
</body>
</html>

Все заголовки

легконовоеавтопроверка

Создай шесть заголовков — от <h1> до <h6>. В каждом напиши, какого он уровня. Посмотри, как меняется размер.

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <h1>Заголовок 1 уровня</h1>
    <h2>Заголовок 2 уровня</h2>
    <h3>Заголовок 3 уровня</h3>
    <h4>Заголовок 4 уровня</h4>
    <h5>Заголовок 5 уровня</h5>
    <h6>Заголовок 6 уровня</h6>
</body>
</html>

Списки

легконовоеавтопроверка

Сделай маркированный список покупок (<ul>, минимум 5 пунктов) и нумерованный список шагов, как приготовить бутерброд (<ol>, минимум 3 пункта).

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <h2>Список покупок</h2>
    <ul>
        <li>Хлеб</li>
        <li>Сыр</li>
        <li>Помидоры</li>
        <li>Молоко</li>
        <li>Яблоки</li>
    </ul>
    <h2>Как сделать бутерброд</h2>
    <ol>
        <li>Отрезать кусок хлеба</li>
        <li>Положить сыр</li>
        <li>Добавить помидор</li>
    </ol>
</body>
</html>

Стихотворение

легконовоеавтопроверка

Запиши любое четверостишие. Каждая строчка — с новой строки: используй <br> (минимум 3 штуки). Между названием и стихом поставь горизонтальную линию <hr>.

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <h2>Зимнее утро</h2>
    <hr>
    <p>
        Мороз и солнце; день чудесный!<br>
        Ещё ты дремлешь, друг прелестный —<br>
        Пора, красавица, проснись:<br>
        Открой сомкнуты негой взоры...
    </p>
</body>
</html>

Спецсимволы

средненовоеавтопроверка

Некоторые символы нельзя просто так написать в HTML. Выведи на странице:

знак копирайта: © КИДКОД (©)
текст <h1> — именно как текст, а не как тег (< и >)
сердечко ♥ (&hearts;)

Подсказка

Полный список спецсимволов — в полезных ссылках внизу страницы.

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <p>&copy; КИДКОД</p>
    <p>Самый главный заголовок делается тегом &lt;h1&gt;</p>
    <p>Я &hearts; HTML</p>
</body>
</html>

Формулы и цитаты

средненовоеавтопроверка

Напиши формулу воды H₂O и площадь квадрата a² с помощью тегов <sub> и <sup>. Добавь цитату в теге <blockquote>.

Показать ответ (сначала попробуй сам!)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <p>Формула воды: H<sub>2</sub>O</p>
    <p>Площадь квадрата: S = a<sup>2</sup></p>
    <blockquote>Лучший способ предсказать будущее — создать его.</blockquote>
</body>
</html>

🔗Полезные ссылки

Первая веб-страница. Блочные и строчные теги

⬇️Как запустить дома Visual Studio Code

✍️Задания

Страница из блочных и строчных тегов

Все заголовки

Списки

Стихотворение

Спецсимволы

Формулы и цитаты

🔗Полезные ссылки

Полезные ссылки

Что почитать

Где потренироваться