DREAMSKILLS

Академия Dreamskills
+7 707 199 26 14
+7 747 939 16 60

Медиа элементтері
ФОТО, ВИДЕО, АУДИО
HTML-дегі Суреттер
HTML тілінде сіз <img> тегін веб-сайттарға кескіндерді қосу үшін пайдаланасыз. Бұл кірістірілген және бос элемент, жабу тегін қабылдамайды демек жұпсыз тек.

Тег <img> бірнеше атрибуттарды қабылдайды, олардың ішінде src, height, width, және alt  ең маңыздылары.
Қажетті ақпарат легі
ALT атрибуты
Alt төлсипаты кескін үшін балама мәтінді көрсетеді. Бұл, мысалы, желі ақаулығы кезінде көрсетілетін мәтін болуы мүмкін. Немесе ол сурет көзі қате көрсетілген кезде бірдеңені көрсетуі мүмкін, сондықтан пайдаланушылар кескіннің не туралы екенін біледі.
Мысалы:<img src="suret1.png" alt="Сурет шықпаған болса, осы жердегі сөз сайтта көрсетілетін болады.">
Width және Height атрибуттары
Бұл атрибуттарды суреттеріңіз үшін белгілі бір ені мен биіктігін көрсету үшін пайдалануға болады. Осы атрибуттардың көмегімен суреттің өлшемін төмен немесе жоғары өзгертуге болады.
Ескерту
Width және Height атрибуттары бар кескіннің өлшемін өзгертуге болмайды. Біз бұл туралы ең жақсы тәжірибелер аясында толығырақ тоқталамыз.Себебі ол кескінді бұрмалап көрсетуі және сапаға әсер етуі мүмкін.

Салыстырып көріңіз:

<img src="suret1.png" alt="Сурет шықпаған болса, осы жердегі сөз сайтта көрсетілетін болады." width="460px" height="460px">

<img src="suret1.png" alt="Сурет шықпаған болса, осы жердегі сөз сайтта көрсетілетін болады.>
SRC

Төлсипат мәндері: Ол бастапқы кескіннің сілтемесін көрсететін жалғыз мәнді қамтиды. Төменде көрсетілген URL сілтемесінің екі түрі бар:

  • Абсолютті URL: ол басқа веб-бетке нұсқайды.
  • Салыстырмалы URL: Ол бір веб-беттің басқа файлдарына нұсқайды.

<img src="URL">

style="border:5px solid black"

Медиа элемент
Шын мәнінде, бірнеше форматтар бар, бірақ бірнеше негізгілері бар: JPEG, PNG, SVG және GIF. Біз олармен танысамыз.

Бұл қадамда SVG пішімін толығырақ қарастырайық. SVG масштабталатын векторлық графиканы білдіреді. Мұндай кескіндердің сапасы өлшемін өзгерту кезінде өзгермейді, ал салмағы аз. SVG пішімі төмен түсті схемалар, логотиптер және белгішелер үшін тамаша.
Яғни, SVG пішімі қолайлы, егер:
  • кескінді жоғалтпай масштабтау қажет;
  • кескін элементтерінің түсін өзгерту;
  • суреттің бөліктерін жандандыру керек
SVG Форматы
JPEG форматы
Бұл пішім толық түсті фотосуреттерді қысу және сақтау үшін әзірленген. Ол 16 миллионнан астам түстерді қолдайды. Бірақ JPEG кескіндерді сапаны жоғалту арқылы қысатынын есте ұстаған жөн. Сондықтан, егер біз кескіннің салмағын азайтқымыз келсе, онда оның сыртқы түрін нашарлатуымыз керек. JPEG-мен жұмыс істеудегі басты міндет салмақ пен суреттің сапасы қолайлы болатындай қысу деңгейін таңдау болып табылады.
Іс жүзінде img тегіне келесі сипаттар жиі қолданылады:
Box-shadow
Padding
Border
бұл қасиетті алдыңғы қасиеттермен жұптастыра отырып, әртүрлі қызықты әсерлерге қол жеткізуге болады
фотосурет пен жақтау арасындағы шағын ішкі шегіністер субстрат әсерін модельдеуге көмектеседі. Background-color қасиетінің көмегімен субстраттың түсін өзгертуге болады.
Жиектердің(жақтаушалардың) кез келген ені мен түсін көрсете отырып, кескінге (тіпті фотосуреттердің бүкіл галереясы үшін) жақтау жасауға болады. Естеріңізде болса, жақтауды әр жағы үшін жеке сәндеуге болады.
PNG Форматы
JPEG-тен айырмашылығы, PNG жоғалтпай қысу пішімі болып табылады және ерекше айқындылықты қажет ететін кескіндерді сақтауға мүмкіндік береді. Мысалы, сайт скриншоттары, сызбалар және басып шығарылған мәтін. PNG пішімінің басты ерекшелігі - мөлдірлікті қолдау, яғни әрбір пикселді жеке мөлдірлік дәрежесін орнатуға болады.

