TALLER |
|
En el artículo anterior, terminamos con los selectores y referenciamos las etiquetas estructurales de nuestro código HTML5 con id y <div> para prepararlo para que sea afectado por las reglas del archivo de estilos que empezamos. Usamos el selector universal (*) para declarar los márgenes y vimos la jerarquía de las cabeceras, ahora llegó el momento de declarar las reglas para los nuevos elementos estructurales de HTML5. Igual que empezamos en el artículo anterior diciendo las primeras reglas básicas que debemos declarar al comenzar con nuestra hoja de estilos, la siguiente regla sería una de las primeras reglas que nos convendría declarar. Algunos navegadores trataban a estos nuevos elementos de html5 como inline (en línea) y claro, no queremos usarlos de esta manera, lo que querríamos son elementos block (bloque) que es el mismo sistema que con los elementos <div>. Imagen 1 Es la representación del código del anterior artículo tanto el html5 como el CSS, si os fijáis, con el selector universal se han eliminado los márgenes de todos los elementos y otro detalle, todos los elementos están agrupados uno encima del siguiente y así sucesivamente. Por si nuestro código se ejecuta en algún navegador que no detecte estos elementos estructurales, deberíamos poner las líneas mostradas en la imagen 2 para indicarle que debe tratarlos como elementos block. Imagen 2. En la imagen apreciamos como hemos enumerado todos los elementos estructurales e indicados que deben ser tratados como elementos block. Siguiente paso centremos el cuerpo Como dijimos anteriormente el cuerpo del documento html5 ( <body> ) es la parte visible, de nuestro código, así que no nos extrañe que tengamos que iniciar nuestro trabajo por él. Para empezar deberemos definir un tamaño específico o máximo del cuerpo visible y pensar que esta elección tendrá que ser la que mejor se adapte al mayor número de pantallas diferentes de dispositivos donde pueda ser visible nuestra página web, por esta razón tengamos en cuenta que la etiqueta <body>, tiene un valor de ancho establecido por defecto al 100% como el resto de los elementos block. Con lo que acabamos de explicar queremos decir que el elemento <body> ocupará todo el ancho horizontal de la ventana de nuestro navegador. Sabiendo esto, si queremos que lo que se vea quede centrado en nuestra pantalla, tenemos que indicárselo de la siguiente forma: Imagen 3. De esta manera indicamos que centre los elementos del cuerpo (<body>). Reglas para nuestra caja principal Continuando con la creación de reglas para nuestra página, ha llegado el momento de indicar un tamaño específico o máximo para el contenido del cuerpo (<body>). En el artículo anterior, en nuestra plantilla en HTML, encerramos entre las etiquetas <div id=”estructura”> y </div> todo el contenido de <body>. De esta forma todos los elementos o cajas de nuestra página serán afectados por una misma regla, ese <div> lo consideraremos la caja principal de nuestro modelo de caja. Imagen 4. Vemos el uso de “#” para indicar a nuestro navegador que hace referencia a un elemento con el atributo “id” que a su vez tiene el valor estructura. En la imagen podemos apreciar que con la regla se le aplicarán tres estilos. Como podemos apreciar en la regla de la imagen 4, el elemento <div id=”estructura”>, le aplicamos tres estilos en su caja principal, el primer estilo es: widht: 960px Con el cual estableceremos un valor fijo, que en el caso del ejemplo es de 960px (px = pixeles), de esta manera le indicaremos al navegador que esta caja deberá tener un ancho de 960px, el cual es un valor bastante común en las páginas web, aunque con el paso del tiempo, lo que hoy es de uso común puede quedar desfasado más adelante. margin: 10px auto El segundo estilo, lo usamos en el artículo anterior con el modelo de caja tradicional. Con el elemento <body>, se uso text-align para alinear horizontalmente al centro (imagen 3), pero claro esto afectará solo a los contenidos inline como son los textos e imágenes… Los elementos block como comentamos anteriormente son tratados como los elementos <div> y a ninguno le afectaría, por esta razón deberíamos asignarle valores específicos a los márgenes los cuales se adaptarán de manera automática al tamaño de su elemento padre. Con margin aplicaremos valores específicos para sus márgenes, pueden tener cuatro valores: superior, derecho, inferior, izquierdo, en este orden específico. Por lo tanto al indicar un valor a la propiedad margin el primero hará referencia al margen superior del elemento referenciado, el segundo valor sería el margen derecho, el tercer valor el margen inferior y el cuarto valor sería el margen izquierdo. Aunque podríamos escribir solo los dos primeros valores y el resto por defecto usaría estos mismos (primer valor superior e inferior; segundo valor derecho e izquierdo). Veamos entonces nuestro ejemplo, ¿porque solo hemos aplicado un valor?, entonces ¿a qué hemos hecho referencia? Al usar el valor: margin: 10px auto Le estamos indicando al navegador que el elemento tiene un margen superior de 10px y de forma automática ese valor lo usará también para el margen inferior de elemento en cuestión, el resto de los márgenes, es decir, el margen derecho y el margen izquierdo al indicar auto el valor se calcularán de forma automática en relación al del cuerpo (<body>) y del elemento <div> (elemento padre). text-align: left La propiedad text-align es un estilo que heredarán los “hijos” de las etiquetas, es decir que al usarlo antes, en el elemento <body> todo los elementos que estén dentro heredarán este estilo, por esta razón deberemos indicarle que los elementos <div id=”estructura”> queremos que sigan otro y lo haríamos como en el estilo 3 de la imagen 4. Usando la regla text-align: left con este valor aunque el cuerpo queda centrado, todos los elementos referenciados con <div id=”estructura”> quedarán alineados a la izquierda dentro de su caja. Lo interesante a la hora de analizar estos comandos es que vayáis probando cada cambio que hagáis, en algunos no habrá diferencia porque vuestro navegador ya estaba preparado para las etiquetas estructurales como puede ser en la imagen 2, o como en la imagen 3, cuando le indicamos que centre todo vemos que centra hasta el texto y a lo mejor no le vemos sentido a centrar todo, pero si seguimos, al agregar la regla de la imagen 4 cuando alineamos los textos a la izquierda y comparamos como quedaba antes de aplicar la regla de la imagen 3 iremos entendiendo de verdad el porqué de las cosas. Por eso aconsejo que a la vez que hagáis modificaciones vayáis probando el código en el navegador, pero siempre en una nueva pestaña. ¿Porqué en una nueva pestaña? De esta forma podréis comparar en todo momento todos los cambios del primero al último, algunos por si solos no tendrán un sentido a simple vista pero conforme vayáis avanzando de esta forma le encontraréis la razón a todo lo que hemos hecho. <header id="cabecera"> Ahora le toca el turno a la cabecera, dentro de la etiqueta <div> el primer elemento estructural sería <header>. Para referenciarla hemos usado el atributo id con el valor cabecera, este elemento suele contener la imagen principal de nuestra página con su título correspondiente: Imagen 5 En su momento dijimos que los elementos block, por defecto tienen el valor de ancho de 100% de la ventana del navegador, lo que quiere decir que ocupan la ventana horizontalmente de punta a punta, pero en nuestro caso se verá limitado por el de su elemento padre, porque este es nuestra caja principal que creamos con <div id=”estructura”> y se le dio un ancho de 960px, este será su ancho. En la imagen 5 la regla que hemos creado le otorga un fondo (background-image) que es una imagen que hemos escogido, e introducido en la misma carpeta donde está nuestra página y los estilos. El la vertical de este fondo tendrá unos márgenes interiores de 90px como le indicamos con (padding). <nav id="menu"> Después de la cabecera lo siguiente que solemos ver en cualquier página web, sería el menú o la barra de navegación, que como su nombre nos hace intuir, nos ayudará a navegar por la página, mediante unos cuantos enlaces a las diferentes secciones que representarán nuestro menú. El elemento <nav> es un elemento block por esta razón irá inmediatamente debajo de <header> que es justamente el anterior, el ancho por defecto sería del 100% de anchura horizontal, pero como con <header> es un elemento “hijo” de <div id=”estructura”> y a este se le asigno 960px, así que este será su mayor ancho (el de su “padre”). Por lo demás será tan alto como la cantidad de contenido que escribamos y sus márgenes serán los que hemos seleccionado antes sino los modificamos. Imagen 6 Observemos la imagen 6, la regla con #menu hace referencia al elemento <nav> el cual referenciamos en el anterior capítulo. En la regla hemos usado el estilo background: #FF7F50; con background hacemos referencia al fondo del elemento, con <header> en el ejemplo anterior seleccionamos una imagen para que estuviera de fondo y aquí solo seleccionamos un color, sí #FF7F50 es un color, esta puesto en hexadecimal. Personalmente tengo una plantilla en pdf con escalas de colores en hexadecimal que facilita la faena estando offline, pronto crearemos una para que la podáis descargar a modo de chuleta como hicimos con los comandos de HTML. Sigamos, hemos seleccionado un color de fondo para nuestro elemento <nav> referenciado en el código HTML de esta forma: #menu, el siguiente estilo que usaremos es padding: 10px 20px; con la cual hemos generado unos márgenes internos entre el background y el texto de los enlaces. Recordar lo dicho antes con la forma de hacer referencia a los márgenes con la propiedad margin, conforme lo hemos puesto, dice que queremos un margen superior e inferior de 10px y márgenes a los lados de 20px (RECORDAR: superior, derecho, inferior y izquierdo, este es el orden). En el código que creamos en el capitulo anterior dentro del elemento <nav> creamos una lista con lo que acabarán siendo los enlaces a nuestras secciones, para ello utilizamos las etiquetas <ul> la cual usaremos para especificar que lo que hay dentro de estas etiquetas es una lista y <li> para definir elementos de esa lista los cuales vamos a llamar ítems. Estos ítems el navegador, por defecto, los muestra en pantalla unos encima de otros, en nuestro caso queremos que no ocurra así, queremos que aparezca uno al lado del otro. RECORDAD lo que dijimos de los elementos block e inline, el primero los ubica por defecto uno encima del otro, pero inline los pone uno al lado del otro mientras quede espacio. Por lo tanto los elementos de la lista de nuestra barra de navegación queremos que los muestre el navegador como elementos inline. Entonces, si nos fijamos en la imagen: Imagen 7 En la imagen 7 hemos referenciado todos los ítems de la lista usando el selector #menu li , una vez referenciado los ítems aplicaremos la regla display: inline-block; para indicarle que todos los elementos <li> los trate como elementos inline, lo que se llama cajas inline. Tambien usaremos list-style: none; para evitar que nos muestre ningún marcador en nuestra lista. Con el estilo padding: 5px 8px; le decimos que cada ítem debe tener un margen superior e inferior de 5px y a los lados de 8px (aunque lo repita muchas veces lo mejor es que juguéis con los márgenes vosotros con vuestro editor, solo repitiéndolo y comprobándolo se os quedará). Ya solo queda font: bold 12px verdana, sans-serif; con esta regla indicamos que queremos una fuente en negrita (bold) con un tamaño de 12px (pixeles) tipo Verdana (un tipo de fuente) sin serif (sans serif= sin serif; sin remates, para facilitar su lectura). <section id="seccion"> y <aside id="lateral"> Los siguientes elementos los vamos a explicar a la vez, porque van en la misma altura, comparten la horizontal. Recordad que estamos usando en todo momento lo que se denominaría el modelo de caja tradicional, el cual configuramos en nuestra hoja de estilos mediante reglas. ¿Cómo posicionamos uno al lado del otro en la posición que queremos y que no salgan uno encima del otro? El comando que usaremos será float con este comando podremos escoger hacia qué lado queda cada una de las siguientes cajas, este hace que los elementos floten hacia un lado u otro (el que le indiquemos) dentro del espacio que quede disponible. El elemento de estilo float por tanto, nos será muy útil a la hora de estructurar. Imagen 8 En la imagen 8, vemos como creamos las reglas para posicionar ambas cajas <section> y <aside> en la misma horizontal, las cuales no olvidemos que están referenciadas para poder trabajar con ellas con nuestra hoja de estilos como “seccion” y “lateral” (recordad que estas referencias las creamos con la etiqueta id y asignando el valor “seccion” y “lateral” respectivamente). Asignamos tamaños creando dos columnas,con el elemento de estilo float colocamos la caja en el lado que seleccionamos mediante el valor left o right. Asignamos también unos valores horizontales mediante el elemento widht, el cual sirve para asignar un tamaño horizontal del elemento al que afecta y nos quedará margin el cual hemos repasado antes. Repasemos los estilos de la imagen 8: #seccion es como hemos referenciado a <section>, es la regla y le ponemos 3 estilos, el primero es float: left; con el cual le decimos que es un elemento flotante y que su posición si no hay un elemento flotante antes es a la izquierda de nuestra pantalla (si hubiera otro elemento flotante antes se posicionaría a la izquierda pero inmediatamente después de ese elemento). Con widht le indicamos que tendrá un ancho horizontal de 680px más 20 px de los dos márgenes de 10px, lo que sumará 700px del elemento <section>. <aside> con el elemento float le hemos indicado que se alinee pegado a la derecha (right) aunque os aconsejo que en esta línea pongáis también left y probéis de las dos formas (no a la vez) y comprendáis bien lo que hace el elemento float. Además tenemos que comprender que el primer elemento condiciona con su tamaño el espacio que le queda al siguiente, lo que puede provocar que al no entrar al lado tenga que ponerse debajo. En #lateral con widht asignamos un ancho de 200px unos márgenes internos izquierdo y derecho de 5px. Además con la propiedad padding le agregamos 15px en los cuatro márgenes recordad, superior, derecho, inferior e izquierdo por este orden (sé que soy pesado, pero seguro que cuando terminéis de leer este artículo el orden de los márgenes no será nunca más algo que debáis repasar). Por lo tanto el espacio total de aside es 200 + 30 = 230px. Todo metido en una caja (background) de color #FFFFFF que es blanco (en hexadecimal). <footer id="piepagina"> Por fin llegamos al pie de página <footer> o como lo referenciamos nosotros #piepagina, ahora vamos a finalizar la estructura de modelo de caja tradicional y volver a colocar los elementos de la manera normal antes de usar el elemento float. Veamos como lo haremos: Imagen 9
En la imagen 9 vemos el elemento <footer> referenciado con #piepagina vemos como el primer estilo es clear: both; que hace que este elemento no se coloque en la misma línea que los elementos float. Con el elemento clear se restauraría la forma en la que se colocaban los elementos antes y con el valor both le indicamos que ambos lados del elemento serán como antes. ¿Qué queremos decir?, pues como este era un elemento block ocupaba el 100% de la horizontal, aunque en este caso está limitado por el tamaño de su elemento padre y se situará debajo del último elemento como los elementos block. El siguiente estilo ya es uno que conocemos: text-align: center; Este simplemente hará que todo dentro de <footer> quede alineado al centro, con un margen interno de 20px y con border-top: 2px solid #000000; generaremos una línea separadora en negro puro de dos pixeles de ancho para separar nuestro pie de página. Con esto terminamos el capítulo de hoy, en el siguiente continuaremos creando un estilo más personalizado para nuestra página. ¡Pasad un buen verano y no os achicharréis al sol! HTML5 desde el principio - capítulo 6, CSS3 maquillando la página – 2ª parte Manuel Castelló (kasmangou) Temas relacionados: Programación, Redacción independiente, kasmangou Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |