Створення таблиць, вставка та оформлення малюнків на Web-сторінках

Мета уроку:

Освітня:

• Сформулювати основні принципи додавання графічних зображень та таблиць у WEB-сторінки;
• Ознайомити учнів із тегом вставки картинок, таблиць;
• Продемонструвати використання цих тегів на конкретних прикладах, застосувати отримані знання практично.

Розвиваюча:

• Розвивати логіку, уміння аналізувати, порівнювати, робити висновки, висловлювати свою думку.

Виховна:

• Виховувати акуратність, уважність, ввічливість.

Обладнання, використана література та засоби наочності: підручник Н. Угрінович "Інформатика та ІКТ" 8 кл., мультимедійна система, інтерактивна дошка, комп'ютери, презентація Microsoft PowerPoint.

План уроку

№	Найменування етапів уроку	Відведений час
1.	Організаційний момент	1 хв.
2.	Актуалізація опорних знань	5 хв.
3.	Повідомлення теми	1 хв.
4.	Вивчення нового матеріалу	20 хв.
5.	Первинне закріплення здобутих знань	15 хв.
6.	Оцінювання діяльності учнів	1 хв.
7.	Повідомлення домашнього завдання	1 хв.
8.	Підбиття підсумків уроку	1 хв.

Хід уроку

Етап уроку	Вирішуване дидактичне завдання	Діяльність вчителя	Діяльність учнів	Результат виконання дидактичного завдання
Орг. момент	Підготовка учнів до роботи на уроці	Привітання, встановлення дисципліни на уроці, визначення відсутніх у класі	Підготовка учнів до навчальної діяльності	Короткочасність організації початку уроку, швидке включення учнів у діалоговий режим
Актуалізація опорних знань	Формування пізнавальної мотивації навчання, культуру спілкування в учнів	Хлопці, дайте відповідь на такі запитання:

1.Як можна змінити шрифт у вашому сайті?

2. Як встановити назву документа, що виводиться в рядку заголовка в програмі-браузері?

3. Як встановити колір тла документа?

4. Як помістити як фон зображення?Відповіді на запитання, які ставлять вчитель.

1. Тег … - змінює розмір, колір та стиль тексту. Атрибути: size – розмір шрифту 1-7. За замовчуванням size=3 color - колір тексту, face - назва шрифту

2. (Тег … містить слова, які з'являються у стоку заголовка браузера

3. Bgcolor – змінює колір тла.

пізнавальну діяльністьПервинне закріплення здобутих знань.Поліпшити засвоєння матеріалу його практичним застосуваннямРозбійтеся парами і сідайте за комп'ютери. На диску ….. у папці …… для вас є завдання, яке необхідно виконати за час, що залишився на цьому уроці.Виконання завдань за ПКЗапам'ятовування виконаної роботи, уміння пояснювати як досягнуто результатуОцінювання діяльності учнів.Об'єктивна оцінка діяльності учнівЗа роботу на уроці... учні одержують... позначки.Запис своєї позначки у щоденникиМотивація до виконання практичних робітПовідомлення домашньогозавданняДомашнє завдання спрямоване на осмислення нового матеріалу, підготовку до подальшого навчанняДіти, відкрийте щоденники, запишіть домашнє завдання: вивчити нові поняття, теги, атрибути, вибрати проект (слайд 20) та знайти матеріал з цієї теми, принести наступний урок.Фіксування у щоденниках домашнє завданняРобота з інструктування у рамках урокуПідбиття підсумків урокуАналіз успішності оволодіння пройденою темоюСьогодні на уроці ви дізналися, як правильно оформляти малюнки та створювати різні таблиці у веб-документі, спробували це на практиці.

Дякую за роботу на уроці, можете бути вільними.Проведення самоаналізу своєї навчальної роботи на уроціКороткість та ємність аналізу, визначення заходів для подальшої роботи

1. Організаційний момент.

Вітаю! Прошу всіх сідати.

2. Актуалізація опорних знань.

Хлопці, дайте відповідь на такі запитання:

– Як можна змінити шрифт у вашому сайті?

…	Напівжирний шрифт	…	Збільшений шрифт
…	Курсив	…	Зменшений шрифт
…	Підкреслення	…	Верхній індекс
…	Закреслений шрифт	…	Нижній індекс

Тег … - змінює розмір, колір та стиль тексту. Атрибути: size – розмір шрифту 1-7. Типово size =3 color - колір тексту, face - назва шрифту

- Як задати назву документа, що виводиться у рядку заголовка у програмі-браузері? (Тег … містить слова, які з'являються в стоку заголовка браузера) - Яквстановити колір тла документа? (Bgcolor – змінює колір фону. Колір задається словом або кодом RGB) - Як помістити як фон зображення? ( Background – поміщає як тло зображення з файлу з картинкою )

3. Повідомлення теми.

Все це ви вже вивчали раніше, а сьогодні ми навчимося правильно оформлювати малюнки на Web-сторінках та створювати таблиці (слайд № 1)

4. Вивчення нового матеріалу.

Сучасні браузери можуть працювати з різними форматами зображень, але найкращі – .GIF, .JPEG. Для фотографій краще використовувати формат JPEG.

Для малюнків та піктограм – GIF (Слайд 2). Тег – вставляння зображень (слайд 3).

Атрибути:

Зазвичай файли з картинками поміщають у ту ж папку, що й сама сторінка чи окрему папку:

2. Alt – визначає альтернативний текст, який з'являється на місці зображення у вікні браузера, якщо виведення зображення неможливе або заблоковано користувачем. Значення alt – рядок тексту, довжиною до 1024 символів. Кавички обов'язкові. Alt= “Собака“ Цей текст також з'явиться у вигляді підказки, коли вказівник миші спрямований на картинку.

3. Align - вирівнювання. Положення зображення краще завжди вказувати явно. (слайд 4)

Значення:

• left, right - по лівому або правому краю.
• top – верхня межа зображення встановлюється на рівні верхнього краю найвищого елемента у рядку.
• middle – середина зображення вирівнюється із серединою рядка.
• bottom – (за замовчуванням) нижній край зображення вирівнюється з основною лінією тексту.

4. border – встановлює або видаляє (для гіперпосилань) рамку навколо зображення (слайд 5)

border = товщина рамки у пікселях. border = 0 -прибрати рамку.

5. height, width – висота і ширина зображення на пікселях. Розміри можуть бути більшими або меншими за реальні розміри зображення. Браузер автоматично масштабує його. Значення можна вказувати у % по відношенню до вікна.

Якщо вказати лише w >

6. Hspace, vspace – задають відстань у пікселях між картинкою та текстом по вертикалі та горизонталі.

Центрування зображення (слайд 6) Вирівняти зображення по центру можна, тільки виділивши його з тексту абзацами, розділу

Можна помістити зображення одночасно по обидва боки документа. У цьому випадку картинки задаються перед текстом (слайд 8).

Ось HTML-код цієї станиці (слайд 9)

Кішки дуже кумедні тварини.

Вони створюють затишок у домі, радують нас.

Особливо приємно дивитись на маленьких кошенят.

---