HTML-ДЕ МУЛЬТИМЕДИАНЫ ЕНГІЗУ

Сабақтың тақырыбы

HTML-ДЕ МУЛЬТИМЕДИАНЫ ЕНГІЗУ

Оқу бағдарламасына сәйкес оқыту мақсаты:

10.4.2.4 Web-бетке мультимедиа нысандарын кірістіру үшін HTML тегтерін қолдану

Сабақтың мақсаты:

Барлық оқушы: HTML-де мультимедианы қолдану тегтері туралы біледі

Көпшілік оқушы: Дыбыс пен бейнені енгізу тегтерін анықтайды

Кейбір оқушы: Web бетте мультимедианы қолдана алады

Комплимент әдісі

Оқушылар бір біріне комплимент айтады

Өткен сабақты пысықтау мақсатында оқушылар тесттерге жауап береді

​Тапсырманы бағалауға арналған дискрипторлар:	​Балл
​2 дұрыс жауап	​0,5
​3 дұрыс жауап	1​
4 дұрыс жауап	2​
5 дұрыс жауап	2,5​

Multiple Choice

Селектор (Selector)

• font normal

• HTML

• color: blue

• сұрыптау, таңдау

Multiple Choice

Каскадтық стильді кестелер терминін (CSS) қай жылы еңгізді

• 1994

• 1992

• 2000

• 1996

Multiple Choice

Селектор түрлері

• стиль бойынша, мәнмәтін бойына

• сынып бойынша, тіл бойына

• түр бойынша, мәнмәтін бойына

• сынып бойынша, мәнмәтін бойына

Multiple Choice

веб беттің фондық түсі көкке, ал мәтін түсі аққа өзгереді

• body{background:blue; color: white;}

• {background:blue; color: white;}

• body{background:blue; color: red;}

• body{font:blue; color: white;}

Multiple Choice

Интернеттің кез келген бөлігіне кіруге болатын web-контент

• браузер

• сурет

• гиперсілтеме

• видео

Жаңа сабақ

​Дыбыстық фон (элемент BGSOUND)

      Фондық режимде дыбыстық жазбаны қосу – бетті дыбыстандырудың ең қарапайым жолы. Әдетте бұл тәсілді сәлемдесу немесе музыкалық сүйемелдеу үшін пайдаланады. Пайдаланушы сіздің веб бетіңізді жүктеген сәтте фондық дыбыс автоматты түрде қосылады.

      Дыбыстық файлды фондық режимде қосу үшін BGSOUND элементі және оның атриубттары қолданылады:

-src – дыбыстық файл адресін белгілейді. Мысалы, <BGSOUND src=“duet.mid”> тегі duet.mid файлының бір реттік жүргізілуін белгілейді.

-loop – файл неше рет ойнатылатындығын анықтайды, Мысалы, <BGSOUND src=“duet.mid” loop=5> тегі duet.mid файлы 5 рет ойналатындығын білдіреді. Егер loop=”infinite” болса, дыбыс пайдаланушы веб бетте болған бүкіл уақыт бойы ойнайды.

​Аудио мен бейнені (видео) енгізу (EMBED элементі)

       Браузерлер AU, .MID/.MIDI және .WAV форматтарындағы дыбыстық файлдардың ойналуын қолдайды. <a href=“аудио файл URL”>сипаттама </a>

Web-бетке аудиоплейер орнатылған болса ғана дыбысты басқаруға болады. Ол беттің кез келген жерінде BODY элементінің ішінде орналасқан <EMBED> тегінің көмегімен жасалады.

     Көптеген браузерлер .MPG/.MPEG, .QT және .AVI жалпы пайдаланылатын форматтарда бейне файлдарды көруге мүмкіндік береді, ол үшін арнайы гиперсілетемелер жасалынады:

<a href=“бейнефайл URL”>сипаттама</a>

Сондай-ақ Web-беттегі бейнені орнатудың ең қарапайым тәсілі, бейнефайлды <EMBED> тегінің көмегімен орналастыру болып табылады. Мысалы, егер құжатқа video.avi атты бейнені енгізу керек болса, онда <EMBED src=“video.avi”> тегін жазу қажет. Бейнефайл енгізілген жағдайда браузер терезесінде бейнеклиптің ойнауы жүзеге асады.

