11 клас

12.11.2019 Інструктаж з БЖД. Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках. Практична робота 3.

Мета: Допомогти учням засвоїти факти та основні ідеї використання гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках. Забезпечити якість вивчення нового матеріалу. Формувати вміння виділяти головне, актуалізувати, конспектувати, порівнювати, зіставляти. Забезпечити диференційований підхід. Встановити зв'язки між засвоєними та новими знаннями. Формувати групи компетентностей: соціально-трудову, інформаційну, загальнокультурну, соціально-трудову, уміння вчитися.

Тип уроку: засвоєння нових знань; формування вмінь і навичок;

Обладнання: комп’ютери, підручники, презентація, проектор, Блокнот, Google Chrome.

Хід уроку:

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

Привітання. Перевірка відсутніх.

Хвилина Патріотичного виховання.

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

Виконання тестових завдань. На виконання відводиться 5 хвилини.

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

Розповідь учителя (з демонструванням презентації на екрані «Гіпертекстові, графічні, анімаційні та мультимедійні елементи на веб-сторінках.»)

ПРЕЗЕНТАЦІЯ

Сьогодні на уроці ми з вами будемо вчитись доповнювати наші веб-сторінки мультимедійними елементами на основі мови гіпертекстової розмітки.

Завдання: Створіть веб-сторінку, розмістивши на ній текст і зображення за зразком (мал 4.12). Для цього: 1. Запустіть на виконання текстовий редактор Notepad++. 2. Закрийте всі відкриті вкладки, вибравши кнопку закриття в заголовках вкладок. 3. Уведіть у новій вкладці код, що визначає структуру веб-сторінки. 4. Збережіть веб-сторінку у вашій папці у файлі з іменем мова HTML.html. Для цього: 1 Виконайте Файл ⇒ Зберегти. 2 Виберіть папку, у якій буде збережено файл. 3 Уведіть ім’я файла мова HTML в поле Ім’я файла. 4 Виберіть тип файла Hyper Text Markup Language file в списку Тип файла. 5 Виберіть кнопку Зберегти. Зверніть увагу на зміну кольорів для відображення елементів коду веб-сторінки. 5. Відкрийте файл Розділ 4\Пункт 4.2\вправа 4.2.docx, скопіюйте текст і вставте його у вікні редактора Notepad++ між тегами body. 6. Збережіть оновлений текст, натиснувши Ctrl + S. 7. Перегляньте вигляд веб-сторінки у вікні браузера, виконавши Виконати ⇒ Launch in Chrome. Зверніть увагу на оформлення та структуру вставленого тексту. 8. Установіть блакитний колір фону сторінки. Для цього перейдіть до вікна редактора Notepad++ і впишіть атрибут тегу body bgcolor="lightblue". 9. Збережіть сторінку та перегляньте її відображення у вікні браузера, натиснувши клавішу F5 або вибравши кнопку Перезавантажити цю сторінку . 10. Оформіть перший рядок уставленого тексту як заголовок першого рівня Для цього введіть поруч із текстом теги h1 Мова HTML /h1. 11. Розташуйте заголовок по центру сторін. 12. Збережіть сторінку та перегляньте її відображення у вікні браузера. 13. Оформіть текст Історія мови як заголовок другого рівня, використавши тег h2, розташуйте заголовок по центру сторінки, додавши відповідний атрибут до тегу. 14. Уставте на веб-сторінку зображення з файла Розділ 4\Пункт 4.2\Tim_Berners-Lee.jpg. Для цього: 1 Скопіюйте файл Tim_Berners-Lee jpg у вашу папку. 2 Уведіть до коду веб-сторінки після заголовка Історія мови тег img src="Tim_Berners-Lee.jpg". 3 Установіть ширину зображення 100 пікселів, додавши до тегу атрибут img src="Tim_Berners-Lee.jpg" width="100". 15. Збережіть сторінку та перегляньте її відображення у вікні браузера. 16. Установіть обтікання зображення текстом, додавши до тегу атрибут img src="Tim_Berners-Lee.jpg" width="100" align="left". 17. Оформіть перший абзац тексту, обмеживши його тегами p та /p. 18. Вирівняйте текст абзацу за шириною, додавши до тегу атрибут palign="justify". 19. Оформіть ім’я вченого напівжирним накресленням, обмеживши його тегами b Тімом Бернерс-Лі /b. 20. Зробіть слова HTML Tags гіперпосиланням на веб-сторінку в Інтернеті, дерозміщений указаний текст. Для цього введіть тег a href = "http://info.cern.ch/hypertext/WWW/Mar..." HTML Tags /a. 21. Збережіть сторінку та перегляньте її відображення у вікні браузера Переконайтеся, що гіперпосилання працює коректно. 22. Обмежте тегами другий абзац тексту. Вирівняйте текст абзацу за шириною. 23. Оформіть слова Консорціум Всесвітньої павутини W3C напівжирним накресленням. 24. Оформіть слово HTML5 курсивним накресленням, обмеживши його тегами i HTML5 /i. 25. Уставте після другого абзацу горизонтальну лінію. Для цього після абзацу введіть тег hr. 26. Збережіть сторінку та перегляньте її відображення у вікні браузера. 27. Оформіть текст Основні поняття як заголовок другого рівня, розташуйте заголовок по центру сторінки. 28. Обмежте відповідними тегами два абзаци в розділі Основні поняття. 29. Оформіть слово Тег синім кольором, символами збільшеного розділу. Для цього введіть тег font color="blue" size="5" Тег /font. 30. Оформіть слово Контент синім кольором, символами збільшеного розділу. 31. Збережіть сторінку та перегляньте її відображення у вікні браузера. 32. Закрийте вікна браузера та текстового редактора. Завантажити текст практичного завдання у форматі docx: https://drive.google.com/open?id=1dcl... Завантажити файли-заготовки необхідні для виконання практичного завдання (взято з сайту авторів підручника): https://drive.google.com/open?id=10Fd...

4. Усвідомлення набутих знань й формування вмінь та навичок.

Інструктаж вчителя. Демонстрація готової роботи сайту. Самостійна робота учнів.

5. Фізхвилинка.

Вправа для профілактики короткозорості та порушення зору.

6. Підбиття підсумків уроку.

1.  Опишіть відомі вам параметри зображень.

2.  Яким чином можна зробити зображення гіперпосиланням?

3.  Як налаштувати гіперпосилання для відкриття стороннього ресурсу у новій вкладці?

джерело -сайт

7. Домашнє завдання.

Підготуватися до практичної роботи по темі: створення власного міні сайту на тему «Моя сім'я» засобами HTML. На сайті повинна бути інформація про членів сім'ї на окремих сторінках (які будуть підкріплені фото) і фотогалерея.

Доповнення