SlideShare ist ein Scribd-Unternehmen logo
1 von 6
ESTRUCTURA DE
      AUDIO Y VIDEO

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

Weitere ähnliche Inhalte

Was ist angesagt?

Trabajo practico n1
Trabajo practico n1Trabajo practico n1
Trabajo practico n1SabriLazarte
 
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!
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
 
Power point 2010 insertar video
Power point 2010 insertar videoPower point 2010 insertar video
Power point 2010 insertar videoSantiago Vera
 
Trabajo practico n°4 mili arguelles...........
Trabajo practico n°4 mili arguelles...........Trabajo practico n°4 mili arguelles...........
Trabajo practico n°4 mili arguelles...........miliarguelles
 
Trabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguellesTrabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguellesmiliarguelles
 
Trabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguellesTrabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguellesmiliarguelles
 
Publicar en internet
Publicar en internetPublicar en internet
Publicar en internetlopzrobrt
 
Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6bteran
 
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
 
Paula andrea lópez román
Paula andrea lópez románPaula andrea lópez román
Paula andrea lópez románbekan221
 

Was ist angesagt? (16)

Trabajo practico n1
Trabajo practico n1Trabajo practico n1
Trabajo practico n1
 
Curso blog
Curso blogCurso blog
Curso blog
 
Presentación1
Presentación1Presentación1
Presentación1
 
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!
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]
 
Power point 2010 insertar video
Power point 2010 insertar videoPower point 2010 insertar video
Power point 2010 insertar video
 
Trabajo practico n°4 mili arguelles...........
Trabajo practico n°4 mili arguelles...........Trabajo practico n°4 mili arguelles...........
Trabajo practico n°4 mili arguelles...........
 
Slideshare Audio
Slideshare AudioSlideshare Audio
Slideshare Audio
 
Tutorial
TutorialTutorial
Tutorial
 
Trabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguellesTrabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguelles
 
Trabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguellesTrabajo practico n°4 mili arguelles
Trabajo practico n°4 mili arguelles
 
Publicar en internet
Publicar en internetPublicar en internet
Publicar en internet
 
Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6Trabajo Práctico Nro. 6
Trabajo Práctico Nro. 6
 
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
 
Paula andrea lópez román
Paula andrea lópez románPaula andrea lópez román
Paula andrea lópez román
 

Ähnlich wie 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 videohjxbfajds
 
Primeros pasos en Moodle
Primeros pasos en MoodlePrimeros pasos en Moodle
Primeros pasos en MoodleRoberto Santi
 
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
 
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
 
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
 
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
 
Efectos de video, transiciones, efecto karaoke
Efectos de video, transiciones, efecto karaokeEfectos de video, transiciones, efecto karaoke
Efectos de video, transiciones, efecto karaokeTati Medina
 
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
 
Trabajo de computacion Que es embed
Trabajo de computacion Que es embedTrabajo de computacion Que es embed
Trabajo de computacion Que es embedRonny Chacon
 
Presentación grupo 5 youtube.pptx
Presentación grupo 5 youtube.pptxPresentación grupo 5 youtube.pptx
Presentación grupo 5 youtube.pptxPablo Caruso Costa
 
Tutorial como hacer una presentación en Google Drive
Tutorial como hacer una presentación en Google Drive Tutorial como hacer una presentación en Google Drive
Tutorial como hacer una presentación en Google Drive Claudia Casariego
 

Ähnlich wie Pagina web audio y video (20)

3° pagina web audio y video
3° pagina web audio y video3° pagina web audio y video
3° pagina web audio y video
 
Primeros pasos en Moodle
Primeros pasos en MoodlePrimeros pasos en Moodle
Primeros pasos en Moodle
 
I4
I4I4
I4
 
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 )
 
Videos
VideosVideos
Videos
 
Trabajo practico nº13
Trabajo practico nº13Trabajo practico nº13
Trabajo practico nº13
 
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
 
Como crear tu blog
Como crear tu blogComo crear tu blog
Como crear tu blog
 
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
 
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
 
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
 
Tp nº8
Tp nº8Tp nº8
Tp nº8
 
Efectos de video, transiciones, efecto karaoke
Efectos de video, transiciones, efecto karaokeEfectos de video, transiciones, efecto karaoke
Efectos de video, transiciones, efecto karaoke
 
Taller word
Taller wordTaller word
Taller word
 
Taller word
Taller wordTaller word
Taller word
 
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
 
Trabajo de computacion Que es embed
Trabajo de computacion Que es embedTrabajo de computacion Que es embed
Trabajo de computacion Que es embed
 
Presentación grupo 5 youtube.pptx
Presentación grupo 5 youtube.pptxPresentación grupo 5 youtube.pptx
Presentación grupo 5 youtube.pptx
 
Tutorial como hacer una presentación en Google Drive
Tutorial como hacer una presentación en Google Drive Tutorial como hacer una presentación en Google Drive
Tutorial como hacer una presentación en Google Drive
 

Mehr von Sonia Fernanda Idrobo Idrobo

Mehr von 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. ESTRUCTURA DE AUDIO Y VIDEO 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>
  • 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.