Hernandez_Hernandez_Practica web de la sesion 12.pptx
Crear formulario HTML y CSS paso a paso en 10 pasos
1. 1. El primer paso sera crear una carpeta en donde guardaremos todos lo que
vayamos ocupando como el código html del formulario o la hoja de estilos.
2. Lo siguiente sera abrir el bloc de notas y crear un nuevo documento para
empezar a escribir nuestro código. Podemos utilizar algun otro programa si
queremos pero el mas recomendable es el ya mencionado.
3. Hechos los pasos anteriores ahora si procederemos a escribir el código
html del formulario.
2. En el definimos el titulo que se mostrara en la pestaña , se han escrito los
titulos de las casillas del formulario , asi como tambien hemos puesto la linea
de código que enlazara nuestro documento html a la hoja de estilo que
crearemos a continuación.
4. El código html ya quedo listo , ahora guardaremos el documento como
index.html en la carpeta que creamos al principio para nuestro formulario.
5. Lo siguiente por hacer sera crear un nuevo documento de texto que sera
nuestra hoja de estilos. Definiremos las propiedades de fuente , color de
fondo y longitud de body.
3. 6. Ahora añadiremos un selector para nuestro formulario(.contacto) y
definiremos las propiedades border , border-radius , padding , margin y color
de fondo.
Lo siguiente sera insertar selectores para label y div , lo haremos de la
siguiente manera:
4. 7. En el caso de las cajas de texto, utilizaremos selectoresmultiples , para los
input y para el textarea. Definiremos propiedades como el borde, margen,
sombras de la caja de texto entre otras como se ve a continuación:
8. Para terminar con nuestra CSS debemos ponerle estilo a los botones, para
ellos utilizaremos estilos similares a los de las cajas de texto anteriores solo
que nuestros botones tendran bordes redondos , sombra al texto y un
degradado como background.
5. 9. Con eso terminamos nuestra hoja de estilo , lo siguiente sera guardar el
documento en nuestra carpeta con el nombre estilos.css.
10. Ahora sola queda abrir nuestro archivo html para ver como quedo el
formulario.