Separata HTML

FORMATEO DE TEXTO MEDIANTE HOJAS DE ESTILOS EN CASCADA

HTML

Para poder transferir de forma adecuada los diferentes documentos de hipertexto por INTERNET se cre un protocolo de red especfico, el HTTP (Hipertext Transfer Protocol), basado en el envi de documentos de texto plano en formato ASCII y de ciertas cabeceras que aportan la informacin necesaria para la transmisin.

Para poder identificar un documento o recurso de Internet de forma unvoca fue necesario asignar a cada uno de ellos una especie de direccin nica, que se denomin URL (Uniform Resource Locator), que indica tanto la localizacin exacta del recurso como el protocolo necesario para su transferencia. La forma genrica de la URL de una pgina web es: http://www.servidor.dominio/carpeta/pagina.html

Como por ejemplo:

http://www.htmlweb.net/redes/redes.html

Aunque en realidad la parte servidor.dominio se corresponde con lo que en la tecnologa TCP/IP se denomina direccin IP.

Para poder dar formato a los datos presentes en el documento web se desarroll un lenguaje especfico, el HTML (HyperText Mark-up Language Lenguaje de Marcas de Hipertexto), que permita asignar un formato especial de presentacin a los elementos del documento contenidos entre unas etiquetas especiales, denominadas marcas o tags.

Por ltimo, para poder interpretar y visualizar correctamente los documentos as creados fue necesario crear unas interfaces especficas, que se denominaron browsers (navegadores).

Estas fueron los pilares esenciales de los cuales se construy la WWW (World Wide Web), la gran telaraa mundial de pginas web (documentos web visualizados en un navegador). El WWW es un sistema de informacin global, pblico e independiente, mediante el cual un usuario cualquiera puede acceder a documentos HTML almacenados en diferentes servidores ubicados en cualquier parte del mundo, pudiendo saltar de un servidor a otro de forma instantnea mediante los enlaces de hipertexto contenidos en las pginas web.

TIPOS MIMEEl protocolo HTML fue diseado para transportar por red ficheros en formato ASCII, formados por texto plano. Ahora bien, con el progreso de las tecnologas y con la inclusin dediferentes tipos de ficheros no ASCII en las aplicaciones por Internet (imgenes, vdeos, sonidos, etc.), surgi la necesidad de transformar estos formatos a tipo ASCII (u otros juegos de caracteres compatibles), para su correcta recepcin en el navegador web.

Este problema se produjo inicialmente en las aplicaciones de correo electrnico, cuando se necesit enviar por mail ficheros no formados por texto plano, y por tanto, no compatibles con los juegos de caracteres permitidos.

Para solucionar este problema el Internet Engineering Task Force (IETF) cre en 1992 los tipos Mime (Multipurpose Internet Mail Extensions), especificaciones para dar formato a mensajes no-ASCII, de forma que pudieran ser enviados por Internet e interpretados correctamente por los programas de correo locales.

Fue tan importante la ampliacin que se di con los tipos Mime al correo que pronto se aplicaron tambin a los documentos web, lo que permiti incluir en las pginas HTML ficheros varios (inicialmente imgenes, y luego vdeos, sonidos, applets de Java, etc.), que dieron nueva vida a la web.

Los tipos MIME especifican los tipos de datos, como por ejemplo texto, imagen, audio, etc., que los archivos contienen. MIME adjunta a cada fichero un archivo de cabecera donde se indica el tipo y el subtipo del contenido de los datos del mismo. Gracias a esta informacin, tanto el servidor como el navegador pueden manejar y presentar los archivos correctamente.

Los principales tipos Mime soportados por los navegadores web son:

TipoExtensin

Imagen

image/bmp.bmp, .bm

image/x-windows-bmp.bmp

image/gif.gif

image/jpeg.jpe

image/jpeg.jpg

image/png.png

Sonido

audio/basic.au, .snd

audio/x-au.au

audio/midi.mid, .midi

audio/x-midi.mid, .midi

audio/x-wav.wav

audio/mod.mod

audio/x-mod.mod

audio/mpeg3.mp3

audio/x-mpeg-3.mp3

audio/x-pn-realaudio.ra, .ram

audio/x-pn-realaudio.ra, .ram

Video

video/avi.avi

video/x-motion-jpeg.mjpg

video/quicktime.mov

video/mpeg.mpg

application/x-shockwave-flash.swf

ESTRUCTURA DE UN DOCUMENTO WEBESTRUCTURA BSICA DE UN DOCUMENTO.-

Vamos a definir una pgina web como aquello que el usuario ve en la ventana de su navegador, mientras que un documento web ser el cdigo interno que genera la pgina, y que por lo tanto contendr elementos visibles en la pgina web y otros elementos que no sern visibles en ningn momento en la ventana del navegador.

Ambos conceptos se suelen identificar, y no ocurre nada por hacerlo as. Nosotros vamos a separar ambos conceptos tan slo con vistas a un mejor entendimiento de las explicaciones.

Pues bien, un documento web consta bsicamente de dos partes o secciones bien diferenciadas:

1. Cabecera o head: porcin de cdigo comprendida entre las etiquetas y , cuyo contenido no es visible en la ventana del navegador.

2. Cuerpo o body: porcin de cdigo comprendida entre las etiquetas y , cuyo contenido si es visible en la ventana del navegador.

Ambas secciones se encuentran siempre dentro de la pareja de etiquetas delimitadoras y , que son las que fundamentalmente delimitan el contenido de todo documento web:

Cabecera

Cuerpo

Opcionalmente, podemos encontrar otras dos secciones en el documento:

3. Precabecera: zona del documento situada desde el inicio del mismo hasta la etiqueta , que puede contener etiquetas o instrucciones especiales.

4. Seccin final: zona del documento situada desde la etiqueta hasta el final del mismo, que puede contener ciertas instrucciones especiales de cdigo, generalmente de tipo script.

Es posible, y as lo hacen algunas personas, prescindir de la inclusin de alguna de las etiquetas, ya que los navegadores estn preparados para conocer qu elementos pertenecen a la cabecera de un documento y cules pertenecen al cuerpo. Pero esta prctica es totalmente desaconsejable, ya que las etiquetas y sus correspondientes parejas de cierre tienen un motivo de ser, estn ah para delimitar con claridad las diferentes partes de un documento, hacindolo ms claro y estructurado. Y esto es aplicable a todas las etiquetas HTML, sin excepcin de ningn tipo.

Cabecera (HEAD)

La cabecera abarca todo el cdigo entre las etiquetas y , su contenido no es visible en la ventana del navegador y puede contener los siguientes elementos:

Titulo de la pgina

Etiquetas BASE, LINK, ISINDEX

META Tags

Declaraciones de estilos, mediante la etiqueta STYLE

Cdigos de lenguajes de script en cliente: JavaScript, VBScript, etc.

Cdigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.

La etiqueta TITLE establece el ttulo de la pgina web, que ser visible en la barra de ttulo del navegador (parte superior de la ventana), salvo en el caso de una pgina de frames, en el que ser visible siempre el ttulo de la pgina madre. Adems de este ttulo, cada navegador aade un texto identificativo propio.

En una etiqueta de uso obligado, ya que personaliza cada pgina de nuestro sitio web, y se escribe siempre con etiqueta de cierre. Aunque no existe un lmite 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:

HTMLWeb, Manual de HTML. Ejemplo de TITLE

... Si no estipulamos el ttulo y trabajamos con un editor web, generalmente nos aparecer como ttulo por defecto la palabra "Undefined", que queda muy feo en una pgina.

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 imgenes y dems ficheros enlazados en la pgina distinto del correspondiente al que se encuentra sta.

Tambin sirve para especificar la ventana por defecto en la que se abrirn los enlaces contenidos en la pgina.

Su sintaxis general es del tipo:

donde:

url_base: es la url completa del directorio que se toma como raz (base) para las rutas de los ficheros enlazados en la pgina. Obligatorio.

ventana: ventana en la que se abrirn los enlaces de la pgina por defecto. Puede ser:

_blank: los enlaces se abren en una ventana nueva.

_top: los enlaces se abren en la ventana actual, ocupando toda ella y sustituyendo a la pgina de declaracin de frames.

_self: los enlaces se abren en la misma ventana o marco que est el enlace. Es el valor por defecto, en que est activo si no indicamos el atributo TARGET.

_parent: los enlaces se abren en la ventana o marco padre de la que contiene el enlace.

nombre_ventana: si especificamos el nombre de un frame o ventana existente, en ella se abrirn las pginas contenidas en los enlaces.

El atributo href es obligatorio, y se suele emplear cuando queremos incluir en el documento actual imgenes o ficheros que se encuentran en otra direccin (URL) o en otro servidor web diferente de la del documento.

El atributo target es opcional, y se usa sobre todo en pginas que contienen frames, como la tpica disposicin 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 pginas enlazadas se abrirn en la ventana actual, en la que se encuentra el enlace.

Ejemplo:

La etiqueta LINK define relaciones concretas entre el documento actual y otros documentos o ficheros relacionados con l.

Pose los siguientes atributos:

href="url", que sirve para establecer la url del documento o fichero relacionado con el actual.

rel="relacion", que sirve para definir el tipo de ralacin existente entre el documento actual y el referenciado mediante el atributo href. El parmetro "relacion" puede tener bastantes valores (alternate, appendix, contents, chapter, glossary, etc.), pero los ms usados y tiles son:

stylesheet, que establece la relacin con un fichero externo de declaraciones de estilos (fichero CSS), de tal forma que los estilos en l declarados se consideran como si lo estuvieran en el documento html actual.

shortcut icon, que se utiliza para fijar un icono propio como imagen representativa de la pgina cuando el usuario la incluya en su carpeta "Mis Favoritos".

type="tipo", que define el tipo de fichero relacionado con el actual, y que puede tomar dos valores:

text/css, para el caso de ficheros de estilos CSS.

