Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML

Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML

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

Задачи занятия:

• познакомить учащихся с понятиями «Web-страница», «Web-сайт», «гипертекст», «гиперссылка», «браузер», «HTML», «тег»;

• рассказать об основных характеристиках Web-ресурса, структуре Web-документа и назначении основных тегов;

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

Оборудование: компьютеры, мультимедийный проектор с экраном, текстовый редактор, программа браузер, мультимедийная презентация «Создание Web-сайта. Язык разметки гипертекстовых документов HTML», раздаточный материал для выполнения практических работ (приложение 1, приложение 2) и таблицы цветов по количеству учащихся.

Ход занятия:

1. Организационный момент: приветствие, проверка готовности учащихся к практическому занятию, актуализация знаний.

2. Беседа по теме «Web-сайты, язык разметки».

3. Выполнение практической работы №1: оценка качества Web-ресурсов и формирование требований к созданию учебных сайтов.

Задания к практической работе по оценке качества веб-ресурсов и формированию требований к учебным сайтам:

1. Проанализируйте структуру и навигацию сайта Московского промышленно-экономического колледжа. Оцените удобство использования и доступность информации для пользователей.

2. Изучите дизайн сайта. Оцените сочетание цветовой гаммы, графики и шаблонов оформления веб-страниц. Обратите внимание на повторяемость оформления и уникальность дизайна.

3. Проверьте навигацию сайта. Убедитесь, что ссылки работают корректно, переходы между разделами сайта наглядны и удобны для пользователей.

4. Определите структуру сайта. Оцените чёткость разделения разделов и тем, а также наличие карты сайта для удобства пользователей.

5. Рассмотрите структурированность контента. Обратите внимание на размер глав, использование маркированных и нумерованных абзацев, а также на распределение содержания по отдельным страницам.

1. Объяснение новой темы с использованием учебной презентации «Создание Web-сайта. Язык разметки гипертекстовых документов HTML». Обсуждение структуры Web-документа и основных тегов.

2. Выполнение практической работы №2: Создание, просмотр и редактирование HTML-документов, оформление заголовков, управление размером, гарнитурой и цветом шрифта, выделение и выравнивание абзацев, размещение графики и создание гиперссылки.

Задание к практической работе по созданию первой страницы сайта:

1. Создание нового HTML-документа.

Чтобы создать новый HTML-документ, выполните следующие шаги:

1. Откройте текстовый редактор на вашем компьютере (Блокнот (в Windows), TextEdit (в Mac) или другой простой текстовый редактор).

2. Создайте новый файл. Назовите его, например, «index.html».

3. В пустом окне текстового редактора введите следующий код (в скобках – пояснение):

DOCTYPE html (DOCTYPE в HTML — это инструкция, которая сообщает веб-браузеру о языке разметки, на котором написана текущая страница)