Actualizado el 14-01-2007
versión para imprimir
Antes de empezar ...
La forma de escribir páginas web ha ido cambiando con los años. Las limitaciones del lenguaje HTML, por ejemplo para mejorar la presentación del texto, han aconsejado descartar el uso de muchas de las etiquetas tradicionalmente disponibles, sustituyendolas por instrucciones CSS. El uso de hojas de estilo en cascada (CSS) es ya imprescindible. Por eso abordamos una reescritura de este manual, que ya notaba el paso del tiempo.
El objetivo sigue siendo el mismo, aprender a escribir html standard es decir, prescindiendo de todas aquellas características que solo se ven en tal navegador y no en tal otro, y de aquellas características que aunque eran muy utilizadas, ya no son recomendables.
El resultado será html limpio y simple, que debería visualizarse igual en cualquier navegador y ordenador.
Cuando lleves algun tiempo familiarizándote con el html, tendrás que hacer varias elecciones. Tendrás que elegir que html deseas escribir: si la habitual sopa de etiquetas que se usa en la mayoría de las páginas (y muchas veces en esta), el mas estricto html 4.01, o el todavía nuevo xhtml. No te preocupes demasiado, puesto que si tus hábitos de escritura son los correctos, te costará muy poco pasar del segundo al tercero.
En general en este manual se seguirá el standard html 4.01, posiblemente la opción mas lógica en este momento.
Cuando vayas avanzando te interesará profundizar en la apariencia de las páginas. Aunque veremos algunas etiquetas HTML que cambian la apariencia de los elementos, irás viendo que lo recomendado es prescindir de ellas y confiar en las hojas de estilo en cascada para todo lo relativo a la visualización de la página. Por ello, aunque en está página hay un manual dedicado específicamente a las reglas de estilo, es inevitable que nos refiramos también aqui a ellas.
Y empezamos ya: las páginas web estan escritas en html. Html es un lenguaje de etiquetas o marcas. Estas etiquetas marcan porciones del documento, con información que el navegador necesita para procesar la página y mostrarla. El navegador, al cargar una página, lee las etiquetas que la componen y trata los datos acorde con ellas.
<b>aqui tienes un par de etiquetas html que indican al navegador que ponga el texto en negrita</b>
Bien, pues esto es lo primero que has de recordar. En html las etiquetas son texto encerrado en dos llaves. Así:
<etiqueta> texto o elemento de la pagina, afectado por las etiquetas</etiqueta>
Tu escribiras el texto y sus etiquetas. En el navegador se verá únicamente el texto, que obedecerá las instrucciones contenidas en las etiquetas: el navegador lee y interpreta las etiquetas, pero no las visualiza.
Advierte por favor la barra / que distingue a la etiqueta de cierre. Y ten en cuenta que tradicionalmente las etiquetas pueden escribirse en mayúsculas o minúsculas indistintamente, siendo lo mismo <b> o <B>. PERO la nueva recomendación del W3C xhtml determina que las etiquetas deben escribirse en minuscula, asi que es una buena práctica que desde el principio te acostumbres a poner todas tus etiquetas siempre en minúsculas.
Bien, tambien habrás observado que las etiquetas van en pareja, encerrando dentro de ellas el texto a que afectan. Así ocurre con la gran mayoría de etiquetas html, pero debes tener tambien en cuenta que hay otras etiquetas simples. Se trata de las que utilizan los llamados elementos vacíos. Vacíos porque consisten en una sola etiqueta y no encierran dato alguno en su interior. Por ejemplo:
<br>
Y una regla mas a recordar. En una pareja de etiquetas el cierre va en la ultima etiqueta. En las etiquetas simples, el lenguaje html permite omitir la barra de cierre: <br> aunque también puedes utilizar el formato propio de xhtml: <br />.
Por cierto. La etiqueta <br> utilizada en el ejemplo anterior se utiliza para ordenar al navegador que inserte una nueva línea (retorno de carro).
Las páginas están formada por elementos: cada imagen, por ejemplo, es un elemento, pero tambien lo es cada uno de los párrafos que lo componen; un enlace es un elemento; incluso un salto de linea puede ser tratado como tal.
Las etiquetas html señalan al navegador la existencia de estos elementos. Pero ademas un elemento del mismo tipo, por ejemplo, un párrafo, puede ser tratado de forma diferente, y por eso las etiquetas que marcan el comienzo y fin de cada elemento admiten atributos. Los atributos especifican las cualidades de ese elemento. Su sintaxis es siempre la misma, se declaran dentro de la etiqueta de inicio del elemento por medio del nombre del atributo, signo igual, comillas, valor del atributo: elemento atributo="valor". Ejemplo:
<table border='0'> </table>
donde indicamos que ese elemento tabla tendrá el atributo (o cualidad) de borde cero (borde invisible). Podemos especificar varios atributos para cada elemento html. Si hay varios atributos, es indiferente el orden que ocupen en la etiqueta.
Estructura de la página
Las etiquetas mas básicas son las que forman el esqueleto de la página:
<html> <head> <title> titulo</title> </head> <body> </body> </html>
Estas etiquetas no se visualizan, pero son importantes porque muestran al navegador la estructura de la página:
<html>: Esta pareja de etiquetas es la que indica al navegador que todo lo que encierra es lenguaje html y debe ser procesado como tal. En consecuencia, la etiqueta de inicio es la primera etiqueta de la página, y la etiqueta de cierre ha de ser la última. Nada se escribe antes ni despues, con la sola excepción de la declaración de tipo de documento; declaración de la que hablaremos mas adelante y que de momento puedes olvidar. Nada antes y despues de la etiqueta <html> </html>.
Las parejas de etiquetas <head> y
<body> separan las dos grandes partes en que se divide toda página web: la cabeza y el cuerpo. Dentro de la sección head se inserta información sobre el documento, que no será visualizada al mostrar la página pero es de ayuda en su procesamiento. Aqui
van las etiquetas <meta> que contienen información referida al autor de la
página, descripción de la misma, etc. Ya hablaremos de ellas. De momento retén
que el único elemento imprescindible dentro de head es el título de la pagina,
encerrado en las etiquetas <title> .
Este título es el que se ve fuera de la página, en la barra superior del navegador, y además el texto de este título será el que aparezca como identificativo de la página si algun visitante la añade a sus 'favoritos' (iexplorer) o 'marcadores' (netscape)
La sección body es la que debe contener todos los elementos que procesados por el navegador darán vida a tu página: textos, imagenes, sonidos, links ... lo que se te ocurra.
Bien, pues vamos a por nuestra primera página. Es tradicional que el primer trabajo en todo lenguaje informatico sea el famoso 'hola mundo'. Nosotros somos originales y haremos una pagina con un solo párrafo que diga 'adios mundo cruel':
<html> <head> <title>Una pagina de prueba</title> </head> <body> <p>Adios, mundo cruel ...</p> </body> </html>
Bien, y como lo hacemos ? pues muy sencillo. Abrimos nuestro editor favorito.
Tecleamos las etiquetas y el texto (en minusculas las etiquetas, recuerda, y no
olvides la barra de cierre). Y grabamos nuestra magna obra en formato solo
texto, pero con la extensión *.htm o *.html (en lugar de *.txt).
Si necesitas
mas detalles para ello, sigue estos pasos: una vez escrito el documento, acude al menú
'Archivo' del editor, primera opción de la barra superior, desde la izquierda.
En el menú desplegable elige 'guardar como' y en la ventana de dialogo, en el
recuadro destinado al nombre escribe el nombre del archivo, seguido de un punto
y la extensión htm (por ejemplo, prueba.htm. Comprueba que en el segundo
recuadro de dialogo aparece seleccionado como tipo de archivo todos los
archivos (*.*), dale a enter, y listo ... eso si, recuerda en que directorio
has grabado tu pagina para poder verla. Lo mejor es que crees una carpeta para
tus experimentos.
Y hecho lo cual, abrimos nuestro navegador favorito, y en el menu archivo|abrir archivo buscamos la localizacion donde hemos grabado prueba.htm, lo abrimos, y a ver que sale ... debería ser algo parecido a lo que verás si pulsas aqui. Una vez recreado en la vision de la nueva página, no olvides volver al manual, que solo hemos empezado.
Recapitulación
Hemos visto que cada uno de los componentes de un documento escrito puede ser considerado un elemento html. Que los elementos html están marcados con <etiquetas> que indican que tipo de elemento se trata. Que para cada tipo de elemento podemos especificar unas cualidades o atributos adicionales mediante la sintaxis atributo = "valor".
Hemos visto también que toda página tiene una estructura invisible, que se divide en dos grandes partes: HEAD y BODY. En HEAD almacenamos metainformación sobre la página, y BODY contiene los elementos visibles.