text/javascript, para el caso de ficheros de cdigo JavaScript.

media="soporte", que define los casos en que deber actuar el fichero relacionado. Se suele usar en caso de ficheros externos CSS, permitiendo con ello definir un fichero CSS para el caso de que la pgina se presente en pantalla, otro para el caso en que se vaya a imprimir su contenido, etc. Los principales valores posibles del parmetro "soporte" son:

Screen, para presentaciones en pantalla.

Print, para salida por impresora.

Braille, para salida por dispositivos especiales para invidentes.

Si no se especifica el tipo, el valor por defecto es "screen", es decir, salida por pantalla.

title="titulo", que especifica un ttulo o mensaje explicativo para la relacin establecida entre el documento y el fichero externo.

Ejemplos:

Que establece como fichero de estilos externo para la pgina a "estilos.css", situado en la carpeta "css".

Que establece el icono "icono.gif", contenido en la carpeta "images", como imagen representativa de la pgina cuando se aada a "Mis Favoritos".

Las etiquetas META son sin duda de las ms valiosas que se pueden (y se deben) incluir en una pgina web, ya que proporcionan informacin especial complementaria sobre el documento, fundamental por ejemplo a la hora de conseguir que los buscadores de Internet indexen nuestra pgina en sus bases de datos.

Bsicamente, existen dos tipos diferentes de etiquetas META:

Metas http-equiv, que pueden servir bien para dar informacin a los robots de los buscadores de Internet, bien para enviar una serie de cabeceras HTTP al navegador del usuario con informacin de diverso tipo para un mejor tratamiento de esta.

Metas name, que complementan la informacin para los robots o para el contenido del documento.

Ejemplo:

No vamos a insistir aqu en la importancia de las etiquetas META, ni en su sintaxis, pero disponis de un completo Manual de Promocin Web, en el que se explican a fondo. Destacar aqu que las etiquetas META no tienen pareja de cierre.

La etiqueta ISINDEX tiene como misin establecer unos identificadores concretos a la pgina en la que se encuentra, con vistas a posteriores operaciones de bsqueda 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 bsquedas ms funcionales.

La etiqueta STYLE en cambio es una de las que ms importancia toma da a da, ya que permite definir una serie de estilos particulares para los elementos de la pgina, basados en definiciones CSS (Cascading Stylesheet o Hojas de Estilos en Cascada).

Mediante CSS podemos separar totalmente el contenido del documento web de su presentacin, permitindonos definir la presentacin individual o por grupos de cada uno de los elementos del mismo: tamao de las fuentes, familia, color, peso, etc.

Sus principales atributos son:

type="tipo": que define el lenguaje usado para la definicin de estilos, y que puede tener los valores:

text/css: estilos definidos mediante CSS.

text/javascript: estilos definidos mediante JavaScript.

El valor normal es text/css.

media="soporte": fija el medio de salida de presentacin de los estilos. Sus principales valores son:

screen: para presentacin del documento web en pantalla.

print: para presentacin del documento en impresora.

all: para todas las presentaciones posibles. Es el valor por defecto.

title="titulo": define un ttulo explicativo para los estilos definidos en el bloque. Es til cuando tenemos varios bloques de estilos diferentes en una pgina, para resumir el mbito de aplicacin de cada uno de ellos.

Ejemplo:

P{font-size:12px;font-family:Verdana;color:red;}

Donde hemos definido un estilo concreto para los textos contenidos dentro de las etiquetas ... de nuestro documento web. Observad cmo la etiqueta siempre lleva su correspondiente pareja de cierre, .

La etiqueta SCRIPT sirve para definir bloques de cdigo de script que se deban ejecutar en nuestra pgina. Este cdigo puede estar escrito en diferentes lenguajes de programacin, siendo los ms comunes JavaScript (para su ejecucin en el navegador cliente) y VBScript o PHP (para su ejecucin en el servidor web).

La etiqueta siempre lleva paraja de cierre, , y sus principales atributos son:

language="lenguaje": que define el lenguaje de script usado en el bloque de cdigo, pudiendo tomar los valores:

JavaScript, en cuyo caso podemos adems definir la versin usada (1.1 o 1.2)

VBScript

Php

type="tipo": que indica el tipo de lenguaje usado. Puede tomar los valores text/javascript (JavaScript), text/jscript (versin Microsoft de JavaScript), text/vbscript (VBScript) y text/php (PHP), principalmente. Aunque parezca redundante el uso de ste atributo, es conveniente su uso, ya que indica al navegador qu tipo concreto de lenguaje de script estamos usando y en qu codificacin.

src="ruta_fichero": se usa para establecer como cdigo de script de la pgina el contenido en un fichero externo. En este caso, cuando el navegador est cargando la pgina solicitar al servidor web el fichero de script indicado, considerando luego el cdigo del mismo como incluido en el del propio documento a todos los efectos.

Este atributo toma como valor la ruta en la que se encuentra el fichero de script externo (que hay que poner siempre entre comillas dobles o simples), pudiendo ser una ruta relativa a la estructura de carpetas de nuestro sitio web (ej: src="carpeta/fichero.js") o una ruta absoluta referente a nuestro servidor web o a otro diferente (ej: src="http://www.dominio.com/directorio/carpeta/fichero.js), pudiendo referirnos en este caso incluso a un fichero almacenado en un servidor FTP.

runat="server": que establece que el cdigo contenido en el vloque se debe ejecutar en el servidor web.

La principal ventaja que tiene el uso de ficheros de cdigo script externo es que podemos reutilizar su cdigo en todas las pginas que deseemos, con tan slo establecer en enlace al mismo dentro de cada una de ellas, con lo que nos evitamos tener que repetir el mismo cdigo varias veces.

Ejemplo 1:

function alerta(mensaje)

{

alert(mensaje)

}

Ejemplo 2:

Dim Nombre

Nombre="Carlos"

Response.Write("Tu nombre es " & Nombre)

Ejemplo 3:

Aconsejo al lector el estudio de en buen libro o manual de JavaScript, ya que es un lenguaje bsico y necesario para la construccin de pginas web actuales y dinmicas.

CUERPO (BODY).

Comprende todo el cdigo situado entre las etiquetas y , su contenido si es visible en la ventana del navegador y puede contener los siguientes elementos:

Elementos estndares HTML: prrafos, formularios, tablas, listas, etc.

Capas definidas mediante etiquetas o

Codigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.

Objetos incrustados: Applets, animaciones Flahs, etc.

Todos estos elementos los iremos estudiando en los temas sucesivos, pero es importante ahora centrarnos en una serie de atributos propios de la etiqueta BODY que, si bien en la actualidad han sido en su mayora sustituidos por sus equivalentes mediante CSS, an podemos verlos en multitud de pginas.

La etiqueta BODY posee un grupo de atributos que determinan la apariencia del fondo de la pgina:

background="ruta_imagen": que define una imagen de fondo para la pgina web, y en donde "ruta_imagen" es la ruta en la que se encuentra la imagen de fondo, pudiendo estar referida a la estructura relativa local de carpetas o ser la URL global del fichero de imagen respecto a nuestro servidor web. Un factor a destacar es que si la imagen es de un tamao inferior al de la resolucin de pantalla usada, se repetir horizontal y verticalmente hasta rellenar la totalidad de la pantalla. En algunos textos podris encontrar el atributo bgproperties="fixed" para la etiqueta BODY, cuyo fin es que la imagen no se repita, pero tericamente slo es compatible con Internet Explorer, y prcticamente no da resultados, por lo que es mejor no usarla. Es posible evitar la repeticin de la imagen de fondo mediante atributos de CSS, que veremos luego.

bgcolor="color": que establece un color de fondo para la pgina, y en donde "color" puede venir expresado mediante el nombre web ingls estndar o mediante el cdigo hexadecimal del color (Ver captulo sobre el color en la web).

Ejemplo de imagen de fondo:

HTMLWeb, Manual de HTML. Ejemplo background

Ejemplo de color de fondo:

HTMLWeb, Manual de HTML. Ejemplo bgcolor

Entendemos por mrgenes de pgina la distancia existente entre cada uno de los laterales de la misma y su contenido interior ms cercano. As, el margen superior de la pgina ser la distancia existente entre el borde superior de la ventana til del navegador y el contenido de la pgina ms cercano a l. Y lo mismo para los dems bordes de la pgina.

La etiqueta BODY posee una serie de atributos que nos van a permitir configurar los mrgenes de la pgina, si bien sern diferentes segn el navegador usado.

En el caso de Internet Explorer, disponemos de un atributo para fijar cada uno de los mrgenes de la pgina:

leftmargin="n", para el margen izquierdo

topmargin="n", para el margen superior

rightmargin="n", para el margen derecho

bottommargin="n", para el margen inferior

En todos los casos anteriores, "n" es un nmero entero, que expresa los pixels de separacin.

Para el navegador Nestcape Navigator, en todas sus versiones actuales, los atributos para configuracin de los mrgenes son:

marginwidth="n", para los mrgenes izquierdo y derecho.

marginheight="n", para los mrgenes superior e inferior.

Donde, al igual que antes, "n" es un nmero entero, que expresa los pixels de separacin. Como vemos, Nestcape fija los mrgenes en parejas, permitindonos con ello menos posibilidades de configuracin.

Para poder establecer unos mrgenes de pgina compatibles con ambos navegadores, deberemos establecer las etiquetas correspondientes a los dos. Ejemplo:

HTMLWeb, Manual de HTML. Ejemplo de margenes

Este BODY tiene margenes

Otro grupo de atributos de la etiqueta BODY es el formado por aquellos que permiten al diseador web fijar el color que va a tener el texto de la pgina y el color de los enlaces de la misma, aclarando que un enlace puede tener tres estados generales: normal (el enlace no ha sido activado todava), activo (cuando se ha activado y tiene todava el foco) y visitado (una vez que ha sido activado y regresamos a la pgina que contiene el enlace). Los atributos correspondientes son:

text="color", para el texto de la pgina.

link="color", para los enlaces normales.

alink="color", para los enlaces activos.

vlink="color", para los enlaces visitados.

En todos ellos "color" puede venir expresado mediante su nombre web ingls estndar o mediante su cdigo hexadecimal.

Destacar que un enlace que ya ha sido visitado puede permanecer en ese estado aunque cerremos el navegador y volvamos a la pgina que lo contiene posteriormente. Esto es as porque el navegador guarda en su cach un registro de los enlaces visitados.

Ejemplo:

HTMLWeb, Manual de HTML. Ejemplo de color en texto y enlaces

Yahoo

Google

Terra

Por ltimo, la etiqueta BODY admite otros tres atributos, relacionados todos ellos con el uso de CSS, y que sirven para definir estilos que afectarn a toda la pgina en su conjunto. Estos atributos son:

style="propiedad:valor;propiedad:valor;...", que permite asignar estilos "en lnea".

id="identificador", que permite asignar al cuerpo de la pgina una serie de estilos nicos, cuya definicin estar en la cabecera de la pgina (dentro de un bloque ..., que asigna un texto identificativo a la lnea, que aparece en forma de "bocadillo" al situar el cursor sobre ella.

, para asignar estilos propios a la lnea horizontal (ver tema de Hojas de Estilo en Cascada aplicadas al formateo de texto)

Saltos de lnea, lneas en blanco y espacios.-

Otra de las herramientas de que disponemos a la hora de dar formato al texto de nuestra pgina es el uso de saltos de lnea y lneas en blanco.

Para obtener en HTML un salto de lnea simple podemos usar la etiqueta
, (break=romper), que no posee etiqueta pareja de cierre. Por ejemplo, con:

Esta es una lnea de texto.
Y esta es la siguiente.obtendremos:


Y esta es la siguiente.

Y para conseguir un salto de lnea doble (con lnea vaca en medio) podemos usar la combinacin de dos etiquetas
Ejemplo:


Y esta es la siguiente.que nos da:


Y esta es la siguiente.

En cuanto a la introduccin de espacios en blanco en nuestro texto, recordemos que en HTML los espacios en blanco obtenidos mediante el uso de la barra espaciadora o el tabulador no son tenidos en cuenta, por lo que para conseguir este efecto deberemos recurrir al caracter , (non breaking space = no romper espacio), que introduce cada uno de ellos un espacio en blanco que s es representado por el navegador. Ejemplo:

vamosalcinenos dara:

vamosalcine.

Ademas, con el uso de estos caracteres especiales podemos evitar que una lnea se parta por llegar al fin del ancho de la pantalla, forzando a seguir el texto en la misma lnea.

Conviene aqu matizar que al usar editores HTML como HomeSite, Dreamweaver, etc., podemos escribir el texto de nuestra pgina como si se tratase un editor de textos normal, sin necesidad de ir poniendo caracteres a cada momento; pero esto es debido a que el editor va convirtiendo automaticamente estos espacios metidos con la barra espaciadora en caracteres . Pero podemos tener problemas por ejemplo al utilizar una tabla en la que alguna de las celdas debe estar vaca, sin contenido, ya que si no colocamos en su interior en espacio en blanco (o una imagen), definido por un caracter , Nestcape Navigator 4x pintara mal esa celda, causandonos en la mayora de los casos efectos de diseo no deseados.

La etiqueta FONT.-

A la hora de formatear el texto en HTML sin duda alguna la estrella ha sido durante mucho tiempo la pareja de etiquetas ..., ya que podemos aplicarla a cualquier porcin de nuestro texto, permitindonos variar el tamao, el tipo de letra y el color de la misma, aunque esta etiqueta se encuentra ya en la lista negra del W3C, lo que significa que en prximas versiones de HTML sera borrada del estandar, por lo que conviene abandonar su uso a favor de las Hojas de Estilos en Cascada.

Los principales atributos de la etiqueta FONT son:

..., que fija el tamao del texto entre etiquetas, y donde el tamao viene representado por un nmero entero que puede variar entre 1 (tamao menor) y 7 (tamao mayor), siendo su valor por defecto 3. Ejemplos:

fuente tamao 1fuente tamao 2fuente tamao 3

fuente tamao 4fuente tamao 5fuente tamao 6fuente tamao 7El tamao de la fuente tambin podemos darlo en forma relativa respecto al tamao de la fuente base de nuestro documento. As, si no hemos especificado un tamao base distinto al estandar, que es de un tamao 3, las etiquetas:

tamao relativo +3tamao relativo -2nos daran:

tamao relativo +3tamao relativo -2que corresponden respectivamente a unos tamaos absolutos 6 y 1.

El tamao base para las fuentes de un documento se establece en el correspondiente a , que afectara a todo el documento, que es el que usa la etiqueta anterior como base de tamaos relativos. Si queremos cambiar este tamao por defecto deberemos usar la etiqueta , donde n sera el tamao estandar para todas las fuentes relativas de la pgina. ..., que fija el color con el que va a aparecer el texto afectado, y donde el color puede venir expresado mediante su valor hexadecimal o mediante su nombre web estandar. Ejemplos:

texto en color rojotexto en color verdosoque nos da:

texto en color rojotexto en color verdoso ..., que va a determinar el tipo de letra con la que aparecera el texto, definido mediante el nombre de la familia correspondiente. Se pueden especificar varios tipos de fuente, separados por comas, de tal forma que se usara la primera de ellas especificada, siempre que el ordenador del usuario disponga la tenga instalada. Si no es as, se usara la siguiente especificada en la lista, y as sucesivamente.

Ejemplo:

este texto es de pruebacon lo que obtenemos:

este texto es de prueba

NOTA.-El uso de la etiqueta FONT posee muchas ventajas, pero tambin muchos inconvenientes. Entre sus ventajas se incluyen el que es una etiqueta facil de usar y que se pueden anidar cualquier nmero de ellas, y entre sus defectos estan el que no nos permite un control total del texto, ya que los tamaos posibles son siempre relativos y por lo tanto dependen de la resolucin del ordenador del usuario y del tamao de fuente que tenga este configurado como estandar.Por todo esto el W3C recomienda que evitemos su uso, decantandose para el formateo del texto por las Hojas de Estilo en Cascada.

Los tamaos de fuentes definidos mediante la etiqueta tienen validez para todos los elementos de texto del documento, pero no tendran validez global en las tablas, por lo que deberemos definir en cada una de las celdas el tamao de fuente deseado para el texto incluido en ella.

Comentarios.-

Siempre que escribamos cdigo HTML, y al igual que pasa en otros lenguajes de programacin (Atencin, pregunta: Es actualmente el HTML un lenguaje de programacin?), es siempre til y yo dira que hasta obligatorio la introduccin de lneas de texto que expliquen o comenten qu es lo que estamos haciendo en cada momento, no slo por claridad en el cdigo, si no porque si en un tiempo futuro deseamos retocar el cdigo necesitaremos saber porqu escribimos unas etiquetas u otras.

Para poder conseguir esto necesitamos poder escribir lneas de texto que aparezcan en el cdigo pero que luego no sean visibles en el navegador, es decir debemos usar comentarios, que en HTML se consiguen mediante el par de etiquetas . Todo el texto incluido entre ellas sera considerado como un comentario por el navegador, por lo que no lo mostrara en pantalla. Ejemplo:

Estas etiquetas tambin nos pueden servir para ocultar cdigo no soportado por el navegador, como es el caso de cdigo JavaScript, VBScript, Hojas de estilo, etc.

FORMATEO DE TEXTO MEDIANTE HOJAS DE ESTILOS EN CASCADA

Con la aparicin y puesta en uso de las Hojas de Estilos en Cascada (CSS) disponemos de una herramienta potente y versatil para trabajar con textos en HTML, hasta el punto que el W3C recomienda constantemente su uso, llegando al extremo de desaconsejar gran parte de las etiquetas estandar de HTMl en favor de las Hojas de Estilos.

Mediante esta tcnica, perfectamente implementada en Internet Explorer 4 y superiores y en Nestcape Navigator 6x, y parcialmente en Nestcape Navigator 4x, podemos tener un control casi total sobre el texto de nuestro documento, mediante unas sencillas reglas de construccin y uso, que simplifican notablemente nuestro trabajo.

No es el objetivo de este captulo un estudio exaustivo del estandar CSS, que ya va por su versin 2, si no el estudio de cmo podemos formatear el texto en HTML, por lo que vamos a ver slo aquellas partes de CSS que nos facilitan esta tarea.

Uso general de las Hojas de Estilos.-

La misin basica de las Hojas de Estilos es definir bloques o porciones de texto en nuestra pgina que van a tener unas propiedades de estilo de texto determinadas. Mediante el uso de la sintaxis propia de CSS podemos establecer o fijar cada una de las propiedades de formato que debe tener cada una de estas porciones de texto.

La asignacin de un determinado estilo se puede hacer de diversas formas:

1. En lnea: consiste en establecer dentro de la etiqueta definitoria del bloque una serie de caractersticas de estilo, que afectaran a todo el texto comprendido en el bloque. Esto se consigue con el uso del atributo STYLE, que posee a su vez una serie de sub-atributos y parametros, cada uno de los cuales se encarga de definir una propiedad del estilo del texto. Por ejemplo:

2. parrafo con estilo en lnea3. con lo que todo el texto comprendido entre las etiquetas de parrafo aparecera con un tamao fijo de 11 pixels y con un tipo de letra Verdana, y cuyo resultado es:

parrafo con estilo en lnea

4. Mediante una clase o identificador: una clase es un conjunto de propiedades de formato agrupadas, a las que se les da un nombre representativo. Cuando queramos asignar a un bloque de texto las propiedades de esta clase slamente tenemos que fijar que el bloque pertenece a esa clase, y eso lo conseguimos con el uso del atributo CLASS. La definicin de las propiedades de estilo de la clase se hace normalmente bien dentro del HEAD de la pgina, con el uso de la pareja de etiquetas ..., e incluyendo dentro de ellas el nombre de la clase que deseamos crear asociado con los atributos de estilo que deseemos. Por ejemplo:

.cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}

Este texto es de la clase cabecera

que nos da:


En este cdigo lo primero que hacemos es definir en la cabeza de nuestra pgina una clase de estilo, dentro de las etiquetas STYLE, que llamamos cabecera, y que indicamos que es una clase mediante la colocacin de un punto delante del nombre. Esta clase de estilo la definimos como de texto de tamao 15 pixels, de fuente tipo Verdana y de peso bold (negrita). Posteriormente, en el cuerpo de la pgina, asignamos a un bloque SPAN esta clase de estilo, mediante el uso del atributo CLASS, por lo que todo el texto contenido en este bloque se mostrara con las caractersticas de estilo de la clase cabecera.

Otra forma de asignar estilos en la cabeza de la pgina es mediante el uso del atributo ID. En esta forma, definimos, dentro del HEAD de la pgina y dentro de las etiquetas STYLE, un estilo de formato de texto mediante la sintaxis #nombre{atributos de estilo}, y luego en el BODY, y mediante el atributo ID="nombre", asignamos a un bloque el estilo as definido. Por ejemplo:

#cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}


que nos da:


con lo que obtenemos un resultado en todo analogo al obtenido mediante la definicin de una clase con CLASS, siendo la nica diferencia entre ellas (aunque muy importante) a nivel conceptual: mientras que una clase puede ser usada por todos los bloques que deseemos, un identificador ID slo puede ser asignado a un nico bloque, al que a partir de ese momento podemos referirnos en cualquier momento mediante su nombre identificador. Esto es de especial importancia a la hora del tratamiento del bloque mediante HTML Dinamico o JavaScript.

Una vez establecidas una serie de clases de estilo o de identificadores de bloque podemos sacar estos fuera de la cabeza de la pgina y llevarlos a un fichero aparte, externo. Entonces, para poder usar en nuestra pgina los estilos en l definidos debemos vincularlo a la misma, lo que se consigue introduciendo en la cabeza de nuestra pgina la instruccin:

Las ventajas que este uso supone son enormes, ya que mediante su uso podemos establecer en un slo fichero el estilo general que van a tener todas las pginas que formen nuestro sitio web, con tan slo hacer referencia al fichero externo al comienzo de cada pgina y asignando luego la clase que deseemos a cada bloque la pgina. Si posteriormente deseamos cambiar un estilo determinado o parte de l no necesitaremos editar cada una de las pginas de nuestro sitio, si no que bastara con cambiar el estilo deseado en el fichero de estilos externo.

El fichero de estilos externo debe contener tan slo las definiciones de las clases y de los identificadores, en formato de texto plano, y se deben guardar con la extensin .css.

Por ejemplo, un fichero de estilos externo, llamado estilos1.css, podra ser:

.celda{fon-size:10px;font-family:Helvetica;}

#ejemplo1{margin-left:20pt;color:red;} Si observamos la sintaxis que hemos usado para vincular un fichero de estilos externo o para definir los estilos en cabeza de pgina mediante las etiquetas STYLE, vemos que aparecen una serie de atributos hasta ahora desconocidos. Su significado es:

REL="stylesheet", indica que nos estamos refiriendo a un fichero de Hojas de Estilo.

TYPE="text/css", indica que el lenguaje empleado para definir estilos va a ser el CSS. Esto es as porque tambin podemos definir estilos mediante JavaScript, siendo la sintaxis de ambos mtodos muy parecida, aunque no es conveniente usar este ltimo tipo, ya que slo es soportado bien por Nestcape Navigator 4x y superiores.

HREF="ruta del fichero", que sirve para indicar al navegador dnde se encuentra el fichero de estilos externo. La ruta puede ser relativa a la estructura de carpetas local del servidor o disco local, o puede ser absoluta, en cuyo caso deberemos especificar el URL completo donde se encuentra el fichero.

NOTA.- El tema de los ficheros de estilo externos es especialmente delicado en Nestcape Navigator 4x, ya que si establecemos una ruta equivocada o el fichero de estilos asignado no existe normalmente este navegador se queda "colgado" y no acaba de cargar la pgina web. Unidades en CSS.-

A la hora de trabajar con atributos de estilo vamos a tener que estar usando constantemente unidades de medida. Las unidades pueden ser:

relativas, son aquellas que van a depender de la resolucin de la pantalla del ordenador del usuario o del tipo de letra que usemos en la pgina. A este tipo de unidades pertenecen em (anchura o altura de la M mayscula) y ex (altura de la letra x).

absolutas:, que son aquellas unidades de medida que no dependen ni de la resolucin cliente ni del tipo de fuente personalizada en el navegador. A este tipo pertenecen los puntos tipograficos, pt, los pixels, px, las picas, pc, las pulgadas, in, los milmetros, mm, y los centmetros, cm.

Cuando conviene usar un tipo u otro de unidades?.

En general, el uso de unidades relativas esta aconsejado cuando en nuestra pgina dispongamos de espacio mas que suficiente para presentar los datos, sin miedo a que por ejemplo los datos de una tabla se descoloquen al aumentar el tamao de la fuente, cuando deseemos crear una pgina accesible por usuarios con problemas de visin, ya que estos pueden tener configurado el tamao de las fuentes del navegador grande, etc.

Por el contrario, conviene usar unidades absolutas cuando deseemos tener un control total de la presentacin final de nuestra pgina, ya que con este tipo de unidades nunca nos veremos ante situaciones imprevistas o condicionadas.

En el prximo captulo vamos a ver los principales atributos de estilo con CSS.

PRINCIPALES ATRIBUTOS DE ESTILOS DE TEXTO EN CSS.-Vamos a estudiar ahora los atributos de estilo de texto de CSS mas usados, y para ello los vamos a dividir en apartados, correspondiendo cada uno de ellos a una propiedad diferente. Asmismo, vamos a ir utilizando variadamente tanto la definicin de estilos en lnea como en cabecera mediante clases o identificadores.

La sintaxis general de los atributos para estilos en lnea es la siguiente:

para estilos definidos en una clase es:

.nombre_clase{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}

y por ltimo, para estilos asignados mediante un identificador:

#nombre_identificador{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}

Margenes de bloque.-

Mediante Hojas de Estilos podemos establecer los margenes que va a tener cada uno de los bloques de texto de nuestra pgina, entendiendo por margen el espacio existente entre el bloque y el borde correspondiente de la pantalla activa del navegador. As, el margen izquierdo sera la distancia entre el lado izquierdo del bloque y el borde izquierdo de la pantalla del navegador.

Los atributos CSS que fijan estos espacios son:

margin-left:valor-unidad(margen izquierdo)

margin-top:valor-unidad(margen superior)

margin-right:valor-unidad(margen derecho)

margin-bottom:valor-unidad(margen inferior)

margin:valor-unidad(conjunto de todos los margenes)

Ejemplo:

parrafo con margen izquierdo

que nos da:

parrafo con margen izquierdo

Espaciado interno.-

El espaciado interno o "acolchado" (padding en ingls) fija la distancia que va a haber entre el bloque y el texto (imagenes, tablas,etc.) que contiene. Para definirlo se utilizan los atributos:

padding-left:valor-unidad(espaciado izquierdo)

padding-top:valor-unidad(espaciado superior)

padding-right:valor-unidad(espaciado derecho)

padding-bottom:valor-unidad(espaciado inferior)

padding:valor-unidad(espaciado del conjunto de todos)

Ejemplo:

.bloque{ padding-left:50px;}

parrafo con acolchado izquierdo

que nos da:

parrafo con acolchado izquierdo

Color de los bordes.-

Como complemento a los bordes de un bloque, tambis podemos mediante CSS asignar un color determinado a uno de los bordes de un bloque o a todos ellos, mediante los atributos:

border-left-color:color(borde izquierdo)

border-right-color:color(borde superior)

border-top-color:color(borde derecho)

border-bottom-color:color(borde inferior)

border-color:color(conjunto de todos los bordes)

donde el parametro color puede venir expresado mediante el nombre ingls web estandar o mediante su valor hexadecimal.

As pus, mediante el grupo de atributos de borde podemos configurar de formas muy diferentes los bordes de cada uno de nuestros bloques, con lo que podemos conseguir diferentes efectos muy tiles. Veamos algunos ejemplos:

Ejemplo nmero 1

Ejemplo nmero 1

Ejemplo nmero 1

Ejemplo nmero 2

Ejemplo nmero 1

Ejemplo nmero 3

Tamao de la fuente.-

CSS tambin posee unos atributos propios que nos van a permitir definir con toda exactitud el tamao de las fuentes del texto contenido en un bloque, celda de tabla, lista, elementos de formulario, etc. Para ello contamos con el atributo font-size:valor-unidad, donde unidad puede ser cualquiera de las unidades absolutas o relativas estudiadas antes. La sintaxis de uso en el caso de la celda de una tabla es del tipo:

.celda1{font-size:12px;}

.celda2{font-size:16px;}

celda primera

celda segunda

que nos da:

celda primeracelda segunda

Tipo de fuente.-

Analogamente el tamao de las fuentes, podemos tambin mediante CSS fijar el tipo de fuente de cada una de las partes de nuestra pgina, mediante el atributo font-family:familia. El parametro family puede ser cualquiera de las fuentes estandar que poseen los ordenadores, al igual que suceda con el atributo Un ejemplo de su uso es el siguiente:

texto divertido

que nos da:

texto divertido

donde vemos que podemos establecer mas de una familia de fuente para una clase determinada, separadas por comas; si la primera familia establecida no se encuentra instalada en el ordenador del usuario se tomara la siguiente, y as sucesivamente. Si no se encuentra instalada ninguna de las familias establecidas en la clase, el navegador presentara el texto en la fuenta por defecto del ordenador. Para evitar este factor es conveniente siempre establecer en la lista una de las fuentes que suelen tener instaladas por defecto los ordenadores, como son Verdana para PC's y Helvetica para Mac.

Color del texto.-

Podemos asignar a nuestros textos practicamente el color que deseemos mediante el atributo color:color, donde color puede venir expresado mediante el nombre estandar en ingls o mediante su valor hexadecimal. Por ejemplo:

texto con color

que nos da:

texto con color

Peso de la fuente.-

Otro de los elementos para formatear nuestros textos es el peso que va a tener este, es decir la cantidad de "negrita" con que se va a presentar en pantalla o impresora, factor que esta relacionado directamente con la importancia relativa que va a tener una porcin de texto respecto al conjunto del mismo.

En CSS disponemos de un atributo que nos va a permitir asignar diferentes grados de peso a un texto; este atributo es font-weight:peso, donde el peso puede estar definido mediante un nmero, que pude ir de 100 (menor peso) a 900 (peso maximo), o mediante uno de los valores lighter, normal (valor por defecto), bold o bolder. Los resultados de cada uno de estos pesos es el que se puede apreciar a continuacin:

font-weight:100peso 100




font-weight:500(conjunto de todos los bordes)





font-weight:lighterpeso lighter

font-weight:normalpeso normal

font-weight:boldpeso bold

font-weight:bolderpeso bolder

donde vemos que si asignamos valores numricos los resultados no corresponden a una escala progresiva, ya que hay valores que no afectan al resultado final, otros que originan el mismo resultado. El efecto total suele depender del navegador y el tipo de fuente usado, pus si el tamao de la fuente lo vamos reduciendo llega un momento en que no admite un peso bold, ya que entonces el texto en pantalla sera borroso, e igualmente se puede apreciar que hay familias de fuentes a las que afecta de forma diferente un mismo peso. Como en todo, el resultado ptimo se obtiene realizando pruebas, siendo la experiencia un factor determinante.

Estilo de la fuente.-

Otro atributo CSS que nos ayuda a dar formato a nuestros textos es el que fija el estilo que va a tener este, cosa que se consigue mediante el atributo font-style:normal / italic, siedo el valor por defecto el correspondiente a una fuente normal. El resultado obtenido con el valor italic muestra el texto afectado en italica, y se corresponde con el obtenido en HTML con la etiqueta ....

Ejemplo:

este texto esta en italica

que nos da:

este texto esta en italica

Interlineado.-

Mediante CSS podemos fijar el interlineado de nuestro texto, es decir, la distancia vertical que va a haber entre dos lneas consecutivas de texto. El atributo correspondiente es line-height:valor, donde valor puede venir expresado como un mmero, una longitud, un porcentaje o mediante la palabra normal, que es valor por defecto, y que depende del navegador, de la resolucin y del tamao por defecto de la fuente que usemos. El efecto que se consigue lo podemos apreciar en el siguiente ejemplo:

ejemplo de parrafo en el que el texto
esta interlineado 50 pixels.que nos da: ejemplo de parrafo en el que el texto esta interlineado 50 pixels.

Espacio entre letras.-

Tambin podemos con CSS establecer el espaciado que va a haber entre cada una de las letras de nuestro texto, mediante el atributo letter-spacing:medida/unidad. Por ejemplo:

texto con espaciado entre letrasque nos da:

textoespaciado

Decoracin del texto.-

Tambin es posible mediante CSS asignar un tipo de decoracin a nuestros textos mediante el uso del atributo text-decoration:none / underline / overline / line-through / blink, que corresponden respectivamente a un texto normal (valor por defecto), subrayado, con rayado superior, tachado o parpadeante (slo en Nestcape Navigator). El caso text-decoration:none es especialmente til cuando queremos que los links de nuestra pgina no aparezcan con el subrayado tpico de estos elementos. El resultado de aplicar cada uno de estos valores lo podemos ver a continuacin.

pgina principalpgina principal

texto subrayadotexto subrayado

texto con rayado superiortexto con rayado superior

texto tachadotexto tachado

texto parpadeantetexto parpadeante

Transformacin del texto.-

El atributo de CSS que nos permite aplicar una transformacin a nuestro texto es text-transform:none / capitalize / uppercase / lowercase, que corresponden respectivamente a un texto normal ( valor por defecto), texto con la primera letra en mayscula, texto en maysculas y texto en minsculas, y que podemos apreciar en los siguientes ejemplos:

la primera en maysculasla primera en maysculas

texto en maysculastexto en maysculas

TEXTO EN MINSCULASTEXTO EN MINSCULAS

Alineamiento del texto.-

Para alinear el texto mediante CSS disponemos del atributo text-align:left / center / right / justify, que corresponden a una alineacin a la izquierda (valor por defecto), centrado, a la derecha o justificado, y cuyo resultado es el siguiente:

texto a la izquierda

texto a la izquierda

texto centrado

texto centrado

texto a la derecha

texto a la derecha

Indentacin del texto.-

Igualmente podemos fijar la indentacin de nuestro texto, usando el atributo text-indent:valor, donde el valor puede venir expresado mediante una pareja cantidad-unidad o mediante un valor porcentual del ancho de la pantalla visible del navegador. Ejemplos de la aplicacin de este atributo son los que siguen:

texto indentado 25 pixels

texto indentado 25 pixels

texto indentado el 30%

texto indentado el 30%

Enlaces en HTMLLA ETIQUETA ANCHOR- PROPIEDADES (I).-La base de todo nuestro manual va a ser la etiqueta Anchor, definida en HTML mediante la siguiente sintaxis:

hiperenlacey que pose las siguientes propiedades:

* HREF="ruta"Que define el nombre del anclaje o la ruta URL ( o la URI) del documento con el que va a conectarnos el hiperenlace.

En el caso de un documento, ste normalmente ser otra pgina web, pero puede ser cualquier otro tipo de documento: imgenes, documentos de texto, de Word, hojas de clculo, ficheros JavaScript, CSS, etc. Si tenemos nuestro navegador configurado para abrir el tipo de documento solicitado en el hiperenlace, se abrir en la propia ventana de ste, y si no es as, se nos abrir un cuadro de dialogo para que permitamos abrirlo con el programa asociado al fichero o guardarlo en nuestro disco duro.

Las nicas restricciones que tenemos respecto a los valores que puede tomar esta propiedad es que la URI o URL del fichero enlazado tenga una sintaxis correcta y que el documento exista en el servidor web. Si no es as, obtendremos el conocido ERROR 404, que corresponde a un documento no encontrado.

Vamos a ver unos ejemplos. Si el documento se abre en sta misma pgina, usad el botn Back de la barra de navegacin para volver aqu.

Ejemplo de enlace a otar pgina de ste servidor:

primera pgina

que nos da:

primera pginaEjemplo de enlace a un fichero grfico:

- lhs - borde izquierdo.- rhs - borde derecho.- vsides - bordes laterales.- box - todos los bordes.- border - todos los bordes.Ejemplos.- (Slo para Explorer)

UNO DOS UNO

DOS

UNO DOS UNO

DOS

*RULES= "none / groups / rows / cols / all ". Complementa al atributo BORDER, y permite especificar qu bordes internos se veran.Slo funciona en Internet Explorer.- none - no se ven los bordes interiores.- groups - muestra los bordes entre los grupos de tabla, especificados mediante las etiquetas , y .- rows - muedtra los bordes entre filas- cols - muestra los ordes entre columnas.- all - muestra todos los bordes interiores.- basic -genera lneas divisorias entre THEAD, TFOOT y TBODY.Ejemplos.- (Slo para Explorer)

UNO DOS UNO DOS UNO

DOS

UNO

DOS

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* HSPACE= "p ", donde p=n entero=n pxeles. Permite especificar el espacio horizontal que habra entre la tabla y el texto circundante.Permite aadir mas espacio a la derecha y a la izquierda de la tabla, entre el borde y el contexto.

* VSPACE= "p ", donde p=n entero=n pxeles. Permite especificar el espacio vertical que habra entre la tabla y el texto circundante. Permite aadir mas espacio arriba y abajo de la tabla, entre el borde y el contexto.

* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la tabla. No se muestra en el navegador.

* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de las celdas de la tabla, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".

* CHAROFF="n". Asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensacin del caracter de alineacin. Solamente vale si en ALIGN se ha puesto el valor "char.

* STYLE="atributo:valor;atributo:valor;". Especifica informacin de estilo sobre un simple elemento del documento. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con l se puede modificar completamente la presentacin de la tabla y de su contenido. Alguno de sus atributos y valores slo se ven en Internet Explorer.

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* TITLE="titulo", para titular un documento o una seccin del mismo. Algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.

* CLASS="clase". En la actualidad se utiliza segn las especificaciones del W3C para establecer una clase de estilos a la tabla y su contenido. Para mas informacin consultar manuales de CSS.

* ID="nombre". Analogo al atributo CLASS, pero identifica la tabla como un objeto nico, con sus atributos de estilo definidos en lnea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensin .css. Ver manuales de CSS.

* DIR="direccion". Se usa para indicar la direccin del texto y de las columnas. Asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.

ETIQUETA Y SUS ATRIBUTOS... Esta pareja de etiquetas es necesaria para especificar y delimitar cada una de las filas que va a tener la tabla, y entre ellas iran las parejas de etiquetas . y ., que veremos mas adelante.Sus principales atributos son:

* BGCOLOR= " color", donde color puede venir en su nombre web en ingls o en su valor hexadecimal. al igual que con la etiquetas y , este atributo va a esTABLEcer el color del fondo de cada celda, prevaleciendo este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.Ejemplos.-

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* ALIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir en cada celda de esa fila van a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor por defecto es LEFT, por lo que si no especificamos nada las celdas de la fila apareceran alineadas a la izquierda.Ejemplo-

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* VALIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de las celdas de la fila en la parte superior, en medio, a la altura del texto de la celda colindante o abajo respectivamente.Ejemplo-

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o contenido de la fila de la tabla. No se muestra en el navegador.

* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que queremos usar como referencia para alinear el texto de las celdas de la fila, es decir, especifica el caracter sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".

* CHAROFF="n". asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensacin del caracter de alineacin. Solamente vale si en ALIGN se ha puesto el valor "char.

* STYLE="atributo:valor;atributo:valor;.". Especifica informacin de estilo sobre las celdas de la fila. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en Cascada), y con l se puede modificar completamente la presentacin de la tabla y de su contenido. alguno de sus atributos y valores slo se ven en Internet Explorer.

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* TITLE="titulo", para titular un documento o una seccin del mismo. algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio.