PNG - бұл GIF пішіміне балама ретінде енгізілген салыстырмалы түрде жаңа пішім, оны келесі қадамда қарастырамыз.
»
GIF Форматы
JPEG-тен айырмашылығы, PNG жоғалтпай қысу пішімі болып табылады және ерекше айқындылықты қажет ететін кескіндерді сақтауға мүмкіндік береді. Мысалы, сайт скриншоттары, сызбалар және басып шығарылған мәтін. PNG пішімінің басты ерекшелігі - мөлдірлікті қолдау, яғни әрбір пикселді жеке мөлдірлік дәрежесін орнатуға болады.

PNG - бұл GIF пішіміне балама ретінде енгізілген салыстырмалы түрде жаңа пішім, оны келесі қадамда қарастырамыз.

https://gifer.com/en/category/Art%20&%20Design
Сілтемелерді тек мәтіннің көмегімен ғана емес, сонымен қатар кескіндердің көмегімен де жасауға болады.
<a href="https://dreamskills.kz/">
<img src="12.jpg" alt="Dreamskills">
</a>
Көбінесе сурет сілтемелері галереяларда суреттің кішірек нұсқасынан суреттің толық өлшемді нұсқасына немесе сол сурет жеке бетке сілтеме жасалған кезде қолданылады.

Енді біз өз галереямызда жеке фотосурет беттеріне апаратын селфи сілтемелерін жасауға тырысамыз.

<a href="kazhet.html"><img src="12.jpg" alt="Дәрінің суреті" width="116" height="79"></a>
<figure>
Кез келген элементтерді, мысалы, суреттер мен олардың тақырыптарын топтастыру үшін қолданылады. <figure></figure> құжаттың негізгі мазмұнымен тікелей байланысты болмауы керек және оны басқа жерге ауыстырған кезде мәтіннің мағынасы өзгермеуі керек. Әдетте иллюстрациялар, код үзінділері, диаграммалар, графиктер, диаграммалар және т.б.
<figcaption>
Құрамында <figure> элементінің сипаттамасы бар . <figcaption> ( суретке арналған жазу) топтағы бірінші немесе соңғы элемент болуы керек.
Қолданылуы
<figure>
<figcaption> Атау </figcaption>
</figure>

Мысал:
<figure>
<img src="12.jpg" alt="Бұл БАД өнімінің орны" >
<figcaption >
Бұл БАД
</figcaption>
</figure>

ВИДЕО
<Video></Video>
HTML элементі < video> құжатқа бейне ойнатуды қолдайтын медиа ойнатқышты енгізеді. Сіз <video> және аудио мазмұн үшін пайдалана аласыз, бірақ <audio> элементі қолайлы пайдаланушы интерфейсін қамтамасыз ете алады.
<VIDEO>
HTML5 бейне(видео) элементі қалай жұмыс істейді?
HTML5 бейне тегі - <video>, ал тег басқа HTML элементтеріне ұқсас, -мен жабылады </video>.
Бұл тегтердің арасында <source>тег бейне файлдың орнын көрсетеді. Бұл тегте бейне көзі де (src) да, файл түрі де (түрі) келесідей көрсетіледі:

<video>
<source src = "video.mp4" type="video/mp4">
</video>
»

<Video> тегімен пайдалануға болатын атрибуттар

Autoplay

Автоматты ойнату : Ол браузерге бейнені дереу жүктеп алуды және мүмкіндігінше тезірек ойнатуды ұсынады.

Preload
Ол браузерге автордың ең жақсы пайдаланушы тәжірибесіне әкелетіні туралы кеңес беруді көздейді.
Loop
Ол браузерге бейнені автоматты шексіз айналдыруды ұсынады.
height
Ол бейненің биіктігін CSS пикселдерінде орнатады
width
Ол бейненің енін CSS пикселдерінде орнатады
Controls
Ойнату, тоқтатау , дыбыс деңгейі, т.б. сияқты әдепкі бейне басқару элементтерін көрсетеді.
Muted
Бейнедегі дыбысты өшіреді.
Poster
Видеоны жүктеу алдында алдын ала қарау үшін суретті жүктейді.
Src
Ол бейне файлдың URL мекенжайын көрсету үшін пайдаланылады.
Толығырақ төменде
HTML <video> autoplay атрибуты бейненің веб-бетті жүктегеннен кейін автоматты түрде ойнатылатынын көрсету үшін пайдаланылады. Бұл логикалық мән, бұл төлсипат HTML5-те жаңа.

<video autoplay>

<video controls autoplay>
<source src="taular.mp4" type="video/mp4">
<source src="taular.webm" type="video/webm">
<source src="taular.ogg" type="video/ogg">
</video>
autoplay

Preload автордың ойынша, бет жүктелген кезде бейненің жүктелу жолын көрсету үшін пайдаланылады . Бейнені алдын ала жүктеу атрибуты авторға веб-сайттың пайдаланушы тәжірибесін іске асыру тәсілі туралы браузерге көрсетуге мүмкіндік береді.

