Mga Tag na May Kaugnayan sa Media

Ipinaliliwanag ng artikulong ito ang mga tag na may kinalaman sa media.

Ipinaliwanag kung paano ilarawan ang mga imahe, video, audio, atbp. sa HTML, pati na rin ang mga collapsible na elemento at inline frames.

YouTube Video

Mga Tag na May Kaugnayan sa Media

<img> Tag

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• Ang <img> na tag ay ginagamit para maglagay ng mga larawan. Ang src na attribute ay tinutukoy ang landas ng larawan, at ang alt na attribute ay nagbibigay ng deskripsyon kapag hindi maipakita ang larawan.

<figure> at <figcaption> na Mga Tag

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• Ang <figure> na tag ay naggugrupo ng mga media content tulad ng mga larawan o illustration kasama ang isang caption gamit ang <figcaption> na tag.

<picture> Tag

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• Ang <picture> na tag ay ginagamit para sumuporta sa mga responsive na imahe, na nagpapahintulot na mapili ang angkop na imahe batay sa iba't ibang kondisyon ng display.

• Ang media na attribute ay tumutukoy sa mga kondisyon gamit ang parehong format tulad ng CSS media queries.

  • Maaari mong tukuyin ang mga kondisyon tulad ng minimum width (min-width), maximum width (max-width), o orientation ng screen (orientation).

• Sa halimbawang ito, ang mga sumusunod na larawan ay ipinapakita depende sa lapad ng screen.

  • Kung ang lapad ng screen ay 800px o higit pa, ang large.jpg ay ipapakita.
  • Kung ang lapad ng screen ay 400px o higit pa ngunit mas mababa sa 800px, ang medium.jpg ay ipapakita.
  • Kung ang lapad ng screen ay mas mababa sa 400px, ang small.jpg (ang larawan sa <img> tag) ay ipapakita.

<canvas> Tag

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• Ang <canvas> na tag ay nagbibigay ng isang lugar kung saan ang mga dynamic na graphics ay maaaring iguhit gamit ang JavaScript.

<map> Tag

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• Ang <map> na tag ay ginagamit para magtakda ng isang image map. Ang mga bahagi na maaaring i-click sa loob ng mapa ay tinutukoy gamit ang <area> na tag. Ito ay nagpapahintulot sa mga tiyak na bahagi ng isang larawan na maaaring i-click, na humahantong sa isang link.
• Tukuyin ang pangalan ng kaugnay na elemento ng mapa (<map> tag) sa attribute na usemap ng <img> tag, na may prefix na #.
• Sa pamamagitan ng tamang pagtukoy sa alt attribute ng <area> tag, maaari mong mapabuti ang accessibility para sa mga gumagamit na may kapansanan sa paningin.

<embed> Tag

1<embed src="movie.mp4" width="300" height="200">

• Ang <embed> na tag ay ginagamit para mag-embed ng panlabas na content tulad ng PDF, video, o audio.

<video> Tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• Ang <video> na tag ay ginagamit para maglagay ng video content. Maaari mong tukuyin ang maraming format gamit ang <source> na tag.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• Ang attribute na preload ay nagbibigay-daan sa iyo na tukuyin kung gaano karaming bahagi ng video ang dapat ma-load ng browser bago magsimula ang pag-playback.
  • Ang auto ay nag-uutos sa browser na i-preload ang buong media. Ito ay maaaring magpabawas ng pagka-antala sa pagsisimula ng pag-playback, ngunit maaaring ma-download ang data kahit hindi i-play ng user ang media.
  • Ang metadata ay naglo-load lamang ng metadata ng media (hal., tagal, impormasyon ng track). Ang mismong data ng media ay hindi ma-load hangga't hindi sinisimulan ng user ang pag-playback. Ito ay angkop kung kailangan mo ng buod ng impormasyon tungkol sa media.
  • Ang none ay hindi nag-preload ng media file. Ang media ay hindi magda-download ng mga resource hangga't hindi nagsisimula ang pag-playback. Ito ay angkop kung nais mong bawasan ang paggamit ng data.

<audio> Tag

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• Ang <audio> na tag ay ginagamit para maglagay ng audio content. Ang <source> na tag ay sumusuporta sa maraming format.
• Katulad ng <video> tag, ang preload attribute ay maaaring gamitin upang tukuyin kung gaano karaming audio ang dapat ma-load bago magsimula ang pag-playback.

<track> tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• Ang <track> tag ay ginagamit upang tukuyin ang mga text track tulad ng mga subtitle at caption. Ito ay maaaring gamitin sa loob ng <audio> o <video> tags.
• Ang attribute na kind ay nagbibigay-daan sa iyo na tukuyin ang layunin ng track (hal., subtitles, captions, chapters, atbp.). Maaari mong tukuyin ang mga sumusunod na halaga.
  • Ang subtitles ay nagbibigay ng mga subtitle na isinasalin ang nilalaman ng video o audio o ginagawang mas madaling maunawaan para sa mga manonood. Ang pangunahing layunin nito ay ang direktang pagsasalin ng audio.
  • Ang captions ay nagbibigay ng karagdagang impormasyon tulad ng musika at mga sound effect para sa mga taong may kapansanan sa pandinig, bilang karagdagan sa audio.
  • Ang descriptions ay mga track na naglalarawan ng visual na nilalaman ng video, tulad ng mga aksyon at tanawin, para sa mga taong may kapansanan sa paningin.
  • Ang chapters ay nagbibigay ng mga chapter marker (mga pamagat ng chapter) upang ipahiwatig ang mga tiyak na bahagi sa loob ng video.
  • Ang metadata ay nagbibigay ng karagdagang impormasyon para sa parsing o pagproseso ng media ngunit hindi ito ipinapakita sa mga user.

<iframe> Tag

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• Ang <iframe> na tag ay ginagamit upang mag-embed ng iba pang mga pahina ng HTML o panlabas na nilalaman (tulad ng mga website, video, o dokumento) sa kasalukuyang pahina. Madalas itong ginagamit para mag-embed ng mga video mula sa YouTube sa isang pahina.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video