* CLaSS="clase". En la actualidad se utiliza segn las especificaciones del W3C para esTABLEcer una clase de estilos a la fila y su contenido. Para mas informacin consultar manuales de CSS.

* ID="nombre". analogo al atributo CLaSS, pero identifica la fila como un objeto nico, con sus atributos de estilo definidos en lnea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo de extensin .css. Ver manuales de CSS.

* DIR="direccion". Se usa para indicar la direccin del texto y de las columnas. asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.

7 . La etiqueta introduce la cabecera de la tabla. Despus de la etiqueta puede situarse una fila o mas de la tabla pertenecientes a la cabecera de la tabla, cerrandose luego la misma con la etiqueta.El cuerpo de la tabla se introduce con la etiqueta. Despus de la etiqueta puede anotar el campo para los datos de la tabla, o sea su cuerpo. Con se cierra el cuerpo de la tabla.El pie de la tabla lo introduce con la etiqueta . Despus de la etiqueta puede anotar una fila o mas pertenecientes al pie de la tabla. Con cierra el pie de la tabla.

La utilidad de estas etiquetas es mas bien estructural que practica, ya que su misin es subdividir en el cdigo la tabla en secciones, con lo que resulta mas claro en su lectura.

ETIQUETAS Y SUS ATRIBUTOS., . Con esta pareja de etiquetas definiremos y delimitaremos cada una de las celdas de las filas de la tabla. Las dos parejas de etiquetas son equivalentes, siendo su diferencia que mediante definiremos encabezados de columna, por lo que el texto que figure en su interior aparecera en negrita y centrado.Los principales atributos son:

