Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML
Цель занятия: формирование у обучающихся профессиональных компетенций создания, редактирования и форматирования html-документа при выполнении практического задания.
Задачи занятия:
-
познакомить учащихся с понятиями «Web-страница», «Web-сайт», «гипертекст», «гиперссылка», «браузер», «HTML», «тег»;
-
рассказать об основных характеристиках Web-ресурса, структуре Web-документа и назначении основных тегов;
-
научить создавать HTML-файлы, оформлять заголовки, управлять размером, гарнитурой и цветом шрифта, выделять и выравнивать абзацы, размещать графику на Web-странице и создавать гиперсвязи между страницами сайта.
Оборудование: компьютеры, мультимедийный проектор с экраном, текстовый редактор, программа браузер, мультимедийная презентация «Создание Web-сайта. Язык разметки гипертекстовых документов HTML», раздаточный материал для выполнения практических работ (приложение 1, приложение 2) и таблицы цветов по количеству учащихся.
Ход занятия:
-
Организационный момент: приветствие, проверка готовности учащихся к практическому занятию, актуализация знаний.
-
Беседа по теме «Web-сайты, язык разметки».
-
Выполнение практической работы №1: оценка качества Web-ресурсов и формирование требований к созданию учебных сайтов.
Задания к практической работе по оценке качества веб-ресурсов и формированию требований к учебным сайтам:
-
Проанализируйте структуру и навигацию сайта Московского промышленно-экономического колледжа. Оцените удобство использования и доступность информации для пользователей.
-
Изучите дизайн сайта. Оцените сочетание цветовой гаммы, графики и шаблонов оформления веб-страниц. Обратите внимание на повторяемость оформления и уникальность дизайна.
-
Проверьте навигацию сайта. Убедитесь, что ссылки работают корректно, переходы между разделами сайта наглядны и удобны для пользователей.
-
Определите структуру сайта. Оцените чёткость разделения разделов и тем, а также наличие карты сайта для удобства пользователей.
-
Рассмотрите структурированность контента. Обратите внимание на размер глав, использование маркированных и нумерованных абзацев, а также на распределение содержания по отдельным страницам.
-
Объяснение новой темы с использованием учебной презентации «Создание Web-сайта. Язык разметки гипертекстовых документов HTML». Обсуждение структуры Web-документа и основных тегов.
-
Выполнение практической работы №2: Создание, просмотр и редактирование HTML-документов, оформление заголовков, управление размером, гарнитурой и цветом шрифта, выделение и выравнивание абзацев, размещение графики и создание гиперссылки.
Задание к практической работе по созданию первой страницы сайта:
-
Создание нового HTML-документа.
Чтобы создать новый HTML-документ, выполните следующие шаги:
-
Откройте текстовый редактор на вашем компьютере (Блокнот (в Windows), TextEdit (в Mac) или другой простой текстовый редактор).
-
Создайте новый файл. Назовите его, например, «index.html».
-
В пустом окне текстового редактора введите следующий код (в скобках – пояснение):
DOCTYPE html (DOCTYPE в HTML — это инструкция, которая сообщает веб-браузеру о языке разметки, на котором написана текущая страница)
html (Тег html сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки – HTML).
head (Тег в HTML содержит служебную информацию: заголовок страницы, метаданные, ссылки на стили и другие данные, которые необходимы для правильного отображения и интерпретации веб-страницы).
title A simple HTML documenttitle (означает, что в документе HTML используется элемент , который определяет заголовок страницы. Заголовок отображается в строке заголовка браузера или на вкладке страницы. Он должен быть кратким (не больше 60 символов) и соответствовать содержанию страницы).
head
body (Тег в HTML определяет тело документа. Он содержит всё содержимое HTML-документа, например, заголовки, параграфы, изображения, гиперссылки, таблицы, списки и т. д.)
pМы рады приветствовать Вас в Московском промышленно-экономическом колледже!p