Crea tu web, tutor html, css

El documento HTML

Estructura del documento

La estructura de un documento HTML se puede resumir así:

tipo de documento <HTML> <HEAD> <title>titulo de la página</title> cosas que afectan a la página pero no a su contenido </HEAD> <BODY parámetros> contenido de la página </body> </html>

En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estándar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Cumple el estándar HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd">
Cumple el estándar HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://w3.org/TR/REC-html40/frameset.dtd">
Es una definición de marcos que cumple el estándar HTML 4.0

El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.

Tipo de documento
HTML y standard que sigue
Cabecera Head
Definiciones, enlaces, recursos
Cuerpo: Body
La parte visible, el contenido

La cabecera

Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

<base href="http://www.misitio.com/">

Ahora todas nuestras URLs relativas se encontrarán dentro del servidor http://www.misitio.com

La cabecera o seccion heading, contiene información sobre la página y elementos auxilaires como estilos o scripts.

Meta Name

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

<meta name="generator" content="Mozilla/4.03 [es] (Win95; I) [Netscape]">

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy simple, en name colocamos el nombre de la etiqueta y en content colocamos su valor, ambos entre comillas y con el signo igual por delante.
Estas son las propiedades más comunes:

Name Content
author Autor de la página.
classification Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo).
keywors Palabras clave por las que encontrarán la página en los buscadores. Google no le hace mucho caso.
generator Herramienta utilizada para hacer la página.
Descripción Descripción del contenido de la página. Google le hace bastante caso.

Los meta están dirigidos a los robots que analizan las páginas para mostar contenido.

Son usadas por las redes sociales para mostrar resúmenes de las paginas que se comparten en posts.

Meta Http-Equiv

Son etiquetas usadas también para dar información al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La única diferencia está en que en lugar de name usamos http-equiv, el resto es igual. Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:

HTTP-EQUIV CONTENT
expires Fecha desde la que la página debe ser recargada por los navegadores
pragma El contenido debe ser no-cache y sirve para que el navegador no guarde la página en el ordenador del internauta.
Content-Language Idioma en el que está escrita la página. Se usan las iniciales como: es_ES: español España, en_US: ingles americano...
Refresh Indica al navegador el tiempo (en segundos) que debe esperar para recargar la página automáticamente y la página a la que debe ir. Ambos datos se separan con un punto y coma.
Content-Type Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor:
text/html; charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden quedar ilegibles .

No todas las etiquetas Meta son obligtorias, realmente ninguna lo es.

El cuerpo

El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en él es donde se colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <body>:

Atributos de body
background Coloca una imagen como fondo de la página.
bgcolor Define el color de fondo de la página.
bgpropertiesexplorer Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
text Color del texto.
lik Color de un enlace no visitado (por defecto azul).
vlink Color de un enlace ya visitado (por defecto púrpura).
alink Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
leftmargin topmargin Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.
marginwidth marginheightNetscape Equivalentes a los anteriores, pero éstos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.