Tutorial HTML
Cargado por
Mauricio david ruizTutorial HTML
Cargado por
Mauricio david ruizHTML (HyperText Markup Languaje), como su nombre lo indica es un lenguaje de
marcas para la creación de hipertextos. Por hipertexto entenderemos texto con una
presentación agradable, con inclusión de elementos multimedia (gráficos, video, audio)
y con la presencia de hipervínculos a otros documentos.
Computador
Navegador Web Existen multitud de ellos pero los mas comunes son: (Mozilla
Firefox, Internet Explorer y Opera.
Editor de Texto (Bloc de Notas, Word, WordPad, entre otros) o Editores HTML
(DreamWeaver, NVU, LopeEdit, NotePad++, entre otros).
Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >. El
texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta.
Sintaxis:
<Etiqueta>Elemento(s) Afectado(s) por la etiqueta</Etiqueta>
Por Ejemplo: <b>Hola Mundo</b>
La Frase “Hola Mundo” esta entre las etiquetas (<b> </b>) Negrita o Bold (en ingles)
cuyo resultado es “Hola Mundo” en negrita.
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo
texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define
la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y
fin, ya sea texto plano o otras etiquetas HTML.
Por ejemplo <i>Hola Mundo</i> Bienvenidos, la etiqueta <i></i> significa que el
elemento incluido dentro ella quedara en cursiva, solo quedara en cursiva “Hola
Mundo” por que solo esa frese esta incluida dentro de las etiquetas <i></i> la palabra
bienvenidos no será afectada por la etiqueta por estar fuera de ella entonces el resultado
seria el siguiente: “Hola Mundo Bienvenidos”.
Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este
implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una
imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros
elementos.
Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta
especial <!--, definiéndose un comentario de la forma:
<!-- Esto es un comentario -->
Los comentarios son útiles para identificar el documento, pudiendo indicar al comienzo
del documento su titulo, autor y la fecha en el que fue realizado, esto se hace antes de la
etiqueta <HTML>. También aunque ya con menos utilidad para comentar cualquier
instrucción o circunstancia del documento.
Los comentarios no se muestran en el documento HTML y el único modo de verlo es
viendo el código HTML fuente del documento, cosa que permiten algunos navegadores
de la WWW.
Un documento HTML está definido por una etiqueta de apertura <HTML> y una
etiqueta de cierre </HTML>. Dentro de este se dividen dos partes fundamentales la
cabecera la cabecera de un documento HTML está delimitado por las etiquetas
<HEAD> y </HEAD>, en esta se incluirán las definiciones generales que afectarán a
todo el documento. Como el titulo el cual debe ir incluido en la etiqueta
<TITLE>Titulo de la página </TITLE>, también:
Etiquetas BASE, LINK, ISINDEX
META Tags
Declaraciones de estilos, mediante la etiqueta STYLE
Códigos de lenguajes de script en cliente: JavaScript, VBScript, etc.
Códigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc..
El cuerpo, esta delimitado por la etiqueta <BODY>. En ella se incluirán todas las
instrucciones HTML y el texto que forman el documento
Por tanto la estructura de un documento HTML será:
<HTML>
<HEAD> <TITLE> Titulo de la Pagina </TITLE>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
La HEAD es la primera de las dos partes en que se estructura un documento HTML. En
la HEAD reside información acerca del documento como por ejemplo la Etiqueta
<title> Titulo de la pagina </title>
Ejemplo:
<head>
<title>Mi primera pagina</title>
</head>
Atributos de <BODY>
El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un
documento HTML. Por supuesto es obligatoria, ya que es aquí donde reside el
verdadero contenido de la página, y por tanto:
Se escribirá así:
<BODY>
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto
</BODY>
La etiqueta BODY presenta algunos atributos que son de definición global para todo el
documento, estos definirán los colores y el fondo del documento HTML.
Los atributos de la etiqueta <body> son:
background: Define una imagen de fondo para la página web.
Sintaxis: background=”ruta_imagen”
"ruta_imagen" es la ruta en la que se encuentra la imagen de fondo, pudiendo estar
referida a la estructura relativa local de carpetas (ejemplo imágenes/fondo.jpg) o ser la
URL global del fichero de imagen respecto a nuestro servidor Web
(http://www.pagina.com/imagenes/fondo.gif).
Ejemplo: <body background=”fondos/imagen.jpg”>
bgcolor: Establece un color de fondo para la página.
Sintaxis: bgcolor=”color”
Ejemplo: bgcolor=”red”
text: Especificará el color del texto normal dentro del documento HTML. Por defecto
será normalmente negro.
Sintaxis: text =”color”
Ejemplo: <body color=”blue”>
link: Indicará el color que tendrán los hiperenlaces que no han sido accedidos. Por
defecto será azul.
Sintaxis: link=”color”
Ejemplo: < body link=”red”>
Nota: En donde "color" puede venir expresado mediante el nombre del color en ingles o
mediante el código hexadecimal del color.
vlink: Color de los enlaces que ya han sido visitados. Por defecto es un color azul más
oscuro.
Sintaxis: vlink=”color”
Ejemplo: vlink=”yellow”
leftmargin: para el margen izquierdo
Sintaxis: leftmargin="pixels"
Ejemplo: leftmargin=0
topmargin: para el margen superior
Sintaxis:topmargin="pixels".
Ejemplo: topmargin=0
rightmargin: para el margen derecho
Sintaxis: rightmargin="pixels",
Ejemplo:rightmargin=0
bottommargin: para el margen inferior
Sintaxis: bottommargin="pixels”
Ejemplo: bottommargin=0
Nota: pixels es el número de pixels que se quiere mover cada margen hacia el interior
de la página. Estos parámetros también son accesibles desde instrucciones de estilo.
Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno <Hx>
</Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.
Se escribirán así:
<H1> Texto de prueba (H1)</H1>.
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>
y este sería el resultado:
Texto de prueba (H1)
Texto de prueba (H2)
Texto de prueba (H3)
Texto de prueba (H4)
Texto de prueba (H5)
Texto de prueba (H6)
Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del
cierre automáticamente el visualizador inserta un salto de párrafo.
Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > con el
atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La
gran diferencia de esta notación respecto a la anterior es que no se produce un salto de
párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>
<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>
<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>
Dará como resultado:
AAA AAAAAA
FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere
que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.
Si escribes
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW
ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER
NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL
FONTS</FONT>
Se verá:
Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo SMALL FONTS
Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color
y tamaño. Por ejemplo, si escribes
<FONT FACE="impact" SIZE=6 COLOR="red">
Texto de prueba 12345 con tipo IMPACT</FONT>
Se verá:
Texto de prueba 12345 con tipo IMPACT
Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que
si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su
lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto,
definir tipos raros, que probablemente, no llegarán a verse nunca.
Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo
COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Hay que
tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo
menos, 256 colores.
Si escribes:
<B><FONT COLOR="red">Texto ROJO </FONT>
<br>
<FONT COLOR="blue">Texto AZUL </FONT>
<br>
<FONT COLOR="navy">Texto AZUL MARINO </FONT>
<br>
</B>
Etc…
Se verá asi:
Texto ROJO
Texto AZUL
Texto AZUL MARINO
He aquí una combinación de colores y tamaños:
Si escribes:
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>
Resulta:
Esto es una Prueba
Para definir los saltos de párrafo se utiliza el elemento lleno <P> </P> (por Paragraph).
No suele utilizarse el cierre </P>, ya que el texto continuará normalmente hasta que
encuentre otro salto <P>
Ejemplo: <p> Texto de prueba <p>otro texto de prueba, el resultado será
Texto de prueba
Otro texto de prueba
Como puede verse, hay un línea en blanco entre los dos bloques. El efecto del elemento
<BR> (por BReak) es el mismo, pero sin esa línea vacía.
Se escribirá así:
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 <BR>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
y este sería el resultado:
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
El elemento <P> admite cuatro atributos: ALIGN=LEFT (por defecto),
ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY
Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los
mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER
Se escribe así:
<DIV ALIGN=LEFT>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</DIV>
<DIV ALIGN=RIGHT>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
< /DIV>
<DIV ALIGN=CENTER>
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
</DIV>
Otro elemento que es casi igual que <DIV> pero que no admite atributos de alineado, y
no produce separación de párrafo ni de línea es <SPAN>.
Se escribe así:
<SPAN>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</SPAN>
Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que sirve para
presentar párrafos adentrados (como si estuviesen tabulados).
Se escribirá así:
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>
Y este sería el resultado:
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
En este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres
</BLOCKQUOTE> al final
Otro separador de bloques de texto es el elemento vacío <HR> (por Horizontal Rule).
Al igual que al texto, se le puede incluir un parámetro de color, pero no funciona en
todos los navegadores. También se puede cambiar su apariencia añadiéndole el atributo
<NOSHADE>
Así:
<HR NOSHADE>
El elemento <HR> admite dos parámetros: WIDTH y SIZE. El primero define la
longitud de la línea y el segundo su anchura. No es obligado usar los dos a la vez
Por ejemplo, si escribes
<HR WIDTH=400 SIZE=5>
El resultado será:
El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en número
de puntos (píxels), o en tantos por ciento referidos al ancho total de la ventana. Así:
<HR WIDTH=80% SIZE=5>
El resultado será:
Además se puede indicar su posición respecto a los márgenes de la ventana con los
atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por
ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
El resultado será:
O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>
El resultado será:
Hay otro elemento, aparecido en la versión 6 de Netscape, que permite rodear un texto
con un marco, y opcionalmente ponerle una etiqueta. Se trata del elemento:
<FIELDSET>. Recuerda que si no tienes la versión adecuada de navegador, en los
siguientes ejemplos sólo verás el texto, pero no los enmarcados.
Si se escribe:
<FIELDSET>
Esto es una prueba de enmarcado
</FIELDSET>
Se obtiene:
Esto es una prueba de enmarcado
Este elemento tiene un parámetro que permite etiquetar el recuadro: <LEGEND> Si se
escribe:
<FIELDSET>
<LEGEND>Esto es una etiqueta</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>
Se obtiene:
El parámetro <LEGEND> tiene tres atributos que indican la posición de la etiqueta:
LEFT (por defecto), RIGHT y CENTER. Por ejemplo:
<FIELDSET>
<LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>
Se obtiene:
Si en estos dos ejemplos no ves el recuadro, es porque no tienes una versión de
navegador adecuada.
Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner
cualquier cosa: formularios, imágenes, texto, etc.
Posiblemente ya te habrás dado cuenta de que, cuando escribes un texto con tu editor, a
la hora de ver lo hecho con el visualizador, algunas cosas no están como tú las pusiste...
Como por ejemplo poner dos o tres espacios en blanco entre palabras, o intentar
encolumnar los datos de una pequeña tabla: ¡acaba todo junto y en la misma línea!
Este efecto se puede eliminar con el elemento lleno <PRE>. Al texto que va dentro del
elemento PRE se le pueden aplicar todos los elementos que se quiera, siempre que sean
elementos que no alteren la posición del texto. Por ejemplo si utilizas el elemento <H>,
se rompería el preformateo pero no ocurrirá lo mismo con <FONT SIZE>. Por defecto,
los textos preformateados se ven con tipo de letra "curier", es decir de paso fijo y los no
preformateados en "Times New Roman". Estos tipos son configurables en el
visualizador.
Se escribirá así:
<PRE>
1 2 3 4 5 6 7 <B>Esto es una demostracion de</B>
8 9 10 11 12 13 14 texto preformateado.
15 16 17 18 19 20 21
</PRE>
y este sería el resultado:
1 2 3 4 5 6 7 Esto es una demostracion de
8 9 10 11 12 13 14 texto preformateado.
15 16 17 18 19 20 21
Dentro de un bloque preformateado también se pueden poner links a otros documentos
y codificación para caracteres especiales (se verá más adelante lo que es eso).
Este elemento admite el parámetro WIDTH=x donde x define la máxima longitud de
línea visualizada. No funciona con Netscape.
El navegador, por defecto, elimina varios espacios en blanco y los convierte en uno
solo. Si lo que deseas es separar una palabra de otra más de un espacio, se puede
recurrir a una instrucción especial que le indica esto al navegador, pero hay que darla
codificada; funciona como un avance de carro, y aunque en pantalla cumple su objetivo,
cuando se imprime la página, no todas las impresoras son capaces de interpretarlo
correctamente. Se escribe:   y como alias se utiliza:
Por ejemplo, si escribes:
texto texto texto texto
Se ve así:
texto texto texto texto
Con Netscape 3.0 se ha implementado un nuevo elemento que permite definir espacios
en blanco sin utilizar el elemento <PRE>
Se trata del elemento <SPACER>. Este elemento puede ir acompañado de los atributos
TYPE y SIZE y se puede utilizar en cualquier zona de una página, pero donde más se
aprecia su efecto es en las columnas. Se escibirá asi:
<MULTICOL COLS=2>
<SPACER TYPE=HORIZONTAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto
texto
<P>
<SPACER TYPE=HORIZONTAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto
texto
<SPACER TYPE=VERTICAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto
texto
</MULTICOL>
Y se ve así:
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto
Como puedes ver, con TYPE=horizontal deja espacio en blanco a la izquierda de la
primera linea. Es el valor por defecto. TYPE=vertical deja espacio en blanco por arriba
de la primera linea. Para ambos tipos el tamaño del espacio se da en puntos (pixels) con
el atributo SIZE. El valor por defecto es 0.
Fíjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En
efecto, es necesario indicarle a <SPACER> donde termina el párrafo para que ejecute la
siguiente instrucción del mismo tipo. Este elemento no funciona con el navegador de
Microsoft.
Este es un nuevo elemento que sólo funciona con Netscape 3.0 o superior.
Hasta ahora conocemos distintas formas de estructurar el texto de un documento en
forma horizontal. Con el elemento <MULTICOL> es posible hacerlo de forma
vertical, es decir, darle la misma apariencia que tienen, por ejemplo, un periódico o una
revista. Hay que aclarar que este elemento no tiene nada que ver con las tablas, aunque
su apariencia pueda ser similar a una tabla sin bordes.
Este elemento tiene tres atributos: COLS, GUTTER y WIDTH. Veamos su uso:
COLS Es obligatorio, y determina cuantas columnas deberán aparecer en pantalla.
GUTTER Establece el espacio que habrá entre columnas, medido en pixels (puntos de
pantalla). Si se omite, el valor por defecto es 10.
WIDTH Sirve para controlar el ancho de todas las columnas definidas respecto al
ancho de la pantalla. Todas las columnas son siempre del mismo ancho. El parámetro se
puede dar en tantos por ciento o en pixels. Si se omite, por defecto se entiende 100%.
Hay que tener cuidado a la hora de definir el número de columnas y el espacio de
separación entre ellas, ya que si no se calcula bien, las columnas acabarán solapándose.
Por supuesto, dentro de las columnas son válidos todos los elementos del lenguaje,
como tamaños de letra, imágenes, links, etc., etc. Incluso dentro de una columna se
pueden anidar otras columnas.
Se escibirá asi:
<MULTICOL COLS=2 GUTTER=10 WIDTH=100%>
texto texto texto texto texto texto texto texto texto texto texto
texto
<MULTICOL COLS=2 GUTTER=10 WIDTH=100%>
texto texto texto texto texto texto texto texto texto texto texto
texto
</MULTICOL>
</MULTICOL>
Y se ve así: texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto Observa el efecto producido por el anidamiento en la parte de arriba de la columna
de la derecha.
Este elemento no funciona con el IE.
Una o varias líneas de texto, pueden estar centradas respecto a los márgenes de la
ventana. Esto afecta sólo al texto que hay entre <CENTER> y </CENTER>, pero no a
todo el párrafo. Por ejemplo:
texto texto texto texto texto texto texto texto texto texto texto
texto
<CENTER>texto centrado texto centrado</CENTER>
texto texto texto texto texto texto texto texto texto texto texto
texto
Se verá:
texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto
texto
texto centrado texto centrado
texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto
texto
Esto, además de a texto sólo, se puede aplicar a una tabla, una imagen o cualquier otra
cosa.
Quedan algunos otros elementos que modifican el aspecto del texto. Algunos,
aparentemente, hacen la misma cosa, y otros no funcionan con el visualizador de
Netscape, por lo que se omiten aquí.
Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itálica:
<I>Texto en itálica</I>
Texto con énfasis:
<EM>Texto con énfasis</EM>
Texto ejemplo de código:
<CODE>Texto ejemplo de código</CODE>
Texto teletipo:
<TT>Texto teletipo</TT>
Texto subrayado:
<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
Texto de dirección:
<ADDRESS>Texto de dirección</ADDRESS>
Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superíndice
Texto normal
<SUP>Texto Superíndice</SUP>
Texto subíndice Texto nomal
<SUB>Texto Subíndice</SUB>
Texto grande
<BIG>Texto grande</BIG>
Texto pequeño
<SMALL>Texto pequeño</SMALL>
En los navegadores de última generación se ha implementado un efecto que permite
incluir explicaciones ocultas que aparecen al pasar el ratón por encima, pero sin cambiar
de página ni abrir ninguna ventana nueva. Por ejemplo, si escribes:
<ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM>
Al pasar el ratón sobre la palabra HTML, se desvela su significado: HTML
Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden
ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio),
desordenados <UL> (no numerados), directorios <DIR>, menu <MENU> y listados
de definición <DL>. Veamos comó es la sintaxis básica y apariencia de estos
elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas
mediante anidamientos de unos con otros, hasta conseguir prácticamente cualquier
presentación deseada:
Esto es una lista ordenada (numerada):
1. Primera linea
2. Segunda linea
Se escribe:
<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>
Fíjate en que los elementos <LI> no tienen cierre. Terminan cuando aparece otro igual o
se cierra la lista.
Esto es una lista desordenada (no numerada):
Primera línea
segunda línea
Se escribe:
<UL>
<LI>Primera línea
<LI>Segunda línea
</UL>
En este caso los números han sido sustituidos por unos puntos gruesos. Esa es la
apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el
valor por defecto es DISC). Con el valor CIRCLE se verá:
o Primera linea
o segunda linea
Se escribe:
<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>
También puede usarse el valor SQUARE. Así:
Primera linea
segunda linea
Se escribe:
<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Las listas ordenadas no sólo se pueden ordenar con números. También se pueden
utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se
utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por
defecto) para números, TYPE=A para letras mayúsculas, TYPE=a para letras
minúsculas, TYPE=I para numeración romana en mayúsculas y TYPE=i para
numeración romana en minúsculas.
Esto es una lista ordenada con letras mayúsculas:
A. Primera linea
B. Segunda linea
C. Tercera linea
D. Cuarta linea
Se escribe:
<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Esto es una lista ordenada con letras minúsculas:
a. Primera linea
b. Segunda linea
c. Tercera linea
d. Cuarta linea
Se escribe:
<OL TYPE=a>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Esto es una lista ordenada con numeración romana en mayúsculas:
I. Primera linea
II. Segunda linea
III. Tercera linea
IV. Cuarta linea
Se escribe:
<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Esto es una lista ordenada con numeración romana en minúsculas:
i. Primera linea
ii. Segunda linea
iii. Tercera linea
iv. Cuarta linea
Se escribe:
<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
En algunos casos puede interesarnos que la lista no comience por el número 1 (por
ejemplo si es una lista que continúa en otra página). Se puede conseguir con el atributo
START combinado con TYPE.
Esto es una lista ordenada con letras mayúsculas y que comienza por la E:
E. Primera linea
F. Segunda linea
G. Tercera linea
H. Cuarta linea
Se escribe:
<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
El número que pones en el atributo START indica en que número o letra comenzará la
lista. la E es la quinta letra.
Esto es un menú:
Primera linea
Segunda linea
Se escribe:
<MENU>
<LI>Primera línea
<LI>Segunda linea
</MENU>
La diferencia entre un menú y una lista desordenada, es que las líneas en la lista
desordenada comienzan en el margen izquierdo y las del menú unas posiciones más a la
derecha (aunque eso depende del visualizador, con Netscape se ven igual).
Esto es un directorio:
Primera linea
Segunda linea
Se escribe:
<DIR>
<LI>Primera linea
<LI>Segunda linea
</DIR>
Ocurre lo mismo que con el menú, con Netscape no se aprecia diferencia.
Esto es una lista de definicion:
Primera linea
Segunda linea
Se escribe:
<DL>
<DT>Primera linea
<DD>Segunda linea
</DL>
Ejemplos de listas y menús
Desordenadas
Desordenada simple con marcas
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
Desordenada simple sin marcas. Comienzo en margen izquierdo
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<DL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
</DL>
Desordenada simple sin marcas. Comienzo una posición a la derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
</UL>
Desordenada simple con marcas. Comienzo una posición a la derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
Desordenada simple sin marcas. Comienzo dos posiciones a la derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<DD>Linea de texto 1
<DD>Linea de texto 2
<DD>Linea de texto 3
</UL>
Desordenada simple sin marcas. Comienzo tres posiciones a la derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<UL>
<DD>Linea de texto 1
<DD>Linea de texto 2
<DD>Linea de texto 3
</UL>
</UL>
Desordenada simple con marcas. Comienzo dos posiciones a la derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<UL TYPE=DISC>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
</UL>
Desordenada con 4 niveles sin marcas
Linea de texto 1
Linea de texto 2
Linea de texto 3
Linea de texto 3.1
Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
Linea 4 de texto
Se escribe:
<DL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
<DL>
<DT>Linea de texto 3.1
<DT>Linea de texto 3.2
<DL>
<DT>Linea de texto 3.2.1
<DT>Linea de texto 3.2.2
<DL>
<DT>Linea de texto 3.2.2.1
<DT>Linea de texto 3.2.2.2
</DL>
</DL>
</DL>
<DT>Linea 4 de texto
</DL>
Desordenada con 4 niveles con marcas
Linea de texto 1
Linea de texto 2
Linea de texto 3
o Linea de texto 3.1
o Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
Linea 4 de texto
Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<UL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<UL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</UL>
<LI>Linea 4 de texto
</UL>
Ordenadas
Ordenada simple
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</OL>
Ordenada con 4 niveles, todos ordenados
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
1. Linea de texto 3.2.1
2. Linea de texto 3.2.2
1. Linea de texto 3.2.2.1
2. Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<OL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>
Ordenada con 4 niveles, todos ordenados. Numeración romana en mayúsculas y
minúsculas
I. Linea de texto 1
II. Linea de texto 2
III. Linea de texto 3
i. Linea de texto 3.1
ii. Linea de texto 3.2
i. Linea de texto 3.2.1
ii. Linea de texto 3.2.2
i. Linea de texto 3.2.2.1
ii. Linea de texto 3.2.2.2
IV. Linea de texto 4
Se escribe:
<OL TYPE=I>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL TYPE=i>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<OL TYPE=i>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL TYPE=i>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>
Ordenada con 4 niveles, 2 desordenados con marcas
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
o Linea de texto 3.2.2.1
o Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL TYPE=SQUARE>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<UL TYPE=CIRCLE>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</OL>
<LI>Linea de texto 4
</OL>
Ordenada con 4 niveles, 2 desordenados sin marcas
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<DL>
<DD>Linea de texto 3.2.1
<DD>Linea de texto 3.2.2
<DL>
<DD>Linea de texto 3.2.2.1
<DD>Linea de texto 3.2.2.2
</DL>
</DL>
</OL>
<LI>Linea de texto 4
</OL>
Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos
elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de
una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa:
texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir
cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como
vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se
adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija.
El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se
disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una
cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos
también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.
Una cabecera <TH> es los mismo que una celda de datos <TD> pero de forma
automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es
posible definirlas al principio de las filas, de las columnas o de ambas a la vez.
He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada
uno:
TABLE TR TD TH CAPTION
BORDER X - - - -
ROWSPAN - - X X -
COLSPAN - - X X -
ALIGN - X X X X
VALIGN - - X - -
WIDTH X - X - -
HEIGTH X - X - -
CELLPADDING X - - - -
CELLSPACING X - - - -
NOWRAP - - X - -
EVENTS X X X X -
Resumen de tablas
Veamos el significado de cada atributo:
BORDER Indica el ancho de los bordes de la tabla. Se mide en píxels. Si no
se escribe este atributo, es equivalente a BORDER=0 (por defecto).
CELLSPACING Indica el número de píxels que separan una celda de otra.
Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto
es 2.
CELLPADDING Indica los píxels de separación entre el borde de la celda y su
contenido. Su valor por defecto es 1.
WIDTH Según donde se escriba, sirve para controlar el ancho de toda la tabla
o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en
píxels como en porcentaje respecto al ancho de la pantalla.
ALIGN Indica la alineación horizontal de los datos dentro de las celdas. Puede
tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).
VALIGN Indica la alineación vertical de los datos dentro de las celdas. Puede
tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).
ROWSPAN Se utiliza en la definición de una celda (<TD>) o cabecera
(<TH>) para indicar que su anchura o altura son equivalentes a un determinado
número de filas.
COLSPAN Se utiliza en la definición de una celda (<TD>) o cabecera
(<TH>) para indicar que su anchura o altura son equivalentes a un determinado
número de columnas.
NOWRAP Para impedir que las líneas de texto dentro de una celda se
trunquen en los espacios en blanco.
EVENTS Se pueden capturar todos los eventos típicos de los navegadores en
cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es
compatible con todos los navegadores.
Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ...
</TABLE>
Recientemente se han implementado al elemento <TABLE> algunos atributos muy
interesantes que permiten definir que bordes o líneas de la tabla se mostrarán:
Este atributo sirve para definir que bordes del marco de la tabla serán visibles:
<TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:
void - Ningún lado (por defecto).
above - Sólo el borde superior
below - Sólo el borde inferior.
hsides - Sólo los bordes superior e inferior.
vsides - Sólo los lados derecho e izquierdo.
lhs - Sólo el lado izquierdo.
rhs - Sólo el lado derecho.
box - Los cuatro lados.
border - Los cuatro lados (no es lo mismo que el ya conocido)
Y este otro sirve para definir que bordes de la tabla serán visibles: <TABLE
RULES="valor"> ... </TABLE> donde valor puede ser:
none - Ninguna línea de división (por defecto).
groups - Sólo aparecen líneas de división entre grupos de filas y grupos de
columnas.
cols - Sólo aparecerán líneas de división entre filas.
rows - Sólo aparece líneas de división entre columnas.
Estos últimos atributos no funcionan igual en todos los navegadores, y no funcionan en
absoluto si no son de la última generación. Según el navegador de que se trate, puede
que haya que combinar más de un atributo para conseguir el efecto deseado. Lo mejor
es hacer pruebas con algunas versiones para asegurarse.
Ejemplos de tablas
Tabla básica de 3x2
A BC
D E F
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Dos ejemplos de línea expandida <ROWSPAN>
Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Item 2 Item 3 Item 4
Item 1
Item 5 Item 6 Item 7
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>
Ejemplo de columna expandida <COLSPAN>
Item 1 Item 2
Item 3 Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Tabla con cabeceras <TH>
Head1 Head2 Head3
A B C
D E F
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Combinación de columna expandida y cabecera
Head1 Head2
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Combinación de cabeceras múltiples y columnas expandidas
Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Cabeceras laterales
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>
Combinación de cabeceras laterales y líneas expandidas
Item 1 Item 2 Item 3 Item 4
Head1
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item
8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item
11</TD>
</TR>
</TABLE>
Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos
centrados. Título al pie.
TABLE TR TD TH CAPTION
BORDER X - - - -
ROWSPAN - - X X -
COLSPAN - - X X -
ALIGN - X X X X
VALIGN - - X - -
WIDTH X - X - -
HEIGTH X - X - -
CELLPADDING X - - - -
CELLSPACING X - - - -
Resumen de tablas
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Resumen de tablas</CAPTION>
<TR>
<TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></T
D>
</TR>
<TR ALIGN=CENTER>
<TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR ALIGN=CENTER>
<TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
</TABLE>
</CENTER>
Ejemplo con todos los elementos y parámetros
Media
Altura Peso
Hombres 1.9 85
Sexo
Mujeres 1.7 60
<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Media</TH></TD>
</TR>
<TR> <TD><TH>Altura</TH><TH>Peso</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Sexo</TH>
<TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
</TR>
<TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
</TR>
</TABLE>
Otro ejemplo de línea y columna expandidos
12
A
34
C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>
Ajustando márgenes y bordes
Tabla sin bordes
Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item
3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Aquí no es visible el borde de las celdas debido a que se ha omitido el atributo
BORDER del elemento <TABLE>. La omisión o no es equivalente a parametrizarlo; se
consigue lo mismo así: BORDER=0, y como ya habrás deducido, el valor de BORDER
puede ser variable. Mira el siguiente ejemplo:
Tabla con borde de 10 puntos
Item 1 Item 2
Item 3 Item 4
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
Dimensionado de celdas
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Alineación, títulos y subtablas
Líneas múltiples en un tabla
Enero Febrero Marzo
Otra celda
Celda 1 Celda 2
Celda 3
y esta
Celda 4 Celda 6
es la celda 5
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y esta<br>es la celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>
Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT |
CENTER
Se puede aplicar individualmente a una celda o a toda la línea
Enero Febrero Marzo
Otra celda
Todas alineadas al centro Celda 2
Celda 3
Por defecto
Alineado a la derecha Alineado al centro
Alineado a la izquierda
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Todas alineadas al centro</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierdat</TD>
</TR>
</TABLE>
Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM |
MIDDLE
Se puede aplicar individualmente a una celda o a toda la columna
Enero Febrero Marzo
Todas alineadas arriba Esta es la Celda 3
Celda 2
Alineado arriba Por defecto
Alineado abajo Alineado al centro
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR VALIGN=top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto<br>Alineado al centro</TD>
</TR>
</TABLE>
Titulando las tablas. CAPTION=TOP | BOTTOM
Título arriba
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
<TABLE BORDER>
<CAPTION ALIGN=top>Titulo arriba</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
Título abajo
<TABLE BORDER>
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Anidando tablas. La tabla ABCD dentro de la tabla 12345
3
1 2 A B
C D
4 56
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
Longitud horizontal de las tablas
Tabla que ocupa el 50 % de la pantalla, y cuyas celdas están dimensionadas al 50
% cada una respecto a la longitud total de la tabla
Width=50% Width=50%
Celda 3 Celda 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>Celda 3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsévese que
se alargan más de lo que lo harían sin forzar la longitud de la tabla
Celda 1 2
Celda 3 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Celda 1</TD><TD>2</TD>
</TR>
<TR><TD>Celda 3</TD><TD>4</TD>
</TR>
</TABLE>
El mismo efecto anterior, pero con la tabla dimensionada al 100 %
WIDTH=100% Celda 2
3 Celda 4
<TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
</TR>
<TR><TD>3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Centrado de una tabla en la página
A B C
D E F
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
Tabla forzada al 50 % de la página, conteniendo otra tabla anidada en una de sus
celdas. La segunda tabla está forzada a ocupar el 100 % de la celda receptora.
Item 1 Item 2
Item A Item B Item 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
Longitud vertical de las tablas
Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical.
HEIGHT=25%
HEIGHT=25% Item 2
3 4
<TABLE BORDER WIDTH="50%" HEIGHT="25%">
<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Fondos de colores o gráficos en las tablas
Una tabla de cuatro celdas. Cada una de un color. (Sólo Netscape 3.0 o superior)
Texto ROJO Texto VERDE
Texto AZUL Texto AMARILLO
<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR>
<TR><TD BGCOLOR="blue">Texto AZUL</TD>
<TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>
En este ejemplo se ha dado color individualmente a cada celda. El atributo
BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos
globales. Por ejemplo, para hacer toda la tabla en rojo, sólo sería necesario escribir:
<TABLE BORDER BGCOLOR="red">
....
....
</TABLE>
Para toda la línea:
<TABLE BORDER>
<TR BGCOLOR="red"><TD> texto </TD></TR>
....
</TABLE>
También se puede usar una imagen como fondo de toda la tabla:
<TABLE BORDER BACKGROUND="yellow_r.gif">
....
....
</TABLE>
De sólo una celda:
<TABLE BORDER>
<TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR>
....
</TABLE>
O de toda la fila:
<TABLE BORDER >
<TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
....
</TABLE>
Atributos de última generación
Tabla que solamente muestra los cuatro bordes
ABC
DEF
<TABLE FRAME="border" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra los bordes superior e inferior
ABC
DEF
<TABLE FRAME="hsides" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra los bordes izquierdo y derecho
ABC
DEF
<TABLE FRAME="vsides" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra las líneas de división entre columnas
ABC
DEF
<TABLE FRAME="void" RULES="cols">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra las líneas de división entre filas
ABC
DEF
<TABLE FRAME="void" RULES="rows">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Ejemplo de tabla con agrupamientos de columnas y filas
Ejemplo de grupos de columnas y líneas
Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7
C1L1 C2L1 C3L1 C4L1 C5L1 C6L1 C7L1
C1L2 C2L2 C3L2 C4L2 C5L2 C6L2 C7L2
C1L3 C2L3 C3L3 C4L3 C5L3 C6L3 C7L3
C1L4 C2L4 C3L4 C4L4 C5L4 C6L4 C7L4
C1L5 C2L5 C3L5 C4L5 C5L5 C6L5 C7L5
C1L6 C2L6 C3L6 C4L6 C5L6 C6L6 C7L6
<TABLE border="1" frame="border" rules="groups">
<CAPTION>Ejemplo de grupos de columnas y líneas</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Columna1</TH>
<TH>Columna2</TH>
<TH>Columna3</TH>
<TH>Columna4</TH>
<TH>Columna5</TH>
<TH>Columna6</TH>
<TH>Columna7</TH></TR>
<TBODY>
<TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR>
<TR><TD>C1L2<TD>C2L2<TD>C3L2<TD>C4L2<TD>C5L2<TD>C6L2<TD>C7L2</TR>
<TR><TD>C1L3<TD>C2L3<TD>C3L3<TD>C4L3<TD>C5L3<TD>C6L3<TD>C7L3</TR>
<TR><TD>C1L4<TD>C2L4<TD>C3L4<TD>C4L4<TD>C5L4<TD>C6L4<TD>C7L4</TR>
<TBODY>
<TR><TD>C1L5<TD>C2L5<TD>C3L5<TD>C4L5<TD>C5L5<TD>C6L5<TD>C7L5</TR>
<TR><TD>C1L6<TD>C2L6<TD>C3L6<TD>C4L6<TD>C5L6<TD>C6L6<TD>C7L6</TR>
</TABLE>
Como puedes ver, existe un agrupamiento desde la línea 1 a la 4, y otro de la 5 a la 6. A
su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro.
Los dos agrupamientos de columnas se definen con las instrucciones:
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
Las líneas que separan los grupos de filas las producen las dos instrucciones
<TBODY>, y la que aparece debajo de las cabeceras la escribe <THEAD>. Y todo esto
funciona solamente si en la definición de la tabla se incluye el atributo rules="groups"
Una tabla con efectos compatibles con todos los navegadores...
Como ya has podido ver, muchos de los efectos de última generación mostrados no
funcionan igual, o no funcionan en absoluto con todos los navegadores. ¿Qué hacer
entonces para conseguir tablas cuyas líneas de bordes se vean siempre bien? Pues la
única solución es usar una tabla sin bordes. Sí, ya sé que lo que buscas no es eso, pero si
utilizando atributos de tabla para poner líneas de bordes donde queramos hay problemas
con algunos navegadores, la solución es utilizar otros recursos del HTML que sean
admitidos por todos. No es ninguna solución mágica: solamente tienes que crear un
gráfico con un punto (preferiblemente cuadrado) del color y grosor que quieras dar a tus
líneas... y listo.
Supongamos que queremos conseguir con una tabla representar un recuadro con bordes
rojos. Para ello, utilizando cualquier editor de gráficos creamos un fichero que contenga
un punto de color rojo. Solamente uno, será casi invisible. No necesitamos más. Le
llamaremos rojo.gif
Ejemplo de tabla con bordes compatibles
Y este sería del código necesario:
<table width="300" height="50"
cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5"
align="center">
<tr>
<td rowspan="3" width="1" height="50">
<img src="rojo.gif" width="1px" height="50" border="0"
alt=""></td>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0"
alt=""></td>
<td rowspan="3" width="1">
<img src="rojo.gif" width="1px" height="50" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="4" align="center" height="48">
<font color="white"><b>Texto de tabla con bordes
compatibles</b></font></td>
</tr>
<tr>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0"
alt=""></td>
</tr>
</table>
Como puedes ver, el truco consiste en definir celdas alrededor de la celda que lleva el
texto. Estas celdas que rodean a la principal solamente contienen el fichero gráfico con
el punto. Para conseguir que aparezcan las líneas, sólo hay que "estirar" el punto
contenido en nuestro fichero gráfico rojo.gif. Esto nos permite "dibujar" las líneas que
se quieran y donde se quieran, sin problemas de compatibilidad, ya que estos atributos
del elemento <IMG> son completamente estandarizados (por lo menos de momento).
Fíjate en que además de atributos propios del elemento IMG también se utiliza una
instrucción de estilo: width="1px" para asegurar un grosor mínimo de la línea. Este es
el aspecto de la misma tabla con los bordes visibles:
Horizontal arriba
Vertical Ejemplo de tabla con Vertical
izquierda bordes compatibles derecha
Horizontal abajo
Códigos hexadecimales de color
Estos códigos de color se pueden utilizar como valor de atributo en los elementos
<FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>.
Algunos no funcionarán en ciertos visualizadores, así como si Windows no está
configurado con 256 colores al menos.
La codificación de estos colores está basada en mezclas cromáticas RGB (RED GREEN
BLUE), es decir, se mezclan ciertas cantidades de los tres colores básicos (rojo verde y
azul), para conseguir el color deseado. La cantidad de cada color está definida por el
código que utilizamos, que tiene seis dígitos en hexadecimal. Si los cortamos en 3
grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de
cada color.
La sintaxis para cambiar el fondo de la página (background) a color rojo es: <BODY
BGCOLOR=#FF0000> y para dar color al texto, ver la página Texto de colores. Para
combinaciones generales de colores, ver el ejemplo de control de colores.
Lista de códigos RGB
Puedes probar los diez primeros para hacerte una idea, o puedes verlos todos desde aquí
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB
Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32
Tabla de códigos de caracteres
Actualmente existen muchos más, con códigos de 4 dígitos, como el euro. Estos son
algunos de los más utilizados.
Caracter Código Descripción Alias
! ! Cerrar exclamación --
" " Dobles comillas --
# # Signo de número --
$ $ Dólar --
% % Tanto por ciento --
& & Ampersand amp
' ' Apóstrofe --
( ( Cerrar paréntesis --
) ) Abrir paréntesis --
* * Asterisco --
+ + Signo más --
, , Coma --
- - Guión --
. . Punto --
/ / Barra de división --
0-9 0 - 9 Dígitos del al 0-9 --
: : Dos puntos --
; ; Punto y coma --
< < Menor --
< < Menor lt
= = Igual --
> > Mayor --
> > Mayor gt
? ? Cerrar interrogación --
@ @ Arroba --
A-Z A - Z Letras A-Z --
[ [ Cerrar corchete (izquierdo) --
\ \ Barra inversa --
] ] Abrir corchete --
^ ^ Circunflejo --
_ _ Subrayado --
` ` Acento agudo --
a-z a - z Letras a-z --
{ { Abrir llave --
| | Barra vertical --
} } Cerrar llave --
~ ~ Tilde --
  Espacio sin separación nbsp
