Ашық сабақ "Web бетке мультимедианы енгізу" 10 сынып
Ашық сабақ "Web бетке мультимедианы енгізу" 10 сынып

#1 слайд
1. web-парақшаның түрін өзгерту үшін ішкі және сыртқы
стильдерді пайдалануды көрсетіңіз.
2. CSS қолдану артықшылығы қандай?
3. Қ ұжатқа гиперсілтеме, сурет кірістіру, html -да мәтінді
форматтау мүмкіндіктері
4. HTML- де кесте құру Үй тапсырмасы
1 слайд
1. web-парақшаның түрін өзгерту үшін ішкі және сыртқы стильдерді пайдалануды көрсетіңіз. 2. CSS қолдану артықшылығы қандай? 3. Қ ұжатқа гиперсілтеме, сурет кірістіру, html -да мәтінді форматтау мүмкіндіктері 4. HTML- де кесте құру Үй тапсырмасы
#2 слайд
Саба қтың тақырыбы : WEB -бетке мультимедияны енгізу
Сабақтың мақсаты: 10.4.2.4 веб -бетте мультимедиа нысандарын
енгізу үшін HTML тегтерін қолдану
2 слайд
Саба қтың тақырыбы : WEB -бетке мультимедияны енгізу Сабақтың мақсаты: 10.4.2.4 веб -бетте мультимедиа нысандарын енгізу үшін HTML тегтерін қолдану
#3 слайд
Мультимедиа – Мультимедиа - Multimedia
Аудио – Аудио - Audio
Видео – Бейне - Video
Плагин – Плагин - Plugin
Web дизайнда ғы мультимедиа - бұл web беттерге орналастырылған
аудио және видеороликтер.
Дыбысты қосу. Audio элемент і
Web бетке аудионы қою үшін HTML- де <Audio> жұптық тегін қарастырады:
<AUDIO SRC=“sound.wav”> </AUDIO>
3 слайд
Мультимедиа – Мультимедиа - Multimedia Аудио – Аудио - Audio Видео – Бейне - Video Плагин – Плагин - Plugin Web дизайнда ғы мультимедиа - бұл web беттерге орналастырылған аудио және видеороликтер. Дыбысты қосу. Audio элемент і Web бетке аудионы қою үшін HTML- де <Audio> жұптық тегін қарастырады: <AUDIO SRC=“sound.wav”> </AUDIO>
#4 слайд
Атрибут Сипаттамасы Мысал
autoplay Аудиороликті ойнатады.
Ағымдағы жағдай
бойынша Web –шолушы
мұны жасамайды <AUDIO
SRC=“sound.ogg”
AUTOPLAY> </AUDIO>
controls Web беттегі аудиороликті
ойнатуды басқару
элементтері <AUDIO>
тегі қойылған жерде ғана
шақырады. <AUDIO
SRC=“sound.ogg”
CONTROLS> </AUDIO>
loop Аудиофайлды циклдік
ойнату
muted Аудиофайлды ойнату
кезіңде дыбысты өшіреді
src Аудиофайлдың абсолютті
немесе салыстырмалы
URL адрес ін қамтидыAudio тегі атрибуты
4 слайд
Атрибут Сипаттамасы Мысал autoplay Аудиороликті ойнатады. Ағымдағы жағдай бойынша Web –шолушы мұны жасамайды <AUDIO SRC=“sound.ogg” AUTOPLAY> </AUDIO> controls Web беттегі аудиороликті ойнатуды басқару элементтері <AUDIO> тегі қойылған жерде ғана шақырады. <AUDIO SRC=“sound.ogg” CONTROLS> </AUDIO> loop Аудиофайлды циклдік ойнату muted Аудиофайлды ойнату кезіңде дыбысты өшіреді src Аудиофайлдың абсолютті немесе салыстырмалы URL адрес ін қамтидыAudio тегі атрибуты
#5 слайд
<html>
<head>
<title> Музыка</ title>
</head>
<body>
<h1> Менің сүйікті өлеңім!</ h1>
<p> Дыбысты есту үшін ойнату батырмасын
басыңдар </p>
<AUDIO SRC=“sound.mp3" CONTROLS >
</ AUDIO>
</body>
</html> Компьютерге аудиороликт і кірістіру мысалы
5 слайд
<html> <head> <title> Музыка</ title> </head> <body> <h1> Менің сүйікті өлеңім!</ h1> <p> Дыбысты есту үшін ойнату батырмасын басыңдар </p> <AUDIO SRC=“sound.mp3" CONTROLS > </ AUDIO> </body> </html> Компьютерге аудиороликт і кірістіру мысалы
#6 слайд
<html>
<head>
<title> Музыка</ title>
</head>
<body>
<h1> Музыкалық сүйемелдеу </ h1>
<AUDIO SRC=“sound.mp3” AUTOPLAY>
</ AUDIO>
</body>
</html> Фонды қ дыбыс болатын аудиороликті
кірістіру мысалы
6 слайд
<html> <head> <title> Музыка</ title> </head> <body> <h1> Музыкалық сүйемелдеу </ h1> <AUDIO SRC=“sound.mp3” AUTOPLAY> </ AUDIO> </body> </html> Фонды қ дыбыс болатын аудиороликті кірістіру мысалы
#7 слайд
Видеоны қосу. VIDIO элемент і
Web бетке видеофайлды бетке орналастыру үшін HTML коды:
<video src=“video.ogv”> controls width=“400” height=“300”> </video>
Атрибут Сипаттамасы
autoplay Бетті жүктегеннен кейін автоматты түрде видеофайлды орнату
controls Ойнатуды басқарудың негізгі элементтерін (ойнату, тоқтату, дыбыс
деңгейі) браузерге көрсету
height Видеодеректерді көрсету үшін терезенің биіктігін анықтайды,
мүмкін болатын мәндері: px немесе %
width Видеодеректерді көрсету үшін терезенің енін анықтайды, мүмкін
болатын мәндері: px немесе %
src Видеофайлдың абсолютті немесе салыстырмалы URL адрес ін
қамтиды <VIDEO> тегі атрибуты
7 слайд
Видеоны қосу. VIDIO элемент і Web бетке видеофайлды бетке орналастыру үшін HTML коды: <video src=“video.ogv”> controls width=“400” height=“300”> </video> Атрибут Сипаттамасы autoplay Бетті жүктегеннен кейін автоматты түрде видеофайлды орнату controls Ойнатуды басқарудың негізгі элементтерін (ойнату, тоқтату, дыбыс деңгейі) браузерге көрсету height Видеодеректерді көрсету үшін терезенің биіктігін анықтайды, мүмкін болатын мәндері: px немесе % width Видеодеректерді көрсету үшін терезенің енін анықтайды, мүмкін болатын мәндері: px немесе % src Видеофайлдың абсолютті немесе салыстырмалы URL адрес ін қамтиды <VIDEO> тегі атрибуты
#8 слайд
<html>
<head>
<title> Өзім жасаған видеоролик</ title>
</head>
<body>
<h1> видеоролик </ h1>
<video src="videoplayback.mp4" controls
width="400" height="300"> Фильм</ video>
</body>
</html> Видеоролик кірістіру мысалы
8 слайд
<html> <head> <title> Өзім жасаған видеоролик</ title> </head> <body> <h1> видеоролик </ h1> <video src="videoplayback.mp4" controls width="400" height="300"> Фильм</ video> </body> </html> Видеоролик кірістіру мысалы
#9 слайд
Анимацияларды кірістіру
<Object> элементі браузер бастапқыда түсінбейтін объектілерді қалай
жүктеу және көрсету керектігі туралы хабарлайды. Әдетте мұндай
объектілер браузерге плагин деп аталатын арнайы модульді қосуды
немесе көмекші программаны іске қосуды талап етеді.
<param> тегтері объектіге бастапқы мәндерді орнатуға мүмкіндік береді.
Параметрлері Сипаттамасы
<param name="movie«
value=« .......» > Объектінің бастапқы файлын анықтайды
<param name="quality"
value=“…..”> Объектінің көріну сапасын орнатады, ықтимал мәндер
high( жоғарғы ) medium( орташа ) low( төменгі )
<param name="bgcolor"
value="#FFFFFF"> Объектіні көрсету үшін фонды анықтайды
9 слайд
Анимацияларды кірістіру <Object> элементі браузер бастапқыда түсінбейтін объектілерді қалай жүктеу және көрсету керектігі туралы хабарлайды. Әдетте мұндай объектілер браузерге плагин деп аталатын арнайы модульді қосуды немесе көмекші программаны іске қосуды талап етеді. <param> тегтері объектіге бастапқы мәндерді орнатуға мүмкіндік береді. Параметрлері Сипаттамасы <param name="movie« value=« .......» > Объектінің бастапқы файлын анықтайды <param name="quality" value=“…..”> Объектінің көріну сапасын орнатады, ықтимал мәндер high( жоғарғы ) medium( орташа ) low( төменгі ) <param name="bgcolor" value="#FFFFFF"> Объектіні көрсету үшін фонды анықтайды
#10 слайд
<html>
<head>
<title> Анимация</ title>
</head>
<body>
<h1> Бұл Flash анимация </ h1>
<objects width="480" height="200" align="center"
<param name="movie"
value=" Байтерек. swf">
<param name="quality" value="high”>
<param name="bgcolor" value="#FFFFFF">
<embed src=" Байтерек. swf"
quality="high"
bgcolor="#FFFFFF"
width="480"
height="200"
align="center"
type="application/x-shockwave-flash"
pluginspage="https://www.macromedia.com/go/getflashplayer">
</object>
</body>
</html>
10 слайд
<html> <head> <title> Анимация</ title> </head> <body> <h1> Бұл Flash анимация </ h1> <objects width="480" height="200" align="center" <param name="movie" value=" Байтерек. swf"> <param name="quality" value="high”> <param name="bgcolor" value="#FFFFFF"> <embed src=" Байтерек. swf" quality="high" bgcolor="#FFFFFF" width="480" height="200" align="center" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer"> </object> </body> </html>
#11 слайд
Практикалық оқу тапсырмасы:
Аудио немесе видеофайлды қосу: Абайдың шығармалары
тізіміне қарама-қарсы-Абайдың «көзімнің қарасы» атты әнін
немесе «Абай жолы» фильмін қосыңдар
Дескриптор:
- аудио немесе видео файлды қолдана алады
11 слайд
Практикалық оқу тапсырмасы: Аудио немесе видеофайлды қосу: Абайдың шығармалары тізіміне қарама-қарсы-Абайдың «көзімнің қарасы» атты әнін немесе «Абай жолы» фильмін қосыңдар Дескриптор: - аудио немесе видео файлды қолдана алады
#12 слайд
Үй тапсырмасы: 4.10 WEB -бетке мультимедияны енгізу
Тапсырма № 2, оқулық 187-бет
12 слайд
Үй тапсырмасы: 4.10 WEB -бетке мультимедияны енгізу Тапсырма № 2, оқулық 187-бет
шағым қалдыра аласыз













