Домашнее задание: Текст, заголовки, списки и ссылки

Кратко

Соберите текстовую страницу-резюме без CSS: имя, короткое описание, контакты, навыки, опыт и ссылки на e-mail/GitHub. Важно: структура должна читаться без оформления.

Формулировка

Соберите текстовую страницу-резюме без CSS: имя, короткое описание, контакты, навыки, опыт и ссылки на e-mail/GitHub. Важно: структура должна читаться без оформления.

Задание повышенной сложности

Добавьте список определений dl для трёх терминов HTML, которые уже изучили.

Как должен выглядеть результат

Готовая страница без CSS — обычный, но осмысленно структурированный текст:

Иван Петров

Начинающий веб-разработчик. Учусь верстать семантично.

Контакты

ivan@example.com · GitHub

Навыки

  • HTML-разметка
  • Семантическая структура
  • Ссылки и навигация
<h1>Иван Петров</h1>
<p>Начинающий веб-разработчик. Учусь верстать <strong>семантично</strong>.</p>

<h2>Контакты</h2>
<p>
  <a href="mailto:ivan@example.com">ivan@example.com</a> ·
  <a href="https://github.com" target="_blank"
     rel="noopener noreferrer">GitHub</a>
</p>

<h2>Навыки</h2>
<ul>
  <li>HTML-разметка</li>
  <li>Семантическая структура</li>
  <li>Ссылки и навигация</li>
</ul>

Пошаговое решение

  1. Создайте отдельную папку урока и файл index.html.
  2. Соберите структуру: один h1 (имя), разделы h2, абзацы и список навыков.
  3. Добавьте ссылки: mailto: на почту и внешнюю на GitHub с target="_blank" и rel="noopener noreferrer".
  4. Проверьте документ в браузере и DevTools (F12): пройдитесь по дереву элементов.
  5. Исправьте ошибки смысла, доступности и навигации (понятный текст ссылок, уровни заголовков подряд).

Мини-проверка

Страница должна быть понятна без CSS, все ссылки должны иметь ясное назначение, а внешняя ссылка — атрибут rel.