Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

10 ago 2010

Nociones basicas de HTML/XML

El HTML es el lenguaje base de toda página web que existe hoy en día, y el XML es el estilo de lenguaje usado para codificar las plantillas de blogger. Ambos son muy parecidos, realmente hermanos, hijos del mismo tipo de entender lo que podría ser una pagina web, blog, o cualquier estructura de datos. Vamos a hacer una introducción básica de como funcionan este tipo de lenguajes para poder empezar a entenderlos.

Lo primero que hay que comprender es que este tipo de lenguajes se basan en Etiquetas (o Marcas, Tags...) (por eso es... Marked Language) siendo el HTML un lenguaje que puede codificar un texto con imágenes y diversas estructuras (tablas, etc.), lo que también se puede llamar HiperTexto (HyperText...) y que a posteriori se comenzó a usar para la Web y se ha convertido en la base de lo que es internet hoy en día.
XML no es un lenguaje en concreto, sino una forma de escribir lenguajes como uno quiera (eXtensible...) basado en la misma idea de las etiquetas, usando las etiquetas que uno decida para lo que quiera codificar dentro de cada archivo.

Pero, ¿Qué es una etiqueta? Usemos un ejemplo básico de HTML:
<b>este texto esta en negrita</b>
este texto esta en negrita

Aquí tenemos la etiqueta b (Bold) de HTML, que convierte un fragmento de texto a negrita. Como se puede ver, hay dos etiquetas, una b de apertura, y un /b que cierra, ambos encerrados en los caracteres Mayor qué, Menor qué. Esta es la forma básica de escribir una etiqueta, tanto en HTML, como en XML o en cualquier lenguaje de este tipo. Sólo cambia el texto de la etiqueta (en este caso b) y algún detalle introducido en el interior  de las etiquetas que veremos más adelante.

La idea de esta forma de escribir las etiquetas, con un punto de apertura y otro de cierre, sirve para que dentro de una etiqueta pueda haber más etiquetas algo que se puede entender con otro ejemplo:
<b>texto en negrita<i> y esto además en cursiva</i></b>
texto en negrita y esta además en cursiva

La etiqueta i (Italic) es la etiqueta HTML para las letras en cursiva. Como se puede ver en el ejemplo toda la frase esta dentro de las etiquetas b, pero solo parte final esta en la etiqueta i. Por tanto, todo el texto esta en negrita puesto que toda la frase esta dentro de las etiquetas b, pero sólo la parte final en cursiva puesto que sólo esas letras están dentro de la etiqueta i.

Tanto un lenguaje HTML y XML solamente se trata de un conjunto de etiquetas que se encuentran unas a lado de otras, y muchas dentro de otras. En HTML las etiquetas son conocidas, como i, b, head, body, div, img, br... En XML las etiquetas las decide el creador del lenguaje para su propio uso, en el caso de blogger y sus plantillas, existen etiquetas como b:section o b:widget entre otras.

Como detalles finales, comentar dos cosas:
  • La gran mayoría de las etiquetas necesitan una apertura y cierre pero no todas las etiquetas la necesitan tener específicamente escrita. Por ejemplo en HTML, la etiqueta img (Imagen) o br (Salto de linea) no tiene porque tener una apertura y un cierre escrito puesto que en HTML no se pueden poner (En principio) otras cosas dentro de una imagen, o en un salto de línea es algo puntual sin nada interno. Y tanto en HTML o XML puede haber partes que si tienen principio y final, pero no se escribe el final puesto que no hay nada dentro o se obvia. ¿Como hacerlo correctamente? En la apertura en vez de cerrarse con un <img>...</img> o un <br>...</br>, se escriben de esta forma <img /> o <br />
     
  • Las etiquetas pueden tener propiedades, y normalmente las tienen, para indicar parámetros como tamaños, colores, y demás características de una etiqueta en particular, ya cada una de ellas suele tener sus propias propiedades y nombres de propiedades características. En XML estas propiedades las decide el creador del lenguaje, pero se escriben del mismo modo que en el ejemplo con HTML, introduciendo las propiedades dentro del Mayor qué y Menor qué de la apertura, justo después del nombre de la etiqueta. Por ejemplo, en el caso de las imágenes y su etiqueta img, es necesario indicar donde esta la imagen que se quiere poner (src, direccion url donde esta la imagen), y suele ser normal indicarle el tamaño a mostrar (width y height, altura y anchura respectivamente, por ejemplo 320 y 240 píxeles):
<img src="imagen.jpg" width="320px" height="240px" />

Espero vuestros comentarios, dudas, ayudas y críticas, no sólo para mejorar este articulo, sino para ver que es lo más conveniente para el próximo relacionado con el tema.

2 comentarios:

  1. Buena entrada de conocimientos básicos del tema, Lukas.

    Una cosa, lo que llamas marcas... ¿Es lo mismo que otros autores llaman etiquetas?

    Por cierto, me ha quedado mucho más claro el término XML. Me ha recordado los archivos generados por varios programas de software libre. Me vienen a la memoria, por ejemplo, Brasero o Cinelerra. Los archivos que guardas de estos programas tienen marcas como las que explicas, que se abren, contienen algo, y se cierran. Ahora entiendo que se haya extendido su uso, más dentro de lo que es el software libre.

    Para una siguiente parte sugiero, antes de entrar en más detalles, cómo se estructura básicamente una página web normal y cómo se aplica esto en las plantillas de Blogger.

    Buen aporte. Saludos.

    ResponderEliminar
  2. Si, José, las marcas son las etiquetas, de hecho, lo he cambiado porque no se que se me metió en la cabeza cuando escribí el texto de usar la palabra marca, cuando es más extendido usar etiqueta, y hasta yo lo uso (creo que era porque hay otras cosas que también se le llaman así y para no confundir... pero bueno)

    Sobre los XML, muchas no, muchisimas usan XML. Hasta los archivos de office (Incluso los DOCX de Microsoft creo que lo son) La idea es que leer un XML es algo genérico, existen en linux (y Windows) bastantes formas de hacerlo ya implementadas, otra cosa es una vez leido se pasan las variables a tu programa que debe interpretarlo, pero el leerlo se hace siempre igual, y ahí esta su gracia.

    Apunto tu sugerencia, me parece lo mejor, porque aparte empezar a poner etiquetas HTML en la entrada siguiente es un poco tontería, con la cantidad de sitios que ya existen en internet. Inventaremos otra cosa parecida que sea más útil.

    ResponderEliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.