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

Про матеріал
Мета: Вчити теги додавання графічних, анімаційних та мультимедійних елементів на веб-сторінках. Формувати вміння виділяти головне, актуалізувати, порівнювати. Встановити зв'язки між засвоєними та новими знаннями. Виховувати самостійність, бережливе ставлення до природи, свого здоров’я та комп’ютерної техніки, повагу до традицій українського народу. Формувати групи компетентностей: соціально-трудову, інформаційну, загальнокультурну, соціально-трудову, уміння вчитися. Тип уроку: формування вмінь і навичок Обладнання та наочність: комп’ютери, телефони, презентація, роздатковий матеріал Програмне забезпечення: Блокнот
snow.gif
1.jpg
2.png
3.png
snow.gif
snow2.gif
Індія.jpg
Ірландія.jpg
Італія.jpg
Австралія.jpg
Англія.jpg
Перегляд файлу

Новий Рік в Китаї

в Китаї він називається Святом Весни і відзначається в період між 21 січня і 21 лютого, тоді коли місяць завершує свій повний цикл, і настає молодик. Урочистості тут тривають 15 днів і закінчуються Святом ліхтарів. У заходах беруть участь і дорослі, і діти. З самого ранку люди прибираються в будинку, оскільки вважають, що чистота - це не місце для злих духів. На вулицях в цей час рябить в очах від яскравих святкових вогнів.

pic Ввечері люди збираються в тісному сімейному колі на вечерю, де дарують здебільшого не подарунки, а червоні конвертики з грошима. Навіть дітям і колегам по роботі прийнято підносити такі презенти. Коли стемніє, люди виходять на вулицю, щоб запускати святкові феєрверки. Жителі цієї країни вірять в древню легенду про страшне чудовисько Нянь, яке приходило під Новий рік, щоб з'їсти у людей всю худобу, припаси і зерно, а іноді і дітей. Одного разу люди побачили, як Нянь злякався дитини, одягненого в червоний одяг. І відтоді в це свято прийнято одягати червоне святкове вбрання та розвішувати біля своїх осель червоні ліхтарики, щоб відлякати звіра.

Новий Рік в Індії

pic 

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

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

 

 

 

 

 

 

 

 

 

Новий Рік в Японії

pic 

 

 В Японії існує традиція збиратися всім разом і грати в ігри: ханецукі, настільна гра з фішками сугороку, УТА-Гарут та інші. На вулицях у свято багатолюдно. У крамницях повно новорічних сувенірів: Хама (стріли, що відганяють від будинку злих духів), кумаде (бамбукові граблі на зразок ведмежої лапи), такарабуне (кораблики з рисом для удачі).

Як правило, в свято дітям тут, також як і в Китаї, дарують не гостинці, а гроші, покладені в спеціальний конвертик, званий потібукуро.

 

 

 

 

 

 

Новий Рік у Франції

pic У Франції до дітей приходить не Дід Мороз, а дідок Пер Ноель в шубі, червоному ковпаку і дерев'яних черевиках. Пересувається він на ослику. Діти вірять, що Пер Ноель забирається в димохід і кладе їм гостинці в спеціально приготовлене для цього взуття перед каміном.

Дорослі в цей день танцюють у червоних ковпаках, дуріють, веселяться, жартують, обсипають один одного конфетті.

 

 

 

 

 

 

 

 

 

 

 

 

Новий Рік в Італії



pic У цій країні святкування починається 6 січня. Напередодні свята дітлахи підвішують панчохи біля каміна. Вони сподіваються отримати багато смачних і чудових гостинців. Тільки дарує їх тут не Дід Мороз, а добра і лагідна фея на ім'я Бефана. Діти вірять, що вона прилітає на мітлі вночі, відкриває всі двері в будинку особливим золотим ключиком і наповнює їх панчохи всілякими подарунками. Бефана любить слухняних і вихованих діточок. Той, хто цілий рік лише пустував і пустував, отримає в нагороду тільки чорний вуглик і жменьку попелу.