«Миға шабуыл» әдісі арқылы оқушыларға сұрақтар қойылады  мұғаліммен бірлесіп талдайды.

• Web-беттегі мультимедиа дегеніміз не?

• Web-беттегі мультимедианың пайдасы

• Web-бет қандай бейне файлдарды көрсете алады?

• src тегінің қызметі?

• Loop тегінің қызметі?

• Бейне файлды орнату тегі?

Бағалау: Оқушылар өзін-өзі бағалайды

Кім жылдам әдісі

Практикалық жұмыс

Веб-беттен дыбыстық файлдарға сілтеме жасап аш және видео орналастыр. Ол үшін төмендегі қатарларды Блокнот программасында теріп, веб-бетті «index.html» атауымен сақта. «index.html» файлын ашқанда төмендегі веб-бет пайда болады. Дыбыстың пиктограммасын енгіз.

Тапсырманы орындау мақсаты:

1. Видео файлды  EMBED   элементін веб-бетке енгізуді үйренеміз. <EMBED src="видео файл атауы ">

2. Гиперсілетемелер        арқылы дыбыстық          және бейнефайлдарды ашуды үйренеміз.

   <a href ="аудио файл URL"> сипаттама </a>

​Тапсырманы бағалауға арналған дискрипторлар:

​	​
​ Оқушылар блокнот бағдарламасын жүктеп веб бет тақырыбын, өлшемдерін және бейне, дыбыстарды HTML тегтері арқылы еңгізеді.	​2
​ Веб бет тақырыбының орналасуын, өлшемдерін және бейненің бойы, енін көрсете алады. Қатесіз жазылған веб бетті index.html түрінде сақтап браузермен жүктейді.	​3
​ Қатесіз жазылған веб бетке өзгерістер еңгізе алады. Мысалы: фон түсін, бейнефайлды ауыстырады және өлшемдерін өзгерте алады.	​5

<html> <title>Дыбыстық және бейнефайлдарды кірістіру</title> <body bgcolor=aqua> <H2 align=center> Жасанды интеллект </H2> "Жасанды интеллект" сөзін алғаш рет 1956 жылы Дартмут университетінде өткен конференциясының преамбуласында Джон Маккарти қолданған. <p align=center> <EMBED src="Intel.mp4" width=670 height=470> </p> <H2 align=center><B>Жел дауысы:</B></H2> <A href="jel.mp3"><p align=center><img src="play.png" width=60 height=60> </A> </body> </html>

​Практикалық жұмыс

«Ойлан, бірік, бөліс» әдісі:

Екі оқушы шығып практикалық жұмыста орындалған веб беттің тегтерін талдайды.

Бағалау: Бас бармақ әдісі арқылы оқушылар бірін бірі бағалайды

Сабақты пысықтау мақсатында quiziz платформасы арқылы тест тапсырмасын алу

​Тапсырманы бағалауға арналған дискрипторлар:	​Балл
​2 дұрыс жауап	​0,5
​3 дұрыс жауап	1​
4 дұрыс жауап	2​
5 дұрыс жауап	2,5​

Multiple Choice

Бейнефайлды кірістіру үшін қолданылатын элемент?

• bgcolor

• EMBED

• title

• QUALITY

Multiple Choice

Дыбыстың неше рет ойнатылатындығын анықтайтын тег?

• loop

• height

• right

• true

Multiple Choice

Дыбыстық фонды кірістіру үшін қандай элемент қолданылады?

• bgcolor

• embed

• sound

• bgsound

Multiple Choice

Мултимедиа файлының сапасын көрсететін тег?

• sound

• quality

• infinity

• red

Multiple Choice

Аудио форматтарды көрсет

• mpeg, avi

• mp4, qt

• midi, mp3

• au, web

Кері байланыс

Тик ток әдісі

• «Ұнады»

• «Есімде сақтадым»

• «Айтарым бар»

Poll

Кері байланыс: Тик ток әдісі

• «Ұнады»

• «Есімде сақтадым»

• «Айтарым бар»

Үй тапсырмасы

Мултимедианы пайдаланып 

web бет жасау