* BGCOLOR= " color", donde color puede venir en su nombre web en ingls o en su valor hexadecimal. Al igual que con la etiquetas y , este atributo va a establecer el color del fondo de cada celda, prevaleciendo este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.Ejemplos.-

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* BACKGROUND= " ruta de imagen ", donde ruta de imagen puede ser la ruta relativa en el directorio de archivos del servidor o una URL de Internet dnde se encuentra la imagen. Este atributo es del todo analogo al de las etiquetas > y , tiene sus mismas limitaciones respecto a especificar una ruta URL y nos permite definir una imagen de fondo para toda una fila.Hay que tener mucho cuidado, ya que la imagen utilizada debe ser del mismo tamao que la fila de la tabla, ya que si no el efecto no sera el correcto. Ejemplo-

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* ALIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir en la celda va a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor por defecto es LEFT, por lo que si no especificamos nada el contenido de la celda aparecera alineado a la izquierda.Ejemplo-

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* VALIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de la celda en la parte superior, en medio, que todas las celdas sean alineadas a una lnea base comn (o sea, de tal manera que el primer rengln de cada celda comienza a una misma altura) o abajo respectivamente. Su valor por defecto es MIDDLE, situando el contenido de la celda verticalmente en medio de la mismaEjemplo-

UNO DOS UNO DOS UNO