Італійці під бій годинника викидають з дому старі і непотрібні речі, позбавляючись, таким чином, від проблем старого року. Вони вірять, що нові предмети, придбані натомість викинутих, принесуть їм успіх і щастя. Тут, як і в багатьох країнах, напередодні свята люди дарують один одному подарунки. На столі в цей день у кожній родині обов'язково присутні сочевиця, горіхи і виноград. Для того щоб удача супроводжувала у всіх справах цілий рік, потрібно обов'язково їх з'їсти.

 

Новий Рік в Англії

В Англії у свято Нового Року будинки прикрашають не тільки ялинками, але і гілочками омели. Їх розвішують всюди, навіть на лампи і люстри. Вінком з омели прикрашають і вхідні двері. Вважається, що ця рослина приносить у дім щастя і охороняє його мешканців від хвороб.

pic 

 

 

 

 

 

 

 

 

 

 

 

 

 

Новий Рік в Ірландії

В Ірландії це свято вважається не тільки сімейним. Напередодні Нового Року двері всіх будинків відкриваються навстіж. У будь-який з них може увійти кожен бажаючий і приєднатися до торжества. Гостя обов'язково посадять на найпочесніше місце, поставлять перед ним кращі ласощі та будуть вимовляти тости за «Мир у всьому світі!».

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

pic

 

 

 

 

 

 

Новий Рік на Кубі

pic 

 

Тут в цей день прикрашають хвойне дерево араукарію або навіть просто пальму. Замість шампанського люди п'ють ром, розбавляючи його соком апельсина, лікером і додаючи лід. На Кубі існує цікава традиція напередодні святкування наповнювати водою всі відра, глечики та тази в будинку. Опівночі цю воду виливають з вікон. Вважається, що таким чином люди захищають свій будинок від негараздів і нещасть. Поки годинник не встиг пробити 12, кожен повинен обов'язково встигнути з'їсти дванадцять виноградин і загадати бажання. Тоді можна бути впевненим у тому, що весь рік будуть супроводжувати удача, мир та процвітання. Свій Дід Мороз тут теж є. Тільки він не один. Їх на Кубі цілих три: Вальтасар, Гаспар і Мельхіор.

 

 

 

 

 

 

 

 

 

Новий Рік в Австралії

pic 

Австралійці відзначають це свято одними з перших на планеті. Святкування тут, як правило, проходить під відкритим небом. Пляжні вечірки, гучні пісні, веселі танці, фантастичні феєрверки, музичні фестивалі за участю світових зірок: все це можна побачити в Мельбурні та Сіднеї напередодні Нового року. Санта Клаус в червоному ковпаку і штанях на дошці для серфінгу на пляжі. Побачити це можна тільки в Австралії.

 

Китай.jpg
Куба.jpg
Франція.jpg
Японія.jpg
Перегляд файлу

IMAGE.jpg

image.JPG

image.jpg

IMAGE.JPG

Зміст слайдів
Номер слайду 1

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

Номер слайду 2

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

Номер слайду 3

Kahoot.it

Номер слайду 4

Серед всіх розширень файлів обрати графічні .php.png .flac .gif .htm .avi .bmp .jpg .mp3 .tiff .rar .txt .zip .html .bmp .wma .wmv .jpeg .docx .pptx

Номер слайду 5

Поєднати атрибут з його значенням. Height. Width. Висота. Ширина. Внизу. Bottom. Top. Ліворуч. По центру Left. Right Праворуч. Middle Вгорі

Номер слайду 6

Україна. Новий рік – одне з найдавніших і найпопулярніших календарних свят. Незважаючи на те, що Новий рік - одне з небагатьох свят, що об`єднує все людство, за всіх часів у різних народів існували й існують свої традиції зустрічі Нового року та своя святкова атрибутика. В Україні традиція новорічного святкування має особливо непросту та тривалу історію: наші прадіди у різний час святкували новий рік і в березні, і у вересні, і у січні – та й тепер 2 рази.

Перегляд файлу

Прізвище, ім’я 1___________________

Прізвище, ім’я 2___________________

 

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

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

 

Вправа 1. Тест Kahoot

Вправа 2.  Серед всіх розширень файлів обрери графічні (підкреслити)

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

 

Вправа 3.

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

 

Width

 

Вгорі

Height

 

Висота

Bottom

 

Внизу

Middle

 

Ліворуч

Top

 

По центру

Right

 

Праворуч

Left

 

Ширина

 

Практичне завдання

Працюючи за комп’ютером будь уважним та виконуй правила безпеки життєдіяльності !!!

Завдання: Створи веб-сторінку мовою HTML  про святкування Різдва та Нового року в одій з країн Європи або Світу.

Викорустовуй теги мови розмітки іпертексту, які вже знаєш.

Для  більш гармонійного поєднання всіх елементів веб-сторінки використовуй атрибути тексту та зображень.

 

Атрибути зображень і їх аргументи.
Атрибут АLIGN Визначає положення зображення щодо оточуючого його тексту. Можливі значення аргументу – [„left” | „right” | „top” | „middle”| „bottom”. 

ALIGN=”left” визначає зображення, що огинається текстом. Зображення розташовується уздовж лівої межі документа, а подальші рядки тексту огинають його справа.
ALIGN=”right” визначає зображення, що огинається текстом. Зображення розташовується уздовж правої межі документа, а подальші рядки тексту огинають його зліва.

ALIGN=”top” вирівнює верх зображення по верхньому краю найвищого елементу в рядку навколишнього тексту точно так, як і при використанні стандартного набору атрибутів.

ALIGN=”middle” вирівнює центр зображення по базовій лінії рядка навколишнього тексту точно так, як і при використанні стандартного набору атрибутів.

ALIGN=”bottom” вирівнює нижній край зображення по базовій лінії рядка навколишнього тексту точно так, як і при використанні стандартного набору атрибутів.

Атрибут BORDER
Цілочисельне значення аргументу визначає товщину рамки навколо зображення. Якщо значення рівне нулю, рамка відсутня. Щоб не вводити користувачів в оману, не варто задіювати BORDER=0 в зображеннях, які є частиною елементу якоря, оскільки малюнки, вживані як гіперпосилання, зазвичай виділяються кольоровою рамкою. 

Атрибут HSPACE
Цілочисельне значення цього атрибуту задає горизонтальну відстань між вертикальною межею сторінки і зображенням, а також між зображенням і огинаючим його текстом. 

Атрибут VSPACE
Цілочисельне значення цього атрибуту задає вертикальну відстань між рядками тексту і зображенням. 

Атрибути WIDTH і HEIGHT
Обидва атрибути задають цілочисельні значення розмірів зображення по горизонталі і по вертикалі відповідно. Це дозволяє зменшити час завантаження сторінки з графікою. Браузер відразу відводить рамку для зображення і продовжує завантажувати текст на сторінку. Поки завантажується графіка, користувач може почати читати текст. Визначити розмір зображення неважко, для цього досить скористатися будь-якою програмою перегляду графічних файлів, наприклад ACDSee або графічним редактором Corel PhotoPaint або Adobe Photoshop. Відкрийте файл в графічному редакторові і визначте розмір картинки в пікселах. У тегі зображення слід вказати ширину і висоту картинки. <IMG SRC=”image.gif” ALT=”зображення” WIDTH=”100” HEIGHT=”200” HSPACE=”10” VSPACE=”10” BORDER=”2” ALIGN=”left”>.

 

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

<BODY background="phone.gif">

 

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

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

Або

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

 

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

вставляем аудиоролик

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

код аудио ролика с элементами управления

 

Оцінювання веб-сторінки:

  1. Правильне написання та розташування тегів голови, назви та тіла веб-сторінки
  2.  Розміщення на веб-сторінці графічних елементів
  3. Застосування атрибутів до графічних елементів
  4. Розміщення на веб-сторінці звукового файлу
  5. Розміщення на веб-сторінці анімаційного зображення

 

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

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

 

 

1

 

Перегляд файлу

 

<img src="image.jpg">

 

 

< img dynsrc="URL">.

або

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

 

<audio src="sound.mp3">

 

 

zip
Додано
12 січня 2020
Переглядів
2544
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку