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

La actualidad más candente (17)

Trabajo práctico nº 5
Trabajo práctico nº 5Trabajo práctico nº 5
Trabajo práctico nº 5
 
Cómo embeber objetos web 2
Cómo embeber objetos web 2Cómo embeber objetos web 2
Cómo embeber objetos web 2
 
Presentación1
Presentación1Presentación1
Presentación1
 
Pagina web audio y video
Pagina web audio y videoPagina web audio y video
Pagina web audio y video
 
Practica de primero a
Practica de primero aPractica de primero a
Practica de primero a
 
Artisteerexpouteq
ArtisteerexpouteqArtisteerexpouteq
Artisteerexpouteq
 
Pasos para subir una presentación
Pasos para subir una presentaciónPasos para subir una presentación
Pasos para subir una presentación
 
Pasos para subir una presentación
Pasos para subir una presentaciónPasos para subir una presentación
Pasos para subir una presentación
 
Pasos para subir una presentación
Pasos para subir una presentaciónPasos para subir una presentación
Pasos para subir una presentación
 
flashvortex
flashvortexflashvortex
flashvortex
 
Blog edu blog
Blog edu blogBlog edu blog
Blog edu blog
 
Blog Edu Blog
Blog Edu BlogBlog Edu Blog
Blog Edu Blog
 
Clase 4
Clase 4Clase 4
Clase 4
 
Trabajo práctico 2
Trabajo práctico 2Trabajo práctico 2
Trabajo práctico 2
 
Revista blog-slideboom
Revista blog-slideboomRevista blog-slideboom
Revista blog-slideboom
 
Insertar slideshare en el blog
Insertar slideshare en el blogInsertar slideshare en el blog
Insertar slideshare en el blog
 
Trabajo practico 3
Trabajo practico 3Trabajo practico 3
Trabajo practico 3
 

Similar a Html5 img gif_sonido_video-comprimido

Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoJeffersonAguachela
 
Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoDenisseChacaguasay
 
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
 
Html img,gif,sound,video
Html img,gif,sound,videoHtml img,gif,sound,video
Html img,gif,sound,videoBelenRosales12
 
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 htmlLic. Oney Begambre
 
Trabajo de computacion Que es embed
Trabajo de computacion Que es embedTrabajo de computacion Que es embed
Trabajo de computacion Que es embedRonny Chacon
 
Insertar Audio, Video U Otros Documentos
Insertar Audio, Video U Otros DocumentosInsertar Audio, Video U Otros Documentos
Insertar Audio, Video U Otros DocumentosCarmen Vera
 
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 2emanuelpaz
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2emanuelpaz
 
Trabajo práctico nº6
Trabajo práctico nº6Trabajo práctico nº6
Trabajo práctico nº6maqacampos
 
Creacion blogs sesion3
Creacion blogs sesion3Creacion blogs sesion3
Creacion blogs sesion3Alejandro Caro
 
HTML5 IMG, videos y audio.pptx
HTML5 IMG, videos y audio.pptxHTML5 IMG, videos y audio.pptx
HTML5 IMG, videos y audio.pptxWilderGeronimoCopa
 
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 AWGRvalgreens
 
Trabajo practico Nº13
Trabajo practico Nº13Trabajo practico Nº13
Trabajo practico Nº13rodolfogonella
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2emanuelpaz
 

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
 
Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimido
 
04 (1)
04 (1)04 (1)
04 (1)
 
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
 
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 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
 
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 practico Nº13
Trabajo practico Nº13Trabajo practico Nº13
Trabajo practico Nº13
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 

Más de JoelMorales84 (20)

Informe examen
Informe examenInforme examen
Informe examen
 
Consulta bdd
Consulta bddConsulta bdd
Consulta bdd
 
Base de datos php myadmin (2)
Base de datos   php myadmin (2)Base de datos   php myadmin (2)
Base de datos php myadmin (2)
 
Bucle foreach (1)
Bucle foreach (1)Bucle foreach (1)
Bucle foreach (1)
 
Bucle for
Bucle forBucle for
Bucle for
 
Bucle while
Bucle whileBucle while
Bucle while
 
Sintaxis básica
Sintaxis básicaSintaxis básica
Sintaxis básica
 
Configuración y aplicación de php
Configuración y aplicación de phpConfiguración y aplicación de php
Configuración y aplicación de php
 
Generalidades php (1)
Generalidades php (1)Generalidades php (1)
Generalidades php (1)
 
Diseño de formularios (1)
Diseño de formularios (1)Diseño de formularios (1)
Diseño de formularios (1)
 
Listas
ListasListas
Listas
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Editores de código
Editores de códigoEditores de código
Editores de código
 
Crear archivo html (2)
Crear archivo html (2)Crear archivo html (2)
Crear archivo html (2)
 
Html 5 (5)
Html 5 (5)Html 5 (5)
Html 5 (5)
 
3 s. programacion orientado objetos
3 s. programacion orientado objetos3 s. programacion orientado objetos
3 s. programacion orientado objetos
 
Reglas
Reglas Reglas
Reglas
 
U7
U7U7
U7
 
U66
U66U66
U66
 
U20
U20U20
U20
 

Último

Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdfValeriaCorrea29
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOBRIGIDATELLOLEONARDO
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfUPTAIDELTACHIRA
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONALMiNeyi1
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
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.pdfpatriciaines1993
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
🦄💫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.docxEliaHernndez7
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdfMiguelHuaman31
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICAÁngel Encinas
 

Último (20)

Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
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
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
🦄💫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
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 

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.