Графічні, анімаційні та мультимедійні елементи на веб-сторінках

Урок №

Клас 10

Дата 10.12.2019

Графічні, анімаційні та мультимедійні елементи на веб-сторінках

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

Тип уроку: формування вмінь і навичок

Обладнання та наочність: комп’ютери, телефони, презентація, роздатковий матеріал

Програмне забезпечення: Блокнот

Хід уроку

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

"До успіху"

Усміхніться один одному, подумки побажайте успіхів на цілий день. Для того, щоб впоратися на уроці з завданнями, будьте старанними і слухняними. Завдання наші такі

• Не просто слухати, а чути.
• Не просто дивитися, а бачити.
• Не просто відповідати, а міркувати.
• Дружно і плідно працювати.

2. Перевірка домашнього завдання

Виконані роботи  надіслані на електронну пошту вчителя. Короткий аналіз робіт , виділення кращої  роботи

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

Робота на онлайн-сервісі Kahoot
 

4. Повідомлення теми уроку, мотивація навчання

Ви вже вмієте створювати текстову веб-сторінку, зберігати її та запускати за допомогою веб-браузера. Але текстова сторінка навряд приверне до себе увагу гостя вашого сайту. Як ви гадаєте, як зробити веб-сторінку привабливою для відвідувачів? (застосовувати колів, додавати зображення, відео, музику)

На цьому уроці ви станете справжніми адміністраторами сучасних сайтів, навчитесь додавати на веб-сторінки графічні зображення , анімаційні елементи та об’єкти мультимедіа

5. Засвоєння нових знань
   1.                    Вступне слово вчителя

Графіка завжди переважала над іншими видами представлення інформації. Вона ж не буде виключенням і в сфері веб-програмування.

Включення картинок у веб-сторінку завжди приводить до успішних проектів або просто до гарного і красивого інтерфейсу сайту.

5.2 Робота в парах

Серед всіх розширень файлів обрати графічні

.php   .png     .flac    .gif    .htm   .avi   .bmp    .jpg   .mp3    .tiff    .rar    .txt    .html    .zip    .bmp    .wma    .wmv    .jpeg    .docx     .pptx   

3.                    Робота за картками (взаємоперевірка)

Поєднати атрибут з його значенням

4.                    Графічні, анімаційні та мультимедійні елементи на веб-сторінках

За допомогою якої ж команди можна помістити графічний елемент на html-сторінку?

Усі картинки, фотографічні знімки, ілюстрації, графіки, схеми вставляються в документ за допомогою такого тега, який не вимагає закриваючої частини:

<img src="image.jpg">

Де «image.jpg» - це власне картинка-об’єкт з її іменем і розширенням.

Уся інформація, розташована між лапками є посиланням (тобто, шляхом до картинки).

Порівняй!

Також важливо знати, що IMAGE.jpg, image.JPG, image.jpg і IMAGE.JPG - це різні імена файлів і регістр імен завжди потрібно враховувати.

Після вставки картинки виникає питання: що потрібно зробити, аби увесь текст розташовувався поруч із картинкою, а не тільки один його рядок?

Згадаємо про атрибут ALIGN", який відповідає за вирівнювання і використовується з багатьма іншими тегами.

Атрибут «align» є і у картинок:

<img src="image.jpg" align="left">

У такому випадку картинка буде притиснута до лівого краю екрана, а текст буде обтікати її праворуч.

Щоб розмістити картинку праворуч, а текст обтікав її ліворуч, треба прописати Right":

<img src="image.jpg" align="right">

Але це ще не всі параметри. Текст може розташовуватися:

внизу картинки - <img src="image.jpg" align="bottom">

посередині - <img src="image.jpg" align="middle">

вгорі - <img src="image.jpg" align="top">

Крім параметра «ALIGN» для тега < img > є ще кілька атрибутів:

VSPACE - визначає відстань між текстом і малюнком по вертикалі; задається в пікселях.

Наприклад: <img src="image.jpg" vspace="20">, де 20 – це кількість пікселів екрана монітора.

HSPACE - задає відстань між текстом і малюнком по горизонталі. Відстань задається теж у пікселях.

Наприклад: <img src="image.jpg" hspace="30">.

WIDTH - ширина самої картинки в пікселях. Якщо ширину не задавати, то вона буде дорівнювати реальній ширині картинки.

HEIGHT - висота самої картинки в пікселях. Якщо висоту не задавати, то вона буде дорівнювати реальній висоті картинки.

За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття web-сторінки:

<IMG DYNSRC=" адреса відеофайлу">.

Або

<video><source src="URL"></video>

Для того, щоб задати фонове зображення додаємо атрибут background у <BODY>

<BODY background="phone.gif">

Тег «audio» створює на сторінці блоковий елемент. За замовчуванням браузер не буде відтворює аудіоролик. Що б він це зробив, в тезі audio необхідно вказати особливий атрибут autoplay. Особливий, бо він не має значення. Досить одного присутності цього атрибута в тезі, щоб він почав діяти.

За замовчуванням аудіоролик ніяк не відображається на web-сторінці. Але якщо в тезі «audio» поставити атрибут без значення controls, браузер виведе в тому місці веб-сторінки, де проставлено тег audio, елементи управління відтворенням аудиоролика. Вони включають кнопку запуску і припинення відтворення, шкалу відтворення і регулятор гучності:

6. Узагальнення та систематизація засвоєних знань
   1.                    Інструктаж з БЖД (взаємоповторення правил)
   2.                    Інструктаж щодо проведення практичної частини уроку

• Чи помітили ви в кабінеті щось незвичне? (ялинка)
• Як ви гадаєте, що тут робить ялинка? (це новорічна традиція в Україні)
• Чим загрожує така традиція екології планети? Державне агентство лісових ресурсів цього року планує продати 500 тисяч ялинок. Цього року на встановлення головної ялинки на Майдані Незалежності в столиці планується черговий раз знищити 250-300 маленьких ялинок.
• Чим можна замінити ялинку, не порушуючи традицій? (штучна ялинка, зимові букети, жива ялинка з подальшою висадкою у грунт)
• Чи знаєте ви, як святкують Різдво та Новий рік в інших країнах Європи та світу.
• Сьогодні ви створите веб-сторінки про традиції святкування Різдва та Нового року в інших країнах Європи та світу. В подальшому ці сторінки ми зможемо поєднати в єдиний веб-сайт.
  3.                    Практична діяльність учнів
  4.                    Рефлексія

7. Оцінювання учнів

Оцінювання роботи учнів, демонстрація найкращих робіт

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

Створити веб-сторінку (письмово або програмно) з відеофайлом

9. Підсумок уроку

Минулого уроку ми з вами створювали та заповнювали таблицю

Що в цій таблиця ви зможете змінити?

Я бажаю вам успіхів у всіх нових починаннях

Ви сьогодні

• Не просто слухали, а чули.
• Не просто дивилися, а бачили.
• Не просто відповідали, а міркували.
• Дружно і плідно працювали.