Una página HTML completa

Hasta ahora hemos estado haciendo trampa, porque nos hemos saltado algunas marcas que toda página web debería tener. Veamos cómo sería una página web sencilla:

<html>
  <head>
    <title>Mi primera página web completa</title>
      <meta charset="utf-8">
  </head>
  <body>
    <p>
      Hoy es un día <b>muy</b> soleado.
      <br/>
      Pero mañana <i>por desgracia</i> lloverá.
   </p>
   <p>
    Visita la <a href="http://educalab.es/intef">página web del INTEF</a>, que hay muchas cosas interesantes.
   </p>
   <p>
     Y ahora añadimos una imagen:
     <img src="http://aprende.educalab.es/wp-content/uploads/2017/03/logo_intef.png" width="200" height="100" />
   </p>
  </body>
</html>

El resultado se puede ver en esta ventana de navegador:

Una página web sencilla

Elaboración propia.


¿Qué hay de nuevo? Pues unas cuantas marcas, a saber:

  • html: Indica el principio (y el final) del documento HTML. Admite atributos como lang, con el que se puede incluir información de la lengua en la que la página web está escrita (por ejemplo, lang="es" para páginas en español).
  • head: Cabecera del documento. Es una etiqueta para incluir meta-información sobre la página web.
  • title: Título del documento. Al estar en el head es meta-información, aunque ésta se pueda ver arriba en la ventana del navegador.
  • meta: Marca par añadir metainformación genérica. En esta ocasión, lo que estamos haciendo es indicar la codificación de nuestro documento. Existen varias codificaciones -que no es otra cosa que cómo transformamos los caracteres a binario- posibles: una de ellas es el conocido ASCII, pero que tiene la limitación de que no acepta caracteres no anglosajones (como la eñe o las vocales tildadas). Por eso, en este ejemplo indicamos que la codificación utilizada es UTF-8, que permite caracteres ¡hasta en chino!
  • body: Cuerpo de la página. Aquí es donde viene el contenido del documento. En nuestro caso, hemos añadido las marcas que ya conocemos.


Nótese que en los documentos HTML los saltos de línea que no vengan indicados por la etiqueta <br> y los espacios en blanco redundantes (a partir del segundo espacio en blanco seguido) no tienen ningún significado. En otras palabras, podríamos tener todo lo anterior en una única línea y el navegador lo interpretaría de manera idéntica. Es por esta razón que tenemos etiquetas como la p de párrafo y el br de salto de línea, claro.