| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home- HTML - Estructura - 1 - 2 - 3 - 4 - 5
Estructura de un documento web (II)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Cabecera (HEAD).-
La cabecera abarca todo el código entre las etiquetas <HEAD> y </HEAD>, su contenido no es visible en la ventana del navegador y puede contener los siguientes elementos:
La etiqueta TITLE establece el título de la página web, que será visible en la barra de título del navegador (parte superior de la ventana), salvo en el caso de una página de frames, en el que será visible siempre el título de la página madre. Además de este título, cada navegador añade un texto identificativo propio.
En una etiqueta de uso obligado, ya que personaliza cada página de nuestro sitio web, y se escribe siempre con etiqueta de cierre. Aunque no existe un límite establecido para el contenido de esta etiqueta, conviene que el texto en la misma no supere los 56-64 caracteres, existiendo buscadores que solo admiten 40 y otros que admiten hasta 100.
Ejemplo:
<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo de TITLE</title>
</head>
...
cuyo resultado tenéis en esta ventana.
Si no estipulamos el título y trabajamos con un editor web, generalmente nos aparecerá como título por defecto la palabra "Undefined", que queda muy feo en una página.
La etiqueta BASE especifica una URL que se tomará como base para todos las rutas que se especifiquen luego en el documento web, es decir, especifica un directorio en el que localizar las imágenes y demás ficheros enlazados en la página distinto del correspondiente al que se encuentra ésta.
También sirve para especificar la ventana por defecto en la que se abrirán los enlaces contenidos en la página.
Su sintaxis general es del tipo:
<base href="url_base" target="ventana">
donde:
El atributo href es obligatorio, y se suele emplear cuando queremos incluir en el documento actual imágenes o ficheros que se encuentran en otra dirección (URL) o en otro servidor web diferente de la del documento.
El atributo target es opcional, y se usa sobre todo en páginas que contienen frames, como la típica disposición de un frame lateral con un menú cuyos enlaces se deben abrir siempre en otro frame central, consiguiendo con ello no tener que indicar el nombre de éste en cada enlace del menú. Si no se especifica, se toma por defecto el valor _self, es decir, las páginas enlazadas se abrirán en la ventana actual, en la que se encuentra el enlace.
Ejemplo:
<base href="http://www.htmlweb.net/manuales/">
La etiqueta LINK define relaciones concretas entre el documento actual y otros documentos o ficheros relacionados con él.
Posée los siguientes atributos:
Ejemplos:
<link rel="stylesheet" type="text/css" href="css/estilos.css">
Que establece como fichero de estilos externo para la página a "estilos.css", situado en la carpeta "css".
<link rel="shortcut icon" href="images/icono.gif">
Que establece el icono "icono.gif", contenido en la carpeta "images", como imagen representativa de la página cuando se añada a "Mis Favoritos".
Las etiquetas META son sin duda de las más valiosas que se pueden (y se deben) incluir en una página web, ya que proporcionan información especial complementaria sobre el documento, fundamental por ejemplo a la hora de conseguir que los buscadores de Internet indexen nuestra página en sus bases de datos.
Básicamente, existen dos tipos diferentes de etiquetas META:
Ejemplo:
<meta http-equiv="Content-language" content="es">
No vamos a insistir aquí en la importancia de las etiquetas META, ni en su sintaxis, pero disponéis de un completo Manual de Promoción Web, en el que se explican a fondo. Destacar aquí que las etiquetas META no tienen pareja de cierre.
La etiqueta ISINDEX tiene como misión establecer unos identificadores concretos a la página en la que se encuentra, con vistas a posteriores operaciones de búsqueda por medio de un programa que se ejecuta en el servidor web. No la estudiamos por estar casi desechada, al existir en la actualidad otras alternativas de establecer búsquedas más funcionales.
La etiqueta STYLE en cambio es una de las que más importancia toma día a día, ya que permite definir una serie de estilos particulares para los elementos de la página, basados en definiciones CSS (Cascading Stylesheet o Hojas de Estilos en Cascada).
Mediante CSS podemos separar totalmente el contenido del documento web de su presentación, permitiéndonos definir la presentación individual o por grupos de cada uno de los elementos del mismo: tamaño de las fuentes, familia, color, peso, etc.
Sus principales atributos son:
Ejemplo:
<style type="text/css" title="estilos para la tabla central">
P{font-size:12px;font-family:Verdana;color:red;}
</style>
Donde hemos definido un estilo concreto para los textos contenidos dentro de las etiquetas <P>...</P> de nuestro documento web. Observad cómo la etiqueta <STYLE> siempre lleva su correspondiente pareja de cierre, </STYLE>.
La etiqueta SCRIPT sirve para definir bloques de código de script que se deban ejecutar en nuestra página. Este código puede estar escrito en diferentes lenguajes de programación, siendo los más comunes JavaScript (para su ejecución en el navegador cliente) y VBScript o PHP (para su ejecución en el servidor web).
La etiqueta <SCRIPT> siempre lleva paraja de cierre, </SCRIPT>, y sus principales atributos son:
La principal ventaja que tiene el uso de ficheros de código script externo es que podemos reutilizar su código en todas las páginas que deseemos, con tan sólo establecer en enlace al mismo dentro de cada una de ellas, con lo que nos evitamos tener que repetir el mismo código varias veces.
Ejemplo 1:
<script language="JavaScript" type="text/javascript">
function alerta(mensaje)
{
alert(mensaje)
}
</script>
Ejemplo 2:
<script language="VBScript" type="text/vbscript" runat="server">
Dim Nombre
Nombre="Carlos"
Response.Write("Tu nombre es " & Nombre)
</script>
Ejemplo 3:
<script language="JavaScript 1.1" type="text/javascript" src="js/funciones.js"></script>
Aconsejo al lector el estudio de en buen libro o manual de JavaScript, ya que es un lenguaje básico y necesario para la construcción de páginas web actuales y dinámicas.
 |
 |