SlideShare una empresa de Scribd logo
1 de 12
Descargar para leer sin conexión
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 PARAAGREGAR IMÁGENES A UNA PÁGINA WEB ES
<IMG> Y VAACOMPAÑ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 PAGINAY 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.
EJEMPLO
GIF
<div align="left">
<IMG
SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif "
alt="gif" border="0"></div>
GIF alineado hacia la izquierda del texto
Usando atributo div
GIF alineado hacia la izquierda del texto
Usando atributo div
<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 izquierda del texto. Usando atributo ALING</p>
GIF alineado hacia la derecha del
texto. Usando atributo ALING
GIF alineado hacia la izquierda del
texto. Usando atributo ALING
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/b65504
dbb7eeafc34f3ae35c455cf10f/tenor.gif">
</TD>
<TD><img
src="https://media0.giphy.com/media/3o6UB
5RrlQuMfZp82Y/giphy.gif"></TD></TR>
<tr><td><img
src="https://media1.tenor.com/images/d52b3
54914d8a0f1ac545b48e2751312/tenor.gif?ite
mid=7853088"></td>
<td></td></tr>
</TABLE>
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.gif"
border="4">
</marquee></center><br>
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.
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.
EXISTEN VARIOS FORMATOS PARA PODER INGRESAR
UN AUDIO EN HTML.
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,
•<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.

Más contenido relacionado

La actualidad más candente

5 Creación De Entradas
5  Creación De Entradas5  Creación De Entradas
5 Creación De Entradas
Conrado Perea
 
Tutorial weebly
Tutorial weeblyTutorial weebly
Tutorial weebly
dariur
 
Teoria blog parte 2
Teoria blog parte 2Teoria blog parte 2
Teoria blog parte 2
msmile98
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blog
Payball94
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
emanuelpaz
 

La actualidad más candente (13)

5 Creación De Entradas
5  Creación De Entradas5  Creación De Entradas
5 Creación De Entradas
 
Tutorial weebly
Tutorial weeblyTutorial weebly
Tutorial weebly
 
Teoria blog parte 2
Teoria blog parte 2Teoria blog parte 2
Teoria blog parte 2
 
Plan de capacitacion
Plan de capacitacionPlan de capacitacion
Plan de capacitacion
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Blog
BlogBlog
Blog
 
Tutorial Weebly
Tutorial WeeblyTutorial Weebly
Tutorial Weebly
 
Introduccion a Wordpress - Empezando desde cero
Introduccion a Wordpress - Empezando desde ceroIntroduccion a Wordpress - Empezando desde cero
Introduccion a Wordpress - Empezando desde cero
 
Youtube listo
Youtube listoYoutube listo
Youtube listo
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blog
 
Seo en Blogger
Seo en BloggerSeo en Blogger
Seo en Blogger
 
Conceptos básicos de Wordpress - CMS
Conceptos básicos de Wordpress - CMSConceptos básicos de Wordpress - CMS
Conceptos básicos de Wordpress - CMS
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 

Similar a Html5 img gif_sonido_video-comprimido

Html img,gif,sound,video (1)
Html img,gif,sound,video (1)Html img,gif,sound,video (1)
Html img,gif,sound,video (1)
StalinNaranjo2
 
Trabajo de computacion Que es embed
Trabajo de computacion Que es embedTrabajo de computacion Que es embed
Trabajo de computacion Que es embed
Ronny Chacon
 
Trabajo practico numero 6
Trabajo practico numero 6 Trabajo practico numero 6
Trabajo practico numero 6
mariajove
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
emanuelpaz
 
Trabajo práctico nº6
Trabajo práctico nº6Trabajo práctico nº6
Trabajo práctico nº6
maqacampos
 
Blog edu blog
Blog edu blogBlog edu blog
Blog edu blog
launasil
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
emanuelpaz
 
3° pagina web audio y video
3° pagina web audio y video3° pagina web audio y video
3° pagina web audio y video
hjxbfajds
 

Similar a Html5 img gif_sonido_video-comprimido (20)

Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimido
 
Html img,gif,sound,video (1)
Html img,gif,sound,video (1)Html img,gif,sound,video (1)
Html img,gif,sound,video (1)
 
Html img,gif,sound,video
Html img,gif,sound,videoHtml img,gif,sound,video
Html img,gif,sound,video
 
Construcción de una pagina web con html
Construcción de una pagina web con htmlConstrucción de una pagina web con html
Construcción de una pagina web con html
 
Trabajo de computacion Que es embed
Trabajo de computacion Que es embedTrabajo de computacion Que es embed
Trabajo de computacion Que es embed
 
Insertar Audio, Video U Otros Documentos
Insertar Audio, Video U Otros DocumentosInsertar Audio, Video U Otros Documentos
Insertar Audio, Video U Otros Documentos
 
Trabajo practico numero 6
Trabajo practico numero 6 Trabajo practico numero 6
Trabajo practico numero 6
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 
Trabajo práctico nº6
Trabajo práctico nº6Trabajo práctico nº6
Trabajo práctico nº6
 
