Inf 5 (diseños con texto y multimedia)

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°5
TEMA:
Estilos en HTML.
OBJETIVO:
Configurar una página web con etiquetas por medio del código HTML para desarrollar diferentes
estilos de texto y multimedia.
RESULTADOS DE APRENDIZAJE
 Correcto uso de las herramientas de Visual Studio Code.
 Reconocer los diferentes elementos que constituyen una página web.
 Obtener trabajos con diferentes estilos, tamaños y diseños de caracteres.
ACTIVIDADES:
-Crear un nuevo archivo en Visual Studio Code.
-Establecer un estilo determinado a la página web que se usará.
-Introducir los textos, imágenes, audios, videos y archivos que conformarán la navegación anidada.
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 “<html>” para configurar 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 título (<title> / </title>). Además, se incluye
la información de estilo con el elemento “style” junto a un “type” que determina el tipo de
entrada que se va a utilizar.

5. Después se desarrolla el contenido del documento con un (<body> / </body>) en donde se
incluye el texto que se presentará ya sea por medio del elemento (<p> / </p>) o con los
diferentes tipos de encabezados priorizando el diseño incrustado en el “style” que se llama
por medio de la clase respectiva. También se utilizan tipos de etiquetas como (<center> /
</center>) para centrar el texto o el elemento “iframe” para llamar a la imágen, video,
audio o archivo con dirección web que se desee presentar mediante un “src”.
6. A continuación, se podrá ir estructurando diferentes diseños y etiquetas determinadas
incluyendo títulos visuales “title”, bordes “frameborder”, métodos “allow” (como la
reproducción y pausado de videos), booleanos para pantalla completa con
“allowfullscreen” o simplemente nuevos párrafos que serán separados con la función
“<br>”.
7. Seguidamente, se cierra el cuerpo con un (</body>) y el analizador de código estático con
un (</html>). Guardar por medio de un “Save” la información ingresada.
8. Entrar a la carpeta en donde se guardó el archivo con formato HTML y dar doble click
sobre el navegador.

9. Por último, se podrá observar el diseño que se ha conformado para con la página web,
mostrando formatos, colores y tamaños de los textos incrustados. Adicionalmente se logrará
interactuar con los archivos o videos colocados en el código, para una mejor presentación
de la página.
CÓDIGO
<html>
<head>
<meta charset="utf-8">
<title>Web con estilo</title>
<style type="text/css">
.rojo {
color: red;
}
.verde {
color: green;

}
.grande {
font-size: 400%;
}
#pequeno {
font-size: 50%;
}
.subrayado {
text-decoration:underline;
}
</style>
</head>
<body>´
<center><h1 class="grande verde">INTRODUCCIÓN A IFRAMES</h1></center>
<iframe src="https://programavza.000webhostapp.com/index.html" frameborde
r="0"></iframe>
EJEMPLO
<p class="rojo">es un elemento HTML que permite insertar o incrustar un d
ocumento HTML dentro de un documento HTML principal</p>
<p class="verde">Carcaterísticas</p>
<center><iframe width="200" height="200" src="https://www.youtube.com/emb
ed/e-ebqZlq2y8" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
<p id="mediano">
• En concreto iframe sirve para crear un espacio dentro de la página dond
e se puede incrustar otra web.
<br>
• Es un cuadrado cuyas dimensiones debe especificar el desarrollador en l
a propia página, incluidas por los atributos width y height en la propia etiqueta
IFRAME.
<br>
• Esa <span class="subrayado">página web tendrá sus propios contenidos y
estilos.</span></p>
</body>
</html>
BIBLIOGRAFÍA:

f.) ________________________ f.) _______________________
Carlos Jossue Guzmán Gómez MSc. Víctor Zapata
ESTUDIANTE DOCENTE
• López, L. (2021, 14 septiembre). style - HTML: Lenguaje de etiquetas de hipertexto | MDN.
MDN Web Docs. https://developer.mozilla.org/es/docs/Web/HTML/Element/style
• Llerena, A. (2021, 14 septiembre). : el elemento Inline Frame - HTML: Lenguaje de etiquetas
de hipertexto | MDN. MDN Web Docs.
https://developer.mozilla.org/es/docs/Web/HTML/Element/iframe
• ÁLvarez, M. (2001, 1 enero). Qué es HTML. Desarrollo Web.
https://desarrolloweb.com/articulos/que-es-html.html

Inf 5 (diseños con texto y multimedia)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Inf 5 (diseños con texto y multimedia)

Similar a Inf 5 (diseños con texto y multimedia) (20)

Más de Carlos Guzmán

Más de Carlos Guzmán (20)

Último

Último (20)

Inf 5 (diseños con texto y multimedia)