Користувач:Нарадка Віталій

Матеріал з ТерноВікі

Поточна версія на 17:46, 2 січня 2013

Про себе

Вчитель фізики, інформатики, креслення, завідувач кабінету фізики Лопушненської ЗОШ І-ІІІ ступенів.
Електронна адреса: nvv20ukr на mail.ru

28 лютого 1984 рік - дата народження.
1990 - 2001 роки - навчання в Лопушненській ЗОШ І-ІІІ ступенів.
2001 - 2006 роки - студент інженерно-педагогічного факультету Тернопільського національного університету ім. В.Гнатюка (спеціальність - вчитель трудового навчання, креслення, ОБЖ і с/г машин).
2006 - 2008 роки - студент факультету післяслядипломної освіти (спеціальність - спеціаліст з інформатики, вчитель інформатики).
З 2007 року - вчитель інформатики, фізики і креслення Лопушненської ЗОШ І-ІІІ ступенів.

Мої інтереси

• Професійні:

• Особисті:

1. Комп'ютерна техніка, автомобілі, сім'я.

Мої календарі

Мій блог

Проекти, в яких беру участь

Мої роботи

Мета уроку.
Навчальна. Навчити учнів вставляти таблиці та графіку до найпростішої web-сторінки. Вивчити основні теги для вставляння таблиць та графіки до web-сторінки.
Розвиваюча. Розвивати практичні навички роботи з ПК, уміння працювати з текстовим редактором, пам'ять. Розвивати навички роботи з клавіатурою.
Виховна. Попередня професійна орієнтація учнів.
Обладнання. Комп’ютери класу. Текстовий редактор. Мережа Інтернет.
Наочність. Комп’ютерна презентація.
Тип уроку. Комбінований.

І. Організаційна частина.(1 хв.)
1. Привітання.
2. Перевірка готовності учнів до уроку.

ІІ. Актуалізація опорних знань.(10 хв.)
1.Учні займають місця за комп’ютерами, повторюють правила техніки безпеки і тоді виконують тести. Тести ґрунтуються на теоретичному матеріалі попередньої теми.
2. Отримані результати тестування записати. А в кінці уроку виставити в журнал.
3. По закінченню тестування учні вимикають монітори і готуються до пояснення нового матеріалу.

ІІІ. Мотивація навчальної діяльності учнів(1 хв.)
Ми на попередніх уроках навчились створювати найпростіші web-сторінки за допомогою HTML-мови та текстового редактора. На яких ми розміщували різну текстову інформацію та створювали різного типу списки. Але такі web-сторінки не дуже красиві, а також нецікаві. Щоб web-сторінка була інформативною і в той же час привабливою і цікавою, в гіпертекстовий документ також вставляють графічні об’єкти і таблиці. Якщо ви в майбутньому захочете стати web-дизайнером, то саме ці елементи можуть забезпечити успіх вашій web-сторінці.

IV. Пояснення нового матеріалу(15 хв.)
Запишіть будь-ласка тему сьогоднішнього уроку «Включення графіки та таблиць до web-сторінки.»
А тепер увімкніть монітори комп’ютерів, тому що вашій увазі буде представлена комп’ютерна презентація до теми уроку. Для кращого засвоєння навчального матеріалу.
У звичайних текстових редакторах таблиці використовують для наочного подання числової чи текстової інформації.
Але в web-документі таблиці призначені не лише для розміщення даних в заданій формі – в мові HTML, а також використовується для розмітки web-сторінок. Позиціювання графічних чи інших об’єктів на екрані.

