EVALUACIÓN
Programación Web I
Semana 6
Nombre del estudiante:
Reimundo Kramer
Fecha de entrega: 15-07-2024
Carrera: Técnico en Informática
EVALUACIÓN
DESARROLLO:
1. Modifica el tamaño y color de fondo de las diferentes secciones de la página web:
cabecera (header), contenido principal (main) y pie de página (footer). Escribe el
fragmento de código HTML y las reglas CSS aplicadas, considerando márgenes, rellenos,
bordes y colores.
RSPTA:
HTML
<doctype html>
<html>
<head>
<meta charset=”UTF-8”/>
<link rel="stylesheet" href="[Link]"/>
<Title>PROYECTO N° 6 CSS </title>
<style type="text/css">
h {color:rgb(30, 255, 0);font-family:'Times New Roman', Times,
serif;font-style: oblique ;}
{color:rgb(30, 255, 0);font-family: Georgia, 'Times New Roman', Times,
serif;}
</style>
<style type="text/css">
@import"[Link]";
</style>
<link rel="stylesheet" href="[Link]" type="text/css">
</head>
<body>
<BR>
<h1> PROYECTO SIN FINES DE LUCRO </h1>
<h2> Quienes Somos</h2>
<div id="test">
<span>El equipo de la Fundación, formado por más de 150 profesionales,
busca ser un referente por la buena gestión de los recursos, por el
impacto de sus actuaciones y por la pertinencia de los proyectos que
apoya. Nuestra seña de identidad es la apuesta por la calidad en todas
nuestras actuaciones</span>
2
EVALUACIÓN
</div>
<h3> Actividades Realizadas</h3>
<ul>
<li>Descubriendo las cubiertas vegetales en cultivos leñosos (CUBIWOOD)
</li>
<li>Gestión sostenible de la biodiversidad fúngica como motor de
servicios eco sistémicos en el medio rural (FUNGIVERSO)
</li>
<li>Programa formativo de respuesta ante fauna marina petroleada en las
costas sudamericanas (RESPONDER)
</li>
<li> Prácticas de Manejo Sostenible de la tierra y la preservación de la
BIO-diversidad y otros servicios eco sistémicos en la cuenca del Mijares
(MASBIO)
</li>
<li>Regeneración del bosque patagónico en el Parque Natural Torres del
Paine (Proyecto Bosque)
</li>
</ul>
<h3>Próximos Eventos Planificados</h3>
<table>
<tr>
<th>Próximos Eventos Planificados</th>
</tr>
<tr>
<td>Valorización de servicios eco sistémicos en los Valles del norte de
Chile </td>
</tr>
<tr>
<td>Promoviendo la bioeconomía forestal en socio ecosistemas de montaña a
través de la puesta en valor de los sistemas silvopastoriles locales
</td>
</tr>
</table>
<h4> Temas de Interés</h4>
<h4> Biodiversidad</h4>
3
EVALUACIÓN
CSS
body{
background-color:grey;
padding: 15px;
}
body{
color: rgb(30, 255, 0);font-family: 'Lucida Sans', 'Lucida Sans
Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-
serif; font-style: oblique;
font-size: 21px;
}
header{
max-width: 1050px;
min-height: 150px;
padding: 35px;
margin: auto;
border-radius: 20% 20% 5px 5px;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
background: #0084ff;
background-position: 24px;
}
h1{
border-radius: 18% 18% 10px 10px;
font-family: 'Times New Roman', Times, serif;
font-size: 32px;
background-position: 24px;
background-color: blue;
color: yellowgreen;
border-width: 4px;
border-style: double;
border-color: #910808;
padding: 35px;
}
h2, h3, h4{
margin-top: auto;
margin-bottom: 2%;
4
EVALUACIÓN
margin-left: 50px;
max-width: 950px;
padding: 45px;
}
footer{
max-width: 950px;
padding: 35px;
background: #910808;
margin: auto;
border-radius: 0% 0% 25px 25px;
color: chartreuse;
text-align: center;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
font-size: 30 px;
WEB
5
EVALUACIÓN
PIE PÁGINA
En este desarrollo aplique Cambiar de color al cuerpo en general con la función background-
color: .Incluso cambie color del texto completo en conjunto con su tipo de letra y tamaño,
cambie títulos dando un cajón de color, bordes, modificación tamaño letra y tipo de letra y
también a los subtítulos, además agregue pie de página a la cual se le dio un estilo diferente el
cual se aprecia en rojo en la última imagen. En este desarrollo utilice las siguientes funciones;
o border-radius:
o font-family:
o font-size:
o background-position:
o background-color:
o color:
o border-width:
o border-style:
o border-color:
o padding:
o margin-top:
o margin-bottom:
6
EVALUACIÓN
o margin-left:
2. Escribe el fragmento de código HTML y los estilos CSS necesarios para cambiar la
fuente y el tamaño del texto de los encabezados y los párrafos mostrados en la página
web, para mejorar la legibilidad y la estética. Además, aplica estilos a la lista de
actividades realizadas y a la tabla de los próximos eventos planificados por la
organización, para mejorar su apariencia y facilitar la comprensión de la información por
parte de los usuarios.
RSPTA:
h3{
border-radius: 14% 14% 7px 7px;
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
background-position: 16%;
background-color: #ae00ff;
color:#000;
border-width: 6px;
border-left-style: groove;
border-color: hwb(238 3% 83%);
padding: 17px;
li{
border-width: 1cap;
border-left-style: dashed;
border-color: hwb(238 3% 83%);
padding: 1% ;
color: #000;
border-style: double;
font-size: 16px;
}
table{
border-radius: 4px 4px 3px 3px;
7
EVALUACIÓN
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
background-position: 16%;
background-color: #ae00ff;
color:#000;
border-width: 6px;
border-color: hwb(238 5% 28%);
padding: 7px;
border-style: dotted;
font-size: 16px;
border-spacing: 12px;
}
HTML
<link rel="stylesheet" href="[Link]" type="text/css">
<h3> Actividades Realizadas</h3>
<ul>
<li>Descubriendo las cubiertas vegetales en cultivos leñosos (CUBIWOOD)
</li>
<li>Gestión sostenible de la biodiversidad fúngica como motor de
servicios eco sistémicos en el medio rural (FUNGIVERSO)
</li>
<li>Programa formativo de respuesta ante fauna marina petroleada en las
costas sudamericanas (RESPONDER)
</li>
<li> Prácticas de Manejo Sostenible de la tierra y la preservación de la
BIO-diversidad y otros servicios eco sistémicos en la cuenca del Mijares
(MASBIO)
</li>
<li>Regeneración del bosque patagónico en el Parque Natural Torres del
Paine (Proyecto Bosque)
</li>
</ul>
<h3>Próximos Eventos Planificados</h3>
<table>
<tr>
<th>Próximos Eventos Planificados</th>
8
EVALUACIÓN
</tr>
<tr>
<td>Valorización de servicios eco sistémicos en los Valles del norte de
Chile </td>
</tr>
<tr>
<td>Promoviendo la bioeconomía forestal en socio ecosistemas de montaña a
través de la puesta en valor de los sistemas silvopastoriles locales
</td>
</tr>
</table>
WEB
En este desarrollo aplique similar al ítem 1, pero fue enfocado a la sección actividades realizadas
y a la tabla de los próximos eventos donde se le aplico márgenes, bordes, cambio de letra y
cambio de tamaño, relleno y color. Detallo funciones utilizadas;
border-radius:
font-family:
font-size:
background-position:
background-color:
color:
9
EVALUACIÓN
border-width:
border-left-style:
border-color:
padding:
border-style:
font-size:
border-spacing:
3. Posiciona elementos multimedia incluidos en la sección Temas de interés, tales como las
imágenes, utilizando técnicas como posicionamiento relativo o absoluto, así como el
dimensionamiento de elementos, para ajustar el tamaño y lograr una disposición
coherente y atractiva dentro de la página web. Escribe el fragmento de código HTML y
las reglas CSS aplicadas, considerando márgenes, rellenos, bordes y colores.
RSPTA:
Esta semana se aplicó los conceptos de las cajas en CSS A HTML, donde se modificó por medio
de los distintos comandos los textos, según lo requerido, se aplicó al contenido, relleno, bordes,
colores, márgenes, tipos de letras diferentes y lo mismo con el tamaño de la letra
10
EVALUACIÓN
REFERENCIAS BIBLIOGRÁFICAS
Lectura de IACC:
IACC. (2024). Programación Web I en la modalidad online. Modelo de cajas con CSS Semana 6
Referencia: libro
Celaya Luna, A. (2014). Creación de páginas web: HTML 5. Editorial ICB.
[Link]
Fernández Casado, P. E. (2023). Construcción y diseño de páginas web con HTML, CSS y
JavaScript. (1ª ed.). RA-MA Editorial. [Link]
Pérez Rodríguez, M. D. (2012). Introducción al lenguaje HTML 5. (1a ed.). Editorial ICB.
[Link]
Referencia: artículo en sitio web
[Link] (2023). Modelo de cajas CSS: cómo es y para qué sirve.
[Link]
MDN Contributors (2023). Modelo de caja de CSS. MDN Web Docs.
[Link]
Sintes Marco, B. (2022). CSS: Modelo de caja.
[Link]
11
EVALUACIÓN
W3Schools (2023). Bordes CSS. [Link]
_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
W3Schools (2023). Tutorial CSS. [Link]
_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc
12