Medierelaterade taggar

Den här artikeln förklarar medierelaterade taggar.

Förklarar hur man beskriver bilder, videor, ljud, etc. i HTML, samt kollapsbara element och inline-ramar.

YouTube Video

Medierelaterade taggar

<img>-tagg

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

• <img>-taggen används för att bädda in bilder. src-attributet anger bildens sökväg, och alt-attributet ger en beskrivning när bilden inte kan visas.

<figure> och <figcaption>-taggar

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

• <figure>-taggen grupperar medieinnehåll som bilder eller illustrationer tillsammans med en bildtext med hjälp av <figcaption>-taggen.

<picture>-tagg

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>-taggen används för att stödja responsiva bilder så att rätt bild kan väljas baserat på olika visningsförhållanden.

• media-attributet anger villkor i samma format som CSS-mediaförfrågningar.

  • Du kan ange villkor såsom minimibredd (min-width), maximibredd (max-width) eller skärmriktning (orientation).

• I det här exemplet visas följande bilder beroende på skärmbredd.

  • Om skärmbredden är 800 px eller mer visas large.jpg.
  • Om skärmbredden är 400 px eller mer men mindre än 800 px visas medium.jpg.
  • Om skärmbredden är mindre än 400 px visas small.jpg (bilden i <img>-taggen).

<canvas>-tagg

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>-taggen ger en yta där dynamiska grafik kan ritas med hjälp av JavaScript.

<map>-tagg

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>-taggen används för att definiera en bildkarta. Klickbara områden inom kartan definieras med <area>-taggen. Detta gör att specifika delar av en bild kan vara klickbara och leda till en länk.
• Ange namnet på det associerade kartsymbolselementet (<map>-tagg) i usemap-attributet för <img>-taggen, med prefixet #.
• Genom att korrekt ange alt-attributet för <area>-taggen kan du förbättra tillgängligheten för användare med synnedsättning.

<embed>-tagg

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

• <embed>-taggen används för att bädda in externt innehåll som PDF-filer, videor eller ljud.

<video>-tagg

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>-taggen används för att bädda in videoinnehåll. Du kan specificera flera format genom att använda <source>-taggen.

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-attributet låter dig ange hur mycket av en video som ska laddas av webbläsaren innan uppspelningen börjar.
  • auto instruerar webbläsaren att förladda hela mediefilen. Det kan minska fördröjningen vid uppspelningens start, men data kan laddas ner även om användaren inte spelar upp mediefilen.
  • metadata laddar endast mediefilens metadata (t.ex. längd, spårinformation). Själva mediedatan laddas inte förrän användaren startar uppspelningen. Detta är lämpligt när du behöver sammanfattande information om mediefilen.
  • none förladdar inte mediefilen. Mediefilen laddar inte ner resurser förrän uppspelningen startar. Detta är lämpligt när du vill minimera dataanvändning.

<audio>-tagg

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>-taggen används för att bädda in ljudinnehåll. <source>-taggen stöder flera format.
• Precis som <video>-taggen kan preload-attributet användas för att ange hur mycket ljud som ska laddas innan uppspelningen börjar.

<track>-tagg

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>-taggen används för att specificera textspår som undertexter och bildtexter. Den kan användas inom <audio>- eller <video>-taggar.
• kind-attributet låter dig ange syftet med spåret (t.ex. undertexter, bildtexter, kapitel, etc.). Du kan ange följande värden.
  • subtitles ger undertexter som översätter innehållet i video eller ljud eller gör det lättare för tittare att förstå. Dess huvudsakliga syfte är den direkta översättningen av ljud.
  • captions ger ytterligare information som musik och ljudeffekter för personer som är döva eller har nedsatt hörsel, utöver ljud.
  • descriptions är spår som beskriver det visuella innehållet i en video, såsom handlingar och landskap, för personer med synnedsättning.
  • chapters tillhandahåller kapitelmarkörer (kapiteltitlar) för att indikera specifika punkter i videon.
  • metadata ger ytterligare information för att tolka eller bearbeta mediefilen men visas inte för användare.

<iframe>-tagg

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

• <iframe>-taggen används för att bädda in andra HTML-sidor eller externt innehåll (såsom webbplatser, videor eller dokument) på den aktuella sidan. Den används ofta för att bädda in YouTube-videor på en sida.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video