Легкие практические задачи, которые помогут «почувствовать» HTML и сделать первые шаги в самостоятельной разметке страницы. Попробуйте все сделать самостоятельно.
Задание №1
Описание задачи:
Заверните заголовки в правильные <h> тэги.
Главный заголовок — <h1>
Подзаголовок — <h2>
Второй и Третий — <h3>
Текст нужно оформить как параграф — <p>
1.Главный заголовок
Параграф, который рассказывает об основной идее сайта или приложения.
Параграф, который рассказывает об основной идее сайта или приложения.
Параграф, который рассказывает об основной идее сайта или приложения
1.1. подзаголовок
Параграф, который относится к подзаголовку.
Параграф, который относится к подзаголовку.
Параграф, который относится к подзаголовку.
1.1.1. второй подзаголовок
Параграф, который относится ко второму подзаголовку.
Параграф, который относится ко второму подзаголовку.
Параграф, который относится ко второму подзаголовку.
1.1.2. третий подзаголовок
Параграф, который относится к третьему подзаголовку.
Параграф, который относится к третьему подзаголовку.
Параграф, который относится к третьему подзаголовку.
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Изучаем HTML</title>
</head>
<body>
<h1>Главный заголовок</h1>
<p>Параграф, который рассказывает об основной идее сайта или приложения.</p>
<p>Параграф, который рассказывает об основной идее сайта или приложения.</p>
<p>Параграф, который рассказывает об основной идее сайта или приложения.</p>
<h2>Подзаголовок</h2>
<p>Параграф, который относится к подзаголовку.</p>
<p>Параграф, который относится к подзаголовку.</p>
<p>Параграф, который относится к подзаголовку.</p>
<h3>Второй подзаголовок</h3>
<p>Параграф, который относится ко второму подзаголовку.</p>
<p>Параграф, который относится ко второму подзаголовку.</p>
<p>Параграф, который относится ко второму подзаголовку.</p>
<h3>Третий подзаголовок</h3>
<p>Параграф, который относится к третьему подзаголовку.</p>
<p>Параграф, который относится к третьему подзаголовку.</p>
<p>Параграф, который относится к третьему подзаголовку.</p>
</body>
</html>Задание №2
Описание задачи:
Создайте нумерованный список из трех элементов. Каждый элемент должен содержать текст «Текст».
Шпаргалка нумерованные списки
РешениеЗадание №3
Описание задачи:
Создайте маркированный список из трех элементов. Каждый элемент должен содержать текст «Текст».
Шпаргалка маркированный список
РешениеЗадание №4
Описание задачи:
Создайте маркированный список из трех элементов, который вложен в нумерованный.
Задание №5
Описание задачи:
Создайте простую форму.
Заверните в тег <form>
— Поле <input>, type = «text» placeholder = «Логин»;
— Поле <input>, type = «password» placeholder = «Пароль»;
— <textarea>, placeholder = «Ваше сообщение»;
— Поле <input>, type = «submit» value = «Отправить»;
Шпаргалка по заданию
Подробнее смотрите здесь.
Решение<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Изучаем HTML</title>
</head>
<body>
<form>
<p>Логин<Br>
<input type="text" placeholder="Логин"></p>
<p>Пароль<Br>
<input type="password" placeholder="Пароль"></p>
<p>Ваше сообщение<Br>
<textarea placeholder="Ваше сообщение"></textarea></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>Задание №6
Описание задачи:
Создать таблицу, содержащую заголовок, 4 колонки и 2 строки для основной информации, последнюю строчку как вывод. Во всех клетках заголовка текст «Заголовок», для всех остальных — «Текст».
Требования:
— Заголовок в тег <caption>;
— Заголовки колонок в тег <thead>;
— Дополнительная информация в тег <tbody> — две строки;
— Вывод в тег <tfoot> — последняя строка, разместить после </ tbody>.
Шпаргалка по заданию
Подробнее смотрите здесь.
See the Pen
Таблица by Alla (@AllaJan)
on CodePen.
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Изучаем HTML</title>
</head>
<body>
<table>
<caption>Заголовок таблицы</caption>
<thead>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
</thead>
<tbody>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</tfoot>
</table>
</body>
</html Задание №7
Описание задачи:
Отформатировать текст как на рисунке, используя теги для форматирования текста. Текст завернуть в тег <p>
Образец:
Требования:
HTML — жирным, но не <b>
Интернете — курсив, но не <i>
помощью — подстрочный
обрабатывается — надстрочный
экране в привычном для человека — уменьшен шрифт
Этот текст можно скопировать и вставить в окно редактора:
HTML — стандартный язык разметки веб-страниц в Интернете. Большинство веб-страниц создаются при помощи языка HTML. Документ HTML обрабатывается браузером и отображается на экране в привычном для человека виде.
See the Pen
Форматирование by Alla (@AllaJan)
on CodePen.
<!DOCTYPE html><html lang="uk"><head><meta charset="UTF-8" /><title>»Изучаем HTML</title> </head> <body> <p><strong>HTML</strong> - стандартный язык разметки веб-страниц в <em>Интернете</em>. Большинство веб-страниц<br> создаются при <sub>помощи</sub> языка HTML. Документ HTML <sup>обрабатывается</sup> браузером и<br> отображается на <font size="2em">экране в привычном для человека</font> виде.</p> </body> </html>
Задание №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). Кроме того, будет возможность посмотреть на статистику своих результатов и увидеть правильные ответы.
Читайте больше по теме:
