lunes, 10 de febrero de 2014

HTML fácil y para todos II: HEAD, elementos y BODY

En este post hablare de HEAD y sus elementos, que es un apartado relativamente corto y BODY. No incluiré los elementos más importantes de BODY, que en principio si quería pero se me quedo en tocho post y borre y lo puse para el siguiente, para que no se os haga muy largo y los enseñare en el post HTML fácil y para todos III: Tamaños, tipos de letras, texto de colores, párrafos y saltos de linea.

HEAD 

  • Es la primera de las dos partes en que se estructura un documento HTML.
  • En ella reside información acerca del documento, y generalmente no se ve cuando se navega por él. 

En la cabeza (head) se pone el elemento <TITLE> que es una breve descripción que identifica la página. Es decir, lo que el navegador guarda en el "Bookmarks" (libro de marcas, marcadores o libro de direcciones).

También guarda el caché, que servirá para mostrar la página, cuando sea buscada otra vez, sin necesidad de conectarse de nuevo al servidor de origen.

No hay que confundir el elemento <TITLE> con el nombre del fichero.

También puede utilizarse otro elemento: META

Por ejemplo, si se escribe:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>

Esto hace que el visualizador vuelva a cargar la página activa al cabo de 10 segundos.
También puede hacerse a un servidor. Así:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
</HEAD>

Utiliza esto con precaución. Si sabes que el contenido de la página no va a cambiar, es inútil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, sólo tendrá utilidad en casos muy especiales.

Otra opción es impedir directamente que el navegador guarde en caché la página. Esto es especialmente útil cuando se trabaja con formularios que consultan datos dinámicos:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="no-cache">
</HEAD>

Si tienes interés en que tus páginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la página separadas por comas. Por ejemplo:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML, internet  ">
</HEAD>

Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu página:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>

El siguiente es importante con los nuevos navegadores, ya que le indica la tabla de caracteres que se ha empleado al escribir la página. De no usarlo, puede ocurrir que el navegador no muestre correctamente los caracteres especiales no ascii, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado sin codificar de la forma típica en html.

<HEAD>
<TITLE>Head de un documento </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>

Los charset más habituales suelen ser: 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8 / html5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.

Nota: Como veis lo que llamamos ahora SEO, no es algo tan nuevo hace muchos años que se tiene en cuenta en el lenguaje HTML.

Para los que no sepáis que es el "caché", viene a ser la copia que se hace el navegador de las páginas que visitamos. Así cuando vuelves a solicitar la misma página, en lugar de pedirla de nuevo al servidor, te mostrará la que tiene guardada en el disco. A esta área del disco donde el navegador va poniendo las páginas visitadas, se le denomina caché. 

El tamaño de la caché lo puedes modificar desde las opciones de configuración del navegador, e incluso puedes darle tamaño cero, con lo que siempre que veas una página, ésta habrá sido solicitada al servidor independientemente de lo que digan las instrucciones META.

Hay otros elementos que pueden aparecer en HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> sí lo es). 




BODY

  • Es la segunda y última de las dos partes en que se estructura un documento HTML. 
  • Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario que HEAD sí se ve cuando navegamos por ella.


Se escibirá asi:

<BODY>
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto
</BODY>

El elemento BODY tiene parámetros que permiten modificar los márgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. 

Internet Explorer utiliza uno para cada cual:


  leftmargin="pixels", para el margen izquierdo 
  topmargin="pixels", para el margen superior 
  rightmargin="pixels", para el margen derecho 
  bottommargin="pixels", para el margen inferior

Pixels es el número de pixels que se quiere mover cada margen hacia el interior de la página. Estos parámetros también son accesibles desde instrucciones de estilo.

El color, es otro elemento de BODY, que tomarán los links que pongamos en la página. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes después de haber sido utilizados, se escribe:

<BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">

Nota: Aquí muestro lo que considero más importante y básico, hay manuales más amplios y en el PDF donde recoja todos estos post incluiré extras pero sin convertirlo en un manual de 100 páginas, ya que me parece excesivo para los que nos iniciamos en HTML.


Post relacionados:




AdnFriki

http://myway.i-barakaldo.com/

http://gerardfoz.blogspot.com.es/



Si tenéis dudas y queréis preguntarme algo
podéis escribirme comentario en el post.

También me podéis seguirme por mis redes sociales
que aparecen aquí a la derecha, 
en ellas también acepto preguntas y comentarios.

Si os gusta el blog 
hacer clic en Friend Connect
o
seguirme en +g