Armando los divs – Capitulo 2

Haciendo Plantillas para Joomla – Capitulo 2

No me voy a detener mucho explicando el formato de una web pero para el neófito en la materia les hago una breve introducción para Armando los divs o CSS Div y luego amplían leyendo el manual HTML que seguramente ya descargaron o buscan mayor información en la web.
A grandes rasgos, una web no es más que un conjunto de archivos html alojados en un servidor. Estos archivos pueden ser “generados al vuelo” como en el caso de Joomla, mediante PHP, o bien estáticos si los hicimos nosotros mismos escribiendo el código…

Armando los divs ¿Cómo funciona?

A la vez, podríamos decir que un formato base de un archivo html está compuesto de etiquetas y una extensión. Las etiquetas son las que están adentro del archivo y la extensión es lo que hace que el archivo sea interpretado por el navegador.
Por ejemplo: si el archivo tiene una extensión html o htm el navegador intentará “leer” las etiquetas que hay dentro del archivo y según sean estas nos irá mostrando los contenidos. Si el archivo tiene la extensión PHP, el navegador “ejecutará” en el servidor el script o programa y nos “devolverá” un archivo “leíble” por el navegador, generalmente un html. Hay muchas extensiones y se interpretan de manera diferente utilizando MIME, XML, SGML. Los conceptos básicos los pueden leer (estudiar) más detalladamente en Wikipedia – http://es.wikipedia.org/wiki/Html.
Una estructura típica de un archivo html es la siguiente:

<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo</p>
</body>
</html>

Estructura CSS Divs

Todo el contenido del archivo está centrado dentro de las etiquetas html que a su vez involucra otras etiquetas cuyas funciones son bien definidas, todo en un orden jerárquico.
Por ejemplo: la etiqueta “head” se refiere al “encabezado” de la web, la etiqueta “body” al cuerpo de la web. Dentro de estas etiquetas pueden ir muchas más que es necesario conocer a fondo porque dentro de ellas es donde vamos a trabajar.
A esta altura ya deberías tener un conocimiento más acabado de lo que es un archivo html, de lo contrario lee un poco más el manual que hayas descargado e interiorízate bien del tema. No es difícil, inclusive puedes hacerte “machetes” para tener a mano para consultas rápidas.
Salteando mayores detalles para no hacer tan largo este “how-to”, pasemos a lo que sería nuestra primer intento de diagramación para Joomla!. El código, para empezar html, sería el siguiente:

<html>
<head>
<title>Web de Prueba</title>
</head>
<body>
<div id=”header”>
Cabecera
</div>
<div id=”cuerpo”>
Cuerpo
</div>
<div id=”derecha”>
Derecha
</div>
<div id=”izquierda”>
Izquierda
</div>
<div id=”pie”>
Pie
</div>
</body>

Si guardamos esto en un archivo con la extensión “html” y la abrimos con un navegador veremos los textos que colocamos dentro de las etiquetas “div”, es decir: “Cabecera”, “Cuerpo”, “Derecha”, “Izquierda” y “Pie”, uno debajo del otro.

¿Por qué? La explicación es sencilla, hemos definido que nuestra web va a tener 5 divisiones o áreas pero no especificamos ni el formato ni la ubicación ni nada y el navegador simplemente interpreta lo que es, imaginariamente es como que hubiesemos armado una “tabla” de 5 celdas contínuas, una debajo de la otra, ocupando el ancho de nuestra pantalla.

Para comprobarlo abran el archivo con Dreamweaver o Frontpage y verán que los textos se muestran dentro de un cuadro con líneas punteadas.

Observen además que cada etiqueta tiene un nombre con el texto “id=” delante, por ejemplo “header”. El texto “id=” se conoce como atributo de la etiqueta y los nombres (ejm. “header”) se conocen como identificadores de dichos atributos.  Esto lo vamos a usar para diferenciarlos y especificar el comportamiento de cada uno utilizando CSS.

Por supuesto que aquí no termina el tema, existen muchísimos atributos para cada una de las etiquetas html pero para eso recurre a algún manual ya que no es el propósito de este tutorial explicar cada uno de ellos, solo nombraré o explicaré los que necesitemos para nuestra plantilla Joomla!

Lo que sigue es nuestro primer template.css

Capitulo 3Empezando el Template

1 comentario en «Armando los divs – Capitulo 2»

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad