Maquetación de Página Web XHTML

Antes de comenzar a explicar cómo se desarrolla una web básica es necesario aclarar qué significa XHTML, a continuación les hago una breve reseña.

¿Qué es XHTML?
Como podrán ver es una palabra compuesta y básicamente envuelve a dos lenguajes populares de programación web, XML y HTML. Se puede decir que es también una metodología de programación, donde se utilizan conceptos de ambos lenguajes.

XML es ampliamente usado,  y la aplicación más común es estructurar datos  (catálogos, noticias por ejemplo) para ser utilizadas o leídas por otras aplicaciones y/o dispositivos. Una de sus grandes  ventajas es la capacidad de permitir la transferencia estructurada de información que puede ser utilizada por otras aplicaciones, como por ejemplo Palm, PDA, Celulares y otros.

Paso 1

Para la realización de este pequeño ejemplo utilizaremos Dreamweaver CS3, tu puedes utilizar cualquier editor HTML. Como primer paso crea un nuevo documento XHTML.

Dentro del tag body es donde comenzaremos a escribir nuestro código XHMTL el que ira generando las partes involucradas, pero antes es necesario crear una plantilla de estilos.

Recuerda que una vez creada debes adjuntarla a tu página.

Como habrás notado utilice la palabra “Partes”, si, es correcto, en pocas palabras una página web esta subdividida en partes, como por ejemplo: barra superior o “Top Header”, navegador, columnas, pie de página o “Footer”.

Para entender esto es recomendable que hagas un bosquejo o maqueta de la estructura básica de tu página web antes de comenzar con el código, esta es una buena práctica y te permitirá ver en otra dimensión lo que tienes en mente, y sobre todo trabajaras ordenado.

Del cuadro de arriba se pueden ver claramente que nuestra página web va a estar compuesta por 6 partes.

1. Barra superior.
2. Navegador.
3. Columna Derecha.
4. Columna Izquierda.
5. Contenedor Central.
6. Pie de Página.

En el siguiente paso se explica cómo codificar estas partes en una hoja de estilos.

Paso 2

Comencemos a definir los estilos de la página, para esto abrimos la plantilla de estilos. Copia y pega en la plantilla de estilos los códigos que se muestran a continuación.

@charset “utf-8″;

/* CSS Document */

/*Este estilo define las características de la barra superior*/

.partesuperior{width:950px; margin:auto; text-align:center; height:100px; background-color:#CCCCCC}

/*Este estilo define las características del navegador principal*/

.navegador{width:950px; margin:auto; text-align:center; height:22px; background-color: #CC0000; color:#FFFFFF}

/*Este estilo define las características del Contenedor Principal que contendrá las dos columnas principales y también es donde se mostrara el contenido mas importante.*/

.contenedor{width:950px; margin:auto; text-align:center; height:700px; background-color: #CCCCCC; color:#FFFFFF; border:1px #FFFFFF}

/*Este estilo define como se mostrara el Div Central*/

.contenedor .contenido_central{width: 630px; float:left; height:697px; background-color: #FFFFFF; margin:0px 0px 0px 10px}

/*Estos dos estilos abajo definen las columnas de la derecha e izquierda*/

.contenedor .colum1{width: 150px; float:left; height:697px; background-color:#333333}

.contenedor .colum2{width: 150px; float:right; height:697px; background-color:#333333}

/*Define los estilos del pie de pagina o Footer*/

.footer{width:950px; margin:auto; text-align:center; height:80px; background-color: #990000}

Paso 3

Ahora en la página XHTML en blanco que creaste antes copia y pega el código de abajo:

<!–Inicio de codigo a copiar –>

<!–Este Div es para el Header o Barra Superior –>
<div class=”partesuperior”>
Header o Barra Superior
</div>

<!–Este Div es para el navegador  –>
<div class=”navegador”>
Navegador Principal
</div>

<!–Este Div se ubica por debajo del navegador y contiene las dos columnas principales de nuestra web –>
<div class=”contenedor”>

<div class=”colum1″>
Columna 1
</div>

<div class=”contenido_central”>
Contenido
</div>

<div class=”colum2″>
Columna 2
</div>

</div>

<!–Este Div es el que forma el Footer o pie de pagina –>
<div class=”footer”>
Footer o Pie de Página
</div>

<!–Fin de codigo a copiar–>

Por último, si quieres desarrollar páginas más complejas te recomiendo que profundices más en XHTML, CSS y WC3 Como puedes ver este es tan solo un ejemplo bastante sencillo.

Espero que te haya sido útil.

Puedes descargarte el código fuente haciendo clic aquí.

Popularidad: 6%