9 класс
Тема: Создание таблиц в HTML.
Тип урока: проектная деятельность.
Время урока: 40
минут.
Цель урока:
сформировать у учащихся умения и навыки работы в среде HTML путем создания Web – страницы, адаптировать
ребёнка к компьютерной среде.
Задачи урока:
образовательная:
- обеспечить прочное и сознательное овладение
учащимися знаний, полученных на предыдущих уроках (устроительство таблиц,
необходимость таблиц, физическая и логическая ячейка, заливка,
оформление);
воспитательная:
- создание условий для творчества ребенка на
уроке;
- развитие потенциальных возможностей в самом
себе;
- воспитание настойчивости в достижении цели;
-развивающая:
·
создание условий для развития коммуникативных
компетенций: умение использовать информацию для творческой работы;
·
формирование устойчивого интереса учащихся к
предмету.
Методы: проектная
деятельность, индивидуальные формы работы.
Программное обеспечение: Блокнот, фотографии, готовая презентация в программе PowerPoint, операционная система Windows XP, USB – порты, дисководы, проектор, экран.
Пояснение: Все
примеры использованы из программ учеников, презентация составлена на основе
готовых работ учеников.
Для данного урока детям было дано задание
подготовить фотографии своего класса и принести их на носителях (диски, дискеты,
флешки, цифровые фотоаппараты). Перед уроком детям предлагается скинуть свои
фотографии в папочки на компьютере, которые есть у каждого ребенка.
Ход урока:
1.
Приветствие.
Учитель здоровается с учениками, желает им
творческих успехов и хорошего настроения, т. к. им сегодня серьезно придется
потрудиться, настраивает детей на ситуацию успеха.
Перед ребятами ставится цель: создать на
уроке Web – страницу, которая будет являться визиткой
класса. Для этого понадобятся знания учащихся по созданию таблиц в HTML и фотографии, которые ученики принесли на урок.
Учитель: - Вы должны проявить свое творчество
для создания визитки. Можно брать за основу примеры, о которых я буду говорить,
но как будет выглядеть ваша страничка - все зависит от вашего желания и умения.
Детям предлагается посмотреть на экран, где
они видят образец визитки. (слайд 1)
2.
Творческая работа.
а) Детям предлагается начать свою работу с набора программы, которая
позволяет построить таблицу, состоящую из 3 строк и 3
столбцов. (слайд 2)
Обязательно обратить внимание на то, что по
желанию можно изменить количество строк и столбцов.
Ученики набирают программу в блокноте.
Программа должна иметь примерно следующий вид.
<html>
<body>
<table border=1>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
</table>
</body>
</html>
Необходимо детям напомнить во время набора
программы, что для того, чтобы увидеть таблицу, нужно в тэге <table> использовать параметр border=1, а в
логические ячейки ввести произвольные данные, можно просто числа. После набора
обязательно проверить ошибки. Для этого используется слайд 3.
После этого этапа ученикам предлагается
загрузить свой файл в окно браузера для просмотра. Смотрим на полученный
результат. На экране появилась таблица. Можно ее показать всему классу, для
этого используется слайд
4.
Дети делают вывод: таблица получилась слишком
маленькая и неинтересная.
Значит необходимо внести изменения в
программу.
Во время этой работы отрабатываются и
закрепляются знания языка HTML.
б) Детям
предлагается установить таблицу в центре экрана, изменить ее размер.
Вопрос классу: «Какие изменения необходимо
внести в программу, чтобы добиться желаемого результата?» Дети отвечают, что
надо внести параметры в тэги <table> и <tr>.
Пример.
<table align=center border=1 width=100%
bordercolor=red>
<tr height=33%>
Ученики вносят изменения в программу. Именно с
этого момента начинается творческий, самостоятельный процесс. Каждый ребенок
проявляет свою индивидуальность. Во время работы дети поднимают руки, когда. у
них возникают вопросы. Учитель подходит к каждому ребенку, отвечает на их
вопросы, помогает найти, возникающие ошибки, при необходимости помогает
ребенку. Идет индивидуальная работа.
в) Учитель подает
идею. Для того, чтобы визитка получилась неформальной, можно объединить
ячейки.
Задается вопрос классу: «Как этого добиться?»
Ученики отвечают: «Надо использовать в
программе параметры colspan или rowspan в тэге <td>. Colspan
объединяет ячейки по столбцам, rowspan по строкам»
Пример:
<td colspan=2> 1
</td>
или
<td rowspan=2> 1
</td>
г) Учитель, контролируя работу учеников, видит, что таблицы у всех готовы,
и поэтому он предлагает заполнить ячейки текстами и фотографиями. В течение
всего урока учитель выступает в роли помощника, тем самым дает детям понять,
что все делают они сами. На уроке царит атмосфера благоприятного психологического
настроя. Ребята продолжают набирать программу. Они экспериментируют,
анализируют, что-то меняют, добиваются своего результата. Постепенно программа
выстраивается и получается Web-страница.
Пример программы, которая должна получиться.
<html>
<body>
<table align=center border=1 width=100%
bordercolor=red>
<tr>
<td colspan=2 bgcolor=Ivory>
<font color=green size=+2><center><i>Мой класс</i></b></center></font>
</td>
<td> <h1><i><b><center> 9 - В </center></b></i></h1> </td>
</tr>
<tr>
<td> <font color= red><u>Девочек
12 </u></font></td>
<td> <Img src="P5250012.jpg" widlh=75
hight=57> </td>
<td> <font color= Aqua><u>Мальчиков
11 </u></font> </td>
</tr>
<tr>
<td><Img src="P7280079.jpg" widlh=75
hight=57> </td>
<td colspan=2><font color=Darkslategray>
<center><h1>Мы веселые и добрые дети!!!</h1></center></font></td>
</tr>
</table>
</body>
</html>
д) За 4 минуты до
конца урока учитель предлагает детям закончить свою работу и загрузить свой
файл для просмотра.
е) Ученики
показывают свои работы, выбирается лучшая визитка. (Пример слайд 5)
3.
Итог.
Учитель спрашивает
детей:
- Урок понравился?
- Достигли ли мы
поставленной на этом уроке цели?
- Сможете ли вы
теперь самостоятельно создать Web – страницу?
Дети с радостью
говорят: «Да»
Учитель всех благодарит за урок.
