Bueno, te han dado ganas de aprender html. Quizás ya haces páginas web, pero sientes que te falta algo. Sientes que se puede afinar un poco más lo que hace tu editor. Quizás usas Front Page, o quizás Dreamweaver, pero a veces tienes que tocar el código interno de la página y te encuentras perdido. Es fácil dañar toda una página web si editas mal alguna cosa.
Así que empezaremos un cursillo rápido de HTML de guerra. Algo sin demasiadas palabras enredadas, ni tecnicismos de programador.
Pero, ¿Por dónde empezamos? Bueno, lo primero es tener un buen editor. Dreamweaver es uno de los mejores en el sentido de que te deja editar tu código sin modificártelo. Front Page, en cambio, le encanta cambiarte las cosas y agregar cosas que no estaban allí. Y eso no es bueno, porque pierdes el control. Consíguete el Dreamweaver MX, y si no, el Homesite o alguno de sus clones gratuitos, como lo son MAX’s HTML Beauty++ o 1st Page 2000.
Una vez estés armado con esto, podemos empezar a ver las entrañas del HTML.
Primero veamos que es el HTML, o mejor aún, lo que no es. El HTML NO es un lenguaje de programación. De manera que si codificas HTML, no estás programando.
HTML es más bien un lenguaje de presentación, que sirve para modificar la manera en que se presentan los datos en una página web. Las letra significan Hyper Text Markup Language, o lenguaje de marcación de hipertexto. Y para marcar el texto, o delimitar áreas que se deben ver de una forma u otra, el HTML utiliza lo que se conoce como “tags”. Los tags son palabras especiales que van rodeadas de los signos de < y >. Por ejemplo, <html> es un tag.
La mayoría de los tags tienen un comienzo y un final, con el cual el navegador sabe que el área delimitada empieza y termina. El tag que termina siempre empieza con </ de manera que con html, sería <html></html>. ¿Vamos bien? Es más hoy en día todos los tags deben ser terminados, pero eso lo veremos después.
Empecemos a hacer una página web. Primero abre en tu editor una página en limpio y ponle Guardar como… index.html
En esa página, empezaremos por definir que lo que vamos a hacer es una página html, y para eso, utilizaremos un tag que ya vimos:
<html>
y su cierre:
</html>
Y eso es nuestra primera página, pon:
<html>
¡Hola Mundo!
</html>
Lo salvas como index.html y miras ese archivo con tu navegador. ¡Bingo! ¡Funciona! ¡Tu primera página web hecha a pulmón!
Claro que eso no es todo. A ver, la página web se divide en dos partes básicas: el cabezal y el cuerpo. Pero por supuesto que hay que enredar eso un poco para que sea cool, chido o como quiera que se llame en tu país. Así que al cabezal le llamaremos head y al cuerpo, body:
<html>
<head>
Cabezal
</head>
<body>
Cuerpo. Aqui es donde pondremos la mayoría de nuestras cosas
</body>
</html>
Lo primero que querremos poner es algo de texto. Y por supuesto que con solo ponerlo, ya funciona, pero seguramente querremos ponerle algo de formato, quizas ponerle párrafos, tipo de letra y color de letra. Veamos:
El tag para párrafo es <p> y se cierra con </p>
<html>
<head>
Cabezal
</head>
<body>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
</body>
</html>
Viste que fácil. Pero digamos que quieres cortar una línea sin que se separe tanto como un párrafo nuevo, ¿como le haces? Fácil, con el tag <br>. Pero para hacerlo más moderno, como lo dicta la última especificación, puedes escribirlo asi: <br />.
<html>
<head>
Cabezal
</head>
<body>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo<br />
pero con corte de línea.</p>
</body>
</html>
¿Vamos bien eh? Ya con esto, podemos terminar la primera lección de HTML de guerra. Pero nos queda una inquietud: las letras siempre me salen en Times New Roman o el font que tenga seteado por defecto mi navegador… ¿Cómo hago para controlar eso? Hay dos maneras y eso nos lleva a lo siguiente.
Y es que en este momento debemos tomar una decisión. ¿Nos vamos por el html tradicional, en el cual se ponen los atributos de las fuentes o tablas directamente en el código? ¿O nos vamos por el lado de los CSS, mediante los cuales controlaremos el sitio desde un archivo centralizado?
Para mi, la respuesta es obvia. Como esta es una página para WebMasters, hagamos lo que tiene que hacer un webmaster en la vida real para facilitarse la vida: utilizaremos los CSS.
Asi que nos vemos en la próxima lección a esta misma bati-hora y en este mismo bati-canal.