Introducción a XHTML: parte 2
Anuncio
G Introducción a XHTML: parte 2 OBJETIVOS En este apéndice aprenderá lo siguiente: Crear tablas con filas y columnas de datos. Controlar el formato de las tablas. Crear y utilizar formularios. Crear y utilizar mapas de imágenes para ayudar en la navegación de páginas Web. Crear páginas Web accesibles para los motores de búsqueda, mediante el uso de las etiquetas <meta>. Utilizar el elemento frameset para mostrar varias páginas Web en una sola ventana del explorador. Así es, de la tabla de mi memoria borraré todos los registros triviales y apasionados. —William Shakespeare Plan general 1096 Apéndice G Introducción a XHTML: parte 2 G.1 G.2 G.3 G.4 G.5 G.6 G.7 G.8 G.9 G.10 G.11 Introducción Tablas básicas en XHTML Tablas intermedias en XHTML y formatos Formularios básicos en XHTML Formularios más complejos en XHTML Vínculos internos Creación y uso de mapas de imágenes Elementos Elemento meta frameset Elementos frameset anidados Recursos Web G.1 Introducción En el apéndice anterior presentamos el XHTML. Creamos varias páginas Web completas con texto, hipervínculos, imágenes, reglas horizontales y saltos de línea. En este apéndice hablaremos sobre las características más complejas de XHTML, incluyendo la presentación de la información en tablas e incorporando formularios para recolectar la información de un visitante de la página Web. También presentaremos los vínculos internos y los mapas de imágenes para mejorar la navegación por las páginas Web, y los marcos para mostrar varios documentos en el explorador. Al final de este apéndice estará familiarizado con las características de más uso común de XHTML, y podrá crear documentos Web más complejos. G.2 Tablas básicas en XHTML Las tablas se utilizan para organizar los datos en filas y columnas. Nuestro primer ejemplo (figura G.1) crea una tabla con seis filas y dos columnas, para mostrar la información de las frutas. Las tablas se definen con el elemento table (líneas 16-66). Las líneas 16-18 especifican la marca inicial para un elemento table que tiene varios atributos. El atributo border especifica la anchura del borde de la tabla en píxeles. Para crear una tabla sin un borde, establezca border en "0". Este ejemplo asigna al atributo width el valor "40%", para establecer la anchura de la tabla al 40 por ciento de la anchura del explorador. Un desarrollador también puede establecer el atributo width a un número especificado de píxeles. Trate de cambiar el tamaño de la ventana del explorador, para ver cómo la anchura de la ventana afecta a la anchura de la tabla. Como su nombre lo implica, el atributo summary (líneas 17-18) describe el contenido de una tabla. Los dispositivos de voz utilizan este atributo para que la tabla sea más accesible para los usuarios con discapacidad visual. El elemento caption (línea 22) describe el contenido de la tabla y ayuda a que los exploradores basados en texto interpreten los datos de la tabla. La mayoría de los exploradores presentan el texto dentro de la etiqueta <caption> por encima de la tabla. El atributo summary y el elemento caption son dos de las muchas características de XHTML que hacen las páginas Web más accesibles para los usuarios con discapacidad. 1 2 3 4 5 6 7 8 9 10 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. G.1: tabla1.html <!-- Creación de una tabla básica --> --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Una tabla simple en XHTML</title> Figura G.1 | Tabla de XHTML. (Parte 1 de 3). G.2 Tablas básicas en XHTML 1097 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 </head> <body> <!-- la etiqueta <table> abre una tabla --> <table border = "1" width = "40%" summary = "Esta tabla proporciona información acerca del precio de la fruta"> <!-- la etiqueta <caption> resume el contenido de la tabla --> <!-- (esto ayuda a las personas con discapacidad visual) --> <caption><strong>Precio de la fruta</strong></caption> <!-- la etiqueta <thead> es la primera sección de una tabla --> <!-- da formato al área de encabezados de la tabla --> <thead> <tr> <!-- <tr> inserta una fila en la tabla --> <th>Fruta</th> <!-- inserta una celda de encabezado --> <th>Precio</th> </tr> </thead> <!-- la etiqueta <tfoot> es la última sección de una tabla --> <!-- da formato al pie de la tabla --> <tfoot> <tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot> <!-- todo el contenido de la tabla va encerrado --> <!-- dentro de la etiqueta <tbody> --> <tbody> <tr> <td>Manzana</td> <!-- inserta una celda de datos --> <td>$0.25</td> </tr> <tr> <td>Naranja</td> <td>$0.50</td> </tr> <tr> <td>Platano</td> <td>$1.00</td> </tr> <tr> <td>Coco</td> <td>$2.00</td> </tr> </tbody> </table> </body> </html> Figura G.1 | Tabla de XHTML. (Parte 2 de 3). 1098 Apéndice G Introducción a XHTML: parte 2 Leyenda de la tabla Encabezado de la tabla Cuerpo de la tabla Pie de la tabla Borde de la tabla Figura G.1 | Tabla de XHTML. (Parte 3 de 3). Una tabla tiene tres secciones distintas: encabezado, cuerpo y pie. La sección (o celda) de encabezado se define mediante un elemento thead (líneas 26-31), el cual contiene información correspondiente al encabezado, como los nombres de las columnas. Cada elemento tr (líneas 27-30) define una sola fila de la tabla. Las columnas en la sección de encabezado se definen mediante los elementos th. La mayoría de los exploradores centran el texto que tiene el formato de los elementos th (columna de encabezado de la tabla) y lo muestran en negritas. Los elementos de encabezado de una tabla se anidan dentro de los elementos de fila. La sección del pie (líneas 35-40) se define mediante un elemento tfoot (pie de la tabla). Por lo general, el texto que se coloca en el pie incluye los resultados de cálculos y las notas al pie. Al igual que las demás secciones, el pie de la tabla puede contener filas, y cada fila puede contener columnas. La sección del cuerpo, o cuerpo de la tabla, contiene los datos principales de la misma. El cuerpo de la tabla (líneas 44-64) se define en un elemento tbody. En el cuerpo, cada elemento tr especifica una fila. Las celdas de datos contienen piezas de datos individuales, y se definen con elementos td (datos de tabla) dentro de cada fila. G.3 Tablas intermedias en XHTML y formatos En la sección anterior exploramos la estructura de una tabla básica. En la figura G.2 profundizaremos más en nuestra discusión sobre las tablas, mediante la introducción de elementos y atributos que permiten al autor de documentos crear tablas más complejas. La tabla empieza en la línea 17. El elemento colgroup (líneas 22-27) agrupa y da formato a las columnas. El elemento col (línea 26) especifica dos atributos en este ejemplo. El atributo align determina la alineación del texto en la columna. El atributo span determina a cuántas columnas va a dar formato el elemento col. En este caso, establecemos el valor de align en "right" y el valor de span en "1" para alinear el texto a la derecha, en la primera columna (la que contiene la imagen del camello en la captura de pantalla de ejemplo). 1 2 3 4 5 6 7 8 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. G.2: tabla2.html --> <!-- Diseño de una tabla intermedia --> <html xmlns = "http://www.w3.org/1999/xhtml"> Figura G.2 | Tabla de XHTML compleja. (Parte 1 de 3). G.3 Tablas intermedias en XHTML y formatos 1099 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <head> <title>Como programar en Internet y WWW - Tablas</title> </head> <body> Figura G.2 <h1>Pagina de ejemplo de tablas</h1> <table border = "1"> <caption>He aqui una tabla de ejemplo mas compleja.</caption> <!-- las etiquetas <colgroup> y <col> se usan --> <!-- para dar formato a columnas completas --> <colgroup> <!-- el atributo span determina a cuántas <!-- columnas afecta la etiqueta <col> <col align = "right" span = "1" /> </colgroup> --> --> <thead> <!-- los atributos rowspans y colspans combinan el número <!-- especificado de celdas en forma horizontal o vertical <tr> <!-- combina dos filas --> <th rowspan = "2"> <img src = "camello.gif" width = "205" height = "167" alt = "Imagen de un camello" /> </th> <!-- combina cuatro columnas --> <th colspan = "4" valign = "top"> <h1>Comparacion de camelidos</h1><br /> <p>Fecha aproximada: 9/2002</p> </th> </tr> <tr valign = "bottom"> <th># de jorobas</th> <th>Region indigena</th> <th>Escupe?</th> <th>Produce lana?</th> </tr> </thead> <tbody> <tr> <th>Camellos (bactrian)</th> <td>2</td> <td>Africa/Asia</td> <td>Si</td> <td>Si</td> </tr> <tr> | Tabla de XHTML compleja. (Parte 2 de 3). --> --> 1100 68 69 70 71 72 73 74 75 76 77 78 79 80 Apéndice G Introducción a XHTML: parte 2 <th>Llamas</th> <td>1</td> <td>Montanias de los Andes</td> <td>Si</td> <td>Si</td> </tr> </tbody> </table> </body> </html> Figura G.2 | Tabla de XHTML compleja. (Parte 3 de 3). El tamaño de las celdas de la tabla se cambia para ajustarse a los datos que contienen. Los autores de documentos pueden crear celdas de datos más grandes mediante el uso de los atributos rowspan y colspan. Los valores que se asignan a estos atributos especifican el número de filas o columnas que ocupa una celda. El elemento th en las líneas 36-39 utiliza el atributo rowspan = "2" para permitir que la celda que contiene la imagen del camello utilice dos celdas verticales adyacentes (por lo cual, la celda abarca dos filas). El elemento th en las líneas 42-45 utiliza el atributo colspan = "4" para ampliar la celda de encabezado (que contiene Comparacion de camelidos y Fecha aproximada: 9/2002), de manera que abarque cuatro celdas. Error común de programación G.1 Al utilizar colspan y rowspan para ajustar el tamaño de las celdas de datos de una tabla, tenga en cuenta que las celdas modificadas ocuparán más de una columna o fila. Otras filas o columnas de la tabla deben compensar las filas o columnas adicionales que ocupan las celdas individuales. Si no lo hacen, el formato de su tabla se distorsionará y podría crear de manera involuntaria más columnas y filas de lo que esperaba. La línea 42 introduce el atributo valign, el cual alinea los datos en forma vertical y puede recibir uno de cuatro valores: "top" alinea los datos con la parte superior de la celda, "middle" centra los datos en forma vertical (la opción predeterminada para todas las celdas de datos y de encabezado), "bottom" alinea los datos con la parte
