Tag Berkaitan Media

Artikel ini menerangkan tag berkaitan media.

Menjelaskan cara untuk menerangkan imej, video, audio, dan lain-lain dalam HTML, serta elemen yang boleh dilipat dan bingkai sebaris.

YouTube Video

Tag Berkaitan Media

Tag <img>

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

• Tag <img> digunakan untuk menyisipkan imej. Atribut src menentukan laluan imej, dan atribut alt menyediakan deskripsi apabila imej tidak dapat dipaparkan.

Tag <figure> dan <figcaption>

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

• Tag <figure> mengumpulkan kandungan media seperti imej atau ilustrasi bersama dengan kapsyen menggunakan tag <figcaption>.

Tag <picture>

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>

• Tag <picture> digunakan untuk menyokong imej responsif, membolehkan imej yang sesuai dipilih berdasarkan keadaan paparan yang berbeza.

• Atribut media menentukan syarat dalam format yang sama seperti pertanyaan media CSS.

  • Anda boleh menentukan syarat seperti lebar minimum (min-width), lebar maksimum (max-width), atau orientasi skrin (orientation).

• Dalam contoh ini, imej berikut dipaparkan bergantung pada lebar skrin.

  • Jika lebar skrin adalah 800px atau lebih, large.jpg akan dipaparkan.
  • Jika lebar skrin adalah 400px atau lebih tetapi kurang daripada 800px, medium.jpg akan dipaparkan.
  • Jika lebar skrin kurang daripada 400px, small.jpg (imej dalam tag <img>) akan dipaparkan.

Tag <canvas>

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>

• Tag <canvas> menyediakan kawasan di mana grafik dinamik boleh dilukis menggunakan JavaScript.

Tag <map>

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>

• Tag <map> digunakan untuk mendefinisikan peta imej. Kawasan boleh klik dalam peta ditakrifkan menggunakan tag <area>. Ini membolehkan bahagian tertentu dalam imej boleh diklik, membawa kepada pautan.
• Nyatakan nama elemen peta yang berkaitan (<map> tag) dalam atribut usemap tag <img>, didahului dengan #.
• Dengan menetapkan atribut alt tag <area> dengan sewajarnya, anda boleh meningkatkan kebolehcapaian untuk pengguna yang kurang penglihatan.

Tag <embed>

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

• Tag <embed> digunakan untuk menyisipkan kandungan luaran seperti PDF, video, atau audio.

Tag <video>

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>

• Tag <video> digunakan untuk menyisipkan kandungan video. Anda boleh menetapkan pelbagai format menggunakan tag <source>.

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>

• Atribut preload membolehkan anda menentukan berapa banyak bahagian video perlu dimuatkan oleh pelayar sebelum main balik dimulakan.
  • auto mengarahkan pelayar untuk memuat awal keseluruhan media. Ia boleh mengurangkan kelewatan ketika permulaan main balik, tetapi data mungkin tetap dimuat turun walaupun pengguna tidak memainkan media.
  • metadata hanya memuat metadata media (cth., tempoh, maklumat trek). Data media itu sendiri tidak dimuat sehingga pengguna memulakan main balik. Ini sesuai apabila anda memerlukan maklumat ringkas mengenai media.
  • none tidak memuat awal fail media. Media tidak memuat turun sumber sehingga main balik bermula. Ini sesuai apabila anda ingin mengurangkan penggunaan data.

Tag <audio>

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>

• Tag <audio> digunakan untuk menyisipkan kandungan audio. Tag <source> menyokong pelbagai format.
• Seperti tag <video>, atribut preload boleh digunakan untuk menentukan berapa banyak audio perlu dimuat sebelum main balik dimulakan.

Tag <track>

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>

• Tag <track> digunakan untuk menentukan trek teks seperti sari kata dan kapsyen. Ia boleh digunakan di dalam tag <audio> atau <video>.
• Atribut kind membolehkan anda menentukan tujuan trek (cth., sari kata, kapsyen, bab, dll.). Anda boleh menentukan nilai berikut.
  • subtitles menyediakan sari kata yang menterjemah kandungan video atau audio atau memudahkan pemahaman bagi penonton. Tujuan utamanya adalah untuk terjemahan langsung dari audio.
  • captions menyediakan maklumat tambahan seperti muzik dan kesan bunyi untuk orang yang pekak atau mempunyai masalah pendengaran, selain audio.
  • descriptions adalah trek yang menerangkan kandungan visual video, seperti tindakan dan pemandangan, untuk orang yang mempunyai masalah penglihatan.
  • chapters menyediakan penanda bab (tajuk bab) untuk menunjukkan titik tertentu dalam video.
  • metadata menyediakan maklumat tambahan untuk menguraikan atau memproses media tetapi tidak dipaparkan kepada pengguna.

Tag <iframe>

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

• Tag <iframe> digunakan untuk menyisipkan halaman HTML lain atau kandungan luaran (seperti laman web, video, atau dokumen) ke dalam halaman semasa. Ia sering digunakan untuk menyisipkan video YouTube pada halaman.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video