SlideShare una empresa de Scribd logo
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

Trabajo practico n1_mely_t.
Trabajo practico n1_mely_t.Trabajo practico n1_mely_t.
Trabajo practico n1_mely_t.
Melytapia
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2emanuelpaz
 
Videoy audio en HTML5
Videoy audio en HTML5Videoy audio en HTML5
Videoy audio en HTML5Julio Alfaro
 
Empressr presentación
Empressr presentaciónEmpressr presentación
Empressr presentaciónjamesbond-96
 
Powerpoint Agustina Rivero
Powerpoint Agustina RiveroPowerpoint Agustina Rivero
Powerpoint Agustina Rivero22205 22205
 
Trabajo Practico Nº13
Trabajo Practico Nº13Trabajo Practico Nº13
Trabajo Practico Nº13rodolfogonella
 
Pagina de weebly
Pagina de weeblyPagina de weebly
Weebly: cómo armar una página profesional para docentes
Weebly: cómo armar una página profesional para docentesWeebly: cómo armar una página profesional para docentes
Weebly: cómo armar una página profesional para docentes
Edinson Uriarte
 
Tutorial weebly
Tutorial weeblyTutorial weebly
Tutorial weebly
dariur
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blogPayball94
 

La actualidad más candente (14)

Youtube listo
Youtube listoYoutube listo
Youtube listo
 
Trabajo practico n1_mely_t.
Trabajo practico n1_mely_t.Trabajo practico n1_mely_t.
Trabajo practico n1_mely_t.
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 
Videoy audio en HTML5
Videoy audio en HTML5Videoy audio en HTML5
Videoy audio en HTML5
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Presentación1
Presentación1Presentación1
Presentación1
 
Movie Maker
Movie MakerMovie Maker
Movie Maker
 
Empressr presentación
Empressr presentaciónEmpressr presentación
Empressr presentación
 
Powerpoint Agustina Rivero
Powerpoint Agustina RiveroPowerpoint Agustina Rivero
Powerpoint Agustina Rivero
 
Trabajo Practico Nº13
Trabajo Practico Nº13Trabajo Practico Nº13
Trabajo Practico Nº13
 
Pagina de weebly
Pagina de weeblyPagina de weebly
Pagina de weebly
 
Weebly: cómo armar una página profesional para docentes
Weebly: cómo armar una página profesional para docentesWeebly: cómo armar una página profesional para docentes
Weebly: cómo armar una página profesional para docentes
 
Tutorial weebly
Tutorial weeblyTutorial weebly
Tutorial weebly
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blog
 

Similar a Html5 img gif_sonido_video-comprimido

01
0101
Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimido
StalinNaranjo2
 
Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimido
JoelMorales84
 
Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimido
LENINMATEO1
 
Html img,gif,sound,video
Html img,gif,sound,videoHtml img,gif,sound,video
Html img,gif,sound,video
JeffersonAguachela
 
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
 
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
Lic. 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 Documentos
Carmen Vera
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2emanuelpaz
 
Trabajo practico numero 6
Trabajo practico numero 6 Trabajo practico numero 6
Trabajo practico numero 6 mariajove
 
Trabajo práctico nº6
Trabajo práctico nº6Trabajo práctico nº6
Trabajo práctico nº6maqacampos
 
Blog edu blog
Blog edu blogBlog edu blog
Blog edu blog
Federico Nieto
 
Blog edu blog
Blog edu blogBlog edu blog
Blog edu bloglaunasil
 
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
valgreens
 
Creacion blogs sesion3
Creacion blogs sesion3Creacion blogs sesion3
Creacion blogs sesion3
Alejandro Caro
 
El blog
El blogEl blog
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2emanuelpaz
 
Trabajo practico Nº13
Trabajo practico Nº13Trabajo practico Nº13
Trabajo practico Nº13rodolfogonella
 

Similar a Html5 img gif_sonido_video-comprimido (20)

01
0101
01
 
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
 
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
Html img,gif,sound,videoHtml img,gif,sound,video
Html img,gif,sound,video
 
