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

Teoria blog parte 2
Teoria blog parte 2Teoria blog parte 2
Teoria blog parte 2
msmile98
 
Trabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulinaTrabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulina
Pau_avila10
 
Videoy audio en HTML5
Videoy audio en HTML5Videoy audio en HTML5
Videoy audio en HTML5
Julio Alfaro
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
emanuelpaz
 
Tutorial weebly
Tutorial weeblyTutorial weebly
Tutorial weebly
dariur
 
Trabajo Practico Nº13
Trabajo Practico Nº13Trabajo Practico Nº13
Trabajo Practico Nº13
rodolfogonella
 
Trabajo practico Nº13
Trabajo practico Nº13Trabajo practico Nº13
Trabajo practico Nº13
rodolfogonella
 

La actualidad más candente (15)

Teoria blog parte 2
Teoria blog parte 2Teoria blog parte 2
Teoria blog parte 2
 
Trabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulinaTrabajo práctico nº 2 paulina
Trabajo práctico nº 2 paulina
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Videoy audio en HTML5
Videoy audio en HTML5Videoy audio en HTML5
Videoy audio en HTML5
 
Trabajo prctico n 2
Trabajo prctico n 2Trabajo prctico n 2
Trabajo prctico n 2
 
Presentación1
Presentación1Presentación1
Presentación1
 
Movie Maker
Movie MakerMovie Maker
Movie Maker
 
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
 
Trabajo Practico Nº13
Trabajo Practico Nº13Trabajo Practico Nº13
Trabajo Practico Nº13
 
Issuu
IssuuIssuu
Issuu
 
Pagina de weebly
Pagina de weeblyPagina de weebly
Pagina de weebly
 
Curso De Wordpress
Curso De WordpressCurso De Wordpress
Curso De Wordpress
 
Creación de pagina web en weebbly
Creación de pagina web en weebblyCreación de pagina web en weebbly
Creación de pagina web en weebbly
 
Trabajo practico Nº13
Trabajo practico Nº13Trabajo practico Nº13
Trabajo practico Nº13
 

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 LENINMATEO1 (20)

Examen
ExamenExamen
Examen
 
Chatbot
ChatbotChatbot
Chatbot
 
Cheque
ChequeCheque
Cheque
 
Ejercicios basicos php lenin quishpe
Ejercicios basicos php lenin quishpeEjercicios basicos php lenin quishpe
Ejercicios basicos php lenin quishpe
 
Tabla de multiplicar con for y while
Tabla de multiplicar con for y whileTabla de multiplicar con for y while
Tabla de multiplicar con for y while
 
Tabla de multiplicar con for
Tabla de multiplicar con forTabla de multiplicar con for
Tabla de multiplicar con for
 
Tabla de multiplicar con while
Tabla de multiplicar con whileTabla de multiplicar con while
Tabla de multiplicar con while
 
Tarea con switch
Tarea con switchTarea con switch
Tarea con switch
 
Uso de variables en php
Uso de variables en phpUso de variables en php
Uso de variables en php
 
In 29
In 29In 29
In 29
 
In 28
In 28In 28
In 28
 
In 27
In 27In 27
In 27
 
In 26
In 26In 26
In 26
 
In 25
In 25In 25
In 25
 
In 24
In 24In 24
In 24
 
In 23
In 23In 23
In 23
 
In 22
In 22In 22
In 22
 
In 21
In 21In 21
In 21
 
In 20
In 20In 20
In 20
 
In 18
In 18In 18
In 18
 

Último (6)

Mapa conceptual de el hardware y software
Mapa conceptual de el hardware y softwareMapa conceptual de el hardware y software
Mapa conceptual de el hardware y software
 
HIDRAULICA PRINCIPIOS FISICOS , LEY DE PASCAL Y FUNDAMENTOS video.pptx
HIDRAULICA PRINCIPIOS FISICOS , LEY DE PASCAL Y FUNDAMENTOS video.pptxHIDRAULICA PRINCIPIOS FISICOS , LEY DE PASCAL Y FUNDAMENTOS video.pptx
HIDRAULICA PRINCIPIOS FISICOS , LEY DE PASCAL Y FUNDAMENTOS video.pptx
 
Vision de asignatura ESTRUCTURA DE DATOS.pptx
Vision de asignatura ESTRUCTURA DE DATOS.pptxVision de asignatura ESTRUCTURA DE DATOS.pptx
Vision de asignatura ESTRUCTURA DE DATOS.pptx
 
PRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdf
PRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdfPRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdf
PRESENTACION SISTEMAS OPERATIVOS MOVILES_20240424_235225_0000.pdf
 
La busqueda de la relevancia en la economia (Harberger).pptx
La busqueda de la relevancia en la economia (Harberger).pptxLa busqueda de la relevancia en la economia (Harberger).pptx
La busqueda de la relevancia en la economia (Harberger).pptx
 
477407774-EMBRIOLOGIA-DEL-SISTEMA-NERVIOSO.pptx
477407774-EMBRIOLOGIA-DEL-SISTEMA-NERVIOSO.pptx477407774-EMBRIOLOGIA-DEL-SISTEMA-NERVIOSO.pptx
477407774-EMBRIOLOGIA-DEL-SISTEMA-NERVIOSO.pptx
 

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.