Html img,gif,sound,video (1)
- 1. UNIVERSIDAD CENTRAL DEL ECUADOR
- 2. Formas de insertar una imagen • A la hora de crear una página Web podemos introducir gráficos de forma muy sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif o JPEG. • La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SRC", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar. Es decir: <IMG SRC="lugar donde guardo la imagen"> • Supongamos que tenemos la imagen dragonball.gif, que está presente en el mismo, directorio en donde esta la pagina y que la queremos insertar <IMG SRC="dragonball.gif"> • Si una imagen no se puede mostrar por alguna razón, el atributo ALT proporciona texto alternativo para mostrar en su lugar.
- 3. Ejemplo
- 5. GIF <div align="left"> <IMG SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455 cf10f/tenor.gif " alt="gif" border="0"></div> GIF alineado hacia la izquierda del texto Usando atributo div
- 6. <p><IMG SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif " alt="Funny image" border="1" ALIGN=RIGHT> GIF alineado hacia la derecha del texto. Usando atributo ALING</p> <p><IMG SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif " alt="Funny image" border="2" ALIGN=Left> GIF alineado hacia la derecha del texto. Usando atributo ALING</p>
- 7. GIF dentro de una tabla <TABLE BORDER=2 ALIGN="LEFT" width="80%"BGCOLOR=pink > <TH bgcolor=white colspan="2"> Gif</TH> <TR><TD><img src="https://media.tenor.com/images/ b65504dbb7eeafc34f3ae35c455cf10f/t enor.gif"> </TD> <TD><img src="https://media0.giphy.com/media/ 3o6UB5RrlQuMfZp82Y/giphy.gif"></TD ></TR> <tr><td><img src="https://media1.tenor.com/images/ d52b354914d8a0f1ac545b48e2751312/ tenor.gif?itemid=7853088"></td> <td></td></tr> </TABLE>
- 8. GIF dentro de una marquesina <center><marquee bgcolor=#3600FF behavior="alternate" direction="up" width="100%" height=500><marquee direction="right"> <img src="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.g if" border="4"> </marquee></center><br>
- 9. Insertar Audio en HTML HTML introduce un soporte integrado para el contenido multimedia gracias al elemento <audio>, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.
- 10. Atributos de la etiqueta <audio> •Controls: indica si se debe mostrar los controles de reproducción del audio. (play, stop, volumen). •Autoplay: indica si el audio se inicia automáticamente al cargar la pagina html. •Loop: reproducción en bucle: al acabar el audio, a reproducción volverá a empezar una y otra vez. •Preload: indica si el audio se empieza a cargar cuando el navegador carga la pagina html. Poner =“none” en galerías de audios. •Muted: sin audio. •Src: especifica la URL del audio a reproducir.
- 11. Existen varios formatos para poder ingresar un audio en HTML.
- 12. Insertar Video en HTML5 • La etiqueta <video> • La etiqueta VIDEO también tiene un peso muy fuerte en HTML5 por que viene a facilitarnos las cosas en cuanto a la necesidad de agregar contenido audiovisual en nuestra página Web. • La etiqueta <video> es la etiqueta que más famosa se hizo ya que el video en Internet implica muchas innovaciones desde que Flash Player nos propuso usar video con calidad HD y el codec H.264,
- 13. • <video src="video1.mp4" width="640" height="360" controls autoplay preload></video> Expliquemos los atributos de la etiqueta: • SRC: Nos enlaza el archivo de video que queremos reproducir. • WIDTH: Nos define el ancho del video en píxeles. • HEIGHT: Nos define la altura del video en píxeles. • CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen. • AUTOPLAY: Nos permite reproducir el archivo de video desde que se carga la página. • PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproducción en el buffer para que no se trabe por reproducir más de lo que carga.