encabezar el documento€¦ · web viewen otras palabras, el navegador visulizará en cualquier...
TRANSCRIPT
<HEAD> encabezar el documento
Para ser visualizados en Internet, los documentos son salvados en formato texto y contienen las marcas necesarias para informar al navegador (Netscape, MsIe o Explorer) al respecto. En otras palabras, el navegador visulizará en cualquier caso los documentos con texto salvados en formato .htm, pero si éstos carecen de marcas HTML aparecerán sin formato de ningún tipo: sin separación de líneas o párrafos, sin texto alineado, sin negritas, cursivas, etc.La finalidad del HTML es dotar, mediante unos comandos denominados marcas , de formato al documento, así como insertar imágenes y otros elementos multimedia (filmaciones, apliques, etc.). El trabajo que un editor web realiza en el documento HTML está dirigido a proporcionar al navegador toda la información necesaria para interpretar correctamente la página.
Un documento HTML se divide en dos partes fundamentales: el encabezamiento o cabecera y el cuerpo del documento.
Es fácil comprender que el cuerpo del documento contiene todos los elementos de la página: el texto, las imágenes, los apliques (applet) Java, el código Javascript y todo lo que es visualizado materialmente por el navegador.
Por el contrario, la cabecera contiene una serie de datos que el navegador necesita para interpretar correctamente el documento, pero que no se visualizan dentro del mismo. La cabecera tiene, por tanto, una función no visible pero fundamental. Entre los elementos facilitados por la cabecera podemos citar: el título de la página, los términos clave para los buscadores, el tipo de HTML soportado y los enlaces base de referencia.Aquí analizaremos sólo algunos elementos, omitiendo por el momento el estudio de aquéllos que no resultan inmediatamente necesarios para la comprensión del HTML:
HTML DOCTYPE HEAD TITLE META
A continuación describiremos detalladamente las peculiaridades más relevantes de cada uno de los elementos anteriores.
<HTML>
Todos los elementos y el contenido de un documento HTML están encerrados dentro de las marcas <HTML></HTML> cuya función es servir de apertura y cierre
al archivo. Las marcas <HTML></HTML> indican al navegador que el documento está marcado en HTML, si bien los navegadores más recientes (Netscape 3 y 4, MsIe 3,4 y 5) consiguen interpretar igualmente las marcas sucesivas. Dicho esto, existen en cualquier caso dos razones para introducir siempre la marca <HTML></HTML> dentro del documento:
HTML no es el único lenguaje de marcado presente en el WWW (piénsese, por ejemplo, en el XML) y corremos el riesgo de que el navegador malinterprete las marcas, confundiéndolas con otros lenguajes de marcado.
Los usuarios de viejos navegadores corren el riesgo de visualizar un documento pésimamente formateado.
DOCTYPE
Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debería ser el primer elemento que abriera un documento. Esto quiere decir que iría colocado antes de <HTML>.Se trata de una marca que no precisa de cierre y cuya función es proporcionar información al servidor de web anfitrión de la página. Los datos que facilita DOCTYPE se refieren al tipo de documento visualizado además de ser necesarios para la comunicación entre navegador y servidor. DOCTYPE se debe escribir de una forma estándar:
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">
Esta línea proporciona algunos datos sobre el documento:
HTML PUBLIC: el documento es público IETF: el tipo de HTML público está gestionado por la Internet Engineering
Task Force DTD HTML 4.0: la versión de HTML soportada es la 4.0 EN: el idioma del documento es el inglés
El uso de DOCTYPE no es obligatorio y puede omitirse. Ciertamente, su utilización ayuda al servidor de web a interpretar correctamente el documento, pero su falta no condiciona la correcta visualización.
Tal y como puede observarse fácilmente DOCTYPE es una marca que no prevé elemento de cierre (no se escribe de esta manera: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"></DOCTYPE>)
<HEAD>
Los elementos <HEAD></HEAD> se colocan inmediatamente después de la apertura de la marca <HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la información que necesita el navegador, el servidor de
web y los motores de búsqueda. Se trata del primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script . Dentro de <HEAD></HEAD> se introduce el título del documento y otros datos. He aquí la sintaxis HTML de un documento con los comandos hasta ahora examinados:
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"><HTML>
<HEAD></HEAD>
</HTML>
<TITLE>
El elemento <TITLE></TITLE> es el más utilizado dentro de la marca <HEAD>, dado que sirve para dar título a la página. El título suele ser visualizado por los navegadores en la cabecera de página. La que figura a continuación es la imagen del TITLE de HTMLpoint (el texto es: HTMLpoint - el sitio italiano sobre el Web publishing):
En caso de que el URL se guarde con "agrega a favoritos" (para MsIe) Y "agrega a marcapáginas" (para Netscape) la marca TITLE da nombre a la conexión. En otras palabras, cuando se guarda la dirección, el navegador asigna al mismo lo que aparece dentro de <TITLE></TITLE>. La imagen que sigue muestra el efecto en MsIe (idéntico para Netscape):
El contenido que aparece entre las marcas <TITLE></TITLE> es utilizado también por algunos buscadores para indicizar la página y buscar palabras clave. Altavista constituye probablemente el ejemplo más eclatante. Por ello, es recomendable proporcionar en el TITLE una descripción detallada aunque sintética de la página, con todas las palabras clave que los buscadores pueden indicizar.Un consejo que conviene tener presente es el de no exagerar con la longitud del texto, teniendo presentes las exigencias de quienes añaden el sitio al marcapáginas y de los buscadores.
La sintaxis correcta de la marca TITLE es la siguiente:
<TITLE>Mi primera portada con la guía de HTMLpoint</TITLE>
META
Los buscadores representan un recurso indispensable para quienes buscan información en la red, y sitios como Altavista, Yahoo, Lycos y Excite se cuentan entre los más visitados de Internet.Figurar en dichos motores de búsqueda es fundamental para quien crea páginas web y quiere mayor visibilidad. Es necesario, antes de nada, señalar las propias páginas a estos buscadores, lo que se efectúa mediante pequeños formularios presentes en las páginas web bajo la frase "Add your site". Periódicamente estas arañas (spider) supervisan los millones de páginas contenidos en sus bases de datos verificando las eventuales modificaciones.
Además de ser incluidos en los buscadores, es importante figurar en los primeros puestos de la lista que aparece al efectuar la búsqueda (a menudo, sobre todo cuando los términos que se buscan son de uso frecuente y de carácter general, aparecen en las listas miles de sitios). Para ello, debemos adoptar algunas sencillas medidas.Fundamentales por lo que se refiere a este objetivo resultan las marcas de metainformación (META), cadenas de códigos que figuran en la cabecera del documento, entre <HEAD></HEAD> y que son las primeras que leen los buscadores.Las palabras clave (keywords) son los términos que, de manera resumida, describen el contenido de una página web. Si, por ejemplo, el sitio se ocupa de la realización de páginas web, las palabras clave serán:
HTMLrealización páginas webportadabuscadoresprecios módicos.......
La marca META deberá impostarse como sigue:
<META name="keywords" Content="HTML, realización páginas web, portada, buscadores, precios módicos">
La coma divide unos términos de otros. No se escriben comas dentro de las frases que constan de más de un vocablo para que el buscador puede encontrarlas tal y como aparecen escritas.
Naturalmente, si vuestro sitio es multilingüe será recomendable incluir palabras
clave en todos los idiomas del sitio, prestando siempre mucha atención para evitar usar términos demasiado genéricos. En el caso de que se tratara de nombres propios, es aconsejable incluir la forma singular y plural. El buscador considera el número de veces que se repite un término dentro de la página y de las palabras clave; sin embargo, repetir exageradamente la misma palabra en la marca META tiene el efecto contrario al deseado ya que la mayor parte de las arañas cancelan estos sitios de las propias bases de datos. Por ello, insistimos en no exagerar con el número de términos incluidos en las palabras clave.
Otras marcas de metainformación se refieren al autor de la página web:
<META name="author" content="Nombre Apellidos">
el título que aparecerá tras la búsqueda:
<META name="description" content="Mi primera portada con la guía de HTMLpoint">
y el nombre del editor con el que se ha generado el documento HTML:
<meta name="GENERATOR" content="BLOC DE NOTAS Win95">
Si por cualquier razón quieres que una de tus páginas NO sea indicizada en los motores de búsqueda, deberás incluir la siguiente marca de metainformación:
<META NAME="ROBOTS" CONTENT="NOINDEX">
Otra marca META es la que permite el "refresh" de la página. Esto significa que la misma página u otra diferente puede lanzarse automáticamente tras un cierto número de segundos determinado por nosotros mismos.He aquí el código:
<META HTTP-EQUIV="Refresh" CONTENT="5; url=pippo.htm">
Donde CONTENT="5 es el número de segundos en los que la nueva página será cargada, mientras que url=pippo.htm" es el archivo que será cargado.
RESUMEN DE LA LECCIÓN
A continuación figura una página HTML impostada según cuanto hemos visto en esta lección. Esta página constituirá también un punto de referencia para las lecciones siguientes:
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"><HTML>
<HEAD>
<META name="keywords" Content="HTML, realización páginas web, portada, buscadores, precios módicos"><META name="description" content="Mi primera portada con la guía de HTMLpoint"><meta name="GENERATOR" content="BLOC DE NOTAS Win95"><META name="author" content="Nombre Apellidos">
<TITLE>Mi primera portada con la guía de HTMLpoint</TITLE>
</HEAD>
</HTML>
El documento creado con este código.
Escribir correctamente las marcas de metainformación (META)El estudio de los datos facilitados por los buscadores más utilizados ha demostrado que el término más buscado es "sex", y que el 80% de los usuarios no consulta más allá de la segunda página de la búsqueda efectuada. Esto significa que si una búsqueda por palabra clave responde con 30 páginas de direcciones web, sólo 2 usuarios de cada 10 consultarán más allá de la segunda página. En última instancia, podemos afirmar que los sitios contenidos en la página 30 tienen una visibilidad nula. Esta consideración debería aclarar la vital importancia de colocarse entre los primeros puestos de estas búsquedas. Está demostrado que los buscadores y los directorios llevan más accesos y visitantes a un sitio que cualquier otro medio (revistas, enlaces con otros sitios, televisión, etc.)En vista de lo anterior, la inclusión de un sitio en un buscador o directorio es una operación fundamental para el pleno éxito del mismo. Algunas medidas y pequeñas estratagemas nos pueden ayudar a lograrlo, pero no hay un modo unívoco para resultar a la cabeza de cada buscador, debido a la banal constatación de que cada motor tiene peculiaridades propias. Antes de continuar, es conveniente precisar algunos conceptos:
no es importante aparecer en todos los buscadores sino al máximo en los 10 de mayor difusión a nivel mundial y en los 2 más importantes a nivel nacional;
desconfiar de los numerosos servicios que por poco dinero prometen la inserción en 500 buscadores porque, a menudo, no dan resultado y porque, como antes señalamos, aparecer en los motores menores no tiene la menor importancia;
desconfiar de los programas automáticos de inserción; no esperar que las palabras clave de las marcas META sean la única
solución de estos problemas; con frecuencia, la inserción no es inmediata y en algunos casos (Lycos y
HotBot) ha sucedido incluso que la base de datos no fuese actualizada durante meses.
El número de personas que en EEUU se ocupan exclusivamente de la inclusión de sitios en los buscadores se estima en alrededor de 100 unidades. Esto significa que ningún directorio puede controlar materialmente todos los nuevos sitios incluidos, por lo que muchos son indicizados sin haber sido antes sometidos a verificación. Este estado de cosas crea una cierta confusión, además de una pérdida de calidad de las inserciones. Infoseek ha hecho público que recibe diariamente 30.000 nuevas solicitudes de inclusión, algo menos de la mitad de las de Yahoo.com.
La inclusión en los directorios está, por su misma naturaleza, más humanizada y es difícil que sea objeto de trucos más o menos lícitos. Antes bien, intentar colocarse astutamente en los primeros puestos de los directorios puede resultar contraproducente, visto que los operadores, conocedores del truco, incluyen el sitio en el "limbo de los listos", en una posición prácticamente invisible. Diverso es, sin embargo, el caso de los buscadores donde quien recibe la solicitud de inserción no es un ser humano sino una araña (spider). A lo largo de los años, las arañas, no demasiado perspicaces al inicio, han ido perfeccionando sus propios instrumentos y han radicalizado en muchos casos la intolerancia ante trampas y trucos. A menudo basta una palabra clave repetida dos veces para provocar la cancelación del sitio de la base de datos. Antes de nada, por tanto, hay que evitar resultar penalizados. Trucos que hasta hace un año permitían colocarse en los primeros puestos de los buscadores hoy son reconocidos por las arañas. Por ejemplo, no es una buena idea insertar texto escondido en la página HTML de color idéntico al fondo, así como no lo es tampoco crear páginas con palabras clave que no tengan ninguna relación con el contenido del sitio sólo porque son palabras que los usuarios buscan frecuentemente (p.ej., incluir el término "sex" en un sitio que se ocupa de informática). Evitar radicalmente incluir páginas con una marca META "refresh" que envía a otra página tras un cierto número de segundos.Una vez dejado bien sentado que la ilegalidad no es rentable, aquí tienes una serie de sugerencias que te permitirán obtener un buen puesto en los buscadores:
evitar, en la medida de lo posible, el uso de marcos HTML; no iniciar el documento HTML con una imagen o una tabla;
dedicar particular atención a la portada del sitio; evitar, en la medida de lo posible, el uso de páginas ASP (Active Server
Pages) o denominadas con un nombre de archivo donde aparezca un signo de interrogación "?";
incluir las palabras clave del sitio entre las marcas <TITLE></TITLE>, ya que muchas arañas (Altavista in primis) conceden a esto gran importancia;
utilizar las marcas <H1><H2> etc. crear "DOORPAGE", es decir, páginas de soporte de las páginas
principales, que incluyan texto y palabras clave relacionadas con el sitio; no registrar más de una página al día; registrar dominios de primer nivel. Por ejemplo, www.nome.com antes que
www.nome.com/directry; la marca de metainformación "keywords" no debe contener términos
repetidos ni más de mil caracteres. El 90% de las búsquedas corresponde a términos escritos en minúsculas, por lo que es preferible evitar las mayúsculas;
la marca de metainformación "description" es fundamental porque el buscador asocia a ésta el enlace con el sitio. No debe superar los 300 caracteres.
<BODY> Impostar el fondoEn la lección precedente hemos visto cómo crear un documento HTML partiendo de cero y cómo impostar el título y las marcas de metainformación.La operación que sigue a la impostación del documento es la definición del color o de la imagen del fondo, así como de los colores de los enlaces activos y de los visitados.
<BODY>
El elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, en cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento.Si el elemento <HEAD> contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página.
La sintaxis correcta del elemento <BODY> es la siguiente:
<BODY>Contenido del documento
</BODY>
La marca <BODY> se utiliza también para proporcionar al navegador información sobre la disposición de los objetos en el documento, así como para impostar varios atributos de visualización para el documento. A continuación veremos cuáles.
BGCOLOR
El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:
<BODY BGCOLOR="red">
Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:
<BODY BGCOLOR="#ff0000">
La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar.
Para el ejemplo práctico
BACKGROUND
BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo
muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg.
Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:
La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es:
<BODY BACKGROUND="sfondo.gif">
El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por ejemplo, sino que llena todo espacio a disposición.Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo más uniforme posible.
Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posible al color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejor usar el color negro para el texto y tonos pastel para el fondo.
Para el ejemplo práctico
TEXT
Si no viene establecido diversamente, el color del texto del documento es el negro ya que los navegadores asignan este color por defecto. Gracias al atributo TEXT es posible asignar al texto un color distinto del negro. La sintaxis correcta es:
<BODY BACKGROUND="sfondo.gif" TEXT="red">
También en este caso los colores pueden expresarse con nombres o con valores hexadecimales. En el interior del documento podemos marcar parte del texto con colores diferentes del que hemos impostado en TEXT.
Para el ejemplo práctico
LINK
Si no viene establecido diversamente, el color de los enlaces (que todavía no se han visitado) es el azul. Gracias al atributo LINK podemos definir colores diferentes:
<BODY BACKGROUND="sfondo.gif" LINK="red">
Todos los enlaces de la página no serán ya azules sino rojos (red). Este color puede expresarse en valores hexadecimales.
Para el ejemplo práctico
ALINK
Cuando hacemos clic en un enlace, éste se vuelve de un color distinto al impostado en LINK (o al azul de la opción por defecto). Gracias a ALINK (la A significa Active), es posible modificar este color:
<BODY BACKGROUND="sfondo.gif" ALINK="yellow">
VLINK
Cuando se visita un URL asociado a un enlace, este último se vuelve de un color distinto al de LINK (o al azul de la opción por defecto). Gracias a VLINK (la V significa Visited), es posible modificar este color:
<BODY BACKGROUND="sfondo.gif" VLINK="green">
Para el ejemplo práctico
BGPROPERTIES
Hablando del atributo BACKGROUND hemos resaltado el hecho de que las imágenes estén dispuestas ocupando toda la pantalla disponible. Si la página fuera tan larga como para tener que activar la barra de desplazamiento lateral, el fondo (la imagen asociada) iría pasando junto con la página. Para comprender mejor esta cuestión, y después pasa la página hacia abajo.
Gracias a la propiedad BGPROPERTIES es posible hacer que el fondo permanezca inmóvil respecto al desplazamiento de página. La sintaxis correcta es:
<BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed">
Esto funciona sólo con MsIe y no con Netscape que, en cambio, continúa desplazando la página.