Hola a todos, y bienvenidos a la octava clase del Curso de Introducción a HTML5.
Al igual que en la lección anterior, con las tablas, vimos una etiqueta que tiende al desuso, hoy veremos algunas de las más actuales y con mayor potencial del lenguaje de marcado. Los elementos multimedia.
Veremos que podemos añadir imágenes, audios, y vídeos a nuestra web, de manera sencilla, y dándole así un aspecto mucho más atractivo y completo. Cada elemento tiene sus propias etiquetas nuevas, por lo que toma nota de todas las etiquetas relacionadas con la inserción de elementos multimedia, y ponlas a prueba. También jugaremos con las etiquetas vistas anteriormente.
Sin más dilación, ¡Vamos a introducir contenido multimedia en nuestra página web!
RESUMEN DEL VÍDEO:
Hoy veremos el uso de elementos multimedia como imágenes, vídeos, etc. Las imágenes se definen con <img>, que contará con el atributo “src” que nos permite definir la ruta de la misma y el atributo “alt”, que nos permite definir el título.
Para vídeo usaremos <video>, que también usa “src» para su ruta y “type” que permite definir la extensión del mismo.
Se le puedan dar controles adicionales con “Controls”. También se puede usar “autoplay” para reproducción automática o “loop” para crear un bucle. Para audio usaremos <audio>, que tiene las mismas características que <video>.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi OCTAVA clase con TUTORIALESDEPROGRAMACIÓN.COM</title>
</head>
<body>
<img src="Aqui iría el nombre de la imagen y el formato" alt="Fondo con Letras del Logo" width="400px" height="100px" />
<img width="400px" height="100px" src="Aqui iría el nombre de la imagen y el formato" />
<video width="320" height="240" controls autoplay loop>
<source src="Aquí iría el título del vídeo y el formato" type="vídeo/mp4">
<source src="Aquí iría el título del vídeo y el formato" type="vídeo/ogg">
Tu navegador no reproduce ni mp4 ni ogg
</video>
<audio controls>
<source src="Aquí iría el nombre del audio y el formato" type="audio/mpeg">
Tu navegador no reproduce ni mp3 ni wav.
</audio>
</body>
</html>Seguro que ahora tu página web tiene un aspecto más vistoso en funcional. Explora a fondo su funcionamiento, y recuerda encaminar tu web hacia tu objetivo con los elementos que ya conoces.
¡Nos vemos en la próxima clase!