Синтаксисі:
<video preload="auto">
<video preload="metadata">
<video preload="none">

auto: Бет(парақша) жүктелген кезде браузер барлық бейнелерді жүктеуі керек екенін көрсету үшін қолданылады.
metadata: Бет(парақша) жүктелген кезде браузер тек метадеректерді жүктеуі керек екенін көрсету үшін қолданылады.
none: Бет(парақша) жүктеген кезде браузер бейнені жүктемеуі керек екенін көрсету үшін қолданылады.


preload

<loop> бейнені аяқтағаннан кейін оны шексіз жалғастыру үшін пайдаланылады .

Синтаксисі:
<video loop>

<video controls loop>
<source src="taular.mp4" type="video/mp4">
<source src="taular.webm" type="video/webm">
<source src="taular.ogg" type="video/ogg">
</video>
Loop
muted атрибуты бейненің аудио дыбысының өшірілгенін көрсету үшін қолданылады, бұл логикалық атрибут.

Синтаксисі:
<video muted>

<video id="Tekseru"
width="360"
height="240"
controls muted>
<source src="2.mp4" type="video/mp4">
</video>


muted
~
<poster> Видеоны жүктеп алу кезінде немесе пайдаланушы ойнату түймесін басқанда суретті көрсету үшін пайдаланылады.

Синтаксисі:
<video loop>

<video id="Test_Video"
width="360"
height="240"
controls poster="12.jpg">
<source src="2.mp4" type="video/mp4">
</video>
Poster

<AUDIO>

HTML5 аудио элементі қалай жұмыс істейді?

HTML5 бейне тегі - <audio>, ал тег басқа HTML элементтеріне ұқсас, -мен жабылады </audio>.

Бұл тегтердің арасында <source>тег бейне файлдың орнын көрсетеді. Бұл тегте бейне көзі де (src) да, файл түрі де (түрі) келесідей көрсетіледі:


<audio>
<source src = "audio.mp3" type="audio/mp3">
</audio>

<Audio> тегімен пайдалануға болатын атрибуттар

Autoplay

Автоматты ойнату : Ол браузерге бейнені дереу жүктеп алуды және мүмкіндігінше тезірек ойнатуды ұсынады.

Preload
Ол браузерге автордың ең жақсы пайдаланушы тәжірибесіне әкелетіні туралы кеңес беруді көздейді.
Loop
Ол браузерге бейнені автоматты шексіз айналдыруды ұсынады.
height
Ол бейненің биіктігін CSS пикселдерінде орнатады
width
Ол бейненің енін CSS пикселдерінде орнатады
Controls
Ойнату, тоқтатау , дыбыс деңгейі, т.б. сияқты әдепкі бейне басқару элементтерін көрсетеді.
Muted
Бейнедегі дыбысты өшіреді.
Src
Ол бейне файлдың URL мекенжайын көрсету үшін пайдаланылады.
HTML <audio> autoplay атрибуты бейненің веб-бетті жүктегеннен кейін автоматты түрде ойнатылатынын көрсету үшін пайдаланылады. Бұл логикалық мән, бұл төлсипат HTML5-те жаңа.

<audio autoplay>

<audio controls autoplay>
<source src="audio1.mp3">
<source src="audio1.ogg" >
</audio>
autoplay

Preload бет жүктелген кезде бейненің жүктелу жолын көрсету үшін пайдаланылады . Бейнені алдын ала жүктеу атрибуты авторға веб-сайттың пайдаланушы тәжірибесін іске асыру тәсілі туралы браузерге көрсетуге мүмкіндік береді.

Синтаксисі:
<audio preload="auto">
<audio preload="metadata">
<audio preload="none">

auto: Бет(парақша) жүктелген кезде браузер барлық бейнелерді жүктеуі керек екенін көрсету үшін қолданылады.
metadata: Бет(парақша) жүктелген кезде браузер тек метадеректерді жүктеуі керек екенін көрсету үшін қолданылады.
none: Бет(парақша) жүктеген кезде браузер бейнені жүктемеуі керек екенін көрсету үшін қолданылады.

<audio controls preload="metadata">
<source src="audio/music.ogg">
<source src="audio/music.mp3">
</audio>


preload

»
<loop> аудио аяқтағаннан кейін оны шексіз жалғастыру үшін пайдаланылады .

Синтаксисі:
<audio loop>

<audio autoplay loop>
<source src="audio/music.ogg">
<source src="audio/music.mp3">
</audio>
Loop
muted атрибуты аудио дыбысының өшірілгенін көрсету үшін қолданылады, бұл логикалық атрибут.


<audio autoplay muted controls>
<source src="audio/music.ogg">
<source src="audio/music.mp3">
</audio>


muted
Сабаққа байланысты пайдалы кітап ресурсы
Жүктеу

Презентация

Бүгінгі сабақтың презентациясын төмендегі батырманы басып жүктей аласыз

Жүктеу