SlideShare una empresa de Scribd logo
1 de 5
Descargar para leer sin conexión
GUÍA DE USO DE LABORATORIOS
ESTUDIANTE: Oliver Guaman
SEMESTRE: Tercero
PARALELO: C
CARRERA: Pedagogía de las Ciencias Experimentales Informática
Informe N°2
TEMA:
Imágen, audio y video en HTML.
OBJETIVO:
Desplegar una página web y sus contenidos por medio del código HTML para visualizar por
pantalla imágenes, videos e incluso audio.
RESULTADOS DE APRENDIZAJE
• Correcto uso de códigos en Visual Studio Code.
• Insertar atributos con valor url.
• Obtener trabajos precisos con los elementos y propiedades que contiene HTML.
ACTIVIDADES:
-Crear un nuevo archivo en Visual Studio Code.
-Estructurar el analizador de código estático HTML.
-Indicar la dirección y el nombre de la imágen, video o audio que se desea insertar.
DESARROLLO DE CONTENIDOS
1. En primer lugar, abrir el programa Visual Studio Code.
2. En segundo lugar, se creará un nuevo proyecto dando click izquierdo sobre “File” y “New
File”.
3. En tercer lugar, para guardar el archivo creado seleccionamos nuevamente “File” y “Save
As”, para a continuación introducir el correspondiente nombre del trabajo y guardarlo con
formato HTML.
4. Luego se establece el analizador de código estático “<html>” para configurar el cuerpo con
la información general del documento a través de la propiedad (<head> / </head>) en el
que se incluye tanto el elemento “META” con el atributo “charset” indicando la
codificación de caracteres, como los metadatos que definen el titulo (<title> / </title>).
5. Luego, dentro del cuerpo (<body> / </body>) del código se insertará la dirección o fuente
que contiene la imágen, video y audio a utilizar. Aquí se realiza la estructura nombrando a
las propiedades requeridas junto al atributo “src”, en donde será importante conocer el
formato que usa cada elemento ya que mediante este se formarán las propiedades. Además,
se puede usar la configuración de tamaños con “height” para la altura y “width” para el
ancho.
6. Por consiguiente, se cierra la línea de código con un “/html”. Y se guarda la información
ingresada por medio de un “Save”.
7. Ingresar en la carpeta en donde se guardó el archivo con formato HTML y dar doble click
sobre el paquete
<html>
<head>
<META charset="UTF-8"></META>
<title>Imágen</title>
</head>
<BODY>
<img src="Orquidea.jpg" height="500px" width="500px">
<video src="y2mate.com - como insertar o poner una IMAGEN desde PC en HTMLvis
ual studio code_480p"controls="controls" width="680" height="480"></video>
<audio src="[INSTRUMENTAL] Wolf Sony - Mi guía [Prod. Warrobit]" controls="c
ontrols" width="680" height="480"></audio>
</body>
</html>
CÓDIGO
Informe 2

Más contenido relacionado

La actualidad más candente

Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code) Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code) Carlos Guzmán
 
Inf 4 (cotizacion de autos)
Inf 4 (cotizacion de autos)Inf 4 (cotizacion de autos)
Inf 4 (cotizacion de autos)Carlos Guzmán
 
Inf 15 (while y for) tablas de multiplicar
Inf 15 (while y for) tablas de multiplicarInf 15 (while y for) tablas de multiplicar
Inf 15 (while y for) tablas de multiplicarCarlos Guzmán
 
Inf 7 (instalación del xampp)
Inf 7 (instalación del xampp)Inf 7 (instalación del xampp)
Inf 7 (instalación del xampp)Carlos Guzmán
 
Inf 14 (ventadellantas) rines
Inf 14 (ventadellantas)   rinesInf 14 (ventadellantas)   rines
Inf 14 (ventadellantas) rinesCarlos Guzmán
 
Inf 19 (consulya y borrado de datos)
Inf 19 (consulya y borrado de datos)Inf 19 (consulya y borrado de datos)
Inf 19 (consulya y borrado de datos)Carlos Guzmán
 
Word 2003 anyi barrientos
Word 2003 anyi barrientosWord 2003 anyi barrientos
Word 2003 anyi barrientosAnyiangie
 
Creación de bases de datos en SQL SERVER 2014
Creación de bases de datos en SQL SERVER 2014Creación de bases de datos en SQL SERVER 2014
Creación de bases de datos en SQL SERVER 2014luis fernando vera merino
 
Pasos para la creación de base de dato
Pasos para la creación de base de datoPasos para la creación de base de dato
Pasos para la creación de base de datocarlos_cse
 

La actualidad más candente (20)

Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code) Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code)
 
Informe
InformeInforme
Informe
 
Proyecto final
Proyecto finalProyecto final
Proyecto final
 
Informe 1
Informe 1Informe 1
Informe 1
 
Inf 4 (cotizacion de autos)
Inf 4 (cotizacion de autos)Inf 4 (cotizacion de autos)
Inf 4 (cotizacion de autos)
 
Inf 13 (switch)
Inf 13 (switch)Inf 13 (switch)
Inf 13 (switch)
 
Inf 15 (while y for) tablas de multiplicar
Inf 15 (while y for) tablas de multiplicarInf 15 (while y for) tablas de multiplicar
Inf 15 (while y for) tablas de multiplicar
 
Inf 7 (instalación del xampp)
Inf 7 (instalación del xampp)Inf 7 (instalación del xampp)
Inf 7 (instalación del xampp)
 
Informe 7
Informe 7Informe 7
Informe 7
 
Inf 14 (ventadellantas) rines
Inf 14 (ventadellantas)   rinesInf 14 (ventadellantas)   rines
Inf 14 (ventadellantas) rines
 
Informe 5
Informe 5Informe 5
Informe 5
 
Inf 19 (consulya y borrado de datos)
Inf 19 (consulya y borrado de datos)Inf 19 (consulya y borrado de datos)
Inf 19 (consulya y borrado de datos)
 
Word 2003 anyi barrientos
Word 2003 anyi barrientosWord 2003 anyi barrientos
Word 2003 anyi barrientos
 
Creación de bases de datos en SQL SERVER 2014
Creación de bases de datos en SQL SERVER 2014Creación de bases de datos en SQL SERVER 2014
Creación de bases de datos en SQL SERVER 2014
 
ebscoHost
ebscoHostebscoHost
ebscoHost
 
Proyecto
ProyectoProyecto
Proyecto
 
Pasos para la creación de base de dato
Pasos para la creación de base de datoPasos para la creación de base de dato
Pasos para la creación de base de dato
 
Php bd1
Php bd1Php bd1
Php bd1
 
Consignas
ConsignasConsignas
Consignas
 
Dilmarys jimenez
Dilmarys jimenezDilmarys jimenez
Dilmarys jimenez
 

Similar a Informe 2

Similar a Informe 2 (20)

I1 u1
I1 u1I1 u1
I1 u1
 
I2
I2I2
I2
 
Practico html
Practico htmlPractico html
Practico html
 
Practico html
Practico htmlPractico html
Practico html
 
html5
html5html5
html5
 
Lenguajes de marcado
Lenguajes de marcadoLenguajes de marcado
Lenguajes de marcado
 
Tarea investigación formativa unidad 1. html
Tarea investigación formativa unidad 1. htmlTarea investigación formativa unidad 1. html
Tarea investigación formativa unidad 1. html
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
I1 u1
I1 u1I1 u1
I1 u1
 
Informe1
Informe1Informe1
Informe1
 
Html Sharon 4101
Html Sharon 4101Html Sharon 4101
Html Sharon 4101
 
Informe2
Informe2Informe2
Informe2
 
Manual html
Manual htmlManual html
Manual html
 
Trabajo practico numero 3 sol y fer
Trabajo practico numero 3 sol y ferTrabajo practico numero 3 sol y fer
Trabajo practico numero 3 sol y fer
 
Trabajo practico numero 3 sol y fer
Trabajo practico numero 3 sol y ferTrabajo practico numero 3 sol y fer
Trabajo practico numero 3 sol y fer
 
Trabajo practico numero 3 sol y fer
Trabajo practico numero 3 sol y ferTrabajo practico numero 3 sol y fer
Trabajo practico numero 3 sol y fer
 
Html
HtmlHtml
Html
 
Htlm
HtlmHtlm
Htlm
 
I4
I4I4
I4
 
Códigos HTML.pptx Sede magdalena ortega de nariño
Códigos HTML.pptx Sede magdalena ortega de nariñoCódigos HTML.pptx Sede magdalena ortega de nariño
Códigos HTML.pptx Sede magdalena ortega de nariño
 

Más de OliverGuaman1

Más de OliverGuaman1 (20)

Informe 3
Informe 3Informe 3
Informe 3
 
Proyecto final
Proyecto finalProyecto final
Proyecto final
 
3 s. programacion orientado objetos
3 s. programacion orientado objetos3 s. programacion orientado objetos
3 s. programacion orientado objetos
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Informe chatbot
Informe chatbotInforme chatbot
Informe chatbot
 
Meses del año
Meses del añoMeses del año
Meses del año
 
Operaciones básicas
Operaciones básicasOperaciones básicas
Operaciones básicas
 
Tablas de multiplicar
Tablas de multiplicarTablas de multiplicar
Tablas de multiplicar
 
Arreglo bidimensional ejercicio
Arreglo bidimensional ejercicioArreglo bidimensional ejercicio
Arreglo bidimensional ejercicio
 
Arreglobidimensional 210209215632
Arreglobidimensional 210209215632Arreglobidimensional 210209215632
Arreglobidimensional 210209215632
 
Arreglo unidimensional
Arreglo unidimensionalArreglo unidimensional
Arreglo unidimensional
 
Arreglo unidimensional
Arreglo unidimensional Arreglo unidimensional
Arreglo unidimensional
 
Arreglo unidimencional
Arreglo unidimencionalArreglo unidimencional
Arreglo unidimencional
 
Arreglo bidimencional p
Arreglo bidimencional pArreglo bidimencional p
Arreglo bidimencional p
 
Acfrog~1
Acfrog~1Acfrog~1
Acfrog~1
 
Billetes y monedas
Billetes y monedasBilletes y monedas
Billetes y monedas
 
Codigo matriz
Codigo matrizCodigo matriz
Codigo matriz
 
Trabajo grupal
Trabajo grupalTrabajo grupal
Trabajo grupal
 
Sentencia if
Sentencia ifSentencia if
Sentencia if
 
Eclipse
EclipseEclipse
Eclipse
 

Último

¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!Yes Europa
 
NOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACIONNOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACIONKarina224599
 
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdfGUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdfIsaacRobertoRamrezLe
 
CONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datosCONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datosJENNIFERBERARDI1
 
FASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptxFASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptx10ColungaFloresJosSa
 
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptxEMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptxdaryel2
 
-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo Venezuela-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo VenezuelaJESUS341998
 

Último (7)

¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!¡Explora el boletín del 29 abril de 2024!
¡Explora el boletín del 29 abril de 2024!
 
NOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACIONNOM-011-STPS-2001 NORMATIVA PRESENTACION
NOM-011-STPS-2001 NORMATIVA PRESENTACION
 
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdfGUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
GUIA DOCENTE NEUMOLOGIA 2024 guia guia.pdf
 
CONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datosCONTRATO DE TRABAJO, remuneraciones y otros datos
CONTRATO DE TRABAJO, remuneraciones y otros datos
 
FASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptxFASES DE LA CONSULTORÍA- parte 1aa.pptx
FASES DE LA CONSULTORÍA- parte 1aa.pptx
 
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptxEMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
EMBARQUE Y DESEMBARQUE VEHICULOS MILITARES .pptx
 
-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo Venezuela-PEIC-NUEVO de plantel educativo Venezuela
-PEIC-NUEVO de plantel educativo Venezuela
 

Informe 2

  • 1. GUÍA DE USO DE LABORATORIOS ESTUDIANTE: Oliver Guaman SEMESTRE: Tercero PARALELO: C CARRERA: Pedagogía de las Ciencias Experimentales Informática Informe N°2 TEMA: Imágen, audio y video en HTML. OBJETIVO: Desplegar una página web y sus contenidos por medio del código HTML para visualizar por pantalla imágenes, videos e incluso audio. RESULTADOS DE APRENDIZAJE • Correcto uso de códigos en Visual Studio Code. • Insertar atributos con valor url. • Obtener trabajos precisos con los elementos y propiedades que contiene HTML. ACTIVIDADES: -Crear un nuevo archivo en Visual Studio Code. -Estructurar el analizador de código estático HTML. -Indicar la dirección y el nombre de la imágen, video o audio que se desea insertar. DESARROLLO DE CONTENIDOS 1. En primer lugar, abrir el programa Visual Studio Code.
  • 2. 2. En segundo lugar, se creará un nuevo proyecto dando click izquierdo sobre “File” y “New File”. 3. En tercer lugar, para guardar el archivo creado seleccionamos nuevamente “File” y “Save As”, para a continuación introducir el correspondiente nombre del trabajo y guardarlo con formato HTML. 4. Luego se establece el analizador de código estático “<html>” para configurar el cuerpo con la información general del documento a través de la propiedad (<head> / </head>) en el que se incluye tanto el elemento “META” con el atributo “charset” indicando la codificación de caracteres, como los metadatos que definen el titulo (<title> / </title>).
  • 3. 5. Luego, dentro del cuerpo (<body> / </body>) del código se insertará la dirección o fuente que contiene la imágen, video y audio a utilizar. Aquí se realiza la estructura nombrando a las propiedades requeridas junto al atributo “src”, en donde será importante conocer el formato que usa cada elemento ya que mediante este se formarán las propiedades. Además, se puede usar la configuración de tamaños con “height” para la altura y “width” para el ancho. 6. Por consiguiente, se cierra la línea de código con un “/html”. Y se guarda la información ingresada por medio de un “Save”. 7. Ingresar en la carpeta en donde se guardó el archivo con formato HTML y dar doble click sobre el paquete
  • 4. <html> <head> <META charset="UTF-8"></META> <title>Imágen</title> </head> <BODY> <img src="Orquidea.jpg" height="500px" width="500px"> <video src="y2mate.com - como insertar o poner una IMAGEN desde PC en HTMLvis ual studio code_480p"controls="controls" width="680" height="480"></video> <audio src="[INSTRUMENTAL] Wolf Sony - Mi guía [Prod. Warrobit]" controls="c ontrols" width="680" height="480"></audio> </body> </html> CÓDIGO