Його атрибути:
•Width – визначає ширину таблиці(у відсотках 100% - весь екран, у пікселях);
•Height – задає висоту таблиці (у відсотках 100% - весь екран, у пікселях);
•Align – задає спосіб вирівнювання таблиці на сторінці(можливі значення: left, right, center);
•Bgcolor – задає фоновий колір фоновий колір таблиці;
•Border – створює рамку, ширина якої задається у пікселях (border=”2”);
•Bordercolor – назначає колір для рамки.
Структура таблиці задається іншими тегами. Рядки таблиці формуються за допомогою контейнера <tr>…</tr>, а комірки – контейнера <td>…</td>.
Атрибути тегів <tr> i <td>:
•Width – визначає ширину комірки (у відсотках 100% - весь екран, у пікселях);
•Height – задає висоту комірки чи рядка (у відсотках 100% - весь екран, у пікселях);
•Align – задає спосіб вирівнювання вмісту комірки (можливі значення: left, right, center);
•Valign – задає вирівнювання вмісту комірки по вертикалі (допустимі значення: top (вгорі), middle (посередині), bottom (внизу));
•Bgcolor – задає фоновий колір фоновий колір рядка чи комірки;
•Colspan – задає об’єднання комірок по горизонталі (тобто в одному рядку) значення атрибуту рівне числу комірок, які необхідно об’єднати;
•Rowspan – задає об’єднання комірок по вертикалі тобто в одному стовпчику рядках, значення атрибуту рівне числу комірок, які необхідно об’єднати.
Зараз ми розглянемо приклад однієї web-сторінки написаної мовою HTML.
html> <head><title>Таблиця</title></head> <body>

</body> </html> Зараз ви спостерігаєте наочне зображення таблиці в web-документі.
Переглянувши частину презентації, ви побачили і дізнались про основні елементи створення і редагування таблиць в web-документі.
А зараз ми розглянемо спеціальні команди мови HTML, за допомогою яких можливе встановлення графічних об’єктів на web-сторінку. Графічними об’єктами можуть виступати фотографії, картинки, піктограми тощо.
Для додавання графіки на web-сторінку використовується тег <img>.
Обов'язковим є лише параметр src.
Додаткові параметри:
Alt – альтернативний текст (це текст, який виводиться замість картинки, якщо браузер не може прийняти або відобразити графічний файл.
Align – задає місце розташування картинки на екрані.
Width і height – розміри зображення за шириною і висотою в пікселях або відсотках.
Border – для створення рамки навколо зображення.
Наприклад:
<img src=“адреса графічного файлу ”>
За допомогою тега <img> можна також вставляти відеофільми.
Для цього використовується параметр dynsrc
Наприклад:
<img dynsrc=“адреса відеофайлу”>
Зараз ми розглянемо приклад однієї web-сторінки написаної мовою HTML.
<html>
<head><title>Графіка</title></head>
<body bgcolor="yellow">
<img src="C:\Documents and Settings\User\Рабочий стол\fff\12.jpg" align="right" width=500 height=400>
<img dynsrc="C:\Съемный диск (I)\Web\clock.avi" loop="5">
</body>
</html>
Зараз ви спостерігаєте наочне зображення графічного об’єкту в web-документі.
Переглянувши другу частину презентації, ви побачили і дізнались про основні елементи створення і редагування графічних об’єктів в web-документі.

V. Закріплення вивченого матеріалу. (10 хв.)
Шановні учні. Ви проглянувши презентацію, побачили, як можна за допомогою спеціальних команд мови HTML встановлювати в web-сторінку таблиці і графічні об’єкти. Тому я зараз вам пропоную створити web-сторінку, яка буде містити таблицю або графічний об’єкт. (пропоную учням листочки з завданнями).

VI. Підсумок уроку(2 хв.)
Шановні учні, сьогодні ми розглянули дуже цікаву тему. А також я міг спостерігати за тим, як ви засвоїли цей матеріал на основі практичного завдання. Я задоволений результатами вашої роботи.
Якщо в когось є якісь запитання по темі уроку прошу задавати.
(Оцінюю учнів, які вчасно і правильно виконували всі поставленні завдання на уроці).

VII. Домашнє завдання(1 хв.)
Опрацювати опорні конспекти, підготуватись до практичної роботи.