Первые практические задачи по HTML-разметке

5 (100%) 5 vote[s]

Легкие практические задачи, которые помогут «почувствовать» HTML и сделать первые шаги в самостоятельной разметке страницы. Попробуйте все сделать самостоятельно.

Задание №1

Описание задачи:

Заверните заголовки в правильные <h> тэги.

Главный заголовок — <h1>
  Подзаголовок — <h2>
    Второй и Третий — <h3>
Текст нужно оформить как параграф — <p>

1.Главный заголовок
   Параграф, который рассказывает об основной идее сайта или приложения.
   Параграф, который рассказывает об основной идее сайта или приложения.
   Параграф, который рассказывает об основной идее сайта или приложения
  1.1. подзаголовок
     Параграф, который относится к подзаголовку.
     Параграф, который относится к подзаголовку.
     Параграф, который относится к подзаголовку.
   1.1.1. второй подзаголовок
       Параграф, который относится ко второму подзаголовку.
       Параграф, который относится ко второму подзаголовку.
       Параграф, который относится ко второму подзаголовку.
   1.1.2. третий подзаголовок
       Параграф, который относится к третьему подзаголовку.
       Параграф, который относится к третьему подзаголовку.
       Параграф, который относится к третьему подзаголовку.

Решение

Задание №2

Описание задачи:

Создайте нумерованный список из трех элементов. Каждый элемент должен содержать текст «Текст».

Шпаргалка нумерованные списки

Решение

Задание №3

Описание задачи:

Создайте маркированный список из трех элементов. Каждый элемент должен содержать текст «Текст».

Шпаргалка маркированный список

Решение

Задание №4

Описание задачи:

Создайте маркированный список из трех элементов, который вложен в нумерованный.

Решение

Задание №5

Описание задачи:

Создайте простую форму.

Заверните в тег <form>
— Поле <input>, type = «text» placeholder = «Логин»;
— Поле <input>, type = «password» placeholder = «Пароль»;
— <textarea>, placeholder = «Ваше сообщение»;
— Поле <input>, type = «submit» value = «Отправить»;

Шпаргалка по заданию

Подробнее смотрите здесь.

Решение

Задание №6

Описание задачи:

Создать таблицу, содержащую заголовок, 4 колонки и 2 строки для основной информации, последнюю строчку как вывод. Во всех клетках заголовка текст «Заголовок», для всех остальных — «Текст».

Требования:
— Заголовок в тег <caption>;
— Заголовки колонок в тег <thead>;
— Дополнительная информация в тег <tbody> — две строки;
— Вывод в тег <tfoot> — последняя строка, разместить после </ tbody>.

Шпаргалка по заданию

Подробнее смотрите здесь.

See the Pen
Таблица
by Alla (@AllaJan)
on CodePen.

Решение

Задание №7

Описание задачи:

Отформатировать текст как на рисунке, используя теги для форматирования текста. Текст завернуть в тег <p>

Образец:

Требования:
HTML — жирным, но не <b>
Интернете — курсив, но не <i>
помощью — подстрочный
обрабатывается — надстрочный
экране в привычном для человека — уменьшен шрифт

Этот текст можно скопировать и вставить в окно редактора:

HTML — стандартный язык разметки веб-страниц в Интернете. Большинство веб-страниц создаются при помощи языка HTML. Документ HTML обрабатывается браузером и отображается на экране в привычном для человека виде.

See the Pen
Форматирование
by Alla (@AllaJan)
on CodePen.

Решение

Задание №8

Описание задачи:

Завернуть текст в тег, который сохраняет все отступы.

Для выполнения задания скопируйте шаблон в рабочую область и замените комментарий Вашей реализацией:

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Изучаем HTML</title>
 </head>
 <body>
  <!-- Заверните текст в тег, который сохраняет все отступы-->
     function toCelsius(fahrenheit) {
     return (5/9) * (fahrenheit-32);
     }
     document.getElementById("demo").innerHTML = toCelsius;
  </body>
</html>
Решение

Тест с вопросами и интерактивными задачами по HTML

Для проверки своих знаний можно попробовать оценочный тест. В первом блоке идут 50 вопросов с вариантами ответов. Каждый вопрос оценивается в 1 балл. На ответ даётся 1 попытка.

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

По завершении вы получите суммарный балл и условно результат пройден/не пройден (80% баллов из возможных 120). Кроме того, будет возможность посмотреть на статистику своих результатов и увидеть правильные ответы.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
Просмотры: 2137

Популярные записи