SlideShare a Scribd company logo
1 of 6
Download to read offline
Lo primero que hacemos es abrir notepad++
Luego ya abierto el programa como siempre empezamos con la etiqueta
HTML, seguido colocamos, la etiqueta head y finalmente title para colocar
el título que va a llevar la página web luego si ya podemos continuar
colocando Body que es el cuerpo de la página web.
Luego del Body podemos continuar colocando un texto, párrafo ello
utilizamos la etiqueta <p> y al finalizar colocamos </p>
ESTRUCTURA DE
AUDIO Y VIDEO
Luego podemos colocarle una foto o imagen a nuestra página web con el
siguiente código: <IMG <IMG SRC="images/DSC00278.jpg">.
Después podemos colocarle color a nuestra página web para que sea más
recreativa con el siguiente código: <body bgcolor=pink><br/>
Ahora si podemos introducirle el código para insertar el audio que es el
siguiente: <audio controls="controls" src="images/07 vuelve a mi.mp3">si
su navegador no obedece al control del audio baje un nuevo
navegador</audio>
Finalmente podemos introducirle el código para insertar el audio que es el
siguiente: <video width="400" height="200" controls="controls" proload
="proload"><source src="images/generación 2012.mp4"></video>
Además de lo que le hemos colocado le podemos adicionar muchas cosas
más. Ya terminada la página nos quedara de la siguiente manera.
Como nos pudimos dar cuenta aún faltan más retoque que podemos añadir
como por ejemplo si la queremos centrar simplemente le colocamos
<center> al principio del código y lo cerramos con center igualmente y al
ejecutarla quedara así.
Siempre tenemos que tener en cuenta cuando coloquemos el video porque
al ejecutarlo si es demasiado pesado no se ejecutara, pero si el peso es
poco no habrá dificultad al ejecutarla.
Y también podemos hacer el video en pantalla grande al ejecutar nuestra
página web.
Y así de esta manera se puede añadir muchas cosas más a nuestra página
web a medida de ir aprendiendo.

More Related Content

What's hot

Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!guadaaguiar
 
Trabajo practico 4_guadaa_aguiar![2]
Trabajo practico 4_guadaa_aguiar![2]Trabajo practico 4_guadaa_aguiar![2]
Trabajo practico 4_guadaa_aguiar![2]guadaaguiar
 
Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!guadaaguiar
 
Power point 2010 insertar video
Power point 2010 insertar videoPower point 2010 insertar video
Power point 2010 insertar videoSantiago Vera
 
Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoDenisseChacaguasay
 
Insertar Imagenes Enlaces
Insertar Imagenes EnlacesInsertar Imagenes Enlaces
Insertar Imagenes Enlacessialalsi
 
Tutorial de cómo crear paginas web
Tutorial de cómo crear paginas webTutorial de cómo crear paginas web
Tutorial de cómo crear paginas webMario Villeda
 
Capturar e insertar flash en blog utilizando google sites como alojamiento
Capturar e insertar flash en blog utilizando google sites como alojamientoCapturar e insertar flash en blog utilizando google sites como alojamiento
Capturar e insertar flash en blog utilizando google sites como alojamientoLaura Soulié
 
Paula andrea lópez román
Paula andrea lópez románPaula andrea lópez román
Paula andrea lópez románbekan221
 
Pasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog IIPasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog IIraquelarse
 
Insertar un video a powerpoint
Insertar un video a powerpointInsertar un video a powerpoint
Insertar un video a powerpointgrupo4et
 
Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6bteran
 

What's hot (18)

Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!
 
Trabajo practico 4_guadaa_aguiar![2]
Trabajo practico 4_guadaa_aguiar![2]Trabajo practico 4_guadaa_aguiar![2]
Trabajo practico 4_guadaa_aguiar![2]
 
Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!Trabajo practico 4 guadaa aguiar!
Trabajo practico 4 guadaa aguiar!
 
Obtener licencia educativa de autodesk
Obtener licencia educativa de autodeskObtener licencia educativa de autodesk
Obtener licencia educativa de autodesk
 
Power point 2010 insertar video
Power point 2010 insertar videoPower point 2010 insertar video
Power point 2010 insertar video
 
Manual de ftp
Manual de ftpManual de ftp
Manual de ftp
 
Tutorial
TutorialTutorial
Tutorial
 
Instalación de mastercam - licencia demo
Instalación de mastercam - licencia demoInstalación de mastercam - licencia demo
Instalación de mastercam - licencia demo
 
Html5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimidoHtml5 img gif_sonido_video-comprimido
Html5 img gif_sonido_video-comprimido
 
Gu?a SEO
Gu?a SEOGu?a SEO
Gu?a SEO
 
Insertar Imagenes Enlaces
Insertar Imagenes EnlacesInsertar Imagenes Enlaces
Insertar Imagenes Enlaces
 
Tutorial de cómo crear paginas web
Tutorial de cómo crear paginas webTutorial de cómo crear paginas web
Tutorial de cómo crear paginas web
 
Presentaciones
PresentacionesPresentaciones
Presentaciones
 
Capturar e insertar flash en blog utilizando google sites como alojamiento
Capturar e insertar flash en blog utilizando google sites como alojamientoCapturar e insertar flash en blog utilizando google sites como alojamiento
Capturar e insertar flash en blog utilizando google sites como alojamiento
 
Paula andrea lópez román
Paula andrea lópez románPaula andrea lópez román
Paula andrea lópez román
 
Pasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog IIPasos a seguir para elaborar un blog II
Pasos a seguir para elaborar un blog II
 
Insertar un video a powerpoint
Insertar un video a powerpointInsertar un video a powerpoint
Insertar un video a powerpoint
 
Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6
 

Viewers also liked

Viewers also liked (8)

Medicina Humana
Medicina Humana Medicina Humana
Medicina Humana
 
Human Excretion
Human ExcretionHuman Excretion
Human Excretion
 
e0109
e0109e0109
e0109
 
09 sept 2011
09 sept 201109 sept 2011
09 sept 2011
 
Verbs
VerbsVerbs
Verbs
 
e0102
e0102e0102
e0102
 
Guide été 2011 2
Guide été 2011 2Guide été 2011 2
Guide été 2011 2
 
Spring
SpringSpring
Spring
 

Similar to Pagina web audio y video

Expo Herramientas Digitales (Audio,Imagenes Y Videos )
Expo Herramientas Digitales (Audio,Imagenes  Y Videos )Expo Herramientas Digitales (Audio,Imagenes  Y Videos )
Expo Herramientas Digitales (Audio,Imagenes Y Videos )guest4b4616
 
Primeros pasos en Moodle
Primeros pasos en MoodlePrimeros pasos en Moodle
Primeros pasos en MoodleRoberto Santi
 
Pagina de audio y video
Pagina de audio y videoPagina de audio y video
Pagina de audio y videofjdghfgkhfhg
 
Trabajo Practico N1
Trabajo Practico N1Trabajo Practico N1
Trabajo Practico N1Karenabigail
 
Wordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audioWordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audioEdgar Fernández Mendoza
 
Trabajo de computacion Que es embed
Trabajo de computacion Que es embedTrabajo de computacion Que es embed
Trabajo de computacion Que es embedRonny Chacon
 
Exposicion Equipo 2 Creacion De Un Blog 27 08 09
Exposicion Equipo 2  Creacion De Un Blog 27 08 09Exposicion Equipo 2  Creacion De Un Blog 27 08 09
Exposicion Equipo 2 Creacion De Un Blog 27 08 09Gerardo Esquer
 
Optimizar tus videos para posicionar tu web
Optimizar tus videos para posicionar tu webOptimizar tus videos para posicionar tu web
Optimizar tus videos para posicionar tu webSeoCanarias
 
Apuntes nº 3 iniciación al manejo de blog de aula
Apuntes nº 3 iniciación al manejo de blog de aulaApuntes nº 3 iniciación al manejo de blog de aula
Apuntes nº 3 iniciación al manejo de blog de aulasitamanoli
 
Subir presentaciones al blog
Subir presentaciones al blogSubir presentaciones al blog
Subir presentaciones al blogSol Teacher
 
Trabajo práctico n°6
Trabajo práctico n°6Trabajo práctico n°6
Trabajo práctico n°6Santiatorres
 
Trabajo practico 13
Trabajo practico 13Trabajo practico 13
Trabajo practico 13franestay
 
Contenido multimedia en blogger
Contenido multimedia en bloggerContenido multimedia en blogger
Contenido multimedia en bloggerCarlos Ollero
 

Similar to Pagina web audio y video (20)

Pagina web audio y video
Pagina web audio y videoPagina web audio y video
Pagina web audio y video
 
Expo Herramientas Digitales (Audio,Imagenes Y Videos )
Expo Herramientas Digitales (Audio,Imagenes  Y Videos )Expo Herramientas Digitales (Audio,Imagenes  Y Videos )
Expo Herramientas Digitales (Audio,Imagenes Y Videos )
 
Primeros pasos en Moodle
Primeros pasos en MoodlePrimeros pasos en Moodle
Primeros pasos en Moodle
 
Pagina de audio y video
Pagina de audio y videoPagina de audio y video
Pagina de audio y video
 
I4
I4I4
I4
 
Trabajo practico nº13
Trabajo practico nº13Trabajo practico nº13
Trabajo practico nº13
 
Videos
VideosVideos
Videos
 
Trabajo Practico N1
Trabajo Practico N1Trabajo Practico N1
Trabajo Practico N1
 
