Este documento pretende:

• Crear
  un diseño de bordes nítidos y esquinas redondeadas usando CSS,
  evitando el uso de tablas.
• Que el código del CSS
  y el XHTML
  sea validado por la W3C y
  que además sea semánticamente lógico.
• Que el diseño sea totalmente fluido o sea que se adapte a cualquier
  resolución del usuario.
• Compatible con la mayoría de los navegadores.

Los
requisitos para dominar cada uno de estos pasos son los siguientes:

• Saber
  crear un documento XHTML bien
  estructurado.
• Saber aplicar CSS a documentos
  XHTML usando clases.

Primero que nada vamos a crear la imagen inicial de nuestro borde y sus esquinas.
Debes saber manejar algún programa de diseño como Adobe
Photoshop, Macromedia
Fireworks o Paint Shop Pro. La siguiente
imagen te dará una idea más amplia de este proceso. Además
la puedas usar como ejemplo para que practiques este tutorial.

Antes de continuar con el código necesitamos cortar la imagen. Parte
del efecto se debe a la forma en que cortamos la imagen y como se posicionan
estos pedazos utilizando cierto código de CSS.
La imagen debe ser cortada en 8 partes:

Esquina inferior izquierda:
Esquina inferior derecha:
Esquina superior izquierda:
Esquina superior derecha:
Borde inferior:
Borde superior:
Borde izquierdo:
Borde derecho:

Ya tenemos todo lo necesario para crear el efecto. Veamos ahora el código
al cual le vamos aplicar la decoración.

Código
XHTML:

<h1>Título del artículo.</h1>
<p>Párrafo de prueba #1. Aquí va la información
        del artículo. Aquí va la información del artículo.
        Aquí va la información del artículo. Aquí
        va la información del artículo. Aquí va la información
        del artículo. </p>
<p>Párrafo de prueba #2. Aquí va la información
        del artículo. Aquí va la información del artículo.
        Aquí va la información del artículo. Aquí
        va la información del artículo. </p>
<p>Párrafo de prueba #3. Aquí va la información
        del artículo. Aquí va la información del artículo.
        Aquí va la información del artículo. </p>
<p>Pie del artículo
<br />
Autor, fecha, referencias, etc.</p>

Para
lograr lo que queremos necesitamos añadir unas capas o "layers" usando la etiqueta <div>.
Estas capas irán alrededor del código XHTML .

Código
XHTML:

<div id="top"></div>
<div id="content">
<div id="box_control">
<h1>Título del artículo.</h1>
<p>Párrafo de prueba #1. Aquí va la información
          del artículo. Aquí va la información del artículo.
          Aquí va la información del artículo. Aquí
        va la información del artículo. Aquí va la información
          del artículo.</p>
<p>Párrafo de prueba #2. Aquí va la información
          del artículo. Aquí va la información del artículo.
          Aquí va la información del artículo. Aquí
        va la información del artículo.</p>
<p>Párrafo de prueba #3. Aquí va la información
          del artículo. Aquí va la información del artículo.
          Aquí va la información del artículo. </p>
<p>Pie del artículo<br />Autor, fecha, referencias,
          etc.</p>
</div>
</div>
<div id="bottom"></div>

Hasta
ahora no hemos hecho nada complicado. Hemos creado un documento en XHTML muy bien estructurado. Tan fácil que hasta un niño pudiera hacerlo.
El próximo paso será colocar las imágenes que hará esquina dentro de las capas que hemos creado. Empecemos por la parte superior.

Código
XHTML:

<div id="top">
<img src="top_left.gif" alt="Esquina superior izquierda" />
<img src="top_right.gif" alt="Esquina superior derecha" />
</div>
  Ahora añadiremos las imágenes correspondientes a la capa
        inferior.
  <div id="bottom">
<img src="btm_left.gif" alt="Esquina fondo izquierda" />
<img src="btm_right.gif" alt="Esquina fondo derecha" />
</div>

