План-конспект уроку з інформатики на тему "Включення графіки та таблиць до Web-сторінки"
ТЕМА УРОКУ. Включення графіки та таблиць до Web-сторінки.
МЕТА УРОКУ:
Навчальна. Навчити учнів вставляти таблиці та графіку до найпростішої веб-сторінки. Вивчити основні теги для вставляння таблиць та графіки до веб-сторінок.
Розвиваюча. Розвивати практичні навички роботи з ПК, уміння працювати з текстовим редактором, пам’ять. Розвивати навички роботи з клавіатурою.
Виховна. Попередня професійна орієнтація учнів.
ОБЛАДНАННЯ: Комп’ютери класу. Мережа Інтернет.
НАГЛЯДНІСТЬ:
ХІД УРОКУ.
І. Вступна частина.
1. Оголошення теми та мети уроку, його ролі в даній темі та курсі інформатики в цілому.
2. Постановка перед дітьми цілі та розкриття методів її досягнення на уроці
ІІ. Актуалізація теми уроку.
? 1. Для чого використовують таблиці у документах?
? 2. Для чого потрібна графіка у веб-сторінках?
? 3. В чому переваги представлення інформації в виді таблиць?
ІІІ. Перевірка вивчення матеріалу.
Фронтальне опитування учнів по минулому уроку.
ІV. Вивчення нового матеріалу.
1. Встановлення графічного фону сторінки.
<body bgcolor="колір">
<body background="ваш_фон.jpg">
2. Додавання графіки на веб-сторінку.
<img src="шлях та назва графічного файла" align="left">
текст може розташовуватись внизу картинки (1), посередині - (2), або вгорі - (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">
3. Додавання списків.
• Створення маркованого списку.
• Текст один
• Текст другий
• Текст третій
• Текст четвертий <UL type="параметр">
<Li> Текст один </Li>
<Li> Текст другий </Li>
<Li> Текст третій </Li>
<Li> Текст четвертий </Li>
</UL>
Параметр:
Disc – •
Circle – ◦
Square – ■
• Створення нумерованого списку.
1. Текст один
2. Текст другий
3. Текст третій
4. Текст четвертий <OL type="параметр"> Start="значення"
<Li> Текст один </Li>
<Li> Текст другий </Li>
<Li> Текст третій </Li>
<Li> Текст четвертий </Li>
</ОL>
Параметр: "1", "І", "і", "А", "а".
Значення: з якого числа почати рахувати
• Створення багаторівневого списку
1. Текст один
1.а. Текст-1а
1.б. Текст-1б
2. Текст другий
2.а. Текст-2а
2.б. Текст-2б
<DL>
<Dt> Текст один
<DD> Текст-1а
<DD> Текст-1б
<Dt> Текст другий
<DD> Текст-2а
<DD> Текст-2б
</DL>
4. Додавання таблиць.
• Таблиця задається тегом: <table> … </table>
Таблиця складається із рядків та стовпців, тому потрібно вказати їх.
<tr></tr> - рядок таблиці
<td></td> - стовпчик (чарунка) таблиці
<table>
<tr> - рядок 1
<td></td> - стовбець 1 (1х1)
<td></td> - стовбець 2 (1х2)
<td></td> - стовбець 3 (1х3)
</tr>
<tr> - рядок 2
<td></td> - стовбець 1 (2х1)
<td></td> - стовбець 2 (2х2)
<td></td> - стовбець 3 (2х3)
</tr>
</table>
• Задання розмірів чарунок таблиці.
height="35" – висота width="50" - ширина
Приклад:
<table>
<tr>
<td height="35" width="50" > 1x1 </td>
<td width="50" > 1x2 </td>
<td width="50" > 1x3 </td>
</tr>
<tr>
<td height="35" width="50" > 2x1 </td>
<td width="50"> 2x2 </td>
<td width="50"> 2x3 </td>
</tr>
</table>
• Вирівнювання інформації в таблицях.
Вирівнювання по ширині.
<table>
<tr>
<td height="35" width="50"> <center> 1x1 </center> </td>
<td width="50"> <Left> 1x2 </Left> </td>
</tr>
Вирівнювання по висоті. valign=
<table>
<tr>
<td height="35" width="50" valign="top"> <center>1x1</center> </td>
<td width="50"> <center>1x2</center> </td>
<td width="50" valign="bottom"> <center>1x3</center> </td>
</tr>
• Рамки в таблицях.
<table border="3" bordercolor="#000000">
V. Закріплення вивченого.
Створення учнями власних веб-сторінок з використанням вивчених тегів.
VІ. Аналіз та підсумки уроку.
Підводяться підсумки уроку та вивченого матеріалу.
