Medya ile İlgili Etiketler

Bu makale medya ile ilgili etiketleri açıklar.

HTML'de resimler, videolar, sesler vb. ile katlanabilir öğeler ve satır içi çerçevelerin nasıl tanımlanacağını açıklar.

YouTube Video

Medya ile İlgili Etiketler

<img> Etiketi

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

• <img> etiketi, görüntüleri eklemek için kullanılır. src özelliği görüntü yolunu belirtir ve alt özelliği, görüntü görüntülenemediğinde bir açıklama sağlar.

<figure> ve <figcaption> Etiketleri

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

• <figure> etiketi, görüntü veya çizim gibi medya içeriklerini, <figcaption> etiketiyle bir altyazı ile gruplar.

<picture> Etiketi

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>

• <picture> etiketi, farklı görüntüleme koşullarına göre uygun görüntünün seçilmesini sağlayan duyarlı görüntüleri desteklemek için kullanılır.

• media özelliği, CSS medya sorgularıyla aynı formatta koşulları belirtir.

  • Minimum genişlik (min-width), maksimum genişlik (max-width) veya ekran yönü (orientation) gibi koşulları belirtebilirsiniz.

• Bu örnekte, ekran genişliğine bağlı olarak aşağıdaki görseller görüntülenir.

  • Eğer ekran genişliği 800px veya daha fazla ise, large.jpg görüntülenir.
  • Eğer ekran genişliği 400px veya daha fazla fakat 800px'den küçük ise, medium.jpg görüntülenir.
  • Eğer ekran genişliği 400px'den küçük ise, <img> etiketindeki görsel olan small.jpg görüntülenir.

<canvas> Etiketi

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>

• <canvas> etiketi, JavaScript kullanarak dinamik grafiklerin çizilebileceği bir alan sağlar.

<map> Etiketi

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>

• <map> etiketi, bir görüntü haritası tanımlamak için kullanılır. Harita içindeki tıklanabilir alanlar, <area> etiketi kullanılarak tanımlanır. Bu, bir görüntünün belirli bölümlerinin tıklanabilir olmasını ve bir bağlantıya yönlendirilmesini sağlar.
• <img> etiketinin usemap özelliğinde ilişkili harita ögesinin (<map> etiketi) adını # ile başlayarak belirtin.
• etiketinin alt özelliğini uygun bir şekilde belirterek görme engelli kullanıcılar için erişilebilirliği artırabilirsiniz.

<embed> Etiketi

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

• <embed> etiketi, PDF, video veya ses gibi harici içerikleri eklemek için kullanılır.

<video> Etiketi

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>

• <video> etiketi, video içeriği eklemek için kullanılır. <source> etiketi kullanarak birden fazla format belirtebilirsiniz.

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>

• preload niteliği, tarayıcının oynatma başlamadan önce bir videonun ne kadarının yükleneceğini belirtmenizi sağlar.
  • auto, tarayıcıya tüm medyayı önceden yüklemesini söyler. Bu, oynatma başlangıcındaki gecikmeyi azaltabilir, ancak kullanıcı medyayı oynatmasa bile veri indirilebilir.
  • metadata, yalnızca medyanın meta verilerini yükler (ör. süre, parça bilgisi). Medya verilerinin kendisi, kullanıcı oynatmayı başlatana kadar yüklenmez. Bu, medya ile ilgili özet bilgilere ihtiyacınız olduğunda uygundur.
  • none, medya dosyasını ön yüklemez. Medya, oynatma başlayana kadar kaynakları indirmez. Bu, veri kullanımını en aza indirmek istediğiniz durumlarda uygundur.

<audio> Etiketi

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>

• <audio> etiketi, ses içeriği eklemek için kullanılır. <source> etiketi birden fazla formatı destekler.
• <video> etiketi gibi, preload niteliği, oynatma başlamadan önce ne kadar sesin yükleneceğini belirtmek için kullanılabilir.

<track> etiketi

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>

• <track> etiketi, altyazılar ve açıklamalar gibi metin parçalarını belirtmek için kullanılır. Bu etiket, <audio> veya <video> etiketlerinin içinde kullanılabilir.
• kind niteliği, parçanın amacını belirtmenizi sağlar (örn. altyazılar, açıklamalar, bölümler, vb.). Aşağıdaki değerleri belirtebilirsiniz.
  • subtitles, video veya ses içeriğini çeviren ya da izleyicilerin anlamasını kolaylaştıran altyazılar sağlar. Ana amacı, sesin doğrudan çevirisini sağlamaktır.
  • captions, işitme engelli veya işitme zorluğu çeken kişiler için sesin yanı sıra müzik ve ses efektleri gibi ek bilgiler sağlar.
  • descriptions, görme engelli kişiler için bir videonun görsel içeriğini, örneğin hareketleri ve manzarayı tanımlayan parçalardır.
  • chapters, video içinde belirli noktaları göstermek için bölüm işaretçileri (bölüm başlıkları) sağlar.
  • metadata, medyayı çözümlemek veya işlemek için ek bilgiler sağlar ancak kullanıcılara gösterilmez.

<iframe> Etiketi

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

• <iframe> etiketi, diğer HTML sayfalarını veya dış içerikleri (web siteleri, videolar ya da belgeler gibi) mevcut sayfaya yerleştirmek için kullanılır. Genellikle bir sayfaya YouTube videoları eklemek için kullanılır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video