Лабораторная работа: Основы HTML

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

• Демонстрирует понимание структуры HTML-документа.
• Использует основные теги HTML для создания структуры страницы.
• Применяет семантические теги для улучшения читаемости и доступности.

Ход работы:

1. Подготовительный этап:
   • Изучите базовые принципы HTML:
     • HTML (HyperText Markup Language) используется для разметки структуры веб-страницы.
     • Структура документа состоит из тегов <html>, <head>, <body>.
   • Ознакомьтесь с редакторами для работы с HTML (например, Visual Studio Code).
2. Создание HTML-документа:
   • Откройте текстовый редактор и создайте новый файл с расширением .html.
   • Добавьте базовую структуру HTML:

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

3. Добавление основного контента:

• Используйте следующие теги для создания базовой структуры:
  • Заголовки: <h1>, <h2>, <h3> и т.д.
  • Абзацы: <p>.
  • Списки:
    • Нумерованные <ol> и ненумерованные <ul> списки с элементами <li>.
  • Ссылки: <a href=»ссылка»>Текст ссылки</a>.
  • Изображения: <img src=»путь_к_изображению» alt=»Описание»>.

<h1>Добро пожаловать на мой сайт</h1> <p>Этот сайт создан в рамках лабораторной работы.</p> <h2>Список моих любимых книг:</h2> <ul> <li>Гарри Поттер</li> <li>Властелин колец</li> <li>1984</li> </ul> <p>Посетите <a href=»https://example.com»>мой блог</a> для получения дополнительной информации.</p> <img src=»book.jpg» alt=»Изображение книги»>

4. Добавление семантических тегов:

• Используйте семантические теги для улучшения структуры:
  • <header> \u2013 заголовок страницы.
  • <nav> \u2013 меню навигации.
  • <main> \u2013 основной контент.
  • <footer> \u2013 нижний колонтитул.
• Пример

<header> <h1>Мой сайт</h1> <nav> <a href=»#about»>Обо мне</a> | <a href=»#contact»>Контакты</a> </nav> </header> <main> <section id=»about»> <h2>Обо мне</h2> <p>Меня зовут Алекс, и я изучаю веб-разработку.</p> </section> </main> <footer> <p>&copy; 2024 Мой сайт</p> </footer>

5. Проверка работы:

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

Советы:

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

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

• Базовый HTML-документ с заголовками, текстом, списками, ссылками и изображениями.
• Использование семантических тегов для улучшения структуры страницы.
• Понимание основ HTML и способности создавать простые веб-страницы.