Iniciación al HTML

19 Septiembre 2009

La wikipedia define HTML como "el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.".

En efecto, html no es un lenguaje de programación, es un lenguaje basado en etiquetas que le indica al navegador qué debe mostrar y como debe hacerlo.

Es muy importante aprender a usar html, pues php o cualquier otro lenguaje, suele utilizarse para crear código html en función de unos parámetros o variables. Para aprender html, podeis leeros toda la documentación referida a html de golpe, o aprenderos lo más básico y según necesiteis, buscais el código html para realizar la acción que querais. Cualquier cosa que busqueis sobre html la encontrareis enseguida. Es un lenguaje muy simple. Yo intentaré mostraros lo más básico, seguido de lo que he ido aprendiendo según mis necesidades.

En html, la mayoría de etiquetas deben cerrarse y la forma de hacer esto es con el mismo nombre usado para abrirlas, precedido de una barra (/).

Ejemplo: <div>...</div>;<p>...</p>;<table><tr><td></td><td></td></tr></table>.

Las etiquetas pueden ir acompañadas de opciones al abrirse.

Ejemplo: <div align="center">texto</div> centraría el texto contenido dentro de esa etiqueta. <table width="500" border="0"> crearía una tabla con una anchura de 500px y sin borde visible.

Podeis ver una lista de las etiquetas más comunes también en la wikipedia: Lista de etiquetas comunes html.

Según tengo entendido, antiguamente se usaban tablas para diseñar las webs. Las tablas pueden tener borde invisible (<table border="0">), por tanto, el contenido quedaba organizado como en una tabla, sin verse la tabla. Esto ahora está muy mal visto, aunque algunos sitios (sobre todo del gobierno y demás que pasan de todo) siguen usando las tablas.

Actualmente, la organización del contenido, así como su estilo (fuente, color, tamaño, margen, etc) en html, se consigue mediante el uso de hojas de estilo, también conocidas como CSS (Cascade style sheet), de las cuales hablaremos más adelante.

Para añadir una hoja de estilos, hay que poner el siguiente código en la cabecera de la web (entre las etiquetas <head> y </head>):

<link href="/archivo_css.css" rel="stylesheet" type="text/css"/>

Para mostrar cierto contenido con uno u otro estilo, se crean los estilos correspondientes en la hoja de estilos, y se cargan o utilizan indicándolo en las etiquetas.

Por ejemplo, si hemos creado un estilo que muestra el texto de color rojo, y lo hemos llamado rojo, mostraríamos el texto de esta forma abriendo una etiqueta <div class="rojo"> o <p class="rojo">.

Se pueden utilizar los diferentes estilos en distintas etiquetas, no solo en etiquetas <div>, si no también en <p>, <ul>, etc.

Para acabar, una página html debería empezar más o menos así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 <html lang="es">
   <head>
     <title>Ejemplo</title>
   </head>
   <body>
     <p>ejemplo</p>
   </body>
 </html>