Учебно-методические материал «Основы языка HTML»

Колледж ГБПОУ 26 КАДР.

Преподаватель: Устюгова Е.В.

Тема: «Основы языка HTML».

Цели урока:

Освоить основные этапы построения web – страниц;

Освоить основные методы создания web – страниц;

Научить создавать web – страницы с помощью языка разметки гипертекста HTML;

Оформлять заголовки на web – страницах;

Размещать гиперссылки и графику на web – страницах;

Показать возможности использования языка разметки гипертекста HTML для создания интернет-страниц и сайтов в любой сфере жизнедеятельности.

Задачи урока:

образовательная – знакомство учащихся с основными построения web-страниц с помощью языка разметки гипертекста HTML;

развивающие – формирование у учащихся логического и алгоритмического мышления; развитие познавательного интереса к предмету; развитие умения оперировать ранее полученными знаниями; развитие умения планировать свою деятельность;

воспитательные – воспитание умения самостоятельно мыслить, ответственности за выполняемую работу, аккуратности при выполнении работы; развитие чувства патриотизма.

Тип урока:

комбинированный

Технические и программные средства:

Персональные компьютеры;

Приложение Windows – Блокнот, Inernet Explorer.

Проектор

План урока

Организационный момент. Тема и цели урока (2минуты).

Проверка домашнего задания доклад на тему: «История HTML» (5 минут) – презентация.

Разминка «задания на тему интернет и интернет-технологии». Осмысление и систематизация материала (7 минут).

Применение полученных на теоретических занятиях знаний. Выполнение практической работы «Основы языка HTML» работа в малых группах и конкурс капитанов (27минут).

Подведение итогов и критерии оценки. Домашнее задание, инструктаж (6 минут).

Ход урока

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

Проверка готовности учащихся к уроку, наличие рапортички с отмеченными отсутствующими, объявление темы и цели урока.

Проверка опережающего домашнего задания – презентация (приложение 1).

Разделение группы на команды по 3 студента.

Разминка«Разминка (интернет и интернет-технологии)».

Применение полученных на теоретических занятиях знаний:

 

Подведение итогов урока. Домашнее задание.

- Подсчёт баллов, определение победителей.

- Д/з:

Создать самостоятельно две web-страницы c Городами Героями;

Повторить теги и атрибуты языка HTML.

Приложение1. Презентация на тему: «История HTML».

Приложение2. Разминка (интернет и инетрнет-технологии).

Приложение2. Тема: «Основы языка HTML».

Приложение3. ПРОЕКТ И СОЗДАНИЕ ТЕМАТИЧЕСКОГО САЙТА «Города Герои ВОВ».

1. Разработка проекта сайта « Города Герои ВОВ».

Наш сайт будет посвящен городам Героям Великой Отечественной Войны, каждая страница должна содержать заголовок, иллюстрацию и панель навигации. Сайт будет состоять из четырех страниц. Четыре страницы мы сделаем сегодня на уроке, а две другие вы самостоятельно сделаете дома и внесете в них свое оформление.

Главная страница содержит: (Показ слайдов)

Заголовок – Города Герои ВОВ;

Иллюстрацию: рисунок Главная;

Навигационную панель: Гиперссылки на 3 другие страницы <Москва, Ленинград, Брестская крепость >.

Вторая страница: (Показ слайдов)

Заголовок – Город-Герой Москва;

Иллюстрацию: рисунок Москва;

Навигационную панель: Гиперссылки на 3 другие страницы <Главная, Ленинград, Брестская Крепость>.

Третья страница: (Показ слайдов)

Заголовок – Город-Герой Ленинград;

Иллюстрацию: рисунок Ленинград;

Навигационную панель: Гиперссылки на 3 другие страницы <Главная, Москва, Брестская Крепость>.

Четвертая страница: (Показ слайдов)

Заголовок – Брестская крепость;

Иллюстрацию: рисунок Брест;

Навигационную панель: Гиперссылки на 3 другие страницы <Главная, Москва, Ленинград>.

2.Инструментальные средства создания сайтов

Для нашего проекта используются специальные инструментальные средства позволяющие создавать страницы имея минимальные знания по основам программирования. В качестве самого удобного и распространенного инструментального средства текстовый редактор Блокнот. Браузер для просмотра веб-страниц Internet Explorer.

3.Практическая работа

Метод построения:

ПРОЕКТ И СОЗДАНИЕ ТЕМАТИЧЕСКОГО САЙТА «Города Герои ВОВ»

Создать:

1. Заголовок

   Иллюстрацию

   панель навигации

ХОД РАБОТЫ

1.Откройте папку Города Герои на рабочем столе.

2. Создание Главной страницы. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код: