Мультимедиа енгізу 10-сынып
Мультимедиа енгізу 10-сынып

#1 слайд
18.02.2025
Мультимедианыенг
ізу
1 слайд
18.02.2025 Мультимедианыенг ізу
#2 слайд
Сабақтың тақырыбы:
§46-47.Мультимедианы енгізу
Сабақтың мақсаты:
10.4.2.4 веб -бетте мультимедиа
нысандарын енгізу үшін HTML тегтерін
қолдану
2 слайд
Сабақтың тақырыбы: §46-47.Мультимедианы енгізу Сабақтың мақсаты: 10.4.2.4 веб -бетте мультимедиа нысандарын енгізу үшін HTML тегтерін қолдану
#3 слайд
Мультимедиа
3 слайд
Мультимедиа
#4 слайд
– , ,
Мультимедиа мәтін графика
, , ,
анимация сандықбейнелерді бейне
дыбыссияқтыдеректертипін
, , ,
енгізуге өңдеуге сақтауға беруге
жәнебейнелеугемүмкіндікберетін
.
технологияларжиынтығы
4 слайд
– , , Мультимедиа мәтін графика , , , анимация сандықбейнелерді бейне дыбыссияқтыдеректертипін , , , енгізуге өңдеуге сақтауға беруге жәнебейнелеугемүмкіндікберетін . технологияларжиынтығы
#5 слайд
• :
Меңгерілетінбілім
• ;
мультимедиа
• ;
мультимедиалықтегтердіңтүрлері
• web-
беткеаудиожәнебейне
файлдардыорналастыру
5 слайд
• : Меңгерілетінбілім • ; мультимедиа • ; мультимедиалықтегтердіңтүрлері • web- беткеаудиожәнебейне файлдардыорналастыру
#6 слайд
. .
Фреймдер Фрейм құрылымы
HTML
тілі браузер программасы
терезелерін бірнеше бөлікке бөліп тастау мүмкіндігін береді және
.
олардың әр қайсысында жеке құжаттар бейнеленеді Осындай
.
бөліктерді фрейм деп атаймыз
1)
Фреймдерді құру үшін
HTML- ,
дің ерекше құжаты пайдаланылады
.
оның құрылымы кәдімгі құжаттардан бөлек болады Осындай
« » ,
құжаттарда құжат денесінің бөлімдері болмайды ол шын мәнінде
.
қандай да болсын мәтінде мүлде болмайды Оның орнына бұл
<
құжаттарда
F R A ME S E T > < /
және
F R A ME S E T >
.
тегтерінің арасында орналасқан фреймдер болады
2) <FRAMESET> ,
тегі терезелерді бөлу әдістерін анықтайтын
:
атрибуттар
• COLS =
атрибуттарын пайдаланған уақытта терезелер вертикаль
;
сызықтармен
• ROWS =
атрибутын пайдаланған уақытта горизонталь сызықтар
.
мен бөліктерге бөлінеді
6 слайд
. . Фреймдер Фрейм құрылымы HTML тілі браузер программасы терезелерін бірнеше бөлікке бөліп тастау мүмкіндігін береді және . олардың әр қайсысында жеке құжаттар бейнеленеді Осындай . бөліктерді фрейм деп атаймыз 1) Фреймдерді құру үшін HTML- , дің ерекше құжаты пайдаланылады . оның құрылымы кәдімгі құжаттардан бөлек болады Осындай « » , құжаттарда құжат денесінің бөлімдері болмайды ол шын мәнінде . қандай да болсын мәтінде мүлде болмайды Оның орнына бұл < құжаттарда F R A ME S E T > < / және F R A ME S E T > . тегтерінің арасында орналасқан фреймдер болады 2) <FRAMESET> , тегі терезелерді бөлу әдістерін анықтайтын : атрибуттар • COLS = атрибуттарын пайдаланған уақытта терезелер вертикаль ; сызықтармен • ROWS = атрибутын пайдаланған уақытта горизонталь сызықтар . мен бөліктерге бөлінеді
#7 слайд
Мультимедиа – Мультимедиа - Multimedia
Аудио – Аудио - Audio
Видео – Бейне - Video
Плагин – Плагин - Plugin
Web дизайндағы мультимедиа - бұл web беттерге орналастырылған
аудио және видеороликтер.
Дыбысты қосу. Audio элементі
Web бетке аудионы қою үшін HTML-де <Audio> жұптық тегін қарастырады:
<AUDIO SRC=“sound.wav”> </AUDIO>
7 слайд
Мультимедиа – Мультимедиа - Multimedia Аудио – Аудио - Audio Видео – Бейне - Video Плагин – Плагин - Plugin Web дизайндағы мультимедиа - бұл web беттерге орналастырылған аудио және видеороликтер. Дыбысты қосу. Audio элементі Web бетке аудионы қою үшін HTML-де <Audio> жұптық тегін қарастырады: <AUDIO SRC=“sound.wav”> </AUDIO>
#8 слайд
Атрибут Сипаттамасы Мысал
autoplay Аудиороликті ойнатады.
Ағымдағы жағдай бойынша
Web –шолушы мұны
жасамайды
<AUDIO SRC=“sound.ogg”
AUTOPLAY> </AUDIO>
controls Web беттегі аудиороликті
ойнатуды басқару элементтері
<AUDIO> тегі қойылған жерде
ғана шақырады.
<AUDIO SRC=“sound.ogg”
CONTROLS> </AUDIO>
loop Аудиофайлды циклдік ойнату
muted Аудиофайлды ойнату кезіңде
дыбысты өшіреді
src Аудиофайлдың абсолютті
немесе салыстырмалы URL
адресін қамтиды
Audio тегі атрибуты
8 слайд
Атрибут Сипаттамасы Мысал autoplay Аудиороликті ойнатады. Ағымдағы жағдай бойынша Web –шолушы мұны жасамайды <AUDIO SRC=“sound.ogg” AUTOPLAY> </AUDIO> controls Web беттегі аудиороликті ойнатуды басқару элементтері <AUDIO> тегі қойылған жерде ғана шақырады. <AUDIO SRC=“sound.ogg” CONTROLS> </AUDIO> loop Аудиофайлды циклдік ойнату muted Аудиофайлды ойнату кезіңде дыбысты өшіреді src Аудиофайлдың абсолютті немесе салыстырмалы URL адресін қамтиды Audio тегі атрибуты
#9 слайд
<html>
<head>
<title>Музыка</title>
</head>
<body>
<h1> Менің сүйікті өлеңім!</h1>
<p> Дыбысты есту үшін ойнату батырмасын
басыңдар</p>
<AUDIO SRC=“sound.mp3" CONTROLS >
</AUDIO>
</body>
</html>
Web параққа аудиороликті кірістіру мысалы
9 слайд
<html> <head> <title>Музыка</title> </head> <body> <h1> Менің сүйікті өлеңім!</h1> <p> Дыбысты есту үшін ойнату батырмасын басыңдар</p> <AUDIO SRC=“sound.mp3" CONTROLS > </AUDIO> </body> </html> Web параққа аудиороликті кірістіру мысалы
#10 слайд
<img
src="picture.jpg">
Web параққа графиканы кірістіру мысалы
10 слайд
<img src="picture.jpg"> Web параққа графиканы кірістіру мысалы
#11 слайд
Видеоны қосу. VIDEO элементі
Web бетке видеофайлды орналастыру үшін HTML коды:
<video src=“video.ogv”> controls width=“400” height=“300”> </video>
Атрибут Сипаттамасы
autoplay Бетті жүктегеннен кейін автоматты түрде видеофайлды орнату
controls Ойнатуды басқарудың негізгі элементтерін (ойнату, тоқтату, дыбыс
деңгейі) браузерге көрсету
height Видеодеректерді көрсету үшін терезенің биіктігін анықтайды, мүмкін
болатын мәндері: px немесе %
width Видеодеректерді көрсету үшін терезенің енін анықтайды, мүмкін
болатын мәндері: px немесе %
src Видеофайлдың абсолютті немесе салыстырмалы URL адресін қамтиды
<VIDEO> тегі атрибуты
11 слайд
Видеоны қосу. VIDEO элементі Web бетке видеофайлды орналастыру үшін HTML коды: <video src=“video.ogv”> controls width=“400” height=“300”> </video> Атрибут Сипаттамасы autoplay Бетті жүктегеннен кейін автоматты түрде видеофайлды орнату controls Ойнатуды басқарудың негізгі элементтерін (ойнату, тоқтату, дыбыс деңгейі) браузерге көрсету height Видеодеректерді көрсету үшін терезенің биіктігін анықтайды, мүмкін болатын мәндері: px немесе % width Видеодеректерді көрсету үшін терезенің енін анықтайды, мүмкін болатын мәндері: px немесе % src Видеофайлдың абсолютті немесе салыстырмалы URL адресін қамтиды <VIDEO> тегі атрибуты
#12 слайд
<html>
<head>
<title>Өзім жасаған видеоролик</title>
</head>
<body>
<h1> видеоролик </h1>
<video src="videoplayback.mp4" controls
width="400" height="300"> Фильм</video>
</body>
</html>
Видеоролик кірістіру мысалы
12 слайд
<html> <head> <title>Өзім жасаған видеоролик</title> </head> <body> <h1> видеоролик </h1> <video src="videoplayback.mp4" controls width="400" height="300"> Фильм</video> </body> </html> Видеоролик кірістіру мысалы
#13 слайд
Анимацияларды кірістіру
<Object> элементі браузер бастапқыда түсінбейтін объектілерді қалай
жүктеу және көрсету керектігі туралы хабарлайды. Әдетте мұндай
объектілер браузерге плагин деп аталатын арнайы модульді қосуды
немесе көмекші программаны іске қосуды талап етеді.
<param> тегтері объектіге бастапқы мәндерді орнатуға мүмкіндік береді.
Параметрлері Сипаттамасы
<param name="movie«
value=«.......»>
Объектінің бастапқы файлын анықтайды
<param name="quality"
value=“…..”>
Объектінің көріну сапасын орнатады, ықтимал мәндер
high(жоғарғы) medium(орташа) low(төменгі)
<param name="bgcolor"
value="#FFFFFF">
Объектіні көрсету үшін фонды анықтайды
13 слайд
Анимацияларды кірістіру <Object> элементі браузер бастапқыда түсінбейтін объектілерді қалай жүктеу және көрсету керектігі туралы хабарлайды. Әдетте мұндай объектілер браузерге плагин деп аталатын арнайы модульді қосуды немесе көмекші программаны іске қосуды талап етеді. <param> тегтері объектіге бастапқы мәндерді орнатуға мүмкіндік береді. Параметрлері Сипаттамасы <param name="movie« value=«.......»> Объектінің бастапқы файлын анықтайды <param name="quality" value=“…..”> Объектінің көріну сапасын орнатады, ықтимал мәндер high(жоғарғы) medium(орташа) low(төменгі) <param name="bgcolor" value="#FFFFFF"> Объектіні көрсету үшін фонды анықтайды
#14 слайд
<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>
14 слайд
<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>
#15 слайд
Практикалық оқу тапсырмасы:
Аудио немесе видеофайлды қосу: Абайдың шығармалары
тізіміне қарама-қарсы-Абайдың «көзімнің қарасы» атты әнін
немесе «Абай жолы» фильмін қосыңдар
Дескриптор:
- аудио немесе видео файлды қолдана алады
15 слайд
Практикалық оқу тапсырмасы: Аудио немесе видеофайлды қосу: Абайдың шығармалары тізіміне қарама-қарсы-Абайдың «көзімнің қарасы» атты әнін немесе «Абай жолы» фильмін қосыңдар Дескриптор: - аудио немесе видео файлды қолдана алады
#16 слайд
16 слайд
#17 слайд
1. Сілтеме енгізу үшін қай тег қажет?
a)<AREA> </AREA>
b)<A> </A>
c)<MAP> </MAP>
d)<OL> </OL>
2. Сілтеме қайда баруын көрсету үшін <а> </а> тегінің қай атрибуты
қолданылады?
e)Img
f)Src
g)Color
h)Href
3. Веб бетке сурет қою үшін қандай тег қолданылады?
i)<IMG>
j)<HTML> </HTML>
k)<A> </A>
l)<BR>
4. Веб бетке суретке шекара қою үшін <IMG> тегінің қай атрибуты қолданылады?
m)height
n)border
o)width
p)alt
5. <IMG> тегінің width атрибуты нені білдіреді?
a)Суреттің диагоналын
b)Суреттің ұзындығын
c)Суреттің енін
d)Суреттің түсін
6. <IMG> тегінің height атрибуты нені білдіреді?
e)Суреттің диагоналын
f)Суреттің ұзындығын
g)Суреттің енін
h)Суреттің түсін
7. Веб бетке фреймдердің құрылымын анықтап беретін тег?
i)<FRAMESET> </FRAMESET>
j)<AUDIO> </AUDIO>
k)<VIDEO> </VIDEO>
l)<FORM> </FORM>
8. <FRAMESET> </FRAMESET> тегінің фреймдерді бағана бойынша орналастыратын
атрибуты қандай?
m)Cords
n)Cols
o)Cools
p)Coords
Бекіту сұрақтары: Тест орындау
17 слайд
1. Сілтеме енгізу үшін қай тег қажет? a)<AREA> </AREA> b)<A> </A> c)<MAP> </MAP> d)<OL> </OL> 2. Сілтеме қайда баруын көрсету үшін <а> </а> тегінің қай атрибуты қолданылады? e)Img f)Src g)Color h)Href 3. Веб бетке сурет қою үшін қандай тег қолданылады? i)<IMG> j)<HTML> </HTML> k)<A> </A> l)<BR> 4. Веб бетке суретке шекара қою үшін <IMG> тегінің қай атрибуты қолданылады? m)height n)border o)width p)alt 5. <IMG> тегінің width атрибуты нені білдіреді? a)Суреттің диагоналын b)Суреттің ұзындығын c)Суреттің енін d)Суреттің түсін 6. <IMG> тегінің height атрибуты нені білдіреді? e)Суреттің диагоналын f)Суреттің ұзындығын g)Суреттің енін h)Суреттің түсін 7. Веб бетке фреймдердің құрылымын анықтап беретін тег? i)<FRAMESET> </FRAMESET> j)<AUDIO> </AUDIO> k)<VIDEO> </VIDEO> l)<FORM> </FORM> 8. <FRAMESET> </FRAMESET> тегінің фреймдерді бағана бойынша орналастыратын атрибуты қандай? m)Cords n)Cols o)Cools p)Coords Бекіту сұрақтары: Тест орындау
#18 слайд
Үй тапсырмасы: 46-47. Mультимедиaны енгізу
Тапсырма № 3, оқулық 173-бет
18 слайд
Үй тапсырмасы: 46-47. Mультимедиaны енгізу Тапсырма № 3, оқулық 173-бет
шағым қалдыра аласыз