DOS

UNO

DOS

* WIDTH= "n", donde n=n de pxeles tanto por ciento. Con este atributo se especifica el ancho que va a tener cada celda. Si queremos que las celdas sean del mismo tamao es necesario que especifiquemos el ancho en tanto por ciento, ya que si no es as, dependiendo del espacio que necesite el contenido de la celda, esta se ampliara por s sola.

* HEIGHT= "n", donde n=n de pxeles tanto por ciento. Con este atributo se especifica el alto que va a tener cada celda. Normalmente el alto de la celda se suele dejar que lo coja ella misma, adptandose a las necesidades del texto o imagen que contiene. La especificacin HEIGHT, al contrario de la especificacin WIDTH, no es estandar HTML, sin embargo es interpretada por los navegadores que interpretan tablas.Ejemplos.-

UNO DOS UNO

DOS

UNO DOS

UNO

DOS

*ROWSPAN= "n". donde n = n entero. Este atributo nos permite combinar varias celdas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene.

*COLSPAN= "n". donde n = n entero. Este atributo nos permite combinar varias columnas en una sola, de tal forma que esta ocupara todo el espacio reservado para las que contiene.Estos dos ltimos atributos son de los mas tiles de los que disponemos para crear tablas, pero su uso entraa ciertas dificultades, que slo se evitan con un buen conocimiento y practica.Ejemplos.-

CELDA ESPANDIDA CELDA ESPANDIDA

UNO

DOS

TRES

UNO

DOS

TRES

UNO DOS TRES UNO DOS TRES

CELDA ESPANDIDA UNO UNO UNO DOS UNO DOS

CELDA ESPANDIDA

UNO

DOS

UNO

DOS

UNO

DOS

*NOWRAP. Este atributo evita que el texto de un parrafo contenido en la celda d un salto de lnea automatico cuando se llaga al lmite derecho de la celda. Como conclusin, si se utiliza este atributo, cuando se llega al final de ancho especificado por WIDTH, la celda seguira abrindose mas y mas, para dar cabida al texto que la contiene. Si no se utiliza NOWRAP, al llegar el texto al lmite derecho de la celda se produce un salto de lnea. Como observacin, no siempre implementan muy bien este atributo los navegadores, comportandose a veces la tabla de una forma inesperada.Ejemplo-

SUPERCALIFRAGILISTICO

* BACKGROUND= " ruta imagen ", que nos permite definir una imagen de fondo para el marco flotante, especificando su ruta completa. La pagina cargada dentro del marco se mostrara encima de este fondo de imagen. Ejemplo.- (Slo para Nestcape)

* BGCOLOR= " color ", donde color viene expresado por su nombre web en ingls o por su cdigo hexadecimal, y que nos permite definir un color de fondo para el marco flotante. La pagina cargada dentro del marco se mostrara encima de este color de fondo. Ejemplo.- (Slo para Nestcape)

* VISIBILITY= " hide / show / inherit ", que nos va a determinar si el marco flotante sera oculto, se vera o si heredara esta propiedad del elemento que lo contiene.

* Z-INDEX= " n ", que nos da una coordenada de profundidad del marco, y que sera la que determine cual marco se va a ver en el caso de que varios se superpongan. Se vera el marco que tenga mayor valor de Z-INDEX. Esta etiqueta es dificultosa de usar en los marcos flotantes, ya que Nestcape tiende a situarlos " a su aire" cuando hay varios definidos en la misma pagina. Esto es debido a que una vez que asigna un espacio de pantalla para el primer ILAYER, se resiste a situar otro en ese espacio reservado. Este paramero, Z-INDEX, adquiere todo su significado en el tratamiento de capas generadas con las etiquetas y .

* ABOVE. Indica que el ILAYER debe situarse encima de otro especificado.

* BELOW. Indica que el ILAYER debe situarse debajo de otro especificado.

Tanto la etiqueta de Explorer como la de Nestcape estan en dehuso, ya que lo correcto es crear cdigo til para ambos navegadores.

Un truco para conseguir esto sera introducir dentro de un un . as, Explorer entendera la primera etiqueta e ignorara la segunda, y con Nestcape ocurrira al revs. Ejemplo.- (ambos navegadores)

USO DE LOS FRAMESLa tcnica de los frames ha sido una de las mas empleadas a la hora de construir pginas web, debido a la facilidad que tiene para crear ventanas independientes en las que cargar pginas a partir de mens. Hasta la introduccin de HTML dinamico fu la nica herramienta de que disponamos para estos fines.

Sin duda su uso nos facilita mucho la navegacin y la presentacin en un sitio web, aunque tambin origina muchos problemas secundarios.

Entre los principales usos que podemos dar a los frames en nuestras pginas se encuentran:

* Mens de navegacin.Podemos crear con frames un sistema de navegacin por nuestras pginas mediante un marco lateral en el que situamos enlaces y un marco principal en el que se iran cargando las pginas llamadas.

El esquema de construccin puede ser crear tres marcos: uno superior fijo, en el que podemos situar nuestro logo y/o un bannner o mensaje, otro lateral con el menu y otro central para cargar las pginas.

Para conseguir esto debemos crear 4 pginas web:1) pgina index.html con la definicin de los frames.2) pgina top.html con el logo, banner , etc.3) pgina menu.html con los enlaces4) pgina de principal.html de entrada incial en el frame central.

Mas las diferentes pginas de nuestro sitio web, que iremos llamando desde el men lateral y cargando en el frame central.El cdigo a crear sera del tipo:pgina index.html

pgina menu.html

pgina 1pgina 2

y luego creamos arriba.html, que es una pgina simple con una imagen como logo y un texto aclarativo, y central_1.html y central_2.html que son dos pginas que contendran aquellos elementos web que deseemos.Como podemos ver, al pinchar sobre el enlace "pgina 1" lo que hacemos es cargar en el frame central dicha pgina, y lo mismo ocurre al pinchar el enlace "pgina 2", con lo que sustituimos el contenido de diho frame. Y esto podemos hacerlo con todos los enlaces y pginas que deseemos.

Si hablamos de proporciones de frames y ventana, lo mas comn es utilizar aproximadamente el cuarto izquierdo de la pgina para el ndice fijo y los tres cuartos restantes para la informacin, en el caso de que slo haya dos frames verticales, y si tenemos tres frames, como en el ejemplo, aproximadamente el quinto/sexto superior de la pgina para el encabezado con el logo, y de lo que resta, el cuarto izquierdo es para el men y los tres cuartos derechos para la informacin.

