Code Cats Studio

Curso de Programación - Multimedia y Gráficos HTML

Multimedia y Gráficos en HTML

HTML permite la incorporación de contenido visual y auditivo en las páginas web. Este bloque se centra en elementos básicos para integrar imágenes, figuras, gráficos vectoriales y archivos de audio y video.

Imágenes (<img>, <map>, <area>)

<img> – Imagen

La etiqueta <img> se utiliza para insertar imágenes:

<img src="imagen.jpg" alt="Descripción de la imagen" width="300">

<map> y <area> – Mapas de imagen

Permiten definir áreas clicables dentro de una imagen:

<img src="mapa.jpg" usemap="#mapa1">
<map name="mapa1">
   <area shape="rect" coords="34,44,270,350" href="pagina1.html" alt="Sección 1">
</map>

Figuras y leyendas (<figure>, <figcaption>)

<figure>
   <img src="paisaje.jpg" alt="Paisaje natural" width="400">
   <figcaption>Vista panorámica de un paisaje montañoso</figcaption>
</figure>

Gráficos y vectores (<canvas>, <svg>)

<canvas> – Lienzo para gráficos dinámicos

<canvas id="miCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

Se requiere JavaScript para dibujar en el canvas.

<svg> – Gráficos vectoriales

<svg width="200" height="100">
   <rect width="200" height="100" style="fill:blue;stroke:black;stroke-width:2;"></rect>
</svg>

Audio y Video (<audio>, <video>, <source>, <track>)

<audio> – Archivo de audio

<audio controls>
   <source src="cancion.mp3" type="audio/mpeg">
   Su navegador no soporta audio HTML5.
</audio>

<video> – Archivo de video

<video width="320" height="240" controls>
   <source src="video.mp4" type="video/mp4">
   <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
   Su navegador no soporta video HTML5.
</video>

Resumen