Contro 4 Programación HTML

Hojas de estilo CSS

Mónica Chávez Calderón

Programación HTML II

Instituto IACC

12 de julio 2020

Desarrollo

De acuerdo a lo aprendido en la semana en curso paso a demostrar implementación de hoja de estilo CSS, aplicada al formulario ya creado con anterioridad

[pic 1]

En mi formulario HTML, las modificaciones que realice fueron, generar el código que me permita utilizar mi hoja de estilo CSS, y agregar imagen, además de una modificación en el código de los botones de envío y borrado del formulario, que me resultara más fácil a la hora de aplicar estilo CSS.

[pic 2]

Posteriormente en mi archivo PHP, le hice las siguientes modificaciones:[pic 3]

[pic 4]

[pic 5]

 Inserte un echo para llamar al archivo CSS y la imagen, además cree una variable con el mensaje a mostrar en pantalla, posterior a eso inserte un echo después del if, para llamar a la variable y aplicar estilo CSS, dentro del mismo código.

[pic 6]

A continuación, el detalle de la hoja CSS que cree:

[pic 7]

[pic 8]

Dentro de todo lo diseñado en CSS, cabe destacar, los botones de envio y borrado del formulario, ya que tiene 2 opciones de mostrarse, de acuerdo a cuando se pocisiona el cursor sobre el boton, este se obscurese.

En “confi”, coloque el fondo de pantalla para la pagina de “formulario enviado”

Tambien le di bordes redondeados, ya que esto muestra un diseño más suave y no tan “tosco”

Ejecutando el código según lo programado:

[pic 9]

[pic 10]

[pic 11]

[pic 12]

Bibliografía

Instituto IACC 2020, Hojas de estilo CSS I, semana 4, Programación HTML II.

Aguilar, J. (2012, 5 noviembre). Aplicar estilo a los inputs de los formularios. Jose Aguilar Blog. https://www.jose-aguilar.com/blog/inputs-css/ 

Bracho, Y. (2018, 31 mayo). PHP - como poner estilo a echo. La web del programador. https://www.lawebdelprogramador.com/foros/PHP/1656890-como-poner-estilo-a-echo.html 

Confirmación de envio de formulario. (2017, 26 junio). Stack Overflow en español. https://es.stackoverflow.com/questions/81712/confirmaci%C3%B3n-de-envio-de-formulario 

Introducción a CSS - Capítulo 4. Modelo de cajas. (s. f.). Uniwebsidad. Recuperado 11 de julio de 2020, de https://uniwebsidad.com/libros/css/capitulo-4 

...