ESTRUCTURA DE UN DOCUMENTO HTML

Una página web está formada por una serie de páginas enlazadas entre sí, es decir, vamos a tener una serie de ficheros y cada uno de esos ficheros va a contener texto, imágenes, etc. Así que lo primero que deberíamos hacer es un boceto en papel con todo lo que va a contener el documento. Una vez claro este contenido hay que pensar en la estructura de la página y en la organización de los ficheros.

Normalmente hay una página principal, que se suele llamar index.html, con enlaces a otras páginas, que tendrán a su vez otros enlaces y así sucesivamente. Es importante que todo esté bien organizado tanto para que a un usuario le resulte cómodo navegar por ella, como para que al autor le sea fácil poder modificarla o añadir información.

Un documento HTML está formado por tres partes:

  • Una línea que contiene información sobre la versión de HTML (no siempre),
  • Una cabecera (delimitada por el elemento HEAD), y
  • Un cuerpo, con el contenido del documento (delimitado por el elemento BODY o FRAMESET).

Todo el documento tiene que ir entre las etiquetas <HTML></HTML>

El elemento <HEAD></HEAD> contiene información sobre el documento actual, como el título, palabras clave que utilizan los motores de búsqueda, y otros datos que no se consideran parte del contenido del documento porque no se visualizan en el navegador. Sin embargo, pueden poner esta información a disposición de los usuarios a través de otros mecanismos.


Todos los documentos HTML deben tener un elemento <TITLE></TITLE> en la sección HEAD. Los autores deberían utilizar el elemento TITLE para identificar los contenidos de un documento, con lo que se aconseja poner títulos que reflejen con claridad el contenido del documento. Este título puede contener caracteres, pero no trozos de código.

La etiqueta <BODY></BODY> va a contener el contenido del documento. Puede tener los siguiente atributos:

  • background = archivo. Establece como fondo de la página la imagen especificada en el archivo.
  • bgcolor = color. Establece un color de fondo para la página.
  • text = color. Este atributo establece el color del texto
  • link = color. Este atributo establece el color del texto de los vínculos no visitados
  • vlink = color. Este atributo especifica el color del texto que de los vínculos visitados
  • alink = color. Este atributo especifica el color del texto que de los vínculos cuando son seleccionados por el usuario.

Es decir, la estructura básica de un documento HTML sería:

<HTML>    
  <HEAD>  
    <TITLE> Título de la página </TITLE>
  </HEAD>  
  <BODY>  
    Contenido de la página
  </BODY>  
</HTML>    

Resultado

Otro ejemplo:

<HTML>    
  <HEAD>  
    <TITLE> Título de la página </TITLE>
  </HEAD>  
  <BODY bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FF9933" alink="#FFFF00">
    Contenido de la página

Enlace
  </BODY>  
</HTML>    

Resultado

HTML no es sensible a mayúsculas y minúsculas. En otros lenguajes de la familia HTML, como WML para teléfonos móviles, es obligatorio escribir los nombres de etiquetas y atributos en minúsculas, poner etiquetas de cierre en elementos no vacios y poner los valores de los atributos entre comillas dobles, así que podemos ir aplicando estas reglas.

El elemento <META>:

Este elemento se sitúa dentro de la cabecera <HEAD>, y con él se puede dar información sobre el documento. Sus atributos son:

  • name = nombre. Este atributo identifica un nombre de propiedad.
  • content = cadena de caracteres. Este atributo especifica el valor de una propiedad.
  • scheme = cadena de caracteres. Este atributo especifica un esquema que se usará para interpretar el valor de la propiedad
  • http-equiv = nombre. Este atributo puede utilizarse en lugar del atributo name. Los servidores HTTP utilizan este atributo para obtener información sobre los encabezados del mensaje de respuesta HTTP.
  • lang = cdata. Este atributo se usa para especificar un idioma.
Ejemplos de su uso:

Información sobre el autor y el contenido:

<META name="Beatriz Prieto" content="Introduccion al HTML " lang="es">

Para especificar palabras clave que pueden usar los motores de búsqueda para mejorar la calidad de los resultados de una búsqueda. Por ejemplo:

<META name="keywords" lang="es" content="vacaciones, España, sol, playa">


El elemento META puede utilizarse para especificar el lenguaje de los scripts por defecto, el lenguaje de hojas de estilo por defecto y la codificación de caracteres del documento.

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


Ejercicio:

Abrir el Bloc de Notas y crear un documento básico en Html y definir todas las propiedades de la página (BODY). Salvar el documento con el nombre index.html.