¿Quieres tener tu propio blog?
Estructurar correctamente una pagina WEB (XHTML)
En esta ocasión vamos ha introducir unos cuantos conceptos que normalmente pasan inadvertidos o no se les da la importancia que realmente tienen, a la hora de crear una pagina web.
Si bien es cierto que para crear una página web no hace falta tener ningún tipo de conocimiento previo sobre la materia, no es así si lo que se pretende es diseñarla y estructurarla correctamente, en definitiva, hacer una página web que cumpla con el estándar W3C reconocido mundialmente.
W3C es un consorcio internacional donde se trabaja para desarrollar estándares web, desarrollando protocolos de uso común.
No quiero enrollarme con teoría ni explicaciones, todo esto se puede encontrar o consultar en san Google, así que resumiendo, lo que haremos, será mostrar la estructura básica y correcta que tiene que tener toda página web, para que cumpla con el estándar W3C.
Para hacer el manual un poco más apetitoso, daremos solución a ciertos problemas o tal vez malos hábitos que nos encontramos sobre todo en los recién iniciados a la hora de estructurar nuestra página.
Para empezar a corregir las malas costumbres, montaremos la estructura correcta que ha de tener nuestro HTML, con todas y cada una de sus secciones. Tenemos que entender que una página HTML ofrece mucho más de los que se muestra en pantalla.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htlm xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="autor" content="banyut's world" />
<title>Banyut -- marcos flotantes --</title>
</head>
<body>
</body>
</html>
Esta estructura ya la podemos guardar, pues será el punto de inicio para todas nuestras futuras páginas.
Siempre he escuchado que una pagina Web bien formada, tiene que empezar y acabar con las etiquetas <html></html>, esto no es así. Para que un documento XHTML sea válido, en su primera línea tiene que aparecer el doctype que indicará el DTD utilizado. El DTD es un documento que recoge todas las normas, obligaciones y restricciones que deben cumplir y seguir en la creación de los documentos de un determinado tipo.
En XHTML tenemos tres tipos de DTD
- Strict
- Requiere una separación total de el código HTML y los estilos CSS
- Transitional
- Permite utilizar algunos atributos relacionados con el aspecto de los elementos
- Frameset
- Utilizado por las paginas formadas con frames
Nosotros hemos utilizado el Transitional.
Empezamos nuestro trabajo diseñando la estructura de la pagina.Crearemos un primer div que englobará todo nuestro código y al que identificaremos como cos.
<div id="cos"></div>
Todos nuestros apartados irán dentro de ese div, esto nos da una ventaja, pues con centrar solo este componente automáticamente centraremos todo su contenido.
Ahora crearemos las divisiones que queremos para nuestra web. Nosotros crearemos una pagina con una zona superior para el titulo, el cuerpo de la aplicación que lo dividiremos en dos, una parte izquierda y una derecha y por último un pie de página
<div id="cos">
<div class="title"> .title. </div>
<div class="win_left"> .win_left. </div>
<div class="win_right"> .win_right. </div>
<div class="footer"> .footer. </div>
</div>
Como veis no hay ningún secreto, creamos un contenedor para cada zona, simple sin complicaciones. Ahora viene lo bueno, vamos a dar formato a nuestra página, esto lo haremos siguiendo la regla de oro, separar la vista de la implementación, ¿lo cualoooo?, pues eso, aunque no os lo creáis es la regla de oro, separar el contenido del diseño, que aún no lo pilláis?, pues que primero escribiremos el contenido de la pagina, sin preocuparnos de como quedará, eso si estructurando la información y una vez acabada, le daremos formato utilizando CSS, si aún así no lo entendéis, tendréis que confiar en que es lo correcto.
El formato a nuestra pagina se lo daremos mediante CSS(separación vista modelo), para ello abriremos nuestro editor favorito y escribiremos lo siguiente.
body{
Background-color:silver;
}
#cos{
Background-color:green;
width:760px;
}
div.title{
Background-color:purple;
width:760px;
height:110px;
}
div.win_left{
Background-color:teal;
width:150px;
height:500px;
}
div.win_right{
Background-color:lime;
width:610px;
height:500px;
}
div.footer{
Bacground-color:yellow;
width:760px;
}
Hemos aplicado un color de fondo diferente a cada capa para distinguirlas, y también se han definido sus dimensiones.
Ahora queremos que nuestra página se vea centrada en la pantalla, Para ello centraremos solo la capa #cos y así de manera automática tendremos centradas en nuestra pantalla el resto.
En este punto hay una gran confusión, mucha gente no entiende por que con text-align:center no se alienan algunos elementos. Pues bien, básicamente se trata de que HTML trata con dos tipos de elementos, los elementos block que teóricamente empiezan y acaban con un salto de línea (o deberían) y los inline que siguen el flujo del texto, dicho de otra forma, en la línea donde se encuentra un elemento del tipo block, no puede haber ningún otro elemento.
Que elementos son de un tipo y cuales de otro, eso lo determina el tipo de documento, en nuestro caso la primera línea que hemos puesto, de todas maneras no os rompáis la cabeza, eso es algo que no podemos cambiar.
Dicho esto, ahora estamos en condiciones de explicar por que text-align:center solo centra algunos elementos, pues la respuesta es sencilla, solo tiene efecto sobre elementos inline.
Bueno, la siguiente pregunta es obligatoria, ¿Como centro elementos block?. Para ello utilizaremos la propiedad margin
que colocaremos en #cos{} de nuestro CSS
#cos{
margin: 0 auto;
Background-color:green;
width:760px;;
}
La propiedad margin, define el margen(invisible) que dejaremos entre el borde del objeto y su inmediato contenedor. En nuestro caso el 0 indica que no queremos margen ni en la parte superior ni en la inferior, el auto, dejara el mismo margen a ambos lados (izquierdo y derecho).
Vamos a probarlo, guardamos el fichero en el mismo directorio donde tenemos nuestro archivo html con el nombre esqueleto.css
Ahora tenemos que decirle a nuestro html que queremos aplicar nuestro archivo CSS, para ello introduciremos la ruta del archivo css dentro del área <head></head>.
Nos tiene que quedar así.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Banyut -- marcos flotantes --</title>
<link rel="stylesheet" type="text/css" href="esqueleto.css" />
</head>
Bueno si vemos el resultado, parece que hemos mejorado algo, ahora la pega la tenemos con las capas win_left y win_riight. Los elementos div son de tipo Block, así que si lo que hemos dicho antes fuera estrictamente cierto, lo tendíamos difícil para conseguir que los dos estuvieran en el mismo nivel, pero como os habréis imaginado, existe varias formas de conseguir que un elemento de tipo Block se comporte como uno de tipo inline y viceversa, ello se consigue mediante CSS
La primera de las formas y ya adelanto que no es la que utilizaremos, es mediante el atributo display, que entre otros valores puede aceptar block y inline haciendo así que el elemento se comporte como nosotros queramos.
La segunda es mediante el atributo float, que nos permite flotar una capa por la pantalla, esta es la opción que veremos, aplicándolo a las capas win_left y win_right.
div.win_left{
float:left;
Background-color:teal;
width:150px;
height:500px;
}
div.win_right{
float:right;
Background-color:lime;
width:610px;
height:500px;
}
Corremos nuestra pagina y veamos como se comporta.
Bueno, parece que todo va perfecto, aunque he hecho un poco de trampa, para que resulte más fácil de entender lo veremos con un ejemplo.
En el CSS modificaremos el ancho de la capa .win_right y lo pondremos a 60 (width:60px;). Volvemos a cargar la pagina y haber que pasa.
Veis que el comportamiento ahora no es el deseado, ¿que ha pasado?, pues simplemente que las capas flotan y el resto de elementos de la página siguen el flujo natural ubicándose en el primer espacio libre que encuentran.
Por suerte tenemos el atributo clear que se encarga de controlar el comportamiento de las capas adyacentes a las flotantes, este atributo acepta los siguientes valores
- none
- left
- right
- both
Nosotros utilizaremos el último, que hace que el elemento se coloque debajo de los elementos que están flotando, sea el del tipo left o right, así que para arreglar el comportamiento anterior modificaremos la capa footer para que quede así.
div.footer{
Bacground-color:coral;
width:760px;
clear:both;
}
Ahora si!!!!!, bien, con este ejemplo puede que no lo hayáis acabado de ver, probaremos con este otro. Restauraremos el ancho de la capa win_right (width:610px;) y guardaremos, iremos al archivo html y modificaremos la capa win_right para que quede así.
<div class="win_right">
<p>
<span class="float_r">.win_right.</span>
<span>Mi Super Primera Página</span>
</p>
<hr />
<h2>Todo Alineado</h2>
</div>
Y en el CSS, añadiremos al final lo siguiente.
.float_r{
float:right;
color:blue;
}
Tenemos en una misma linea dos textos diferentes, uno alineado a la izquierda y el otro a la derecha, y sin usar las tablas como viene siendo habitual.
Esto es el final, se que no he explicado gran cosa, pero visto las paginas que hay por ahí, creo que es conveniente aportar mi granito de arena.
Aquí tenéis el resultado final y el código para los que os hayáis perdido
capas.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htlm xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Banyut -- marcos flotantes --</title>
<link rel="stylesheet" type="text/css" href="esqueleto.css" />
</head>
<body>
<div id="cos">
<div class="title"> .title. </div>
<div class="win_left"> .win_left. </div>
<div class="win_right">
<p>
<span class="float_r">
.win_right.
</span>
<span>Mi Super primera Pagina</span>
</p>
<hr />
<h2>Todo Alineado</h2>
</div>
<div class="footer"> .footer. </div>
</div>
</body>
</html>
esqueleto.css
body{
Background-color:silver;
}
#cos{
margin:0 auto;
Background-color:green;
width:760px;
}
div.title{
Background-color:purple;
width:760px;
height:110px;
}
div.win_left{
float:left;
Background-color:teal;
width:150px;
height:500px;
}
div.win_right{
float:right;
Background-color:lime;
width:610px;
height:500px;
}
div.footer{
Background-color:yellow;
width:760px;
clear:both;
}
.float_l{
float:left;
}
.float_r{
float:right;
color:red;
}
