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 Nombre
ACP
OEMCP
Windows Windows Windows
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
...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
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
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...
...
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 manual en castellano
Manual de referencia
Manual de referencia -- Página 5
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:
¡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:
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.
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.
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:
...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:
puede reformularse de la siguiente manera con OBJECT:
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):
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<TITLE>
<LINK href="especial.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="especial">Este párrafo debería tener texto especial verde.
</BODY>
</HTML>
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:
<META http-equiv="Content-Style-Type" content="text/css">
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.
<P style="font-size: 12pt; color: fuchsia">
¿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
--------------------------------------------------------------------------------
<!ELEMENT STYLE - - %StyleSheet -- información de estilo -->
<!ATTLIST STYLE
%i18n; -- lang, dir, para usar con title --
type %ContentType; #REQUIRED -- tipo de contenido del lenguaje de
estilos --
media %MediaDesc; #IMPLIED -- diseñado para usar con estos medios --
title %Text; #IMPLIED -- título consultivo --
>
--------------------------------------------------------------------------------
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.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
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:
<HEAD>
<STYLE type="text/css">
H1.miclase {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 está afectado por nuestro estilo </H1>
<H1> Este no está afectado por nuestro estilo </H1>
</BODY>
Finalmente, para limitar el alcance de la información de estilo a una sola
aparición de H1, establecemos el atributo id:
<HEAD>
<STYLE type="text/css">
#miid {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 no está afectado </H1>
<H1 id="miid"> Este H1 está afectado por el estilo </H1>
<H1> Este H1 no está afectado </H1>
</BODY>
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").
<HEAD>
<STYLE type="text/css">
SPAN.ver-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="ver-ex">Las primeras</SPAN> palabras
de este párrafo van en versalitas.
</BODY>
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.
<HEAD>
<STYLE type="text/css">
DIV.Abstracto { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstracto">
<P>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.
<P>Gran Jefe reemplaza a nuestra gama "Commander",
si bien ésta seguirá de momento en catálogo.
</DIV>
</BODY>
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.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue }
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Este ejemplo añade efectos de sonido a los vínculos para su uso en salidas por
voz:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
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:
<LINK href="miestilo.css" rel="stylesheet" type="text/css">
Si establecemos el atributo title la convertimos en la hoja de estilo preferente
del autor:
<LINK href="miestilo.css" title="compacto" rel="stylesheet" type="text/css">
Si añadimos la palabra clave "alternate" al atributo rel la convertimos en una
hoja de estilo alternativa:
<LINK href="miestilo.css" title="Medium" rel="alternate stylesheet"
type="text/css">
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:
<META http-equiv="Default-Style" content="compacto">
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".
<LINK rel="alternate stylesheet" title="compacto"
href="peq-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compacto"
href="peq-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="tipos grandes"
href="tgrandes.css" type="text/css">
<LINK rel="stylesheet" href="comun.css" type="text/css">
Aquí tenemos un ejemplo de cascada que incluye tanto al elemento LINK como al
STYLE.
<LINK rel="stylesheet" href="empresa.css" type="text/css">
<LINK rel="stylesheet" href="informe.css" type="text/css">
<STYLE type="text/css">
p.especial { color: rgb(230, 100, 180) }
</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.
<LINK rel="stylesheet" media="aural" href="empresa-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="empresa-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="empresa-print.css" type="text/css">
<LINK rel="stylesheet" href="informe.css" type="text/css">
<STYLE media="screen, print" type="text/css">
p.especial { color: rgb(230, 100, 180) }
</STYLE>
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.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
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: <http://www.acme.com/empresa.css>; REL=stylesheet
corresponde a:
<LINK rel="stylesheet" href="http://www.acme.com/empresa.css">
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: <compacto.css>; rel="stylesheet"; title="compacto"
Link: <tgrandes.css>; 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.
<H1 align="center"> Cómo Tallar la Madera </H1>
Usando CSS, por ejemplo, podríamos conseguir el mismo efecto de la manera
siguiente:
<HEAD>
<TITLE>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.
...
********* -------
| | -------
| tabla | --
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:
Un documento simple con marcos
<![CDATA[
<P>Este conjunto de marcos contiene:
<UL>
<LI><A href="contenidos_del_marco1.html">Contenidos chéveres</A>
<LI><IMG src="contenidos_del_marco2.gif" alt="Una imagen chévere">
<LI><A href="contenidos_del_marco3.html">Más contenidos chéveres</A>
</UL>
]]>
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
<![CDATA[
...texto...
<H2><A name="vinculo_al_mismo_documento">Sección importante</A></H2>
...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
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
<![CDATA[
<P>Aquí puede encontrar la <A href="principal-sinmarcos.html">
version sin marcos del documento.</A>
]]>
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
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 texto.
Véase el DTD Transicional para la definición formal.
Definiciones de atributos
prompt = texto [CS]
Desaprobado. Este atributo especifica una cadena indicadora ("prompt") para
el campo de entrada.
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 ISINDEX crea un control de entrada de texto de una línea que permite
cualquier número de caracteres. Los agentes de usuario pueden usar el valor del
atributo prompt como cadena indicadora ("prompt").
EJEMPLO DESAPROBADO:
La siguiente declaración ISINDEX:
Un documento con FORM
...texto...
Ir al
sitio web del W3C.
...más texto...
Obtener la base de datos acutal.
...más texto...
Teclas de tabulación. La secuencia real de teclas que permiten la navegación con
tabulador o la activación de los elementos depende de la configuración del
agente de usuario (p.ej., la tecla "tab" se usa para la navegación y la tecla
"intro" se usa para activar el elemento seleccionado).
Los agentes de usuario pueden también definir secuencias de teclas para navegar
en orden inverso al de tabulación. Cuando se alcanza el final (o el principio)
del orden de tabulación, los agentes de usuario puede volver al principio (o al
final).
17.11.2 Teclas de acceso
Definiciones de atributos
accesskey = carácter [CN]
Este atributo asigna una tecla de acceso a un elemento. Una tecla de acceso
es un carácter único del conjunto de caracteres del documento. Nota. Los
autores deberían considerar la forma que tienen los usuarios potenciales de
interaccionar a la hora de especificar la tecla de acceso.
Al pulsar la tecla de acceso asignada a un elemento, el foco se dirige hacia el
elemento. La acción que tiene lugar cuando el foco se dirige hacia un elemento
depende del elemento. Por ejemplo, cuando un usuario activa un vínculo definido
por el elemento A, el agente de usuario normalmente sigue el vínculo. Cuando un
usuario activa un radiobotón, el agente de usuario cambia el valor del
radiobotón. Cuando el usuario activa un campo de texto, éste permite la entrada
de texto, etc.
Los siguientes elementos soportan el atributo accesskey: A, AREA, BUTTON, INPUT,
LABEL, LEGEND y TEXTAREA.
Este ejemplo asigna la tecla de acceso "U" a un rótulo asociado con un control
INPUT. Al pulsar la tecla de acceso, el foco se dirige hacia el rótulo, el cual
a su vez lo dirige al control asociado. El usuario puede entonces introducir
texto en el área INPUT.
En este ejemplo, asignamos una tecla de acceso a un vínculo definido por el
elemento A. Al pulsar esta tecla de acceso, el usuario es llevado a otro
documento, en este caso una tabla de contenidos.
Tabla de Contenidos
La invocación de teclas de acceso depende del sistema subyacente. Por ejemplo,
en máquinas que ejecuten MS Windows, normalmente hay que pulsar la tecla "alt"
además de la tecla de acceso. En sistemas Apple, normalmente hay que pulsar la
tecla "cmd" además de la tecla de acceso.
La representación de teclas de acceso depende del agente de usuario.
Recomendamos a los autores que incluyan la tecla de acceso en el texto del
rótulo o dondequiera que se aplique la tecla de acceso. Los agentes de usuario
deberían representar las teclas de acceso de tal modo que se enfatice su papel y
se distinga de otros caracteres (p.ej., subrayándola).
17.12 Controles deshabilitados y de sólo lectura
En aquellos contextos en los que la entrada de datos por parte del usuario sea
indeseable o irrelevante, es importante poder deshabilitar un control o
convertirlo en un control de sólo lectura. Por ejemplo, podríamos querer
deshabilitar el botón de envío de un formulario mientras que el usuario no haya
introducido ciertos datos obligatorios. Análogamente, un autor podría querer
incluir una sección de texto de sólo lectura que debería ser enviada como un
valor junto con el formulario. Las siguientes secciones describen los controles
deshabilitados y de sólo lectura.
17.12.1 Controles deshabilitados
Definiciones de atributos
disabled [CI]
Cuando se establece para un control de formulario, este atributo booleano
deshabilita el control para la entrada de datos por parte del usuario.
Cuando está establecido, el atributo disabled tiene los siguientes efectos sobre
un elemento:
- No se puede dirigir el foco hacia controles deshabilitados.
- En el orden de tabulación, se salta por encima de los controles
deshabilitados.
- Los controles deshabilitados no pueden tener éxito.
Los siguientes elementos soportan el atributo disabled: BUTTON, INPUT, OPTGROUP,
OPTION, SELECT y TEXTAREA.
Este atributo se hereda, pero las declaraciones locales prevalecen sobre el
valor heredado.
El modo en que se representan los elementos deshabilitados depende del agente de
usuario. Por ejemplo, algunos agentes de usuario dibujan en gris los objetos de
menú deshabilitados, los rótulos de los botones, etc.
En este ejemplo, el elemento INPUT está deshabilitado. Por tanto, no puede
recibir datos del usuario, y su valor no se enviará con el formulario.
En este ejemplo, seguirá habiendo un valor emparejado con el nombre
"password-invisible" que será enviado con el formulario.
17.13.3 Procesamiento de los datos del formulario
Cuando el usuario envía un formulario (p.ej., activando un botón de envío), el
agente de usuario lo procesa del siguiente modo.
Paso uno: Identificar los controles con éxito
Paso dos: Construir el conjunto de datos del formulario
Un conjunto de datos del formulario es una secuencia de parejas nombre de
control/valor actual construida a partir de los elementos con éxito.
Paso tres: Codificar el conjunto de datos del formulario
El conjunto de datos del formulario se codifica a continuación de acuerdo con el
tipo de contenido especificado por el atributo enctype del elemento FORM.
Paso cuatro: Enviar el conjunto de datos del formulario codificado
Finalmente, los datos codificados se envían al agente procesador designado por
el atributo action usando el protocolo especificado por el atributo method.
Esta especificación no especifica todos los métodos válidos de envío ni los
tipos de contenido que pueden utilizarse con los formularios. Sin embargo, los
agentes de usuario HTML 4 deben soportar las convenciones establecidas en los
siguientes casos:
- Si method es "get" y action es un URI HTTP, el agente de usuario toma el
valor de action, le agrega un '?', y a continuación agrega el conjunto de
datos del formulario, codificado según el tipo de contenido
"application/x-www-form-urlencoded". A continuación el agente de usuario
sigue este URI. En este escenario, los datos del formulario se restringen a
códigos ASCII.
- Si method es "post" y action es un URI HTTP, el agente de usuario conduce una
transacción HTTP "post" usando el valor del atributo action y un mensaje
creado de acuerdo con el tipo de contenido especificado por el atributo
enctype.
Para cualquier otro valor de action o method, el comportamiento queda sin
especificar.
Los agentes de usuario deberían representar la respuesta de las transacciones
HTTP "get" y "post".
17.13.4 Tipos de contenido de formularios
El atributo enctype del elemento FORM especifica el tipo de contenido usado para
codificar el conjunto de datos del formulario para su envío al servidor. Los
agentes de usuario deben soportar los tipos de contenido enumerados más
adelante. El comportamiento para otros tipos de contenido queda sin especificar.
Consulte también la sección sobre transformación del signo & en secuencias de
escape para valores de atributos URI.
application/x-www-form-urlencoded
Este es el tipo de contenido por defecto. Los formularios enviados con este tipo
de contenido deben codificarse como sigue:
1. Los nombres de control y los valores se transforman en secuencias de escape.
Los caracteres de espacio se sustituyen por '+', y los caracteres reservados
se transforman en secuencias de escape según se describe en [RFC1738],
sección 2.2: Los caracteres no alfanuméricos se reemplazan por '%HH', un
signo de porcentaje y dos dígitos hexadecimales que representan el código
ASCII del carácter. Los saltos de línea se representan como parejas "CR LF"
(es decir, '%0D%0A').
2. Las parejas nombre de control/valor se enumeran según el orden en que
aparecen en el documento. El nombre se separa del valor con un signo '=' y
las parejas nombre/valor se separan entre sí con un signo '&'.
multipart/form-data
Nota. Consulte [RFC2388] para información adicional sobre carga de ficheros,
incluyendo cuestiones de compatibilidad con versiones anteriores, la relación
entre "multipart/form-data" y otros tipos de contenido, cuestiones de
rendimiento, etc.
Consulte el apéndice para información sobre cuestiones de seguridad relacionadas
con los formularios.
El tipo de contenido "application/x-www-form-urlencoded" no es eficiente para
enviar grandes cantidades de datos binarios o textos que contenga caracteres no
ASCII. Para enviar formularios que contengan ficheros, datos no ASCII, y datos
binarios debería utilizarse el tipo de contenido "multipart/form-data".
El contenido "multipart/form-data" sigue las reglas de todos los flujos de datos
MIME multiparte, como se esboza en [RFC2045]. La definición de
"multipart/form-data" puede encontrarse en el registro [IANA].
Un mensaje "multipart/form-data" contiene una serie de partes, cada una de las
cuales representa un control con éxito. Las partes se envían al agente
procesador en el mismo orden en que aparecen los controles correspondientes en
el flujo del documento. No deberían aparecer límites entre partes en ninguno de
los datos; el modo en que se consigue esto queda fuera del alcance de esta
especificación.
Como con todos los tipos MIME multiparte, cada parte tiene un encabezado
opcional "Content-Type" cuyo valor por defecto es "text/plain". Los agentes de
usuario deberían proveer el encabezado "Content-Type", acompañado por un
parámetro "charset".
Se espera que cada parte contenga:
1. un encabezado "Content-Disposition" cuyo valor es "form-data".
2. un nombre de atributo que especifique el nombre de control del control
correspondiente. Los nombres de control codificados originalmente con
conjuntos de caracteres no ASCII pueden codificarse usando el método
explicado en [RFC2045].
Así, por ejemplo, para un control llamado "micontrol", la parte correspondiente
se especificaría así:
Content-Disposition: form-data; name="micontrol"
Como con todas las transmisiones MIME, se utiliza "CR LF" (es decir, '%0D%0A')
para separar líneas de datos.
Se puede codificar cada parte, pudiéndose proporcionar el encabezado
"Content-Transfer-Encoding" si el valor de esa parte no es conforme con la
codificación por defecto (7BIT) (ver [RFC2045], sección 6)
Si se envían los contenidos de un fichero con un formulario, el fichero
introducido debería identificarse con el tipo de contenido apropiado (p.ej.,
"application/octet-stream"). Si deben enviarse varios ficheros como resultado de
la entrada de un solo formulario, deberían ser enviados como "multipart/mixed"
incluidos dentro del "multipart/form-data".
El agente de usuario debería intentar proporcionar un nombre de fichero para
cada fichero enviado. El nombre del fichero puede especificarse con el parámetro
"filename" del encabezado 'Content-Disposition: form-data', o, en el caso de
múltiples ficheros, en un encabezado 'Content-Disposition: attachment' de la
subparte. Si el nombre del fichero del sistema operativo del cliente no está en
US-ASCII, el nombre del fichero podría aproximarse o codificarse usando el
método de [RFC2045]. Esto es conveniente, por ejemplo, en aquellos casos en que
los ficheros subidos pudieran contener referencias cruzadas (p.ej., un fichero
TeX y su descripción de estilo auxiliar ".sty").
El siguiente ejemplo ilustra la codificación "multipart/form-data". Supongamos
que tenemos el siguiente formulario:
Si el usuario introduce "Alfredo" en la entrada de texto, y selecciona el
fichero de texto "fichero1.txt", el agente de usuario podría enviar los datos
siguientes:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="nombre-envio"
Alfredo
--AaB03x
Content-Disposition: form-data; name="ficheros"; filename="fichero1.txt"
Content-Type: text/plain
... contenidos de fichero1.txt ...
--AaB03x--
Si el usuario eligió un segundo fichero (una imagen) "fichero2.gif", el agente
de usuario podría construir las partes de este modo:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="nombre-envio"
Alfredo
--AaB03x
Content-Disposition: form-data; name="ficheros"
Content-Type: multipart/mixed; boundary=BbC04y
--BbC04y
Content-Disposition: attachment; filename="fichero1.txt"
Content-Type: text/plain
... contenidos de fichero1.txt ...
--BbC04y
Content-Disposition: attachment; filename="fichero2.gif"
Content-Type: image/gif
Content-Transfer-Encoding: binary
...contenidos de fichero2.gif...
--BbC04y--
--AaB03x--
================================================================================
18 Scripts
--------------------------------------------------------------------------------
Contenidos
1. Introducción a los scripts
2. Diseño de documentos para agentes de usuario que soporten scripts
1. El elemento SCRIPT
2. Especificación del lenguaje de scripts
- El lenguaje de scripts por defecto
- Declaración local del lenguaje de un script
- Referencias a elementos HTML desde un script
3. Eventos intrínsecos
4. Modificación dinámica de documentos
3. Diseño de documentos para agentes de usuario que no soporten scripts
1. El elemento NOSCRIPT
2. Ocultar datos de scripts a los agentes de usuario
--------------------------------------------------------------------------------
18.1 Introducción a los scripts
Un script en el lado del cliente es un programa que puede acompañar a un
documento HTML o que puede estar incluido en él. El programa se ejecuta en la
máquina del cliente cuando se carga el documento, o en algún otro instante, como
por ejemplo cuando se activa un vínculo. El soporte de scripts de HTML es
independiente del lenguaje de scripts.
Los scripts ofrecen a los autores la posibilidad de extender los documentos HTML
de maneras activas e interactivas. Por ejemplo:
- Pueden evaluarse los scripts a medida que se carga el documento para
modificar los contenidos del documento dinámicamente.
- Los scripts pueden acompañar a un formulario para procesar los datos a medida
que éstos se introducen. Los diseñadores pueden rellenar dinámicamente partes
de un formulario según los valores de los otros campos. También pueden
asegurarse de que los datos introducidos concuerden con rangos de valores
predeterminados, de que los campos sean consistentes entre sí, etc.
- Los scripts pueden ser llamados por eventos que afecten al documento, como la
carga, la descarga, el movimiento del foco sobre los elementos, los
movimientos del ratón, etc.
- Los scripts pueden ser vinculados a controles de formulario (p.ej., botones)
para producir elementos gráficos para la interfaz del usuario.
Hay dos tipos de scripts que los autores pueden asociar a un documento HTML:
- Aquellos que se ejecutan una sola vez cuando el agente de usuario carga el
documento. Los scripts que aparecen dentro de un elemento SCRIPT se ejecutan
cuando el elemento es cargado. Para los agentes de usuario que no puedan o
que no vayan a ejecutar scripts, los autores pueden incluir contenido
alternativo por medio del elemento NOSCRIPT.
- Aquellos que son ejecutados cada vez que ocurre un determinado evento. Estos
scripts pueden ser asignados a varios elementos por medio de los atributos de
eventos intrínsecos.
Nota. Esta especificación incluye información más detallada sobre scripts en la
sección sobre macros de scripts.
18.2 Diseño de documentos para agentes de usuario que soporten scripts
Las siguientes secciones tratan sobre cuestiones que afectan a los agentes de
usuario que soportan scripts.
18.2.1 El elemento SCRIPT
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
src = uri [CT]
Este atributo especifica la localización de un script externo.
type = tipo de contenido [CI]
Este atributo especifica el lenguaje de scripts de los contenidos del
elemento y prevalece sobre el lenguaje de scripts por defecto. El lenguaje de
scripts se especifica como un tipo de contenido (p.ej., "text/javascript").
Los autores deben proporcionar un valor para este atributo. No hay valor por
defecto para este atributo.
language = cdata [CI]
Desaprobado. Este atributo especifica el lenguaje de scripts de los
contenidos de este elemento. Su valor es un identificador del lenguaje, pero
debido a que estos identificadores no son estándar, este atributo ha sido
desaprobado en favor de type.
defer [CI]
Si está establecido, este atributo booleano indica al agente de usuario que
el script no va a generar ningún contenido en el documento (p.ej., en
javascript, cuando no hubiera ningún "document.write") y por lo tanto el
agente de usuario puede seguir analizando y representando.
Atributos definidos en otros lugares
charset (codificaciones de caracteres)
El elemento SCRIPT coloca un script dentro de un documento. Este elemento puede
aparecer cualquier número de veces en el HEAD o en el BODY de un documento HTML.
El script puede estar definido dentro de los contenidos del elemento SCRIPT o en
un fichero externo. Si el atributo src no está establecido, los agentes de
usuario deben interpretar que los contenidos del elemento son el script. Si src
tiene un valor URI, los agentes de usuario no deben tener en cuenta los
contenidos del elemento y deben obtener el script mediante el URI. Obsérvese que
el atributo charset se refiere a la codificación de caracteres del script
designado por el atributo src; no afecta al contenido del elemento SCRIPT.
Los scripts son evaluados por motores de scripts, con los cuales deben poder
comunicarse los agentes de usuario.
La sintaxis de los datos de scripts depende del lenguaje de scripts.
18.2.2 Especificación del lenguaje de scripts
Al no estar ligado el HTML a un lenguaje de scripts específico, los autores de
los documentos deben decir explícitamente a los agentes de usuario el lenguaje
de cada script. Esto puede hacerse o bien mediante una declaración por defecto o
bien mediante una declaración local.
El lenguaje de scripts por defecto
Los autores deberían especificar el lenguaje de scripts por defecto de todos los
scripts de un documento incluyendo la siguiente declaración META en el HEAD:
Un documento con SCRIPT
Aquí tenemos un manejador de ventanas más interesante:
En Tcl esto sería algo así:
Obsérvese que un "document.write" o sus sentencias equivalentes en un manejador
de eventos intrínsecos lo que hacen es crear un nuevo documento y escribir en
él, no modificar el documento actual.
18.2.4 Modificación dinámica de documentos
Los scripts que se ejecutan cuando un documento es cargado pueden modificar los
contenidos del documento dinámicamente. La capacidad de hacer esto depende del
lenguaje de scripts en sí (p.ej., la sentencia "document.write" en el modelo de
objetos de HTML no está soportada por algunas marcas).
La modificación dinámica de un documento puede ser modelizada de la siguiente
manera:
1. Todos los elementos SCRIPT se evalúan en orden a medida que el documento es
cargado.
2. Todas las construcciones de scripts contenidas en un elemento SCRIPT dado
que generen datos CDATA SGML son evaluados. Su texto generado combinado se
inserta en el documento sustituyendo al documento SCRIPT.
3. Los datos CDATA generados son evaluados nuevamente.
Los documentos HTML deben ser conformes con el DTD del HTML tanto antes como
después del procesamiento de cualquiera de los elementos SCRIPT.
El ejemplo siguiente ilustra cómo puede un script modificar un documento
dinámicamente. El siguiente script:
Documento de prueba
tiene el mismo efecto que este código HTML:
Documento de prueba
¡Hola Mundo!
18.3 Diseño de documentos para agentes de usuario que no soporten scripts
Las siguientes secciones tratan sobre cómo pueden los autores crear documentos
que funcionen para agentes de usuario que no soporten scripts.
18.3.1 El elemento NOSCRIPT
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
El elemento NOSCRIPT permite a los autores proporcionar contenido alternativo
cuando un script no es ejecutado. El contenido de un elemento NOSCRIPT sólo
debería ser representado por un agente de usuario capaz de reconocer scripts en
los casos siguientes:
- El agente de usuario está configurado para no evaluar scripts.
- El agente de usuario no soporta un lenguaje de scripts invocado por un
elemento SCRIPT anterior en el documento.
Los agentes de usuario que no soporten scripts en el lado del cliente deben
representar los contenidos de este elemento.
En el ejemplo siguiente, un agente de usuario que ejecute el SCRIPT incluirá en
el documento algunos datos creados dinámicamente. Si el agente de usuario no
soporta scripts, el usuario aún podrá obtener los datos por medio de un vínculo.
Acceder a los datos.
18.3.2 Ocultar datos de scripts a agentes de usuario
Es probable que los agentes de usuario que no reconozcan el elemento SCRIPT
representen los contenidos del elemento como texto. Algunos motores de scripts,
incluyendo los de los lenguajes JavaScript, VBScript y Tcl, permiten que las
sentencias de los scripts estén contenidas en un comentario SGML. Los agentes de
usuario que no reconozcan el elemento SCRIPT ignorarán así el comentario,
mientras que los motores de scripts que funcionen correctamente entenderán que
los scripts de los comentarios deberían ser ejecutados.
Otra solución al problema es mantener los scripts en documentos externos y hacer
referencia a ellos con el atributo src.
Comentando scripts en Javascript
El motor de JavaScript permite que aparezca la cadena "" al analizador JavaScript.
Comentando scripts en VBScript
En VBScript, un carácter de comilla simple hace que el resto de la línea actual
sea tratada como un comentario. Puede usarse por tanto para ocultar a VBScript
la cadena "-->", por ejemplo:
Comentando scripts en TCL
En Tcl, el carácter "#" comenta el resto de la línea:
Nota. Algunos navegadores cierran los comentarios al encontrar el primer
carácter ">", de modo que para ocultar el contenido de los scripts de estos
navegadores, se pueden invertir los operandos de los operadores relacionales y
de desplazamiento (p.ej., usar "y < x" en vez de "x > y") o se pueden usar
caracteres de escape dependientes del lenguaje de scripts para ">".
================================================================================
19 Información de referencia de SGML para HTML
--------------------------------------------------------------------------------
Contenidos
1. Validación de documentos
2. Catálogo SGML de ejemplo
--------------------------------------------------------------------------------
Las secciones siguientes contienen la definición formal SGML de HTML 4. Incluye
la declaración SGML, la Definición del Tipo de Documento (Document Type
Definition, DTD), y las Referencias a entidades de caracteres, así como un
catálogo SGML de ejemplo.
Estos ficheros también están disponibles en formato ASCII según se indica a
continuación:
N.T.: Estas son las versiones originales en inglés de los documentos
correspondientes.
DTD por Defecto:
http://www.w3.org/TR/html401/strict.dtd
DTD Transicional:
http://www.w3.org/TR/html401/loose.dtd
DTD para Documentos con Marcos:
http://www.w3.org/TR/html401/frameset.dtd
Declaración SGML:
http://www.w3.org/TR/html401/HTML4.decl
Ficheros de definición de entidades:
http://www.w3.org/TR/html401/HTMLspecial.ent
http://www.w3.org/TR/html401/HTMLsymbol.ent
http://www.w3.org/TR/html401/HTMLlat1.ent
Un catálogo de ejemplo:
http://www.w3.org/TR/html401/HTML4.cat
19.1 Validación de documentos
Muchos autores se basan en un conjunto limitado de navegadores para comprobar
los documentos que producen, y suponen que si los navegadores pueden representar
sus documentos, es que éstos son válidos. Desafortunadamente, esto es una manera
muy poco efectiva de verificar la validez de un documento, precisamente porque
los navegadores están diseñados para que al encontrar documentos no válidos los
representen lo mejor posible para evitar la frustración de los usuarios.
Para una mejor validación, debería comprobar su documento con un analizador SGML
tal como nsgmls (ver [SP]), para verificar que los documentos HTML sean
conformes con el DTD de HTML 4. Si la declaración del tipo de documento de su
documento incluye un URI y si su analizador SGML soporta este tipo de
identificador de sistema, obtendrá el DTD directamente. En otro caso puede usar
el catálogo SGML de ejemplo que sigue. Éste asume que el DTD ha sido guardado
como "strict.dtd" y que las entidades se encuentran en los ficheros
"HTMLlat1.ent", "HTMLsymbol.ent" y "HTMLspecial.ent". En cualquier caso,
asegúrese de que su analizador SGML es capaz de trabajar con [ISO10646]. Vea la
documentación de su herramienta de validación para más detalles.
Tenga muy en cuenta que esta validación, aunque es útil y muy recomendable, no
garantiza que el documento sea completamente conforme con la especificación HTML
4. Esto se debe a que el analizador SGML se basa únicamente en el DTD de SGML
dado, el cual no expresa todos los aspectos de un documento HTML 4 válido. Más
concretamente, una analizador SGML asegura que la sintaxis, la estructura, la
lista de elementos y sus atributos son válidos. Pero, por ejemplo, no puede
detectar errores tales como dar al atributo width de un elemento IMG un valor no
válido (p.ej., "blabla" o "12.5"). Aunque esta especificación restringe el valor
de este atributo a "un entero que representa una longitud en píxeles", el DTD
sólo lo define como CDATA, que en realidad admite cualquier valor. Sólo un
programa especializado podría englobar la totalidad de la especificación de HTML
4.
De todos modos, este tipo de validación sigue siendo altamente recomendable, ya
que permite la detección de un gran conjunto de errores que hacen a los
documentos no válidos.
19.2 Catálogo SGML de ejemplo
Este catálogo incluye la directriz override para asegurarse de que los programas
procesadores tales como nsgmls utilicen identificadores públicos con preferencia
sobre los identificadores de sistema. Esto significa que los usuarios no deben
estar conectados a la Web para obtener los identificadores de sistema basados es
URIs.
--------------------------------------------------------------------------------
OVERRIDE YES
PUBLIC "-//W3C//DTD HTML 4.01//EN" strict.dtd
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" loose.dtd
PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" frameset.dtd
PUBLIC "-//W3C//ENTITIES Latin1//EN//HTML" HTMLlat1.ent
PUBLIC "-//W3C//ENTITIES Special//EN//HTML" HTMLspecial.ent
PUBLIC "-//W3C//ENTITIES Symbols//EN//HTML" HTMLsymbol.ent
--------------------------------------------------------------------------------
================================================================================
20 Declaración SGML de HTML 4
Nota. El número total de puntos de código permitidos en el conjunto de
caracteres del documento de esta declaración SGML incluye los primeros 17 planos
de [ISO10646] (17 por 65536). Se ha hecho esta limitación porque este número
está limitado a una longitud de 8 dígitos en la versión actual del estándar
SGML. Esto no implica que se vaya mantener a largo plazo la restricción del UCS
(Conjunto universal de caracteres) a los primeros 17 planos. Es altamente
probable que la superación de la limitación de 8 dígitos de SGML, y la
actualización de esta especificación, se produzcan antes de la primera
asignación de un carácter por encima de los 17 primeros planos.
Nota. En sentido estricto, el número de registro ISO 177 se refiere al estado
original de [ISO10646] en 1993. Desde 1993 se han introducido cambios
consistentes en la adición de caracteres y en una ocasión una operación de
recolocación de un gran número de puntos de código para el Coreano Hangul
(enmienda 5). Las revisiones de la especificación HTML 4 pueden actualizar la
referencia a la ISO 10646 para incluir cambios adicionales.
20.1 Declaración SGML
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
================================================================================
21 Definición del Tipo de Documento
--------------------------------------------------------------------------------
%HTMLlat1;
%HTMLsymbol;
%HTMLspecial;
]]>
]]>
--------------------------------------------------------------------------------
================================================================================
22 Definición del Tipo de Documento Transicional
--------------------------------------------------------------------------------
...
...
El URI utilizado como identificador del sistema en el identificador
público permite al agente de usuario descargar el DTD y los conjuntos
de entidades necesarios.
El FPI (Formal Public Identifier) para el DTD Estricto de HTML 4.01 es:
"-//W3C//DTD HTML 4.01//EN"
Esta versión del DTD Estricto es:
http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd
Los autores deberían usar el DTD Estricto a menos que
necesiten los controles de presentación para los agentes
de usuario que no soporten (adecuadamente) hojas de estilo.
Si va a escribir un documento que incluya marcos, use el
siguiente FPI:
"-//W3C//DTD HTML 4.01 Frameset//EN"
Esta versión del DTD de Documentos con Marcos es:
http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd
Utilice los siguientes URIs (relativos) para hacer referencia a
los DTDs y a las definiciones de entidades de esta especificación:
"strict.dtd"
"loose.dtd"
"frameset.dtd"
"HTMLlat1.ent"
"HTMLsymbol.ent"
"HTMLspecial.ent"
-->
%HTMLlat1;
%HTMLsymbol;
%HTMLspecial;
]]>
]]>
]]>
]]>
]]>
]]>
--------------------------------------------------------------------------------
================================================================================
23 Definición del Tipo de Documento con Marcos
--------------------------------------------------------------------------------
...
...
-->
%HTML4.dtd;
--------------------------------------------------------------------------------
================================================================================
24 Referencias a entidades de caracteres en HTML 4
--------------------------------------------------------------------------------
Contenidos
1. Introducción a las referencias a entidades de caracteres
2. Referencias a entidades de caracteres para caracteres de la ISO 8859-1
1. Lista de caracteres
3. Referencias a entidades de caracteres para símbolos, símbolos matemáticos y
letras griegas
1. Lista de caracteres
4. Referencias a entidades de caracteres para caracteres con significado en el
código y caracteres de internacionalización
1. Lista de caracteres
--------------------------------------------------------------------------------
24.1 Introducción a las referencias a entidades de caracteres
Una referencia a una entidad de caracteres es una estructura SGML que hace
referencia a un carácter del conjunto de caracteres del documento.
Esta versión de HTML soporta varios conjuntos de referencias a entidades de
caracteres:
- caracteres de la ISO 8859-1 (Latin-1). De acuerdo con la sección 14 de
[RFC1866], se ha extendido a esta especificación el conjunto de entidades
Latin-1 para cubrir toda la parte derecha de la ISO-8859-1 (todas las
posiciones de código con el bit más significativo establecido), incluyendo
los ya habitualmente utilizados , © y ®. Los nombres de las
entidades se han sacado de los apéndices de SGML (definido en [ISO8879]).
- símbolos, símbolos matemáticos y letras griegas. Estos caracteres pueden
representarse mediante signos de la fuente de Adobe "Symbol".
- caracteres con significado en el código y caracteres de internacionalización
(p.ej., para texto bidireccional).
Las secciones que siguen presentan las listas completas de referencias a
entidades de caracteres. Aunque por convención ([ISO10646]) los comentarios que
siguen a cada entrada se suelen escribir con letras mayúsculas, en esta
especificación los hemos convertido a minúsculas por razones de legibilidad.
24.2 Referencias a entidades de caracteres para caracteres de la ISO 8859-1
Las referencias a entidades de caractreres de esta sección producen caracteres
cuyos equivalentes numéricos ya deberían estar soportados por los agentes de
usuario conformes con HTML 2.0. Así, la referencia a entidad de caracteres
÷ es una forma de obtener el signo de división (÷) más conveniente que
÷.
Para soportar estas entidades con nombre, los agentes de usuario no tienen más
que reconocer los nombres de las entidades y convertirlos a caracteres que
caigan dentro del repertorio de la [ISO88591].
El carácter 65533 (hexadecimal FFFD) es el último carácter válido de UCS-2. El
65534 (hexadecimal FFFE) está sin asignar y se reserva como la versión con los
bytes traspuestos del ESPACIO DE NO SEPARACIÓN DE ANCHURA ZERO con el propósito
de detectar el orden de los bytes. El 65535 (hexadecimal FFFF) está sin asignar.
24.2.1 Lista de caracteres
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
24.3 Referencias a entidades de caracteres para símbolos, símbolos matemáticos y
letras griegas
Las referencias a entidades de caracteres de esta sección producen caracteres
que pueden ser representados por los signos de la fuente de Adobe Symbol,
ampliamente extendida, que incluye caracteres griegos, varios símbolos de
agrupamiento, y una selección de operadores matemáticos como símbolos de
gradiente, productorio y sumatorio.
Para soportar estas entidades, los agentes de usuario pueden soportar la
totalidad de la [ISO10646] o usar otros medios. La representación de signos para
estos caracteres puede lograrse o bien mostrando los caracteres relevantes de la
[ISO10646] o bien por otros medios, como por ejemplo transformando internamente
las entidades enumeradas, las referencias numéricas de caracteres, y los
caracteres, en las posiciones adecuadas de alguna fuente que contenga los signos
necesarios.
Cuándo usar entidades griegas. Este conjunto de entidades contiene todas las
letras usadas en el griego moderno. Sin embargo, no contiene la puntuación
griega, caracteres acentuados precompuestos ni los acentos sin espaciado (tonos,
dialytika) necesarios para componerlos. No hay letras arcaicas, letras
exclusivas del copto, ni letras precompuestas para el griego politónico. Las
entidades aquí definidas no están pensadas para la representación de textos en
griego moderno y como tales no serían una buena representación; están pensadas,
más bien, para las letras griegas ocasionales que aparecen en obras técnicas y
matemáticas.
24.3.1 Lista de caracteres
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
24.4 Referencias a entidades de caracteres para caracteres con significado en el
código y para caracteres de internacionalización
Las referencias a entidades de caracteres de esta sección son para convertir
caracteres significativos para el código en secuencias de escape (estos
caracteres son los mismos que en HTML 2.0 y 3.2), y para denotar espacios y
guiones. Otros caracteres de esta sección se aplican a cuestiones de
internacionalización como la eliminación de las ambigüedades del texto
bidireccional (ver la sección sobre texto bidireccional para más detalles).
También se han añadido entidades para el resto de los caracteres que se dan en
CP-1252 y que no aparecen en los conjuntos de entidades HTMLlat1 o HTMLsymbol.
Todos estos aparecen en el rango 128-159 del juego de caracteres CP-1252. Estas
entidades permiten que se denoten los caracteres independientemente de la
plataforma.
Para soportar estas entidades, los agentes de usuario pueden o bien soportar la
totalidad de [ISO10646] o usar otros medios. La representación de signos para
estos caracteres puede lograrse o bien pudiendo mostrar los caracteres
correspondientes de la [ISO10646] o bien por otros medios, como por ejemplo
transformando internamente las entidades enumeradas, las referencias numéricas
de caracteres y los caracteres, en las posiciones adecuadas de alguna fuente que
contenga los signos necesarios.
24.4.1 Lista de caracteres
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
================================================================================
Apéndice A: Cambios
--------------------------------------------------------------------------------
Contenidos
1. Cambios entre la versión de HTML 4.0 del 24 de abril de 1998 y la versión de
HTML 4.01 del 24 de diciembre de 1999
1. Cambios en la especificación
- Cambios generales
- Sobre SGML y HTML
- Representación de Documentos HTML
- Tipos de datos básicos de HTML
- La estructura global de un documento HTML
- Información sobre el idioma y la dirección del texto
- Tablas
- Vínculos
- Objetos, Imágenes y Aplicaciones
- Hojas de estilo en documentos HTML
- Marcos
- Formularios
- Declaración SGML
- DTD Estricto
- Notas
- Referencias
2. Erratas corregidas
3. Pequeños errores tipográficos corregidos
4. Clarificaciones
5. Problemas conocidos de los navegadores
2. Cambios entre las versiones del 18 de diciembre de 1997 y del 24 de abril de
1998
1. Erratas corregidas
2. Pequeños errores tipográficos corregidos
3. Cambios entre HTML 3.2 y HTML 4.0 (18 de diciembre de 1997)
1. Cambios en los elementos
- Elementos nuevos
- Elementos desaprobados
- Elementos obsoletos
2. Cambios en los atributos
3. Cambios relacionados con la accesibilidad
4. Cambios relacionados con los metadatos
5. Cambios relacionados con el texto
6. Cambios relacionados con los vínculos
7. Cambios relacionados con las tablas
8. Cambios relacionados con las imágenes, objetos y mapas de imágenes
9. Cambios relacionados con los formularios
10. Cambios relacionados con las hojas de estilo
11. Cambios relacionados con los marcos
12. Cambios relacionados con los scripts
13. Cambios relacionados con la internacionalización
--------------------------------------------------------------------------------
A.1 Cambios entre la versión de HTML 4.0 del 24 de abril de 1998 y la versión de
HTML 4.01 del 24 de diciembre de 1999
Esta sección describe en qué se diferencian la versión del 24 de diciembre de
1999 de la especificación de HTML 4.01 y la versión del 24 de abril de 1998 de
la especificación de HTML 4.0.
A.1.1 Cambios en la especificación
Cambios generales
- Nuevas hojas de estilo para el documento basadas en los estilos de los
informes técnicos del W3C.
- Se añadió una tabla de contenidos abreviada.
- Se actualizó el copyright.
- Se eliminaron partes de código que hacían que algunos navegadores se
colgaran.
- Se añadió a Shane McCarron a la sección de agradecimientos.
- En la sección 1.4 se eliminaron los detalles del copyright para hacer
referencia al sitio del W3C en su lugar.
- Las referencias al conjunto de caracteres del documento son todas a la ISO
10646 (y una vez a UNICODE para señalar su equivalencia). Las referencias a
UNICODE se refieren sólo al algoritmo bidireccional.
- Los ejemplos usan ahora FPIs con fecha.
Sobre SGML y HTML
- Sección 3.2.2: Los valores de los atributos también pueden contener el
carácter dos puntos y subguiones.
Representación de Documentos HTML
- El Conjunto de Caracteres del Documento: Ahora sólo se usa [ISO10646] para
las referencias al conjunto de caracteres del documento. [UNICODE] se reserva
para las referencias relacionadas con el algoritmo bidireccional.
Tipos de datos básicos de HTML
- Descriptores de medios: Todos los caracteres de los ejemplos se describen
ahora usando notación hexadecimal (y haciendo referencia a la ISO 10646 en
lugar de a Unicode).
La estructura global de un documento HTML
- 7.2 Información sobre la versión de HTML: Se ha añadido una nota sobre el
compromiso del Grupo de Trabajo HTML de que:
+ Los posibles cambios en los DTDs futuros de HTML 4 no invalidarán los
documentos que sean conformes con los DTDs de la presente especificación.
El Grupo de Trabajo HTML se reserva el derecho de corregir los errores
conocidos.
+ Los programas que sean conformes con los DTDs de la presente
especificación pueden no tener en cuenta las características de los DTDs
futuros de HTML 4 que no reconozcan.
- 7.2 Información sobre la versión de HTML: Se usan como identificadores de
sistema URIs de HTML sin fecha. Estos URIs son también los que se usan
globalmente en todos los ejemplos.
- 7.4.4 Metadatos: Se ha eliminado la nota relativa al trabajo del W3C sobre
metadatos y se ha reemplazado con una nota sobre el RDF.
- 7.4.4.2 Metadatos: Al final de la sección sobre encabezados HTTP se ha
eliminado el ejemplo de auto-actualización (ya que no es parte de la
Recomendación) y se ha añadido una nota para usar redirecciones del lado del
servidor.
Información sobre el idioma y la dirección del texto
- El atributo dir: Se clarifica que el atributo dir se aplica al contenido del
elemento, a los valores de los atributos y la dirección de las tablas.
Tablas
- 11.2.6 Celdas de una tabla: Se han cambiado las definiciones de rowspan y
colspan. Ahora los "spans" están limitados por grupos (rowgroups o
colgroups).
- 11.3.2 Celdas de una tabla: Cuando "char=align" no está soportado por el
agente de usuario, el comportamiento queda sin definir.
Vínculos
- 12.2 El elemento A: Se ha modificado la descripción del atributo type de los
elementos A y (LINK) para enfatizar su naturaleza consultiva.
- 12.2.3 Vínculos con el atributo id: Es legal que "name" e "id" aparezcan en
la misma etiqueta inicial cuando se definen ambos para un elemento. Deben
tener valores idénticos.
- 12.3.3 Vínculos y motores de búsqueda: Se ha eliminado la referencia al
atributo dir del ejemplo ya que no se aplica a los recursos vinculados
(solamente al contenido del elemento y a los valores textuales de los
atributos).
- 12.4.1 Cómo completar los URIs relativos: Como RFC 2616 no incluye un campo
de encabezado Link, la siguiente frase sólo es válida para versiones
anteriores a HTTP 1.1: "Los elementos Link especificados mediante encabezados
HTTP se tratan exactamente igual que los elementos LINK que aparezcan
explícitamente en un documento."
Objetos, Imágenes y Aplicaciones
- 13.2 El elemento IMG: Se ha añadido el atributo name por compatibilidad con
versiones anteriores.
- 13.2 El elemento IMG: Se ha añadido una nota sobre la obligación de los
agentes de usuario de proporcionar mecanismos diferentes para acceder al URI
del "longdesc" (de IMG) y al URI del "src" (de A) cuando IMG sea parte del
contenido de un elemento A.
- 13.3 El elemento OBJECT: Se ha añadido una nota para indicar que cuando el
valor del tipo "type" de OBJECT y el encabezado HTTP difieren, el último
prevalece.
- 13.3 El elemento OBJECT: Se ha añadido una frase para usar PARAM en lugar de
usar al mismo tiempo los atributos "data" y "classid" de OBJECT.
- 13.4 El elemento APPLET: Se ha añadido una nota para indicar que, por razones
de seguridad, el atributo "codebase" de APPLET sólo se busca en los
subdirectorios del directorio actual.
- 13.6.1 Mapas de imágenes en el lado del cliente: La definición del atributo
"poly" se ha hecho más clara. Una nota en el atributo "coords" de AREA indica
que si los autores no cierran un polígono los agentes de usuario deberían
cerrarlo.
- 13.6.1 Mapas de imágenes en el lado del cliente:
+ El modelo de contenidos del elemento MAP permite ahora a los autores
mezclar el contenido AREA con contenido en bloque.
+ Los agentes de usuario "deberían" representar el contenido en bloque
(antes era "pueden").
+ El elemento MAP se puede usar sin una imagen por mecanismos generales de
navegación.
+ Los agentes de usuario no deben tener en cuenta los elementos AREA cuando
su contenido sea mixto (AREA y bloques).
+ Los autores deberían especificar completamente las geometrías o bien con
elementos AREA, o con elementos A a nivel de bloque, o con ambos.
- 13.7.2 y 13.7.3 : Las definiciones de los atributos vspace y hspace son ahora
similares a las definiciones de los demás atributos.
- 13.7.2 y 13.7.3 : El tipo de los valores de los atributos vspace, hspace y
border se ha cambiado de "longitud" a "píxeles".
- 13.8 Texto alternativo: La última frase de la sección se enlaza con una notas
para los desarrolladores de agentes de usuario relativas al tratamiento de
textos vacíos para el atributo "alt".
Hojas de estilo en documentos HTML
- 14.6 Vinculación de hojas de estilo mediante encabezados HTTP: Debido a que
RFC 2616 no incluye un campo de encabezado Link, toda esta sección se aplica
sólo a las versiones anteriores a la HTTP 1.1.
Marcos
- 16.4.1 NOFRAMES: Se ha añadido un texto a la descripción de NOFRAMES sobre la
representación cuando (1) los marcos están desactivados y (2) los marcos no
están soportados.
- 16.4.1 NOFRAMES: Se ha añadido un texto sobre qué DTDs pueden tener NOFRAMES
(con marcos, transicional).
Formularios
- 17.2.1 Tipos de controles: En la descripción de los radiobotones, si ningún
radiobotón está seleccionado inicialmente, el comportamiento del agente de
usuario a la hora de seleccionar uno queda sin definir. Esto difiere de RFC
1866.
- 17.3 El elemento FORM: Se ha añadido el atributo name por compatibilidad con
versiones anteriores.
- 17.3 El elemento FORM: Se ha eliminado la referencia al URI "mailto" en la
definición del atributo "action".
- 17.3 El elemento FORM: Se ha eliminado el ejemplo "mailto" del final de la
sección ya que su comportamiento no está definido en esta especificación.
- 17.3 El elemento FORM: Se ha añadido el atributo accept al fragmento del DTD.
Además, se ha corregido la descripción del atributo accept-charset.
- 17.4 El elemento INPUT: Se ha añadido "ismap" al elemento INPUT. Además, en
la definición de value, se ha añadido "checkbox" a los valores de type que
requieren un valor.
- 17.6.1: Cuando no hay ninguna opción preseleccionada, el comportamiento del
agente de usuario queda sin definir. Los autores deberían proporcionar una
opción explícita para cubrir este caso. Este comportamiento difiere de RFC
1866.
Declaración SGML
- Declaración SGML de HTML 4: Se ha eliminado el texto sobre las referencias
actualizadas a la ISO 10646. Se ha reemplazado por: "Las revisiones de la
especificación HTML 4 pueden actualizar la referencia a ISO 10646 para
incluir cambios adicionales."
DTD Estricto
- Atributos vspace/hspace/border de IMG, OBJECT, APPLET en píxeles.
- Se ha cambiado el modelo de contenido de MAP a ((%block;) | AREA)+
- Se ha añadido el atributo "ismap" a INPUT
- Se ha añadido el atributo accept al fragmento del DTD del elemento FORM.
- Se ha cambiado el comentario del atributo axis para referirse a una lista
separada por comas.
- El atributo archive del elemento OBJECT toma un valor de tipo CDATA en lugar
de tipo %URI, ya que el valor es una lista de URIs separados por espacios.
Notas
- Notas: Se han actualizado las notas sobre accesibilidad para apuntar a las
Guías de Accesibilidad al Contenido de la Web.
Referencias
- Vínculos actualizados a los RFCs, ahora se usa http://www.ietf.org/rfc
- Se han puesto los vínculos en títulos.
- Se ha añadido la fecha de la revisión del 27 de agosto de 1998 de [DATETIME]
- Se ha añadido la fecha de la revisión del 11 de enero de 1999 de [CSS1].
- Se ha corregido la fecha de publicación de [CSS2].
- Se ha actualizado [UNICODE] a la versión 3.0
- Se ha actualizado [ISO10646] para permitir nuevas asignaciones de caracteres.
Obsérvese que la enmienda cinco se tiene en cuenta implícitamente.
- Se espera que [RFC1766] vaya a actualizarse.
- [RFC2279] declara obsoleto a [RFC2044].
- [RFC2616] declara obsoleto a [RFC2068].
- Se ha añadido [RFC2388] además de [RFC1867].
- Actualizada la dirección de [LEXHTML], se ha añadido la fecha.
- Se ha actualizado la dirección de [DCORE].
- Se ha actualizado [WEBSGML]
- Se ha actualizado la dirección de [HTML3STYLE].
- Se ha añadido [RDF10] (reemplaza al antiguo RDF)
- Se ha cambiado [WAIGUIDE] -> [WAI]
- Se han añadido las referencias informativas [WCGL], [UAGL] y [ATGL]
- Se actualizado la referencia a [URI] (RFC 2396).
A.1.2 Erratas corregidas
Sección 13.6.1
Los ejemplos de mapas de imágenes que usaban "poly" se han corregido para
formar un polígono cerrado. Además, el último par de coordenadas es el mismo
que el primer par para cerrar el polígono.
Sección 14.4.1
En el ejemplo final, al elemento STYLE le falta la asignación del atributo
"media=screen, print".
Sección 15.2.1
En el ejemplo con "mipar", la regla CSS debería decir:
P#mipar {font-style: italic; color: blue}
En CSS, "#" se refiere al nombre ID, mientras que "." se refiere a un nombre
de clase. Este ejemplo utiliza el atributo "id".
Sección 16.2.2
Los valores de marginwidth y marginheight deben ser 0 píxeles o más, no 1
píxel o más.
Sección 16.2.2
El elemento FRAME no tiene un atributo target.
Sección 16.5
El elemento IFRAME no tiene un atributo target.
Sección 17.2.1
En la descripción de "checkboxes", se ha cambiado "selected" por "checked" en
"cuando se establece el atributo selected del elemento de control".
Sección 17.6.1
En la sección "Atributos definidos en otros lugares" del elemento OPTGROUP,
no deberían aparecer los atributos onfocus, onblur y onchange.
Sección 18.2.3
A la lista de elementos que toman onfocus y onblur, sumar A y AREA.
Sección 20
La declaración SGML de HTML 4 debe modificarse ligeramente para soportar las
referencias numéricas hexadecimales de caracteres. Las líneas:
DELIM
GENERAL SGMLREF
SHORTREF SGMLREF
deben cambiarse por:
DELIM
GENERAL SGMLREF
HCRO "&#x" -- 38 es el número del ampersand --
SHORTREF SGMLREF
Y el ...
Recomendamos que los agentes de usuario adopten la siguiente convención para el
tratamiento de caracteres no ASCII en estos casos:
1. Representar cada carácter en UTF-8 (ver [RFC2279]) con uno o más bytes.
2. Transformar estos bytes en secuencias de escape con el mecanismo de escape
URI (es decir, convirtiendo cada byte a %HH, donde HH es la notación
hexadecimal del valor del byte).
Este procedimiento resulta en un URI sintácticamente legal (según se define en
[RFC1738], sección 2.2 o [RFC2141], sección 2) que es independiente de la
codificación de caracteres a la que pudiera haber sido transcodificado el
documento HTML que llevaba el URI.
Nota. Algunos agentes de usuario antiguos procesan trivialmente los URIs de HTML
usando los bytes de la codificación de caracteres en que fue recibido el
documento. Algunos documentos HTML antiguos dependen de esta práctica y no
funcionen cuando son transcodificados. Los agentes de usuario que deseen
manipular estos documentos antiguos deberían, al recibir un URI que contenga
caracteres fuera del conjunto legal, usar en primer lugar la convención basada
en UTF-8. Únicamente en el caso de que el URI resultante no funcione deberían
intentar construir el URI basándose en los bytes de la codificación de
caracteres en que fue recibido el documento.
Nota. La misma conversión basada en UTF-8 debería aplicarse a los valores del
atributo name del elemento A.
B.2.2 El signo & en valores de atributos URI
El URI que se construye cuando se envía un formulario puede utilizarse como un
vínculo "estilo ancla" (p.ej., en el atributo href del elemento A).
Desafortunadamente, la utilización del carácter "&" para separar los campos del
formulario interfiere con su uso en los valores de los atributos SGML para
delimitar referencias a entidades de caracteres. Por ejemplo, para usar el URI
"http://host/?x=1&y=2" como URI de un destino de vínculo, debe escribirse o .
Recomendamos a los implementadores de servidores HTTP, y en particular a los
implementadores de CGI, que soporten el uso de ";" en lugar de "&" para ahorrar
a los autores las molestias de convertir los caracteres "&" de este modo.
B.3 Notas de implementación de SGML
B.3.1 Saltos de línea
SGML (ver [ISO8879], sección 7.6.1) especifica que un salto de línea que siga
inmediatamente a una etiqueta inicial debe ser ignorado, así como también debe
serlo un salto de línea inmediatamente antes de una etiqueta final. Esto se
aplica a todos los elementos HTML sin excepción.
Los siguientes dos ejemplos de HTML deben ser representados de manera idéntica:
Tomás está viendo la tele.
Tomás está viendo la tele.
También deben serlo los siguientes dos ejemplos:
Mi página web favorita
Mi página web favorita
B.3.2 Especificación de datos no HTML
Los datos de scripts y estilos pueden aparecer como contenidos de elementos o
como valores de atributos. Las siguientes secciones describen los límites entre
el código HTML y los datos extraños a él.
Nota. El DTD define los datos de scripts y estilo como CDATA para los contenidos
de ambos elementos y para los valores de los atributos. Las reglas de SGML no
permiten referencias de caracteres en contenidos CDATA de elementos, pero sí las
permiten en valores CDATA de atributos. Los autores deberían prestar atención
especial cuando copien datos de scripts y estilos entre contenidos de elementos
y valores de atributos.
Esta asimetría también implica que cuando se transcodifique desde una
codificación más rica a una más pobre, el transcodificador no puede simplemente
reemplazar los caracteres inconvertibles de datos de scripts o estilo a las
referencias numéricas de caracteres correspondientes; debe analizar el documento
HTML y conocer la sintaxis de los lenguajes de scripts y hojas de estilo para
poder procesar los datos correctamente.
Contenido de elementos
Cuando los datos de scripts o estilo sean el contenido de un elemento (SCRIPT y
STYLE), los datos comienzan inmediatamente después de la etiqueta inicial del
elemento y terminan en el primer delimitador ETAGO ("") antes de la etiqueta final de SCRIPT:
En JavaScript, este código puede expresarse legalmente ocultando el delimitador
ETAGO antes del carácter inicial del nombre SGML:
En Tcl, esto puede hacerse de la siguiente manera:
En VBScript puede evitarse el problema con el uso de la función Chr():
"Esto funcionará<" & Chr(47) & "EM>"
Valores de atributos
Cuando los datos de scripts o estilo sean el valor de un atributo (o bien style
o bien los atributos de eventos intrínsecos), los autores deberían transformar
en secuencias de escape todas las apariciones de comillas delimitadoras dobles o
simples que aparezcan dentro del valor de acuerdo con la convención del lenguaje
de scripts o de hojas de estilo. Los autores deberían también transformar las
apariciones del carácter "&" si éste no se utiliza como comienzo de una
referencia de caracteres.
- '"' debería escribirse como """ o """
- '&' debería escribirse como "&" o "&"
Así, por ejemplo, se podría escribir:
en lugar de
B.3.5 Secciones marcadas
Las secciones marcadas juegan un papel similar a la estructura #ifdef reconocida
por los preprocesadores C.
]]>
]]>
SGML también define el uso de secciones marcadas para contenido CDATA, dentro de
las cuales "<" no se considera como el comienzo de una etiqueta, p.ej.,
ejemplo de código que no es
de escribir con < y similares.
]]>
Lo que delata que un agente de usuario no reconoce una sección marcada es la
aparición del "]]>", que sólo se ve cuando el agente de usuario considera por
error al primer carácter ">" como el final de la etiqueta que comienza por
"
Por ejemplo:
...
Los autores deberían saber que muchos agentes de usuario representan las
instrucciones de procesamiento como parte del texto del documento.
B.3.7 Código abreviado
Algunas estructuras SGML SHORTTAG permiten escribir menos pero no añaden
capacidad expresiva a la aplicación SGML. Aunque estas estructuras no introducen
ambigüedades desde el punto de vista técnico, reducen la robustez de los
documentos, especialmente cuando se amplía el lenguaje para incluir nuevos
elementos. Así, si bien las construcciones SHORTTAG de SGML relacionadas con los
atributos son ampliamente usadas y soportadas, no sucede lo mismo con aquéllas
relacionadas con los elementos. Los documentos que las usen serán documentos
conformes con SGML, pero es poco probable que funcionen con muchas herramientas
HTML existentes.
Las estructuras SHORTTAG en cuestión son las siguientes:
- Etiquetas NET:
- Etiqueta Inicial vacía:
<>
- Etiqueta Final vacía:
B.4 Cómo ayudar a los motores de búsqueda a indexar su sitio web
Esta sección proporciona algunas sugerencias simples que harán sus documentos
más accesibles a los motores de búsqueda.
Defina el idioma del documento
En el contexto global de la Web es importante saber en qué idioma está
escrita una página. Se habla sobre esto en la sección sobre información sobre
el idioma.
Especifique las versiones del documento en otros idiomas
Si ha preparado traducciones del documento en otros idiomas, debería usar el
elemento LINK para hacer referencia a ellas. Esto permitirá al motor
indexador ofrecer a sus usuarios resultados de búsqueda en el idioma
preferido del usuario, independientemente de cómo se escribió la petición de
búsqueda. Por ejemplo, los siguientes vínculos ofrecen versiones alternativas
en francés y alemán a los motores de búsqueda:
Este ejemplo establece el tamaño de una imagen según las propiedades del
documento:
herramienta
se expandiría al URI completo "http://www.acme.com/iconos/logo.gif".
En HTML, los URIs se usan para:
- Crear un vínculo a otro documento o recurso (ver elementos A y LINK).
- Crear un vínculo a una hoja de estilo o script externos (ver elementos LINK y
SCRIPT).
- Incluir una imagen, objeto o aplicación en una página (ver elementos IMG,
OBJECT, APPLET e INPUT).
- Crear un mapa de imágenes (ver elementos MAP y AREA).
- Enviar un formulario (ver elemento FORM).
- Crear un documento con marcos (ver elementos FRAME e IFRAME).
- Citar una referencia externa (ver elementos Q, BLOCKQUOTE, INS y DEL).
- Hacer referencia a convenciones de metadatos que describen un documento (ver
elemento HEAD).
- Designar una imagen de fondo (ver elemento BODY). Este es un uso desaprobado
y deberían usarse hojas de estilo en su lugar.
Consulte la sección sobre el tipo URI para más información sobre URIs.
2.2 ¿Qué es el HTML?
Para publicar información y distribuirla globalmente, se necesita un lenguaje
entendido universalmente, una especie de lengua franca de publicación que todas
las computadoras puedan comprender potencialmente. El lenguaje de publicación
usado por la World Wide Web es el HTML (acrónimo de HyperText Markup Language,
Lenguaje para el Formato de Documentos de Hipertexto).
El HTML da a los autores las herramientas para:
- Publicar documentos en línea con encabezados, textos, tablas, listas, fotos,
etc.
- Obtener información en línea a través de vínculos de hipertexto, haciendo
clic con el botón de un ratón.
- Diseñar formularios para realizar transacciones con servicios remotos, para
buscar información, hacer reservas, pedir productos, etc.
- Incluir hojas de cálculo, videoclips, sonidos, y otras aplicaciones
directamente en sus documentos.
2.2.1 Breve historia del HTML
El HTML fue desarrollado originalmente por Tim Berners-Lee mientras estaba en el
CERN, y fue popularizado por el navegador Mosaic desarrollado en el NCSA.
Durante los años 90 ha proliferado con el crecimiento explosivo de la Web.
Durante este tiempo, el HTML se ha desarrollado de diferentes maneras. La Web
depende de que los autores de páginas Web y las compañías compartan las mismas
convenciones de HTML. Esto ha motivado el trabajo colectivo en las
especificaciones del HTML.
El HTML 2.0 (noviembre de 1995, ver [RFC1866]) fue desarrollado bajo los
auspicios de la Internet Engineering Task Force (IETF) para codificar lo que era
la práctica común a finales de 1994. HTML+ (1993) y HTML 3.0 (1995, ver
[HTML30]) propusieron versiones mucho más ricas de HTML. A pesar de no haber
logrado nunca el consenso en las discusiones sobre estándares, estos borradores
llevaron a la adopción de un número de nuevas características. Los esfuerzos del
Grupo de Trabajo HTML del World Wide Web Consortium para codificar la práctica
común en 1996 condujeron a HTML 3.2 (enero de 1997, ver [HTML32]). Los cambios
desde HTML 3.2 se resumen en el Apéndice A.
La mayoría de las personas están de acuerdo en que los documentos HTML deberían
funcionar bien en diferentes navegadores y plataformas. Gracias a la
interoperabilidad los proveedores de contenidos reducen gastos, ya que sólo
deben desarrollar una versión de cada documento. Si este esfuerzo no se realiza,
hay un riesgo mucho mayor de que la Web se convierta en un mundo propietario de
formatos incompatibles, que al final acabaría por reducir el potencial comercial
de la Web para todos los que forman parte de ella.
Cada versión de HTML ha intentado reflejar un consenso cada vez mayor entre los
interlocutores de la industria, de modo que no se desperdicien las inversiones
hechas por los proveedores de contenidos y que sus documentos no dejen de ser
legibles a corto plazo.
El HTML ha sido desarrollado con la premisa de que cualquier tipo de dispositivo
debería ser capaz de usar la información de la Web: PCs con pantallas gráficas
con distintas resoluciones y colores, teléfonos móviles, dispositivos de mano,
dispositivos de salida y entrada por voz, computadoras con anchos de banda
grandes o pequeños, etc.
2.3 HTML 4
El HTML 4 desarrolla el lenguaje HTML con mecanismos para hojas de estilo,
ejecución de scripts, marcos, objetos incluidos, soporte mejorado para texto de
derecha a izquierda y direcciones mezcladas, tablas más ricas y mejoras en
formularios, ofreciendo mejoras de accesibilidad para personas con
discapacidades.
El HTML 4.01 es una revisión de HTML 4.0 que corrige errores e introduce algunos
cambios desde la revisión anterior.
2.3.1 Internacionalización
Esta versión de HTML ha sido diseñada con la ayuda de expertos en el campo de la
internacionalización, para que los documentos puedan ser escritos en cualquier
idioma y fácilmente transportados por todo el mundo. Esto se ha logrado
incorporando la referencia [RFC2070], que trata sobre la internacionalización
del HTML.
Un paso importante ha sido la adopción del estándar ISO/IEC:10646 (ver
[ISO10646]) como el conjunto de caracteres del documento para HTML. Este es el
estándar más exhaustivo del mundo relacionado con la representación de
caracteres internacionales, dirección del texto, puntuación, y otros aspectos de
los idiomas del mundo.
HTML ofrece ahora un mayor soporte para diversos lenguajes humanos dentro de un
documento. Esto permite un indexado más efectivo de los documentos por parte de
los motores de búsqueda, tipografía de mayor calidad, mejor conversión de texto
a voz, mejor separación de palabras, etc.
2.3.2 Accesibilidad
A medida que la comunidad de la Web crece y sus miembros diversifican sus
habilidades, es crucial que las tecnologías subyacentes sean apropiadas para sus
fines específicos. El HTML se ha diseñado para hacer las páginas web más
accesibles a aquéllos con limitaciones físicas. Los desarrollos de HTML 4
derivados de cuestiones de accesibilidad incluyen:
- Mejor distinción entre la estructura y la presentación de un documento,
aconsejándose la utilización de hojas de estilo en lugar de elementos y
atributos de presentación de HTML.
- Mejores formularios, incluyendo la adición de teclas de acceso, la
posibilidad de agrupar semánticamente los controles de un formulario, la
posibilidad de agrupar las opciones SELECT semánticamente, y los rótulos
activos.
- La posibilidad de codificar una descripción textual de un objeto incluido
(con el elemento OBJECT).
- Un nuevo mecanismo de mapas de imágenes en el lado del cliente (el elemento
MAP) que permite a los autores integrar vínculos de imagen y de texto.
- El requerimiento de que se incluya texto alternativo acompañando a las
imágenes dentro del elemento IMG y a los mapas de imágenes dentro del
elemento AREA.
- Soporte de los atributos title y lang en todos los elementos.
- Soporte de los elementos ABBR y ACRONYM.
- Un espectro más amplio de medios utilizables por hojas de estilo (tty,
braille, etc.).
- Tablas mejores, incluyendo títulos, grupos de columnas y mecanismos para
facilitar su representación no visual.
- Descripciones largas para tablas, imágenes, marcos, etc.
Los autores que diseñen páginas pensando en el aspecto de la accesibilidad, no
sólo recibirán el agradecimiento de la comunidad preocupada por el tema de la
accesibilidad, sino que también se beneficiarán en otros aspectos: los
documentos HTML bien diseñados que distingan entre estructura y presentación se
adaptarán más fácilmente a las nuevas tecnologías.
Nota. Para más información sobre el diseño de documentos HTML accesibles,
consúltese en [WAI].
2.3.3 Tablas
El nuevo modelo de tablas de HTML se basa en [RFC1942]. Ahora los autores tienen
mayor control sobre la estructura y la presentación (p.ej., grupos de columnas).
La posibilidad que tienen los autores de recomendar anchuras para las columnas
permite a los agentes de usuario mostrar los datos de la tabla incrementalmente
(a medida que los reciben) en lugar de tener que cargar toda la tabla antes de
empezar a representarla.
Nota. En el momento de escribir esta especificación, algunas herramientas de
creación de HTML se basan exhaustivamente en el uso de tablas para dar formato a
los documentos, lo cual puede causar fácilmente problemas de accesibilidad.
2.3.4 Documentos compuestos
HTML ofrece ahora un mecanismo estándar para incluir objetos genéricos y
aplicaciones dentro de documentos HTML. El elemento OBJECT (junto a los antiguos
elementos IMG y APPLET, más específicos) proporciona un mecanismo para incluir
imágenes, vídeo, sonido, fórmulas matemáticas, aplicaciones especializadas y
otros objetos en un documento. También permite a los autores especificar una
jerarquía de representaciones alternativas para los agentes de usuario que no
soporten una representación específica.
2.3.5 Hojas de estilo
Las hojas de estilo simplifican el código HTML y liberan en gran medida al HTML
de las responsabilidades de presentación. Esto da tanto a los autores como a los
usuarios control sobre la presentación de los documentos: fuentes, alineación,
colores, etc.
La información de estilo puede especificarse para elementos individuales o para
grupos de elementos. La información de estilo puede especificarse en un
documento HTML o en hojas de estilo externas.
El mecanismo para asociar una hoja de estilo con un documento es independiente
del lenguaje de la hoja de estilo.
Antes de la llegada de las hojas de estilo, los autores tenían un control
limitado sobre la representación. HTML 3.2 incluía un número de atributos y
elementos que ofrecían control sobre la alineación, el tamaño de la fuente y el
color del texto. Además los autores utilizaban las tablas y las imágenes como
medio de organizar la presentación de sus páginas. El tiempo relativamente largo
que necesitan los usuarios para actualizar sus navegadores hará que estas
características sigan siendo usadas durante algún tiempo. Sin embargo, al
ofrecer las hojas de estilo mecanismos de presentación más potentes, el World
Wide Web Consortium declarará obsoletos en el futuro muchos de los elementos y
atributos de presentación del HTML. A lo largo de esta especificación dichos
elementos y atributos se marcan como "desaprobados". Se acompañan con ejemplos
de cómo lograr los mismos efectos con otros elementos o con hojas de estilo.
2.3.6 Ejecución de scripts
Gracias a los scripts, los autores pueden crear páginas web dinámicas (p.ej.,
"formularios inteligentes", que reaccionan a medida que los usuarios los
rellenan) y utilizar el HTML para crear aplicaciones en red.
Los mecanismos proporcionados para incluir scripts en un documento HTML son
independientes del lenguaje de programación de los scripts.
2.3.7 Impresión
En ocasiones los autores querrán facilitar a los usuarios la impresión de su
trabajo, sin limitarse al documento actual. Cuando un documento forme parte de
un trabajo mayor, las relaciones entre los documentos pueden describirse
mediante el elemento HTML LINK o usando el Resource Description Framework (RDF,
Marco de Descripción de Recursos) del W3C (ver [RDF10]).
2.4 Creación de documentos con HTML 4
Recomendamos a los autores e implementadores que sigan los siguientes principios
generales cuando trabajen con HTML 4.
2.4.1 Separar estructura y presentación
El HTML tiene sus raíces en SGML, que siempre ha sido un lenguaje para la
especificación de código estructural. A medida que el HTML madura, un número
cada vez mayor de sus elementos y atributos presentacionales ha sido reemplazado
por otros mecanismos, en particular las hojas de estilo. La experiencia ha
demostrado que separando la estructura de un documento de sus aspectos
presentacionales se reduce el coste de servir a un amplio espectro de
plataformas, medios, etc. y se facilitan las revisiones del documento.
2.4.2 Considerar la accesibilidad universal a la Web
Para hacer la Web más accesible a todos, en especial a aquéllos con
discapacidades, los autores deberían considerar cómo pueden representarse sus
documentos en diferentes plataformas: navegadores basados en voz, lectores
braille, etc. No estamos recomendando a los autores que limiten su creatividad,
sólo que consideren representaciones alternativas de sus diseños. El HTML ofrece
un número de mecanismos con este fin (p.ej., el atributo alt, el atributo
accesskey, etc.)
Además de esto, los autores deberían recordar que sus documentos pueden llegar a
una audiencia muy lejana con diferentes computadoras y configuraciones. Para que
los documentos sean correctamente interpretados, los autores deberían incluir en
sus documentos información sobre el idioma natural y la dirección del texto,
cómo está codificado el documento, y otras cuestiones relacionadas con la
internacionalización.
2.4.3 Ayudar a los agentes de usuario con la representación incremental
Mediante un diseño cuidadoso de las tablas y haciendo uso de las nuevas
características de las tablas de HTML 4, los autores pueden ayudar a los agentes
de usuario a representar los documentos más rápidamente. Los autores pueden
aprender a diseñar tablas para su representación incremental (ver elemento
TABLE). Los implementadores deberían consultar las notas sobre tablas del
apéndice para obtener información sobre algoritmos incrementales.
================================================================================
3 Sobre SGML y HTML
--------------------------------------------------------------------------------
Contenidos
1. Introducción al SGML
2. Estructuras SGML usadas en HTML
1. Elementos
2. Atributos
3. Referencias de caracteres
4. Comentarios
3. Cómo leer el DTD de HTML
1. Comentarios DTD
2. Definiciones de entidades paramétricas
3. Declaraciones de elementos
- Definiciones del modelo de contenido
4. Declaraciones de atributos
- Entidades DTD en definiciones de atributos
- Atributos booleanos
--------------------------------------------------------------------------------
Esta sección del documento presenta el SGML y habla sobre su relación con HTML.
En el estándar puede encontrarse información completa sobre el SGML (ver
[ISO8879]).
3.1 Introducción al SGML
El SGML es un sistema para definir lenguajes para dar formato a documentos
(markup languages). Los autores utilizan un código de formato (en inglés markup)
en sus documentos para representar información estructural, presentacional y
semántica junto con el contenido. El HTML es un ejemplo de lenguaje de formato
de documentos. Aquí tenemos un ejemplo de un documento HTML: