viernes, 7 de febrero de 2014

HTML fácil y para todos: Introducción a HTML

En estos días mis post irán dirigidos a HTML. Sé que a muchos les gustara este tema ya que lo podrán usar para mejorar sus plantillas de Blogger o página web. 

Para confeccionar estos post voy a usar los apuntes que tengo de la academia de informática donde trabaje y manuales que descargue para aprender. Así que espero que les sea útil y que puedan sino es aprender conocer un poco el mundo HTML.

Al finalizar esta serie de post dejare un PDF con todo lo que he dado para que lo podáis tener a mano y usarlo. Sera un manual gratuito ya que mis post están dirigidos para que todos podamos aprender cosas nuevas y poderlas utilizar.

Muchos cuando empezamos nuestro blog y vemos HTML decimos qué sera eso, sera un elemento para los programadores...etc. También tenemos miedo y optamos por pasar de ello, pero con el tiempo nuestras necesidades como blogueros nos pide mejorar nuestro blog, hacerlo más visible, más practico, que conecte con nuestras redes sociales en definitiva le queremos dar nuestro toque personal. Para ello tenemos que empezar por lo básico que es el lenguaje que usan las páginas, y eso es el HTML explicado de una manera sencilla.



En algunos manuales se suele empezar con una introducción teórica haciendo referencia a la historia, yo me saltare esa parte y mi introducción comenzara hablando de lo practico, como es la estructura.

Las páginas HTML están estructuradas en dos partes: 
  • HEAD (cabecera) 
  • BODY (cuerpo).

Ejemplo de página:

Si escribes:

<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>

<!-- Esto es un comentario-->

El tipo de documento no es obligatorio, es decir que la página se verá igual tanto si lo escribes como si no. Sólo sirve como identificación del tipo de contenido del fichero.

Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que éste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografía en formato GIF, o un vídeo en formato MPG, o si lo que estamos intentando es transferir un fichero. 

Si el fichero procede de un servidor http remoto, (es decir un servidor web; http es el nombre del protocolo que utilizará el servicio invocado), éste se encargará de decirle al visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la única forma de saberlo es por la extensión del fichero.

La extensión de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje) que hay después del nombre del fichero y que están separadas del mismo por un punto.

Las extensiones de 4 o más letras son típicas de sistemas operativos como UNIX o LINUX y las de 3 o menos de Windows
Por ejemplo, la extensión .html funciona en Windows igual que la .htm 


Sobre los tipos de extensiones hablaremos en otro momento, ya que es un tema extenso y aunque es importante en este post sólo quiero hacer una introducción.

Los documentos HTML los puedes escribir con lo que quieras...menos directamente en la plantilla de blogger, ya que si te confundes puedes perder la antigua configuración que tenías. Por eso mi consejo es primero escribirlo en un word, después ir a blogger, hacer una copia de seguridad de nuestro blog y una vez hecho esto ya tocar el HTML. 

Recordar que siempre que los realices en word, no debes olvidar guardarlos en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word.

Tampoco vale dejarlos con la extensión .txt que les dejan la mayoría de editores al salvarlos en modo Solo Texto. No serían interpretados correctamente. Por lo tanto si tienen extensión .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensión por defecto .txt y darle ya directamente la extensión .htm.

Algunos procesadores de texto ya incluyen entre sus tipos el .htm. Si es así, lo que hacen es eliminar la codificación propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itálica, automáticamente es convertido al elemento <I>, etc.. El problema de los editores avanzados de texto y de la mayoría de programas asistentes para escribir HTML es que generan un código bastante "sucio", difícil de corregir o modificar después. No es que no funcione, pero como el programa no sabe cual es la finalidad del texto escrito, por defecto le pone todo lo que sabe por si acaso, aplicando el dicho de "mejor que sobre..."

Mañana hablaré de la cabecera del documento; tamaños y tipos de letras, texto de colores, párrafos, saltos de linea..etc.