Semana 4

Juan Marcelo Cornejo Ardiles

Programación HTML II

Instituto IACC

Julio 12 de 2020
 Desarrollo

INSTRUCCIONES: Ya se diseñó e implementó por completo el formulario que será utilizado, y

el mismo ya realiza el envío y el almacenaje en la base de datos de la información del usuario. Esta
semana le fue asignado el diseño de la estructura de la página web mediante el uso de CSS.
Primeramente, se deberá hacer la elección del método más apropiado para la inclusión de CSS en
las páginas web (la página del formulario y la respuesta de confirmación generada con PHP), luego
de lo cual se deberá hacer uso del modelo de cajas de CSS a fin de estructurar las mismas,
utilizando los distintos tipos de selectores con el objetivo de ofrecer una interfaz organizada y
profesional.
El documento resultante que deberá generar como entrega de la actividad de la semana 4 deberá
incluir el código CSS requerido y un documento anexo detallando las consideraciones de diseño
que se tomaron en cuenta para hacer la elección y el desarrollo del código CSS.

PRESENTACIÓN:
Con el fin de implementar el uso de CSS desarrollé un archivo llamado Control_4.css el que es
referenciado desde el archivo HTML, mediante la etiqueta :
<link rel="stylesheet" type="text/css" href="Control_4.css">

En este archive generé varias clases que me permitieron modificar la apariencia de la página
HTML.

Con la clase titulo_1, modifiqué la apariencia del título principal, especificando el tipo de letra
(calibri), el espaciamiento con el borde usando padding, el alineamiento del texto, un fondo de
color diferente al del formulario y puntas redondeadas.
.titulo_1{
font-family: calibri;
padding: 10px;
text-align: center;
background-color: #d5cc64;
border-radius: 35px 0px 35px 0px;
}

Con la clase titulo_2 modifico la apariencia del subtitulo del formulario especificando el tipo de
letra y su tamaño.
.titulo_2{
font-family: calibri;
font-size : 15px;
}

Con la clase letra modifico la apariencia de los textos que aparecen en cada una de las secciones
que el usuario debe responder especificando el tipo de letra y su tamaño.
.letra{
font-family: calibri;
font-size : 16px;
}
Con la clase fondo_caja, modifico la apariencia de los campos que están agrupados con la etiqueta
<fieldset> en la página HTML, esta etiqueta permite agrupar y dibujar un borde que los rodea,
además la clase asigna un color diferente al del fondo, bordes redondeados y el ancho de la caja
que rodea los campos.
.fondo_caja{
background-color: #d7d9d2
border:2px solid green;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
max-width:450px;
}
La clase _merana se ocupa al final del formulario para alinear a la derecha el nombre de la
empresa y dar formato al texto.

.merana{
font-family: calibri;
font-size : 16px;
text-align:right;
}
 Bibliografía

IACC (2015). Hojas de estilo CSS I. Programación HTML II. Semana 4.

Customizing the fieldset tag with CSS. Obtenido de,

https://www.xul.fr/en/css/fieldset.php

Colores hexadecimales. Obtenido de,

https://www.colorhexa.com/dfe7c3