Llegó el momento de aplicar el lenguaje de CSS
a nuestro documento. Vamos a continuar aplicando ciertas reglas de CSS
a nuestra capa superior.

Código
XHTML:

<div id="top" class="top">
<img src="top_left.gif" alt="Esquina superior izquierda"
        class="esquina_sup_izq" />
<img src="top_right.gif" alt="Esquina superior derecha"
        class="esquina_sup_der" />
</div>

Código
CSS:

div.top {
    /* La altura es de 28 píxeles ya que ese es el espacio que ocupa
          nuestra imagen de esquina. */ 
        height:28px; 
        background-image:url(top_line.gif); 
        background-repeat: repeat-x; }
  img.esquina_sup_izq { float:left; }
  img.esquina_sup_der { float:right; }

Ahora
prácticamente escribiremos las mismas reglas para la capa inferior solo
que cambiaremos el nombre de las clases. Además en la regla background-image:url(btm_line.gif);
debemos colocar la imagen correcta.

Código
XHTML:

<div id="bottom" class="bottom">
<img src="top_left.gif" alt="Esquina inferior izquierda"
        class="esquina_inf_izq" />
<img src="top_right.gif" alt="Esquina inferior derecha"
        class="esquina_inf_der" />
</div>

Código
CSS:

div.bottom {
        height:28px; 
        background-image:url(btm_line.gif); 
        background-repeat: repeat-x; }
  img.esquina_inf_izq { float:left; }
 img.esquina_inf_der { float:right; }

Aaaaaaaaah!
Ya esta tomando forma nuestra pequeña obra de arte. En menos de lo que
te imaginas habremos terminado todo. Es bueno que entendamos todo lo que hemos
hecho hasta ahora. Usando background-image:url(fuente_de_origen);
hemos invocado la imagen que forman el borde superior e inferior. Con background-repeat:repeat-x;
nos aseguramos que la imagen se repita rellenando todo el espacio necesario
para lograr el efecto de una imagen completa. Y con la regla float:xxx;
obligamos a que cada imagen ocupe su esquina pertinente.

En
siguiente paso codificaremos las reglas que darán forma a nuestro contenido.

Código
XHTML:

<div id="content" class="content">

Código
CSS:

div.content {
        background-image:url(left_line.gif);

        background-repeat:repeat-y; }

¿Para
que es el Box Control? (<div id="boxcontrol">)

Esta capa nos ayudara a tener más control de la posición de nuestro
contenido. Además podremos manejar fácilmente los atributos como
el padding o el border que muchas veces nos causan dolor de cabeza cuando queremos
formatear el contenido. Y para dejarte con la curiosidad si utilizas selectores
contextuales en tu CSS las posibilidades de controlar la presentación visual del contenido son
innumerables. Para efectos de este tutorial la función principal será la de crear el efecto del borde a la derecha.

Código
XHTML:

<div id="boxcontrol"
        class="boxcontrol">

Código
CSS:

div.boxcontrol {
        padding:0 5% 0 5%; 

        background-image:url(right_line.gif); 
        background-position:right; 
        background-repeat:repeat-y; }

¿Pero
que pasó? ¿Y esos odiosos espacios en blanco? Aún tenemos
que hacer algunos retoques para que tengamos todo funcionando perfectamente.
Estos espacios en blanco a un conflicto que causan las etiquetas de tipo block
como h1, h2, h3, p, etc., con algunos atributos dentro del Box Model de CSS.
Explicar porque ocurre esto sería escribir otro artículo. En este
tutorial nos enfocaremos en como solucionar lo del espacio en blanco.

Para
que todo funcione como Dios manda añadiremos esta regla a la capa superior.

Código
CSS:

div.top {
        height:28px; 
        background-image:url(top_line.gif); 
        background-repeat: repeat-x; 

        margin:2em 0 0 0;}

Ahora
editamos la etiqueta de encabezado. Así evitamos la horrible línea
blanca superior.

