Tag Terkait Media

Artikel ini menjelaskan tag yang terkait dengan media.

Menjelaskan cara mendeskripsikan gambar, video, audio, dll. dalam HTML, serta elemen yang dapat dilipat dan kerangka sebaris.

YouTube Video

Tag Terkait Media

Tag <img>

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

• Tag <img> digunakan untuk menyematkan gambar. Atribut src menentukan jalur gambar, dan atribut alt menyediakan deskripsi ketika gambar tidak dapat ditampilkan.

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> mengelompokkan konten media seperti gambar atau ilustrasi bersama dengan keterangan 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 mendukung gambar responsif, memungkinkan gambar yang sesuai dipilih berdasarkan kondisi tampilan yang berbeda.

• media atribut menentukan kondisi dalam format yang sama dengan kueri media CSS.

  • Anda dapat menentukan kondisi seperti lebar minimum (min-width), lebar maksimum (max-width), atau orientasi layar (orientation).

• Dalam contoh ini, gambar berikut ditampilkan tergantung pada lebar layar.

  • Jika lebar layar 800px atau lebih, maka large.jpg akan ditampilkan.
  • Jika lebar layar 400px atau lebih tetapi kurang dari 800px, maka medium.jpg akan ditampilkan.
  • Jika lebar layar kurang dari 400px, maka small.jpg (gambar dalam tag <img>) akan ditampilkan.

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 area di mana grafik dinamis dapat digambar 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 gambar. Area yang dapat diklik dalam peta didefinisikan menggunakan tag <area>. Ini memungkinkan bagian tertentu dari gambar untuk dapat diklik, mengarahkan ke tautan.
• Tentukan nama elemen peta yang terkait (tag <map>) dalam atribut usemap dari tag <img>, diawali dengan #.
• Dengan menentukan atribut alt pada tag <area> secara tepat, Anda dapat meningkatkan aksesibilitas untuk pengguna dengan gangguan penglihatan.

Tag <embed>

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

• Tag <embed> digunakan untuk menyematkan konten eksternal 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 menyematkan konten video. Anda dapat menentukan beberapa 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 memungkinkan Anda untuk menentukan seberapa banyak video yang harus dimuat oleh browser sebelum pemutaran dimulai.
  • auto menginstruksikan browser untuk memuat seluruh media terlebih dahulu. Ini dapat mengurangi jeda di awal pemutaran, tetapi data mungkin diunduh meskipun pengguna tidak memutar media.
  • metadata hanya memuat metadata media (misalnya, durasi, informasi trek). Data media itu sendiri tidak dimuat hingga pengguna memulai pemutaran. Ini cocok digunakan ketika Anda membutuhkan informasi ringkas tentang media.
  • none tidak melakukan pramuat berkas media. Media tidak mengunduh sumber daya hingga pemutaran dimulai. Ini cocok digunakan saat Anda ingin meminimalkan 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 menyematkan konten audio. Tag <source> mendukung beberapa format.
• Seperti tag <video>, atribut preload dapat digunakan untuk menentukan seberapa banyak audio yang harus dimuat sebelum pemutaran dimulai.

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 subtitle dan caption. Tag ini dapat digunakan di dalam tag <audio> atau <video>.
• Atribut kind memungkinkan Anda untuk menentukan tujuan trek (misalnya, subtitle, caption, bab, dll.). Anda dapat menentukan nilai berikut.
  • subtitles menyediakan subtitle yang menerjemahkan konten video atau audio atau membuatnya lebih mudah dimengerti oleh penonton. Tujuan utamanya adalah menerjemahkan audio secara langsung.
  • captions menyediakan informasi tambahan seperti musik dan efek suara untuk orang yang tuli atau memiliki gangguan pendengaran, selain audio.
  • descriptions adalah trek yang mendeskripsikan konten visual dalam sebuah video, seperti aksi dan pemandangan, untuk orang yang memiliki gangguan penglihatan.
  • chapters menyediakan penanda bab (judul bab) untuk menunjukkan titik-titik spesifik dalam video.
  • metadata menyediakan informasi tambahan untuk pemrosesan atau parsing media tetapi tidak ditampilkan kepada pengguna.

Tag <iframe>

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

• Tag <iframe> digunakan untuk menyematkan halaman HTML lain atau konten eksternal (seperti situs web, video, atau dokumen) ke dalam halaman saat ini. Tag ini sering digunakan untuk menyematkan video YouTube di halaman.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video