Entradas

Formulario con estilos CSS

Imagen
A continuación se presenta un ejemplo de como personalizar los elementos de un formulario. El resultado que deseamos obtener es el siguiente:  Primeramente, se necesita tener ya un formulario programado en HTML, para eso se utilizará este: Cuyo código fuente es:  Si no lo tienes, ¡Prográmalo en tu editor de textos favorito! El siguiente paso será modificar dicho código HTML para agregarle identificadores y clases. Los cambios realizados se han marcado con un recuadro color rojo . Ahora vamos agregando el código CSS y vayamos viendo los cambios: Primero agregamos una imagen para que actúe de fondo en la página web (puedes usar la imagen que tu quieras) y cambiamos la fuente a una familia "Verdana". Código fuente:  Visualización:  Ahora agregar un contenedor para centrar el contenido de la página respecto a la ventana del navegador. Código fuente:  Visualización:  El siguiente paso es aplicarle los estilos al propio formulario:  Código fuente:  Visualización:  Estilizamos los

Ejercicio #2 de posicionamiento de contenedores

Imagen
A continuación se presenta un segundo ejemplo de posicionamiento de contenedores.  Este es el resultado que se pretende logar:  Código HTML: Código CSS: ¡NO OLVIDES PONER TU NOMBRE! RESULTADO FINAL: 

Posicionamiento de contenedores con CSS

Imagen
Bueno, antes que nada, debemos aclarar ¿Qué es un contenedor? Todo elemento de un documento HTML, es considerado como un contenedor o caja rectangular invisible al usuario y a la cual se le pueden aplicar ciertas propiedades para ubicar los elementos respecto a otros. Por ejemplo, si pudiéramos "visualizar" una línea al rededor de los elementos HTML que estamos programando, veríamos algo como lo siguiente:    Básicamente, todos los contenedores de HTML, tienen las mismas partes: El elemento en sí mismo. El espacio de relleno que rodea al elemento HTML. El borde que rodea al elemento y al relleno. El margen que tiene ese contenedor con respecto a otros contenedores. Una vez explicado esto, pasemos al ejemplo #1 de una página web cuyas secciones están divididas por 5 contenedores: Un contenedor principal que agrupa todo el contenido al centro de la página web y deja unos márgenes a la izquierda y a la derecha del navegador. Un contenedor para contener la cabecera de la página w