* a partir de este esquema basico podemos extender las utilidades del men mediante frames. Por ejemplo, podemos hacer que al pinchar el enlace del men se nos cambie a la vez tanto el contenido de la ventana central como el de el marco superior, para conseguir as mostrar un mensaje o banner diferente para cada enlace pulsado. Para poder hacer esto necesitamos una funcin JavaScript actuando en la pgina menu.html y varias pginas que se vayan alternando tanto en el frame superior como en el central. Ejemplo.- ( menu.html)

Link 1Link 2

* Y siguiendo con esta tcnica podemos imaginar cualquier combinacin para montar el sistema de navegacin de nuestro sitio web. Podemos montar dos frames laterales, uno con el men y otro con informacin o enlaces relacionados. Ejemplo.-

* Podemos tambin utilizar la tcnica de los frames flotantes para situar uno en una zona en concreto de nuestra pgina y cargar en l, mediante enlaces, diferentes pginas. Pero nos encontramos entonces con la limitacin de Nestcape, que no permite que los tengan barra de scroll, con lo que deberemos entonces fijar un tamao de marco y tener en cuenta que la pgina que se carge dentro no exceda este tamao, porque entonces no se vera completa. Con Explorer no tendremos este problema, ya que si el contenido excede al marco aparecera una barra de deslizamiento que nos permitira ver todo el contenido.

Y as sucesivamente, hasta donde la imaginacin nos lo permita.

* ADAPTAR NUESTRA PAGINA A LA RESOLUCIN DEL NAVEGADOR.Imaginemos que hemos creado una pagina web para una resolucin de 800x600 pxeles. Cuando la visualice un visitante con una resolucin de 640x480 no pasara nada, slo que necesitara usar las barras de desplazamiento para poder visualizarla entera. Pero si nuestro visitante esta utilizando una resolucin de 1024x768 o superior nuestra pagina, si la hemos definido con unidades absolutas, le quedara situada en la parte superior derecha de la ventana del navegador, quedando una gran parte de la pantalla vaca.

Este efecto es indeseable, y podemos corregirlo usando una funcin de JavaScript que detecte la resolucin que usa el visitante. Si esta es de 640x860 de 800x600 le redireccionara a nuestra pagina original, pero si la resolucin es de 1024x768 por ejemplo, le enviara a una pagina con frames en la que en la ventana central estara cargada nuestra pagina original. Con esto la pagina quedara centrada en la pantalla. Hay otras formas de conseguir esto, pero esta con frames es totalmente viable.

Primero necesitamos una pagina index.html, que es la que se va a encragar de detectar la resolucin y de redireccionar adecuadamente:

y ahora creamos tres paginas: 800.html, que va a ser nuestra pagina normal, 1024.html, que va a ser una pagina con frames:

y nada.html, que va a ser una pagina vacia. La nica condicin es que tenga el mismo color de fondo que nuestra pagina principal 800.html.Es decir, hemos creado una especie de "contenedor" para nuestra pagina principal a base de frames, que slo se activara en el caso de que la resolucin del navegador sea de 1024 o superior, en cuyo caso nos la situara en medio de la pantalla. Este efecto de puede conseguir de una forma mejor con Javascript puro, posicionando la pagina en la ventana segn la resolucin, pero tambin es viable hacerlo con frames, como se ha explicado.

* Frames ocultos.Una de las posibilidades que tenemos a la hora de usar trabajar con frames es el uso de frames ocultos, es decir frames que no se van a ver en pantalla. Esto es facil de conseguir, ya que basta definir un frame horizontal o vertical que quede fuera de los lmites de la pantalla. As por ejemplo podemos crear un frame horizontal oculto mediante:

y queda oculto porque por propia definicin del FRaMESET el primer frame ocupara el 100% del tamao de la ventana.Lo mismo podamos heber hecho con un frame vertical, e incluso podemos definir varios frames ocultos.Una vez construido este frame escondido, lo podemos usar para diferentes fines:

1) Ocultar una clave de acceso: si queremos disponer en nuestra pagina de un control de acceso mediante claves y no queremos procesar estas en un programa en el servidor (que es lo aconsejable, por seguridad), podemos esconder las claves correctas de acceso en el frame oculto, y cuando el visitante introduzca las claves en los campos correspondientes de la pagina principal, hacer una comprobacin mediante JavaScript con las claves que tenemos escondidas.

2) Ocultar objetos o funciones de JavaScript: un ejemplo tpico de este mtodo es la creacin de mens de arbol, incluyendo en el frame aculto la funcin de JavaScript que "dibujara" el men en un frame lateral visto, de tal forma que si el visitante observa el cdigo fuente de este, slo vera cdigo HTML puro, pero no el de la funcin que lo crea.

3) almacenamiento de variables de sesin: a veces puede interesarnos ir almacenando algunas variables y valores a lo largo de la visita de una persona a nuestras paginas. Por ejeplo, podemos ir creando un perfil de usuario en unas pocas paginas iniciales, para luego dirigir a nuestro visitante a una zona en concreto de nustro sitio web. Para ello, podemos crear un frame oculto e ir " escribiendo " en l mediante JavaScript las variables que nos interesen, pudiendo recuperar su valor cuando lo necesitemos. Esto lo hacen muchas aplicaciones de todo tipo, si bien para programacin web se suelen utilizar otras tcnicas basadas en el almacenamiento de las variables en el servidor o en el equipo cliente mediante cookies, ya que si lo hacemos por el mtodo explicado en este apartado en cuanto el cliente refresque la pagina perderemos el valor de las variables, a no ser que le indiquemos medianto cdigo de Script qu frames debera recargar en esos casos, aunque de todas formas esta solucin es complicada.

*Ocultar el cdigo fuente de la pagina.Si queremos ocultar el cdigo de nuestra pagina (por favor, deja el cdigo a la vista y claro, para que otras personas puedan aprender de t), siempre podemos crear un frame ico que ocupe el 100% de la pantalla, y cargar en l la pagina a la que queremos ocultarle el cdigo. El visitante, al ir al men VER > CDIGO FUENTE slo visualizara el cdigo de creacin del frame, no el de la pagina que contiene. Pero y si el visitante selecciona la opcin ver cdigo fuente mediante el botn derecho del ratn?. En ese caso todo nuestro esfuerzo habra sido en vano. Aunque podemos entonces crear una funcin JavaScript que desactive el botn derecho, con lo que la proteccin de nuestro cdigo sera total. O no es as?...NO!!, ya que siempre que cargamos una pagina de Internet, para poder nuestro navegador visualizarla lo primero que hace es cargarla en la cach del navegador. Por lo tanto, si queremos ver el cdigo fuente o salvar una imagen o cualquier elemento de la pagina que ya haya sido visualizado en el navegador, lo nico que tenemos que hacer es irnos al directorio WIDOWS o WINNT de nuestro odenador y buscar en la carpeta archivos temporales de Internet, y all estaran guardados todos los elementos de las paginas que hayamos visualizado, incluyendo las propias paginas con su cdigo fuente.

FORMULARIOS Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestras paginas web interactivas, en el sentido de que nos permiten recopilar informacin de la persona que ve la pagina, procesarla y responder a ella, pudiendo de esta forma responder adecuadamente a sus acciones o peticiones.

El proceso comienza con la creacin en nuestra pgina de un formulario de entrada de datos, que va a contener diversos campos diferentes en su funcionalidad y que nos van a permitir recopilar toda aquella informacin que deseemos de la persona que ve la pagina. Estos datos, una vez completado el formulario, seran enviados normalmente al servidor para su procesamiento o a nosotros directamente, mediante correo electrnico.

Etiquetas ...

Estas etiquetas son las que delimitan el comienzo y el final de un formulario. Si queremos mostrar en una pagina un elemento aislado de un formulario, aunque sea con otra finalidad diferente a la del envo de los datos que contenga al servidor (por ejemplo para tratar esa informacin mediante Javascript), es necesario delimitar ese elemento de formulario mediante las etiquetas y. Si no lo hacemos as, I.Explorer s mostrara el elemento, pero Nestcape no.

La pareja de etiquetas se introduce en el cdigo HTML dentro del BODY de la pagina, en el lugar en que queramos que nos aparezcan los elementos del formulario.

Sus principales atributos o parametros son:

* action = "ruta_programa". Indica el programa del servidor que va a "tratar" las variables que se enven con el formulario o el envo de los datos mediante correo electrnico mediante el valor "mailto: direccion_de_correo", en cuyo caso deberemos aadir el parametro ENCTYPE="text/plain" para que lo que recibamos resulte legible. Tambin puede ser una URL usando el mtodo GET (por ejemplo, un botn para ir a otra pgina).

En el caso de que definamos aqu un programa para el tratamiento de datos deberemos especificar su ruta relativa respecto al directorio de carpetas del servidor en dnde tengamos situado nuestra aplicacin web o bien una URL completa, si el programa esta en otra direccin de Internet.

* method = " POST / GET " . Indica el mtodo segn el que se van a transferir las variables del formulario. POST enva los datos, normalmente al programa CGI definido en action o por correo si en action hemos utilizado mailto. El mtodo GET aade los argumentos del formulario al URL recogido en action (utilizando como separador de las variables la "?"). El mtodo de uso mas normal es POST, y en el caso de que estemos mandando el formulario a nuestra direccin de correo electrnico es obligado usarlo.

Con GET los datos son encadenados al URL especificado en action , utilizando el tipo de codificacin especificado en el atributo enctype. Este mtodo se utiliza cuando los datos no modifican la base de datos, por ejemplo, al realizar una bsqueda, y los caracteres a enviar tienen que pertenecer obligariamente al conjunto ASCII, por lo que para que se reconozcan los espacios en blanco debes separarlos mediante un signo mas (+),pero en su representacin hexadecimal,lo que se puede hacer antes de enviar los datos con funciones propias del mtodo de programacin utilizado o sustituyendo dirctamente los signos + por su equivalente hexadecimal de 16 bits (smbolo %20).

