Plantilla inicial

Para indicar al programa navegador que está leyendo una página web en formato Html o hipertexto se indica poniendo <html> al principio del documento y </html> al final. Todo lo que no se encuentre entre estas dos etiquetas no se visualizará en el navegador.
Es muy conveniente siempre escribir antes que nada esta etiqueta y las que veremos a continuación y no confiar en que nos acordaremos después de haber escrito el resto del código.
Así pues, escribiremos lo siguiente, de momento, en nuestro editor de texto:

<html>



</html>

El documento Html tiene dos partes:

	Encabezado:	entre `<head>` y `</head>`
	Cuerpo:	entre `<body>` y `</body>`

Añadiendo estas etiquetas al documento anterior:

<html>

  <head>



  </head>

  <body>



  </body>

</html>

Dentro del encabezado podemos escribir el título de nuestra página de la forma siguiente:

<title>Mi
página Web</title>

Este título se verá en la barra de título del navegador que utilicemos.

Pulsa aquí para ver el resultado

También dentro del encabezado podemos escribir información referente a la página (código de carácteres, idioma, autor, etc.) mediante la etiqueta <meta>
Las etiquetas <meta>, en inglés metatags no son necesarias aunque se recomienda utilizarlas, sobretodo si queremos poner nuestra página en un buscador de Internet.

Dentro del encabezdo también se cargan las llamadas hojas de estilo, como veremos más adelante, o las rutinas de programas que se ejecutaran en nuestra página, por ejemplo un applet de JavaScript.

Lo que escribamos dentro del encabezado no se verá en la ventana del navegador.

Dentro del cuerpo del documento, entre <body> y </body>, escribiremos el contenido de la página en sí, es decir, todo aquello que queremos que se muestre en la ventana del navegador.

En resumen la estructura inicial y obligatoria de un documento Html es la siguiente:

<html>

  <head>

    <title>Título de la
página</title>

  </head>

  <body>

    ...contenido del documento...

  </body>

</html>

Observa la estructura del código que hemos escrito. Los elementos que están dentro de otros elementos aparecen métidos hacia la derecha. Aunque no sea obligatorio es recomendable estructurar así nuestras páginas, puesto que de esta manera será mucho más sencillo encontrar posteriormente las partes de nuestro documento.

Y recuerda que esta plantilla inicial es obligatoria para todas las páginas web.

Actividad 2.1

Abre el Explorador de Windows y busca la carpeta donde vas a trabajar, por ejemplo c:/Mis documentos o a:/
Crea en tu carpeta de trabajo una carpeta llamada actividades para guardar la página web que harás con este tutorial.
Asegúrate de haber realizado la Actividad 1.1
Abre el Bloc de notas del Windows y, sin escribir nada de momento, selecciona Archivo - Guardar como... En el campo Guardar en selecciona la carpeta actividades, en el campo Tipo selecciona Todos los archivos y en el campo Nombre escribe inicio.html. Cierra el Bloc de notas.
Ve a ver el contenido de tu carpeta actividades y observa que está el archivo que acabas de crear con el icono del Explorador de Windows. Haz doble-clic en el nuevo archivo y debe abrirse el Explorador. La ventana del Explorador está vacía porque el archivo está vacío. Vamos a escribir el código.
Selecciona el menú Ver - Código fuente. En este momento se vuelve a abrir el bloc de notas o tu editor por defecto con tu archivo, que no contiene nada. Crea la plantilla inicial según se ha explicado, poniendo el título que quieras (entre <title> y </title>) y alguna frase en el cuerpo del documento (entre <body> y </body>).
Guarda el archivo creado y cierra el editor de textos.
De nuevo en el Explorador con la página todavía en blanco pulsa el icono Actualizar, o bien F5. Debe aparecer tu frase en la ventana y el título en la barra superior de ésta.

Veamos ahora como crear un nuevo archivo html con Mozilla.

Actividad 2.2

Abre el Mozilla y selecciona Archivo - Nuevo - Página en blanco para editar.
Se abre el editor del Mozilla con un archivo html vacío.
En la parte inferior del àrea de trabajo aparecen cuatro pestañas con los cuatro modos posibles de edición. Por defecto se activa la pestaña con el modo Normal. En este modo se puede escribir nuestra página como si se tratase de un procesador de textos y Mozilla se encarga de crear el código. Los botones del menú nos ayudarán a seleccionar el formato de los diferentes elementos.
El modo Etiquetas HTML es igual que el anterior pero delante de cada elemento aparece un botón amarillo con la etiqueta de formato correspondiente.
El modo Vista preliminar muestra como se verá realmente el archivo en el navegador, aunque siempre es mejor cargar el archivo directamente en el navegador pues puede haber pequeñas diferencias.
El modo Código fuente es como si escribiéramos con el Bloc de notas, y es el que utilizaremos. Selecciona este modo y observa que Mozilla ha creado ya la plantilla inicial con alguna etiqueta más de las que hemos visto. En concetro <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> al principio, es una etiqueta que indica el tipo de documento, y aunque no es obligatoria puede ayudar al navegador a reconocerlo. También aparece <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">, que indica al navegador el juego de caracteres que se utiliza.
Entre <body> y </body> también ha añadido <br> simplemente por no dejar vacio el cuerpo del documento. Se trata de un salto de línea del que hablaremos más adelante.
Sustituye <br> por una frase y guarda el archivo como inicio.html reemplazando el anterior.
Vuelve al Explorador y pulsa el icono Actualizar, o bien F5 para reflejar los cambios.

A partir de ahora puedes crear el resto de páginas con este método o bien abriendo directamente el bloc de notas o con tu editor de texto, escribiendo el código en un nuevo documento y guardando el archivo en tu carpeta. Si lo haces así conviene comprobar en el Explorador que el nombre y la extensión se han guardado correctamente.

2. Plantilla inicial