Primer contacto con el código HTML

Una página web no es más que un puñado de letras y números que son interpretados por los navegadores mostrando lo que ves por internet. Al ser tan solo eso, letras y números, podríamos usar por ejemplo el Block de Notas de Windows para crear una página web completa. Tan solo hay que saber qué letras y qué números escribir y luego guardar el archivo, pero en lugar de hacerlo con extensión .txt se guardaría con extensión .html o .htm (son iguales).

Nosotros vamos a usar en estas lecciones otro programa distinto al Notepad o Block de Notas, el Html-Kit, pues nos va a facilitar algunas cosas que no nos hace el Notepad y que iremos viendo a su debido tiempo.

El código html de una página web

Todas las páginas web empiezan y terminan con el mismo código y es el siguiente:

<html> (todas empiezan con esto) </html> (todas terminan con esto otro)

En adelante, siempre que escriba código Html lo haré de este modo, de color azul para que lo distingas. Pues bien, si eso lo escribimos en un archivo y lo guardamos con extensión .htm o .html será una página web. Vacia, sí, pero una página web.

La primera palabra <html> indica que ahí empieza el código de la web. La segunda </html> indica que el código de la página web a terminado. Se distinguen por la contrabarra / que siempre indica que algo ha terminado.

La estructura de una página web en HTML

Dentro de cualquier página web hay cosas que se ven (o que se escuchan) y cosas que no. Las cosas que se ven son los textos, las imágenes, sonidos, etc. Por otro lado lo que no se ve son sus características, como el título, su descripción, palabras clave y otra serie de cosas que veremos más adelante. Las cosas que no se ven se colocan dentro del código HTML en una zona llamada cabecera (head en inglés) y lo que se muestra se pone en lo que se llama cuerpo (o hody en inglés). Pues igual que antes hemos escrito en código dónde empieza la página y dónde termina, la cabecera (head) y el cuerpo (body) se colocan y escriben así en Html:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

En Html se indica que va a empezar la cabecera con la palabra <head> y termina con la misma palabra pero colocándole la contrabarra, </head> tal y como hemos visto que pasaba para cerrar </html>. Lo mismo podemos decir del cuerpo, que comienza con <body> y termina con </body>.

Como puedes ver, tanto la cabecera como el cuerpo no contienen nada dentro, por lo que seguimos teniendo una página web vacia.

Definir el título de una página web

Una de las cosas que se pueden definir dentro de la cabecera o head es el título de la página. Antes hemos dicho que en la cabecera se colocaban las cosas que no se mostraban en la web. Este título realmente no se ve en la web, pero si en la barra azul de la parte alta del navegador (Explorer, Mozilla, Firefox, etc son tipos de navegadores) por lo que resulta importante aprender a definirlo. Más adelante veremos por qué es tan importante.

Como ya estarás sospechando, existe una palabra para indicar que va a comenzar el título y otra para indicar cuando termina, verdad? Que lince, que inteligencia la tuya oye, je je. El título se define así (como ves, dentro de la cabecera o head):

<html>
  <head>
    <title>Este es el título de mi web y puedo escribir lo que quiera!</title>
  </head>
  <body>
  </body>
</html>

Como siempre, empieza por la palabra <title> y termina con la misma pero con la contrabarra delante, es decir, con </title>. Fácil, no? Si guardaramos esto en un archivo con extensión .html o .htm qué veriamos? Una ventana del navegador completamente en blanco, pero con un título en la parte superior del navegador como el que hemos escrito. Mira un ejemplo haciendo clic aquí.

Si tras hacer clic en ese enlace y abrirse la página del ejemplo miras el código de esa página web, verás como coincide exáctamente con el mostrado antes. Si no sabes, te enseño como mirar el código html de una página web en la página siguiente.

Por el momento, ya sabes crear páginas en blanco. Todo un logro, verdad? je je je.