СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до 14.07.2025

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

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

Категория: Информатика

Нажмите, чтобы узнать подробности

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

Просмотр содержимого документа
«Создание 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 — это инструкция, которая сообщает веб-браузеру о языке разметки, на котором написана текущая страница)

html (Тег html сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки – HTML).

head (Тег  в HTML содержит служебную информацию: заголовок страницы, метаданные, ссылки на стили и другие данные, которые необходимы для правильного отображения и интерпретации веб-страницы).

title A simple HTML documenttitle (означает, что в документе HTML используется элемент , который определяет заголовок страницы.  Заголовок отображается в строке заголовка браузера или на вкладке страницы. Он должен быть кратким (не больше 60 символов) и соответствовать содержанию страницы). 

head

body (Тег  в HTML определяет тело документа. Он содержит всё содержимое HTML-документа, например, заголовки, параграфы, изображения, гиперссылки, таблицы, списки и т. д.)

pМы рады приветствовать Вас в Московском промышленно-экономическом колледже!p


Скачать

Рекомендуем курсы ПК и ППК для учителей

Вебинар для учителей

Свидетельство об участии БЕСПЛАТНО!