Pagina Web

Subrayar un Link al pasar el mouse: <STYLE type="text/css"> <!
-A:link {COLOR: red; TEXT-DECORATION: none} A:visited {COLOR: gray; TEXT-DECORATION: none} A:active {TEXT-DECORATION: none} A:hover {COLOR: blue; TEXT-DECORATION: underline} --> </STYLE> </p> <p><a href="l1.htm">El texto que quieras.</a><br> <a href="l2.htm">otro texto.</a><br> <a href="l3.htm">Otro texto.</a><br> </p>
No dejar seleccionar el texto de nuestra Web:

Con este cdigo vamos a impedir que los visitantes seleccionen el texto de nuestra pgina para luego copiarlo a otro lado. <script language="Javascript">  </script>
Horas restantes para finalizar el da:

Con este cdigo insertamos un pequeo relojito que indica la cuenta regresiva de las horas, minutos y segundos que faltan para finalizar el da. <body> <p>El reloj...</p> <form name="Reloj">
<input type="text" size="7" name="tiempo" value="mm:hh:ss" title="Tiempo restante para finalizar el da"> <script language="JavaScript"> <!-var tiempoAtras; updateReloj(); function updateReloj() { var tiempo = new Date(); var hora = 23-tiempo.getHours(); var minutos = 59-tiempo.getMinutes(); var segundos = 59-tiempo.getSeconds(); tiempoAtras= (hora < 10) ? hora :hora; tiempoAtras+= ((minutos < 10) ? ":0" : ":") + minutos; tiempoAtras+= ((segundos < 10) ? ":0" : ":") + segundos; document.Reloj.tiempo.value = tiempoAtras; setTimeout("updateReloj()",1000); } //--> </script> </form> </body>
Simple tables
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevs). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo: Cdigo <table> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr>
<tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>
Unificacin de celdas
Para algunas tablas puedes necesitar unificar dos o ms celdas en una sola que pasar a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificacin vertical) y "colspan" (para unificacin horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th). Cdigo <table> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Vista Campo 1 Campo 2 Campo 3 Campos 4 y 5 Campo 6
Campo 7 Campo 8 Campo 9
Mira en el ejemplo anterior cmo una definicin de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto tambin funciona para uificacin vertical, con una pequea diferencia debido a la naturaleza de las tables en HTML. Cuando
se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificacin deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados: Cdigo <table> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Vista Campo 2 Campo 3 Campo unificado Campo 5 Campo 6 Campo 8 Campo 9 Debes tener cuidado al unificar filas y columnas de no encimar las celdas unificadas. Esto podra tener resultados inesperados
El atributo "scope"
Las celdas afectadas por una celda de encabezado pueden ser definidas de diferentes maneras, pero la ms comn de todas es hacerlo a travs del atributo "scope". Utilizado en ambos, el tag HTML td y el tag HTML th, este atributo puede tomar cuatro valores: "row" y "col" afectando respectivamente a la fila o columna contenedora, y "rowgroup" y "colgroup" afectando respectivamente al grupo de filas o columnas contenedora (descriptos ms adelante en este tutorial). En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado que utilizan el atributo "scope": Cdigo
<table> <tr> <th scope="col">Columna 1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> </tr> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> Vista Columna 1 Columna 2 Columna 3 Celda 1 Celda 4 Celda 2 Celda 5 Celda 3 Celda 6
Como podemos deducir del prrafo anterior, en este ejemplo, la columna 1 provee informacin de encabezado para las celdas 1 y 4, la columna 2 para las celdas 2 y 5 y la columna 3 para las celdas 3 y 6. Nota que, como este atributo puede tambin ser definido en celdas normales (tag HTML td), las celdas normales tambin pueden ser usadas como celdas de encabezado. Este es el caso en que una celda provee ambas, informacin de encabezado y contenido. En cualquier otro caso se deben utilizar celdas de encabezado (tag HTML th).
El atributo "headers"
Otra forma de asociar celdas de encabezado a celdas normales es a travs del atributo "headers". Este atributo es definido en celdas normales (tag HTML td) y enuncia un conjunto de celdas (usando sus atributos "id", separados por espacios) que proveen informacin de encabezado para la misma.
Existe un escaso nmero de casos (y son muy raros) en que este atributo no puede ser reemplazado por el atributo "scope". El prximo ejemplo muestra una tabla superpuesta, donde existe una lnea oblcua de celdas que va desde la esquina superior izquierda a la esquina inferior derecha y sirve como lmite para definir qu celdas reciben los encabezados superiores y de la derecha, y cules los inferiores y de la izquierda. Cdigo <table> <tr> <td> </td> <th id="h1">H1</th> <th id="h2">H2</th> <th id="h3">H3</th> <td> </td> </tr> <tr> <th id="h4">H4</th> <td headers="h1 h4 h7 h10">C1</td> <td headers="h2 h7">T1</td> <td headers="h3 h7">T2</td> <th id="h7">H7</th> </tr> <tr> <th id="h5">H5</th> <td headers="h1 h5">B1</td> <td headers="h2 h5 h8 h11">C2</td> <td headers="h3 h8">T3</td> <th id="h8">H8</th> </tr> <tr> <th id="h6">H6</th> <td headers="h1 h6">B2</td> <td headers="h2 h6">B3</td> <td headers="h3 h6 h9 h12">C3</td> <th id="h9">H9</th> </tr> <tr> <td> </td> <th id="h10">H10</th> <th id="h11">H11</th> <th id="h12">H12</th> <td> </td> </tr> </table> Vista
H1 H4 C1 H5 B1 H6 B2
H2 T1 C2 B3
H3 T2 T3 C3 H7 H8 H9
H10 H11 H12
La informacin en esta tabla no es completamente visible, pero semnticamente provee un muy bien definido conjunto de encabezados para cada celda. Por ejemplo, la celda "C1" (en el eje oblcuo) con cuatro encabezados (H1, H4, H7 y H10), y la celda T1 (por encima del eje) con dos (H2 y H7). Este tipo de tablas es uno de los pocos usos donde el atributo "scope" (la forma simple) no funcionara, y es mayormente utilizado para mostrar informacin cientfica.
El atributo "axis"
Este atributo, que puede ser definido tanto para celdas de encabezado como para celdas normales, agrupa encabezados e informacin en categoras, en las que las celdas pueden ser clasificadas. Auque su uso es un tanto complejo, provee formas nuevas y ms amplias de proveer informacin de encabezado, especialmente en el caso de navegadores hablados para gente ciega. El siguiente ejemplo ilustra el uso del atributo "axis" como una forma de hacer a la informacin ms legible y fcil de entender. Cdigo <table> <tr> <th scope="col">Pas</th> <th scope="col" axis="ingresos">Autombiles</th> <th scope="col" axis="ingresos">Repuestos</th> <th scope="col" axis="egresos">Insumos</th> <th scope="col">Balance</th> </tr> <tr> <td scope="row" axis="Amrica">Estados Unidos</td> <td>$5.432.551</td>
<td>$3.275.268</td> <td>-$2.235,528</td> <td>$6,472,291</td> </tr> <tr> <td scope="row" axis="Europa">Reino Unido</td> <td>$3,763,221</td> <td>$1,342,231</td> <td>-$982,268</td> <td>$4,123,184</td> </tr> <tr> <td scope="row" axis="Europa">Francia</td> <td>$2.458.197</td> <td>$2.456.841</td> <td>-$1.315,548</td> <td>$3,599,490</td> </tr> <tr> <td scope="row" axis="Amrica">Canad</td> <td>$1.846.548</td> <td>$448.556</td> <td>-$351,559</td> <td>$1,943,545</td> </tr> </table> Vista Pas Autombiles Repuestos Insumos Balance
Estados Unidos $5.432.551 Reino unido Francia Canad $3,763,221 $2.458.197 $1.846.548
$3.275.268 -$2.235,528 $6,472,291 $1,342,231 -$982,268 $4,123,184
$2.456.841 -$1.315,548 $3,599,490 $448.556 -$351,559 $1,943,545
Este ejemplo establece dos tipos de ejes o categoras: una categora de regin (Europa y Amrica) y una categora de ingresos/egresos. En los navegadores hablados esta informacin no visual tiene mucho sentido y ayuda a mejorar la comprensin de tablas con estructuras complicadas.
Agrupacin horizontal
Una tabla HTML puede ser organizada horizontalmente en tres grupos: el encabezado (elemento HTML thead), el cuerpo o cuerpos (elemento HTML tbody) y el pie (elemento HTML tfoot). Cada uno de estos elementos encierra un grupo de filas. Estas divisiones pueden ayudar a hacer las tablas ms fciles de leer, especialmente cuando la tabla se debe mostrar en ms de una pgina (por ejemplo, cuando una tabla grande debe ser impresa). Es estos casos, el encabezado y el pie son mostrados en cada pgina para mejorar la comprensin. Cdigo <table> <thead> <tr> <th scope="col">Mes</th> <th scope="col">Vitamina A</th> <th scope="col">Vitamina B</th> <th scope="col">Vitamina C</th> </tr> </thead> <tfoot> <tr> <td scope="row">Todo</td> <td>32.8</td> <td>104.2</td> <td>21.0</td> </tr> </tfoot> <tbody> <tr> <td scope="row">Enero</td> <td>12.8</td> <td>42.6</td> <td>5.2</td> </tr> <tr> <td scope="row">Febrero</td> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr> <tr> <td scope="row">Marzo</td> <td>9.5</td> <td>31.5</td> <td>5.4</td> </tr>
</tbody> </table> Vista Mes Todo Enero Vitamina A Vitamina B Vitamina C 32.8 12.8 104.2 42.6 30.1 31.5 21.0 5.2 10.4 5.4
Febrero 10.5 Marzo 9.5
Nota que el pie es ubicado en el cdigo, preferentemente justo debajo del encabezado al comienzo de la tabla. Esto se debe a que en tablas muy largas, que pueden tomar algn tiempo en descargarse completamente (hasta minutos), los navegadores pueden decidir mostrar el pie an antes de que todo el cuerpo hay sido recibido. Una sola tabla puede tener ms de un cuerpo. Esto permite a los autores dividir las filas en grupos. Por ejemplo, en la tabla de arriba (si abarcase todo el ao) los meses podran ser agrupados en cuatrimestres, generando as tres cuerpos.

Pagina Web

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Pagina Web

Загружено:

Авторское право:

Доступные форматы

Subrayar un Link al pasar el mouse: <STYLE type="text/css"> <!

No dejar seleccionar el texto de nuestra Web:

Horas restantes para finalizar el da:

<tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>

Campo 7 Campo 8 Campo 9

H10 H11 H12

$3.275.268 -$2.235,528 $6,472,291 $1,342,231 -$982,268 $4,123,184

$2.456.841 -$1.315,548 $3,599,490 $448.556 -$351,559 $1,943,545

Febrero 10.5 Marzo 9.5

Вам также может понравиться