Anatomía de un blog - Conceptos básicos de HTML

Hay millones de blogs con interesantes trucos y recomendaciones para hacer de tu espacio en Blogger el mejor. Lamentablemente, uno termina copiando y pegando códigos que al final no sabe ni qué son. La gran mayoría de estos trucos están perfectamente explicados en la ayuda de Blogger, aunque, lamentablemente, no siempre están en español. La ventaja principal de acudir a la ayuda oficial es que no sólo sabremos lo que estamos haciendo, si no también cómo deshacerlo.

Lo que sigue es una pequeña introducción para entender cómo funcionan los códigos que pegamos, no lo que hacen.

html 1Supongamos que un blog es un ser vivo. Para su estudio, podemos dividirlo básicamente en dos partes: cabeza y cuerpo. La cabeza (head) es donde se encuentran los datos globales más importantes, como el idioma en que habla, su nombre, y los datos que condicionan las acciones del cuerpo (body), que vendrían a ser su personalidad.
El contenido de la cabeza normalmente los demás no lo pueden ver. Conocemos un blog por el comportamiento reflejado en su cuerpo, pero, como en la vida real, por éstos podemos conocer la cabeza. El cuerpo está compuesto de muchos órganos, cada uno con diferentes funciones. Nos centraremos en los de la raza llamada “Blogger”.

Cada órgano comienza con su nombre rodeado de los signos <>, que lo protegen del resto de los órganos. Por ejemplo, la cabeza comienza así: <head>.
html 2Después de este “tag” (etiqueta), se inserta el contenido de la cabeza. La etiqueta que contiene una barra indica que allí termina el órgano (</head>). Un niño, dibujaría la página más o menos como se ve en el gráfico.

La cabeza se rellena con muchas cosas, pero la mayoría de ellas nunca las veremos en nuestro navegador. Una de ellas, que encontraremos en todas las páginas web, es el título (title), que también consta de una etiqueta de apertura y una de cierre. Al contrario de head, todo lo que escribamos dentro de las etiquetas body (si no está dentro de otras etiquetas que lo nieguen) será visible en la pantalla. Un párrafo puede estar insertado dentro de <p> y </p>, y a su vez la etiqueta <p> admite otros modificadores, por ejemplo:

<p align=right>Alineará este texto a la derecha.</p>

Tu navegador interpretará: “comenzar párrafo » alinear a la derecha » escribir ‘Alineará este texto a la derecha.’ » terminar párrafo”, y nos mostrará simplemente esto:

Alineará este texto a la derecha.

Así sucede con muchas variables, con las que podemos definir el tamaño de las letras, su color, tipografía, etc. Estas son algunas de las etiquetas de texto más usadas:

<p align=center><b>Negrita, <i>Cursiva</i>, <u>Subrayado</u></b>, S<sup>uperíndice</sup> y S<sub>ubíndice</sub>…</p>

Que se ve así:

Negrita, Cursiva, Subrayado, Superíndice y Subíndice...

html 3Body también puede modificarse de forma similar, por ejemplo, agregando BGCOLOR cambiaremos el color del fondo del blog, como se muestra en el gráfico. Todo lo que está entre una etiqueta de apertura y su cierre correspondiente, será modificado por los valores que esta etiqueta contiene (en el ejemplo anterior, observa como todo lo contenido entre <b> y </b> se muestra en negrita).

En los blogs estamos acostumbrados a las "sidebars", o barras laterales. En este blog hay una a la izquierda de la pantalla, pero es como su brazo derecho. Como resulta lógico, los brazos están dentro del cuerpo, es decir:

<HTML>
<HEAD>
atributos de la cabeza
</HEAD>
<BODY>
<SIDEBAR>
Contenidos de la barra lateral
</SIDEBAR>
<MAIN>
Contenido principal del blog (posts)
</MAIN>
</BODY>
</HTML>


Basta con echar un vistazo a la plantilla de tu blog para que veas que en realidad no es tan sencillo como esto, pero lo importante es entender que todo lo que está ahí funciona de esta manera. El cuerpo de los seres web evoluciona mucho más rápido que el nuestro, por eso, ninguna de estas explicaciones es definitiva; pero también es cierto que, al paso que evolucionan, si no estamos al tanto de lo más básico, nunca podremos entender lo que viene.

1 comentarios:

El TXOKY dijo...

Muy buena definicion,a la vez de informativa,e creado a el post un vinculo para que alguno lo pueda leer,muy interesante,enhorabuena.

Publicar un comentario