Lecția 4: Imagini și conținut media

HTML permite integrarea conținutului multimedia, cum ar fi imagini, fișiere audio și video. Aceste elemente contribuie la o experiență vizuală și auditivă mai bogată pentru utilizatori.

Elemente pentru media

<img src="https://mate-online.ro/wp-content/uploads/2024/11/vizite.jpg" alt="..."> — inserează o imagine;
<audio controls> <source src="..." type="audio/mpeg"> </audio> — inserează un fișier audio cu controale;
<video controls> <source src="..." type="video/mp4"> </video> — inserează un fișier video cu controale.

Exemplu simplu

<img src="https://mate-online.ro/wp-content/uploads/2024/11/vizite.jpg" alt="Elevi din viitor" width="300">

<audio controls>
  <source src="sunet.mp3" type="audio/mpeg">
  Browserul tău nu suportă elementul audio.
</audio>

<video controls width="300">
  <source src="clip.mp4" type="video/mp4">
  Browserul tău nu suportă elementul video.
</video>

Previzualizare cod

Explicații:

1. Tagul `<img>`

<img> este un element HTML folosit pentru a afișa o imagine în pagină. Este un tag autoînchis, adică nu are nevoie de o pereche de închidere (</img> nu există).

src="..." – atributul src (prescurtare de la „source”) specifică adresa (URL-ul) imaginii care trebuie afișată. În exemplul tău, imaginea este localizată pe site-ul mate-online.ro.
alt="..." – atributul alt (prescurtare de la „alternative”) definește un text alternativ care va fi afișat dacă imaginea nu se încarcă (de exemplu, din cauza unei erori de rețea) sau este citită de un cititor de ecran (pentru nevăzători). Este important și pentru accesibilitate și SEO.
width="300" – acest atribut setează lățimea imaginii la 300 de pixeli. Înălțimea este ajustată automat pentru a păstra proporțiile.

Această linie de cod inserează o imagine cu o lățime de 300px și cu text alternativ „Elevi din viitor”, care apare dacă imaginea nu se poate încărca.

2. Tagul `<audio>`

<audio> este folosit pentru a introduce conținut audio (muzică, înregistrări etc.) în pagină. Este un tag pereche, deci are început și sfârșit: <audio>...</audio>.

controls – este un atribut care face să apară un panou de control cu butoane de play/pause, volum, derulare etc. Fără acest atribut, sunetul nu poate fi controlat de utilizator.
<source src="..." type="..." /> – definește sursa fișierului audio și formatul acestuia. În exemplul dat:
- src="sunet.mp3" indică fișierul audio.
- type="audio/mpeg" specifică formatul fișierului (MPEG audio).
Textul dintre <audio> și </audio> – este afișat doar dacă browserul nu suportă elementul audio. În cazul tău: „Browserul tău nu suportă elementul audio.”

Acest cod va afișa un player audio pentru fișierul „sunet.mp3” și va afișa un mesaj alternativ dacă browserul nu poate reda sunetul.

3. Tagul `<video>`

<video> este utilizat pentru a reda fișiere video direct în pagină. Este, ca și <audio>, un element pereche.

controls – adaugă butoane de control video (redare, pauză, volum etc.). Fără acest atribut, clipul ar rula automat sau nu ar putea fi controlat deloc.
width="300" – setează lățimea videoclipului la 300 de pixeli. Înălțimea este ajustată automat pentru a păstra proporțiile.
<source src="..." type="..." /> – definește fișierul video și tipul acestuia. În exemplu:
- src="clip.mp4" este locația fișierului video.
- type="video/mp4" indică formatul (MP4, cel mai comun și acceptat de toate browserele).
Textul dintre <video> și </video> – este afișat dacă browserul nu poate reda clipul video. În cazul tău: „Browserul tău nu suportă elementul video.”

Acest cod încarcă un videoclip care poate fi redat de utilizator și oferă un mesaj alternativ dacă suportul lipsește.