Diseño y Programacion Web – Clase 7 – Integrando CSS y HTML

jquery logojquery logo

Vamos a iniciar como lo hicimos al principio, creando una pagina que llamaremos index.html con esta estructura:

Ahora vamos a crear la carpeta “css”. Luego adentro, crearemos el archivo main.css. Y vamos a incluirlo en index.html

Ahora vamos a crear una etiqueta <div>. Se trata de un tag invisible cuando no tiene nada. Es un divisor del sitio que podemos manipular como queramos. De hecho, vamos a usarlos todo el tiempo.

Ahora vamos a agregarle una clase llamada header.

Asi como a cualquier elemento, a un div se le puede incluir id y class. La diferencia es que el id no se repite, como hemos comentado en clases anteriores, y la class puede repetirse todo lo que queramos. Es muy mala practica darle atributos css a un id. Siempre debe tomarse un class.

En el pasado usabamos un div class header. Ahora con HTML5 ya no es necesario, porque tenemos la etiqueta <header>.

Vamos a ponerle un titulo “cabecera” con lo que aprendimos anteriormente.

Ya que estamos, vamos a darle el resto de la estructura.

Por una cuestion semantica, tiene que existir un solo header y un solo footer. Pero section pueden haber todos los que quieran. El tag section se comporta como un apartado donde nosotros podemos poner lo que quedamos, es un sector, una seccion del sitio. La importancia de poner los tags correctos incide en maximizar la compatibilidad con todos los dispositivos. Asi el Chrome for Android entiende que ahi esta la cabecera, ahi el pie y ahi las secciones.

Bueno ahora vamos a darle a nuestro sitio un fondo bonito. Vamos al main.css:

Lo que hicimos ahi fue decirle a la etiqueta body, que engloba todo el sitio, que la propiedad de color de fondo tenga un valor de codigo de color. Entonces para aplicar un estilo, respetamos esta estructura:

El primero es un elemento comun. El segundo refiere a un class. Y el tercero a un id. Si lo probaron, habran visto que nuestro fondo se volvio con un tono celeste. Vamos a aplicarle un color negro al header.

Hay ciertos colores que no requieren el codigo porque son primarios o secundarios. Entonces se les pone “black”, “white”, “red”, “yellow”, “blue”, entre otros. Si lo probaron, van a notar que se hizo un cuadro negro en el header, pero desaparecio el texto. Eso es porque por defecto nuestro titulo <h2> es negro tambien. Entonces vamos a decirle esto:

Con eso, todos los textos dentro del header seran blancos. Pero tal vez no queramos eso. Tal vez queramos que todos nuestros titulos <h2> sean blancos. Entonces:

Supongo que ya le agarraron el truco. Bien, pero supongamos que ahora quiero que todos los titulos <h> sean blancos, entonces:

Con la coma podemos asignar propiedades a multiples elementos, clases y ids. Ahora vamos a rellenar el footer en index.html:

Volvemos al main.css y le aplicamos un fondo azul y color de texto blanco:

Ahora bien, los textos del footer suelen ser chicos, mas que el resto de los textos de la pagina. Entonces si aplicamos:

Tenemos un texto mas chico. Una practica para ser mas precisos es que inspeccionemos elemento con nuestro navegador y cambiemos la propiedad desde ahi. De esa manera podemos ver el tamaño en tiempo real.

Ahora vamos al section. Existe un sitio muy bueno para rellenar contenido llamado Lorem Ipsum. Pueden entrar ahi y generar un parrafo para rellenar nuestro sitio. Entonces:

Primero que nada la tipografia que viene por defecto no nos gusta, asi que la vamos a cambiar. Dentro del main.css:

Cuando llamamos a la etiqueta html estamos englobando absolutamente todo el sitio, asi que tengan cuidado con las propiedades que aplican aqui. Con font-family determinamos la tipografia que usaremos, en este caso, en todo el sitio.

Ahora vemos que el espacio entre el footer y el section es muy poco, asi que le daremos mas:

El padding es una propiedad que mete espacios basicamente. Si se la aplica sola, crece en equis pixeles por los 4 costados. Sino podemos modificarla en left (izquierda), right (derecha), bottom (abajo) y top (arriba). El problema es que con esto estamos asumiendo que todos los section van a tener un espacio de 12px hacia abajo.

Asi que vamos a trabajar con las clases en los proximos articulos e ir mejorando todos estos puntos.

Be the first to comment on "Diseño y Programacion Web – Clase 7 – Integrando CSS y HTML"

Leave a comment

Your email address will not be published.


*