Html img,gif,sound,video (1)
Html img,gif,sound,video (1)Html img,gif,sound,video (1)
Html img,gif,sound,video (1)
 
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 prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 
Trabajo practico numero 6
Trabajo practico numero 6 Trabajo practico numero 6
Trabajo practico numero 6
 
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
 
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
 
Creacion blogs sesion3
Creacion blogs sesion3Creacion blogs sesion3
Creacion blogs sesion3
 
El blog
El blogEl blog
El blog
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 
Trabajo practico Nº13
Trabajo practico Nº13Trabajo practico Nº13
Trabajo practico Nº13
 

Más de DenisseChacaguasay

Tablas u3 e5
Tablas u3 e5Tablas u3 e5
Tablas u3 e5
DenisseChacaguasay
 
Ejercicio denisse chacaguasay 3_c
Ejercicio denisse chacaguasay 3_cEjercicio denisse chacaguasay 3_c
Ejercicio denisse chacaguasay 3_c
DenisseChacaguasay
 
Tarea con switch
Tarea con switchTarea con switch
Tarea con switch
DenisseChacaguasay
 
Ejercicios y operadores lógicos
Ejercicios y operadores lógicosEjercicios y operadores lógicos
Ejercicios y operadores lógicos
DenisseChacaguasay
 
Sintaxis básica, variables y constantes
Sintaxis básica, variables y constantesSintaxis básica, variables y constantes
Sintaxis básica, variables y constantes
DenisseChacaguasay
 
Img20210708 18023345
Img20210708 18023345Img20210708 18023345
Img20210708 18023345
DenisseChacaguasay
 
Sintaxis básica, variables y constantes (3)
Sintaxis básica, variables y constantes (3)Sintaxis básica, variables y constantes (3)
Sintaxis básica, variables y constantes (3)
DenisseChacaguasay
 
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
DenisseChacaguasay
 
I1 u2
I1 u2I1 u2
I2 u2
I2 u2I2 u2

Más de DenisseChacaguasay (20)

Operadores y expresiones
Operadores y expresionesOperadores y expresiones
Operadores y expresiones
 
Vectores
VectoresVectores
Vectores
 
Bucle foreach
Bucle foreachBucle foreach
Bucle foreach
 
Bucle for (1)
Bucle for (1)Bucle for (1)
Bucle for (1)
 
Bucle while
Bucle whileBucle while
Bucle while
 
Sentencias de decision (2)
Sentencias de decision (2)Sentencias de decision (2)
Sentencias de decision (2)
 
Tablas u3 e5
Tablas u3 e5Tablas u3 e5
Tablas u3 e5
 
Ejercicio denisse chacaguasay 3_c
Ejercicio denisse chacaguasay 3_cEjercicio denisse chacaguasay 3_c
Ejercicio denisse chacaguasay 3_c
 
Tarea con switch
Tarea con switchTarea con switch
Tarea con switch
 
I7 u2
I7 u2I7 u2
I7 u2
 
I6 u2
I6 u2I6 u2
I6 u2
 
I5 u2
I5 u2I5 u2
I5 u2
 
Ejercicios y operadores lógicos
Ejercicios y operadores lógicosEjercicios y operadores lógicos
Ejercicios y operadores lógicos
 
Sintaxis básica, variables y constantes
Sintaxis básica, variables y constantesSintaxis básica, variables y constantes
Sintaxis básica, variables y constantes
 
Img20210708 18023345
Img20210708 18023345Img20210708 18023345
Img20210708 18023345
 
Sintaxis básica, variables y constantes (3)
Sintaxis básica, variables y constantes (3)Sintaxis básica, variables y constantes (3)
Sintaxis básica, variables y constantes (3)
 
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
 
I1 u2
I1 u2I1 u2
I1 u2
 
I2 u2
I2 u2I2 u2
I2 u2
 
Generalidades php
Generalidades phpGeneralidades php
Generalidades php
 

Último

