Практическое задание на HTML

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Практическое задание на HTML

Простая практика

Практическое задание

Выполните нижеуказанное задание.

Сейчас попробуйте сделать проект-калькулятор на HTML, базовый HTML-шаблон с полями для ввода чисел, кнопками операций (+, -, , /, =) и полем для отображения результата:

для ввода чисел используйте input type="number";
кнопки – <button>, создайте кнопки операций +, -, *, /. =.
поле результата - <div>;
контейнер для калькулятора сделать как <div class="calculator">;
в качестве события используйте <onclick>;
обратите внимание на идентификаторы и классы – мы предусмотрим их заранее;
можете добавить комментарии на свой вкус;
можете разбавить страницу своими тегами и элементами для тренировки.

Подсказка:

<div class="calculator">
  <input type="number" id="num1" placeholder="Первое число">
  <input type="number" id="num2" placeholder="Второе число">

  <button onclick="/* скрипт для суммирования*/">+</button>
  <button onclick="/* скрипт для вычитания */">-</button>
  <button onclick="/* скрипт для умножения */">*</button>
  <button onclick="/* скрипт для деления */">/</button>
  <button onclick="/* скрипт для вывода результата */">=</button>

  <div id="result">Результат: </div>

  <noscript>
    <p>Калькулятор требует JavaScript. Включите его в настройках браузера.</p>
  </noscript>
</div>

Дополнительные примеры

Попробуйте создать файл demo.html и добавить туда следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Практический пример HTML-документа</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2rem;
      background-color: #f9f9f9;
      color: #333;
    }
    header, footer, main, aside, section {
      margin-bottom: 1.5rem;
      padding: 1rem;
      border: 1px solid #ddd;
      border-radius: 6px;
    }
    h1, h2, h3 {
      color: #2c3e50;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 0.5rem;
      text-align: left;
    }
    th {
      background-color: #ecf0f1;
    }
    dialog {
      border: 2px solid #3498db;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .btn {
      margin: 0.3rem;
      padding: 0.4rem 0.8rem;
      background: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn:hover {
      background: #2980b9;
    }
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

  <header>
    <h1>Практический пример HTML-документа</h1>
    <nav>
      <ul>
        <li><a href="#section1">Семантика</a></li>
        <li><a href="#section2">Формы</a></li>
        <li><a href="#section3">Таблицы</a></li>
        <li><a href="#section4">Мультимедиа</a></li>
        <li><a href="#section5">Интерактив</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="section1">
      <h2>Семантическая структура</h2>
      <article>
        <h3>Статья о семантике</h3>
        <p>HTML предоставляет множество семантических тегов, которые помогают браузерам и скринридерам понимать структуру контента.</p>
        <time datetime="2026-03-15">15 марта 2026</time>
        <address>Автор: <a href="mailto:author@example.com">Тимур Тагиров</a></address>
      </article>

      <aside>
        <h3>Дополнительная информация</h3>
        <p>Этот блок содержит вспомогательный контент, не связанный напрямую с основной темой.</p>
        <blockquote cite="https://example.com">
          <p>Хороший HTML — это не только работающий код, но и правильно организованная структура.</p>
        </blockquote>
        <cite>— Известный разработчик</cite>
      </aside>
    </section>

    <section id="section2">
      <h2>Форма обратной связи</h2>
      <form action="#" method="post" novalidate>
        <fieldset>
          <legend>Личные данные</legend>
          <label for="fullname">Имя и фамилия:</label>
          <input type="text" id="fullname" name="fullname" required minlength="2" maxlength="50" placeholder="Иван Иванов" />

          <label for="email">Электронная почта:</label>
          <input type="email" id="email" name="email" required autocomplete="email" />

          <label for="birthdate">Дата рождения:</label>
          <input type="date" id="birthdate" name="birthdate" max="2010-12-31" />

          <label for="country">Страна:</label>
          <select id="country" name="country">
            <option value="">— Выберите —</option>
            <option value="ru">Россия</option>
            <option value="kz">Казахстан</option>
            <option value="by">Беларусь</option>
          </select>

          <label for="subscribe">Подписаться на рассылку:</label>
          <input type="checkbox" id="subscribe" name="subscribe" checked />

          <label for="theme">Тема обращения:</label>
          <select id="theme" name="theme" multiple size="3">
            <option value="bug">Ошибка на сайте</option>
            <option value="idea">Предложение</option>
            <option value="other">Другое</option>
          </select>

          <label for="message">Сообщение:</label>
          <textarea id="message" name="message" rows="5" cols="40" placeholder="Опишите ваш вопрос..."></textarea>
        </fieldset>

        <button type="submit" class="btn">Отправить</button>
        <button type="reset" class="btn">Сбросить</button>
      </form>
    </section>

    <section id="section3">
      <h2>Таблица сравнения технологий</h2>
      <table>
        <caption>Сравнение языков разметки и программирования</caption>
        <thead>
          <tr>
            <th scope="col">Язык</th>
            <th scope="col">Тип</th>
            <th scope="col">Основное применение</th>
            <th scope="col">Год появления</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>HTML</td>
            <td>Разметка</td>
            <td>Структура веб-страниц</td>
            <td>1993</td>
          </tr>
          <tr>
            <td>CSS</td>
            <td>Стили</td>
            <td>Оформление веб-страниц</td>
            <td>1996</td>
          </tr>
          <tr>
            <td>JavaScript</td>
            <td>Программирование</td>
            <td>Интерактивность на клиенте</td>
            <td>1995</td>
          </tr>
          <tr>
            <td>Python</td>
            <td>Программирование</td>
            <td>Бэкенд, анализ данных, ИИ</td>
            <td>1991</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="section4">
      <h2>Мультимедиа</h2>
      <figure>
        <img src="https://via.placeholder.com/400x200?text=Изображение+пример" alt="Пример изображения" />
        <figcaption>Рисунок 1 — Пример изображения с подписью</figcaption>
      </figure>

      <audio controls>
        <source src="https://example.com/audio.mp3" type="audio/mpeg" />
        Ваш браузер не поддерживает аудио.
      </audio>

      <video width="400" height="225" controls poster="https://via.placeholder.com/400x225?text=Превью+видео">
        <source src="https://example.com/video.mp4" type="video/mp4" />
        Ваш браузер не поддерживает видео.
      </video>
    </section>

    <section id="section5">
      <h2>Интерактивные элементы</h2>

      <details>
        <summary><strong>Часто задаваемые вопросы</strong></summary>
        <p><strong>Вопрос:</strong> Можно ли использовать этот код в обучении?</p>
        <p><strong>Ответ:</strong> Да, данный пример предназначен именно для образовательных целей.</p>
      </details>

      <p>
        <button class="btn" onclick="document.getElementById('modal').showModal()">Открыть модальное окно</button>
      </p>

      <dialog id="modal" aria-labelledby="modal-title">
        <h3 id="modal-title">Модальное окно</h3>
        <p>Это диалоговое окно, реализованное с помощью тега `<code>&lt;dialog&gt;</code>.</p>
        <form method="dialog">
          <button class="btn">Закрыть</button>
        </form>
      </dialog>

      <progress id="file" max="100" value="70">70 %</progress>
      <label for="file">Загрузка файла...</label>

      <meter min="0" max="100" low="33" high="66" optimum="80" value="75">75 из 100</meter>
      <label for="file">Уровень удовлетворённости</label>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Вселенная IT. Все права защищены.</p>
    <p>Этот документ создан исключительно в образовательных целях.</p>
    <nav>
      <ul>
        <li><a href="#top">Наверх</a></li>
        <li><a href="/privacy">Политика конфиденциальности</a></li>
        <li><a href="/contact">Контакты</a></li>
      </ul>
    </nav>
  </footer>

  <script>
    // Минимальный JS только для демонстрации showModal()
    // Весь остальной функционал — нативный HTML
  </script>
</body>
</html>

Попробуйте изучить и разобрать код. Здесь вы можете найти:

Семантическую разметку: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <time>, <address>, <figure>, <figcaption>.
Формы: использование <form>, <fieldset>, <legend>, различных типов <input>, <select>, <textarea>, атрибутов валидации (required, minlength, max, autocomplete).
Таблицы: <table>, <caption>, <thead>, <tbody>, <th scope="col">.
Мультимедиа: <img>, <audio>, <video> с резервным контентом.
Интерактив: <details>, <summary>, <dialog>, <progress>, <meter>.
Доступность: aria-labelledby, alt, scope, семантические заголовки.
Минимальный CSS: только для читаемости и базового оформления.
Минимальный JS: только вызов showModal() — всё остальное работает без скриптов.

Практическое задание на HTML​

Простая практика​

Дополнительные примеры​

Практическое задание на HTML

Простая практика

Дополнительные примеры