Skip to content

Exercises_ru.md

Latest commit

 

History

History
68 lines (39 loc) · 4.19 KB

Exercises_ru.md

File metadata and controls

68 lines (39 loc) · 4.19 KB

Упражнения:

  • Переведите этот текстовый документ в семантический HTML, используя соответствующие теги HTML: h1, h2, section, blockquote, q, img, p, figure и caption, table, th, tr, td, ul или ol и li.
  • Без использования div или span: они не несут семантической нагрузки.
  • Найдите происхождение названия каждого из этих тегов (так их проще запомнить). Если не уверены, ищите ответы на html5doctor.com.
  • Добавьте два или три ссылки на ваш выбор на HTML-страницу с помощью тега a.
  • Можно ли считать часть текста заголовком? Если да, объедините его в тег header.
  • А футер? Если да, объедините это содержимое в тег footer.
  • Заключите все вхождения слова "Может быть" в тег em или strong.

Упражнение с изображениями и ссылками на волков Попрактикуйтесь с HTML-изображениями и якорными элементами. В HTML-файле выполните следующее:

Создайте элемент изображения с этим источником: https://upload.wikimedia.org/wikipedia/commons/5/5f/Kolm%C3%A5rden_Wolf.jpg

Элемент изображения должен быть кликабельным и перенаправлять нас на https://en.wikipedia.org/wiki/Wolf в новой вкладке.

Убедитесь, что у изображения есть альтернативный текст!

Упражнение с логотипом снеговика Напишите элемент <h1>, чтобы воссоздать следующее изображение:

Существует код сущности для снеговика. Найдите его! (вам нужно будет это загуглить)

Используйте код сущности для зарегистрированного товарного знака (обозначенного в кружке R) и убедитесь, что он отображается в верхнем индексе.

Примечание: Никто не ожидает, что вы будете помнить коды сущностей наизусть. Привыкайте искать их! Это нормально!

Упражнение с формами Попрактикуйтесь с формами, полями ввода, метками и кнопками! Напишите простую форму с такими полями:

  1. Имя пользователя

    a. Поле ввода текста

    b. Должно содержать текст-заполнитель "имя пользователя"

    c. Убедитесь, что поле ввода правильно связано с меткой (используйте атрибуты id/for)

  2. Пароль

    a. Поле ввода пароля

    b. Должно содержать текст-заполнитель "пароль"

    c. Убедитесь, что поле ввода правильно связано с меткой (используйте атрибуты id/for)

  3. Кнопка a. С текстом "Зарегистрироваться"

Я добавил элементы <div> для отступов, но вы можете не использовать их:

Для практики, откройте любой сайт в вашем браузере, исследуйте его с помощью инспектора и попробуйте изменять теги, мета-заголовки, содержание текстов и т.д. Изучите, как работает инспектор!