viernes, 29 de octubre de 2010

89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”

Podemos indicar al contenido de una celda que se expanda en su columna o en su fila. Esto lo logramos con los atributos “colspan” (para columnas) y “rowspan” para expandir en la fila.

Los valores de estos atributos es un numero que indica el número de columnas que se expande hacia la derecha para el caso de “colspan”, y para el caso de “ rowspan”, el número indica el numero de filas que se expande hacia abajo.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
  <head>
    <title>Tabla - Ejemplo de combinación de celdas</title>
  </head>
  <body>
       <table width="50" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" >
<caption>Tabla - Ejemplo de combinación de celdas</caption>
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td rowspan="2"  bgcolor="yellow" width="20%" align="left">Expansion hacia abajo - rowspan</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  colspan="2" bgcolor="red" width="20%" >Expansion hacia la derecha - colspan</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Representación en el navegador: Hay que tener un poco de cuidado ya que los diferentes navegadores pueden representar de diferentes maneras estos atributos.

Tabla - Ejemplo de combinación de celdas
Nombre Telefono Otros Comentarios
Expansion hacia abajo - rowspan derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha
Expansion hacia la derecha - colspan derecha centro texto justificado izq. y derecha

Temas anteriores de curso HTML gratis
86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

jueves, 28 de octubre de 2010

88 - HTML - Tablas - Alineación de tablas “left, center, right”

Las tablas pueden ser alineadas horizontalmente dentro de un documento, de acuerdo a nuestros requerimientos. El atributo “align” nos permite especificar la posicion de la tabla respecto al documento. Este atributo esta desaprobado en favor de las hojas de estilo.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
  <head>
    <title>Tabla - Ejemplo de alineación de tablas</title>
  </head>
  <body>
       <table align="right" width="50" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" >
<caption>Tabla de ejemplo de alineación derecha</caption>
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Representación en el navegador: Cambiando los valores de “align” por ‘center’ o ‘left’, podemos alinear la tabla en el centro o a la izquierda respectivamente.

Tabla de ejemplo de alineación derecha
Nombre Telefono Otros Comentarios
Izquierda derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha

Temas anteriores de curso HTML gratis
86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

domingo, 24 de octubre de 2010

Felicidades Bouke …

17 de octubre de 2010.

Por fin tenemos las fotos exclusivas de la competición ciclista en pueblo Edén y la gran final de Aventura GT.

image_thumb[7]

Bouke, quien después de 16 kilómetros de duro pedaleo y mucho sudor a logrado el 4º puesto en la clasificación de su categoría. La foto lo muestra en un tramo del trayecto de esta dura prueba a la que solo unos pocos privilegiados pueden atreverse.

El duro entrenamiento y la preparación física, junto a una estricta dieta, y horarios de competidores de elite, permite que estos jóvenes, preparados física y psíquicamente logren los objetivos. Bouke es un ejemplo de deportivismo (si es que se existe esta palabra), al que tener en cuenta cuando se quieren alcanzar metas que parecen imposibles a los simples mortales.

Un saludo Bouke, continua con tu esfuerzo.

image_thumb[8]

Temas anteriores de curso HTML gratis

86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
mas ... acceder al índice de temas ...
Otros Links:
Piso en Garrucha - Almería € 104.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

Cámaras de Seguridad, Reconocimiento de matriculas, Cámaras termográficas, electronica.

Te gustan los sellos. Mira aquí, puedes cambiar o comprar.

87 - HTML - Tablas - Atributo “summary”

Con este atributo (summary) podemos definir de que trata la tabla (propósito, objeto, función, etc.), en teoría en navegadores que utilicen sintetizadores de voz, debería tener algún efecto. Se aplica para navegadores no visuales (Braile, voz, etc.)

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
  <head>
    <title>Tabla - Ejemplo de "summary"</title>
  </head>
  <body>
       <table width="100" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50" cellpadding="50%" summary="Esta es una tabla de

prueba para ver el efecto de diferentes etiquetas y atributos">
<caption>Tabla de ejemplo</caption>
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Hemos probado el código en Chrome, IE, IE 64 bits, y no hemos visto ninguna diferencia, seguramente porque no utilizan ningún sintetizador de voz.

Puedes probar el código haciendo copiar y pegar. Si tienes guardado el código de la lección anterior solo debes agregar estos nuevos atributos para probarlo.

Temas anteriores de curso HTML gratis

86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

viernes, 22 de octubre de 2010

86 - HTML - Tablas - Aspecto <caption></caption>

Si queremos asignar un titulo a la tabla utilizamos la etiqueta <caption>. Esta etiqueta requiere un inicio <caption> y un fin </caption>.

