Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Inf 2 (imagen, audio, video)
Similar a Inf 2 (imagen, audio, video) (20)
Más de Carlos Guzmán
Más de Carlos Guzmán (20)
Último
Último (20)
Inf 2 (imagen, audio, video)
- 1. 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. 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. 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.
- 5. 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