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

Introduccion a Wordpress - Empezando desde cero
Introduccion a Wordpress - Empezando desde ceroIntroduccion a Wordpress - Empezando desde cero
Introduccion a Wordpress - Empezando desde ceroDavid Merinas Ariza
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blogPayball94
 
Subida y bajada de archivos
Subida y bajada de archivosSubida y bajada de archivos
Subida y bajada de archivosasirRoberto
 
Trabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulinaTrabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulinaPau_avila10
 
Conceptos básicos de Wordpress - CMS
Conceptos básicos de Wordpress - CMSConceptos básicos de Wordpress - CMS
Conceptos básicos de Wordpress - CMSBelen De Perez
 
Trabajo practico nº4 sofii salazar
Trabajo practico nº4 sofii salazarTrabajo practico nº4 sofii salazar
Trabajo practico nº4 sofii salazarsofisalazar
 

La actualidad más candente (14)

Plan de capacitacion
Plan de capacitacionPlan de capacitacion
Plan de capacitacion
 
Introduccion a Wordpress - Empezando desde cero
Introduccion a Wordpress - Empezando desde ceroIntroduccion a Wordpress - Empezando desde cero
Introduccion a Wordpress - Empezando desde cero
 
Blog
BlogBlog
Blog
 
Tutorial Weebly
Tutorial WeeblyTutorial Weebly
Tutorial Weebly
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Youtube listo
Youtube listoYoutube listo
Youtube listo
 
Ejercicios del blog
Ejercicios del blogEjercicios del blog
Ejercicios del blog
 
Subida y bajada de archivos
Subida y bajada de archivosSubida y bajada de archivos
Subida y bajada de archivos
 
Html explicacion grado 10
Html explicacion grado 10Html explicacion grado 10
Html explicacion grado 10
 
Trabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulinaTrabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulina
 
Conceptos básicos de Wordpress - CMS
Conceptos básicos de Wordpress - CMSConceptos básicos de Wordpress - CMS
Conceptos básicos de Wordpress - CMS
 
Seo en Blogger
Seo en BloggerSeo en Blogger
Seo en Blogger
 
Trabajo practico nº4
Trabajo practico nº4Trabajo practico nº4
Trabajo practico nº4
 
Trabajo practico nº4 sofii salazar
Trabajo practico nº4 sofii salazarTrabajo practico nº4 sofii salazar
Trabajo practico nº4 sofii salazar
 

Similar a 01

Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoJeffersonAguachela
 
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 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
 
Blog edu blog
Blog edu blogBlog edu blog
Blog edu bloglaunasil
 
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
 
3° pagina web audio y video
3° pagina web audio y video3° pagina web audio y video
3° pagina web audio y videohjxbfajds
 

Similar a 01 (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
 
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
 
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 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
 
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
 

Más de paulcuenca9

Informe grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuencaInforme grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuencapaulcuenca9
 
Chatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertidoChatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertidopaulcuenca9
 
Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)paulcuenca9
 
Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7paulcuenca9
 
Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6paulcuenca9
 
Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5paulcuenca9
 
Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4paulcuenca9
 
Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3paulcuenca9
 
Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2paulcuenca9
 
Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1paulcuenca9
 
Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)paulcuenca9
 
Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13paulcuenca9
 
Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12paulcuenca9
 
Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11paulcuenca9
 

Más de paulcuenca9 (20)

Informe grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuencaInforme grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuenca
 
Chatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertidoChatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertido
 
Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)
 
18
1818
18
 
017
017017
017
 
016
016016
016
 
Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7
 
Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6
 
Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5
 
Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4
 
Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3
 
Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2
 
Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1
 
Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)
 
Vector
VectorVector
Vector
 
15
1515
15
 
14
1414
14
 
Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13
 
Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12
 
Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11
 

Último

investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 

Último (12)

investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 

01

  • 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.