Solo puede incluirse un elemento <caption> por tabla y va inmediatamente después de la etiqueta inicial de la tabla.

Debe tratarse siempre de que el titulo sea descriptivo al contenido de la tabla para que sea eficaz.

Este titulo puede ser “formateado” con las etiquetas normales de ‘negrita’, ‘cursiva’, etc., también se puede alinear a derecha, izquierda, centro, etc.


Código de Ejemplo aplicando las características vistas anteriormente:

<html>
  <head>
    <title>Uso de la etiqueta “caption”</title>
  </head>
  <body>
       <table width="100" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50" cellpadding="50%" >
<caption>Tabla de ejemplo</caption>
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Puedes probar el código haciendo copiar y pegar. Si tienes guardado el código de la lección anterior solo debes agregar estos nuevos atributos para probarlo.

Temas anteriores de curso HTML gratis

85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

miércoles, 20 de octubre de 2010

En un día como hoy 20 de Octubre del año...

1918 Fin de la Primera Guerra Mundial. Alemania acepta los términos del presidente de Estados Unidos, Wilson.

1930 Nace el Ebanista Español 
Francisco Ramos Ramos
! Feliz Cumpleaños ! 

En sus ratos de ocio, crea ingenios mecánicos, maquetas, y juguetes con movimiento que son la delicia de las exclusivas personas que tienen la dicha de verlos. Actualmente residente en Uruguay.

francisco ramos ramos

1968 Boda de Jacqueline Kennedy con Aristóteles Onassis

 

 
Temas anteriores de curso HTML gratis *  http://bobuu.blogspot.com

85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”

mas ... acceder al índice de temas ...
Compra - Venta - Alquiler - Pisos - Fincas - Apartamentos - Vacaciones

lunes, 11 de octubre de 2010

85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”

Ahora aprenderemos a mejorar el aspecto de una tabla asignándole un color de fondo o una imagen con los atributos “bgcolor y background”.

bgcolor: asigna el color de fondo de la tabla. El color se puede asignar por el nombre o por código sRGB

background: nos permite asignar una imagen para el fondo de la tabla.

El color o imagen asignados como fondo de tabla queda debajo de cualquier otro color o imagen asignados a celda bordes, etc.


Código de Ejemplo aplicando las características vistas anteriormente: Se ha aplicado un color de fondo amarillo.

<html>
  <head>
    <title>Tabla - Definir un color de fondo</title>
  </head>
  <body>
       <table width="100" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50"

cellpadding="50%" bgcolor="yellow">
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Para aplicar una imagen de fondo en lugar de “bgcolor”, utilizamos “background”, el archivo de imagen de fondo debe estar disponible para su uso. Se puede utilizar la dirección URI de la imagen. La imagen se repetirá todas las veces que sea necesario para completar la tabla. En nuestro ejemplo utilizamos el icono del Sr. Bobuu.

<html>
  <head>
    <title>Tabla - Definir una imagen de fondo</title>
  </head>
  <body>
       <table width="100" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50"

cellpadding="50%" background=http://www.google.com/friendconnect/profile/picture/32/VZug1WlftUVXdgms8_-IxDH513HTiDxCIjTWRtOYQ6FansNRPQa8e6q2ge4QOKWFnIiRmAORodYMP3aIZSj2upE4LP2920onvV6PM3g54qU>
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Puedes probar el código haciendo copiar y pegar. Si tienes guardado el código de la lección anterior solo debes agregar estos nuevos atributos para probarlo.

Temas anteriores de curso HTML gratis

84 - HTML - Tablas - Atributos “width y height”
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
82.- HTML – Tablas – Atributos Celdas: "align"
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

domingo, 10 de octubre de 2010

1.- Inglés - “known” - “Conocido”

Introducimos hoy una nueva sección que esperamos sirva de ayuda a todos aquellos que quieren aprender, o mejorar sus conocimientos del idioma ingles.

Estructuramos cada post de manera que nos permita de una manera amena y agradable aprender, comprender y asimilar las palabras y las oraciones, así como el conocimiento de la propia cultura inglesa. Las lecciones son dinámicas y vuestros comentarios nos ayudaran a corregir errores y enriquecer cada post. Sabemos que hay muchos y muy buenos sitios donde aprender inglés, pero queremos aportar nuestro granito de arena, para que este sea un lugar de intercambio de conocimientos y aportes.

Ingles: known

Español: conocido

“Known” es el participio pasado (past participle) del verbo “know” (saber), es un verbo irregular. Si fuese un verbo regular terminaría en “ed”. En español las terminaciones de los verbos conjugados en este tiempo verbal seria “ado/ada”, “ido/ida”.

Frase de ejemplo: Known in the 1960s as “The Screaming Wildman,”… (Suntimes.com)

