Existen multitud de programas para diseñar páginas web de forma gráfica, como Adobe Dreamweaver o Microsoft Frontpage, que permiten dibujar las capas y tablas utilizando el ratón y automáticamente generan el código HTML correspondiente facilitando la labor del diseñador.
Aún así, estos programas tienen ciertas limitaciones a la hora de crear páginas por lo que muchas veces, para conseguir determinados efectos o ajustar el diseño a lo que nosotros queremos, no es suficiente el modo de edición gráfico y es imprescindible comprender el código HTML generado para modificarlo pertinentemente.
En este articulo y en los sucesivos no vamos a aprender a manejar ninguno de estos programas, sino que aprenderemos a crear páginas con un simple editor de textos, tal y como el bloc de notas de Windows o el magnífico UltraEdit.
¿Qué es HTML?
Como debe ser, empezaremos por el principio. Tiene que quedar claro que HTML no es un lenguaje de programación sino que es un lenguaje de marcado al igual que XML. Es más, HTML es un sublenguaje de XML.
Un documento HTML no es más que un documento de texto plano, por eso vamos a poder crearlo con cualquier editor de textos. Por otra parte, un lenguaje de marcado consta de un conjunto de etiquetas o marcas que permiten agregar información adicional al texto, sobre su estructura o presentación.
HTML se traduce al español como "Lenguaje de marcas Hipertextual", y aquí es donde viene otra de las carácterísticas más importantes de este lenguaje: el Hipertexto. HTML permite definir "zonas sensibles" (o enlaces), que pueden ser activadas desde un navegador para acceder a otros documentos HTML o a cualquier otro recurso disponible en la red.
El primer documento HTML
Como habíamos dicho, vamos a utilizar el bloc de notas para crear documentos HTML durante este curso, así que empezaremos abriéndolo.
Para empezar a familiarizarnos con el lenguaje, vamos a transformar el siguiente texto en un documento HTML.
El cielo está enladrillado, ¿quién lo desenladrillará? El desenladrillador que lo desenladrille, buen desenladrillador será. Locualo.net
En primer lugar, identificaremos los párrafos delimitándolos con el par de etiquetas <p> … </p>, que sirven para tal efecto.
<p>El cielo está enladrillado,</p> <p>¿quién lo desenladrillará?</p> <p>El desenladrillador que lo desenladrille,</p> <p>buen desenladrillador será.</p> <p>Locualo.net</p>
A continuación distinguiremos dos nuevas partes del documento:
- El encabezado, identificado por las etiquetas <head> … </head>, donde indicaremos el título (el título de la ventana) entre etiquetas <title> … </title>. En próximos artículos aprenderemos a incluir más información en la cabecera del documento.
- El cuerpo, donde va todo el texto del documento, y que identificaremos entre etiquetas <body> … </body>.
<head> <title>Hola mundo</title> </head> <body> <p>El cielo está enladrillado,</p> <p>¿quién lo desenladrillará?</p> <p>El desenladrillador que lo desenladrille,</p> <p>buen desenladrillador será.</p> <p>Locualo.net</p> </body>
Ahora añadiremos un enlace de hipertexto a la página principal de Locualo.net. Para ello identificaremos la zona activa entre etiquetas <a> … </a> y utilizaremos el atributo href para indicar la URL.
Después de esto, y por último, delimitaremos todo el texto entre etiquetas <html> … </html> para identificar que hemos creado un documento HTML y habremos terminado.
<html>
<head>
<title>Hola mundo</title>
</head>
<body>
<p>El cielo está enladrillado,</p>
<p>¿quién lo desenladrillará?</p>
<p>El desenladrillador que lo desenladrille,</p>
<p>buen desenladrillador será.</p>
<p><a href="http://www.locualo.net">Locualo.net</a></p>
</body>
</html>
Daremos un nombre al documento, lo guardaremos con extensión .htm y ya podemos visualizar el resultado abriéndolo con el navegador (Internet Explorer, Firefox, Opera, etc).
Un último consejo
En HTML no es obligatorio escribir las etiquetas con letras minúsculas ni con mayúsculas. Podéis hacer la prueba y escribir las etiquetas de las dos formas, e incluso mezclando letras mayúsculas con minúsculas y comprobaréis que el navegador las interpreta de igual forma y vuestra página se ve exactamente igual.
Sin embargo, es bueno que os acostumbréis a escribir todas las etiquetas siempre utilizando letras minúsculas. Ahora mismo puede que no le veáis el sentido pero se lo veréis en próximos artículos, cuando convirtamos nuestros viejos documentos HTML en flamantes documentos XHTML y entendáis las ventajas que conlleva este último.