Con el mtodo POST se realiza una transaccin mediante el protocolo HTTP, utilizando la codificacin enctype, con lo que se envan los parametros en un encabezado independiente http, que se recibe por separado. Se utiliza para aplicaciones que modifican la base de datos de destino.

* enctype =" tipo ". Indica el tipo de documento en formato MIME. El mas usado para que lleguen el contenido a travs de un mail con el mtodo post sera "text/plain". Especifica el tipo de encriptacin que se va a realizar con los datos que se van a enviar. Este atributo solamente se aplica si method es POST. Indica como se codificara el formulario si utiliza el mtodo POST. Por defecto es "application/x-www-form-urlencoded". Otro posibles valor es "multipart/form-data". Mas adelante veremos en que caso se utiliza uno u otro tipo.

* accept =" tipo MIME ", que indica al servidor qu tipos de archivo MIME se van a aceptar en el envo. Normalmente no se usa, pero si nos es necesario el administrador de nuestro servidor web nos puede indicar cuales son aceptados.

* accept-charset = "charset ", que especifica la lista de caracteres permitidos que deben ser interpretados correctamente por el servidor receptor. Por ejemplo, si el servidor admite como caracteres permitidos cdigo HTML, en valor de charset sera "text/html".

* target= " nombre ". . Este atributo funciona igual que el homnimo de las etiquetas y, e indica en qu ventana de una pagina con frames se debe mostrar el resultado del proceso de datos mediante el programa CGI. Ejemplo.-

......elementos del formulario...

Principio del formulario

Etiqueta

La etiqueta va a definir la mayora de los diferentes elementos que va a contener el formulario.Sus atributos y valores son:

* TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuacin:

text, que sirve para introducir una caja de texto simple, y admite los parametros:

name=" nombre", que asigna de forma unvoca un nombre identificador a la variable que se introduzca en la caja de texto.

maxlenght=" n ", que fija el nmero maximo de caracteres que se pueden itroducir en la caja de texto.

size=" n ", que establece el tamao de la caja de texto en pantalla.

value=" texto ", que establece el valor por defecto del texto que aparecera en inicialmente en la caja de texto.

disabled, que desactiva la caja de texto, por lo que el usuario no podra escribir nada en ella.

accept = " lista de content-type", Indica el tipo de contenido que aceptara el servidor. Sus posibles valores son:

1. text/html

2. application/msexcel

3. application/msword

4. application/pdf

5. image/jpg

6. image/gif7. etc.

readonly, que establece que el texto no puede ser modificado por el usuario.

tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

alt= " texto ", que asigna una pequea descripcin al elemento.

Ejemplo.-

introduce tu nombre:

con el que obtenemos:

introduce tu nombre: radio, que define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar por uno solo de ellos, que se marca con el ratn o tabulador. Admite los parametros:

name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo.

value =" valor ", que define un valor posible de la variable para cada uno de los radio botones.

checked, que marca por defecto uno de los radio botones del grupo.

disabled, que desactiva el radio botn, por lo que el usuario no podra marcarlo.


Ejemplo.-

marca tu equipo favorito:Real MadridAtltico de MadridBarcelona

con el que obtenemos:marca tu equipo favorito:

Real Madrid

Atltico de Madrid

Barcelona checkbox, que define una o mas casillas de verificacin, pudiendo marcar el usuario las que desee del conjunto total. Si pinchamos una casilla con el ratn o la activamos con el tabulador y le damos a la barra espaciadora la casilla se marca; si volvemos a hacerlo, la casilla se desmarca. Sus parametros complementarios son:

name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas. value =" valor ", que define un valor posible de la variable para cada uno de casillas de verificacin.

checked, que marca por defecto una o mas de las casillas del grupo.

disabled, que desactiva la casilla de verificacin, por lo que el usuario no podra marcarla.


Ejemplo.-

marca tu msica favorita:RockPopHeavyTecno


marca tu msica favorita: Rock Pop Heavy Tecno button, que define un botn estandar. Este botn puede ser usado para diferentes acciones, pero normalmente se le da utilidad mediante JavaScript, mediante el evento "OnClick". Sus parametros son:

name=" nombre", que asigna un nombre al botn, que nos puede servir para acciones con lenguaje de script.

value=" valor ", que define el texto que va a figurar en el botn.

disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus permanece inactivo.


Ejemplo.-

image, que introduce un botn definido por una imagen, en vez del formato estandar de botones, con lo que podemos as personalizar el botn. Inicialmente su funcin era contener una localizacin de las coordenadas que pinchara el usuario, para que luego el programa CGI realizara una accin u otra dependiendo de estas. Pero actualmente se usa mas para personalizar un botn de envo de datos; es decir, su funcionalidad es analoga a la de submit, pero nos permite personalizar este elemento. Ademas aadira como informacin en el formulario las coordenadas x e y donde el usuario lo puls. Admite los parametros:

name=" nombre", que asigna un nombre al botn para identificarlo de forma nica y poder as acceder luego a sus propiedades.

src= " ruta imagen ", que establece la ruta dnde localizar el fichero de imagen. Esta ruta puede ser relativa al directorio web en el servidor o una URL absoluta que define unvocamente la lozalizacin de la imagen.

width= " w ", que fija la anchura del botn de imagen.

height= " h ", que fija la altura del botn de imagen.

align= " left / middle / right / bottom / baseline...", que define la posicin del texto que rodea el botn respecto a este.

hspace= " x ", que fija el espacio horizontal que habra entre el botn y el texto que lo circunda.

vspace= " x ", que fija el espacio vertical que habra entre el botn y el texto que lo circunda.

alt = " texto ", que asocia un texto explicativo al botn de imagen. Al situar el cursor encima del botn se mostrara este texto en forma de tip de Windows. Siempre es conveniente poner este atributo, para que en caso de navegadores de slo texto, de que la imagen no se encuentre en la ruta por cualquier motivo o de que la pagina tarde mucho en cragarse por su peso, el usuario puede ver qu hace el botn de imagen y pueda en consecuencia utilizarlo para tal fin.

disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus permanece inactivo tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

usemap= " #nombre de mapa ", que nos permite el uso de un mapa de imagenes en el cliente como un dispositivo mas de entrada de datos.

Ejemplo.-



pulsa aqu Final del formulario

password, que define una caja de texto para contener una clave o password, por lo que el texto que introduzca el usuario aparecera como asteriscos, por motivos de seguridad. Sus parametros opcionales son los mismos que los del tipo text.

Ejemplo.-



introduce la clave de acceso: Final del formulario

hidden, que define un campo invisible, por lo que no se ve en pantalla. Aunque parece as definido que no tiene utilidad, sus usos son varios e importantes, y los veremos ms tarde. Sus atributos son:

name=" nombre", que asigna un nombre identificador nico al campo oculto.

value=" valor ", que va a ser el valor fijo que se le va a pasar al programa del servidor, ya que el usuario no puede modificarlo. En realidad este valor no tiene porqu ser fijo, ya que lo vamos a poder modificar mediante cdigo de script, lo que nos va a permitir ir pasando una serie de variables ocultas de una pagina a otra.

Ejemplo.-

file, que define un archivo que puede ser enviado junto con los datos del formulario. En este tipo de elemento encontramos asociados una caja de texto y un botn en el que encontramos escrito bien "examinar..." bien "browse..." , dependiendo del lenguaje de nuestro navegador, que al ser pulsado nos abre la tpica ventana de exploracin de nuestras unidades de disco, para que seleccionemos el archivo que queremos enviar al servidor. Cuando elegimos uno su ruta aparece en la caja de texto.Ejemplo.-


Final del formulario

Sus principales atributos son:

title="titulo": que muestra un texto en tipo tip al situar el cursor encima del botn de examinar (slo en Internet Explorer).

accept="tipo_archivo":que determina el tipo de archivo que se admite como para enviar.

disabled : que desactiva tanto el botn como la caja de texto, impidiendo al usuario seleccionar un archivo (slo Internet Explorer y Nestcape 6x).

size="numero_entero": que fija la anchura de la caja de texto asociada.

submit, que incorpora al formulario un botn de envo de datos. Cuando el usuario pulsa este botn los datos que ha introducido en los diferentes campos del formulario son enviados al programa del servidor o a la direccin de correo indicada en action. Sus atributos son:

value=" valor ", que define el texto que va a aparecer en el botn de envo.

disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus permanece inactivo.


reset, que define un botn que al ser pulsado por el usuario borra todos los datos que hubiera introducido en cualquiera de los campos del formulario. Sus atributos son los mismos que los de SUBMIT.

Etiquetas ...

Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable, que presenta varias opciones de eleccin, de tal forma que el usuario puede elegir una o varias de ellas, si as se especifica.Sus atributos y valores son:

name=" nombre", que asigna un nombre identificador al campo, de tal forma que al enviar los datos del formulario la opccin elegida sera asociada a este nombre.

size= " n ", con n= n entero, que define el nmero de opciones visibles. Si n=1 el campo de seleccin se presenta como una lista desplegable, mientras que si se indica otro valor se presenta como una caja de lista con barra de desplazamiento.

multiple, que permite elegir varias de las opciones a la vez. Si no se especifica este atributo solamente se podra escoger una de las opciones. Para ello hay que mantener pulsada la tecla CONTROL mientras se seleccionan y/o deseleccionan las diversas opciones.

disabled, que desactiva la lista, de tal forma que no se produce ninguna accin cuando se pulsa una opcin, pus permanece inactiva.


Para introducir cada una de las diferentes opciones de la lista se utiliza la etiqueta , que admite como parametros:

value, que fija el valor que sera asociado al parametro name de cuando se enve el formulario. Este valor

Separata HTML

Documents

Transcript of Separata HTML