¡ ¡ Abrir exclamación iexcl
¢ ¢ Centavo cent
£ £ Libra Esterlina pound
¤ ¤ Signo de divisa general curren
¥ ¥ Yen yen
¦ ¦ Barra vertical partida (pipe) brvbar
§ § Sección sect
¨ ¨ Diéresis uml
© © Copyright copy
ª ª Doña ordf
« « Abrir comillas francesas laquo
¬ ¬ No (símbolo lógico) not
­ Guión débil shy
® ® Registrado reg
¯ ¯ Macrón macr
° ° Grados deg
± ± Más-menos plusmn
² ² Dos superíndice sup2
³ ³ Tres superíndice sup3
´ ´ Acento agudo acute
µ µ Micro micro
¶ ¶ Fin de párrafo para
· · Punto medio middot
¸ ¸ Cedilla cedil
¹ ¹ Uno superíndice sup1
º º Género masculino ordm
» » Cerrar comillas francesas raquo
¼ ¼ Un cuarto frac14
½ ½ Un medio frac12
¾ ¾ Tres cuartos frac34
¿ ¿ Abrir interrogación iquest
À À A mayúscula, acento grave Agrave
Á Á A mayúscula, acento agudo Aacute
  A mayúscula, acento circunflejo Acirc
à à A mayúscula, tilde Atilde
Ä Ä A mayúscula, diéresis Auml
Å Å A mayúscula, anillo Aring
Æ Æ AE mayúscula AElig
Ç Ç C cedilla mayúscula Ccedil
È È E mayúscula, acento grave Egrave
É É E mayúscula, acento agudo Eacute
Ê Ê E mayúscula, acento circunflejo Ecirc
Ë Ë E mayúscula, diéresis Euml
Ì Ì I mayúscula, acento grave Igrave
Í Í I mayúscula, acento agudo Iacute
Î Î I mayúscula, acento circunflejo Icirc
Ï Ï I mayúscula, diéresis Iuml
Ð Ð Eth mayúscula ETH
Ñ Ñ Eñe mayúscula Ntilde
Ò Ò O mayúscula, acento grave Ograve
Ó Ó O mayúscula, acento agudo Oacute
Ô Ô O mayúscula, acento circunflejo Ocirc
Õ Õ O mayúscula, tilde Otilde
Ö Ö O mayúscula, diéresis Ouml
× × Signo de multiplicación times
Ø Ø O barrada mayúscula Oslash
Ù Ù U mayúscula, acento grave Ugrave
Ú Ú U mayúscula, acento agudo Uacute
Û Û U mayúscula, acento circunflejo Ucirc
Ü Ü U mayúscula, diéresis Uuml
Ý Ý Y mayúscula, acento agudo Yacute
Þ Þ THORN mayúscula THORN
ß ß Beta minúscula szlig
à à a minúscula, acento grave agrave
á á a minúscula, acento agudo aacute
â â a minúscula, acento circunflejo acirc
ã ã a minúscula, tilde atilde
ä ä a minúscula, diéresis auml
å å a minúscula, anillo aring
æ æ ae mínuscula aelig
ç ç c cedilla minúscula ccedil
è è e minúscula, acento grave egrave
é é e minúscula, acento agudo eacute
ê ê e minúscula, acento circunflejo ecirc
ë ë e minúscula, diéresis euml
ì ì i minúscula, acento grave igrave
í í i minúscula, acento agudo iacute
î î i minúscula, acento circunflejo icirc
ï ï i minúscula, diéresis iuml
ð ð eth minúscula eth
ñ ñ eñe minúscula ntilde
ò ò o minúscula, acento grave ograve
ó ó o minúscula, acento agudo oacute
ô ô o minúscula, acento circunflejo ocirc
õ õ o minúscula, tilde otilde
ö ö o minúscula, diéresis ouml
÷ ÷ Signo de división divide
ø ø o barrada minúscula oslash
ù ù u minúscula, acento grave ugrave
ú ú u minúscula, acento agudo uacute
û û u minúscula, acento circunflejo ucirc
ü ü u minúscula, diéresis uuml
ý ý y minúscula, acento agudo yacute
þ þ thorn minúscula thorn
ÿ ÿ y minúscula, diéresis yuml
€ € Euro euro
≠ ≠ Distinto de ne
≤ ≤ Menor o igual que le
≥ ≥ Mayor o igual que ge
√ √ Radical radic
↑ ↑ Flecha arriba uarr
↓ ↓ Flecha abajo darr
← ← Flecha izquierda larr
→ → Flecha derecha rarr
↔ ↔ Flecha izq-der harr
El siguiente es sin duda el elemento más importante del HTML, ya que permite
realmente "navegar" por uno o varios documentos, que pueden residir en cualquier
parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama hipertexto ya
que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto,
para la persona que está leyendo sobre un determinado tema, no hay diferencias
ostensibles que le hagan notar dónde está el documento que lee. Para el lector, todo
parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que
lee está repartido por medio mundo, o en un plano más modesto, el documento leído
puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a
otras sin notarlo.
Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de
anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en inglés
link=eslabón o enlace).
Pero seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la
pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al
puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador
llamará a la página que tiene asignada el link. Habitualmente por defecto los
visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde
si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las
configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar
la estetica en algunos casos, se puede parametrizar con una instruccion de estilo.
Se escribirá:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba
</A>.
Y se vería así: Link de prueba
Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se
puede recurrir a una instruccion de estilo. Así:
<A HREF="http://www.miservidor.es/mifichero.htm"
style="color:red; text-decoration:none";> Link de prueba
</A>.
Y se vería así: Link de prueba (Esto puede que no funcione en algunos navegadores
antiguos)
El elemento <A> tiene dos atributos: HREF y NAME.
En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre
comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta
el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que está en
el servidor www.miservidor.es.
Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que
saltar de una máquina a otra, si el enlace es para otra página de nuestro propio servidor
es suficiente escribir la ruta virtual corta: /mifichero.htm o bien:
/otro_directorio/mifichero.htm según proceda.
Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del
elemento </A>, pero también puede hacerse con una imagen cualquiera, que iría en
lugar del texto, incluso puedes poner el texto junto con una imagen. Por ejemplo para
hacer un link que nos lleve al índice desde una bola roja, se escribe:
Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.
Y este sería el resultado:
Ir al índice
Al igual que el texto aparece subrayado en azul cuando forma parte de un enlace, los
gráficos reciben un borde azul alrededor de toda la imagen, lo que a veces puede
resultar poco estético. Esto también tiene solución, pero aquí se hace en la instrucción
de la imagen:
Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif"
border=0> </A>.
Y este sería el resultado:
Ir al índice
El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el
ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en
mayúsculas o con alguna otra diferencia, eso es un nombre de máquina y sería
interpretado como OTRA máquina. Esto es aplicable a todos los parámetros: servicio
(http://) servidor (www.miservidor.es) y fichero (mifichero.htm).
Estas precauciones son ineludibles en el caso de servidores montados en máquinas con
sistema operativo UNIX. En el caso de que el servidor resida en una máquina con
Windows NT o Windows 95/98, es indiferente. Si no se sabe el sistema que tiene la
máquina, es mejor atenerse a la forma UNIX.
Dentro de los parámetros pasados a HREF, podrás ver que al principio pone http://,
esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :
Servicio Descripción Ejemplo Efecto
http:// Servicios WWW <A HREF="http://www.uv.es/"> WWW</A> WWW
ftp:// Servicios FTP <A HREF="ftp://ftp.uv.es/">FTP</A> FTP
news:// Servicios NEWS <A HREF="news://news.uv.es/">NEWS</A> NEWS
mailto:// Servicios E-mail <A HREF="mailto:[email protected]/">E-mail</A> E-mail
file:///C| Fichero local <A HREF="indice.htm/">Fichero</A> Fichero
Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza
para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se
escribirá:
<A HREF="indice.htm" TARGET="Ventana-2"> </A>
Esta instrucción mostrará la página indice.htm pero con otra ventana del visualizador,
es decir tendremos lanzado el visualizador 2 veces.
Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla
compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo, dos
frames, cualquier link invocado desde cualquiera de ellos, hace que la página llamada
aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede
escribir un link con la sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent"> </A>
Existen otros valores para TARGET:
TARGET="_blank": Para que el enlace se muestre en una nueva ventana vacía.
También puede darse un nombre cualquiera con el mismo efecto.
TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo
referencia (valor por defecto).
TARGET="_top": El documento solicitado se cargará en la pantalla actual, ocupando
toda la ventana y destruyendo la estructura de frames anterior, si existe.
Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que
puede estar en un servidor o ser un fichero local, pero que siempre se nos presentará
desde la primera línea del mismo.
El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en
cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde
la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos
largos divididos en secciones.
Se escribirá así:
En el documento activo:
<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto
1</A>
En el documento destino:
<A NAME="punto1"></A>
NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo
documento. Se escribirá así:
Dentro del documento activo En la línea de partida:
<A HREF="#punto1">Ir al punto 1</A>
En la línea de destino
<A NAME="punto1"></A>
Por ejemplo, si haces "clik" aquí con el ratón, saltarás al principio de esta página.
Como habrás visto en el cuadro de arriba, es posible enviar un e-mail desde un link con
la instrucción: <A HREF="mailto:[email protected]">Enviar e-mail</A>. Con esta sintaxis se
invoca al cliente de correo predeterminado para que abra una ventana con la dirección
deseada ya escrita. Si además quieres que dicha ventana se abra con el asunto (subject)
y el texto (body) ya escritos se puede conseguir así:
<A HREF="mailto:[email protected]?&subject=Asunto de prueba&body=Texto de
prueba">Enviar e-mail</A>
Con los links, al igual que con los formularios, es posible moverse usando la tecla de
tabulación, para conseguir que el enfoque salte de un link a otro en un cierto orden. Para
ello se utiliza el atributo tabindex. Por ejemplo, pulsa la tecla "Tab":
Tablas Imágenes Body
Como puedes ver, los saltos en esta línea se han producido siguiendo la numeración
indicada por los disintos tabindex, al resto de links se llega por orden de escritura. Se
escribe:
<A HREF="tablas.htm" tabindex="2">Tablas</A>
<A HREF="imagen1.htm" tabindex="3">Imágenes</A>
<A HREF="body.htm" tabindex="1">Body</A>
Esto solamente funciona con versiones recientes de navegadores. Otro atributo reciente
de los links es title que permite escribir una descripción del link sin necesidad de pulsar
en él, simplemente poniendo encima el puntero del ratón. Por ejemplo:
<A HREF="tablas.htm" title="Saltar a la sección de tablas">Tablas</A>
Se obtiene: Tablas
Debes saber que...
El texto que pongas después del símbolo # puede ser cualquiera, siempre que no
tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por
supuesto, que no esté repetido en el mismo documento de destino.
Si en el documento de destino no existe el punto definido en el documento de
origen, el visualizador nos presentará en pantalla la última línea del mismo.
Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas
direcciones absolutas y después tienes que mover los ficheros por cualquier
razón, tendrás que modificar todas las direcciones.
Si al hacer un link, después del nombre de la máquina no pones el nombre de un
fichero, por defecto el servidor entiende que se le pide la "home page" (página
inicial).
Si un servidor no tiene definida página inicial, simplemente nos mostrará una
lista de todos los ficheros y directorios que tenga en el directorio definido como
raíz si el servidor tiene activada la opción de listar directorios, en caso contrario,
dará un error.
Si después de la dirección de la máquina a la que le haces el link en lugar de un
nombre de fichero pones el de un directorio, generalmente el servidor nos
mostrará un simple listado de los ficheros y directorios que éste contenga si el
servidor tiene activada la opción de listar directorios, en caso contrario, dará un
error.
No sólo puedes montar el link sobre un texto, también puedes hacerlo sobre una
imagen cualquiera. Es decir, después del link y antes de </A> puedes poner lo
que quieras.
El arte de escribir buen HTML reside en dar una buena estructura a la
información. Siempre que puedas huye de crear páginas muy largas. Crea
cuantas necesites, con buena estructura y enlázalas con cuantos links sean
precisos.
Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has
utilizado direcciones absolutas, al hacer un link, no empieces con aquello de:
"http://....". No funcionará.
Si continuas deseando poner direcciones absolutas con ficheros locales, tendrá
que ser así file:///C|/MIDIRECTORIO/mifichero.htm
Después de C (que puede ser A, B, D o la unidad de disco que quieras) fíjate que
va una barra vertical (pipe), y que las barras que separan los directorios y
ficheros son barras a la derecha.
Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según
el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes.
Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este
elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH
HEIGTH BORDER VSPACE HSPACE. Con las nuevas implementaciones que
Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha
hecho necesario dotar al elemento <BR> del atributo CLEAR.
Las imágenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son
interpretados directamente por el visualizador. Se puede usar cualquier otro formato
como el MPG (vídeo), pero entonces el visualizador llamará a un programa auxiliar, que
previamente le habrás definido, para que sea éste el que visualice el fichero. La
desventaja de las imágenes en formatos no tratados por el propio visualizador es que no
verás el texto junto con la imagen, y por tanto no podrás imprimir la página compuesta.
Algunos visualizadores no son capaces de tratar imágenes, o aunque el visulizador sí
pueda, tal vez tu máquina tenga muy poca memoria o una tarjeta de vídeo floja.
Entonces podemos recurrir al atributo ALT (por alternativo) para definir un texto que
aparecerá en lugar de la imagen. Esto es importante cuando una imagen, además de ser
un elemento decorativo, soporta un link.
Veamos ejemplos del uso de <IMG>:
Imagen alineada a la izquierda (por defecto)
<IMG SRC="sugeren.gif">texto texto texto texto
texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto
Imagen con un texto alternativo
Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar.
También se utiliza para que al colocar el puntero del ratón sobre la imagen, sin pulsar,
aparezca el texto. Para verlo tienes de deshabilitar la opción de cargar imágenes de tu
visualizador (sólo es posible con Netscape).
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
Imagen alineada a la izquierda.Texto alineado arriba
<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto
texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto
texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado abajo
<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto
texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto
texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado al centro
<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto
texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto
texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto envolviendo la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR
CLEAR>
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto
Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen
<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido:
<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto
texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE>
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto
Imagen redimensionada a más.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > texto texto
texto
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto
texto texzto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto
texto texto texto texto texto.
Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por
el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto al doble:
272x92.
Imagen redimensionada a menos.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto
texto
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto.
Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por
el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto a la mitad:
75x23
Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la
imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto
texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios
verticales y horizontales vacíos forzados.
texto texto texto texto texto texto texzto texto texto texto texto
texto
<IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto
texto
texto texto texto texto texto texto texto texto texto texto texto
texto
texto texto texto
texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto
texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto
texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Usar una imagen como punto de montaje de un link
texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto
texto.
Como puedes ver, la imagen aparece rodeada de un marco de color como es habitual en
los puntos de link (en el texto es el subrayado). Si quieres eliminar el marco, escribe:
.... IMG SRC="sugeren.gif" BORDER=0 >
Ahora que ya sabes cómo manejar las imágenes, veamos algunos efectos especiales algo
más complicados.
Mapeado de una imagen para usarla como direccionador
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
Si mueves el ratón por encima de la imagen, verás que en la ventanita de abajo del
visualizador (la que hay junto a una llave) aparecen junto a un interrogante unos
números que cambian según muevas el ratón. Con cuidado intenta poner el puntero en
la esquina superior izquierda y en la inferior derecha. Verás las cifras 1,1 y 136,46,
respectivamente, que son las medidas en puntos que tiene el gráfico. Como ya habrás
supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como
un menú direccionador, lo que necesitamos es que algún elemento convierta esas
coordenadas en una dirección del estilo ya conocido:
"http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos
obtener un enorme número de direcciones, teóricamente tantas como pares de
coordenadas tiene la imagen. En la práctica serán menos, ya que andar intentando atinar
en el punto 11,32, por ejemplo, es un poco engorroso.
Existen multitud de programas llamados mapeadores que parten la imagen en
imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos programas
generan un fichero con todas las direcciones. Algo así:
rect http://miservidor.es/mifichero1.htm 12,35
rect http://miservidor.es/mifichero2.htm 90,42
rect http://miservidor.es/mifichero3.htm 112,46
Este podría ser el aspecto del fichero del ejemplo, el llamado mimapa. El parámetro
rect significa rectángulo, y nos indica que la imagen ha sido troceada en rectángulos y
las coordenadas indican la esquina superior izquierda y la inferior derecha. También
podría ser en círculos (circ) o polígonos (poly). Ahora veamos el resto de instrucciones
del ejemplo:
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
La primera parte A HREF ya la conocemos, es un link. Después viene un directorio:
cgi-bin. Este es un directorio especial que tienen los servidores http, donde se ejecutan
los programas auxiliares del servidor, y al que normalmente sólo puede acceder el
administrador del sistema. En ese directorio hay un fichero llamado imagemap que es
un programa que se encarga de leer tu fichero mimapa, capturar las coordenas que
señale el puntero del ratón y servir la dirección que tiene asociada, con lo que acabamos
obteniendo un link normal. Ya por último, aparece ISMAP que es el que convierte una
simple imagen en una potente herramienta.
Sólo queda por decir que el fichero mimapa tiene que estar en otro directorio especial
que tiene el servidor a estos efectos, y al que por supuesto, solo puede acceder el
administrador del sitema.
Todo esto es suponiendo que el servidor está en una máquina UNIX. Si reside en tu
propio PC con Windows o en un MAC (que los hay), tendrás que ver las instrucciones
concretas del programa servidor. La forma de montar el mapa puede variar de un
programa servidor a otro, pero la base de funcionamiento es siempre la misma.
Otra forma alternativa de conseguir que una imagen responda con ciertas acciones, es
operar con los elementos de formularios. En el índice encontrarás información sobre un
tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite
ejecutar una acción.
Pero, una vez más, Netscape ha propuesto una solución mucho más simple: que sea el
propio visualizador quien haga las veces de programa conversor. En efecto, un recurso
tan bueno como los mapas, no debe depender de tener tu máquina en red y de que haya
un servidor http que te atienda. Además, eso resta portabilidad a los documentos locales
y a los trabajos personales en disquete. Para ello ha implementado el elemento MAP
que acompañará a IMG.
Por ejemplo, en la siguiente imagen, la mitad izquierda nos envía a indice.htm y la
mitad derecha a intro.htm. Mueve el puntero del ratón horizontalmente sobre la imagen
y observa la ventanita que hay en la parte baja de la pantalla, verás como cambia el
nombre del link.
Se escribe así:
<MAP NAME="nombre1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm">
</MAP>
<IMG SRC="sugeren.gif" USEMAP="#nombre1">
Aunque se comprende a simple vista, analicémoslo:
En primer lugar tenemos el elemento MAP, que lo que está haciendo es definir un mapa
de coordenadas. Va acompañado del atributo NAME que da nombre al mapa. Es
necesario nombrarlo porque podría haber más de uno en la misma página, y
evidentemente, sus nombres no deberán repetirse.
A continuación tenemos el atributo AREA que define las áreas de la imagen. El
parámetro SHAPE="rect" indica la figura geométrica que estamos utilizando para ello.
Al igual que con los otros mapas, puede ser rect circ y poly.
El parámetro COORDS fácilmente se adivina que indica las coordenadas del área, en
este caso vértice superior izquierdo e inferior derecho, respectivamente.
HREF ya sabemos lo que hace: indica un link con una página, pero esta vez no va
acompañando al elemento <A>, digamos que es un atributo prestado. Hay un área por
cada link definido. Si un área no queremos que tenga link se definirá con NOHREF.
IMG SRC también son conocidos: hacen que se visualice la imagen.
Y por fin, USEMAP nos dice qué mapa de coordenadas hay que aplicar a la imagen. A
una misma imagen se le pueden aplicar distintos mapas si se desea. Fíjate en que
nombre1, (el nombre del mapa) va precedido del símbolo #. Esto se debe a que, en este
caso, el mapa al que se hace referencia está en la misma página que la instrucción IMG.
Podría estar en otra, y en ese caso el símbolo tendría que estar después del nombre de la
página. Por ejemplo: otrapagina.htm#nombre1
Como ya se ha dicho más arriba, hay tres figuras geométricas definibles para las áreas:
rect, circle y poly. El rectángulo ya lo conocemos; consiste en parejas de coordenadas
que indican los vértices superior izquierdo e inferior derecho respectivamente del área.
Para el cículo (circ) son necesarios tres valores: x,y r donde x,y es el par de coordenas
que indican el punto donde está el centro del cículo, y r es el radio del círculo medido
en puntos. Para los polígonos (poly) se necesitan tantas parejas de coordenadas como
vértices tenga el polígono, procurando que la última pareja quede unida a la primera, ya
que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso
de que se quiera emplear todo el gráfico como área de enlace, es decir, un solo link, se
puede emplear default, y no es necesario indicar ninguna coordenada.
Algunos ejemplos de imágenes en listas
Se escriben todas igual, sólo hay que cambiar el nombre de los gráficos:
<DL>
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
</DL>
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
¿Cómo se escriben los formularios?
La base del formulario es el elemento lleno <FORM>, es el que define una zona de la
página como formulario. En una página puede haber varias zonas definidas como
formulario. Dentro de este elemento a su vez se utilizan otros elementos, que son los
que realmente dibujan en pantalla los componentes del formulario, son:
<INPUT>
Campos de entrada por teclado.
Botones de selección.
Casillas de marca.
Botones de proceso.
Botones de inicialización (reset).
Imágenes sensibles al ratón.
<SELECT>
Listas desplegables de valores.
Listas fijas de valores.
<TEXTAREA>
Ventanas de escritura libre.
Este sería el más elemental de los formularios, con sólo un campo y un botón de envío:
Procesar
Analicemos cómo se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar"></FORM>
En la primera línea vemos el elemento de definición de formulario: <FORM>. Va
acompañado de tres atributos: NAME, METHOD y ACTION.
NAME, evidentemente, se refiere al nombre que se le asigne al formulario. No es
obligatorio, pero si el formulario va a ser utilizado en páginas ASP, PHP, o simplemente
en VBScript o JavaScript, se necesitará un nombre, ya que el formulario será
considerado como un objeto.
METHOD se refiere al método que emplearemos para enviar los datos al servidor, y
pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones
de programación basadas en la máxima longitud de registro que puede enviarse; cada
uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que
utilicemos en casi todos los ejemplos. Si el formulario solamente se utiliza para llamar a
otras páginas, se utiliza el método GET, y si se trata de envio de datos POST.
Echale un vistazo a la respuesta del programa test2-cgi de la página anterior. Fíjate en
las variables QUERY_STRING e INPUT. Por la primera llegarán los datos cuando se
utilice METHOD=GET y por la segunda cuando es POST el método elegido.
ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor
http o en local. Con el valor del ejemplo
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" se le está indicando
que ejecute un programa llamado test2-cgi que está en el directorio /cgi-bin del servidor
http miserver.midominio.mipais cuya respuesta será similar a la que hemos visto en la
página de introducción a los formularios.
Además de enviar datos a un servidor, ACTION también puede realizar una acción en
local, por ejemplo traer una página:
Se escribe:
<FORM METHOD="POST" ACTION="indice.htm">
......
</FORM>
En este caso el formulario funcionaría igual que un link, y no es necesario el atributo
NAME.
Otra cosa que puede hacer ACTION, y que además tiene la ventaja de que no sería
preciso diseñar un CGI, es enviar un e-mail (correo electrónico) a un usuario o a una
lista de usuarios. Los datos enviados por el formulario, tendrán la forma que ya
conocemos, pero una vez recibidos por esta vía, pueden ser tratados con programas de
edición de texto, y convertidos al formato que se quiera. Por ejemplo con Word y las
macros de conversión para Word 6.0 y Word 97 que hay en esta guía.
Se escribe:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail">
......
</FORM>
Si no quieres complicarte la vida con descodificaciones (depende de lo que se vaya a
hacer con los datos recibidos), el navegador puede remitirlos con un formato más
sencillo y ya descodificado. Para ello sólo hay que añadir el parámetro ENCTYPE con
el valor TEXT/PLAIN. Se escribe así:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"
ENCTYPE="TEXT/PLAIN">
......
</FORM>
Resumiendo: sin poner ningun parámetro al elemento ACTION los datos te llegarán
así:
CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios
y poniendo ENCTYPE="TEXT/PLAIN" así:
CAMPO1=Esto es una
CAMPO2=demostracion de formularios
Al igual que con el elemento <A> es posible hacer que el asunto (subject) del e-mail se
reciba con el texto que quieras, pero omitiendo la parte correspondiente al cuerpo
(body) del mismo, ya que en este caso el contenido del e-mail son los campos del
formulario:
<FORM METHOD="POST" ACTION=
"mailto:mi-usuario@miservidor-e-mail?&subject=asunto de prueba"
ENCTYPE="TEXT/PLAIN">
......
</FORM>
Esto funcionará siempre que en la máquina del cliente haya instalado algun programa
que permita enviar correo electrónico, si no es así hay que recurrir a un programa CGI o
de otro tipo en el servidor que se encargue de hacerlo.
El elemento INPUT
INPUT sin ningún atributo define por defecto una ventana de escritura de 20 caracteres
de longitud por una línea de ancho:
Se escribe:
<FORM> <INPUT> </FORM>
<INPUT> admite varios atributos:
SIZE define la longitud de la ventana de texto.
MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de
la ventana.
NAME define el nombre de la ventana (que en realidad es un campo dentro del registro,
que en conjunto, es el formulario). Si escribes:
<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>
Como puedes comprobar, sólo se pueden escribir 10 caracteres dentro de la ventana,
que también es de longitud 10. No es obligatorio que concidan ambos valores, puedes
definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o
menor.
VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vacía
como hace por defecto:
HOLA
Se escribe:
<FORM> <INPUT VALUE="HOLA"> </FORM>
El valor puede ser modificado o barrado por el usuario.
READONLY Sirve para que el valor de la ventana, que contiene un valor
predeterminado, no pueda ser modificado por el usuario.
HOLA
Se escribe:
<FORM> <INPUT VALUE="HOLA" READONLY> </FORM>
No funciona en versiones antiguas de los navegadores.
TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.
TYPE=PASSWORD para que el valor predeterminado de la ventana esté en formato
oculto:
****
Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>
TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma
estén en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>
Esta opción se utiliza cuando es necesario enviar un valor fijo al servidor, pero no se
desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un formato
encriptado, viendo el documento fuente se puede saber el valor de la ventana.
TYPE=SUBMIT para generar un botón que al ser pulsado cierra la captura de datos del
formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos.
Procesar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>
VALUE puede acompañar a SUBMIT , y en este caso sirve para definir el texto que
queremos que tenga el botón en su interior. Si se omite, por defecto el visualizador le da
el valor "Submit Query".
Existe otro tipo llamado TYPE=BUTTON que genera un botón igual al generado por el
tipo submit, pero que no realiza ninguna acción; es simplemente un botón "muerto" en
cuanto a acciones directas. Suele utilizarse para asociarle instrucciones en JavaScript
mediante el evento onClick.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="BUTTON" VALUE="No hace nada"></FORM>
TYPE=RESET para generar un botón que al ser pulsado inicializa todos los
componentes del formulario.
Inicializar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="RESET" VALUE="Inicializar"></FORM>
VALUE puede acompañar a RESET , y en este caso sirve para definir el texto que
queremos que tenga el botón en su interior. Si se omite, por defecto el visualizador le da
el valor "Reset".
TYPE=FILE Este es un nuevo tipo que sólo funciona con Netscape 3.0 o superior, y
sirve para enviar un fichero a una máquina remota (hacer FTP), pero no funciona solo,
necesita de ciertos acompañantes que hacen su uso un poco más complicado:
Aquí hay que echar mano de un atributo parametrizado de <FORM>:
ENCTYPE="multipart/form-data" para generar un botón que permitirá buscar un
fichero en nuestra máquina, ponerlo en una ventanita de entrada como las ya conocidas
(por tanto tanbién se puede escribir directamente el nombre del fichero en lugar de
buscarlo) y junto con un botón tipo submit enviar el fichero.
Enviar fichero
Enviar el fichero:
Se escribe:
<FORM enctype="multipart/form-data"
ACTION="ftp://miservidor/" METHOD="POST">
Enviar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>
el botón generado aparece con el texto "Browse.." y no sirve de nada añadirle el
parámetro VALUE para darle otro nombre, como se puede hacer con el botón de tipo
submit.
En este ejemplo se haría una conexión al servicio FTP general de la máquina remota,
pero se puede hacer a un directorio en particular de un usuario concreto. Sólo habría que
cambiar la línea
ACTION="ftp://miservidor/" METHOD="POST">
y escribir:
ACTION="ftp://miusuario@miservidor/" METHOD="POST">
Otra forma más directa de hacer un FTP en las dos direcciones, es desde la ventana
"Location" del visualizador. La sintaxis de los parámetros de ACTION son válidos en
esa ventana.
Por supuesto, todo esto si no tienes cuenta y permiso de escritura en la máquina remota,
no sirve para nada...
Como ya se ha dicho antes, el atributo ACTION es capaz de enviar el contenido del
formulario por correo electrónico, pero no sólo es capaz de enviar el formulario:
también puede adjuntar al e-mail un fichero cualquiera. Lo único que hay que hacer es
añadirle un instrucción como la que acabamos de ver para el FTP. Así:
<FORM enctype="multipart/form-data"
ACTION="mailto:mi-usuario@miservidor-e-mail/" METHOD="POST">
Adjuntar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero"></FORM>
TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al ratón.
Lo que el formulario envía al servidor es un registro cuyos campos son el nombre
definido para la imagen seguido de los parámetros .x=n .y=n donde n son los números
de las coordenas x y del punto en el que estaba el ratón en el momento del envío. Para
presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sería un ejemplo
de respuesta:
imagen.x=99&imagen.y=15
Prueba a pulsar en cualquier parte de esta imagen:
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif">
</FORM>
Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT,
ya que el formulario se cierra con la imagen.
TYPE=RADIO genera botones circulares que permiten seleccionar un valor
predeterminado o activar una opción
Procesar Inicializar
Clase A Clase B
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>
En este ejemplo, los botones permiten seleccionar la clase A, la clase B o ninguna de las
dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo clase B, hay
que añadir el parámetro CHECKED después del valor:
... VALUE="B" CHECKED></form>
TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor
predeterminado o activar una opción
Procesar Inicializar
Clase A Clase B
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>
En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase B,
ninguna, o las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo
clase B, hay que añadir el parámetro CHECKED después del valor:
... VALUE="B" CHECKED></form>
El elemento SELECT
SELECT sin ningún atributo define por defecto una lista desplegable de toda la pantalla
de alto y una columna de ancho:
Se escribe:
<FORM> <SELECT> </SELECT> </FORM>
Como evidentemente esto no es muy práctico, hay que parametrizar el elemento. En
primer lugar se le da nombre, ya que éste es un campo más del formulario, la diferencia
es que no hay que escribir en él sino escoger un valor de los que nos muestre al
desplegarlo, se usará el atributo NAME, y para entrar valores en la lista se usa el
atributo OPTION.
Procesar Inicializar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>
Se deben tener en cuenta varias cosas respecto a SELECT:
La longitud de la ventana de selección se autoajusta al valor más largo de la lista.
La ventana de selección, por defecto, muestra una línea, si se quieren mostrar más se
utilizará el atributo SIZE.
Se debe procurar que los contenidos de los campos sean lo más cortos posibles; una
excesiva longitud implica mayor tráfico por la red, pero se deben construir las listas de
forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud
de los valores. Para enviar un valor diferente del que aparece en la lista, se utiliza el
parámetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente
lista:
Procesar Inicializar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se envía al
servidor es "Valor 5".
Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no hay
ninguno seleccionado, por defecto el visualizador enviará el primer valor de la lista.
Se puede hacer que haya un valor preseleccionado añadiendo el parámetro SELECTED
al atributo OPTION, y si se quiere permitir más de una selección, se pondrá el atributo
MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a
las normas de Windows.
Procesar Inicializar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
El elemento TEXTAREA
Este elemento, como su nombre indica, permite definir un área de texto en la pantalla en
la que podemos escribir cualquier cosa. Se debe escribir ya parametrizada en cuanto a
dimensiones, con los atributos ROWS (líneas) y COLS (COLUMNAS). No tiene otros
atributos o posibles variantes. Por supuesto, para que sea operativo, deberá ir
acompañado de los componentes necesarios para enviar e inicializar.
Procesar Inicializar
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-
bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>
Aunque no es habitual, dentro de un área de texto puede haber un contenido por defecto
(que puede ser borrado o modificado por el usuario). Para ello simplemente se escribirá
el texto entre <TEXTAREA> y </TEXTAREA>. Así:
<>TEXTAREA NAME="texto1" ROWS=5 COLS=40>
Contenido del area de texto
</TEXTAREA>
El tratamiento de los datos recibidos en el servidor desde los formularios requiere
conocer la tabla de conversión hexadecimal que utilizan la mayoría de visualizadores.
Recuerda que las palabras en destino aparecen separadas por el signo +, y las letras
acentuadas y otros caracteres, por valores hexadecimales precedidos del símbolo %
Se puede proceder a la descodificación en el programa CGI que recibe los datos, o bien
definir macros en programas auxiliares que serán ejecutados después.
En el índice encontrarás la tabla de conversiones utilizada con el visualizador Netscape
desde Windows.
Estilos en los formularios
En las últimas versiones de los dos navegadores más utilizados, pueden aplicarse
cambios de estilo a los formularios, lo que permite una presentación más sofisticada.
ATENCION: Hay que tener en cuenta que los estilos no estan estandarizados, y hay
cosas que se ven bien en unos navegadores y no se ven en otros, y hay solo unos pocos
efectos que se vean en todos ellos.
En los elementos de formulario pueden redefinirse casi todos los parámetros: colores de
fondo, tipo y anchura de bordes, color y tipo de letra del texto, altura y anchura del
elemento, alineación del texto dentro del elemento, etc. Por ejemplo:
Solo lectura
Se escribe así:
<FORM METHOD="GET" ACTION="">
<INPUT TYPE="text" STYLE="background:yellow;color:red"
NAME="campo1">
<INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue"
readonly
NAME="campo2" VALUE="Solo lectura">
<INPUT TYPE="button" STYLE="background:transparent;color:red"
VALUE="Procesar">
</FORM>
Problemas de privacidad en los formularios
En las últimas versiones del navegador Internet Explorer de Microsoft, ha aparecido una
nueva prestación consistente en memorizar los datos introducidos en cualquier
formulario de uso habitual. En efecto, muchas veces se utilizan formularios para tareas
repetitivas, en las que casi siempre hay que introducir los mismos datos. Esto nos puede
ahorrar tener que escribir cada vez lo mismo, y Microsoft pensó que sería buena idea
facilitar la labor del usuario haciendo que el navegador guarde en una lista desplegable
todos los datos que se van escribiendo en cada transacción, de manera que cuando se
accede a la página, cada campo de texto (<INPUT TYPE="text">) queda convertido en
una lista desplegable (<SELECT>) cuyo contenido son los datos que se han introducido
en ese mismo campo en ocasiones anteriores.
Visto así suena incluso interesante.... a condición de que el usuario sea siempre el
mismo, claro. Porque, ¿qué ocurre si el formulario está incluido en una página que es
utilizada por numerosas personas en una sala común con máquinas públicas, como una
sala de usuarios o un cibercafé? Pues que si el siguiente usuario se conecta a la misma
página, puede ver los datos que escribió su antecesor en esa máquina.
Para evitarlo, existe un parámetro, poco conocido en general, que debe incluirse en la
definición del formulario, y que no tiene ningún efecto en los navegadores que no tienen
la costumbre de ser tan indiscretos. Así:
<FORM NAME="MI_FORMULARIO" METHOD="POST"
AUTOMPLETE="OFF">
...
...
</FORM>
Orden de tabulación en los formularios
De forma predeterminada, el orden de tabulación es el mismo que el orden en que los
elementos se han escrito. Puede darse el caso de que necesites que el orden de
tabulación de los elementos de un formulario no sea el mismo en el que estan escritos.
Para ello se puede incluir en todos los elementos el parámetro TABINDEX=n donde n
es el número de orden deseado de cada uno. Si se va a alterar el orden natural de
tabulación, conviene hacerlo con todos los elementos del formulario. En cualquier caso,
el navegador hace dos grupos de tabulación, los que tienen el parámetro TABINDEX y
los que no. Seguirá el orden de los valores y a continuación pasará a los que no tengan
numeración, siguiendo el orden de escritura. He aquí un ejemplo de la sintaxis:
<FORM NAME="MI_FORMULARIO" METHOD="POST">
<INPUT TYPE="text" NAME="Campo1" TABINDEX=2>
<INPUT TYPE="text" NAME="Campo2" TABINDEX=1>
</FORM>
En este caso, "Campo2" sería el primero en recibir el cursor. Todo esto sólo funciona
con navegadores de versiones recientes.
Desactivar elementos en los formularios
Con casi todos los navegadores modernos se pueden bloquear los elementos que forman
un formulario, todos o algunos de ellos. Y puede que te preguntes qué interés tiene
bloquear un formulario. Puede ser necesario en aplicaciones dinámicas en las que
interese bloquear partes del formulario según el usuario cumplimente unos opciones u
otras. Para ello se utiliza el parámetro DISABLED. Este parámetro es accesible desde
JavaScript y VBScript. Se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST">
<INPUT TYPE="text" NAME="Campo1" VALUE="Control desactivado"
DISABLED>
<INPUT TYPE="text" NAME="Campo2">
</FORM>
Se puede aplicar a cualquier objeto contenido en el formulario. Este sería el resultado:
Control desac
Como puedes ver, el efecto es parecido al que se consigue con la opción de estilo
readonly, pero con DISABLED se impide incluso el que se pueda seleccionar el
contenido del control (no se produce el evento onFocus) y con readonly no.
Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento implementado
por Netscape, que permite dividir la pantalla en varias áreas independientes unas de
otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. No hay
límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que
la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames
con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la
celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se
dispone de todos los recursos del HTML. Es una zona viva.
Las páginas que contienen una definición de FRAME no pueden contener el elemento
BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del
elemento FRAMESET que es el que define la creación del FRAME. Si esto no se
cumple, el FRAME será ignorado.
Algunos visualizadores no soportan los frames. Para que nuestra página con frames no
resulte opaca a ellos, se utilizará el elemento NOFRAMES que permite ofrecer un texto
alternativo en entorno normal.
Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos
muy complejos, de difícil estructura por los medios convencionales del HTML, son casi
insustituibles. De nuevo se presenta la duda de para qué visualizador es preferible
programar nuestro WWW.
Por supuesto, los frames son parametrizables en cuanto a tamaño y número de áreas, si
éstas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de
scrolling, se pueden anidar, relacionar sus contenidos, etc. Veamos algunos ejemplos
prácticos y su sintaxis:
Un frame básico. Sintaxis general
En general, todas las páginas que contengan definiciones de frames, se comportan como
si fuesen llamadores o "lanzaderas", y deberán ser más o menos así:
<HTML>
<HEAD><TITLE> Mi titulo ></TITLE></HEAD>
<FRAMESET>
<NOFRAMES>
<BODY>
Su visualizador no soporta frames. Pulse
<A HREF="indice.htm">aqui </A> para volver.
</BODY>
</NOFRAMES>
<FRAME SRC="pagina1.htm" >
<FRAME SRC="pagina2.htm" >
</FRAMESET>
</HTML>
Fíjate en que no aparece el elemento <BODY> en su posición habitual, sino dentro de
un elemento especial que se activa sólo cuando el visualizador no soporta los frames:
NOFRAMES. Si no declaras el área NOFRAMES y el visualizador no soporta este
efecto, no se verá nada. Obviamente, los visualizadores que sí soportan frames
ignorarán el contenido del área NOFRAMES.
Hasta aquí ya podemos hacernos una idea de cómo funcionan los frames: Lo primero es
crear una minipágina con la definición del frame, viene a ser algo así como una
"lanzadera" y sólo contiene la definición del frame. Y por último, crear las páginas que
constituirán el contenido de cada una de las áreas definidas en la "lanzadera". En el
ejemplo anterior son pagina1.htm y pagina2.htm, y aquí es donde escribirás tus cosas;
es decir que son páginas completamente normales, y que también pueden ser utilizadas
de la forma habitual. A su vez, la "lanzadera" puede ser invocada con un link desde
cualquier página normal. Como puedes ver, no es obligado crear todo tu documento con
frames: puedes utilizarlos solamente allí donde sea necesario, si quieres.
Es posible definir cualquier combinación de áreas verticales y horizontales. La clave
está en combinar adecuadamente los anidamientos del elemento <FRAMESET> con
sus atributos COLS o ROWS según interese. Como puedes ver, el más importante es el
primer <FRAMESET>, ya que es el que define cómo va a ser "troceada" la página
inicialmente, si en porciones verticales u horizontales, y sobre esta base se deberán
definir todos los demás anidamientos.
Un frame de 3 áreas verticales (COLS)
Se vería así:
Y se escribiría; así:
<FRAMESET COLS=30%,20%,50%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
A B C <FRAME SRC="c.htm">
</FRAMESET>
Ejemplo real
Un frame de 3 áreas horizontales (ROWS)
Se vería así:
Y se escribiría así:
<FRAMESET ROWS=25%,25%,50%>
A <FRAME SRC="a.htm">
<FRAME SRC="b.htm">
B <FRAME SRC="c.htm">
C </FRAMESET>
Ejemplo real
Un frame combinado de un área vertical y dos horizontales
Se vería así:
Y se escribiría así:
<FRAMESET COLS=20%,*>
<FRAME SRC="a.htm">
<FRAMESET ROWS=40%,*>
B <FRAME SRC="b.htm">
A <FRAME SRC="c.htm">
C
</FRAMESET>
</FRAMESET>
Ejemplo real
Un frame combinado de dos áreas horizontales, la de abajo dividida
en dos verticales
Se vería así:
A Y se escribiría así:
<FRAMESET ROWS=50%,*>
B C <FRAME SRC="a.htm">
<FRAMESET COLS=50%,*>
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
</FRAMESET>
Ejemplo real
Habrás podido comprobar que los parámetros que dimensionan los frames actuan al
presentar la página inicialmente. Después, si el usuario lo desea, puede
redimensionarlos como quiera. Esta es la opción por defecto. Si no se quiere permitir el
redimensionado, se aplica el atributo NORESIZE al elemento FRAME. Así:
<FRAME NORESIZE SRC.....>
Algo parecido ocurre con las barras de scrolling. Están regidas por el atributo
SCROLLING, que puede valer YES NO o AUTO. Por defecto es AUTO. Con esta
opción el visualizador decide, en función del contenido, si son necesarias las barras o
no. Con YES las pondrá siempre, aunque no sean necesarias, y con NO no las pondrá
nunca, aunque sean necesarias.
<FRAME SCROLLING=YES ....>
Un frame con dos áreas verticales. Una normal, la otra con
márgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT)
Se vería así:
Y se escribiría así:
<FRAMESET COLS=50%,50%>
<FRAME SRC="a.htm">
AA <FRAME SRC="a.htm"
AAAA MARGINWIDTH=50
AA MARGINHEIGHT=50>
</FRAMESET>
Ejemplo real
Un frame con referencias cruzadas (NAME TARGET)
Se vería así:
Y se escribiría así:
<FRAMESET COLS=50%,50%>
<FRAME SRC="aa.htm">
<FRAME SRC="bb.htm"
A B NAME="VENTANA">
</FRAMESET>
Ejemplo real
Esto de los cruces es un poco complicado... fíjate en el contenido de cada página que
entra en juego. Cuando actives Ejemplo real el fichero llamado es cruzado.htm.
Pruébalo.
Fichero Contenido Acción
<A HREF="cc.htm"
Pone CC en el frame derecho
aa.htm TARGET="VENTANA">
<A HREF="cc.htm"> Trae CC
bb.htm Esto es "VENTANA" No hace nada
<A HREF="bb.htm" Pone BB en el frame derecho
cc.htm TARGET="VENTANA"> porque se llama "VENTANA"
<A HREF="aa.htm"> Trae AA
<FRAMESET> -
<FRAME SRC="aa.htm"> Pone AA en el frame izqdo.
cruzado.htm <FRAME SRC="bb.htm" Pone BB en el frame derecho y le
NAME="VENTANA"> da como nombre "VENTANA"
</FRAMESET> -
Hasta aqui se ha utilizado el nombre de "VENTANA" como destino del atributo
TARGET. Este nombre, como ya sabes, es el que hemos definido en el código de este
ejemplo. Si en lugar de poner el nombre de destino que se ha definido en el
FRAMESET, pones otro cualquiera, el visualizador lo que hace es abrir otra ventana y
colocar alli el contenido de la pagina. Evidentemente, cuantas mas ejecuciones del
navegador haya en marcha, mas memoria del ordenador se necesita, y abrir una nueva
ventana, implica ejecutar otra vez el navegador. Recuerda cuando hagas esto, que
algunos no andan muy sobrados de memoria....
La versión 3.0 de Netscape, implementa dos nuevas posibilidades de los frames: la de
darle color a la barra de separación de los distintos frames o la de que no se vea dicha
barra. Para ello se utilizan los nuevos atributos de FRAMESET y FRAME:
FRAMEBORDER se utiliza como atributo de FRAMESET y establece si serán
visibles los bordes del frame o no. Puede tener dos valores: YES (por defecto) y NO.
Si escribes:
<FRAMESET FRAMEBORDER=NO COLS=30%,30%,30%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Se obtiene un frame de tres columnas sin barras de separación entre ellas.
Ejemplo real
BORDERCOLOR se utiliza como atributo de FRAME y establece el color de los
bordes visibles. Evidentemente, para que funcione, se tendrá que haber establecido
FRAMEBORDER=yes
Si escribes:
<FRAMESET COLS=30%,30%,30%>
<FRAME BORDERCOLOR="red" SRC="a.htm">
<FRAME BORDERCOLOR="blue"SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Se obtiene un frame de tres columnas con la primera barra de separación roja y la
segunda azul. Ejemplo real
Salir de una pantalla con frames
Para salir de una pantalla compuesta de frames es necesario definir algun link. En
efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado
desde cualquiera de ellos, hace que la página llamada aparezca en ese mismo frame.
Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis
siguiente:
<A HREF="indice.htm" TARGET="_parent">Ver índice sin marcos </A>
El destino "_parent" indica que presente la página llamada por el link en el navegador
que se esta ejecutando, sin marcos y sin abrir nuevas ocurrencias del navegador.
Existen otros valores predeterminados para el atributo TARGET: _blank que abre una
nueva ventana del navegador, _self que llama el destino del enlace a la misma ventana
en que se está (valor por defecto), y _top que funciona igual que _parent.
Controlar el contenido de los frames con formularios
Hasta aquí hemos visto cómo hacer que los frames reciban sus contenidos siempre
mediante links. No es la única forma; también pueden utilizarse formularios para esta
tarea. Los formularios, además, nos pueden permitir definir ciertas selecciones previas
para que el contenido invocado reuna determinados requisitos, así como elegir el frame
de destino. Lo malo de esta técnica es que requiere escribir algo de JavaScript, lo que
complica bastante la cosa. Veamos un ejemplo de página con cuatro frames. Por
ejemplo, como este:
Y se escribiría así:
<FRAMESET ROWS=30%,*>
<FRAME SRC="fraarriba.htm"
NAME="arriba">
<FRAMESET COLS=33%,33%,*>
<FRAME SRC="a.htm"
Arriba NAME="izquierda">
<FRAME SRC="b.htm"
A B C NAME="centro">
<FRAME SRC="c.htm"
NAME="derecha">
</FRAMESET>
</FRAMESET>
Ejemplo real
Puesto que se va a poder elegir el frame de destino, es importante que todos ellos tengan
nombre. Este es el código del frame arriba, que reside en la página que carga:
fraarriba.htm
<HTML>
<HEAD><TITLE>Frames y formularios</TITLE></HEAD>
<BODY>
<CENTER><H2>FRAMES Y FORMULARIOS</H2></CENTER>
<TABLE BORDER=0 WIDTH="100%"><TR>
<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame izquierdo" onClick=
"parent.izquierda.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD>
<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame central" onClick=
"parent.centro.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD>
<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame derecho" onClick=
"parent.derecha.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Como puedes ver, todo reside en el código JavaScript que se ejecuta al pulsar el botón
de cualquiera de los tres formularios definidos en el frame arriba. Mediante este código
se captura un evento: onClick que se produce al pulsar con el puntero del ratón en el
botón del formulario. La primera parte de la instrucción ejecutada:
parent.derecha.location.href= es la que establece en qué frame se va a cargar la página
seleccionada en la lista desplegable, en este caso el llamado derecha. La segunda parte
de la instrucción: this.form.list.options[this.form.list.selectedIndex].value es la que
indica qué página hay que cargar en el frame definido en la primera parte de la
instrucción. Si... esto suena a muy complicado. No es fácil entender la compleja
estructura de objetos del navegador. Para más detalle, puedes ver la sección sobre
JavaScript, en particular, y toda la sección de programación en general, de esta guia.
Otra cosa que hay que tener en cuenta cuando se escribe JavaScript, es que distingue
entre mayúsculas y minúsculas. En el ejemplo anterior, si los ficheros llamados por el
formulario: a.htm b.htm c.htm se han guardado con el nombre en mayúsculas, como
A.htm o B.htm, no funcionará si no se invocan escritos de la misma forma. Esto es
especialmente importante cuando tengas tus páginas en servidores con sistemas
operativos UNIX o LINUX, que son la mayoría de ellos.
Frames incrustados
Se puede insertar un frame en cualquier punto de una página, ya sea ésta, a su vez, un
frame o una página normal. Su apariencia recuerda a los gráficos y a los formularios,
pero su contenido es el de una página independiente. Por ejemplo, si se escribe:
<IFRAME NAME="indice" SRC="indice.htm" WIDTH="300" HEIGHT="100" FRAMEBORDER="1"
MARGINWIDTH="5" MARGINHEIGHT="5" SCROLLING="Auto"></IFRAME>
Y este sería el resultado:
Analicemos sus atributos:
NAME Como ya habrás supuesto, es el nombre del frame incrustado. Puede
omitirse si no es necesario.
SRC Nombre de la página que se mostrará en el frame.
WIDTH Número de pixels que tendrá el frame de ancho. También puede
indicarse en tanto por ciento respecto al ancho total de la ventana, como se hace
en los frames convencionales.
HEIGHT Número de pixels que tendrá el frame de alto. También puede
indicarse en tanto por ciento respecto al alto total de la ventana.
FRAMEBORDER Indica si se debe mostrar el borde del frame. 1 = si (por
defecto) 0 = no.
MARGINWIDTH Indica el número de pixels que tendrá el ancho de los
márgenes interiores izquierdo y derecho del frame respecto a su contenido.
MARGINHEIGHT Indica el número de pixels que tendrá el ancho de los
márgenes interiores superior e inferior del frame respecto a su contenido.
SCROLLING Indica si hay que mostrar barras de scroll dentro del frame
incrustado. Sus valores pueden ser: Yes, No y Auto (por defecto).
Como es normal el HTML, como cualquier otro lenguaje, no está terminado ni lo estará
nunca. Día a día se le van implementando nuevas utilidades que le hacen, si cabe, más
atractivo y práctico. Hay que distinguir entre lo que son elementos "oficiales" del
lenguaje, y las implementaciones que los creadores de cada visualizador le van
añadiendo a sus respectivos programas. Buena muestra de ello son los CGI y los
applets, plug-ins y JavaScripts de Netscape y los ActiveX de Microsoft.
No hay que confundir los applets con los plug-ins o los CGI. En la versión 2.0,
Netscape introdujo extensiones al lenguaje HTML para permitir incorporar un programa
escrito en Java a un documento HTML, del mismo modo que se puede insertar, por
ejemplo, una imagen. A estos programas, se les denomina "applets". Son programas
diseñados para un fin concreto dentro de la página, como producir una animación o
filtrar la entrada de información en un formulario. Los JavaScripts no son applets, no
tienen la entidad de auténticos programas, y sus acciones son más limitadas. En
realidad, y aunque aún no forma parte del HTML oficial, podría considerarse el java
interpretado, como una extensión del HTML, igual que las tablas, o cualquier otro
elemento, aunque un poco más complejo, al tratarse de un lenguaje basado en objetos y
muy parecido al lenguaje C.
Los plug-ins, en cambio, son módulos de software (programas) que se ensamblan con el
visualizador, añadiéndole nuevas prestaciones o habilidades, que le permitirán
descodificar nuevos formatos para los que no estaba preparado originalmente, como el
VRML, para la navegación en mundos 3D, el LiveAudio, para escuchar sonidos a través
de Internet, o el LiveVideo para ver ficheros de vídeo digital. De esto se deduce, que si
no se le han instalado los plug-ins necesarios a nuestro visualizador, al intentar leer una
página con, por ejemplo, un fichero de vídeo, lo que éste hará es pedirnos el nombre de
un programa auxiliar para que sea él quien gestione ese fichero en lugar de procesarlo
por sí mismo.
Todo esto, es respecto a Netscape. Microsoft llegó tarde, pero por supuesto, tiene algo
parecido: el Active X. Esto no es más que un pequeño módulo capaz de hacer de enlace
entre el Internet Explorer (el visualizador de Microsoft) y paquetes de desarrollo como
MS Visual Basic, MS Visual J++ o aplicaciones de uso común como MS Excel, o con
recursos del sistema. El problema es que sólo puede utilizarse en entornos Microsoft, lo
que le resta la portabilidad intersistemas que tiene Java.
Te habrás dado cuenta, de que todo lo dicho es referido siempre al propio visualizador,
es decir que se trata de acciones realizadas en local, en tu propia máquina, y por tanto
no es necesario estar conectado a una red. Los programas CGI se ejecutan en el
servidor, es decir en remoto, y sí es necesario estar conectado a la red. Constituyen una
solución más fiable que las anteriores, ya que las máquinas donde residen los
servidores, suelen ser mucho más potentes que los PC's clientes, y con más recursos
siempre disponibles, lo que permite realizar cualquier diseño por complicado que sea,
sin obligar a quien se conecta a tener un ordenador caro, pero su eficacia depende
absolutamente de la velocidad de la red, que a veces es desesperante... Aunque se
mencionan aquí a efectos de comparación, los CGI no son nuevos, ya que aparecieron
en las primeras versiones oficiales del HTML.
A medida que vayan apareciendo, se recogerán en esta guía las innovaciones más
notables, aunque sólo la parte que sea estrictamente HTML, es decir, lo que hay que
saber para incorporar los nuevos inventos a tus páginas, pero no cómo se hacen esos
inventos. Por ejemplo, veremos cómo embeber un script interpretado de JavaScript en
una página HTML, pero no cómo se programa en JavaScript (por lo menos de
momento).
Páginas con sonido
Netscape implementa en la versión 3.0 los sonidos, que junto con el vídeo, son sin duda
dos de los efectos más atractivos del HTML. Pueden utilizarse indistintamente ficheros
de sonido con los formatos WAV, AIFF, AU, MIDI o el nuevo MP3. Las instrucciones
para reproducir vídeos son prácticamente las mismas.
La apariencia de las consolas reproductoras de multimedia que verás a continuación son
propias de Netscape, y es necesario cargar un plug-in, que es una pequeña herramienta
que se instala para que el navegador pueda reproducir determinados tipos de ficheros, a
fin de que funcione el código que se describe. Es decir, que todo esto funciona bien sólo
con Netscape y el plug-in correspondiente. Si el cliente tiene otro navegador, por
ejemplo el IE de Microsoft, la apariencia de la consola multimedia es diferente, y
algunas prestaciones no funcionan, por lo que es conveniente hacer pruebas con ambos
navegadores y comprobar que nuestro código funciona correctamente con los dos.
Si prefieres, aunque tenga menos prestaciones, utilizar el Media Player de Windows,
puedes verlo aquí, pero recuerda que el Media Player sólo está presente en los sistemas
Windows, lo que significa que los clientes que tengan sistemas Macintosh, UNIX o
cualquier otro, no les funcionará nada de esto.
Multimedia con el navegador Netscape
Se utiliza el elemento <EMBED> junto a un buen número de tributos: SRC,
AUTOSTART, LOOP, STARTTIME, ENDTIME, VOLUME, WIDTH, HEIGHT,
ALIGN, CONTROLS y HIDDEN.
Veamos para qué sirve cada uno:
SRC Indica dónde está el fichero de sonido, pero no puede utilizarse solo, necesita la
compañía de otros atributos del elemento, concretamente los que definen el tamaño de
la consola (que es un icono parecido al teclado que tiene un casette pequeño):
<WIDTH> (largo) y <HEIGHT> (alto) Por ejemplo:
<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70>
Hará aparecer una consola como esta:
En caso de omitir los atributos WIDTH y HEIGHT, los tamaños por defecto no
permiten ver la consola entera, y no es posible activar el sonido. Los tamaños máximos
son WIDTH=160 y HEIGHT=70; no sirve de nada aumentarlos y si se disminuyen, la
imagen se recorta de derecha a izquierda y de abajo a arriba, pero no
proporcionalmente. Como puedes ver, la consola incluye un control de sonido, que por
defecto se situa en el 50%. Este valor puede modificarse con el atributo VOLUME y
puede oscilar entre 0 y 100. La consola también permite cambiar el volumen
manualmente.
NOTA: Esta imagen de la consola es la que aparece con Netscape. El IE de Microsoft
utiliza el Media Player como reproductor de multimedia, ya que forma parte del
sistema, al igual que el propio navegador. Si no te aparece la consola, normalmente es
debido a que tu navegador no conoce la extensión de fichero que estás intentando
utilizar, por ejemplo .mid o .mp3, y te aparecerá un mensaje solicitando un PlugIn.
Puedes hacer dos cosas: cargar el PlugIn solicitado o configurar correctamente los
"mime type" del navegador. Esto último es lo más rápido para tipos de fichero
normales, pero si se trata de ficheros de formato poco habitual, no habrá más remedio
que instalar el PlugIn.
Es posible cambiar el aspecto de la consola con el atributo CONTROLS que puede
tener varios valores: CONSOLE (por defecto) o SMALLCONSOLE. Si escribes
<EMBED SRC="mozart.mid" WIDTH=144 HEIGHT=15 CONTROLS=SMALLCONSOLE>
Aparece una consola como esta:
Con SMALLCONSOLE los tamaños por defecto sólo dejan ver los botones de START
Y STOP, desapareciendo el control de volumen. Los tamaños máximos son
WIDTH=144 y HEIGHT=15, y al igual que antes, no sirve de nada aumentarlos. Si el
navegador es el IE estas medidas deberán cambiarse.
Los otros valores de CONTROLS son: PLAYBUTTON, PAUSEBUTTON,
STOPBUTTON y VOLUMELEVER. Aunque en inglés, es fácil deducir lo que hace
cada uno, y sus tamaños máximos son WIDTH=37 x HEIGHT=22. Sólo es posible
utilizar un valor por cada elemento EMBED, si pones más de uno sólo hace efecto el
primero. Si se quiere usar más de un botón, por ejemplo el de start y el stop en distintos
lugares de la página, pero actuando sobre el mismo fichero de sonido, usaremos el
atributo MASTERSOUND en combinación con NAME. Si escribes:
<EMBED SRC="mozart.mid" WIDTH=37 HEIGHT=22 CONTROLS=PLAYBUTTON
NAME="misonido" MASTERSOUND>
<EMBED SRC="mozart.mid" WIDTH=37 HEIGHT=22 CONTROLS=STOPBUTTON
NAME="misonido">
Se obtiene:
Lo que se ha hecho en el primer elemento EMBED, mediante el atributo NAME, es
darle nombre a un grupo de botones (misonido) y designarlo como "maestro", con el
atributo MASTERSOUND, de todos los siguientes elementos EMBED que se definan
con el mismo nombre (misonido). De esta manera, es posible controlar un sonido
repartiendo los botones de la consola de la forma más conveniente. Se puede definir en
la misma página más de un grupo de sonidos, sólo hay que procurar no liarse con los
nombres.
Otro atributo de EMBED es AUTOSTART con dos posibles valores: FALSE (por
defecto) y TRUE, y como ya habrás deducido, TRUE hace que suene inmediatamente
después de cargar la página, y sin necesidad de pulsar el botón "start" de la consola. Por
ejemplo:
<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 AUTOSTART=TRUE>
El siguiente atributo a analizar es HIDDEN que sólo tiene un valor: TRUE, y hace
invisible la consola, pero evidentemente, si es invisible no puedes activar el sonido, y
por tanto lo hace él mismo, siempre que no hayas puesto AUTOSTART=FALSE, claro.
Por ejemplo:
<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 HIDDEN=TRUE>
Un atributo de repetición no podía faltar, y lo tenemos en LOOP y sus tres posibles
valores: FALSE (por defecto), TRUE que fuerza a la repetición sin fin de la audición, e
INTEGER donde INTEGER es el número de veces que deseas que se repita la
audición. Por ejemplo:
<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 LOOP=2>
No es obligado comenzar una audición por el principio del fichero. Imagínate que tienes
un fichero con instrucciones habladas, y quieres dar la oportuna en cada momento, no
todas de golpe. Para esto tenemos los atributos STARTTIME=mm:ss y
ENDTIME=mm:ss donde mm son los minutos y ss los segundos del punto de
comienzo o fin de la audición. Cuidado: los valores hay que darlos con dos dígitos: Por
ejemplo:
<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 STARTTIME=01:10
ENDTIME=02:00>
Este atributo funciona sólo con Windows 95 o Macintosh.
Por último tenemos el atributo ALIGN y sus valores TOP, BOTTOM, CENTER,
LEFT, RIGHT, MIDDLE y TEXTTOP que funcionan igual que sus respectivos del
elemento IMG, es decir, que no tiene efectos sobre el sonido, sino sobre la imagen de la
consola y su alineación con el texto de la página.
Un truco..
Si en una página pones dos o más ficheros .mid, sólo se oye el último que sea activado.
La secuencia es: se carga el primero, arranca y se oirá durante el tiempo que tarde en
cargarse el segundo, y en cuanto arranca el segundo, el primero pasa a la posición de
"stop". Si los ficheros son .wav ocurre lo mismo, pero ¿que pasa si pones un .mid y un
.wav? Pues que cada uno de ellos utiliza controladores de recursos de sistema
diferentes, y por tanto se pueden oir los dos a la vez. Imagínate tu voz explicando algo,
y una suave música de fondo... Como en los más sofisticados documentales. Eso sí,
necesitas Windows 95.
Un aviso:
Las páginas que incluyen sonidos pueden dar problemas a la hora de imprimirlos,
llegando incluso a colgar la máquina.
Y un problema:
Como es lógico no podemos saber que navegador tiene quien visite nuestra página...
entonces, cómo montamos esto?
Páginas con vídeo
Netscape implementa en la versión 3.0 el vídeo. En principio, puede utilizarse cualquier
formato de vídeo, aunque los más habituales suelen ser los AVI y los MPEG, pero
dentro de éstos, existen muchas versiones diferentes. El que se puedan ver o no,
dependerá de que el formato utilizado sea compatible con nuestro reproductor
multimedia. Siempre que se incluyan ficheros de vídeo, es buena idea acompañarlo de
los "codecs" necesarios para el reproductor. Los "codecs" son unos controladores que se
instalan en tu máquina y permiten que tu reproductor multimedia pueda decodificar
correctamente los distintos formatos de vídeo que existen, y que son muchos. Suelen ser
imprescindibles sobre todo para los formatos AVI, aunque también pueden ser
necesarios para algunos formatos MPEG, como el MPEG3, MPEG4 y otros.
El que un formato de vídeo se vea en tu máquina sin problemas, no significa que ocurra
lo mismo en cualquier máquina, incluso con formatos de los más habituales. La gente
suele tener sus máquinas con mucha "basura", y es posible que algun programa (sobre
todo juegos o enciclopedias) haya eliminado o cambiado algunos decodificadores por
otros. Los formatos pueden cambiar según la cámara o la placa de vídeo con que han
sido generados los ficheros. Cada fabricante suele proporcionar los "codecs" para sus
productos.
Otro problema de los ficheros digitales de vídeo es el gran tamaño de los mismos, ya
que en la práctica unos pocos segundos de vídeo con sonido puede representar un
fichero de varios Mb. (mega bytes). Se deben poner muestras de pequeño tamaño para
que el visitante de nuestra página pueda probar rápidamente si le interesa el fichero o
no, y al lado la versión completa indicando su tamaño y el "codec" que debe utilizarse.
Al igual que con el sonido, se utiliza el elemento EMBED, aunque con menos atributos:
SRC, HEIGHT, WIDTH, AUTOSTART, LOOP y ALIGN; todos ellos funcionan de
forma parecida a los del sonido.
En este ejemplo se utilizan casi todos:
<EMBED SRC="colon.avi" HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSE>
Analicémoslos brevemente:
SRC Indica dónde está el fichero de vídeo. HEIGHT (alto) y WIDTH (ancho) no
pueden omitirse, ya que sus valores por defecto no permiten ver ninguna imagen real.
Los tamaños standard de los ficheros .AVI son 90x120, 120x160, 180x240, 240x320,
300x400, etc., las medidas deben conservar las proporciones de la televisión, es decir
4:3. Hay que tener cuidado a la hora de poner el valor de estos atributos, ya que si no
coinciden con los que realmente tiene la imagen, ésta será recortada (no
redimensionada) de derecha a izquierda y de abajo a arriba.
El siguiente atributo es AUTOSTART, con dos valores posibles: FALSE (por defecto)
y TRUE que como puedes suponer, sirve para que el vídeo arranque nada más cargarse
el fichero. Si estableces FALSE, entonces el vídeo se activa al hacer click con el ratón
sobre él, lo mismo que para repetir el pase una vez finalizado.
Para hacer que el vídeo se repita contínuamente o se pare después de un pase, tenemos
el atributo LOOP con dos valores: FALSE (por defecto) y TRUE.
Por último tenemos el atributo ALIGN y sus valores TOP, BOTTOM, CENTER,
LEFT, RIGHT, MIDDLE y TEXTTOP que funcionan igual que sus respectivos del
elemento IMG, es decir, que no tiene efectos sobre el vídeo, sino sobre su alineación
con el texto de la página.
Páginas multimedia
Multimedia con el Media Player de Windows
Se utiliza también el elemento <EMBED> y sus atributos son: TYPE, SRC,
AUTOSTART, LOOP, SHOWCONTROLS, SHOWSTATUSBAR,
CLICKTOPLAY, VOLUME, WIDTH, HEIGHT, HIDDEN. Todas las instrucciones
son válidas tanto para ficheros de sonido como para los de video o video con sonido. Si
algun tipo de fichero no es reconocido por el media player, se puede instalar el "codec"
adecuado.
Veamos para qué sirve cada uno:
TYPE efectua la llamada al Media Player. <EMBED TYPE="application/x-
mplayer2" >
SRC Indica dónde está el fichero multimedia, pero no puede utilizarse solo, necesita la
compañía de otros atributos del elemento, concretamente los que definen el tamaño de
la consola: <WIDTH> (largo) y <HEIGHT> (alto) Por ejemplo:
<EMBED TYPE="application/x-mplayer2"
SRC="minueto.mid"
WIDTH=287
HEIGHT=65>
Hará aparecer el Media Player:
En caso de omitir los atributos WIDTH y HEIGHT, los tamaños por defecto no
permiten ver el reproductor multimedia entero.
Otro atributo de EMBED es AUTOSTART con dos posibles valores: 1 (por defecto) y
0, y como ya habrás deducido, 1 hace que suene inmediatamente después de cargar la
página, y sin necesidad de pulsar el botón "start" de la consola. Por ejemplo:
<EMBED TYPE="application/x-mplayer2"
SRC="minueto.mid"
WIDTH=287
HEIGHT=65
AUTOSRART=0>
El siguiente atributo a analizar es HIDDEN que sólo tiene un valor: TRUE, y hace
invisible la consola, pero evidentemente, si es invisible no puedes activarla, y por tanto
lo hace él mismo, siempre que no hayas puesto AUTOSTART=0, claro. Por ejemplo:
<EMBED TYPE="application/x-mplayer2"
SRC="minueto.mid"
WIDTH=287
HEIGHT=65
AUTOSRART=1
HIDDEN=TRUE>
También disponemos de estos otros atributos:
SHOWCONTROLS que puede valer 1 (por defecto) o 0, y sirve para que la consola
muestre los botones de control, como start, pause stop, etc.
SHOWSTATUSBAR puede valer 0 (por defecto) o 1 para hacer que aparezca la barra
de estado.
CLICKTOPLAY con valores 1 (por defecto) o 0 que permiten iniciar o parar la
ejecución del fichero multimedia pulsando con el puntero del ratón en la consola, en
lugar de en los botones de la barra de controles. Fíjate que esto funciona pulsando en el
interior de la ventana superior del Media Player, no en la barra de controles.
VOLUME Para definir el volumen de sonido que habrá al cargar el fichero multimedia.
Contra lo que cabría esperar el valor 0 establece el máximo volumen y cualquier valor
mayor que 0 establece volumen medio. Hay además un atributo que no es propiamente
del elemento <EMBED>: ALIGN= y sus valores TOP, BOTTOM, CENTER, LEFT,
RIGHT, MIDDLE y TEXTTOP que funcionan igual que sus respectivos del elemento
IMG, es decir, que no tiene efectos sobre el sonido o la imagen, sino sobre la figura de
la consola y su alineación con el texto de la página. He aquí un ejemplo con todos ellos
excepto HIDDEN:
<EMBED TYPE="application/x-mplayer2"
SRC="colon.avi"
WIDTH=350
HEIGHT=300
AUTOSTART=0
SHOWCONTROLS=1
SHOWSTATUSBAR=1
CLICKTOPLAY=1
VOLUME=0
ALIGN=TOP>
Hasta aquí hemos visto como presentar un fichero multimedia, pero solo uno. En efecto,
¿qué hacer si tenemos un fichero de gran tamaño troceado en varias partes? O
simplemente, varios ficheros relacionados aunque no formen parte de uno solo. Si el
número de partes es relativamente elevado, puede ser muy cargante presentarlos todos
de la forma que ya conocemos, y lo que es peor, puede suceder que el navegador se
cuelgue.
Existe una forma de acceder a una lista de ficheros multimedia utilizando el Media
Player. Es decir, que escribiendo solamente un elemento <EMBED> se puede ver o
escuchar una serie de ficheros. Así:
<EMBED TYPE="application/x-mplayer2"
SRC="lista.asx"
AUTOSTART=0
WIDTH=287
HEIGHT=65>
Como puedes ver, la sitaxis es la misma de siempre. La particularidad reside en la
extensión del fichero multimedia. No, no es un nuevo tipo de video super comprimido,
es simplemente un fichero de texto, editado con cualquier editor, como el bloc de notas,
que contiene la referencia a los ficheros que se desea encadenar. Por ejemplo, para
encadenar dos de los ficheros multimedia que se han utilizado hasta ahora como
ejemplos, el fichero .ASX necesario se escribe:
Fichero lista.asx
<ASX version = "3.0">
<ENTRY><REF HREF="minueto.mid"/></ENTRY>
<ENTRY><REF HREF="adagio.mid"/></ENTRY>
</ASX>
ATENCION: Todas las líneas de los ficheros .asx deben comenzar justo junto al margen
izquierdo, sin ningun espacio en blanco.
Gráficos animados
Una nueva propiedad de algunos visualizadores es la posibilidad de presentar gráficos
con animación. No hay que confundir los gráficos animados en formato GIF con los
"movies" o vídeos en formato MPG que no son tratados directamente por el
visualizador, sino por una herramienta auxiliar que hay que definirle.
Los visualizadores suelen presentar correctamente los formatos GIF y JPG. Netscape ha
implementado la posibilidad de mostrar un tipo de gráfico tipo GIF que incluye en su
interior una secuencia, que junto con instrucciones de repetición (loop), espera (wait) y
controles de cabecera permiten reproducir una animación. La diferencia de tamaño entre
un GIF animado y un MPG es considerable. Evidentemente, las animaciones GIF tinen
peor resolución que las MPG, y sólo están pensadas para fines sencillos.
La forma de incluir una imagen animada en el documento es la misma que una imagen
fija. No se requiere ningun tipo de programa ni script, todo está definido en la propia
imagen. Existen en la red en forma de shareware programas para hacer ficheros de
imágenes animadas. Su construcción es muy sencilla: sólo necesitas tener la serie de
imágenes que quieres animar e ir ensamblándolas con algún programa al efecto, definir
el tiempo entre imagen, el ciclo de repetición... y listo.
Los visualizadores que no soportan este efecto, lo que hacen es presentar solamente la
primera o la última de las imágenes de la secuencia. Hay que tener esto presente, y no
comenzar o terminar las secuencias con, por ejemplo, una imagen vacía.
Aquí tienes dos ejemplos sencillos de GIF animado:
Una bola que corre.
Una carta que se mete en un sobre.
También podría gustarte
- Programacion Web (HTML y CSS) - Modulo IAún no hay calificacionesProgramacion Web (HTML y CSS) - Modulo I24 páginas
- Paso 4 - Adecuando en El Entorno de Trabajo Linux - Julieth BurgosAún no hay calificacionesPaso 4 - Adecuando en El Entorno de Trabajo Linux - Julieth Burgos16 páginas
- Creación de Páginas Web EstáticasAún no hay calificacionesCreación de Páginas Web Estáticas9 páginas
- Tema 2 - Lenguajes de Etiquetado (Aweb)Aún no hay calificacionesTema 2 - Lenguajes de Etiquetado (Aweb)79 páginas
- Anexo1 - HTML-Conceptos y Etiquetas BásicasAún no hay calificacionesAnexo1 - HTML-Conceptos y Etiquetas Básicas50 páginas
- Anexo1_HTML-Conceptos y Etiquetas BásicasAún no hay calificacionesAnexo1_HTML-Conceptos y Etiquetas Básicas50 páginas
- Manual de HTML SNPP DISEÑO WEB (1)Aún no hay calificacionesManual de HTML SNPP DISEÑO WEB (1)23 páginas
- Conceptos Básicos de HTML - Manual de HTML y CSSAún no hay calificacionesConceptos Básicos de HTML - Manual de HTML y CSS28 páginas
- Tema #1 Introducion Al Lelenguaje HTMLAún no hay calificacionesTema #1 Introducion Al Lelenguaje HTML6 páginas
- Iit Guia de Trabajo Computacion 3ro Basico 2024 - 9nzlo9qqAún no hay calificacionesIit Guia de Trabajo Computacion 3ro Basico 2024 - 9nzlo9qq2 páginas
- 1-M1-CW-Construcción de Páginas Web OkAún no hay calificaciones1-M1-CW-Construcción de Páginas Web Ok30 páginas
- Curso de Desarrollo Web - Nivel Básico.Aún no hay calificacionesCurso de Desarrollo Web - Nivel Básico.63 páginas
- Lenguaje de Marca de Hipertexto HTMLAún no hay calificacionesLenguaje de Marca de Hipertexto HTML10 páginas
- Conceptos Introductorios: Páginas WebAún no hay calificacionesConceptos Introductorios: Páginas Web7 páginas
- U2 Etiquetas Basicas Atributos HTMLAún no hay calificacionesU2 Etiquetas Basicas Atributos HTML14 páginas
- Elementos Basicos de HTML y CSS, Herramientas para EpubsDe EverandElementos Basicos de HTML y CSS, Herramientas para EpubsAún no hay calificaciones
- Examen Final de Estructura de DatosAún no hay calificacionesExamen Final de Estructura de Datos3 páginas
- Photoshop CS Barras de HerramientasAún no hay calificacionesPhotoshop CS Barras de Herramientas4 páginas
- Silabo Actividad Física y Deporte II - 2022 - IIAún no hay calificacionesSilabo Actividad Física y Deporte II - 2022 - II11 páginas
- Trello Conclusiónes Actualizado Por Johanna RojasAún no hay calificacionesTrello Conclusiónes Actualizado Por Johanna Rojas4 páginas
- Cómo Sincronizar Un Blog de WordPress Local y Remoto Mediante El Control de VersionesAún no hay calificacionesCómo Sincronizar Un Blog de WordPress Local y Remoto Mediante El Control de Versiones9 páginas
- Fallas Comunes de La Hp2600n y Manuales de Recarga Ingenioysoluciones100% (1)Fallas Comunes de La Hp2600n y Manuales de Recarga Ingenioysoluciones77 páginas
- The Relational Model For Database Management Version 2 by E. F. Codd (Z-Lib - Org) - Split1.en - EsAún no hay calificacionesThe Relational Model For Database Management Version 2 by E. F. Codd (Z-Lib - Org) - Split1.en - Es14 páginas
- Presentacion de Datos: Prof. Guarionex Gómez Asignatura: EST-111Aún no hay calificacionesPresentacion de Datos: Prof. Guarionex Gómez Asignatura: EST-1118 páginas
