Html img,gif,sound,video

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.