1.10.09

220/365 » Sintaxis

¿Te gustaría leer este tutorial desde el inicio? 

Ayer revisamos un poco sobre cómo se estructura un sitio en HTML (bueno, XHTML en este caso). Ahora, hablemos un poco de cómo se organizan los sitios web en este lenguaje.

HTML
Primero, ya sabemos que funcionan a través de etiquetas, ¿verdad? Ya saben, se abren así: <elemento> y se cierran con </elemento>. Ahora, hablemos de cómo se organizan uno dentro de otro. Una cosa importante que deben saber es que en HTML los elementos van dentro de otros, pero si ese es el caso, deben abrirse y cerrarse mientras se encuentran adentro. Por ejemplo, un buen ejemplo relacionado a lo que vimos ayer es que html es una etiqueta que contiene a head y body. Ambas se abren y cierran sin entrelazarse entre sí:
<html>
 <head>
 </head>
 <body>
 </body>
</html>
Ahora, esto no solamente es útil para estas etiquetas, sino para organizar la información de todas las etiquetas, especialmente las que se encuentran dentro de body. ¿Cómo se hace eso? Pues por medio de los divs. Un div es una "caja" que contiene elementos en el sitio web. A mí me gusta pensar en body como la caja maestra que contiene a todo el universo de divs, mientras que existen divs más pequeños que se organizan para caber dentro de ella mientras contienen a su vez a todo el contenido. Así, los sitios web se ven así:


He coloreado cada div con un color distinto. Existe uno para el encabezado de los blogs, para el espacio donde irán los post, para la sidebar (barra lateral), etc. Incluso hay divs dentro de otros: los widgets pueden ir dentro de la sidebar, o el título del post puede ir dentro de un div para cada post. Así, existen tantos divs como elementos y subdivisiones existen en la plantilla.

Para diferenciar un div de otro, se utilizan dos métodos para etiquetarlos: id y class. Así, se le colocan nombres a cada uno de los divs cuando se abren: <elemento id="atributo"> o <elemento class="atributo">. Generalmente, los id tienen más jerarquía que los class, pero te recomiendo que investigués más al respecto para que no te cause problemas.

CSS
Todo el código de CSS está basado en las etiquetas que usamos para nombrar a los divs. La sintaxis para el código se resume así:

selector {propiedad:valor;}

Y ya, así de sencillo es. A un selector se le pone enfrente un símbolo de numeral (#) si estamos dando atributos a un div etiquetado con un id, y un punto si el div tiene una class. Un par de ejemplos:

1) #post {border:1px solid #ffffff;}
2) .date {background-color:white;}


El ejemplo 1 se lee: el div con el id "post" posee un  borde sólido con un valor de 1px y de color negro. El otro ejemplo dice: el div con clase "date" tiene un fondo de color blanco. Aparte de esto, existen elementos como los headers o párrafos (h1, h2, p, etc.) que no requieren ningún símbolo frente a ellos, por mostrarles cómo funciona esto, de forma rápida.

Ahora, veamos cómo vamos a usar todo esto para crear nuestro sitio.

1 comentario :

Cc¡ dijo...

Que chevere te quedo! felicidades!!!