1. Создание страницы с семантическими элементами HTML5

Рассмотрим пример структуры страницы университетского портала.

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Портал университета</title>

</head>

<body>

<header>

<h1>Портал университета</h1>

</header>

<nav>

<a href="index.html">Главная</a>

<a href="courses.html">Курсы</a>

</nav>

<main>

<section>

<h2>Учебные курсы</h2>

<p>Информация о доступных дисциплинах.</p>

</section>

</main>

<footer>

<p>Университет, 2026</p>

</footer>

</body>

</html>

Объяснение:

<header> — верхняя часть страницы.

<nav> — раздел навигации.

<main> — основное содержимое страницы.

<section> — тематический раздел.

<footer> — нижняя часть страницы.

Результат: создана веб-страница с логически организованными разделами.

2. Создание формы регистрации студента

Рассмотрим простую HTML-форму для регистрации на портале университета.

<form action="/register" method="post">

<label for="name">Имя студента:</label>

<input type="text" id="name" name="name" required>

<label for="email">Электронная почта:</label>

<input type="email" id="email" name="email" required>

<label for="password">Пароль:</label>

<input type="password" id="password"

name="password" minlength="6" required>

<button type="submit">Зарегистрироваться</button>

</form>

Объяснение:

<form> — создаёт форму.

action — определяет адрес отправки данных.

method="post" — указывает метод отправки.

<label> — создаёт подпись поля.

<input> — создаёт поле ввода.

type="email" — задаёт ввод электронной почты.

type="password" — создаёт поле для пароля.

required — делает поле обязательным.

minlength — задаёт минимальную длину значения.

<button> — создаёт кнопку отправки.

Результат: пользователь может заполнить форму, а браузер проверит обязательные поля и минимальную длину пароля перед отправкой. Для обработки данных необходим сервер.

3. Добавление видео и аудио на страницу

На учебном портале необходимо разместить видеолекцию и аудиоматериал.

<h2>Видеолекция</h2>

<video width="400" controls>

<source src="lesson.mp4" type="video/mp4">

Ваш браузер не поддерживает видео.

</video>

<h2>Аудиоматериал</h2>

<audio controls>

<source src="lecture.mp3" type="audio/mpeg">

Ваш браузер не поддерживает аудио.

</audio>

Объяснение:

<video> — добавляет видеоматериал.

<audio> — добавляет аудиоматериал.

<source> — указывает файл и его формат.

controls — отображает элементы управления.

src — задаёт путь к медиафайлу.

Результат: на странице появляются проигрыватели видео и аудио, которые позволяют пользователю запускать и останавливать воспроизведение при наличии соответствующих файлов.