h1 { 
        margin:0;
        /* Solo para decoración, no tiene nada que ver con la solución
          al espacio en blanco */ 

        border-bottom:1px dashed #996;}

Para
desaparecer la línea inferior añadiremos la siguiente clase, class="autor",
a la etiqueta <p>, donde
se encuentra la información del autor.

Código
XHTML:

<p class="autor">Pie
        del artículo<br />Autor, fecha, referencias, etc.</p>

Código
CSS:

p.autor { 
        margin:-.1em 0 0 0;
        /* Solo para decoración no tiene nada que ver con la solución
          al espacio en blanco */ 

        padding-right:8px; 
        border-right:1px dashed #996;
        text-align:right;}

Como último detalle debemos colorear el area del contenido con el color de
fondo de nuestra imagen.

Código
CSS:

div.content { 

        background-image:url(left_line.gif); 
        background-repeat:repeat-y; 
        background-color: #a9d974; }

Nota: El Internet Explorer 5 ó 5.5 no posiciona correctamente las imágenes
de las esquinas. Para lograr la compatibilidad con IE 5 ó IE 5.5 necesitamos
añadir unas cuantas reglas a nuestra hoja de estilo. Estas reglas forman
parte del Simplified Box Model Hack para IE. El SBMH es una técnica muy
utilizada para corregir la implementación incorrecta del CSS en
IE. Hablar sobre esto nos tomaría otro artículo así que
por ahora solo te mostraré donde utilizar esta técnica en nuestra
hoja de estilo.

Para
implementar esta técnica añadiremos las siguientes reglas a nuestra
hoja de estilo.

Código
CSS:

/* Simplified box model hack para
          posicionar correctamente las imagenes de esquina. */
        * html img.esquina_sup_izq, * html img.esquina_inf_izq { \margin-left:-.2em;
        ma\rgin-left:0; }
        img.esquina_inf_der, img.esquina_sup_der { margin-left:.2em; }

¿Listo
para gran el final?

Fácil!
Con solo 4 capas, 8 imágenes de menos de 1 KB y utilizando CSS hemos cambiado radicalmente la presentación visual del contenido de nuestro
ejemplo. Ten la libertad de experimentar con este código y de crear tus
propios efectos. Como mencioné arriba, si aprendemos a manejar correctamente
las hojas de estilo, las formas de expresar la presentación visual del
contenido de nuestros documentos webs son innumerables.

Archivo
zip (Incluye el documento XHTML ,
la hoja de estilo (CSS) y los
gráficos utilizados.)

Referencias:

• The
  css-discuss Wiki
• World Wide Web Consortium
• Modified
  SBMH (Simplified Box Model Hack)

Uno
puede escribir un documento web sin tener que usar la etiqueta de
<meta>. No importa si uses o no esta etiqueta tu documento
será desplegado muy elegantemente sin ningún problema. ¿Entonces, para que me
sirve esta etiqueta? Según Webopedia:

"La etiqueta <meta> provee información sobre la página web. A diferencia
de una etiqueta normal HTML, la etiqueta meta no afecta la visibilidad de
la página. En realidad provee información sobre el autor del documento,
cada cuanto se actualiza, de que trata la página y que palabras claves (keywords
) representa el contenido de la página. Muchos motores de búsqueda
(search engines) usan esta información para crear sus índices."

Según
la World Wide Web Consortium
(W3C):

"meta data es información para ser interpretada en el ámbito de maquina
(machine language)"

Uno
de los meta más importante para los motores de búsqueda son los "Meta Keywords"
y "Meta Description". Para los "Meta Keywords" recuerda usar palabras que describan
el contenido de tu página. Se sabio y no trates de hacer trampa colocando palabras
para tratar de aumentar tu "ranking", pues actualmente los motores de búsqueda
poseen funciones para detectar este tipo de fraude. Cuando vayas a escribir
la descripción en el "Meta Description", ten en cuenta estos mismo detalles.
Trata de ser conciso y claro. El propósito de tu página es un buen candidato
para ser el contenido de la descripción de tu página.

Meta Keywords

<META NAME="keywords" CONTENT="frutas, manzana, naranjas,
    pera">

Los "keywords" son palabras claves que describen el contenido de tu página
web.

Meta Description

<META NAME="description" CONTENT="Ventas de frutas frescas a través de internet.">

La descripción de tu página es muy importante.
Debes saber que la mayoría de los motores de búsqueda solo toman los
primeros 150 caracteres de la descripción. Así que debes colocar una
descripción bastante concisa y efectiva.

Meta Redirect.

<META HTTP-EQUIV="refresh" CONTENT="10; url=http://www.ecodig.com">

Con este meta podemos redireccionar al usuario de una pagina
a otra. Por ejemplo: En esta META de arriba, al cabo de 10 segundos
el usuario será trasladado a www.ecodig.com

Meta Refresh

<META HTTP-EQUIV="refresh" CONTENT="600"> 

Recarga la página periódicamente. El número 600 indica
los segundos que se tardará en recargar la página.

Meta Window-target

<META HTTP-EQUIV="Window-target" CONTENT="_top"> 

Se usa para mantener la página web fuera del marco (frame).

Los siguientes meta se describen por sí solo.

Meta Author

<META NAME="Author" CONTENT="Jaime Olmo "> 

Meta Date

<META NAME="Date" CONTENT="May 17, 2002">

Meta Copyright

<META NAME="Copyright" CONTENT="2000-2003 Ecodig. Todos los derechos reservados.">

Meta Expiration

<META HTTP-EQUIV="expires" CONTENT= "thu, 31 DEC 2002 00:04:00 EST">

El navegador carga la página directamente del chache.
Una vez expire la fecha el navegador carga la página desde el servidor.

<META HTTP-EQUIV="expires" CONTENT="0">

Recarga la página web directamente al servidor.

META Cache-Control

<META HTTP-EQUIV="Cache-Control" CONTENT ="no-cache">

Evita que la página web sea cargada al cache por
el servidor o el navegador.

La siguiente etiqueta solo funciona en los navegadores
de Netscape.

 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

META Content-Type

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
 charset=ISO-8859-1>

META Content-Style-Type

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

META Robots Los "Robots" son programas usados por los motores
de búsqueda para indexar las páginas de un website. Si deseas
que todas las paginas sean indexas utiliza el siguiente meta:

<META NAME="robots" CONTENT="all">

Pero si no lo deseas, puedes:

<META NAME="robots" CONTENT="noindex,nofollow">

No añade la pagina al motor de búsqueda.
También puedes usar

<META NAME="robots" CONTENT="none"> ) <META NAME="robots" CONTENT="noindex,follow">

No añade la página inicial pero el robot continua el orden
de los enlaces de tu site.

<META NAME="robots" CONTENT="index,nofollow">

Solo indexa la pagina inicial.

<META NAME="robots" CONTENT="index,follow>

Es la opción por "default" y las mas utilizada.

META Generator

<META NAME="generator" CONTENT="program
name and version">

Es añadido automaticamente por la mayoría
de los programas para crear páginas web.

META "Smart Parsing"

<META NAME="MSSmartTagsPreventParsing" CONTENT="true">

Esta etiqueta es una creacion de Microsoft para enlasar
las paginas web con alguna palabra clave dentro de un documento. No recomiendo
su uso pero si deseas mas información visitas las siguientes páginas:

• http://www.sitepoint.com/article/888
• http://www.alistapart.com/stories/smarttags/
• http://www.officesmarttags.com/

Toma tu tiempo para escoger que meta colocar en las páginas de tu
website. Recuerda siempre usar palabras claves y no hagas trampa para subir
de "ranking" en los motores de búsqueda, podrás quedar
expulsado de sus índices y perderás algunas visitas.

Referencias:

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4

http://www.sitepoint.com/article/956/

http://vancouver-webpages.com/META/index.shtml