Nota. El atributo border también define el comportamiento de los bordes de los
elementos OBJECT e IMG, pero toma valores diferentes para esos elementos.
11.3.2 Alineación horizontal y vertical
Los siguientes atributos pueden especificarse para diferentes elementos de una
tabla (véanse sus definiciones).
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Definiciones de atributos
align = left|center|right|justify|char [CI]
Este atributo especifica la alineación de los datos y la justificación del
texto de una celda. Valores posibles:
- left: Datos a la izquierda/Texto justificado a la izquierda.
- center: Datos centrados/Texto con justificación centrada. Este es el valor
por defecto para los encabezados de las tablas.
- right: Datos a la derecha/Texto justificado a la derecha.
- justify: Texto doblemente justificado.
- char: Alinear el texto alrededor de un carácter específico. Si un agente
de usuario no soporta alineación alrededor de un carácter, el
comportamiento en presencia de este valor queda sin especificar.
valign = top|middle|bottom|baseline [CI]
Este atributo especifica la posición vertical de los datos dentro de una
celda. Valores posibles:
- top: Los datos de la celda se alinean con la parte superior de la celda.
- middle: Los datos de la celda se centran verticalmente dentro de la celda.
Este es el valor por defecto.
- bottom: Los datos de la celda se alinean con la parte inferior de la
celda.
- baseline: Todas las celdas que estén en la misma fila que una celda cuyo
atributo valign tenga este valor deberían tener sus datos textuales
posicionados de tal modo que la primera línea de texto aparezca en una
línea de base común para todas las celdas de la fila. Esta restricción no
se aplica a las líneas subsiguientes de texto de estas celdas.
char = carácter [CN]
Este atributo especifica que un carácter individual dentro de un fragmento de
texto actúe como eje de alineación. El valor por defecto para este atributo
es el carácter de punto decimal para el idioma actual, definido por el
atributo lang (p.ej., el punto (".") en inglés y la coma (",") en francés).
Los agentes de usuario no necesitan soportar este atributo.
charoff = longitud [CN]
Si está presente, este atributo especifica la distancia (offset) entre el
borde y la primera aparición del carácter de alineación en cada línea. Si una
línea no incluye el carácter de alineación, debería ser desplazada
horizontalmente hasta la posición de alineación.
Cuando se usa charoff para establecer el offset de un carácter de alineación,
la dirección del desplazamiento está determinada por la dirección actual del
texto (establecida con el atributo dir). En texto de izquierda a derecha (el
valor por defecto), el desplazamiento es desde el margen izquierdo. En textos
de derecha a izquierda, el desplazamiento es desde el margen derecho. Los
agentes de usuario no necesitan soportar este atributo.
La tabla de este ejemplo alinea una fila de valores monetarios alrededor de un
punto decimal. Hemos establecido explícitamente el carácter de alineación "."
Verdura Precio por kilo
Lechuga $1
Zanahorias $10.50
Nabos $100.30
La tabla formateada puede parecerse a la siguiente:
-------------------------------
| Verdura |Precio por kilo|
|-------------|---------------|
|Lechuga | $1 |
|-------------|---------------|
|Zanahorias | $10.50|
|-------------|---------------|
|Nabos | $100.30|
-------------------------------
Cuando los contenidos de una celda contienen más de una aparición del carácter
de alineación especificado por char y los contenidos no caben en una sola línea,
el comportamiento del agente de usuario queda sin especificar. Los autores
deberían por lo tanto tener cuidado cuando usen char.
Nota. Los agentes de usuario visuales suelen representar los elementos TH
horizontal y verticalmente centrados dentro de la celda y con una fuente en
negrita.
Herencia de las especificaciones de alineación
La alineación de los contenidos de una celda puede especificarse
independientemente para cada celda, o heredarse de los elementos que la
contienen, como una fila, una columna, o la propia tabla.
El orden de precedencia (de más alta a más baja) de los atributos align, char y
charoff es el siguiente:
1. Un atributo de alineación establecido en un elemento dentro de los datos de
la celda (p.ej., P).
2. Un atributo de alineación establecido en una celda (TH y TD).
3. Un atributo de alineación establecido en un elemento de grupo de columnas
(COL y COLGROUP). Cuando la celda sea parte de un tramo que abarque varias
columnas, la propiedad de alineación se hereda de la definición de la celda
al comienzo del tramo.
4. Un atributo de alineación establecido en un elemento de fila o grupo de
filas (TR, THEAD, TFOOT y TBODY). Cuando una celda sea parte de un tramo que
abarque varias filas, la propiedad de alineación se hereda de la definición
de la celda al comienzo del tramo.
5. Un atributo de alineación establecido en la tabla (TABLE).
6. El valor por defecto de la alineación.
El orden de precedencia (de más alta a más baja) para el atributo valign (así
como para los otros atributos heredados lang, dir y style) es el siguiente:
1. Un atributo establecido en un elemento dentro de los datos de la celda
(p.ej., P).
2. Un atributo establecido en una celda (TH y TD).
3. Un atributo establecido en un elemento de fila o grupo de filas (TR, THEAD,
TFOOT y TBODY). Cuando la celda forme parte de un tramo que abarque varias
filas, el valor del atributo se hereda de la definición de la celda al
comienzo del tramo.
4. Un atributo establecido en un elemento de grupo de columnas (COL y
COLGROUP). Cuando la celda forme parte de un tramo que abarque varias
columnas, el valor del atributo se hereda de la definición de la celda al
comienzo del tramo.
5. Un atributo establecido en la tabla (TABLE).
6. El valor por defecto del atributo.
Además de eso, cuando se representen celdas, para determinar la alineación
horizontal las columnas tienen preferencia sobre las filas, mientras que para la
alineación vertical las filas tienen preferencia sobre las columnas.
La alineación por defecto de las celdas depende del agente de usuario. Sin
embargo, los agentes de usuario deberían establecer el atributo por defecto
según la direccionalidad actual (es decir, que no sea "left" en todos los
casos).
Los agentes de usuario que no soporten el valor "justify" del atributo align
deberían usar en su lugar el valor heredado de la direccionalidad.
Nota. Obsérvese que una celda puede heredar un atributo no de su padre sino de
la primera celda de un tramo. Esta es una excepción a las reglas generales de
herencia de atributos.
11.3.3 Márgenes de las celdas
Definiciones de atributos
cellspacing = longitud [CN]
Este atributo especifica cuánto espacio debería dejar el agente de usuario
entre el lado izquierdo de la tabla y el lado izquierdo de la columna que
está más a la izquierda, entre la parte superior de la tabla y el lado
superior de la fila que está más arriba, y lo mismo para los lados derecho e
inferior. El atributo también especifica la cantidad de espacio entre celdas.
cellpadding = longitud [CN]
Este atributo especifica la cantidad de espacio entre el borde de la celda y
sus contenidos. Si el valor de este atributo es una longitud en píxeles, los
cuatro bordes deberían estar a esta distancia de los contenidos. Si el valor
del atributo es una longitud porcentual, los bordes superior e inferior
deberían estar igualmente separados del contenido según un porcentaje del
espacio vertical disponible, y los bordes izquierdo y derecho deberían estar
igualmente separados de los contenidos según un porcentaje del espacio
horizontal disponible.
Estos dos atributos controlan el espacio entre y dentro de las celdas. La
siguiente ilustración explica cuál es la relación entre ellos:
[Imagen que ilustra cómo se relacionan los atributos cellspacing y cellpadding]
En el siguiente ejemplo, el atributo cellspacing especifica que las celdas
deberían estar separadas entre sí y hasta el marco de la tabla por veinte
píxeles. El atributo cellpadding especifica que el margen superior de la celda y
el margen inferior de la celda estarán separados de los contenidos de la celda
por el 10% del espacio vertical disponible (para un total del 20%).
Análogamente, el borde izquierdo de la celda y el borde derecho de la celda
estarán separados de los contenidos de la celda por el 10% del espacio
horizontal disponible (para un total del 20%).
Si una tabla o columna dada tiene una anchura fija, cellspacing y cellpadding
pueden requerir más espacio que el asignado. Los agentes de usuario pueden dar a
estos atributos precedencia sobre el atributo width cuando existan conflictos,
pero no necesitan hacerlo.
11.4 Representación de tablas por agentes de usuario no visuales
11.4.1 Asociación de información de encabezado con celdas de datos
Los agentes de usuario no visuales tales como sintetizadores de voz o
dispositivos Braille pueden usar los siguientes atributos de los elementos TD y
TH para representar las celdas de las tablas más intuitivamente:
- Para una celda de datos dada, el atributo headers enumera las celdas que
proporcionan información de encabezado pertinente. Para ello, se debe dar un
nombre a cada celda de encabezado por medio del atributo id. Obsérvese que no
siempre es posible hacer una distinción clara entre las celdas que son de
encabezado y las celdas de datos. Para aquellas celdas en que la diferencia
no es clara, debería usar el elemento TD junto con los atributos id o scope.
- Para una celda de encabezado dada, el atributo scope le dice al agente de
usuario las celdas de datos para las cuales proporciona información esta
celda de encabezado. Los autores pueden optar por usar este atributo en lugar
de headers si lo encuentran más conveniente; los dos atributos realizan la
misma función. El atributo headers es necesario generalmente cuando se
colocan los encabezados en posiciones irregulares con respecto a los datos a
los que se aplican.
- El atributo abbr especifica un encabezado abreviado para celdas de encabezado
de modo que los agentes de usuario puedan representar la información de
encabezado más rápidamente.
En el siguiente ejemplo, asignamos información de encabezado a celdas por medio
del atributo headers. Todas las celdas de una misma columna se refieren a la
misma celda de encabezado (a través del atributo id).
Tazas de café consumidas por cada senador
Nombre
Tazas
Tipo de Café
¿Azúcar?
T. Sexton
10
Espresso
No
J. Dinnen
5
Descafeinado
Sí
Un sintetizador de voz podría representar esta tabla de la forma siguiente:
Título: Tazas de café consumidas por cada senador
Resumen: Esta tabla muestra el número de tazas
de café consumidas por cada senador, el tipo
de café (descafeinado o normal), y si lo
toma con azúcar.
Nombre: T. Sexton, Tazas: 10, Tipo: Espresso, Azúcar: No
Nombre: J. Dinnen, Tazas: 5, Tipo: Decaf, Azúcar: Sí
Observe como se abrevia el encabezado "Tipo de Café" a "Tipo" usando el atributo
abbr.
Aquí tenemos el mismo ejemplo, utilizando el atributo scope en lugar del
atributo headers. Obsérvese el valor "col" del atributo scope, que significa
"todas las celdas de esta columna":
Tazas de café consumidas por cada senador
Nombre
Tazas
Tipo de Café
¿Azúcar?
T. Sexton
10
Espresso
No
J. Dinnen
5
Descafeinado
Sí
Aquí hay un ejemplo algo más complejo que ilustra otros valores del atributo
scope:
Cursos de la Comunidad -- Bath Otoño de 1997
Nombre del Curso
Tutor del Curso
Resumen
Código
Tasas
Tras la Guerra Civil
Dr. John Wroughton
El curso examinará los años turbulentos que siguieron
a 1646 en Inglattera. Reuniones cada 6 semanas
a partir del lunes 13 de octubre.
H27
£32
Una introducción a la Inglaterra anglosajona
Mark Cottle
Este curso de un día presenta una reconstrucción
de los anglosajones y de su sociedad en el
período medieval temprano. Sábado 18 de Octubre.
H28
£18
La gloriosa Grecia
Valerie Lorenz
Lugar de nacimiento de la democracia y la filosofía, patria del teatro,
hogar de la discusión. Los romanos pueden haberlo hecho, pero los
griegos lo hicieron primero. Clases matutinas del sábado 25
de Octubre de 1997
H30
£18
Un agente de usuario gráfico podría representar esto así:
[Una tabla con celdas fusionadas]
Obsérvese que se usa el atributo scope con el valor "row". Aunque la primera
celda de cada fila contiene datos y no información de encabezado, el atributo
scope hace que la celda de datos se comporte como una celda de encabezado de
fila. Esto permite a los sintetizadores de voz proporcionar el nombre del curso
en cuestión si se le pide, o pronunciarlo inmediatamente antes del contenido de
cada celda.
11.4.2 Categorización de celdas
Los usuarios que navegan por una tabla con un agente de usuario basado en voz
pueden querer oír una explicación de los contenidos de una celda además de los
propios contenidos. Un modo en que el agente de usuario podría proporcionar una
explicación es pronunciando la información de encabezado asociada antes de
pronunciar los contenidos de la celda de datos (véase la sección sobre la
asociación de información de encabezado con celdas de datos).
Los usuarios también pueden querer información sobre más de una celda, en cuyo
caso proporcionar información de encabezado a nivel de celda (con headers, scope
y abbr) puede no ser lo más adecuado. Considérese la tabla siguiente, que
clasifica los gastos de comida, hotel y transporte en dos localidades (San Jose
y Seattle) a lo largo de varios días:
[Imagen de una tabla que enumera gastos de viaje en dos localidades: San Jose y
Seattle, por fecha y categoría (comidas, hotel y transporte), mostrados con
subtítulos]
Los usuarios podrían querer extraer información de la tabla por medio de
preguntas:
- "¿Cuánto gasté en todas mis comidas?"
- "¿Cuánto gasté en comida el 25 de agosto?"
- "¿Cuánto gasté en total en San Jose?"
Cada pregunta implica un cálculo por parte del agente de usuario que puede
implicar a cero o más celdas. Para determinar, por ejemplo, el coste de las
comidas del 25 de agosto, el agente de usuario debe saber qué celdas de la tabla
se refieren a "Comidas" (todas ellas), y cuáles se refieren a "Fechas" (en
particular al 25 de agosto), y encontrar la intersección de los dos conjuntos.
Para permitir este tipo de preguntas, el modelo de tablas de HTML 4 permite a
los autores colocar encabezados y datos de tabla en categorías. Por ejemplo,
para la tabla de gastos de viaje, un autor podría agrupar las celdas de
encabezado "San Jose" y "Seattle" en la categoría "Localidad", los encabezados
"Comidas", "Hotel", y "Transporte" en la categoría "Gastos", y los cuatro días
en la categoría "Fecha". Las tres preguntas anteriores podrían tener entonces
los significados siguientes:
- "¿Cuánto gasté en todas mis comidas?" significa "¿Cuáles son las celdas de
datos de la categoría "Gastos=Comidas"?
- "¿Cuánto gasté en comidas el 25 de agosto?" significa "¿Cuáles son las celdas
de datos de las categorías "Gastos=Comidas" y "Fecha=25/08/1997"?
- "¿Cuánto gasté en total en San Jose?" significa "¿Cuáles son las celdas de
datos de las categorías "Gastos=Comidas, Hotel, Transporte" y "Localidad=San
Jose?"
Los autores categorizan una celda de encabezado o de datos estableciendo el
atributo axis de la celda. Por ejemplo, en la tabla de gastos de viaje, la celda
que contiene la información "San Jose" podría ser colocada en la categoría
"Localidad" como sigue:
San Jose
Cualquier celda que contenga información relacionada con "San Jose" debería
referirse a esta celda de encabezado o bien por medio del atributo headers o
bien por medio del atributo scope. Así, los gastos en comidas del 25/08/1997
deberían codificarse para que se refirieran al atributo id de la celda de
encabezado "San Jose" (cuyo valor aquí es "a6"):
37.74
Cada atributo headers proporciona una lista de referencias a valores id. Los
autores pueden así categorizar una celda dada de diferentes maneras (o dicho de
otra manera, por cualquier número de "headers", de ahí su nombre).
Abajo hemos codificado la tabla de gastos de viaje con información sobre
categorías:
Informe de Gastos de Viaje
Comidas
Hotel
Transporte
subtotales
San Jose
25/08/1997
37.74
112.00
45.00
26/08/1997
27.28
112.00
45.00
subtotales
65.02
224.00
90.00
379.02
Seattle
27/08/1997
96.25
109.00
36.00
28/08/1997
35.00
109.00
36.00
subtotales
131.25
218.00
72.00
421.25
Totales
196.27
442.00
162.00
800.27
Obsérvese que al codificar la tabla de esta manera, los agentes de usuario
pueden evitar confundir al usuario con información no deseada. Por ejemplo, si
un sintetizador de voz tuviera que pronunciar todas las cifras de la columna
"Comidas" de esta tabla en respuesta a la pregunta "¿Cuánto me gasté en
comidas?", un usuario no podría distinguir los gastos diarios subtotales de los
totales. Categorizando cuidadosamente los datos de las celdas, los autores
permiten a los agentes de usuario hacer distinciones semánticas importantes en
la representación.
Por supuesto, no hay límites en cuanto a la forma en que los autores pueden
categorizar la información de una tabla. Por ejemplo, en la tabla de gastos de
viaje, podríamos añadir las categorías adicionales "subtotales" y "totales".
Esta especificación no exige a los agentes de usuario que traten la información
proporcionada por el atributo axis, ni hace ninguna recomendación sobre cómo
pueden presentar los agentes de usuario la información de axis a los usuarios,
ni sobre cómo pueden preguntar los usuarios al agente de usuario sobre esta
información.
Sin embargo, los agentes de usuario, en particular los sintetizadores de voz,
podrían extraer la información que las distintas celdas resultado de una
pregunta tienen en común. Por ejemplo, si el usuario pregunta "¿Cuánto me gasté
en comidas en San Jose?", el agente de usuario podría determinar primero las
celdas en cuestión (25/08/1997: 37.74, 26/08/1997: 27.28), y después representar
esta información. Un agente de usuario que pronuncie esta información podría
leerla así:
Localidad: San Jose. Fecha: 25/08/1997. Gastos, Comidas: 37.74
Localidad: San Jose. Fecha: 26/08/1997. Gastos, Comidas: 27.28
o más compacto:
San Jose, 25/08/1997, Comidas: 37.74
San Jose, 26/08/1997, Comidas: 27.28
Se obtendría una representación aún más económica sacando la información común y
reordenándola:
San Jose, Comidas, 25/08/1997: 37.74
26/08/1997: 27.28
Los agentes de usuario que soporten este tipo de representación deberían
permitir a los usuarios personalizar la representación (p.ej., con hojas de
estilo).
11.4.3 Algoritmo para encontrar información de encabezado
En ausencia de información de encabezado de los atributos scope o headers, los
agentes de usuario pueden construir información de encabezado de acuerdo con el
siguiente algoritmo. El fin del algoritmo es encontrar una lista ordenada de
encabezados. (En la descripción del algoritmo que sigue, se supone que la
direccionalidad de la tabla es de izquierda a derecha.)
- Primero, buscar hacia la izquierda de la posición de la celda para encontrar
celdas de encabezado de fila. Después buscar hacia arriba para encontrar
celdas de encabezado de columna. La búsqueda en una dirección dada se detiene
cuando se alcanza el borde de la tabla o cuando se encuentra una celda de
datos tras una celda de encabezado.
- Los encabezados de fila se insertan en la lista en el orden en que aparecen
en la tabla. Para tablas de izquierda a derecha, los encabezados se insertan
de izquierda a derecha.
- Los encabezados de columna se insertan después de los encabezados de fila, en
el orden en que aparecen en la tabla, de arriba a abajo.
- Si una celda de encabezado tiene el atributo headers establecido, entonces
los encabezados a que hace referencia este atributo se insertan en la lista y
la búsqueda se detiene en la dirección actual.
- Las celdas TD que tengan el atributo axis establecido se tratan también como
celdas de encabezado.
11.5 Tabla de muestra
Esta muestra ilustra el agrupamiento de filas y columnas. Este ejemplo está
adaptado de "Developing International Software", por Nadine Kano.
En "arte ascii", la siguiente tabla:
PAGINAS DE CODIGOS SOPORTADAS POR MICROSOFT WINDOWS
ID Code-Page
Nombre
ACP
OEMCP
Windows NT 3.1
Windows NT 3.51
Windows 95
1200 Unicode (BMP de ISO/IEC-10646) X X *
1250 Windows 3.1 Europa del Este X X X X
1251 Windows 3.1 Cirílico X X X X
1252 Windows 3.1 US (ANSI) X X X X
1253 Windows 3.1 Griego X X X X
1254 Windows 3.1 Turco X X X X
1255 Hebreo X X
1256 Árabe X X
1257 Bálticp X X
1361 Coreano (Johab) X ** X
437 MS-DOS Estados Unidos X X X X
708 Árabe (ASMO 708) X X
709 Árabe (ASMO 449+, BCON V4) X X
710 Árabe (Árabe Transparente) X X
720 Árabe (ASMO Transparente) X X
se representaría de forma parecida a ésta:
PAGINAS DE CODIGOS SOPORTADAS POR MICROSOFT WINDOWS
===============================================================================
ID | Nombre | ACP OEMCP | Windows Windows Windows
Code-Page | | | NT 3.1 NT 3.51 95
-------------------------------------------------------------------------------
1200 | Unicode (BMP de ISO 10646) | | X X *
1250 | Windows 3.1 Europa del Este | X | X X X
1251 | Windows 3.1 Cirílico | X | X X X
1252 | Windows 3.1 US (ANSI) | X | X X X
1253 | Windows 3.1 Griego | X | X X X
1254 | Windows 3.1 Turco | X | X X X
1255 | Hebreo | X | X
1256 | Árabe | X | X
1257 | Báltico | X | X
1361 | Coreano (Johab) | X | ** X
-------------------------------------------------------------------------------
437 | MS-DOS Estados Unidos | X | X X X
708 | Árabe (ASMO 708) | X | X
709 | Árabe (ASMO 449+, BCON V4) | X | X
710 | Árabe (Árabe Transparente) | X | X
720 | Árabe (ASMO Transparente) | X | X
===============================================================================
Un agente de usuario gráfico podría representarlo así:
[Una tabla con filas y columas agrupadas]
Este ejemplo ilustra cómo puede usarse COLGROUP para agrupar columnas y para
establecer la alineación por defecto de las columnas. Análogamente se utiliza
TBODY para agrupar filas. Los atributos frame y rules dicen al agente de usuario
qué bordes y líneas de división representar.
================================================================================
12 Vínculos
--------------------------------------------------------------------------------
Contenidos
1. Introducción a los vínculos
1. Visitar un recurso vinculado
2. Otras relaciones de vínculo
3. Especificación de vínculos
4. Títulos de vínculos
5. Internacionalización y vínculos
2. El elemento A
1. Sintaxis de nombres de vínculos
2. Los vínculos anidados son ilegales
3. Vínculos con el atributo id
4. Recursos no disponibles o no identificables
3. Relaciones entre documentos: el elemento LINK
1. Vínculos directos e inversos
2. Vínculos y hojas de estilo externas
3. Vínculos y motores de búsqueda
4. Información sobre la ruta de acceso: el elemento BASE
1. Cómo completar los URIs relativos
--------------------------------------------------------------------------------
12.1 Introducción a los vínculos
HTML ofrece muchas de las posibilidades de publicación convencionales para la
creación de textos enriquecidos y documentos estructurados, pero lo que lo
separa de la mayoría de los otros lenguajes para el formato de documentos son
sus características para hipertexto y para documentos interactivos. Esta sección
presenta el vínculo (o enlace, o hipervínculo), la estructura básica del
hipertexto. Un vínculo es una conexión desde un recurso web a otro. Aunque es un
concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho
posible el éxito de la Web.
Un vínculo tiene dos extremos (llamados en inglés anchors, anclas), y una
dirección. El vínculo comienza en el "ancla de origen" (origen del vínculo) y
apunta al "ancla destino" (destino del vínculo), que puede ser cualquier recurso
de la Web (p.ej., una imagen, un videoclip, un archivo de sonido, un programa,
un documento HTML, un elemento dentro de un documento HTML, etc.).
12.1.1 Visitar un recurso vinculado
El comportamiento por defecto asociado a un vínculo es la obtención de otro
recurso de la Web. Normalmente este comportamiento se logra implícitamente
seleccionando el vínculo (p.ej., haciendo clic con el ratón, a través del
teclado, etc.).
El siguiente extracto HTML contiene dos vínculos, uno cuyo destino es un
documento HTML llamado "capitulo2.html" y otro cuyo destino es la imagen GIF del
fichero "bosque.gif":
...texto...
Encontrarás mucho más en el capítulo dos .
Mira también este mapa del bosque
encantado.
Al activar estos vínculos (haciendo clic con el ratón, a través del teclado, por
comandos de voz, etc.), los usuarios pueden visitar estos recursos. Obsérvese
que el atributo href de cada origen de vínculo especifica la dirección del
destino por medio de un URI.
El destino de un vínculo puede ser un elemento contenido en un documento HTML.
Se le debe asignar un nombre al destino, y cualquier URI que se refiera a este
destino debe incluir el nombre como identificador de fragmento.
Los destinos de vínculo en los documentos HTML pueden especificarse o bien
mediante el elemento A (dándoles un nombre con el atributo name), o mediante
cualquier otro elemento (dándole un nombre con el atributo id).
Así, por ejemplo, un autor podría crear una tabla de contenidos cuyas entradas
estuvieran vinculadas con los elementos de encabezado H2, H3, etc., del mismo
documento. Si usáramos el elemento A para crear los destinos de los vínculos,
escribiríamos:
Tabla de Contenidos
Introducción
Antecedentes
Experiencias personales
...el resto de la tabla de contenidos...
...el cuerpo del documento...
...sección 1...
...sección 2...
...sección 2.1...
Podemos lograr el mismo efecto haciendo que los elementos de encabezado sean
ellos mismos los destinos de los vínculos:
Tabla de Contenidos
Introducción
Antecedentes
Experiencias personales
...el resto de la tabla de contenidos...
...el cuerpo del documento...
Introducción
...sección 1...
Antecedentes
...sección 2...
Experiencias personales
...sección 2.1...
12.1.2 Otras relaciones de vínculo
La utilización más común de un vínculo es con mucho la obtención de otro recurso
de la Web, tal y como se ilustra en los ejemplos precedentes. Sin embargo, los
autores pueden insertar en sus documentos vínculos que expresen otras relaciones
entre recursos distintas a "activar este vínculo para visitar ese recurso
relacionado". Para los vínculos que expresan otros tipos de relaciones, se
especifican uno o más tipos de vínculo en el origen del vínculo.
Los papeles de un vínculo definido por A o LINK se especifican mediante los
atributos rel y rev.
Por ejemplo, los vínculos definidos por el elemento LINK pueden describir la
posición de un documento dentro de una serie de documentos. En el extracto que
sigue, los vínculos contenidos en el documento llamado "Capítulo 5" apuntan a
los capítulos anterior y siguiente:
...otras informaciones de cabecera...
Capítulo 5
El tipo de vínculo del primer vínculo es "prev" ("anterior"), y el del segundo
es "next" ("siguiente"), dos de los diferentes tipos de vínculos reconocidos.
Los vínculos especificados con LINK no son representados con los contenidos del
documento, aunque los agentes de usuario pueden representarlos de otras maneras
(p.ej., como herramientas de navegación).
Incluso aunque no se usen para navegar, estos vínculos pueden ser interpretados
de formas interesantes. Por ejemplo, un agente de usuario que imprima una serie
de documentos HTML como un documento único, puede usar la información de estos
vínculos como la base para formar un documento lineal coherente. Más adelante se
da más información sobre la utilización de vínculos para el beneficio de los
motores de búsqueda.
12.1.3 Especificación de vínculos
Aunque algunos elementos y atributos de HTML crean vínculos a otros recursos
(p.ej., el elemento IMG, el elemento FORM, etc.), este capítulo se refiere a los
vínculos creados con los elementos LINK y A. El elemento LINK sólo puede
aparecer en la cabecera del documento. El elemento A sólo puede aparecer en el
cuerpo.
Si el atributo href del elemento A tiene algún valor, el elemento define un
origen de vínculo que puede ser activado por el usuario para obtener un recurso
de la Web. El origen del vínculo está en el lugar donde aparece el elemento A y
el destino del vínculo es el recurso web.
El agente de usuario puede manipular el recurso obtenido de diferentes maneras:
abriendo un nuevo documento HTML en la misma ventana del agente de usuario,
abriendo un nuevo documento HTML en una ventana diferente, iniciando un nuevo
programa que maneje el recurso, etc. Como el elemento A tiene contenido (texto,
imágenes, etc.), los agentes de usuario pueden representar este contenido de
modo tal que se indique la presencia de un vínculo (p.ej., subrayando el
contenido).
Si el atributo name o el atributo id del elemento A toman algún valor, el
elemento define un posible destino de otros vínculos.
Los autores pueden establecer los atributos name y href de un mismo elemento A
simultáneamente.
El elemento LINK define una relación entre el documento actual y otro recurso.
Aunque LINK no tiene contenido, la relación que define puede ser representada
por algunos agentes de usuario.
12.1.4 Títulos de vínculos
Se puede especificar el atributo title tanto para A como para LINK para añadir
información sobre la naturaleza de un vínculo. Esta información puede ser
pronunciada por un agente de usuario, representada como una indicación visual
("tool-tip"), producir un cambio en la imagen del cursor, etc.
Así, podemos desarrollar uno de los ejemplos anteriores proporcionando un título
para cada vínculo:
...texto...
Encontrarás mucho más en el capítulo dos .
capítulo dos .
Mira también este mapa del
bosque encantado.
12.1.5 Internacionalización y vínculos
Debido a que los vínculos pueden apuntar a documentos codificados con diferentes
codificaciones de caracteres, los elementos A y LINK soportan el atributo
charset. Este atributo permite a los autores avisar a los agentes de usuario
sobre la codificación de los datos del otro extremo del vínculo.
El atributo hreflang proporciona a los agentes de usuario información sobre el
idioma del recurso del otro extremo del vínculo, igual que el atributo lang
proporciona información sobre el idioma del contenido o de los valores de los
atributos de un elemento.
Los agentes de usuario, provistos de esta información adicional, deberían ser
capaces de evitar la presentación de "basura" al usuario. En su lugar, pueden o
bien localizar los recursos necesarios para la presentación correcta del
documento o, si no pueden localizar los recursos, deberían al menos advertir al
usuario de que el documento será ilegible, explicando las causas.
12.2 El elemento A
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
name = cdata [CS]
Este atributo asigna un nombre al elemento actual de modo que éste pueda
actuar como destino de otro vínculo. El valor de este atributo debe ser un
nombre único de destino. El campo de acción de este nombre es el documento
actual. Obsérvese que este atributo comparte el mismo espacio de nombres que
el atributo id.
href = uri [CT]
Este atributo especifica la localización de un recurso de la Web, definiendo
así un vínculo entre el elemento actual (el origen del vínculo) y el destino
del vínculo definido por este atributo.
hreflang = código de idioma [CI]
Este atributo especifica el idioma base del recurso designado por href y sólo
puede utilizarse si se especifica href.
type = tipo de contenido [CI]
Este atributo da una indicación sobre el tipo de contenido de los contenidos
disponibles en la dirección del destino del vínculo. Permite a los agentes de
usuario optar por la no obtención del contenido si se les avisa de que van a
obtener contenidos de un tipo de contenido que no soportan.
Los autores que usen este atributo afrontan la responsabilidad y el riesgo de
que el valor especificado puede llegar a ser inconsistente con el contenido
disponible en la dirección de destino del vínculo.
Para la lista actual de los tipos de contenido registrados, consulte
[MIMETYPES].
rel = tipos de vínculo [CI]
Este atributo describe la relación entre el documento actual y el destino del
vínculo, especificado por el atributo href. El valor de este atributo es una
lista de tipos de vínculo separados por espacios.
rev = tipos de vínculo [CI]
Este atributo se utiliza para describir un vínculo inverso desde el origen
del vínculo, especificado por el atributo href, y el documento actual. El
valor de este atributo es una lista de tipos de vínculo separados por
espacios.
charset = codificación de caracteres [CI]
Este atributo especifica la codificación de caracteres del recurso designado
por el elemento. Consulte la sección sobre codificaciones de caracteres para
más detalles.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- shape y coords (mapas de imágenes)
- onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
- target (información sobre el marco destino)
- tabindex (navegación con tabulador)
- accesskey (teclas de acceso)
Cada elemento A define un origen o destino de vínculo.
1. El contenido de un elemento A define la posición del origen o del destino
del vínculo.
2. El atributo name da un nombre al elemento de modo que pueda ser el destino
de cero o más vínculos (ver también vínculos con id).
3. El atributo href hace que este elemento sea el origen de exactamente un
vínculo.
Los autores también pueden crear un elemento A que no sea origen ni destino de
vínculo, es decir, que no especifica ni href, ni name, ni id. Los valores de
estos atributos pueden ser establecidos posteriormente a través de scripts.
En el ejemplo que sigue, el elemento A define un vínculo. El origen del vínculo
es el texto "Sitio web del W3C" y el destino del vínculo es
"http://www.w3.org/":
Para más información sobre el W3C, consulte el
sitio web del W3C .
Este vínculo designa la página principal del World Wide Web Consortium. Cuando
un usuario active este vínculo en un agente de usuario, el agente de usuario
obtendrá el recurso, en este caso un documento HTML.
Los agentes de usuario suelen representar los vínculos de modo tal que éstos son
obvios para los usuarios (subrayándolos, invirtiendo los colores, etc.). La
representación exacta depende del agente de usuario. La representación puede
variar según que el usuario haya visitado ya el vínculo o no. Una posible
representación visual del vínculo anterior podría ser ésta:
Para más información sobre el W3C, consulte el sitio web del W3C.
~~~~~~~~~~~~~~~~~
Para decir explícitamente a los agentes de usuario cuál es la codificación de
caracteres de la página destino, se establece el atributo charset:
Para más información sobre el W3C, consulte el
sitio web del W3C
Supongamos que definimos un destino de vínculo llamado "destino-uno" en el
fichero "uno.html".
...texto antes del destino de vínculo...
Esta es la localización del destino de vínculo número
uno.
...texto después del destino de vínculo...
Esto crea un destino de vínculo alrededor del texto "Esta es la localización del
destino de vínculo número uno.". Normalmente, los contenidos de A no se
representan de manera especial cuando A sólo define un destino de vínculo.
Una vez definido el destino, podemos crear un vínculo a él desde el mismo
documento o desde otro diferente. Los URIs referidos a elementos A que son
destinos de vínculo, contienen un carácter "#" seguido del nombre del elemento
(el identificador de fragmento). Aquí tenemos varios ejemplos:
- Un URI absoluto: http://www.miempresa.com/uno.html#destino-uno
- Un URI relativo: ./uno.html#destino-uno o uno.html#destino-uno
- Cuando el vínculo está definido en el mismo documento: #destino-uno
Así, un vínculo definido en el fichero "dos.html" contenido en el mismo
directorio que "uno.html" se referiría a este destino del modo siguiente:
...texto antes del vínculo...
Para más información, consulte el
destino uno .
...texto después del vínculo...
El elemento A del siguiente ejemplo especifica un vínculo (con href) y crea un
destino de vínculo (con name) simultáneamente:
¡Acabo de volver de mis vacaciones! Aquí os pongo
una foto de mi familia junto al lago.
Este ejemplo contiene un vínculo a un tipo diferente de recurso web (una imagen
PNG). Al activar el vínculo la imagen debería ser obtenida de la Web (y
posiblemente mostrada si el sistema ha sido configurado para ello).
Nota. Los agentes de usuario deberían ser capaces de encontrar destinos de
vínculo creados con elementos A vacíos, pero algunos de ellos no pueden. Por
ejemplo, algunos agentes de usuario pueden no encontrar el "destino-vacio" del
siguiente fragmento HTML:
...código HTML...
Vínculo a destino vacío
12.2.1 Sintaxis de nombres de vínculos
Un nombre de vínculo es el valor del atributo name o del atributo id cuando éste
se use en el contexto de vínculos. Los nombres de vínculos deben seguir las
siguientes reglas:
- Unicidad: Los nombres de vínculo deben ser únicos dentro de un documento. No
pueden aparecer en un mismo documento nombres de vínculo que sólo se
diferencien por las letras mayúsculas y minúsculas.
- Emparejamiento de cadenas: Las comparaciones entre identificadores de
fragmento y nombres de vínculos deben dar resultados exactos (incluyendo
mayúsculas y minúsculas).
Así, el ejemplo siguiente es correcto con respecto al emparejamiento de cadenas
y los agentes de usuario deben considerarlo como tal:
...
...más texto...
...
EJEMPLO ILEGAL:
El siguiente ejemplo es ilegal con respecto a la unicidad, ya que los dos
nombres son iguales y sólo se diferencian por las mayúsculas:
...
...
Aunque el siguiente extracto es HTML legal, el comportamiento del agente de
usuario es indefinido; algunos agentes de usuario pueden considerar
(incorrectamente) que hay un emparejamiento, y otros no.
...
...más texto...
...
Los nombres de los vínculos deberían restringirse a los caracteres ASCII.
Consulte el apéndice para más información sobre caracteres no ASCII en valores
de atributos URI.
12.2.2 Los vínculos anidados son ilegales
Los vínculos definidos mediante elementos A no deben ser anidados; un elemento A
no debe contener ningún otro elemento A.
Como el DTD define que el elemento LINK es vacío, los elementos LINK tampoco
pueden estar anidados.
12.2.3 Vínculos con el atributo id
El atributo id puede utilizarse para crear un destino de vínculo en la etiqueta
inicial de cualquier elemento (incluyendo al elemento A).
Este ejemplo ilustra la utilización del atributo id para poner un destino de
vínculo en un elemento H2. El destino es vinculado por medio del elemento A.
Puedes leer más sobre esto en la Sección Dos .
...más abajo en el mismo documento
Sección Dos
...más abajo en el mismo documento
Consulte la Sección Dos más arriba
para más detalles.
El siguiente ejemplo le da un nombre a un destino de vínculo con el atributo id:
¡Acabo de volver de mis vacaciones! Aquí os pongo una
foto de mi familia junto al lago.
Los atributos id y name comparten el mismo espacio de nombres. Esto significa
que no pueden definir cada uno un destino de vínculo con un mismo nombre en el
mismo documento. Está permitido usar ambos atributos para especificar un
identificador único para un mismo elemento en los siguientes elementos: A,
APPLET, FORM, FRAME, IFRAME, IMG y MAP. Cuando se usen ambos atributos en un
mismo elemento, sus valores deben ser idénticos.
EJEMPLO ILEGAL:
El siguiente extracto es HTML ilegal, ya que estos atributos declaran el mismo
nombre dos veces en el mismo documento.
...
...
...páginas y más páginas...
El siguiente ejemplo ilustra el hecho de que id y name deben tener el mismo
valor cuando los dos aparecen en la etiqueta inicial de un elemento:
...
Debido a su especificación en el DTD de HTML, el atributo name puede contener
referencias de caracteres. Así, el valor Dürst es un valor válido para el
atributo name, como lo es Dürst . El atributo id, por contra, no puede
contener referencias de caracteres.
¿Es mejor utilizar id, o name? Los autores deberían considerar las siguientes
cuestiones cuando decidan entre usar id o name para el nombre de un vínculo:
- El atributo id puede actuar como algo más que un nombre de vínculo (p.ej.,
selector en una hoja de estilo, identificador en un proceso, etc.).
- Algunos agentes de usuario antiguos no soportan los vínculos creados con el
atributo id.
- El atributo name permite nombres de vínculos más ricos (con entidades).
12.2.4 Recursos no disponibles o no identificables
Una referencia a un recurso no disponible o no identificable es un error. Aunque
los agentes de usuario puedan diferir en el modo de tratar tales errores,
recomendamos el comportamiento siguiente:
- Si un agente de usuario no puede localizar un recurso vinculado, debería
alertar al usuario.
- Si un agente de usuario no puede identificar el tipo de un recurso vinculado,
debería intentar procesarlo de todos modos. Debería alertar al usuario y
puede permitir al usuario intervenir para identificar el tipo de documento.
12.3 Relaciones entre documentos: el elemento LINK
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
- href, hreflang, type, rel, rev (vínculos)
- target (información sobre el marco destino)
- media (información de estilo en cabecera)
- charset (codificaciones de caracteres)
Este elemento define un vínculo. A diferencia de A, sólo puede aparecer en la
sección HEAD de un documento, aunque puede aparecer cualquier número de veces.
Si bien LINK no tiene contenido, conlleva cierta información relacional que
puede ser representada por los agentes de usuario de distintas maneras (p.ej.,
una barra de herramientas con un menú desplegable para los vínculos).
Este ejemplo ilustra cómo pueden aparecer varias definiciones LINK en la sección
HEAD de un documento. El documento actual es "Capitulo2.html". El atributo rel
especifica la relación del documento vinculado con el documento actual. Los
valores "Index", "Next" y "Prev" se explican en la sección sobre tipos de
vínculos.
Capítulo 2
...el resto del documento...
12.3.1 Vínculos directos e inversos
Los atributos rel y rev juegan papeles complementarios: el atributo rel
especifica un vínculo directo y el atributo rev especifica un vínculo inverso.
Consideremos dos documentos A y B.
Documento A:
Esto significa exactamente lo mismo que:
Documento B:
Ambos atributos pueden especificarse simultáneamente.
12.3.2 Vínculos y hojas de estilo externas
Cuando el elemento LINK vincula una hoja de estilo externa a un documento, el
atributo type especifica el lenguaje de la hoja de estilo, y el atributo media
especifica el medio o medios de representación deseados. Los agentes de usuario
pueden ahorrar tiempo obteniendo de la red sólo aquellas hojas de estilo que se
apliquen al dispositivo actual.
Los tipos de medios se tratan con más profundidad en la sección sobre hojas de
estilo.
12.3.3 Vínculos y motores de búsqueda
Los autores pueden usar el elemento LINK para proporcionar distintas
informaciones a los motores de búsqueda, entre las que se incluyen:
- Vínculos a versiones alternativas de un documento, escritas en otro idioma.
- Vínculos a versiones alternativas de un documento, diseñadas para medios
diferentes, por ejemplo, una versión especial para imprimir.
- Vínculos a la página inicial de un conjunto de documentos.
Los ejemplos que siguen ilustran cómo puede combinarse la información sobre el
idioma, los tipos de medios y los típos de vínculos para mejorar el
procesamiento de los documentos por parte de los motores de búsqueda.
En el siguiente ejemplo, usamos el atributo hreflang para decir a los motores de
búsqueda dónde encontrar las versiones en neerlandés, portugués y árabe de un
documento. Obsérvese el uso del atributo charset para el manual en árabe.
Obsérvese también el uso del atributo lang para indicar que el valor del
atributo title del elemento LINK que designa al manual francés está en francés.
El manual en castellano
En el siguiente ejemplo, le decimos a los motores de búsqueda dónde encontrar la
versión impresa de un manual.
Manual de referencia
En el siguiente ejemplo, le decimos a los motores de búsqueda dónde encontrar la
portada de un conjunto de documentos.
Manual de referencia -- Página 5
En las notas del apéndice se da más información sobre cómo ayudar a los motores
de búsqueda a indexar su sitio web.
12.4 Información sobre la ruta de acceso: el elemento BASE
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
href = uri [CT]
Este atributo especifica un URI absoluto que actúa como el URI base para
completar URIs relativos.
Atributos definidos en otros lugares
- target (información sobre el marco destino)
En HTML, los vínculos y las referencias a recursos externos como imágenes,
aplicaciones, programas de procesamiento de formularios, hojas de estilo, etc.,
se especifican siempre mediante un URI. Los URIs relativos se completan de
acuerdo con un URI base, el cual puede provenir de distintas fuentes. El
elemento BASE permite a los autores especificar el URI base de un documento
explícitamente.
Si está presente, el elemento BASE debe aparecer en la sección HEAD del
documento HTML, antes de cualquier elemento que haga referencia a una fuente
externa. La información de ruta especificada por el elemento BASE sólo afecta a
los URIs del documento en el cual aparece el elemento.
Por ejemplo, dadas las siguientes declaraciones BASE y A:
Nuestros productos
¿Conoce ya nuestras
Jaulas para Pájaros ?
el URI relativo "../jaulas/pajaros.gif" se completaría a:
http://www.pajareria.com/jaulas/pajaros.gif
12.4.1 Cómo completar los URIs relativos
Los agentes de usuario deben calcular el URI base para completar los URIs
relativos de acuerdo con [RFC1808], sección 3. A continuación se describe cómo
se aplica [RFC1808] al HTML específicamente.
Los agentes de usuario deben calcular el URI base de acuerdo con el siguiente
orden de precedencia (de prioridad más alta a prioridad más baja):
1. El URI base se establece por medio del elemento BASE.
2. El URI base viene dado por metadatos detectados durante una interacción del
protocolo, por ejemplo en un encabezado HTTP (ver [RFC2616]).
3. Por defecto, el URI base es el del documento actual. No todos los documentos
HTML tienen un URI base (p.ej., un documento HTML válido puede aparecer en
un mensaje de correo electrónico y no ser designado con un URI). Tales
documentos HTML se consideran erróneos si contienen URIs relativos que se
basen en un URI base por defecto.
Por otra parte, los elementos OBJECT y APPLET definen atributos que tienen
precedencia sobre el valor establecido por el elemento BASE. Consulte las
definiciones de estos elementos para más información sobre cuestiones
específicas de estos elementos relacionadas con los URIs.
Nota. Para las versiones de HTTP que definan un encabezado Link, los agentes de
usuario deberían tratar estos encabezados exactamente igual que los elementos
LINK del documento. HTTP 1.1, tal y como está definido [RFC2616], no incluye un
campo de encabezado Link (consulte la sección 19.6.3).
================================================================================
13 Objetos, Imágenes y Aplicaciones
--------------------------------------------------------------------------------
Contenidos
1. Introducción a los objetos, imágenes y aplicaciones
2. Incluir una imagen: el elemento IMG
3. Inclusión genérica: el elemento OBJECT
1. Reglas para representar objetos
2. Inicialización de objetos: el elemento PARAM
3. Esquemas globales de nombres para objetos
4. Declaración y creación de un objeto
4. Incluir un applet: el elemento APPLET
5. Notas sobre la inclusión de documentos
6. Mapas de imágenes
1. Mapas de imágenes en el lado del cliente: los elementos MAP y AREA
- Ejemplos de mapas de imágenes en el lado del cliente
2. Mapas de imágenes en el lado del servidor
7. Presentación visual de imágenes, objetos y aplicaciones
1. Anchura y altura
2. Espacio en blanco alrededor de imágenes y objetos
3. Bordes
4. Alineación
8. Cómo especificar texto alternativo
--------------------------------------------------------------------------------
13.1 Introducción a los objetos, imágenes y aplicaciones
Las características multimedia de HTML permiten a los autores incluir en sus
páginas imágenes, aplicaciones (programas que se descargan automáticamente y se
ejecutan en la máquina del usuario), videoclips, y otros documentos HTML en sus
páginas.
Por ejemplo, para incluir una imagen PNG en un documento, los autores pueden
escribir:
Aquí tienen un primer plano del Gran Cañón:
Esto es un primer plano del Gran Cañón.
Las versiones anteriores de HTML permitían a los autores incluir imágenes (por
medio de IMG) y aplicaciones (por medio de APPLET). Estos elementos tienen
varias limitaciones:
- No sirven para resolver el problema más general de cómo incluir tipos de
medios nuevos y futuros.
- El elemento APPLET sólo funciona con aplicaciones basadas en Java. Este
elemento está desaprobado en favor de OBJECT.
- Plantean problemas de accesibilidad.
Para solucionar estos problemas, HTML 4 introduce el elemento OBJECT, que ofrece
una solución universal para la inclusión de objetos genéricos. El elemento
OBJECT permite a los autores HTML especificar todo lo que necesita un agente de
usuario para la representación de un objeto: código fuente, valores iniciales, y
datos en tiempo de ejecución. En esta especificación, el término "objeto" se
utiliza para describir las cosas que la gente quiere colocar en los documentos
HTML; otros términos usados habitualmente son: applets, plug-ins, controladores
de medios, etc.
El nuevo elemento OBJECT asume así algunas de las tareas realizadas por los
elementos existentes. Considérese la siguiente tabla de funcionalidades:
Tipo de inclusión Elemento específico Elemento genérico
Imagen IMG OBJECT
Aplicación APPLET (Desaprobado) OBJECT
Otro documento HTML IFRAME OBJECT
La tabla indica que cada tipo de inclusión tiene una solución específica y una
general. El elemento genérico OBJECT servirá como solución de implementación de
los tipos de medios futuros.
Para incluir imágenes, los autores pueden usar el elemento OBJECT o el elemento
IMG.
Para incluir aplicaciones, los autores deberían usar el elemento OBJECT ya que
el elemento APPLET está desaprobado.
Para incluir un documento HTML en otros, los autores pueden usar o bien el nuevo
elemento IFRAME o bien el elemento OBJECT. En ambos casos, el documento incluido
sigue siendo independiente del documento principal. Los agentes de usuario
visuales pueden presentar el documento incluido en una ventana diferenciada del
documento principal. Consulte las notas sobre documentos incluidos para una
comparación entre OBJECT e IFRAME en lo que a inclusión de documentos se
refiere.
Las imágenes y otros objetos incluidos pueden tener hipervínculos asociados a
ellos, tanto a través de los mecanismos de vinculación estándar, como también a
través de mapas de imágenes. Un mapa de imágenes especifica las regiones
geométricas activas de un objeto incluido, y asigna un vínculo a cada región.
Cuando se activan, estos vínculos pueden hacer que se abra un documento, que se
ejecute un programa en el servidor, etc.
En las secciones siguientes, hablamos sobre los distintos mecanismos que están a
disposición de los autores para inclusiones multimedia y para crear mapas de
imágenes de dichas inclusiones.
13.2 Incluir una imagen: el elemento IMG
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
src = uri [CT]
Este atributo especifica la localización del recurso de imagen. Ejemplos de
formatos de imagen ampliamente reconocidos son GIF, JPEG y PNG.
longdesc = uri [CT]
Este atributo especifica un vínculo a una descripción larga de la imagen.
Esta descripción debería ser un complemento de la descripción corta
proporcionada mediante al atributo alt. Cuando la imagen tenga asociado un
mapa de imágenes, este atributo debería proporcionar información sobre los
contenidos del mapa de imágenes. Esto es particularmente importante para
mapas de imágenes en el lado del servidor. Como un elemento IMG puede estar
dentro del contenido de un elemento A, el mecanismo de la interfaz del
usuario del agente de usuario para acceder al recurso "longdesc" de aquél
debe ser diferente del mecanismo para acceder al recurso href de éste.
name = cdata [CI]
Este atributo asigna un nombre al elemento de modo que se pueda hacer
referencia a él desde hojas de estilo o scripts. Nota. Este atributo ha sido
incluido por motivos de compatibilidad con versiones anteriores. Las
aplicaciones deberían usar el atributo id para identificar a los elementos.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- alt (texto alternativo)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
- ismap, usemap (mapas de imágenes en el lado del cliente)
- align, width, height, border, hspace, vspace (presentación visual de objetos,
imágenes y aplicaciones)
El elemento IMG incluye una imagen en el documento actual en la posición de la
definición del elemento. El elemento IMG no tiene contenido; normalmente se
reemplaza en línea por la imagen designada por el atributo src, con la única
excepción de las imágenes alineadas a la izquierda o a la derecha y que están
"flotando" fuera de línea.
En un ejemplo anterior, definimos un vínculo a una fotografía de familia. Aquí,
insertamos la foto directamente en el documento actual:
¡Acabo de volver de mis vacaciones! Aquí os pongo
una foto de mi familia en el lago:
Esta inclusión también puede realizarse con el elemento OBJECT como sigue:
¡Acabo de volver de mis vacaciones! Aquí os pongo una foto
de mi familia en el lago:
Una foto de mi familia en el lago.
El atributo alt especifica un texto alternativo que se representa cuando la
imagen no puede ser mostrada (ver abajo para más información sobre cómo
especificar texto alternativo). Los agentes de usuario deben representar el
texto alternativo cuando no puedan soportar imágenes, cuando no puedan soportar
un tipo de imágenes, o cuando estén configurados para no mostrar imágenes.
El siguiente ejemplo muestra cómo puede utilizarse el atributo longdesc para una
descripción más rica:
El atributo alt proporciona una descripción corta de la imagen. Esta información
debería ser suficiente como para que los usuarios puedan decidir si quieren
seguir el vínculo dado por el atributo longdesc hacia la descripción más larga,
en este caso "mapadelsitio.html".
Consulte la sección sobre la presentación visual de objetos, imágenes y
aplicaciones para información sobre tamaño de la imagen, alineación y bordes.
13.3 Inclusión genérica: el elemento OBJECT
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
classid = uri [CT]
Este atributo puede utilizarse para especificar la localización de la
implementación de un objeto mediante un URI. Puede usarse junto con, o como
alternativa al atributo data, dependiendo del tipo de objeto involucrado.
codebase = uri [CT]
Este atributo especifica la ruta de acceso base (base path) utilizado para
completar los URIs relativos especificados por los atributos classid, data y
archive. Si está ausente, su valor por defecto es el URI base del documento
actual.
codetype = tipo de contenido [CI]
Este atributo especifica el tipo esperado de contenido de datos cuando se
carga el objeto especificado por classid. Este atributo es opcional pero se
recomienda cuando se especifica classid ya que permite que el agente de
usuario evite la carga de información de tipos de contenido que no soporta.
Cuando está ausente, su valor por defecto es el valor del atributo type.
data = uri [CT]
Este atributo puede utilizarse para especificar la localización de los datos
del objeto, por ejemplo datos de imágenes para objetos que definen imágenes,
o más en general, una forma serializada de un objeto que puede usarse para
recrearlo. Si se da como URI relativo, debería interpretarse relativamente al
atributo codebase.
type = tipo de contenido [CI]
Este atributo especifica el tipo de contenido de los datos especificados por
data. Este atributo es opcional, pero se recomienda incluirlo cuando se
especifica data, ya que permite que el agente de usuario no cargue
información de tipos de contenido que no soporta. Si el valor de este
atributo es diferente del "Content-Type" HTTP devuelto por el servidor cuando
se obtiene el objeto, el "Content-Type" HTTP tiene preferencia.
archive = lista de uris [CT]
Este atributo puede utilizarse para especificar una lista de URIs separados
por espacios de archivos que contienen recursos relevantes para el objeto,
los cuales pueden incluir los recursos especificados por los atributos
classid y data. La precarga de archivos resultará generalmente en tiempos
menores de descarga para los objetos. Los archivos especificados como URIs
relativos deberían interpretarse relativamente al atributo codebase.
declare [CI]
Cuando está presente, este atributo booleano hace que la definición actual de
OBJECT sea solamente una declaración. El objeto debe ser creado por una
definición OBJECT subsiguiente referida a esta declaración.
standby = texto [CS]
Este atributo especifica un mensaje que puede presentar un agente de usuario
mientras carga la implementación y los datos del objeto.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
- tabindex (navegación con tabulador)
- usemap (mapas de imágenes en el lado del cliente)
- name (envío de formularios)
- align, width, height, border, hspace, vspace (presentación visual de objetos,
imágenes y aplicaciones)
La mayoría de los agentes de usuario tienen mecanismos integrados para
representar tipos de datos comunes como texto, imágenes GIF, colores, fuentes, y
un puñado de elementos gráficos. Para representar tipos de datos para los cuales
no tienen soporte nativo, los agentes de usuario suelen ejecutar aplicaciones
externas. El elemento OBJECT permite a los autores controlar si los datos
deberían ser representados externamente por algún programa, especificado por el
autor, que represente los datos dentro del agente de usuario.
En el caso más general, puede ser necesario que el autor tenga que especificar
tres tipos de información:
La implementación del objeto incluido. Por ejemplo, si el objeto incluido es una
aplicación de reloj, el autor debe indicar la localización del código ejecutable
de la aplicación.
- Los datos que deben representarse. Por ejemplo, si el objeto incluido es un
programa que representa datos de fuentes, el autor debe indicar la
localización de estos datos.
- Otros valores que necesite el objeto en tiempo de ejecución. Por ejemplo,
algunas aplicaciones pueden requerir valores iniciales para los parámetros.
El elemento OBJECT permite a los autores especificar estos tres tipos de datos,
pero los autores no tienen que especificar necesariamente los tres a la vez. Por
ejemplo, algunos objetos pueden no necesitar datos (p.ej., una aplicación
autónoma que realice una pequeña animación). Otros pueden no necesitar una
inicialización en tiempo de ejecución. Y otros pueden no necesitar información
adicional sobre la implementación, es decir, el propio agente de usuario puede
ya saber cómo representar ese tipo de datos (p.ej., imágenes GIF).
Los autores especifican la implementación de un objeto y la localización de los
datos a representar por medio del objeto OBJECT. Sin embargo, para especificar
valores en tiempo de ejecución, los autores usan el elemento PARAM, del cual se
habla en la sección sobre inicialización de objetos.
El elemento OBJECT también puede aparecer en el contenido del elemento HEAD. Ya
que los agentes de usuario en general no representan los elementos del HEAD, los
autores deberían asegurarse de que los elementos OBJECT en el HEAD no
especifiquen contenido que pueda ser representado. Consulte la sección sobre
compartir datos de un marco para un ejemplo de inclusión del elemento OBJECT en
el elemento HEAD.
Consulte la sección sobre controles de formulario para información sobre
elementos OBJECT en formularios.
Este documento no especifica el comportamiento de elementos OBJECT que usen
tanto el atributo classid para identificar una implementación como el atributo
data para especificar los datos para esa implementación. Para asegurar la
portabilidad, los autores deberían usar el elemento PARAM para decir a las
implementaciones dónde obtener los datos adicionales.
13.3.1 Reglas para representar objetos
Un agente de usuario debe interpretar un elemento OBJECT de acuerdo con las
siguientes reglas de precedencia:
1. El agente de usuario debe intentar en primer lugar representar el objeto. No
debería representar los contenidos del elemento, pero debe examinarlos por
si el elemento contiene hijos directos que sean elementos PARAM (ver
inicialización de objetos) o elementos MAP (ver mapas de imágenes en el lado
del cliente).
2. Si por cualquier razón el agente de usuario no es capaz de representar el
objeto (no está configurado para ello, no hay suficientes recursos, la
arquitectura no es la adecuada, etc.), debe intentar representar sus
contenidos.
Los autores no deberían incluir contenido en los elementos OBJECT que aparezcan
en el elemento HEAD.
En el siguiente ejemplo, insertamos una aplicación de reloj analógico en un
documento por medio del elemento OBJECT. La aplicación, escrita en el lenguaje
Python, no necesita datos adicionales ni valores en tiempo de ejecución. El
atributo classid especifica la localización de la aplicación:
Obsérvese que el reloj será representado tan pronto como el agente de usuario
represente esta declaración OBJECT. Es posible retrasar la representación del
objeto declarando el objeto en primer lugar (según se describe más abajo).
Los autores deberían completar esta declaración con un texto alternativo como
contenido de OBJECT por si el agente de usuario no puede representar el reloj.
Un reloj animado.
Una consecuencia significativa del diseño del elemento OBJECT es que ofrece un
mecanismo para especificar representaciones alternativas del objeto; cada
declaración OBJECT anidada puede especificar tipos de contenido alternativos. Si
un agente de usuario no puede representar el primer OBJECT, intenta representar
los contenidos, que a su vez pueden ser otro elemento OBJECT, etc.
En el siguiente ejemplo, anidamos varias declaraciones OBJECT para ilustrar el
funcionamiento de las representaciones alternativas. Un agente de usuario
intentará representar el primer elemento OBJECT que pueda, en el orden
siguiente: (1) una aplicación LaTierra escrita en el lenguaje Python, (2) una
animación MPEG de la Tierra, (3) una imagen GIF de la Tierra, (4) texto
alternativo.
La Tierra vista desde el espacio.
La declaración más externa especifica una aplicación que no necesita datos ni
valores iniciales. La segunda declaración especifica una animación MPEG, y como
no define la localización de ninguna implementación que procese MPEG, depende de
que el agente de usuario represente la animación. También establecemos el
atributo type para que los agentes de usuario que sepan que no pueden procesar
MPEG no se molesten en obtener "LaTierra.mpeg" de la red. La tercera declaración
especifica la localización de un fichero GIF y proporciona un texto alternativo
por si todos los mecanismos anteriores fallaran.
Datos en línea frente a datos externos. Los datos a representar pueden
proporcionarse de dos maneras: en línea y desde un recurso externo. Si bien el
primer método resultará generalmente en una representación más rápida, no es
conveniente cuando se representan grandes cantidades de datos.
Aquí tenemos un ejemplo que ilustra cómo se puede servir a un elemento OBJECT
datos en línea:
Un reloj.
Consulte la sección sobre la representación visual de objetos, imágenes y
aplicaciones para información sobre tamaño de objetos, alineación y bordes.
13.3.2 Inicialización de objetos: el elemento PARAM
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
name = cdata
Este atributo define el nombre de un parámetro de ejecución, que se supone
que el objeto insertado conoce. Dependiendo de la implementación específica
del objeto, se distinguirá o no entre mayúsculas y minúsculas.
value = cdata
Este atributo especifica el valor del parámetro de ejecución especificado por
name. Los valores de las propiedades no tienen significado para HTML; su
significado lo determina el objeto en cuestión.
valuetype = data|ref|object [CI]
Este atributo especifica el tipo de atributo value. Valores posibles:
- data: Este es el valor por defecto del atributo. Significa que el valor
especificado por value se evaluará y pasará a la implementación del objeto
como una cadena.
- ref: El valor especificado por value es un URI que designa un recurso
donde se almacenan valores de tiempo de ejecución. Esto permite a las
herramientas del soporte identificar los URIs dados como parámetros. El
URI debe pasarse al objeto tal y como está, es decir, sin completar.
- object: El valor especificado por value es un identificador que se refiere
a una declaración OBJECT del mismo documento. El identificador debe ser el
valor del atributo id establecido para el objeto OBJECT declarado.
type = tipo de contenido [CI]
Este atributo especifica el tipo de contenido del recurso contenido por el
atributo value sólo en el caso en que valuetype sea igual a "ref". Este
atributo especifica así para el agente usuario el tipo de valores que
encontrará en el URI designado por value.
Atributos definidos en otros lugares
- id (identificadores a nivel de documento)
Los elementos PARAM especifican un conjunto de valores que pueden ser necesarios
para un objeto en tiempo de ejecución. Puede aparecer cualquier número de
elementos PARAM en el contenido de un elemento OBJECT o APPLET, y en cualquier
orden, pero deben ser colocados al principio del contenido del elemento OBJECT o
APPLET que los contienen.
Se supone que la sintaxis de nombres y valores es entendida por la
implementación del objeto. Este documento no especifica cómo deberían obtener
los agentes de usuario los pares nombre/valor ni cómo deberían interpretar los
nombres de parámetros que aparezcan dos veces.
Volvemos al ejemplo del reloj para ilustrar la utilización de PARAM: supongamos
que la aplicación es capaz de manejar dos parámetros de ejecución que definen su
altura y anchura iniciales. Podemos establecer las dimensiones iniciales en
40x40 píxeles con dos elementos PARAM.
Este agente de usuario no puede representar aplicaciones Python.
En el siguiente ejemplo, se especifican los datos de ejecución para el parámetro
"Valores_inic" del objeto como recurso externo (un fichero GIF). El valor del
atributo valuetype se establece por tanto a "ref" y value es un URI que designa
el recurso.
valuetype="ref">
Obsérvese que también hemos establecido el atributo standby de modo que el
agente de usuario pueda mostrar un mensaje mientras se carga el mecanismo de
representación.
Cuando representen un elemento OBJECT, los agentes de usuario sólo deben buscar
el contenido de aquellos elementos PARAM que sean hijos directos y dárselos al
OBJECT.
Así, en el ejemplo siguiente, si se representa "obj1", "param1" se aplica a
"obj1" (y no a "obj2"). Si "obj1" no se representa y "obj2" sí, "param1" no se
tiene en cuenta, y "param2" se aplica a "obj2". Si ninguno de los OBJECT se
representa, ninguno de los PARAM se aplica.
13.3.3 Esquemas globales de nombres para objetos
La localización de la implementación de un objeto viene dada por un URI. Como
vimos en la introducción a los URIs, el primer segmento de un URI absoluto
especifica el esquema de nombres usado para transferir los datos designados por
el URI. Para documentos HTML, este esquema es normalmente "http". Algunas
aplicaciones podrían usar otros esquemas de nombres. Por ejemplo, cuando se
especifica una aplicación Java, los autores pueden usar URIs que comiencen con
java, y para aplicaciones ActiveX, los autores pueden usar "clsid".
En el ejemplo siguiente, insertamos una aplicación Java en un documento HTML.
Al establecer el atributo codetype, un agente de usuario puede decidir si
obtener la aplicación Java según su capacidad de hacerlo.
Algunos esquemas de representación necesitan información adicional para
identificar su implementación, y hay que decirles dónde encontrar esa
información. Los autores pueden dar la información de la ruta de acceso a la
implementación del objeto a través del atributo codebase.
codebase="http://bla.bla.com/java/miimplementacion/"
El siguiente ejemplo especifica (con el atributo classid) un objeto ActiveX a
través de un URI que comienza con el esquema de nombres "clsid". El atributo
data localiza los datos a representar (otro reloj).
Esta aplicación no está soportada.
13.3.4 Declaración y creación de objetos
Los objetos precedentes sólo ilustran definiciones de objetos aislados. Cuando
un documento debe contener más de un ejemplar del mismo objeto, es posible
separar la declaración de un objeto de su creación o creaciones. Esto tiene
varias ventajas:
- El agente de usuario puede obtener los datos de la red una vez (durante la
declaración) y reutilizarlos para cada ejemplar.
- Es posible crear un objeto desde una localización diferente a la de la
declaración del objeto, por ejemplo, desde un vínculo.
- Es posible especificar objetos como datos de ejecución de otros objetos.
Para declarar un objeto de modo que no sea ejecutado cuando lo lea el agente de
usuario, se establece el atributo booleano declare del elemento OBJECT. Al mismo
tiempo, los autores deben identificar la declaración estableciendo el atributo
id del elemento OBJECT en un valor único. Las creaciones posteriores del objeto
se referirán a este identificador.
Un OBJECT declarado debe aparecer en un documento antes de la primera creación
de ese OBJECT.
Se crea un objeto definido con el atributo declare cada vez que un elemento que
se refiera a ese objeto necesite que sea representado (p.ej., se activa un
vínculo que se refiere a él, se activa un objeto que se refiere a él, etc.).
En el siguiente ejemplo, declaramos un OBJECT y hacemos que se cree haciendo
referencia a él desde un vínculo. Así, el objeto puede activarse haciendo clic
en un texto resaltado, por ejemplo.
La Tierra vista desde el espacio.
...más abajo en el documento...
¡Una preciosa animación de la Tierra!
Otra manera de crear un objeto declarado de esta forma es:
El siguiente ejemplo ilustra cómo especificar valores de ejecución que son otros
objetos. En este ejemplo, enviamos texto (concretamente un poema) a un
hipotético mecanismo para ver poemas. El objeto reconoce un parámetro llamado
"fuente" (por ejemplo para representar el poema con una cierta fuente). El valor
de este parámetro es a su vez un objeto que inserta (pero que no representa) el
objeto fuente. La relación entre el objeto fuente y el objeto visor de poemas se
consigue (1) asignando el id "tribuna" a la declaración del objeto y (2)
refiriéndose a él desde el elemento PARAM del objeto visor de poemas (con
valuetype y value).
...ver el problema de KublaKhan.txt aquí...
Te estás perdiendo un visor de poemas realmente estupendo ...
Los agentes de usuario que no soporten el atributo declare deben representar los
contenidos de la declaración OBJECT.
13.4 Incluir un applet: el elemento APPLET
APPLET está desaprobado (con todos sus atributos) en favor de OBJECT.
Ver el DTD Transicional para la definición formal.
Definiciones de atributos
codebase = uri [CT]
Este atributo especifica el URI base para el applet. Si este atributo no se
especifica, entonces su valor por defecto es el mismo URI base que el del
documento actual. Los valores de este atributo sólo pueden referirse a
subdirectorios del directorio que contiene al documento actual.
Nota. Si bien la restricción a subdirectorios es una excepción a la práctica
habitual y a la especificación HTML 3.2, el Grupo de Trabajo HTML ha decidido
mantener esta restricción en esta versión de la especificación por motivos de
seguridad.
code = cdata [CS]
Este atributo especifica o bien el nombre del fichero class que contiene la
subclase Applet compilada del applet, o bien la ruta para obtener la clase,
incluyendo al propio fichero class. Se interpreta con respecto al URI base
(codebase) del applet. Deben estar presentes o bien code o bien object.
name = cdata [CS]
Este atributo especifica un nombre para la instancia del applet, lo cual hace
posible que los applets de la misma página se encuentren (y se comuniquen)
entre sí.
archive = lista de uris [CT]
Esta lista especifica una lista de URIs separados por comas de archivos que
contienen clases y otros recursos que serán "precargados". Las clases se
cargan usando una instancia de un AppletClassLoader con el codebase dado. Los
URIs relativos se interpretan con respecto al URI base (codebase) del applet.
La precarga de recursos puede mejorar significativamente el rendimiento de
los applets.
object = cdata [CS]
Este atributo indica el nombre de un recurso que contiene un representación
serializada del estado de un applet. Se interpreta relativamente al URI base
(codebase) del applet. Los datos serializados contienen el nombre de la clase
del applet, pero no la implementación. El nombre de la clase se utiliza para
obtener la implementación en un archivo o fichero class.
Cuando el applet es "deserializado", se invoca el método start(), pero no el
método init(). Los atributos que eran válidos cuando el objeto original fue
serializado no son restaurados. Cualquier atributo que se pase a esta
instancia APPLET estará a disposición del applet. Los autores deberían usar
esta característica con extrema cautela. Un applet debería ser detenido antes
de ser serializado.
Deben estar presentes o bien code o bien object. Si se dan tanto code como
object y proporcionan nombres de clases diferentes, se produce un error.
width = longitud [CI]
Este atributo especifica la anchura inicial del área de presentación del
applet (sin incluir las ventanas o cuadros de diálogo que cree el applet).
height = longitud [CI]
Este atributo especifica la altura inicial del área de presentación del
applet (sin incluir las ventanas o cuadros de diálogo que cree el applet).
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- title (título del elemento)
- style (información de estilo en línea)
- alt (texto alternativo)
- align, hspace, vspace (presentación visual de objetos, imágenes y
aplicaciones)
Este elemento, admitido por todos los browsers con soporte Java, permite a los
diseñadores incluir un applet Java en un documento HTML. Ha sido desaprobado en
favor del elemento OBJECT.
El contenido de APPLET actúa como información alternativa para agentes de
usuario que no soporten este elemento o que estén configurados para no soportar
applets. En cualquier otro caso los agentes de usuario deben ignorar el
contenido.
EJEMPLO DESAPROBADO:
En el siguiente ejemplo, el elemento APPLET incluye un applet Java en el
documento. Al no haberse suministrado un codebase, se supone que el applet está
en el mismo directorio que el documento actual.
Applet Java que dibuja burbujas animadas.
Este ejemplo puede reformularse con OBJECT de esta forma:
Applet Java que dibuja burbujas animadas.
Se pueden proporcionar valores iniciales al applet por medio del elemento PARAM.
EJEMPLO DESAPROBADO:
El siguiente ejemplo de applet Java:
Applet Java que reproduce un sonido de bienvenida.
puede reformularse de la siguiente manera con OBJECT:
Applet Java que reproduce un sonido de bienvenida.
13.5 Notas sobre la inclusión de documentos
Algunas veces, más que crear un vínculo a un documento, lo que quiere un autor
es incluirlo directamente en un documento HTML principal. Para esto, los autores
pueden usar o bien el elemento IFRAME o bien el elemento OBJECT, pero ambos
elementos difieren en varios aspectos. No solamente tienen los dos elementos
modelos de contenido diferentes, sino que el elemento IFRAME puede ser un marco
destino (veáse la sección sobre la especificación de información sobre el marco
destino para más detalles) y puede ser "seleccionado" por un agente de usuario
dirigiendo a él el foco para imprimir, ver el fuente HTML, etc. Los agentes de
usuario pueden representar los marcos seleccionados de modo que se distingan de
los marcos no seleccionados (p.ej., dibujando un borde alrededor del marco
seleccionado).
Un documento incluido es completamente independiente del documento en el cual se
incluye. Por ejemplo, los URIs relativos del documento incluido se completan de
acuerdo con el URI base del documento incluido, no con el del documento
principal. Un documento incluido sólo se representa dentro de otro documento
(p.ej., en una subventana); por lo demás sigue siendo independiente.
Por ejemplo, la línea siguiente incluye los contenidos de incluye_me.html en el
lugar en que aparece la definición OBJECT.
...texto antes...
Atención: no se pudo incluir incluye_me.html.
...texto después...
Recuérdese que los contenidos de OBJECT sólo deben ser representados si no se
puede cargar el fichero especificado por el atributo data.
El comportamiento de un agente de usuario en los casos en que un fichero se
incluye a sí mismo queda sin definir.
13.6 Mapas de imágenes
Los mapas de imágenes permiten a los autores especificar regiones en una imagen
u objeto y asignar una acción específica a cada región (p.ej., abrir un
documento, ejecutar un programa, etc.). Cuando la región es activada por el
usuario, se ejecuta la acción.
Un mapa de imágenes se crea asociando un objeto con una especificación de las
áreas geométricas sensibles del objeto.
Hay dos tipos de mapas de imágenes:
- En el lado del cliente. Cuando un usuario activa una región de un mapa de
imágenes en el lado del cliente con un ratón, las coordenadas en píxeles son
interpretadas por el agente de usuario. El agente de usuario selecciona el
vínculo especificado por la región activada y lo sigue.
- En el lado del servidor. Cuando un usuario activa una región de un mapa de
imágenes en el lado del servidor, las coordenadas en píxeles son enviadas al
agente del lado del servidor especificado por el atributo href del elemento
A. El agente del servidor interpreta las coordenadas y realiza alguna acción.
Se prefieren los mapas de imágenes en el cliente que los mapas de imágenes en el
servidor por dos razones: son accesibles a las personas que utilizan agentes de
usuario no gráficos y permiten saber en todo momento si el apuntador está sobre
una región activa o no.
13.6.1 Mapas de imágenes en el lado del cliente: los elementos MAP y AREA
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos de MAP
name = cdata [CI]
Este atributo asigna un nombre al mapa de imágenes definido por un elemento
MAP.
Definiciones de atributos de AREA
shape = default|rect|circle|poly [CI]
Este tributo especifica la forma de una región. Valores posibles:
- default: Especifica la región completa.
- rect: Define una región rectangular.
- circle: Define una región circular.
- poly: Define una región poligonal.
coords = coordenadas [CN]
Este atributo especifica la posición y la forma en la pantalla. El número y
orden de estos valores depende de la forma que está siendo definida.
Combinaciones posibles:
- rect: x-izquierda, y-superior, x-derecha, y-inferior.
- circle: x-centro, y-centro, radio. Nota. Cuando el valor del radio sea un
valor porcentual, los agentes de usuario deberían calcular el valor final
del radio basándose en la anchura y altura del objeto asociado. El radio
debería ser el menor valor de los dos.
- poly: x1, y1, x2, y2, ..., xN, yN. El primer par de coordenadas x, y
debería ser igual al último para cerrar el polígono. Cuando estas
coordendas no sean iguales, los agentes de usuario deberían añadir un par
adicional de coordenadas para cerrar el polígono.
Las coordenadas son relativas a la esquina superior izquierda del objeto.
Todos los valores son longitudes. Todos los valores van separados por comas.
N.T.: La especificación no aclara si las coordenadas x,y se miden respecto al
cero o al uno, es decir, si las coordenadas de la esquina superior izquierda
son (0,0) o (1,1).
nohref [CI]
Si está establecido, este atributo booleano especifica que una región no
tiene asociado ningún vínculo.
Atributo para asociar un mapa de imágenes con un elemento
usemap = uri [CT]
Este atributo asocia un mapa de imágenes con un elemento. El mapa de imágenes
está definido por un elemento MAP. El valor de usemap debe ser igual al valor
del atributo name del elemento MAP asociado.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- name (envío de objetos con formularios)
- alt (texto alternativo)
- href (referencias de vínculos) target (información sobre el marco destino)
- tabindex (navegación con tabulador)
- accesskey (teclas de acceso)
- shape (mapas de imágenes)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur (eventos
intrínsecos)
El elemento MAP especifica un mapa de imágenes en el lado del cliente (u otro
mecanismo de navegación) que puede ser asociado con otros elementos (IMG,
OBJECT, o INPUT). Un mapa de imágenes se asocia a un elemento a través del
atributo usemap del elemento. El elemento MAP puede ser utilizado sin una imagen
asociada por mecanismos generales de navegación.
La presencia del atributo usemap en un elemento OBJECT implica que el objeto que
incluye es una imagen. Además, cuando el elemento OBJECT tenga asociado un mapa
de imágenes en el lado del cliente, los agentes de usuario pueden permitir la
interacción del usuario con el elemento OBJECT sólo en lo que se refiere al mapa
de imágenes en el lado del cliente. Esto permite a los agentes de usuario (tales
como un navegador de audio o un robot) interactuar con el OBJECT sin tener que
procesarlo; el agente de usuario puede incluso optar por no obtener (o procesar)
el objeto. Cuando un OBJECT tenga asociado un mapa de imágenes, los autores no
deberían esperar que el objeto sea obtenido o procesado por todos los agentes de
usuario.
El modelo de contenido del elemento MAP permite a los autores lo siguiente:
1. Uno o más elementos AREA. Estos elementos no tienen contenido, sino que
especifican las regiones geométricas del mapa de imágenes y los vínculos
asociados con cada región. Obsérvese que en general los agentes de usuario
no representan los elementos AREA. Por tanto, los autores deben proporcionar
texto alternativo para cada AREA con el atributo alt (ver abajo más
información sobre cómo especificar texto alternativo).
2. Contenido en bloque. Este contenido debería incluir elementos A que
especifiquen regiones geométricas del mapa de imágenes y el vínculo asociado
con cada región. Obsérvese que el agente de usuario debería representar el
contenido en bloque del elemento MAP. Los autores deberían usar este método
para crear documentos más accesibles.
Cuando un elemento MAP contenga contenido mixto (tanto elementos AREA como
contenido en bloque), los agentes de usuario deberían ignorar los elementos
AREA.
Los autores deberían especificar la geometría de un mapa de imágenes
completamente con elementos AREA, o completamente con elementos A, o
completamente con ambos si el contenido es mixto. Los autores pueden querer usar
contenido mixto para que los agentes de usuario antiguos utilicen la geometría
del mapa especificada por los elementos AREA y que los agentes de usuario
modernos saquen partido de la riqueza del contenido en bloque.
Si dos o más regiones se superponen, tiene prioridad la región definida por el
elemento que aparece antes en el documento.
Los agentes de usuario y los autores deberían ofrecer alternativas textuales a
los mapas de imágenes gráficos para los casos en que los gráficos no estén
disponibles o en que el usuario no pueda acceder a ellos. Por ejemplo, los
agentes de usuario pueden usar el texto alt para crear vínculos textuales en
lugar de un mapa de imágenes gráfico. Estos vínculos pueden ser activados de
diferentes maneras (con el teclado, activación por voz, etc.).
Nota. MAP no es compatible con los agentes de usuario HTML 2.0.
Ejemplos de mapas de imágenes en el lado del cliente
En el ejemplo siguiente, creamos un mapa de imágenes en el lado del cliente para
el elemento OBJECT. No queremos representar los contenidos del mapa de imágenes
cuando se represente el OBJECT, así que "ocultamos" el elemento MAP dentro del
contenido del elemento OBJECT. En consecuencia, los contenidos del elemento MAP
sólo serán representados si el OBJECT no puede ser representado.
¡El sitio chévere!
Navegar por este sitio:
Acceder a la Guía |
Ir |
Buscar |
Top Ten
Podemos querer representar los contenidos del mapa de imágenes incluso si el
agente de usuario puede representar el OBJECT. Por ejemplo, podemos querer
asociar un mapa de imágenes con un elemento OBJECT e incluir una barra de
navegación textual en la parte inferior de la página. Para ello, definimos el
elemento MAP fuera del OBJECT:
¡El sitio chévere!
...aquí el resto de la página...
Navegar por este sitio:
Acceder a la Guía |
Ir |
Buscar |
Top Ten
En el siguiente ejemplo, creamos un mapa de imágenes similar, esta vez
utilizando el elemento AREA. Obsérvese el uso del texto alt:
Esto es una barra de navegación.
Aquí tenemos una versión similar usando el elemento IMG en lugar de OBJECT (con
la misma declaración MAP):
El siguiente ejemplo ilustra cómo pueden compartirse los mapas de imágenes.
Los elementos OBJECT anidados son útiles para proporcionar "redes de seguridad"
en caso de que un agente de usuario no soporte ciertos formatos. Por ejemplo:
texto que describe la imagen...
Si el agente de usuario no soporta el formato PNG, intenta representar la imagen
GIF. Si no soporta GIF (es decir, es un agente de usuario por voz), utiliza la
descripción textual proporcionada como contenido del elemento OBJECT interior.
Cuando los elementos OBJECT se anidan de esta manera, los autores pueden
compartir mapas de imágenes entre ellos:
Navegar por este sitio:
Acceder a la Guía |
Ir |
Buscar |
Top Ten
El siguiente ejemplo ilustra cómo pueden especificarse elementos A para crear
zonas inactivas dentro de un mapa de imágenes. El primer vínculo especifica una
pequeña región circular sin vínculo asociado. El segundo vínculo especifica una
región circular más grande con el mismo centro. La combinación de ambos define
un anillo cuyo centro es inactivo y cuya corona es activa. El orden de las
definiciones de los vínculos es importante, ya que el círculo menor debe
prevalecer sobre el círculo mayor.
Yo soy inactivo.
Yo soy activo.
Análogamente, el atributo nohref del elemento AREA declara que una región
geométrica no tiene un vínculo asociado.
13.6.2 Mapas de imágenes en el lado del servidor
Los mapas de imágenes en el lado del servidor puede ser interesantes en aquellos
casos en que el mapa de imágenes sea demasiado complicado para un mapa de
imágenes en el lado del cliente.
Sólo es posible definir un mapa de imágenes el lado del servidor para los
elementos IMG e INPUT. En el caso de IMG, el IMG debe estar dentro de un
elemento A y debe establecerse el atributo booleano ismap ([CI]). En el caso de
INPUT, el INPUT debe ser del tipo "image".
Cuando el usuario activa el vínculo haciendo clic sobre la imagen, las
coordenadas de pantalla se envían directamente al servidor donde se aloja el
documento. Las coordenadas de pantalla se expresan como píxeles de pantalla
relativos a la imagen. Para información normativa sobre la definición de un
píxel y cómo escalarlo, consulte [CSS1].
En el siguiente ejemplo, la región activa define un vínculo en el lado del
servidor. Así, un clic en cualquier parte de la imagen hará que las coordenadas
del clic sean enviadas al servidor.
El lugar del clic se pasa al servidor como sigue. El agente de usuario crea un
nuevo URI a partir del URI especificado por el atributo href del elemento A,
añadiendo un '?' seguido de las coordenadas x e y, separadas por una coma. A
continuación se sigue el vínculo especificado por el nuevo URI. Por ejemplo, en
el ejemplo dado, si el usuario hace clic en x=10, y=27, entonces el URI creado
es "http://www.acme.com/cgi-bin/competicion?10,27".
Los agentes de usuario que no ofrezcan al usuario medios para especificar unas
coordenadas específicas (p.ej., agentes de usuario no gráficos que reciban la
entrada por teclado, agentes de usuario por voz, etc.) deberían enviar las
coordenadas "0,0" al servidor cuando se activa el link.
13.7 Presentación visual de imágenes, objetos y aplicaciones
Todos los atributos de los objetos IMG y OBJECT que guarden relación con la
alineación y la presentación han sido desaprobados en favor de las hojas de
estilo.
13.7.1 Anchura y altura
Definiciones de atributos
width = longitud [CN]
Invalidar anchura de imagen u objeto.
height = longitud [CN]
Invalidar altura de imagen u objeto.
Si se especifican, los atributos width y height dicen a los agentes de usuario
que invaliden el tamaño original de la imagen u objeto en favor de estos
valores.
Cuando el objeto es una imagen, se escala. Los agentes de usuario deberían hacer
lo posible para escalar el objeto o imagen de modo que se respeten la anchura y
altura especificadas por el autor. Obsérvese que las longitudes expresadas como
porcentajes se basan el espacio horizontal o vertical disponible actualmente, no
en el tamaño original de la imagen, objeto o aplicación.
Los atributos height y width dan a los agentes de usuario una idea del tamaño de
una imagen u objeto para que puedan reservar espacio para ellos y continuar la
representación del documento mientras esperan a los datos de la imagen.
13.7.2 Espacio en blanco alrededor de imágenes y objetos
Definiciones de atributos
hspace = píxeles [CN]
Desaprobado. Este atributo especifica la cantidad de espacio en blanco a
insertar a la izquierda y a la derecha de un IMG, APPLET, u OBJECT. El valor
por defecto no está especificado, pero generalmente es una longitud pequeña
distinta de cero.
vspace = píxeles [CN]
Desaprobado. Este atributo especifica la cantidad de espacio en blanco a
insertar encima y debajo de un IMG, APPLET, u OBJECT. El valor por defecto no
está especificado, pero generalmente es una longitud pequeña distinta de
cero.
13.7.3 Bordes
Una imagen u objeto puede estar rodeada de un borde (p.ej., cuando se especifica
un borde por el usuario o cuando la imagen es el contenido de un elemento A).
Definiciones de atributos
border = píxeles [CN]
Desaprobado. Este atributo especifica la anchura del borde de un IMG u
OBJECT, en píxeles. El valor por defecto de este atributo depende del agente
de usuario.
13.7.4 Alineación
Definiciones de atributos
align = bottom|middle|top|left|right
Desaprobado. Este atributo especifica la posición de un IMG, OBJECT, o APPLET
con respecto a su contexto.
Los siguientes valores de align se refieren a la posición del objeto con
respecto al texto que le rodea:
- bottom: significa que la parte inferior del objeto debería estar alineada
verticalmente con la línea de base actual. Este es el valor por defecto.
- middle: significa que el centro del objeto debería estar alineado
verticalmente con la línea de base actual.
- top: significa que la parte superior del objeto debería estar alineada
verticalmente con la parte superior de la línea de texto actual.
Hay otros dos valores, left y right, que hacen que la imagen "flote" hacia el
margen izquierdo o derecho actual. Se habla sobre ellos en la sección sobre
objetos flotantes.
Diferentes interpretaciones de align. Los agentes de usuario pueden interpretar
de manera diferente el atributo align. Algunos sólo tienen en cuenta lo que haya
ocurrido en la línea antes del elemento, algunos tienen en cuenta el texto que
hay a ambos lados del elemento.
13.8 Cómo especificar texto alternativo
Definiciones de atributos
alt = texto [CS]
Este atributo especifica texto alternativo para agentes de usuario que no
puedan mostrar imágenes, formularios o aplicaciones. El idioma de este texto
alternativo está especificado por el atributo lang.
Varios elementos no textuales (IMG, AREA, APPLET e INPUT) permiten a los autores
especificar texto alternativo que sirva como contenido cuando el elemento no
pueda ser representado normalmente. El especificar texto alternativo ayuda a los
usuarios que no tengan terminales gráficas, a los usuarios cuyos navegadores no
soporten formularios, a los usuarios con discapacidades visuales, a aquellos que
utilicen sintetizadores de voz, a aquellos que hayan configurado sus agentes de
usuario para no mostrar imágenes, etc.
El atributo alt debe especificarse para los elementos IMG y AREA. Es opcional
para los elementos INPUT y APPLET.
Si bien el texto alternativo puede ser muy útil, hay que tratarlo con cuidado.
Los autores deberían seguir las siguientes pautas:
- No especificar texto alternativo irrelevante cuando las imágenes incluidas
sólo sirven para dar formato a una página, por ejemplo, alt="bola roja" sería
inapropiado para una imagen que añade una bola roja para decorar un título o
un párrafo. En tales casos, el texto alternativo debería ser la cadena vacía
(""). En cualquier caso se aconseja a los autores que eviten usar imágenes
para dar formato a las páginas, y que utilicen hojas de estilo en su lugar.
- No especificar texto alternativo sin significado (p.ej., "relleno"). Esto no
solamente frustrará a los usuarios, sino que ralentizará a los agentes de
usuario que deban convertir texto a salida por voz o Braille.
Los implementadores deberían consultar la sección sobre accessibilidad para
información sobre cómo tratar los casos en que se omite el texto alternativo.
================================================================================
14 Hojas de estilo
--------------------------------------------------------------------------------
Contenidos
1. Introducción a las hojas de estilo
2. Añadir estilos al HTML
1. Especificación del lenguaje de hojas de estilo por defecto
2. Información de estilo en línea
3. Información de estilo en cabecera: el elemento STYLE
4. Tipos de medios
3. Hojas de estilo externas
1. Hojas de estilo preferentes y alternativas
2. Especificación de hojas de estilo externas
4. Hojas de Estilo en Cascada
1. Cascadas dependientes del medio
2. Herencia y cascada
5. Ocultar datos de estilo a los agentes de usuario
6. Vinculación de hojas de estilo mediante encabezados HTTP
--------------------------------------------------------------------------------
14.1 Introducción a las hojas de estilo
Las hojas de estilo representan un avance importante para los diseñadores de
páginas web, al darles un mayor rango de posibilidades para mejorar la
apariencia de sus páginas. En los entornos científicos en que la Web fue
concebida, la gente estaba más preocupada por el contenido de sus páginas que
por su presentación. A medida que la Web era descubierta por un espectro mayor
de personas de distintas procedencias, las limitaciones del HTML se convirtieron
en fuente de continua frustración, y los autores se vieron forzados a superar
las limitaciones estilísticas del HTML. Aunque las intenciones han sido buenas
-- mejorar la presentación de las páginas web --, las técnicas para conseguirlo
han tenido efectos secundarios negativos. Entre estas técnicas, que dan buenos
resultados para algunas personas, algunas veces, pero no siempre ni para todas
las personas, se incluyen:
- La utilización de extensiones propietarias del HTML
- Conversión del texto en imágenes
- Utilización de imágenes para controlar el espacio en blanco
- La utilización de tablas para la organización de las páginas
- Escribir programas en lugar de usar HTML
Estas técnicas incrementan considerablemente la complejidad de las páginas web,
ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y
crean dificultades para las personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al
limitado rango de mecanismos de presentación del HTML. Con las hojas de estilo
es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las
líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de
las fuentes, y otros muchos detalles.
Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero
"especial.css") hace que el color del texto de un párrafo sea verde ("green") y
lo rodea de un borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}
Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con
el elemento LINK:
Un documento con una hoja de estilo externa
Este párrafo debería tener texto especial verde.
HTML 4 soporta las siguientes características de hojas de estilo:
Colocación flexible de la información de estilo
Al colocar las hojas de estilo en ficheros separados es más fácil
reutilizarlas. Algunas veces es útil incluir instrucciones de representación
dentro del documento al que se aplican, ya sea agrupadas al comienzo del
documento, o en atributos de los elementos a lo largo del cuerpo del
documento. Para facilitar la gestión de estilos a nivel de sitio, esta
especificación describe cómo utilizar los encabezados HTTP para especificar
qué hojas de estilo se aplican a un documento.
Independencia de lenguajes de hojas de estilo específicos
Esta especificación no liga el HTML con ningún lenguaje de hojas de estilo en
particular. Esto permite que se puedan usar otros lenguajes diferentes, desde
los lenguajes más simples válidos para la mayoría de los usuarios, hasta los
más complejos, útiles para una minoría de usuarios con necesidades muy
especializadas. Todos los ejemplos que se incluyen en lo que sigue se sirven
del lenguaje CSS (Hojas de Estilo en Cascada, Cascading Style Sheets,
[CSS1]), pero también son posibles otros lenguajes de hojas de estilo.
Cascada
Se llama así a la capacidad que proporcionan algunos lenguajes de hojas de
estilo tales como CSS que permiten que las informaciones de estilo
provenientes de varias fuentes puedan combinarse. Éstas podrían ser, por
ejemplo, las guías de estilo de una empresa, los estilos comunes a un grupo
de documentos, y los estilos específicos de un documento en particular. Al
almacenarse independientemente, las hojas de estilo pueden reutilizarse, lo
cual simplifica las tareas de diseño y hace más efectiva la utilización de la
memoria caché de la red. La cascada define una secuencia ordenada de hojas de
estilo en la que las reglas de las últimas hojas tienen una prioridad mayor
que las de las primeras. No todos los lenguajes de hojas de estilo soportan
la cascada.
Dependencias de los medios
HTML permite a los autores especificar sus documentos de una manera
independiente del medio. Esto permite a los usuarios acceder a las páginas
web usando una amplia gama de dispositivos y medios, p.ej., pantallas
gráficas para ordenadores bajo Windows, Macintosh OS y X11, dispositivos para
aparatos de televisión, teléfonos adaptados y dispositivos portátiles PDA,
navegadores basados en voz, y dispositivos táctiles Braille.
Las hojas de estilo, en contraste, se aplican a medios o grupos de medios
específicos. Una hoja de estilo diseñada para una pantalla puede ser
aplicable para una salida impresa, pero es de poca utilidad para los
navegadores basados en voz. Esta especificación le permite definir categorías
generales de medios a los que es aplicable una hoja de estilo dada. Esto
permite a los agentes de usuario evitar la descarga de hojas de estilo que no
sean apropiadas. Los lenguajes de hojas de estilo pueden incluir
características para describir dependencias del medio dentro de una misma
hoja de estilo.
Estilos alternativos
Los autores pueden querer ofrecer a los lectores varias maneras diferentes de
ver un documento. Por ejemplo, una hoja de estilo para representar documentos
compactos con fuentes pequeñas, o una que especifique fuentes más grandes
para una lectura más fácil. Esta especificación permite a los autores
especificar una hoja de estilo preferente así como hojas alternativas que se
dirijan a medios o usuarios específicos. Los agentes de usuario deberían dar
a los usuarios la oportunidad de seleccionar una de las hojas de estilo
alternativas o incluso de desactivar las hojas de estilo completamente.
Consideraciones de rendimiento
Algunas personas han expresado su preocupación acerca de los posibles
problemas de rendimiento relacionados con las hojas de estilo. Por ejemplo,
la obtención de una hoja de estilo externa puede retrasar la presentación del
documento al usuario. Algo parecido sucede si la cabecera del documento
contiene un conjunto muy grande de reglas de estilo.
La propuesta actual resuelve estos problemas, pues permite a los autores
incluir instrucciones de representación dentro de cada elemento HTML. Así, la
información de representación siempre estará disponible en el momento en que
el agente de usuario quiera representar cada elemento.
En muchos casos los autores sacarán partido de una hoja de estilo común a un
grupo de documentos. En este caso, la distribución de reglas de estilo a lo
largo del documento conducirá a un rendimiento peor que si se usara una hoja
de estilo vinculada, ya que para la mayoría de los documentos la hoja de
estilo ya estará almacenada en la caché local. La disponibilidad pública de
hojas de estilo de calidad potenciará este efecto.
14.2 Añadir estilos al HTML
Nota. La hoja de estilo por defecto del HTML 4 que se incluye en [CSS2] expresa
la información de estilo por defecto generalmente aceptada para cada elemento. Los autores, así como los implementadores, pueden encontrar en ella un recurso
útil.
Los documentos HTML pueden contener reglas de hojas de estilo directamente, o
bien pueden importar hojas de estilo.
Se puede usar cualquier lenguaje de hojas de estilo con HTML. Un lenguaje simple
de hojas de estilo puede ser suficiente para la mayoría de los usuarios, pero
para otras necesidades más especializadas pueden ser apropiados otros lenguajes.
Esta especificación utiliza para los ejemplos el lenguaje de estilo llamado
"Hojas de Estilo en Cascada" ("Cascading Style Sheets", [CSS1]), abreviado CSS.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
14.2.1 Especificación del lenguaje de hojas de estilo por defecto
Los autores deben especificar el lenguaje de hojas de estilo de la información
de estilo asociada con un documento HTML.
Los autores deberían usar el elemento META para especificar el lenguaje de hojas
de estilo por defecto de un documento. Por ejemplo, para especificar que el
valor por defecto es CSS, los autores deberían poner la siguiente declaración en
la sección HEAD de sus documentos:
El lenguaje de hojas de estilo por defecto también puede ser establecido con
encabezados HTTP. La declaración META de arriba es equivalente al encabezado
HTTP siguiente:
Content-Style-Type: text/css
Los agentes de usuario deberían determinar el lenguaje de hojas de estilo por
defecto de acuerdo con los siguientes pasos (ordenados de mayor a menor
prioridad):
1. Si alguna declaración META especifica "Content-Style-Type", la última de
ellas en el flujo de caracteres determina el lenguaje de hojas de estilo por
defecto.
2. De otro modo, si algún encabezado HTTP especifica "Content-Style-Type", el
último de ellos en el flujo de caracteres determina el lenguaje de hojas de
estilo por defecto.
3. De otro modo, el lenguaje de hojas de estilo por defecto es "text/css".
Los documentos que incluyan elementos que especifiquen el atributo style pero
que no definan un lenguaje de hojas de estilo por defecto son incorrectos. Las
herramientas de creación deberían generar información de lenguaje de hojas de
estilo por defecto (normalmente una declaración META) de modo que los agentes de
usuario no tengan que atenerse al valor por defecto "text/css".
14.2.2 Información de estilo en línea
Definiciones de atributos
style = estilo [CN]
Este atributo especifica información de estilo para el elemento actual.
La sintaxis del valor del atributo style viene determinada por el lenguaje de
hojas de estilo por defecto. Por ejemplo, para los estilos [[CSS2]] en línea, se
usa la sintaxis de bloque de declaraciones descrita en la sección 4.1.8 (sin las
llaves).
Este ejemplo CSS establece información sobre el color y el tamaño de la fuente
del texto de un párrafo específico.
¿No son maravillosas las hojas de estilo?
En CSS, las declaraciones de propiedades son de la forma "nombre : valor" y
están separadas por un punto y coma.
Para especificar información de estilo en línea para más de un elemento, los
autores deberían usar el elemento STYLE. Para lograr una flexibilidad óptima,
los autores deberían definir los estilos en hojas de estilo externas.
14.2.3 Información de estilo en cabecera: el elemento STYLE
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
type = tipo de contenido [CI]
Este atributo especifica el lenguaje de hojas de estilo de los contenidos del
elemento y prevalece sobre el lenguaje de hojas de estilo por defecto. El
lenguaje de hojas de estilo se especifica como un tipo de contenido (p.ej.,
"text/css"). Los autores deben proporcionar un valor para este atributo; no
hay valor por defecto para este atributo.
media = descriptores de medios [CI]
Este atributo especifica el medio destino al que se dirige la información de
estilo. Puede ser un solo descriptor de medios, o una lista de ellos
separados por comas. El valor por defecto de este atributo es "screen"
(pantalla).
Atributos definidos en otros lugares
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
El elemento STYLE permite a los autores poner reglas de hojas de estilo en la
cabecera del documento. HTML permite cualquier número de elementos STYLE en la
sección HEAD de un documento.
Los agentes de usuario que no soporten hojas de estilo, o que no soporten el
lenguaje de hojas de estilo utilizado por un elemento STYLE en particular, deben
ocultar los contenidos del elemento STYLE. Es un error representar el contenido
como parte del texto del documento. Algunos lenguajes de hojas de estilo
soportan sintaxis para ocultar el contenido a agentes de usuarios no conformes.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
Algunas implementaciones de hojas de estilo pueden permitir una gama más amplia
de reglas en el elemento STYLE que en el atributo style. Por ejemplo, con CSS,
pueden declararse reglas dentro de un elemento STYLE para:
- Todas las apariciones de un elemento de HTML específico (p.ej., todos los
elementos P, todos los elementos H1, etc.)
- Todas las apariciones de un elemento de HTML que pertenezcan a una clase
específica (es decir, cuyo atributo class tome cierto valor).
- Las apariciones únicas de un elemento de HTML (es decir, cuyo atributo id
tome cierto valor).
Las reglas de precedencia y herencia de las reglas de estilo dependen del
lenguaje de hojas de estilo.
La siguiente declaración STYLE CSS pone un borde alrededor de todos los
elementos H1 del documento y los centra en la página.
Para especificar que esta información de estilo sólo debería aplicarse a los
elementos H1 de una clase específica, la modificamos como sigue:
Este H1 está afectado por nuestro estilo
Este no está afectado por nuestro estilo
Finalmente, para limitar el alcance de la información de estilo a una sola
aparición de H1, establecemos el atributo id:
Este H1 no está afectado
Este H1 está afectado por el estilo
Este H1 no está afectado
Aunque se puede especificar información de estilo prácticamente para cualquier
elemento, hay dos elementos, DIV y SPAN, que son particularmente útiles en el
sentido de que no imponen ningún significado presentacional (aparte de la
distinción en bloque/en línea). Combinados con hojas de estilo, estos elementos
permiten a los usuarios extender el HTML indefinidamente, en especial si se
utilizan junto con los atributos class e id.
En el siguiente ejemplo, utilizamos el elemento SPAN para especificar que el
estilo de fuente de las primeras palabras de un párrafo sea versalitas
("small-caps").
Las primeras palabras
de este párrafo van en versalitas.
En el siguiente ejemplo, utilizamos el elemento DIV y el atributo class para
establecer la justificación del texto de una serie de párrafos que constituyen
el abstracto de un artículo científico. Esta información de estilo podría
reutilizarse para otras secciones de abstracto especificando el valor
correspondiente del atributo class en cualquier otro lugar del documento.
La gama de productos Gran Jefe es nuestra apuesta
para el año que viene. Este informe sienta las bases
para confrontar a Gran Jefe con los productos de la
competencia.
Gran Jefe reemplaza a nuestra gama "Commander",
si bien ésta seguirá de momento en catálogo.
14.2.4 Tipos de medios
HTML permite a los autores diseñar documentos que saquen partido de las
características de los medios en los que el documento vaya a ser representado
(p.ej., pantallas gráficas, pantallas de televisión, dispositivos de mano,
navegadores basados en voz, dispositivos táctiles Braille, etc.). Al especificar
el atributo media, los autores permiten a los agentes de usuario cargar y
aplicar las hojas de estilo de manera selectiva. Consulte la lista de
descriptores de medios reconocidos.
Las siguientes declaraciones de ejemplo se aplican a elementos H1. Cuando se
proyecten en una reunión de negocios, todos ellos aparecerán en azul. Cuando se
impriman, aparecerán centrados.
Este ejemplo añade efectos de sonido a los vínculos para su uso en salidas por
voz:
El control de medios es particularmente interesante cuando se aplica a hojas de
estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen
de la red únicamente aquellas hojas de estilo que se apliquen el dispositivo
actual. Por ejemplo, los navegadores basados en voz pueden evitar la descarga de
hojas de estilo diseñadas para la representación visual. Veáse la sección sobre
cascadas dependientes del medio para más información.
14.3 Hojas de estilo externas
Los autores pueden separar las hojas de estilo de los documentos HTML. Esto
ofrece varias ventajas:
- Los autores y los administradores de sitios web pueden compartir hojas de
estilo entre varios documentos (y sitios).
- Los autores pueden cambiar la hoja de estilo sin necesidad de hacer
modificaciones en el documento.
- Los agentes de usuario pueden cargar hojas de estilo selectivamente (en
función de los descriptores de medios).
14.3.1 Hojas de estilo preferentes y alternativas
HTML permite a los autores asociar cualquier número de hojas de estilo externas
a un documento. El lenguaje de hojas de estilo define el modo en que
interaccionan varias hojas de estilo (por ejemplo, las reglas de "cascada" de
CSS).
Los autores pueden especificar cualquier número de hojas de estilo mutuamente
excluyentes llamadas hojas de estilo alternativas. Los usuarios pueden
seleccionar su hoja favorita según sus preferencias. Por ejemplo, un autor puede
especificar una hoja de estilo diseñada para pantallas pequeñas y otra para
usuarios con poca visión (p.ej., con fuentes grandes). Los agentes de usuario
deberían permitir a los usuarios seleccionar las hojas de estilo alternativas.
El autor puede especificar que una de las alternativas es una hoja de estilo
preferente. Los agentes de usuario deberían aplicar la hoja de estilo preferente
del autor a menos que el usuario haya seleccionado una alternativa diferente.
Los autores pueden agrupar varias hojas de estilo alternativas (incluyendo las
hojas de estilo preferentes del autor) bajo un nombre de estilo común. Cuando un
usuario selecciona un nombre de estilo, el agente de usuario debe aplicar todas
las hojas de estilo con ese nombre. Los agentes de usuario no deben aplicar
hojas de estilo alternativas con un nombre de estilo diferente. La sección sobre
especificación de hojas de estilo externas explica cómo dar un nombre a un grupo
de hojas de estilo.
Los autores también pueden especificar hojas de estilo persistentes que los
agentes de usuario deben aplicar además de cualquier hoja de estilo alternativa.
Los agentes de usuario deben respetar los descriptores de medios al aplicar
cualquier hoja de estilo.
Los agentes de usuario también deberían permitir a los usuarios deshabilitar
completamente las hojas de estilo del autor, en cuyo caso el agente de usuario
no debería aplicar ninguna hoja de estilo persistente ni alternativa.
14.3.2 Especificación de hojas de estilo externas
Los autores especifican hojas de estilo externas mediante los siguientes
atributos del elemento LINK:
- Haciendo el valor de href igual a la localización del fichero de la hoja de
estilo. El valor de href es un URI.
- Haciendo que el valor del atributo type indique el lenguaje del recurso (hoja
de estilo) vinculado. Esto permite al agente de usuario evitar la descarga de
una hoja de estilo cuyo lenguaje no soporte.
- Especificando si la hoja de estilo es persistente, preferente, o alternativa:
+ Para hacer una hoja de estilo persistente, se hace el atributo rel igual a
"stylesheet" y no se establece el atributo title.
+ Para hacer una hoja de estilo preferente, se hace el atributo rel igual a
"stylesheet" y se da un nombre a la hoja de estilo mediante el atributo
title.
+ Para especificar una hoja de estilo alternativa, se hace el atributo rel
igual a "alternate stylesheet" y se da un nombre a la hoja de estilo
mediante el atributo title.
Los agentes de usuario deberían posibilitar a los usuarios ver la lista de
estilos alternativos y escoger uno de ellos. Se recomienda que el nombre de cada
opción sea el valor del atributo title.
En este ejemplo, especificamos en primer lugar una hoja de estilo persistente
localizada en el fichero miestilo.css:
Si establecemos el atributo title la convertimos en la hoja de estilo preferente
del autor:
Si añadimos la palabra clave "alternate" al atributo rel la convertimos en una
hoja de estilo alternativa:
Para más información sobre hojas de estilo externas, consulte la sección sobre
vínculos y hojas de estilo externas.
Los autores también pueden usar el elemento META para establecer la hoja de
estilo preferente del documento. Por ejemplo, para especificar que la hoja de
estilo preferente sea "compacto" (ver el ejemplo precedente), los autores pueden
incluir la siguiente línea en el HEAD:
La hoja de estilo preferente también se puede especificar mediante encabezados
HTTP. La declaración META precedente es equivalente a este encabezado HTTP:
Default-Style: "compacto"
Si hay dos o más declaraciones META o encabezados HTTP que especifiquen la hoja
de estilo preferente, la que prevalece es la última. A estos efectos, se
considera que los encabezados HTTP aparecen antes que la sección HEAD del
documento.
Si hay dos o más elementos LINK que especifiquen una hoja de estilo preferente,
el que prevalece es el primero.
Las hojas de estilo preferentes especificadas con un elemento META o con
encabezados HTTP prevalecen sobre las especificadas con el elemento LINK.
14.4 Hojas de Estilo en Cascada
Los lenguajes de hojas de estilo en cascada, tales como CSS, permiten que se
pueda combinar la información de varias fuentes. Sin embargo, no todos los
lenguajes de hojas de estilo soportan la cascada. Para definir una cascada, los
autores especifican una secuencia de elementos LINK y/o STYLE. La información de
estilo se combina en cascada según el orden en que aparecen los elementos en la
sección HEAD.
Nota. Esta especificación no especifica cómo se combinan en cascada hojas de
estilo de lenguajes de hojas de estilo distintos. Los autores deberían evitar
mezclar lenguajes de hojas de estilo.
En el siguiente ejemplo, especificamos dos hojas de estilo alternativas llamadas
"compacto". Si el usuario selecciona el estilo "compacto", el agente de usuario
debe aplicar ambas hojas de estilo externas, así como la hoja de estilo
persistente "comun.css". Si el usuario selecciona el estilo "tipos grandes",
sólo se aplicarán la hoja de estilo alternativa "tgrandes.css" y "comun.css".
Aquí tenemos un ejemplo de cascada que incluye tanto al elemento LINK como al
STYLE.
14.4.1 Cascadas dependientes del medio
Una cascada puede incluir hojas de estilo aplicables a medios diferentes. Tanto
LINK como STYLE pueden usarse con el atributo media. El agente de usuario es por
tanto responsable de filtrar aquellas hojas de estilo que no se apliquen al
medio actual.
En el siguiente ejemplo, definimos un cascada en la cual se incluyen varias
versiones de la hoja de estilo "empresa": una diseñada para su impresión, otra
para la pantalla y otra para navegadores basados en voz (útil, por ejemplo, para
leer correo electrónico en el coche). La hoja de estilo "informe" se aplica a
todos los medios. La regla de color definida por el elemento STYLE se usa para
impresoras y pantallas, pero no para la representación auditiva.
14.4.2 Herencia y cascada
Cuando el agente de usuario quiere representar un documento, necesita encontrar
valores para las propiedades de estilo, p.ej., la familia tipográfica, el tamaño
de fuente, la altura de línea, el color del texto, etc. El mecanismo exacto
depende del lenguaje de la hoja de estilo, pero en general es válida la
descripción siguiente:
Se utiliza el mecanismo de cascada cuando varias reglas de estilo se aplican
directamente a un mismo elemento. El mecanismo permite al agente de usuario
ordenar las reglas según su especificidad para determinar la regla a aplicar. Si
no encuentra ninguna regla, el siguiente paso depende de si la propiedad de
estilo puede ser heredada o no. No todas las propiedades se heredan. Para estas
propiedades el lenguaje de la hoja de estilo proporciona unos valores por
defecto que son los que se usan cuando no hay reglas explícitas para un elemento
en particular.
Si la propiedad puede ser heredada, el agente de usuario examina el elemento
contenedor inmediato para ver si hay alguna regla que se aplique a él. Este
proceso continúa hasta que se encuentra alguna regla aplicable. Este mecanismo
permite que las hojas de estilo puedan definirse de una manera compacta. Por
ejemplo, los autores pueden especificar la familia tipográfica de todos los
elementos contenidos en BODY con una sola regla que se aplique al elemento BODY.
14.5 Ocultar datos de estilo a los agentes de usuario
Algunos lenguajes de hojas de estilo soportan sintaxis pensada para permitir a
los autores ocultar el contenido de los elementos STYLE a los agentes de usuario
no conformes.
Este ejemplo ilustra cómo comentar en CSS el contenido de los elementos STYLE
para asegurarse de que los agentes de usuario antiguos y no conformes no lo
representarán como texto.
14.6 Vinculación de hojas de estilo mediante encabezados HTTP
Esta sección sólo se aplica a los agentes de usuario conformes con las versiones
de HTTP que definan un campo de encabezado Link. Obsérvese que HTTP 1.1, tal y
como se define en [RFC2616], no incluye un campo de encabezado Link (ver sección
19.6.3).
Los administradores de servidores web pueden creer conveniente configurar un
servidor de modo que una hoja de estilo se aplique a un grupo de páginas. El
encabezado HTTP Link tiene el mismo efecto que un elemento LINK con los mismos
atributos y valores. Varios encabezados Link corresponderían a varios elementos
LINK que aparecieran en el mismo orden. Por ejemplo,
Link: ; REL=stylesheet
corresponde a:
Es posible especificar varias hojas de estilo alternativas especificando varios
encabezados Link, y a continuación utilizar el atributo rel para determinar el
estilo por defecto.
En el ejemplo siguiente, se aplica "compacto" por defecto, ya que omite la
palabra clave "alternate" del atributo rel.
Link: ; rel="stylesheet"; title="compacto"
Link: ; rel="alternate stylesheet"; title="tipos grandes"
Esto debería funcionar cuando se envían documentos HTML por correo electrónico.
Algunos agentes de correo pueden alterar el orden de los encabezados de
[RFC822]. Para evitar que esto afecte al orden de cascada de las hojas de estilo
especificadas con encabezados Link, los autores pueden usar la concatenación de
encabezados para combinar varias apariciones del mismo campo de encabezado. Las
comillas sólo se necesitan si los valores de los atributos contienen algún
espacio en blanco. Utilice entidades SGML para hacer referencia a caracteres que
no se permitan en encabezados de HTML o de correo electrónico, o que sean
susceptibles de resultar afectados por el tránsito a lo largo de la red.
Los elementos LINK y META declarados implícitamente por encabezados HTTP
aparecen antes de cualquier elemento explícito LINK o META en el HEAD del
documento.
================================================================================
15 Alineación, estilos de fuente y separadores horizontales
--------------------------------------------------------------------------------
Contenidos
1. Formato
1. Color de fondo
2. Alineación
3. Objetos flotantes
- Hacer flotar a un objeto
- Texto flotante alrededor de un objeto
2. Fuentes
1. Elementos de estilo de fuente: los elementos TT, I, B, BIG, SMALL,
STRIKE, S y U
2. Elementos de modificación de fuentes: FONT y BASEFONT
3. Separadores: el elemento HR
--------------------------------------------------------------------------------
Esta sección de la especificación trata sobre algunos elementos y atributos HTML
que pueden utilizarse para el formato visual de elementos. Muchos de ellos están
desaprobados.
15.1 Formato
15.1.1 Color de fondo
Definiciones de atributos
bgcolor = color [CI]
Desaprobado. Este atributo establece el color de fondo del cuerpo del
documento o de las celdas de una tabla.
Este atributo establece el color de fondo del lienzo del cuerpo del documento
(el elemento BODY) o de las tablas (los elementos TABLE, TR, TH y TD). Con el
elemento BODY pueden utilizarse atributos adicionales para especificar el color
del texto.
Este atributo ha sido desaprobado en favor de las hojas de estilo para la
especificación de información sobre el color de fondo.
15.1.2 Alineación
Es posible alinear elementos en bloque (tablas, imágenes, objetos, párrafos,
etc.) en el lienzo con el atributo align. Aunque este atributo se puede
establecer en muchos elementos HTML, su rango de valores posibles difiere en
ocasiones de unos elementos a otros. Aquí sólo se considera el significado del
atributo align para texto.
Definiciones de atributos
align = left|center|right|justify [CI]
Desaprobado. Este atributo especifica la alineación horizontal de su elemento
con respecto al contexto circundante. Valores posibles:
- left: las líneas de texto se representan con los bordes izquierdos
alineados.
- center: las líneas de texto son centradas.
- right: las líneas de texto se representan con los bordes derechos
alineados.
- justify: las líneas de texto se justifican en ambos márgenes.
El valor por defecto depende de la dirección base del texto. Para un texto de
izquierda a derecha el valor por defecto es align=left, mientras que para un
texto de derecha a izquierda el valor por defecto es align=right.
EJEMPLO DESAPROBADO:
Este ejemplo centra un encabezado en el lienzo.
Cómo Tallar la Madera
Usando CSS, por ejemplo, podríamos conseguir el mismo efecto de la manera
siguiente:
Cómo Tallar la Madera
Cómo Tallar la Madera
Obsérvese que esto centrará todas las declaraciones H1. Podríamos reducir el
alcance del estilo estableciendo el atributo class del elemento:
Cómo Tallar la Madera
Cómo Tallar la Madera
EJEMPLO DESAPROBADO:
Análogamente, para alinear a la derecha un párrafo en el lienzo con el atributo
de HTML align podríamos tener:
...Montones de párrafos de texto...
lo cual, con CSS, se convertiría en:
Cómo Tallar la Madera
...Montones de párrafos de texto...
EJEMPLO DESAPROBADO:
Para alinear a la derecha una serie de párrafos, los agrupamos con el elemento
DIV:
...texto del primer párrafo...
...texto del segundo párrafo...
...texto del tercer párrafo...
Con CSS, la propiedad text-align se hereda del elemento padre a los hijos, y por
tanto podemos decir:
Cómo Tallar la Madera
...texto del primer párrafo...
...texto del segundo párrafo...
...texto del tercer párrafo...
Para centrar el documento completo con CSS:
Como Tallar la Madera
...el cuerpo está centrado...
El elemento CENTER es exactamente equivalente a especificar el elemento DIV con
el atributo align igual a "center". El elemento CENTER está desaprobado.
15.1.3 Objetos flotantes
Las imágenes y los objetos pueden aparecer directamente "en línea" o pueden
hacerse "flotar" a un lado de la página, alterando temporalmente los márgenes
del texto, que puede fluir por los lados del objeto.
Hacer flotar a un objeto
El atributo align aplicado a objetos, imágenes, tablas, marcos, etc., hace que
el objeto flote hasta el margen izquierdo o derecho. Los objetos flotantes en
general comienzan una nueva línea. Este atributo acepta los siguiente valores:
- left: Hace flotar al objeto hasta el margen izquierdo actual. El texto
subsiguiente fluye alrededor del borde derecho del objeto.
- right: Hace flotar al objeto hasta el margen derecho actual. El texto
subsiguiente fluye alrededor del borde izquierdo del objeto.
EJEMPLO DESAPROBADO:
El siguiente ejemplo muestra cómo hacer flotar un elemento IMG hasta el margen
izquierdo actual del lienzo.
Algunos atributos de alineación también permiten el valor "center", que no hace
que el objeto flote, sino que lo centra con respecto a los márgenes actuales.
Sin embargo, para P y DIV, el valor "center" hace que los contenidos del
elemento estén centrados.
Texto flotante alrededor de un objeto
Otro atributo, definido para el elemento BR, controla el flujo del texto
alrededor de objetos flotantes.
Definiciones de atributos
clear = none|left|right|all [CI]
Desaprobado. Especifica dónde debería aparecer la línea siguiente en un
navegador visual después del salto de línea provocado por este elemento. Este
atributo tiene en cuenta los objetos flotantes (imágenes, tablas, etc.).
Valores posibles:
- none: La siguiente línea empezará normalmente. Este es el valor por
defecto.
- left: La siguiente línea comenzará en la primera línea que quede por
debajo de los objetos que estén flotando en el margen izquierdo.
- right: La siguiente línea comenzará en la primera línea que quede por
debajo de los objetos que estén flotando en el margen derecho.
- all: La siguiente línea comenzará en la primera línea que quede por debajo
de los objetos que estén flotando en cualquiera de los dos márgenes.
Consideremos el siguiente escenario visual, en el cual el texto fluye por la
derecha de una imagen hasta que la línea se rompe con un BR:
********** -------
| | -------
| imagen | --
| |
**********
Si el atributo clear se hace igual a none, la línea que siga al BR comenzará
inmediatamente debajo de él en el margen derecho de la tabla:
********** -------
| | -------
| imagen | --
| | ------
**********
EJEMPLO DESAPROBADO:
Si el atributo clear se hace igual a left o all, la siguiente línea aparecerá
como se muestra a continuación:
********** -------
| | -------
| imagen | --
| |
**********
-----------------
Usando hojas de estilo, podríamos especificar que todos los saltos de línea
deberían comportarse de esta manera para los objetos (imágenes, tablas, etc.)
que estuvieran flotando en el margen izquierdo. Con CSS podríamos conseguirlo de
esta manera:
Para especificar este comportamiento para un elemento BR específico, podríamos
combinar la información de estilo y el atributo id:
...
...
********* -------
| | -------
| tabla | --
| |
*********
-----------------
...
15.2 Fuentes
Los siguientes elementos HTML especifican información de fuentes. Aunque no
todos están desaprobados, se desaconseja su uso en favor de las hojas de estilo.
15.2.1 Elementos de estilo de fuente: los elementos TT, I, B, BIG, SMALL,
STRIKE, S y U
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el lenguaje), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown onkeyup (eventos intrínsecos)
La representación de elementos de estilo de fuente depende del agente de
usuario. Lo que sigue es solamente una descripción informativa.
TT: Representa como texto de teletipo o ancho fijo.
I: Representa como estilo de texto itálica.
B: Representa como estilo de texto negrita.
BIG: Representa el texto con una fuente "grande".
SMALL: Representa el texto con una fuente "pequeña".
STRIKE y S: Desaprobados. Representan texto de estilo tachado.
U: Desaprobado. Representa texto subrayado.
La siguiente frase muestra varios tipos de texto:
negrita ,
itálica , negrita itálica , texto de teletipo , y
texto grande y pequeño .
Estas palabras podrían ser representadas como se muestra a continuación:
[Un ejemplo de la representación de varios estilos de fuente]
Es posible lograr una variedad mucho mayor de efectos de fuentes usando hojas de
estilo. Para especificar texto azul en itálica en un párrafo con CSS:
...Montones de texto azul en itálica...
Los elementos de estilo de fuente deben ser anidados correctamente. La
representación de elementos de estilo de fuente anidados depende del agente de
usuario.
15.2.2 Elementos de modificación de fuentes: FONT y BASEFONT
FONT y BASEFONT están desaprobados.
Véase el DTD Transicional para la definición formal.
Definiciones de atributos
size = cdata [CN]
Desaprobado. Este atributo especifica el tamaño de la fuente. Valores
posibles:
- Un entero entre 1 y 7. Esto establece la fuente en algún tamaño fijo, cuya
representación depende del agente de usuario. No todos los agentes de
usuario pueden representar los siete tamaños.
- Un incremento relativo del tamaño de la fuente. El valor "+1" significa un
tamaño más grande. El valor "-3" significa tres tamaños menor. Todos los
tamaños pertenecen a la escala de 1 a 7.
color = color [CI]
Desaprobado. Este atributo especifica el color del texto.
face = cdata [CI]
Desaprobado. Este atributo define una lista de nombres de fuentes separados
por comas que el agente de usuario debería buscar en orden de preferencia.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
El elemento FONT cambia el tamaño y color de la fuente para el texto de sus
contenidos.
El elemento BASEFONT establece el tamaño base de fuente (usando el atributo
size). Los cambios del tamaño de la fuente producidos con FONT son relativos al
tamaño base de fuente establecido por BASEFONT. Si no se usa BASEFONT, el tamaño
base de fuente es 3.
EJEMPLO DESAPROBADO:
El siguiente ejemplo mostrará la diferencia entre los siete tamaños de fuente
disponibles con FONT:
size=1
size=2
size=3
size=4
size=5
size=6
size=7
Esto podría representarse así:
[Ejemplo de representación de varios tamaños de fuente]
A continuación mostramos un ejemplo del efecto de los tamaños de fuente
relativos usando un tamaño base de fuente 3:
[Ejemplo de la representación de varios tamaños de fuente con un basefont]
El tamaño base de fuente no se aplica a los encabezados, excepto cuando éstos
sean modificados por medio del elemento FONT con cambios de tamaño de fuente
relativos.
15.3 Separadores: el elemento HR
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
align = left|center|right [CI]
Desaprobado. Este atributo especifica la alineación horizontal del separador
con respecto al contexto circundante. Valores posibles:
- left: el separador se representa alineado a la izquierda.
- center: el separador se representa centrado.
- right: el separador se representa alineado a la derecha.
El valor por defecto es align=center.
noshade [CI]
Desaprobado. Si se establece, este atributo booleano pide al agente de
usuario que represente el separador con un color sólido en lugar del
"relieve" tradicional de dos colores.
size = píxeles [CI]
Desaprobado. Este atributo especifica la altura del separador. El valor por
defecto de este atributo depende del agente de usuario.
width = longitud [CI]
Desaprobado. Este atributo especifica la anchura del separador. El valor por
defecto es del 100%, es decir, el separador se extiende por todo el ancho del
lienzo.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
El elemento HR hace que el agente de usuario represente una línea separadora
horizontal.
La cantidad de espacio vertical insertado entre el separador y el contenido que
le rodea depende del agente de usario.
EJEMPLO DESAPROBADO:
Este ejemplo centra los separadores, dándoles un tamaño igual a la mitad de la
anchura disponible entre márgenes. El separador superior tiene el tamaño por
defecto, mientras que los dos inferiores son de 5 píxeles. El separador inferior
debería representarse con un color sólido sin efecto de relieve:
Estos separadores podrían representarse como sigue:
[Ejemplo de representación de varios separadores horizontales]
================================================================================
16 Marcos
--------------------------------------------------------------------------------
Contenidos
1. Introducción a los marcos
2. Disposición de los marcos
1. El elemento FRAMESET
- Filas y columnas
- Anidamiento de grupos de marcos
- Compartir datos entre marcos
2. El elemento FRAME
- Especificación de los contenidos iniciales de un marco
- Representación visual de un marco
3. Especificación de información sobre el marco destino
1. Especificación del destino de los vínculos por defecto
2. Semántica de marcos destino
4. Contenido alternativo
1. El elemento NOFRAMES
2. Descripciones largas de marcos
5. Marcos en línea: el elemento IFRAME
--------------------------------------------------------------------------------
16.1 Introducción a los marcos
Los marcos HTML permiten a los autores presentar documentos con vistas
múltiples, que pueden ser ventanas o subventanas independientes. Las vistas
múltiples ofrecen a los autores una manera de mantener cierta información
visible mientras otras vistas se desplazan o se sustituyen. Por ejemplo, dentro
de una misma ventana, un marco podría mostrar un gráfico estático, un segundo
marco un menú de navegación, y un tercero el documento principal que puede ser
desplazado, o reemplazado al navegar por el segundo marco.
Aquí tenemos un documento simple con marcos:
Un documento simple con marcos
Este conjunto de marcos contiene:
Esto podría crear una disposición de marcos como la siguiente:
---------------------------------------
| | |
| | |
| Marco 1 | |
| | |
| | |
|---------| |
| | Marco 3 |
| | |
| | |
| | |
| Marco 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
Si el agente de usuario no puede mostrar marcos o está configurado para no
mostrarlos, representará los contenidos del elemento NOFRAMES.
16.2 Disposición de los marcos
Los documentos HTML que describen una disposición de marcos (llamados documentos
con marcos) tienen una estructura diferente a la de los documentos HTML sin
marcos. Un documento normal tiene una sección HEAD y una sección BODY. Un
documento con marcos tiene una sección HEAD, y un FRAMESET en lugar del BODY.
La sección FRAMESET de un documento especifica la disposición de las vistas en
la ventana principal del agente de usuario. Además, la sección FRAMESET puede
contener un elemento NOFRAMES que proporcione contenido alternativo para los
agentes de usuario que no soporten marcos o que estén configurados para no
mostrar marcos.
Los elementos que normalmente podrían colocarse en el elemento BODY no deben
aparecer antes del primer elemento FRAMESET o el FRAMESET no será tenido en
cuenta.
16.2.1 El elemento FRAMESET
--------------------------------------------------------------------------------
]]>
--------------------------------------------------------------------------------
Definiciones de atributos
rows = lista de multilongitudes [CN]
Este atributo especifica la disposición de los marcos horizontales. Es una
lista de longitudes en píxeles, porcentajes o longitudes relativas, separadas
por comas. El valor por defecto es 100%, que significa una fila.
cols = lista de multilongitudes [CN]
Este atributo especifica la disposición de los marcos verticales. Es una
lista de longitudes en píxeles, porcentajes o longitudes relativas, separadas
por comas. El valor por defecto es 100%, que significa una columna.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- title (título del elemento)
- style (información de estilo en línea)
- onload, onunload (eventos intrínsecos)
El elemento FRAMESET especifica la organización de la ventana principal del
usuario en términos de subespacios rectangulares.
Filas y columnas
Cuando se establece el atributo rows (filas) se define el número de subespacios
horizontales. Cuando se establece el atributo cols (columnas) se define el
número de subespacios verticales. Ambos atributos se pueden especificar
simultáneamente para crear una cuadrícula.
Si no se establece el atributo rows, cada columna se extiende a lo largo de toda
la longitud de la página. Si no se establece el atributo cols, cada fila se
extiende a lo largo de toda la anchura de la página. Si no se establece ninguno
de los dos atributos, el marco tiene exactamente el mismo tamaño que la página.
Los marcos se crean de izquierda a derecha para las columnas y de arriba a abajo
para las filas. Cuando se especifican ambos atributos, las vistas se crean de
izquierda a derecha en la fila superior, de izquierda a derecha en la segunda
fila, etc.
En este primer ejemplo dividimos la pantalla verticalmente en dos (es decir,
creamos una mitad superior y una mitad inferior).
...el resto de la definición...
El siguiente ejemplo crea tres columnas: la segunda tiene una anchura fija de
250 píxeles (lo cual es útil, por ejemplo, para incluir una imagen de tamaño
conocido). La primera recibe el 25% del espacio restante, y la tercera el 75%
del espacio restante.
...el resto de la definición...
El siguiente ejemplo crea una cuadrícula de 2x3 subespacios.
...el resto de la definición...
Para el siguiente ejemplo, supongamos que la ventana del navegador tiene
actualmente una altura de 1000 píxeles. Para la primera vista se asigna el 30%
de la altura total (300 píxeles). Para la segunda vista se especifica que tenga
una altura de exactamente 400 píxeles. Esto deja 300 píxeles para repartir entre
los otros dos marcos. La altura del cuarto marco se ha especificado como "2*",
de modo que es el doble de alto que el tercer marco, cuya altura es sólo "*"
(equivalente a 1*). Por tanto el tercer marco será de 100 píxeles de alto y el
cuarto tendrá una altura de 200 píxeles..
...el resto de la definición...
Las longitudes absolutas que no sumen el 100% del espacio real disponible
deberían ser ajustadas por los agentes de usuario. Cuando sobre espacio, el
espacio sobrante debería repartirse proporcionalmente entre cada vista. Cuando
falte espacio, debería reducirse cada vista en función de la relación entre el
espacio especificado y el espacio total.
Anidamiento de grupos de marcos
Los grupos de marcos pueden anidarse hasta cualquier nivel.
En el siguiente ejemplo, el FRAMESET exterior divide el espacio disponible en
tres columnas iguales. A continuación el FRAMESET interior divide la segunda
área en dos filas de alturas diferentes.
...contenidos del primer marco...
...contenidos del segundo marco, primera fila...
...contenidos del segundo marco, segunda fila...
...contenidos del tercer marco...
Compartir datos entre marcos
Los autores pueden compartir datos entre varios marcos incluyendo estos datos a
través de un elemento OBJECT. Los autores deberían incluir el elemento OBJECT en
el elemento HEAD del documento con marcos y darle un nombre con el atributo id.
Cualquier documento que sea el contenido de un marco del documento con marcos
puede hacer referencia a este identificador.
El siguiente ejemplo ilustra cómo podría hacer referencia un script a un
elemento OBJECT definido para todo un grupo de marcos:
Esto es un documento con marcos con un OBJECT en el HEAD
Página de Blanca
...comienzo del documento...
...el resto del documento...
16.2.2 El elemento FRAME
--------------------------------------------------------------------------------
]]>
--------------------------------------------------------------------------------
Definiciones de atributos
name = cdata [CI]
Este atributo asigna un nombre al marco actual. Este nombre puede utilizarse
como el destino de vínculos subsiguientes.
longdesc = uri [CT]
Este atributo especifica un vínculo a una descripción larga del marco. Esta
descripción debería complementar la descripción corta proporcionada por el
atributo title, y puede ser particularmente útil para agentes de usuario no
visuales.
src = uri [CT]
Este atributo especifica la localización de los contenidos iniciales que
contendrá el marco.
noresize [CI]
Si está presente, este atributo booleano le dice al agente de usuario que la
ventana del marco no debe ser redimensionable.
scrolling = auto|yes|no [CI]
Este atributo especifica información sobre el desplazamiento de la ventana
del marco. Valores posibles:
- auto: Este valor le dice al agente de usuario que proporcione mecanismos
de desplazamiento en la ventana del marco cuando sea necesario. Este es el
valor por defecto.
- yes: Este valor le dice al agente de usuario que siempre proporcione
mecanismos de desplazamiento en la ventana del marco.
- no: Este valor le dice al agente de usuario que nunca proporcione
mecanismos de desplazamiento en la ventana del marco.
frameborder = 1|0 [CN]
Este atributo proporciona información al agente de usuario sobre el borde del
marco. Valores posibles:
- 1: Este valor le dice al agente de usuario que dibuje un separador entre
este marco y todos los marcos adyacentes. Este es el valor por defecto.
- 0: Este valor le dice al agente de usuario que no dibuje un separador
entre este marco y todos los marcos adyacentes. Obsérvese que aún se puede
dibujar un separador junto a este marco si así se especifica para otros
marcos.
marginwidth = píxeles [CN]
Este atributo especifica la cantidad de espacio que debe dejarse entre los
contenidos del marco en sus márgenes izquierdo y derecho. El valor debe ser
mayor o igual que cero (píxeles). El valor por defecto depende del agente de
usuario.
marginheight = píxeles [CN]
Este atributo especifica la cantidad de espacio que debe dejarse entre los
contenidos del marco en sus márgenes superior e inferior. El valor debe ser
mayor o igual que cero (píxeles). El valor por defecto depende al agente de
usuario.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- title (título del elemento)
- style (información de estilo en línea)
El elemento FRAME define los contenidos y la apariencia de un marco dado.
Especificación de los contenidos iniciales de un marco
El atributo src especifica el documento inicial que contendrá el marco.
El siguiente ejemplo de documento HTML:
Un documento con marcos
debería crear una distribución de marcos parecida a ésta:
------------------------------------------
|Marco 1 |Marco 3 |Marco 4 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
-------------| | |
|Marco 2 | | |
| | | |
| | | |
------------------------------------------
y hacer que el agente de usuario cargara cada fichero en una vista separada.
Los contenidos de un marco no deben estar en el mismo documento que la
definición del marco.
EJEMPLO ILEGAL:
La siguiente definición de un grupo de marcos no es legal según HTML, ya que los
contenidos del segundo marco están en el mismo documento que la definición del
grupo de marcos.
Un documento con marcos
...texto...
...texto...
Representación visual de un marco
El siguiente ejemplo ilustra el uso de los atributos decorativos de FRAME.
Especificamos que el marco 1 no permitirá barras de desplazamiento. El marco 2
dejará espacio en blanco alrededor de sus contenidos (inicialmente, un fichero
de imagen) y el marco no será redimensionable. No se dibujará ningún borde entre
los marcos 3 y 4. Se dibujarán los bordes (por defecto) entre los marcos 1, 2 y
3.
Un documento con marcos
16.3 Especificación de información sobre el marco destino
Nota. Para información sobre las prácticas actuales referentes a la
determinación del marco destino, consulte las notas sobre marcos del apéndice.
Definiciones de atributos
target = marco-destino [CI]
Este atributo especifica el nombre de un marco en el que debe abrirse un
documento.
Al asignar un nombre a un marco por medio del atributo name, los autores pueden
referirse a él como el "destino" de los vínculos definidos por otros elementos.
Se pueden establecer el atributo target para los elementos que creen vínculos
(A, LINK), para los mapas de imágenes (AREA), y para los formularios (FORM).
Consulte la sección sobre nombres de marcos destino para información sobre
nombres de marcos reconocidos.
Este ejemplo ilustra cómo es posible mediante la especificación de un destino la
modificación dinámica de los contenidos de un marco. Primero definimos un grupo
de marcos en el documento frameset.html, mostrado a continuación:
Un documento con marcos
Después, en inicial_dinamico.html, hacemos un vínculo al marco llamado
"dinamico".
Un documento con vínculos con destinos específicos
...comienzo del documento...
Puede avanzar ahora a la
diapositiva 2.
...más documento...
Lo está haciendo muy bien. Vaya ahora a la
diapositiva 3.
Si se activa cualquiera de los vínculos se abre un nuevo documento en el marco
llamado "dinamico", mientras que el otro marco, "fijo", mantiene sus contenidos
iniciales.
Nota. La definición de un grupo de marcos nunca cambia, pero los contenidos de
uno de sus marcos sí pueden cambiar. Una vez que los contenidos de un marco
cambian, la definición del grupo de marcos deja de reflejar el estado actual de
sus marcos.
Actualmente no hay ninguna manera de codificar con un URI el estado real de un
grupo de marcos. Por tanto, muchos agentes de usuario no permiten a los usuarios
asignar un marcador a un grupo de marcos.
Los grupos de marcos hacen más difícil para los usuarios la navegación hacia
adelante y hacia atrás por la historia del agente de usuario.
16.3.1 Especificación del destino de los vínculos por defecto
Cuando muchos vínculos del mismo documento designan al mismo destino, es posible
especificar el destino una sola vez para que no sea necesario incluir el
atributo target en todos los elementos. Esto se hace estableciendo el atributo
target del elemento BASE.
Volvemos al ejemplo anterior, esta vez definiendo la información sobre el
destino en el elemento BASE para quitarla de los elementos A.
Un documento con un destino específico en BASE
...comienzo del documento...
Puede avanzar ahora a la diapositiva 2.
...más documento...
Lo está haciendo muy bien. Vaya ahora a la
diapositiva 3.
16.3.2 Semántica de marcos destino
Los agentes de usuario deberían determinar el marco destino en el que cargar un
recurso vinculado de acuerdo con las siguientes reglas de precedencia (ordenadas
de mayor a menor prioridad):
1. Si un elemento especifica en su atributo target un marco conocido, cuando se
activa el vínculo (p.ej., se sigue el vínculo o se procesa un formulario),
el recurso designado por el elemento debería cargarse en el marco destino.
2. Si un elemento no tiene el atributo target establecido pero el elemento BASE
sí lo tiene, el atributo target del elemento BASE determina el marco.
3. Si ni el elemento que vincula el recurso ni el elemento BASE hacen
referencia a un destino, el recurso designado por el elemento debería
cargarse en el marco que contiene al elemento.
4. Si alguno de los atributos target se refiere a un marco desconocido F, el
agente de usuario debería crear una ventana y marco nuevos, asignar el
nombre F al marco, y cargar el recurso designado por el elemento en el nuevo
marco.
Los agentes de usuario pueden proporcionar a los usuarios un mecanismo para
deshabilitar el atributo target.
16.4 Contenido alternativo
Los autores deberían proporcionar contenido alternativo para aquellos agentes de
usuario que no soporten marcos o que estén configurados para no mostrar marcos.
16.4.1 El elemento NOFRAMES
--------------------------------------------------------------------------------
]]>
--------------------------------------------------------------------------------
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
El elemento NOFRAMES especifica un contenido que sólo deberían mostrar los
agentes de usuario que no soporten marcos o que estén configurados para no
mostrar marcos. Los agentes de usuario que soporten marcos sólo deben mostrar
los contenidos de una declaración NOFRAMES cuando se configuren para no mostrar
marcos. Los agentes de usuario que no soporten marcos deben mostrar los
contenidos de NOFRAMES en cualquier caso.
El elemento NOFRAMES es parte tanto del DTD transicional como del de documentos
con marcos. En un documento que use el DTD de documentos con marcos, NOFRAMES se
puede usar al final de la sección FRAMESET del documento.
Por ejemplo:
Un documento con marcos con NOFRAMES
Aquí puede encontrar la
version sin marcos del documento.
NOFRAMES se puede usar, por ejemplo, en un documento que sea el origen de un
marco y que use el DTD transicional. Esto permite a los autores explicar el
propósito del documento en los casos en que éste se vea fuera del grupo de
marcos o con un agente de usuario que no soporte marcos.
16.4.2 Descripciones largas de marcos
El atributo longdesc permite a los autores hacer los documentos con marcos más
accesibles a las personas que utilizan agentes de usuario no visuales. Este
atributo designa un recurso que proporciona una descripción larga del marco. Los
autores deberían recordar que las descripciones largas asociadas con los marcos
se refieren al marco, y no a los contenidos del marco. Como los contenidos
pueden variar con el tiempo, la descripición larga inicial podría ser
inapropiada para los contenidos posteriores del marco. En particular, los
autores no deberían incluir una imagen como único contenido de un marco.
El siguiente documento con marcos describe dos marcos. El marco izquierdo
contiene una tabla de contenidos y el marco derecho contiene inicialmente la
imagen de un avestruz:
Un documento con marcos mal diseñado
Obsérvese que la imagen ha sido incluida en el marco independientemente de
cualquier elemento HTML, de modo que el autor no tiene ninguna manera de
especificar un texto alternativo aparte de usar el atributo longdesc. Si los
contenidos del marco derecho cambian (p.ej., el usuario selecciona una serpiente
de cascabel en la tabla de contenidos), los usuarios no tendrán acceso textual a
los nuevos contenidos del marco.
Por tanto, los autores no deberían poner una imagen en un marco directamente. En
su lugar, la imagen debería especificarse en un documento HTML independiente, en
el cual se podría adjuntar el texto alternativo apropiado:
Una documento con marcos bien diseñado
El avestruz, robusto y veloz
¡Estos avestruces seguro que están ricos!
16.5 Marcos en línea: el elemento IFRAME
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Definiciones de atributos
longdesc = uri [CT]
Este atributo especifica un vínculo a una descripción larga del marco. Esta
descripción debería servir como complemento de la descripción corta que
proporciona el atributo title, y es particularmente útil para los agentes de
usuario no visuales.
name = cdata [CI]
Este atributo asigna un nombre al marco actual. Este nombre puede utilizarse
como el destino de vínculos subsiguientes.
width = longitud [CN]
La anchura del marco en línea.
height = longitud [CN]
La altura del marco en línea.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- title (título del elemento)
- style (información de estilo en línea)
- name, src, frameborder, marginwidth, marginheight, scrolling (controles y
decoraciones de los marcos)
- align (alineación)
El elemento IFRAME permite a los autores insertar un marco dentro de un bloque
de texto. Insertar un marco en línea dentro de una sección de texto es muy
similar a insertar un objeto mediante un elemento OBJECT: ambos permiten
insertar un documento HTML en medio de otro, ambos pueden alinearse con el texto
circundante, etc.
La información a insertar en línea se designa mediante el atributo src de este
elemento. Los contenidos del elemento IFRAME, por su parte, sólo deberían ser
mostrados por los agentes de usuario que no soporten marcos o que estén
configurados para no mostrar marcos.
Para aquellos agentes de usuario que soporten marcos, el siguiente ejemplo
colocará un marco en línea rodeado por un borde en medio del texto.
Los marcos en línea no pueden ser redimensionados (y por lo tanto no tienen un
atributo noresize).
Nota. También puede incluirse un documento HTML dentro de otro documento HTML
por medio del elemento OBJECT. Véase la sección sobre documentos incluidos para
más detalles.
================================================================================
17 Formularios
--------------------------------------------------------------------------------
Contenidos
1. Introducción a los formularios
2. Controles
1. Tipos de controles
3. El elemento FORM
4. El elemento INPUT
1. Tipos de controles creados con INPUT
2. Ejemplos de formularios con controles INPUT
5. El elemento BUTTON
6. Los elementos SELECT, OPTGROUP y OPTION
1. Opciones preseleccionadas
7. El elemento TEXTAREA
8. El elemento ISINDEX
9. Rótulos
1. El elemento LABEL
10. Añadir estructura a los formularios: los elementos FIELDSET y LEGEND
11. Dirigir el foco hacia un elemento
1. Navegación con tabulador
2. Teclas de acceso
12. Controles deshabilitados y de sólo lectura
1. Controles deshabilitados
2. Controles de sólo lectura
13. Envío de formularios
1. Método de envío del formulario
2. Controles con éxito
3. Procesamiento de los datos del formulario
- Paso uno: Identificación de los controles con éxito
- Paso dos: Construcción del conjunto de datos del formulario
- Paso tres: Codificación del conjunto de datos del formulario
- Paso cuatro: Envío del conjunto de datos del formulario codificado
4. Tipos de contenido de formularios
- application/x-www-form-urlencoded
- multipart/form-data
--------------------------------------------------------------------------------
17.1 Introducción a los formularios
Un formulario HTML es una sección de un documento que contiene contenido normal,
código, elementos especiales llamados controles (casillas de verificación
(checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en
esos controles. Los usuarios normalmente "completan" un formulario modificando
sus controles (introduciendo texto, seleccionando objetos de un menú, etc.),
antes de enviar el formulario a un agente para que lo procese (p.ej., a un
servidor web, a un servidor de correo, etc.)
Aquí se muestra un ejemplo de un formulario simple que incluye rótulos,
radiobotones y botones para reinicializar el formulario o para enviarlo:
Nota. Esta especificación incluye información más detallada sobre formularios en
las subsecciones sobre representación de formularios.
17.2 Controles
Los usuarios interaccionan con los formularios a través de los llamados
controles.
El "nombre de control" de un control viene dado por su atributo name. El "campo
de acción" o alcance del atributo name de un control contenido en un elemento
FORM es el elemento FORM.
Cada control tiene tanto un valor inicial como un valor actual, que son ambos
cadenas de caracteres. Consulte la definición de cada control para obtener
información sobre los valores iniciales y las posibles restricciones que puede
imponer cada control sobre sus valores. En general, el "valor inicial" de un
control puede especificarse con el atributo value del elemento de control. Sin
embargo, el valor inicial de un elemento TEXTAREA viene dado por sus contenidos,
y el valor inicial de un elemento OBJECT de un formulario está determinado por
la implementación del objeto (es decir, se sale fuera del alcance de esta
especificación).
El "valor actual" del control se hace en primer lugar igual al valor inicial. A
partir de ese momento, el valor actual del control puede ser modificado a través
de la interacción con el usuario y mediante scripts.
El valor inicial de un control no cambia. Así, cuando se reinicializa el
formulario, el valor actual de cada control se reinicializa a su valor inicial.
Si el control no tiene un valor inicial, el efecto de una reinicialización del
formulario sobre ese control es indefinido.
Cuando se envía un formulario para su procesamiento, para algunos controles se
empareja su nombre con su valor actual, y estas parejas se envían con el
formulario. Aquellos controles cuyas parejas nombre/valor se envían se llaman
controles con éxito.
17.2.1 Tipos de controles
HTML define los siguientes tipos de controles:
botones
Los autores pueden crear tres tipos de botones:
- botones de envío (submit buttons): Cuando se activa, un botón de envío
envía un formulario. Un formulario puede contener más de un botón de
envío.
- botones de reinicialización (reset buttons): Cuando se activa, un botón de
reinicialización reinicializa todos los controles a sus valores iniciales.
- botones pulsadores (push buttons): Los botones pulsadores no tienen un
comportamiento por defecto. Cada botón pulsador puede tener asociados
scripts en el lado del cliente a través del atributo event del elemento.
Cuando ocurre un evento (p.ej., el usuario aprieta el botón, lo suelta,
etc.), se acciona el script asociado.
Los autores deberían especificar el lenguaje de programación del script de
un botón pulsador a través de una declaración de scripts por defecto (con
el elemento META).
Los autores crean botones con el elemento BUTTON o el elemento INPUT.
Consulte las definiciones de estos elementos para más detalles sobre cómo
especificar diferentes tipos de botones.
Nota. Los autores deberían observar que el elemento BUTTON ofrece
posibilidades más ricas de representación que el elemento INPUT.
casillas de verificación (checkboxes)
Las casillas de verificación (y los radiobotones) son interruptores de
encendido/apagado que pueden ser conmutados por el usuario. Una casilla de
verificación está "marcada" cuando se establece el atributo checked del
elemento de control. Cuando se envía un formulario, solamente pueden tener
éxito los controles de casillas de verificación que estén marcadas.
Varias casillas de verificación de un formulario pueden compartir el mismo
nombre de control. Así, por ejemplo, las casillas de verificación permiten a
los usuarios elegir varios valores para la misma propiedad. Para crear un
control de casilla de verificación se utiliza el elemento INPUT .
radiobotones (radio buttons)
Los radiobotones son como las casillas de verificación, excepto en que cuando
varios comparten el mismo nombre de control, son mutuamente exclusivos:
cuando uno está "encendido", todos los demás con el mismo nombre se "apagan".
Para crear un control de radiobotón se usa el elemento INPUT.
Si ninguno de los radiobotones de un conjunto que comparten el mismo nombre
tiene un valor inicial de "encendido", el comportamiento del agente de
usuario al elegir cuál es el control que está inicialmente "encendido" queda
sin definir. Nota. Debido a que las implementaciones existentes tratan este
caso de formas diferentes, la especificación actual difiere de RFC 1866
([RFC1866] sección 8.1.2.4), que dice:
En cualquier momento, exactamente uno de los radiobotones de un conjunto
está marcado. Si ninguno de los elementos de un conjunto de
radiobotones especifica 'CHECKED', entonces el agente de usuario debe
marcar el primer radiobotón del conjunto inicialmente.
Al diferir los comportamientos de los agentes de usuario, los autores
deberían asegurarse de que en cada conjunto de radiobotones hay uno que
inicialmente está "encendido".
menúes (menus)
Los menúes ofrecen al usuario opciones entre las cuales elegir. El elemento
SELECT crea un menú, en combinación con los elementos OPTGROUP y OPTION.
entrada de texto (text input)
Los autores pueden crear dos tipos de controles que permiten a los usuarios
introducir textos. El elemento INPUT crea un control de entrada de una sola
línea, y el elemento TEXTAREA crea una control de entrada de varias líneas.
En ambos casos, el texto introducido se convierte en el valor actual del
control.
selección de ficheros (file select)
Este tipo de control permite al usuario elegir ficheros de modo que sus
contenidos puedan ser enviados con un formulario. Se usa el elemento INPUT
para crear un control de selección de ficheros.
controles ocultos (hidden controls)
Los autores pueden crear controles que no se muestran pero cuyos valores se
envían con un formulario. Los autores usan normalmente este tipo de controles
para almacenar información entre intercambios cliente/servidor que de otro
modo se perdería debido a la naturaleza no persistente del protocolo HTTP
(ver [RFC2616]). Para crear un control oculto se usa el elemento INPUT.
controles tipo objeto (object controls)
Los autores pueden insertar objetos genéricos en los formularios de modo que
los valores asociados se envíen junto con los demás controles. Los autores
crean controles tipo objeto con el elemento OBJECT.
Los elementos utilizados para crear controles aparecen normalmente dentro de un
elemento FORM, pero también pueden aparecer fuera de la declaración de un
elemento FORM cuando se utilizan para construir interfaces de usuario. Sobre
esto se habla en la sección sobre eventos intrínsecos. Obsérvese que los
controles que estén fuera de un formulario no pueden ser controles con éxito.
17.3 El elemento FORM
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
action = uri [CT]
Este atributo especifica un agente procesador de formularios. El
comportamiento del agente de usuario frente a un valor diferente de un URI
HTTP es indefinido.
method = get|post [CI]
Este atributo especifica qué método HTTP se usará para enviar el conjunto de
datos del formulario. Los valores posibles (que no distinguen entre
mayúsculas y minúsculas) son "get" (valor por defecto) y "post". Véase la
sección sobre envío de formularios para información sobre su uso.
enctype = tipo de contenido [CI]
Este atributo especifica el tipo de contenido usado para enviar el formulario
al servidor (cuando el valor del atributo method sea "post"). El valor por
defecto de este atributo es "application/x-www-form-urlencoded". El valor
"multipart/form-data" debería usarse en combinación con el elemento INPUT,
type="file".
accept-charset = lista de codificaciones de caracteres [CI]
Este atributo especifica la lista de codificaciones de caracteres para los
datos introducidos que son aceptadas por el servidor que procesa este
formulario. El valor es una lista de valores de codificaciones de caracteres
separadas por espacios y/o comas. El cliente debe interpretar esta lista como
una lista o-exclusiva, es decir, el servidor es capaz de aceptar cualquier
codificación de caracteres individual por entidad recibida.
El valor por defecto de este atributo es la cadena reservada "UNKNOWN"
("desconocido"). Los agentes de usuario pueden interpretar este valor como la
codificación de caracteres que fue usada para transmitir el documento que
contiene este elemento FORM.
accept = lista de tipos de contenido [CI]
Este atributo especifica una lista de tipos de contenido separados por comas
que un servidor procesador de formularios manejará correctamente. Los agentes
de usuario pueden utilizar esta información para filtrar ficheros no
conformes cuando pidan al usuario seleccionar ficheros para enviar al
servidor (véase el elemento INPUT cuando type="file").
name = cdata [CI]
Este atributo da nombre al elemento de modo que se pueda hacer referencia a
él desde hojas de estilo o scripts. Nota. Este atributo ha sido incluido por
motivos de compatibilidad con versiones anteriores. Las aplicaciones deberían
usar el atributo id para identificar elementos.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- style (información de estilo en línea)
- title (título del elemento)
- target (información del marco destino)
- onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
El elemento FORM actúa como contenedor de controles. Especifica:
- La disposición ("layout") del formulario (dada por los contenidos del
elemento).
- El programa que manejará el formulario completado y enviado (el atributo
action). El programa receptor debe ser capaz de interpretar las parejas
nombre/valor para poder hacer uso de ellas.
- El método por el cual se enviarán los datos del usuario al servidor (el
atributo method).
- Una codificación de caracteres que debe ser aceptada por el servidor para
poder manejar este formulario (el atributo accept-charset). Los agentes de
usuario pueden avisar al usuario del valor del atributo accept-charset y/o
restringir al usuario la posibilidad de introducir caracteres no reconocidos.
Un formulario puede contener texto y código (párrafos, listas, etc.) además de
controles de formulario.
El siguiente ejemplo muestra un formulario que va a ser procesado por el
programa "usuarionuevo" cuando sea enviado. El formulario será enviado al
programa usando el método HTTP "post".
Consulte la sección sobre envío de formularios para información sobre cómo deben
preparar los agentes de usuario los datos del formulario para los servidores y
cómo deberían tratar los agentes de usuario las respuestas esperadas.
Nota. Quedan fuera del alcance de esta especificación las cuestiones sobre el
comportamiento de los servidores que reciben datos de formularios.
17.4 El elemento INPUT
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]
Este atributo especifica el tipo de control a crear. El valor por defecto
para este atributo es "text".
name = cdata [CI]
Este atributo asigna el nombre de control.
value = cdata [CA]
Este atributo especifica el valor inicial del control. Es opcional excepto
cuando el atributo type tenga el valor "radio" o "checkbox".
size = cdata [CN]
Este atributo le dice al agente de usuario la anchura inicial del control. La
anchura viene dada en píxeles excepto cuando el atributo type tenga el valor
"text" o "password". En estos casos, el valor se refiere al número (entero)
de caracteres.
maxlength = number [CN]
Cuando el atributo type tiene el valor "text" o "password", este atributo
especifica el número máximo de caracteres que puede introducir el usuario.
Este número puede exceder del especificado por size, en cuyo caso el agente
de usuario debería ofrecer un mecanismo de desplazamiento. El valor por
defecto para este atributo es un número ilimitado.
checked [CI]
Cuando el atributo type tiene el valor "radio" o "checkbox", este atributo
booleano especifica que el botón está marcado ("on"). Los agentes de usuario
no deben tener en cuenta este atributo para otros tipos de control.
src = uri [CT]
Cuando el atributo type tiene el valor "image", este atributo especifica la
localización de la imagen que debe usarse para decorar el botón gráfico de
envío.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- alt (texto alternativo)
- align (alineación)
- accept (tipos de contenidos legales para un servidor)
- readonly (controles de entrada de sólo lectura)
- disabled (controles de entrada deshabilitados)
- tabindex (navegación con tabulador)
- accesskey (teclas de acceso)
- usemap (mapas de imágenes en el lado del cliente)
- ismap (mapas de imágenes en el lado del servidor)
- onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup (eventos intrínsecos)
17.4.1 Tipos de controles creados con INPUT
El tipo de control definido por el elemento INPUT depende del valor del atributo
type:
text
Crea un control de entrada de texto de una línea.
password
Igual que "text", pero el texto introducido se presentan de tal modo que se
oculten los caracteres (p.ej., mediante un serie de asteriscos). Este tipo de
control suele utilizarse para datos importantes tales como contraseñas.
Obsérvese que el valor actual es el texto introducido por el usuario, no el
texto representado por el agente de usuario.
Nota. Los diseñadores de aplicaciones deberían tener en cuenta que este
mecanismo ofrece en realidad un nivel muy bajo de seguridad. Aunque la
contraseña se oculte a las personas que puedan estar mirando, se transmite al
servidor como texto sin enmascarar, y puede ser leído por cualquiera que
tenga acceso de bajo nivel a la red.
checkbox
Crea una casilla de verificación o "checkbox".
radio
Crea un radiobotón o "radio button".
submit
Crea un botón de envío o "submit button".
image
Crea un botón de envío gráfico. El valor del atributo src especifica el URI
de la imagen que decorará el botón. Por razones de accesibilidad, los autores
deberían proporcionar un texto alternativo para la imagen por medio del
atributo alt.
Cuando se utiliza un dispositivo apuntador para hacer clic sobre la imagen,
se envían al servidor el formulario y la coordenadas en que se pulsó el
dispositivo. El valor x se mide en píxeles desde la izquierda de la imagen, y
el valor y en píxeles desde la parte superior de la imagen. Los datos
enviados incluyen name.x=x-value y name.y=y-value donde "name" es el valor
del atributo name, y x-value e y-value son las coordenadas x e y,
respectivamente.
Si el servidor realiza acciones diferentes dependiendo del lugar en que se
pulsó el dispositivo, los usuarios de navegadores no gráficos estarán en
desventaja. Por esta razón, los autores deberían considerar otras
alternativas:
- Usar varios botones de envío (cada uno con su imagen) en lugar de un solo
botón gráfico de envío. Los autores pueden usar hojas de estilo para
controlar la posición de estos botones.
- Usar un mapa de imágenes en el lado del cliente junto con scripts.
reset
Crea un botón de reinicialización o "reset button".
button
Crea un botón pulsador o "push button". Los agentes de usuario deberían usar
el valor del atributo value como rótulo del botón.
hidden
Crea un control oculto o "hidden control".
file
Crea un control de selección de fichero o "file select". Los agentes de
usuario pueden usar el valor del atributo value para el nombre de fichero
inicial.
17.4.2 Ejemplos de formularios con controles INPUT
El siguiente fragmento HTML de ejemplo define un formulario simple que permite
al usuario introducir su nombre, apellido, dirección de correo electrónico y
sexo. Cuando se active el botón de envío, el formulario será enviado al programa
especificado por el atributo action.
Este formulario podría ser representado de la siguiente manera:
[Ejemplo de representación de un formulario]
En la sección sobre el elemento LABEL, se habla sobre la codificación de rótulos
tales como "Nombre".
En el ejemplo que sigue, se ejecuta la función Javascript llamada verificar
cuando se da el evento "onclick":
Consulte la sección sobre eventos intrínsecos para más información sobre scripts
y eventos.
El siguiente ejemplo muestra cómo pueden enviarse los contenidos de un fichero
especificado por el usuario con un formulario. Se le pide al usuario su nombre y
una lista de nombres de ficheros cuyos contenidos deberían enviarse con el
formulario. Al especificar para enctype el valor "multipart/form-data", los
contenidos de cada fichero se empaquetarán para su envío en una sección separada
de un documento multiparte.
17.5 El elemento BUTTON
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
name = cdata [CI]
Este atributo asigna el nombre de control.
value = cdata [CS]
Este atributo asigna al botón su valor inicial.
type = submit|button|reset [CI]
Este atributo declara el tipo del botón. Valores posibles:
- submit: Crea un botón de envío (submit button). Este es el valor por
defecto.
- reset: Crea un botón de reinicialización (reset button).
- button: Crea un botón pulsador (push button).
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información sobre el estilo en línea)
- disabled (controles de entrada deshabilitados)
- accesskey (teclas de acceso)
- tabindex (navegación con tabulador)
- onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
Los botones creados con el elemento BUTTON funcionan exactamente igual que los
botones creados con el elemento INPUT, pero ofrecen posibilidades más ricas de
representación: el elemento BUTTON puede tener contenido. Por ejemplo, un
elemento BUTTON que contenga una imagen se parece y funciona como un elemento
INPUT cuyo atributo type sea igual a "image", pero el tipo de elemento BUTTON
permite un contenido.
Los agentes de usuario visuales pueden representar los botones BUTTON con un
relieve y un movimiento arriba/abajo al pulsarlos, mientras que pueden
representar los botones INPUT como imágenes "planas".
El siguiente ejemplo extiende un ejemplo previo, pero creando los botones de
envío y de reinicialización con BUTTON en lugar de con INPUT. Los botones
contienen imágenes sacadas de elementos IMG.
Recuérdese que los autores deben proporcionar texto alternativo para los
elementos IMG.
Es ilegal asociar un mapa de imágenes con un IMG que aparezca como el contenido
de un elemento BUTTON.
EJEMPLO ILEGAL:
Lo siguiente no es HTML legal.
17.6 Los elementos SELECT, OPTGROUP y OPTION
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos de SELECT
name = cdata [CI]
Este atributo asigna el nombre de control.
size = número [CN]
Si un elemento SELECT se presenta como una lista con desplazamiento
("scrolled list box"), este atributo especifica el número de filas de la
lista que deberían ser visibles al mismo tiempo. No es preciso que los
agentes visuales presenten un elemento SELECT como una lista ("list box");
pueden usar cualquier otro mecanismo, como por ejemplo un menú desplegable
("drop-down menu").
multiple [CI]
Si está activado, este atributo booleano permite selecciones múltiples. Si no
está activado, el elemento SELECT sólo permite selecciones simples.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- disabled (controles de entrada deshabilitados)
- tabindex (navegación con tabulador)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
El elemento SELECT crea un menú. Cada opción ofrecida por el menú se representa
por un elemento OPTION. Un elemento SELECT debe contener al menos un elemento
OPTION.
El elemento OPTGROUP permite a los autores agrupar opciones lógicamente. Esto es
particularmente útil cuando el usuario debe elegir de entre una larga lista de
opciones; es más fácil apreciar y recordar grupos de opciones relacionadas que
una larga lista de opciones sueltas. En HTML 4, todos los elementos OPTGROUP
deben especificarse directamente dentro de un elemento SELECT (es decir, no
pueden anidarse unos grupos dentro de otros).
17.6.1 Opciones preseleccionadas
Pueden preseleccionarse para el usuario cero o más opciones. Los agentes de
usuario deberían determinar qué opciones son preseleccionadas de acuerdo con lo
siguiente:
- Si no hay ningún elemento OPTION con el atributo selected establecido, el
comportamiento del agente de usuario en cuanto a la elección de la opción
seleccionada inicialmente queda sin especificar. Nota. Debido a que las
implementaciones existentes tratan de manera diferente este caso, la
especificación actual difiere de RFC 1866 ([RFC1866] sección 8.1.3), que
dice:
El estado inicial tiene la primera opción seleccionada, a menos que el
atributo SELECTED esté presente en alguno de los elementos .
Al diferir los comportamientos de los agentes de usuario, los autores
deberían asegurarse de que todos los menúes incluyen una OPTION
preseleccionada por defecto.
- Si un elemento OPTION tiene el atributo selected activado, debería estar
preseleccionado.
- Si el elemento SELECT tiene el atributo multiple activado y hay más de un
elemento OPTION que tenga el atributo selected activado, deberían estar todos
preseleccionados.
- Se considera un error que haya más de un elemento OPTION con el atributo
selected activado y que el elemento SELECT no tenga el atributo multiple
establecido. Los agentes de usuario pueden tratar este caso de maneras
diferentes, pero no deberían preseleccionar más de una opción.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos de OPTGROUP
label = texto [CS]
Este atributo especifica el rótulo del grupo de opciones.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- disabled (controles de entrada deshabilitados)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
Nota. Se avisa a los implementadores de que las versiones futuras de HTML pueden
extender el mecanismo de agrupamiento para permitir grupos anidados (es decir,
para que los elementos OPTGROUP puedan anidarse). Esto permitirá a los autores
representar una jerarquía de opciones más rica.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos de OPTION
selected [CI]
Si está establecido, este atributo booleano especifica que esta opción está
preseleccionada.
value = cdata [CS]
Este atributo especifica el valor inicial del control. Si este atributo no
está establecido, el valor inicial es igual a los contenidos del elemento
OPTION.
label = texto [CS]
Este atributo permite a los autores especificar un rótulo para la opción más
corto que el contenido del elemento OPTION. Cuando esté especificado, los
agentes de usuario deberían usar como rótulo de la opción el valor de este
atributo en lugar del contenido del elemento OPTION.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- disabled (controles de entrada deshabilitados)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
Cuando se represente una opción de un menú, los agentes de usuario deberían usar
como opción el valor del atributo label del elemento OPTION. Si este atributo no
está especificado, los agentes de usuario deberían usar los contenidos del
elemento OPTION.
El atributo label del elemento OPTGROUP especifica el rótulo de un grupo de
opciones.
En este ejemplo, creamos un menú que permite al usuario seleccionar cuál de los
siete componentes de un programa instalar. Los dos primeros componentes están
preseleccionados pero pueden ser deseleccionados por el usuario. El resto de los
componentes no están preseleccionados. El atributo size dice que el menú sólo
debería tener cuatro filas, aunque el usuario pueda elegir ente siete opciones.
Las otras opciones deberían estar disponibles a través de un mecanismo de
desplazamiento.
El elemento SELECT va seguido de botones de envío y de reinicialización.
Solamente las opciones seleccionadas tendrán éxito (usando el nombre de control
"elegir-componente"). Cuando no haya opciones seleccionadas, el control no
tendrá éxito, y ni el nombre ni ninguno de los valores se enviarán al servidor
cuando se envíe el formulario. Obsérvese que el atributo value, cuando está
establecido, determina el valor inicial del control, que de otro modo es el
contenido del elemento.
En este ejemplo usamos el elemento OPTGROUP para agrupar opciones. El siguiente
código:
representa el siguiente agrupamiento:
Ninguno
PortMaster 3
3.7.1
3.7
3.5
PortMaster 2
3.7
3.5
IRX
3.7R
3.5R
Los agentes de usuario visuales pueden permitir a los usuarios seleccionar de
entre grupos de opciones a través de un menú jerárquico o de algún otro
mecanismo que refleje la estructura de las opciones.
Un agente de usuario gráfico podría representarlo así::
[Una posible representación de OPTGROUP]
Esta imagen muestra un elemento SELECT representado mediante menúes en cascada.
El rótulo superior del menú muestra el valor seleccionado actualmente
(PortMaster 3, 3.7.1). El usuario ha desplegado dos menúes en cascada, pero aún
no ha seleccionado el nuevo valor (PortMaster 2, 3.7). Obsérvese que cada menú
en cascada muestra el rótulo de un elemento OPTGROUP u OPTION.
17.7 El elemento TEXTAREA
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
name = cdata [CI]
Este atributo asigna el nombre de control.
rows = número [CN]
Este atributo especifica el número de líneas de texto visibles. Los usuarios
deberían poder introducir un número mayor de líneas, por lo que los agentes
de usuario deberían proporcionar medios para desplazar los contenidos del
control cuando los contenidos se extiendan más allá del área visible.
cols = número [CN]
Este atributo especifica la anchura visible en caracteres de anchura media.
Los usuarios deberían poder introducir líneas de mayor longitud, por lo que
los agentes de usuario deberían proporcionar medios para desplazar los
contenidos del control cuando los contenidos se extiendan más allá del área
visible. Los agentes del usuario pueden partir las líneas de texto visible
para que las líneas largas puedan verse sin necesidad de desplazarlas.
Atributos definidos en otros lugares
- id, class (identificadores a nivel de documento)
- lang (información sobre el idioma), dir (dirección del texto)
- title (título del elemento)
- style (información de estilo en línea)
- readonly (controles de entrada de sólo lectura)
- disabled (controles de entrada deshabilitados)
- tabindex (navegación con tabulador)
- onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup (eventos intrínsecos)
El elemento TEXTAREA crea un control de entrada de texto multilínea. Los agentes
de usuario deberían usar los contenidos de este elemento como valor inicial del
control y representar este texto inicialmente.
Este ejemplo crea un control TEXTAREA de 20 filas por 80 columnas que contiene
inicialmente dos líneas de texto. El elemento TEXTAREA va seguido de botones de
envío y reinicialización.
Estableciendo el atributo readonly los autores pueden mostrar texto no
modificable en un elemento TEXTAREA. Esto no es lo mismo que usar código de
texto estándar, ya que el valor del TEXTAREA se envía con el formulario.
17.8 El elemento ISINDEX
ISINDEX está desaprobado. Este elemento crea un control de entrada de texto de
una línea. Los autores debería usar el elemento INPUT para crear controles de
entrada de tex