Medierelaterte tagger

Denne artikkelen forklarer medierelaterte tagger.

Forklarer hvordan man beskriver bilder, videoer, lyd osv. i HTML, i tillegg til sammenleggbare elementer og inline-rammer.

YouTube Video

Medierelaterte tagger

<img>-tagg

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

• <img>-taggen brukes til å legge inn bilder. src-attributtet spesifiserer bildestien, og alt-attributtet gir en beskrivelse når bildet ikke kan vises.

<figure> og <figcaption>-tagger

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

• <figure>-taggen grupperer medieinnhold som bilder eller illustrasjoner sammen med en bildetekst ved bruk 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 brukes for å støtte responsive bilder, slik at det riktige bildet kan velges basert på ulike visningsforhold.

• media-attributtet spesifiserer betingelser i samme format som CSS-mediespørringer.

  • Du kan spesifisere betingelser som minimumsbredde (min-width), maksimumsbredde (max-width) eller skjermorientering (orientation).

• I dette eksemplet vises følgende bilder avhengig av skjermbredden.

  • Hvis skjermbredden er 800px eller mer, vises large.jpg.
  • Hvis skjermbredden er 400px eller mer, men mindre enn 800px, vises medium.jpg.
  • Hvis skjermbredden er mindre enn 400px, vises small.jpg (bildet 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 gir et område hvor dynamisk grafikk kan tegnes ved bruk 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 brukes til å definere et bildediagram. Klikkbare områder i diagrammet defineres ved hjelp av <area>-taggen. Dette gjør at spesifikke deler av et bilde kan være klikkbare og føre til en lenke.
• Angi navnet på det tilknyttede kart-elementet (<map>-taggen) i usemap-attributtet til <img>-taggen, med prefikset #.
• Ved å angi alt-attributtet til <area>-taggen på en hensiktsmessig måte, kan du forbedre tilgjengeligheten for synshemmede brukere.

<embed>-tagg

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

• <embed>-taggen brukes til å legge inn eksternt innhold som PDF-er, videoer, eller lyd.

<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 brukes til å legge inn videoinnhold. Du kan spesifisere flere formater ved å bruke <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-attributtet lar deg spesifisere hvor mye av en video som skal lastes inn av nettleseren før avspilling begynner.
  • auto instruerer nettleseren til å forhåndslaste hele mediet. Det kan redusere forsinkelsene ved starten av avspillingen, men data kan lastes ned selv om brukeren ikke spiller av mediet.
  • metadata laster kun mediets metadata (f.eks. varighet, sporinformasjon). Selve mediedataene lastes ikke inn før brukeren starter avspillingen. Dette er egnet når du trenger oppsummeringsinformasjon om mediet.
  • none forhindrer at mediefilen forhåndslastes. Mediet laster ikke ned ressurser før avspillingen starter. Dette er egnet når du ønsker å minimere databruk.

<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 brukes til å legge inn lydinnhold. <source>-taggen støtter flere formater.
• Akkurat som i <video>-taggen, kan preload-attributtet brukes til å spesifisere hvor mye lyd som skal lastes før avspillingen starter.

<track>-taggen

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 brukes til å spesifisere tekstspor som undertekster og bildetekster. Den kan brukes inni <audio>- eller <video>-tagger.
• kind-attributtet lar deg spesifisere formålet med sporet (f.eks. undertekster, bildetekster, kapitler, osv.). Du kan spesifisere følgende verdier.
  • subtitles gir undertekster som oversetter innholdet i videoen eller lyden, eller gjør det lettere å forstå for seerne. Hovedformålet er den direkte oversettelsen av lyd.
  • captions gir tilleggsinformasjon som musikk og lydeffekter for personer som er døve eller har nedsatt hørsel, i tillegg til lyd.
  • descriptions er spor som beskriver det visuelle innholdet i en video, som handlinger og omgivelser, for personer med nedsatt syn.
  • chapters gir kapittelmarkører (kapitteltitler) for å angi spesifikke punkter i videoen.
  • metadata gir tilleggsinformasjon for å analysere eller behandle mediet, men vises ikke for brukerne.

<iframe>-tagg

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

• <iframe>-taggen brukes til å legge inn andre HTML-sider eller eksternt innhold (som nettsider, videoer eller dokumenter) på den nåværende siden. Den brukes ofte til å legge inn YouTube-videoer på en side.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video