Medierelaterede tags

Denne artikel forklarer medierelaterede tags.

Forklarer, hvordan man beskriver billeder, videoer, lyd osv. i HTML samt sammenklappelige elementer og inline-rammer.

YouTube Video

Medierelaterede tags

<img>-tag

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

• <img>-tagget bruges til at integrere billeder. src-attributten angiver billedets sti, og alt-attributten giver en beskrivelse, hvis billedet ikke kan vises.

<figure>- og <figcaption>-tags

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

• <figure>-tagget grupperer medieindhold som billeder eller illustrationer sammen med en billedtekst ved hjælp af <figcaption>-tagget.

<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>

• <picture>-tagget bruges til at understøtte responsive billeder, så det passende billede kan vælges baseret på forskellige skærmforhold.

• media attributtet specificerer betingelser i samme format som CSS-medieforespørgsler.

  • Du kan specificere betingelser såsom minimumsbredde (min-width), maksimumsbredde (max-width) eller skærmorientering (orientation).

• I dette eksempel vises følgende billeder afhængigt af skærmbredden.

  • Hvis skærmbredden er 800px eller mere, vises large.jpg.
  • Hvis skærmbredden er 400px eller mere, men mindre end 800px, vises medium.jpg.
  • Hvis skærmbredden er mindre end 400px, vises small.jpg (billedet i <img>-tagget).

<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>

• <canvas>-tagget tilbyder et område, hvor dynamiske grafikker kan tegnes ved hjælp af 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>

• <map>-tagget bruges til at definere et billedkort. Klikbare områder på kortet defineres ved hjælp af <area>-tagget. Dette gør det muligt at gøre bestemte dele af et billede klikbare og føre til et link.
• Angiv navnet på det tilknyttede kort-element (<map>-tag) i usemap-attributten for <img>-tagget med et # foran.
• Ved at angive alt-attributten for <area>-tagget korrekt, kan du forbedre tilgængeligheden for synshandicappede brugere.

<embed>-tag

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

• <embed>-tagget bruges til at integrere eksternt indhold som PDF'er, videoer eller lyde.

<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>

• <video>-tagget bruges til at integrere videoklip. Du kan angive flere formater ved hjælp af <source>-tagget.

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-attributten giver dig mulighed for at angive, hvor meget af en video der skal indlæses af browseren, før afspilningen begynder.
  • auto instruerer browseren til at forudindlæse hele mediet. Det kan reducere forsinkelsen ved starten af afspilningen, men data kan downloades, selvom brugeren ikke afspiller mediet.
  • metadata indlæser kun mediets metadata (f.eks. varighed, sporinformation). Selve mediedataene indlæses ikke, før brugeren starter afspilningen. Dette er velegnet, når du har brug for oversigtsinformation om mediet.
  • none forudindlæser ikke mediefilen. Mediet downloader ikke ressourcer, før afspilningen starter. Dette er velegnet, når du ønsker at minimere dataforbruget.

<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>

• <audio>-tagget bruges til at integrere lydindhold. <source>-tagget understøtter flere formater.
• Ligesom <video>-tagget kan preload-attributten bruges til at angive, hvor meget lyd der skal indlæses, før afspilningen begynder.

<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>

• <track>-tagget bruges til at angive tekstspor såsom undertekster og billedtekster. Det kan bruges inde i <audio>- eller <video>-tags.
• kind-attributten giver dig mulighed for at angive formålet med sporet (f.eks. undertekster, billedtekster, kapitler osv.). Du kan angive følgende værdier.
  • subtitles giver undertekster, der enten oversætter indholdet af video eller lyd eller gør det lettere at forstå for seerne. Dens hovedformål er den direkte oversættelse af lyd.
  • captions giver yderligere information såsom musik og lydeffekter til personer, der er døve eller hørehæmmede, udover lyd.
  • descriptions er spor, der beskriver det visuelle indhold af en video, såsom handlinger og scener, for synshæmmede personer.
  • chapters giver kapitelmarkører (kapiteltitler) til at angive specifikke punkter i videoen.
  • metadata giver yderligere information til at kunne analysere eller behandle mediet, men vises ikke for brugerne.

<iframe>-tag

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

• <iframe>-tagget bruges til at indlejre andre HTML-sider eller eksternt indhold (såsom hjemmesider, videoer eller dokumenter) på den aktuelle side. Det bruges ofte til at indlejre YouTube-videoer på en side.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video