MIP PAPA Rancha Papa.pdf.....y caracteristicas
MIP PAPA  Rancha Papa.pdf.....y caracteristicasMIP PAPA  Rancha Papa.pdf.....y caracteristicas
MIP PAPA Rancha Papa.pdf.....y caracteristicas
jheisonraulmedinafer
 
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptxc3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
Martín Ramírez
 
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
JAVIER SOLIS NOYOLA
 
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIAFICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
JavierMontero58
 
Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1
MauricioSnchez83
 
HABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdf
HABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdfHABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdf
HABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdf
DIANADIAZSILVA1
 
PPT: El fundamento del gobierno de Dios.
PPT: El fundamento del gobierno de Dios.PPT: El fundamento del gobierno de Dios.
PPT: El fundamento del gobierno de Dios.
https://gramadal.wordpress.com/
 
Educar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdfEducar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdf
Demetrio Ccesa Rayme
 
Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
arleyo2006
 
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptxSemana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
LorenaCovarrubias12
 
Automatización de proceso de producción de la empresa Gloria SA (1).pptx
Automatización de proceso de producción de la empresa Gloria SA (1).pptxAutomatización de proceso de producción de la empresa Gloria SA (1).pptx
Automatización de proceso de producción de la empresa Gloria SA (1).pptx
GallardoJahse
 
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de MadridHorarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
20minutos
 
Libro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdfLibro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdf
danitarb
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
sandradianelly
 
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernándezPRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
Ruben53283
 
CUENTO EL TIGRILLO DESOBEDIENTE PARA INICIAL
CUENTO EL TIGRILLO DESOBEDIENTE PARA INICIALCUENTO EL TIGRILLO DESOBEDIENTE PARA INICIAL
CUENTO EL TIGRILLO DESOBEDIENTE PARA INICIAL
DivinoNioJess885
 
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptxCLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
LilianaRivera778668
 
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
auxsoporte
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
rosannatasaycoyactay
 
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
20minutos
 

Último (20)

MIP PAPA Rancha Papa.pdf.....y caracteristicas
MIP PAPA  Rancha Papa.pdf.....y caracteristicasMIP PAPA  Rancha Papa.pdf.....y caracteristicas
MIP PAPA Rancha Papa.pdf.....y caracteristicas
 
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptxc3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
 
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
 
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIAFICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
 
Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1Mauricio-Presentación-Vacacional- 2024-1
Mauricio-Presentación-Vacacional- 2024-1
 
HABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdf
HABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdfHABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdf
HABILIDADES MOTRICES BASICAS Y ESPECIFICAS.pdf
 
PPT: El fundamento del gobierno de Dios.
PPT: El fundamento del gobierno de Dios.PPT: El fundamento del gobierno de Dios.
PPT: El fundamento del gobierno de Dios.
 
Educar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdfEducar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdf
 
Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
 
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptxSemana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
 
Automatización de proceso de producción de la empresa Gloria SA (1).pptx
Automatización de proceso de producción de la empresa Gloria SA (1).pptxAutomatización de proceso de producción de la empresa Gloria SA (1).pptx
Automatización de proceso de producción de la empresa Gloria SA (1).pptx
 
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de MadridHorarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
 
Libro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdfLibro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdf
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
 
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernándezPRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
 
CUENTO EL TIGRILLO DESOBEDIENTE PARA INICIAL
CUENTO EL TIGRILLO DESOBEDIENTE PARA INICIALCUENTO EL TIGRILLO DESOBEDIENTE PARA INICIAL
CUENTO EL TIGRILLO DESOBEDIENTE PARA INICIAL
 
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptxCLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
CLASE N.1 ANÁLISIS ADMINISTRATIVO EMPRESARIAL presentación.pptx
 
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24CALENDARIZACION DEL MES DE JUNIO - JULIO 24
CALENDARIZACION DEL MES DE JUNIO - JULIO 24
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
 
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
Horarios y fechas de la PAU 2024 en la Comunidad Valenciana.
 

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.