Лабораторная работа: Построение HTML-документа Цель: Научиться применять язык разметки гипертекста (HTML) для создания структурированного веб-документа с использованием основных и дополнительных тегов.   Критерии оценивания:

• Умеет применять язык разметки гипертекста для построения структурированного документа.
• Использует базовые и семантические теги HTML.
• Создает документ, соответствующий современным стандартам.

Ход работы:

1. Подготовительный этап:
   • Повторите основные концепции HTML:
     • Структура документа: <html>, <head>, <body>.
     • Семантические теги: <header>, <nav>, <main>, <footer>, <section>, <article>.
     • Форматирование текста: <h1>-<h6>, <p>, <strong>, <em>.
   • Ознакомьтесь с задачей: требуется построить документ, включающий текст, изображения, списки, таблицы и ссылки.
2. Создание HTML-документа:
   • Откройте текстовый редактор (например, Visual Studio Code) и создайте новый файл с расширением .html.
   • Добавьте базовую структуру:

<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> <title>Лабораторная работа 16</title> </head> <body> <!— Контент страницы —> </body> </html>

1. Структурирование документа:
   • Используйте семантические теги для организации страницы:

<header> <h1>Лабораторная работа 16</h1> <nav> <a href=»#about»>О проекте</a> | <a href=»#table»>Таблица</a> | <a href=»#contact»>Контакты</a> </nav> </header> <main> <section id=»about»> <h2>О проекте</h2> <p>Этот документ демонстрирует использование HTML для построения структурированной веб-страницы.</p> </section> </main>

1. Добавление элементов контента:
   • Списки:

<section> <h2>Список задач</h2> <ul> <li>Изучить структуру HTML-документа.</li> <li>Использовать семантические теги.</li> <li>Добавить таблицу и ссылки.</li> </ul> </section>

1. • Таблица:

<section id=»table»> <h2>Распределение задач</h2> <table border=»1″> <thead> <tr> <th>Задача</th> <th>Исполнитель</th> <th>Срок</th> </tr> </thead> <tbody> <tr> <td>Создание структуры</td> <td>Алекс</td> <td>1 день</td> </tr> <tr> <td>Добавление контента</td> <td>Мария</td> <td>2 дня</td> </tr> </tbody> </table> </section>

1. • Изображение:

<section> <h2>Иллюстрация</h2> <img src=»example.jpg» alt=»Пример изображения» width=»300″> </section>

1. Добавление нижнего колонтитула:
   • Завершите документ, добавив футер:

<footer> <p>Лабораторная работа выполнена студентом Ивановым И.И.</p> <p>&copy; 2024 Все права защищены.</p> </footer>

1. Проверка и тестирование:
   • Сохраните файл и откройте его в браузере.
   • Проверьте корректность отображения всех элементов.
   • Убедитесь, что ссылки работают, таблица и списки отображаются корректно.
2. Оформление отчета:
   • Включите:
     • Полный HTML-код документа.
     • Скриншот результата в браузере.
     • Краткое описание структуры и добавленных элементов.

Советы:

• Убедитесь, что все теги правильно открыты и закрыты.
• Используйте отступы для улучшения читаемости кода.
• Проверьте документ на соответствие стандартам HTML с помощью W3C Validator.

Ожидаемый результат:

• Готовый HTML-документ с четкой структурой.
• Включение заголовков, списков, таблиц, изображений и ссылок.
• Страница, корректно отображаемая в браузере.