Trabajo practico n°8
Trabajo practico n°8 Trabajo practico n°8
Trabajo practico n°8
 
Como crear tu blog
Como crear tu blogComo crear tu blog
Como crear tu blog
 
Tp nº8
Tp nº8Tp nº8
Tp nº8
 
Wordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audioWordpress insertar , imagen, video, presentaciones y audio
Wordpress insertar , imagen, video, presentaciones y audio
 
Trabajo de computacion Que es embed
Trabajo de computacion Que es embedTrabajo de computacion Que es embed
Trabajo de computacion Que es embed
 
Exposicion Equipo 2 Creacion De Un Blog 27 08 09
Exposicion Equipo 2  Creacion De Un Blog 27 08 09Exposicion Equipo 2  Creacion De Un Blog 27 08 09
Exposicion Equipo 2 Creacion De Un Blog 27 08 09
 
Optimizar tus videos para posicionar tu web
Optimizar tus videos para posicionar tu webOptimizar tus videos para posicionar tu web
Optimizar tus videos para posicionar tu web
 
Apuntes nº 3 iniciación al manejo de blog de aula
Apuntes nº 3 iniciación al manejo de blog de aulaApuntes nº 3 iniciación al manejo de blog de aula
Apuntes nº 3 iniciación al manejo de blog de aula
 
Subir presentaciones al blog
Subir presentaciones al blogSubir presentaciones al blog
Subir presentaciones al blog
 
Trabajo práctico n°6
Trabajo práctico n°6Trabajo práctico n°6
Trabajo práctico n°6
 
Trabajo practico 13
Trabajo practico 13Trabajo practico 13
Trabajo practico 13
 
Contenido multimedia en blogger
Contenido multimedia en bloggerContenido multimedia en blogger
Contenido multimedia en blogger
 

More from Sonia Fernanda Idrobo Idrobo

More from Sonia Fernanda Idrobo Idrobo (20)

Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Pasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivoPasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Pasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivoPasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivo
 
Formularios en html5
Formularios en html5Formularios en html5
Formularios en html5
 
Botones pulsantes
Botones pulsantesBotones pulsantes
Botones pulsantes
 
Clips de pelicula
Clips de peliculaClips de pelicula
Clips de pelicula
 
Fundamentales de action script
Fundamentales de action scriptFundamentales de action script
Fundamentales de action script
 
Condicionales
CondicionalesCondicionales
Condicionales
 
Puertos pc
Puertos pcPuertos pc
Puertos pc
 
Puertos pc
Puertos pcPuertos pc
Puertos pc
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 
2° pagina web html5
2° pagina web html52° pagina web html5
2° pagina web html5
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 
Especificar un documento de clase
Especificar un documento de claseEspecificar un documento de clase
Especificar un documento de clase
 

Pagina web audio y video

  • 1. Lo primero que hacemos es abrir notepad++ Luego ya abierto el programa como siempre empezamos con la etiqueta HTML, seguido colocamos, la etiqueta head y finalmente title para colocar el título que va a llevar la página web luego si ya podemos continuar colocando Body que es el cuerpo de la página web. Luego del Body podemos continuar colocando un texto, párrafo ello utilizamos la etiqueta <p> y al finalizar colocamos </p> ESTRUCTURA DE AUDIO Y VIDEO
  • 2. Luego podemos colocarle una foto o imagen a nuestra página web con el siguiente código: <IMG <IMG SRC="images/DSC00278.jpg">. Después podemos colocarle color a nuestra página web para que sea más recreativa con el siguiente código: <body bgcolor=pink><br/>
  • 3. Ahora si podemos introducirle el código para insertar el audio que es el siguiente: <audio controls="controls" src="images/07 vuelve a mi.mp3">si su navegador no obedece al control del audio baje un nuevo navegador</audio> Finalmente podemos introducirle el código para insertar el audio que es el siguiente: <video width="400" height="200" controls="controls" proload ="proload"><source src="images/generación 2012.mp4"></video>
  • 4. Además de lo que le hemos colocado le podemos adicionar muchas cosas más. Ya terminada la página nos quedara de la siguiente manera. Como nos pudimos dar cuenta aún faltan más retoque que podemos añadir como por ejemplo si la queremos centrar simplemente le colocamos <center> al principio del código y lo cerramos con center igualmente y al ejecutarla quedara así.
  • 5. Siempre tenemos que tener en cuenta cuando coloquemos el video porque al ejecutarlo si es demasiado pesado no se ejecutara, pero si el peso es poco no habrá dificultad al ejecutarla. Y también podemos hacer el video en pantalla grande al ejecutar nuestra página web.
  • 6. Y así de esta manera se puede añadir muchas cosas más a nuestra página web a medida de ir aprendiendo.