9 de octubre de 2005
Blogging Avanzado Parte 1: ¿Qué es el HTML?
En una onda de bondad que me ha invadido, la cual es muy extraño en mi persona. Les daré clases de Blogging Avanzado. ¿Por dónde? Por supuesto que a través del Diario Mural.
Bueno... antes de comenzar, deberian leer los pasos básicos de como hacer y realizar un blog. Es decir, como publicar, cambiar plantillas y opciones. Además deseo recordarles que este tutorial es para blogs publicados bajo nuestro amigo Blogger, otros servicios como Blogia, MSN Spaces, Yahoo! 360 entre otros no servirian de mucho (no soy usuario de ellos).
Introducción al HTML
HTML es la sigla para Hypertext Mark-Up Language o Lenguaje de Etiquetado/Marcado de Hipertexto. El HTML es hijo del SGML (Standard Generalized Mark-up Language o Lenguaje de Marcado General Estandar) y tiene varios hermanos, como el XML.
El HTML tiene un estandar de calidad, regido por el W3C o Consorcio del World Wide Web. El cual trataremos de respetar en base al XHTML 1.0 (hijo del HTML con el XML, no varía mucho de su padre, se usa mucho en blogging por la caracteristica de los alimentadores o feeds).
Nociones básicas del HTML
HTML no es un código complejo como C o Python. Es fácil de aprender y rápido de aplicar.
En este se utilizan etiquetas, para determinar el formato del archivo/página. Las etiquetas son las frases que van entre <>, ojo: no toda palabra es una etiqueta.
El siguiente ejemplo es el clásico Hola Mundo en HTML.
<html>
<head>
<title>Hola Mundo</html>
<body>
<p><b>Hola <i>Mundo</i></p>
</body>
</html>
Como pueden observar, el código debe tener una etiqueta de apretura y una de clausura, con un orden jerarquico. La etiqueta que comienza con / (ejemplo </html>) es la etiqueta de clausura, la que no tiene / es la etiqueta de apertura.
Las etiquetas mostradas en el ejemplo anterior son:
- <html>/</html>: Es la mas importante, sirve para indicar al navegador que el archivo es HTML.
- <head>/</head>: Una de las etiquetas más importantes, dentro de esta se aclaran parametros del navegador como el título de la página, los cuales también son con etiquetas. Lo que hay dentro de <head> no se muestra en el navegador.
- <title>/</title>: Esta etiqueta indica el título de la página. Ojo, que este título es el que aparece en la barra superior de la ventana, al lado del nombre del navegador.
- <body>/</body>; Indica el cuerpo del documento, es decir, todo el texto que se puede mostrar.
- <p>/</p>: Dentro del cuerpo (especificamente en body), esto indica que el texto que va dentro, está dentro de un párrafo.
- <b>, <i>/</b></i>: Estas etiquetas son de formato. La etiqueta <b> indica que el texto que está dentro debe aparecer en negrita, mientras que la <i> indica que el texto debe aparecer en cursiva. En el ejemplo aparece una <i> dentro de una <b>.
- <u>/</u>: Indica que el texto dentro de la etiqueta va subrayado
- <font>: Indica que el texto dentro de la etiqueta tiene algunas propiedades. Ejemplo <font face="Tahoma" size="2">Hola</font>. Significa que la frase "Hola" está con tipografía Tahoma y su tamaño es de 2 (Nota: En HTML los tamaños van desde el 1 hasta el 10, me parece, siendo 1 el más pequeño. La etiqueta <font> se usa, pero es más recomendable usar la eitqueta <span> con la propiedad style, la cual usa CSS como formato de estilos).
- <table>: Sirve para hacer una tabla. Para crear filas se usa la etiqueta <tr>. Y para crear las celdas dentro de la fila, se usa <td>. No puede ir una etiqueta <td> antes que una <tr>. Ni menos antes de una <table>
- <hx>: Indica que el texto dentro es un encabezado. La x puede ser de 1 a 6.
- <script>: Esta etiqueta indica que entre estas hay un código diferente al HTML. Puede ser PHP, Javascript, Visual Basic, etc. La usaremos más adelante cuando tengamos que enchular el blog.
- <style>: Esta nos indica que hay una definición de estilos. Comúnmente es utilizado el CSS, también lo usaremos más adelante, pero no se preocupen por aprender más de el.
- <meta>: Etiqueta avanzada que sirve para indicar parametros especiales. Solo lo coloco por su importancia, no trabajaremos mucho con el.
- <a>: Indica que el texto dentro de este es un hipervínculo. El cual nos permite enlazar a otras páginas de importancia. Para crear un hipervínculo al Diario Mural es:<a href="http://huevoxinc.blogspot.com" target="_blank">El Diario Mural de Huevox Inc</a> La propiedad href nos indica hacia que sitio deseamos vincular, la propiedad target nos indica en cual ventana deseamos mostrar la página. Existe _blank, _self, _parent, _top. Prueben a ver que sale.
Sí desean saber más sobre el lenguaje HTML, pueden ver en Wikilibros o en DesarrolloWeb.com
