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