Traducción provisoria: Conocido en la década de los sesenta como “The Screaming Wildman”

 bradio[1]

También estamos preparando hojas de test donde podréis probar vuestros conocimientos.

Temas anteriores:

- aquí podréis pinchar a los temas anteriores -

 

Sponsors:

Piso en Garrucha - Almeria

sábado, 9 de octubre de 2010

En un día como hoy 10 de octubre de 20..

En un día como hoy descubrimos que la fecha es un número binario.

¿Será el día de la revolución de las maquinas, que predice Sarah Connor en “Terminator”, o será el día de “Matrix”. Estad atentos porque el domingo es el día:

101010

10 de octubre de 2010

Este numero binario si lo pasamos a decimal equivale al numero 42, que no se que significado tiene, pero no hay que descuidarse.

El domingo desconectad los equipos electrónicos, para evitar que estos tomen el control de tu casa y te hagan esclavo.

Hace 100 años se dio la misma coincidencia (10/10/1910), pero claro, las maquinas no tenían el poder que tienen hoy. Imaginad que todas las maquinas y ordenadores se detuviesen. No habría aviones, ni tren de alta velocidad, ni GPS, ni tv, radio, semáforos, incluso los coches con ordenador a bordo, móviles, teléfonos, etc.

Ciertos “científicos” creen que las señales son positivas, porque como sabéis, en círculos informáticos, el “1” es encendido, y el “0” es apagado, entonces esto quedaría así:

1 - encendido 0 - apagado 1- encendido 0- apagado 1- encendido 0- apagado

O sea que si hay una revolución de máquinas, se encienden y se apagan pero al final se apagan. Seria como deshojar margaritas.

El lunes me contáis que ha pasado. Seguro alguien tendrá alguna experiencia de intento de revolución.

Temas anteriores de curso HTML gratis *  http://bobuu.blogspot.com

84 - HTML - Tablas - Atributos “width y height”
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
82.- HTML – Tablas – Atributos Celdas: "align"

mas ... acceder al índice de temas ...
** Gracias por visitar a nuestros Sponsors.
Nueva gama RAYLUX URBAN
Grabadores compatibles con iPhone
Piso en Garrucha - Almería

viernes, 8 de octubre de 2010

84 - HTML - Tablas - Atributos “width y height”

¿Como definimos las dimensiones de las tablas?. Muy fácil con los atributos “width” y “height”.

El tamaño de la tabla se define con estos atributos en función del diseño elegido.

width : indica el ancho de la tabla en pixeles o porcentaje.

height : indica a los navegadores el alto de la tabla, al igual que width también se puede indicar su valor en pixeles o en valor porcentual. Su uso ha sido desaprobado recomendándose las hojas de estilo.

Es recomendable no superar los 765 pixeles de ancho para que en pantallas con resolución de 800x600 para que pueda visualizarse todo el contenido.

image

Código de Ejemplo aplicando las características vistas anteriormente: Se ha aplicado un ancho (width) de 200 pixeles y una altura (height) de 100 pixeles. Solamente para que se vea en que punto del código se deben colocar estos atributos.

<html>
  <head>
    <title>Tabla - Alineación vertical de celdas</title>
  </head>
  <body>
       <table width="200" height="100" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50"

cellpadding="50%">
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Puedes probar el código haciendo copiar y pegar. Si tienes guardado el código de la lección anterior solo debes agregar estos nuevos atributos para probarlo.

Temas anteriores de curso HTML gratis
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
82.- HTML – Tablas – Atributos Celdas: "align"
81.- HTML – Tablas – Atributos Celdas: "background – bgcolor – width - height"
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

sábado, 2 de octubre de 2010

VIH - ¿quien se arrepentirá?

Washington se arrepiente por experimentar con ciudadanos de Guatemala

Un científico infectó a más de 500 personas con sífilis y gonorrea

Washington.- Estados Unidos pidió disculpas a Guatemala por un "abominable" estudio realizado en ese país entre 1946 y 1948, período durante el cual se inocularon enfermedades de transmisión sexual (ETS) de forma intencionada y sin su conocimiento a más de medio millar de guatemaltecos. …”

El Universal

BARRA BRAVA INYECCION[1]
Imagen: El ojo de la razón

Referencias a la noticia:

Cuando y quien se arrepentirá del VIH (Sida)
 
 
Temas anteriores de curso HTML gratis *  http://bobuu.blogspot.com

80.- HTML - Tablas-Celdas-Alineación Vertical "valign"
79.- HTML - Tablas - Formato de celdas
78.- HTML - Tablas, personalización de las celdas
mas ... acceder al índice de temas ...

Compra - Vende - Alquila | Avisos Gratis