Imágenes en HTML5
El uso de imágenes en HTML se realiza mediante la etiqueta "img", se establece las siguientes propiedades- Fuente: src=""
- Alto: height=""
- Ancho: width=""
- Descripción: alt=""
Ejemplo:
<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"
width="200"
height="50"
alt="logo de Blogger"/>En este caso establecemos como fuente de la imagen el logo de Blogger mediante su URL que apunta a un archivo de imagen (pero se puede llamar archivos locales por ejemplo: src="img/foto.png"), un alto de 50px, ancho de 200 px y una descripción que indica que es el logo de Blooger y quedaría de la siguiente manera:
Nota: La descripción es muy importante hoy en día, pues permite que personas con cualquier dificultad visual mediante su navegador y las extensiones para estos casos les indiquen de que se trata aquella imagen que no puedan visualizar.
Sonidos en HTML5
El uso de sonidos mediante la etiqueta "audio" es sencillo y la interfaz viene por defecto en cada navegador que permite su uso. Tiene como atributos:- Controles: controls
- Reproducción automática: autoplay
- Repetición automática: loop
- Pre-carga: preload, para archivos pesados, que puede tomar tres valores:
- Primer caso: preload = "none", no se almacena en el Buffer el archivo.
- Segundo caso: preload = "auto", almacena el archivo.
- Tercer caso: preload = "metada", solo almacena metadatos.
Ejemplo:
<audio src="audio.ogg" controls autoplay loop>
<p>Mensaje en caso no se pueda reproducir en un navegador</p>
</audio>En este caso establecemos como fuente un archivo llamado audio.ogg con los controles, reproducción automática y repeticiones activadas.
Nota: Los formatos más comunes y soportados son ogg y mp3, pero no los únicos.
Mapas en HTML5
Su inserción es mucho más efectiva empleando servicios de terceros como Google MapsEjemplo:
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d124130.9974978055!2d-72.00929001754207!3d-
13.529842657332434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3
!1m2!1s0x916dd5d826598431%3A0x2aa996cc2318315d!2sCusco!5e0!3m2
!1ses-419!2spe!4v1566252558372!5m2!1ses-419!2spe"
width="600" height="450" frameborder="0"
style="border:0" allowfullscreen></iframe>En este caso empleamos el servicio de Google Maps para la ciudad de Cusco:
Video en HTML5
Se pueden implementar mediante la etiqueta "video" o desde un servicio de terceros como YouTubeEjemplos:
<video controls>
<source src="mine.mp4" type="video/mp4">
</video>En este caso establecemos como fuente un archivo llamado mine.mp4. Podemos emplear también Youtube.
