Раздел программы: Разработка Web-сайтов с использованием языка разметки гипертекста HTML (11 класс)
Цели урока:
- Повторение основных принципов построения сайтов, структуры HTML-документа.
- Стимулирование познавательного интереса учащихся к предмету “Информатика”.
- Развитие умственной деятельности, памяти, умения логически мыслить.
- Научить школьников применять современное программное обеспечение.
Задачи урока:
- Учебная – Повторение основных понятий раздела программы.
- Развивающая – развитие приемов умственной деятельности (обобщение, анализ, синтез, сравнение), памяти, творческой активности.
- Воспитательная – стимулирование познавательного интереса учащихся, развитие уверенности в собственных силах.
Тип урока: урок обобщения и систематизации знаний по теме «Разработка Web-сайтов с использованием языка разметки гипертекста HTML»
Вид урока: защита индивидуальных проектов
Время проведения: Данная тема рассчитана на 2 урока, как подведение итогов по теме «Разработка Web-сайтов с использованием языка разметки гипертекста HTML»
Оборудование: компьютерный класс, проектор.
План урока:
- Орг. момент – 5 мин.
- Обобщение изученного материала– 10 мин.
- Защита проектных заданий – 20 мин
- Подведение итогов – 5 мин
Ход урока
1. Организационный момент.
Здравствуйте! Мы изучили большую тему «Создание Web-сайтов с использованием языка разметки гипертекстовых документов HTM"L». К сегодняшнему дню мы уже знаем, что такое сайт и чем он отличается от обычного текстового документа. Знаем, что Web-сайт можно создавать с помощью специальных программ и с помощью языка гипертекстовой разметки HTML. Вы знаете, что команды HTML задаются с помощью специальных элементов – тэгов, которые бывают парные и непарные. Знаете, что программы, написанные на языке HTML, имеют определенную стандартизированную структуру.
На предыдущих уроках мы изучали форматирование текста на Web-страницах, создание списков, размещение графики, создание таблиц, построение гипертекстовых связей. Сегодня для вас очень ответственный урок – вы должны показать чему научились. Для этого каждый из вас выбрал тему своей зачетной работы, и мы их назвали индивидуальными проектными заданиями. Активизировав все свои знания, представите созданные вами Web-сайты.
2. Обобщение изученного материала:
Первый шаг
Теперь вспомним основную структуру HTML-документа на примере создания страницы “Сайт о Вселенной и нашей галактике” на рабочем столе папка Приложение1, файл «Вселенная.htm». Необходимо выйти к доске открыть просмотр HTML кода проговорить основную структуру документа и выполнить следующие задания:
1.Задать цвет фона страницы и цвет текста.
Логично будет сказать, что заголовок должен стоять по центру и быть крупнее. (Один ученик выходит к компьютеру прописывает команды и объясняет их значение.)
<bgcolor=ligthblue text=blue >
2.Сделать заголовок 1 уровня поставить его по центру, задать цвет заголовка. Выделить слово ВСЕЛЕННАЯ в определении и во всем тексте, где оно встречается полужирным и курсивом. (Один ученик выходит к компьютеру прописывает команды и объясняет их значение.)
<h1…h2> - уровень заголовка;
<b> - полужирным;
<i> - курсив.
3.Сделать маркированный список во втором абзаце текста.
Давайте вспомним, как сделать маркированный или нумерованный список, какие теги для этого используются. (Один ученик выходит к компьютеру прописывает команды и объясняет их значение.)
<ul> - нумерация;
<ol> - маркирация;
<li>.
4.Необходимо разбить текст, который стоит после маркированного списка по смыслу на 3 абзаца.
<p> - с новой строки (он не обязательно закрывающий тег)
<br> - новый абзац
Второй шаг
Прекрасно! Это все была работа с текстом. Следующий шаг очень важный при создании сайтов – это вставка рисунка. Попробуем в нашу заготовку вставить несколько картинок.
5.Необходимо вставить flash-картинку «Солнышко» по бокам от заголовка. Поставить выровненную по левому краю картинку «Вселенная» и по центру после текста картинку «Солнечная система».
(Один ученик выходит к компьютеру прописывает команды и объясняет их значение.)
Тег <Img > - вставка картинки, атрибут <Align> - выравнивание
Третий шаг
Теперь нас интересует, как можно соединять между собой готовые Web-страницы. И покажем это на примере организации гипертекстовой разметки между файлом «Вселенная.htm», который мы только что сделали и уже готовой web – страницей (заготовкой) под названием «Galaxy.htm».
(Один ученик выходит к компьютеру прописывает команды и объясняет их значение)
6.Сделать ссылку, используя для этого картинку «Солнечная система» и сделать обратную ссылку со страницы «Galaxy.htm» на страницу «Вселенная.htm».
Тег <A>
Это были известные вам конструкции, которые вы использовали применительно в своей конкретной работе. Ну а теперь приступим к представлению ваших Web-сайтов с описанием своей работы.
3. Защита индивидуального проекта учащимися (один из сайтов представленных учащимися приложение2).
4. Подведение итогов:
Подведем итоги нашей работы. Мы просмотрели много разных проектов. Среди них особо можно отметить работы……………….. Эти ученики показали высокий уровень знаний по данной теме. Хочется отметить, что ни кто из учащихся не отнесся к работе равнодушно, и если у кого-то не все получилось – не огорчайтесь! Дорогу осилит идущий!