Inf 2 (imagen, audio, video)

GUÍA DE USO DE LABORATORIOS
ESTUDIANTE: Guzmán Gómez Carlos Jossue
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.

8. Por último, al ejecutar el programa se visualiza la imagen, video y audio insertado con los
tamaños establecidos para la interacción correspondiente.
CÓDIGO
<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>
BIBLIOGRAFÍA:
• Peiró, R. (2021, 20 enero). Lenguaje HTML. Economipedia.
https://economipedia.com/definiciones/lenguaje-
html.html#:%7E:text=El%20lenguaje%20html%20(hypertext%20markup,saltos%20de%20p%C3
%A1gina%2C%20entre%20otras.

f.) ________________________ f.) _______________________
Carlos Jossue Guzmán Gómez MSc. Víctor Zapata
ESTUDIANTE DOCENTE
• González, E. (2018). Etiquetas HTML básicas: imágenes. img. src, alt. width, height. Apr.
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=484:eti
quetas-html-basicas-imagenes-img-src-alt-width-height-deprecated-border-align-rutas-
cu00714b&catid=69&Itemid=192

Inf 2 (imagen, audio, video)

Más contenido relacionado

La actualidad más candente

Similar a Inf 2 (imagen, audio, video)

Más de Carlos Guzmán

Último

Inf 2 (imagen, audio, video)