Blog edu blog
Blog edu blogBlog edu blog
Blog edu blog
 
Blog Edu Blog
Blog Edu BlogBlog Edu Blog
Blog Edu Blog
 
Blog edu blog
Blog edu blogBlog edu blog
Blog edu blog
 
Creacion blogs sesion3
Creacion blogs sesion3Creacion blogs sesion3
Creacion blogs sesion3
 
HTML5 IMG, videos y audio.pptx
HTML5 IMG, videos y audio.pptxHTML5 IMG, videos y audio.pptx
HTML5 IMG, videos y audio.pptx
 
El blog
El blogEl blog
El blog
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 
Pagina web audio y video
Pagina web audio y videoPagina web audio y video
Pagina web audio y video
 
3° pagina web audio y video
3° pagina web audio y video3° pagina web audio y video
3° pagina web audio y video
 
Trabajo practico 6
Trabajo practico 6Trabajo practico 6
Trabajo practico 6
 

Más de StalinNaranjo2 (20)

Presentación Marca personal orgánica pastel.pdf
Presentación Marca personal orgánica pastel.pdfPresentación Marca personal orgánica pastel.pdf
Presentación Marca personal orgánica pastel.pdf
 
Informe de base de datos y reporte general
Informe de base de datos y reporte generalInforme de base de datos y reporte general
Informe de base de datos y reporte general
 
Informe de base de datos
Informe de base de datosInforme de base de datos
Informe de base de datos
 
Consulta bdd
Consulta bddConsulta bdd
Consulta bdd
 
Ingreso y consulta de datos
Ingreso y consulta de datosIngreso y consulta de datos
Ingreso y consulta de datos
 
Conexion base-de-datos-php
Conexion base-de-datos-phpConexion base-de-datos-php
Conexion base-de-datos-php
 
Informe de base de datos
Informe de base de datosInforme de base de datos
Informe de base de datos
 
Base de datos php myadmin
Base de datos   php myadminBase de datos   php myadmin
Base de datos php myadmin
 
Chatbots
ChatbotsChatbots
Chatbots
 
Vectores (1)
Vectores (1)Vectores (1)
Vectores (1)
 
Bucle foreach
Bucle foreachBucle foreach
Bucle foreach
 
Bucle for
Bucle forBucle for
Bucle for
 
Informe de nuemeros a letras
Informe de nuemeros a letrasInforme de nuemeros a letras
Informe de nuemeros a letras
 
Informe de utilización de get unidad 3
Informe de utilización de get unidad 3Informe de utilización de get unidad 3
Informe de utilización de get unidad 3
 
Informe tabla
Informe tablaInforme tabla
Informe tabla
 
Bucle while
Bucle whileBucle while
Bucle while
 
Informe sentencia swicht meses del año
Informe sentencia swicht meses del añoInforme sentencia swicht meses del año
Informe sentencia swicht meses del año
 
Sentencias de decision
Sentencias de decisionSentencias de decision
Sentencias de decision
 
Informe individual programacion1
Informe individual programacion1Informe individual programacion1
Informe individual programacion1
 
Operadores y expresiones
Operadores y expresionesOperadores y expresiones
Operadores y expresiones
 

Último

RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
pvtablets2023
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
EliaHernndez7
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
jlorentemartos
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
patriciaines1993
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 

Último (20)

Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
Diapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaDiapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundaria
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnn
 

Html5 img gif_sonido_video-comprimido

  • 1. 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 PARAAGREGAR IMÁGENES A UNA PÁGINA WEB ES <IMG> Y VAACOMPAÑ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 PAGINAY 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.
  • 4. GIF <div align="left"> <IMG SRC="https://media.tenor.com/images/b65504dbb7eeafc34f3ae35c455cf10f/tenor.gif " alt="gif" border="0"></div> GIF alineado hacia la izquierda del texto Usando atributo div GIF alineado hacia la izquierda del texto Usando atributo div
  • 5. <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 izquierda del texto. Usando atributo ALING</p> GIF alineado hacia la derecha del texto. Usando atributo ALING GIF alineado hacia la izquierda del texto. Usando atributo ALING
  • 6. 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/b65504 dbb7eeafc34f3ae35c455cf10f/tenor.gif"> </TD> <TD><img src="https://media0.giphy.com/media/3o6UB 5RrlQuMfZp82Y/giphy.gif"></TD></TR> <tr><td><img src="https://media1.tenor.com/images/d52b3 54914d8a0f1ac545b48e2751312/tenor.gif?ite mid=7853088"></td> <td></td></tr> </TABLE>
  • 7. 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.gif" border="4"> </marquee></center><br>
  • 8. 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.
  • 9. 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.
  • 10. EXISTEN VARIOS FORMATOS PARA PODER INGRESAR UN AUDIO EN HTML.
  • 11. 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,
  • 12. •<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.