sábado, 27 de noviembre de 2010

94 - HTML - aplicación práctica …

Como ya llevamos 93 lecciones de puro mazazo, y como los informáticos también tenemos sentido del humor (aunque no nos entiendan), es hora de distenderse un poco, y divertirnos con esta interpretación (que no dista mucho de la realidad).

Aquí tenemos la descripción desde que el cliente nos pide un proyecto, pasando por las etapas de diseño finalización y conformidad del cliente.

Proyecto informático
vía: blog

Espero les haya gustado

Temas anteriores de curso HTML gratis

91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”
90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”
89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”

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, 25 de noviembre de 2010

94 - HTML - Enlaces a un determinado lugar de otro documento “href”

Igual que veíamos como usar los enlaces dentro del mismo documento html, también podemos acceder a un lugar en concreto de otro documento distinto al actual.

Para lograr esto utilizamos el atributo “href”, el documento que contiene el ancla seguido del carácter # y del identificador del ancla.

La sentencia quedaría redactada como sigue:

<a href="documentohtml.html#parrafoX"> ... </a>

En documentohtml.html, tendremos un “ancla” llamada “parrafoX”, que puede indicarse por cualquiera de las dos formas ya vistas “id” o “name”.

Así de esta manera el código dirigirá la acción a la pagina html indicada y dentro de esta al ancla especifico.

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

Documento “principal.html”, (desde donde enviamos el enlace)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Ejemplo de enlaces dentro de otro documento html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
   <h3 align="center"><font face="Verdana"><strong><font size="2">
   <a name="principio"></a>
   SEMANAL PRENSA</font></strong><br>
  </h3>
   <hr>
   <h2><font color="red" size="4" face="Verdana"><strong>
   <a href="documentohtml.html#eeuu"> desde aqui nos vamos a otra pagina y punto de enlace. </a>
   </strong></font></h2>
   <h2><font size="2" face="Verdana"> </font> </h2>
   <font size="1" face="Verdana"><strong>
   <a href="#principio">Volver</a>
   </strong></font>
</body>
</html>

Documento “documentohtml.html”, es la pagina html a donde enviamos el enlace anterior.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Ejemplo de enlaces dentro de otro documento html</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
   <h3 align="center"><font face="Verdana"><strong><font size="2">
   <a name="principio"></a>
   SEMANAL PRENSA</font></strong><br> </h3> <hr>
   <h2><font color="red" size="4" face="Verdana"><strong>
   <a name="eeuu" id="eeuu"></a>
   Estados Unidos (EEUU):</strong></font></h2>
   <h2><font size="2" face="Verdana">pagina y punto ha donde nos ha dirigido el enlace del documento principal, para volver hemos insertado un enlace hacia atrás.
   </font> </h2>
   <font size="1" face="Verdana"><strong>
   <a href="principal.html#principio">Volver</a>
   </strong></font>
</body>
</html>

Temas anteriores de curso HTML gratis
92 - HTML - Vínculos <a></a>
91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”
90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”

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)

lunes, 22 de noviembre de 2010

93 - HTML - Enlaces “name” “id”

Con los atributos “name” o ”id”, podemos crear enlaces dentro del mismo documento.

De esta manera podemos vincular diferentes recursos dentro de un documento, o accesos rápidos.

Para poder dirigirnos a un sitio determinado debemos definir las anclas de destino, para ello es que utilizamos los atributos “name” o “id”

El formato para el caso de utilizar “name” es el siguiente:

<a name="destino" />

Y en caso de utilizar “id”, el formato seria el siguiente:

<etiqueta id="destino"> ... </etiqueta>

El atributo “id” puede ser incluido en todas las etiquetas que admitan este atributo.

Una vez definidos los anclajes podemos acceder a este punto (el punto marcado con “id” o “name”) con la siguiente sentencia. El nombre del destino se debe indicar precedido del signo #.

<a href="#destino"> ... </a>

La acción que se efectúe sobre el vinculo con el valor #destino del atributo href, llevara al destino indicado del documento html en la parte superior del navegador.
El ejemplo de código de hoy parece un poco mas complicado pero si lo observáis con detenimiento, os daréis cuenta que con los conocimientos adquiridos hasta ahora podéis entenderlo o hacerlo vosotros mismos. se trata de una supuesta hoja de noticias internacionales, donde haciendo click en los diferentes países el cursor se ubica en las noticias de ese país.
Código de Ejemplo aplicando las características vistas anteriormente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de enlaces dentro de un documento html - Noticias Internacionales</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<h3 align="center"><font face="Verdana"><strong><font size="2"><a name="principio"></a>SEMANAL
  PRENSA</font></strong><br>
  <font size="5">NOTICIAS INTERNACIONALES</font><br>
  <font size="1">INFORMACION INTERNACIONAL</font></font><br>
  <font size="3" face="Verdana">Regiones: <a href="#eeuu">EEUU</a> - <a href="#cee">CEE</a>
  - <a href="#japon">Jap&oacute;n</a> - <a href="#restodelmundo">Resto del Mundo</a></font></h3>
<hr>
<h2><font color="red" size="4" face="Verdana"><strong><a name="eeuu" id="eeuu"></a>Estados
  Unidos (EEUU):</strong></font></h2>
<h2><font size="2" face="Verdana">Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... </font> </h2>
<font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
<h2><font color="red" size="4" face="Verdana"><strong><a name="cee" id="cee"></a>Comunidad
  Econ&oacute;mica Europea (CEE):</strong></font></h2>

<h2><font size="2" face="Verdana">Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... </font></h2>
<font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
<h2><font color="red" size="4" face="Verdana"><strong><a name="japon" id="japon"></a>Jap&oacute;n
  :</strong></font></h2>
<h2><font size="2" face="Verdana">Japón logra construir el primer robot capaz de escribir programas en html sin ayuda humana, este sensacional proyecto fue

desarrollado en este pais, a raiz de que los estudiantes se negaban a escribir codigo.
Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... </font> </h2>
<font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
<h2><font color="red" size="4" face="Verdana"><strong><a name="restodelmundo" id="restodelmundo"></a>Resto
  del Mundo:</strong></font></h2>
<h2><font size="2" face="Verdana">Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n.... Informaci&oacute;n....

</font> </h2>
<font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
</body>
</html>

Representación en el navegador:

SEMANAL PRENSA
NOTICIAS INTERNACIONALES
INFORMACION INTERNACIONAL

Regiones: EEUU - CEE - Japón - Resto del Mundo


Estados Unidos (EEUU):

Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información....

Volver

Comunidad Económica Europea (CEE):

Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información....

Volver

Japón :

Japón logra construir el primer robot capaz de escribir programas en html sin ayuda humana, este sensacional proyecto fue desarrollado en este pais, a raiz de que los estudiantes se negaban a escribir codigo. Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información....

Volver

Resto del Mundo:

Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información....

Volver

Temas anteriores de curso HTML gratis

91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”
90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”
89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”

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)

martes, 16 de noviembre de 2010

78 - Ley de atracción: no esperes cambios de los demás...

" Escribe las cosas que mas te gusta de ellos (no esperes un cambio en ellos). La ley de la atracción no los pondrá juntos en el mismo espacio si tu frecuencia no encaja

Frecuenciaaltasbajas

Imagen: Red Conciencia
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.

92 - HTML - Vínculos <a></a>

HTML nos ofrece muchas de las posibilidades de publicación convencionales para la creación de documentos estructurados y textos enriquecidos.

La principal diferencia entre HTML y la mayoría de los otros lenguajes en cuanto al formato de documentos, es sus características para confeccionar documentos interactivos y formatos de hipertexto.

Aunque el “vinculo” es algo simple, es una de las principales características que ha hecho de la Web un éxito.

Un vinculo tiene dos “anclas” (en ingles: “anchors”), dos extremos, y una dirección.

Un vinculo comienza en el ancla de origen y apunta al ancla destino, que puede ser cualquier recurso de la web o de la propia pagina HTML.

Por defecto un vinculo esta asociado a la redirección hacia otro recurso de la web. Normalmente se accede a este recurso buscado, seleccionando el vinculo (ya sea haciendo clic con el ratón, a través del teclado u otros métodos).

Cuando se activa este vinculo aplicando alguno de los métodos listados anteriormente (clic u otro), los usuarios acceden a los recursos a los que apunta el vinculo (ancla de destino).

En resumen podemos decir que un “vinculo”, permite conectar o acceder a otro recurso en cualquier otra web de cualquier parte del mundo o incluso nuestra propia web.

Los vínculos se crean con el elemento <a></a>

El elemento <a> </a> tiene  las siguientes características:

  • Tiene etiqueta de inicio <a> y etiqueta de fin </a>.
  • El contenido del elemento se denomina ancla. (Si se trata de un texto, por defecto viene en color azul).
  • El atributo href indica el ancla de destino, que puede ser cualquier tipo de recurso web.
  • El recurso de destino viene expresado por su URL (Localizador Universal de Recursos).

ejemplo:

<a href="http://bobuu.blogspot.com">Este otro vinculo apunta a la página del blog bobuu</a>

<a  (Etiqueta de inicio)

</a> (Etiqueta de fin)

href (atributo href)

http://bobuu.blogspot.com (URI destino: valor de href)

Este otro vinculo apunta a la página del blog bobuu (texto, imagen, etc)

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


<html>
<head>
<title>Ejemplo de vinculo</title>
</head>
<body>
<p>
  ejemplo de vinculo incompleto y completo: <br>
  <a>Aqui un enlace incompleto, porque no tiene dirección de destino</a>. <br>
  <a href="http://bobuu.blogspot.com">Este otro vinculo apunta a la página del blog bobuu</a>.
</p>
</body>
</html>


Representación en el navegador:

ejemplo de vinculo incompleto y completo:
Aquí un enlace incompleto, porque no tiene dirección de destino.
Este otro vinculo apunta a la página del blog bobuu.

Temas anteriores de curso HTML gratis

90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”
89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”
88 - HTML - Tablas - Alineación de tablas “left, center, right”

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)

martes, 9 de noviembre de 2010

91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”

Así como es posible agrupar lógicamente filas en las tablas, también podemos realizar agrupaciones lógicas de columnas verticales. Para esta tarea utilizamos los elementos <colgroup> y <col> indicando las columnas que forman parte del grupo.

Cuando no se encuentra la etiqueta <colgroup> el navegador entiende que todo forma parte de un solo grupo. Las propiedades definidas para un grupo solo afectaran a las columnas del grupo.

La etiqueta <colgroup> tiene los siguientes atributos:

span : Con este atributo especificamos el numero de columnas que componen el grupo. Si no definiéramos este atributo el grupo contendría una sola columna. Para el caso de definirse uno o mas elementos <col>, los navegadores ignoraran el atributo span.

width : Con este atributo podemos definir un ancho de columna por defecto, para el grupo. Además de los valores normales (pixel, porcentaje, etc.), este atributo permite el valor especial “ 0* ” (es un cero y un asterisco), esto le indica que el ancho de cada columna del grupo debe ser la mínima para alojar los contenidos de las columnas. O sea que antes de calcular el ancho de la columna se deben conocer los contenidos para que entren en ella. Al igual que con el atributo “span”, en caso de especificarse el ancho mediante un elemento <col>, será este el que determine el tamaño (el <col>).

Para definir un grupo de columnas utilizamos <colgroup span=”n”>, donde “n” es el numero de columnas que forman el grupo (Ej: <colgroup span=”4”, esto determinaría un grupo de 4 columnas).

No es posible utilizar las dos formas de definir columnas (span y col) ya que en caso de utilizarse las dos, siempre <col> prevalecerá sobre “span”.

La ventaja de span sobre col es que con col debemos definir columna por columna, mientras que con span podemos por ejemplo definir 50 columnas de un ancho determinado de una sola vez, mientras que con “col” debemos hacerlo columna a columna (50 veces).

Es más fácil escribir:

<!--el ancho de las 50 columnas es de 15 px -->
<colgroup span="50" width="15">
</colgroup>

que:


    <colgroup> grupo de 50 columnas con ancho de 15 px...
<col width="15"> primer columna, ancho 15 píxeles
<col width="15"> segunda columna, ancho 15 píxeles
. . . . . .
repitiendo 50 veces las líneas hasta definir todas las columnas


      <col>... 
</colgroup>


Si necesitamos diferencia una columna de las del resto del grupo, debemos identificar el ancho de esa columna con un elemento <col>.



<colgroup width="20">

     <col span="20" align="center">


    <col id="formato diferente">     “id = número de la columna con formato diferente”


</colgroup>



El atributo width="20" del elemento <colgroup> se aplica a las veinte columnas.



El primer elemento <col> se refiere a las primeras 20 columnas, y alinea su contenido a la derecha, y el segundo asigna un identificador a la columna número “formato diferente” de modo que podemos hacer que una hoja de estilo (ya veremos mas adelante las hojas de estilo) haga referencia a ella.



Con el elemento <col> podemos compartir atributos entre varias columnas sin que ello implique ningún tipo de agrupamiento estructural.



El "campo de acción" del elemento <col> es el número de columnas que compartirán los atributos del elemento.



Los atributos disponibles del elemento <col> son:



span : El valor de este atributo debe ser un entero mayor que cero, especifica el número de columnas que "abarca". <col> comparte sus atributos con todas las columnas que abarca. De no aparecer este atributo <col> solo se refiere a una columna.



width : Especifica el ancho por defecto para todas las columnas abarcadas por el elemento <col>. Tiene el mismo significado que el atributo width del elemento <colgroup> y prevalece sobre él.



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



<html>

  <head>


    <title>Tabla - Ejemplo de Agrupamientos lógicos</title>


  </head>


  <body>


       <table border="1"  bordercolorlight="red" bordercolordark="maroon" >


       <caption>Tabla - Ejemplo de Agrupamientos lógicos</caption>



    <colgroup span="1" width="30" bgcolor="green" </colgroup>

    <colgroup span="2" width="40" bgcolor="yellow" </colgroup>


    <colgroup span="1" width="50" bgcolor="red" </colgroup>


<tr>


         <th>Nombre</th>


         <th>Telefono</th>


         <th>Otros</th>


         <th>Comentarios</th>


</tr>



<tbody>

      <tr>


         <td>Expansion hacia abajo</td>


         <td>derecha</td>


         <td>centro</td>


         <td>texto justificado izq. y derecha</td>



      </tr>

      <tr>


         <td>Izquierda</td>


         <td>derecha</td>


         <td>centro</td>


         <td>texto justificado izq. y derecha</td>



      </tr>

      <tr>


         <td>Expansion hacia la derecha</td>


         <td>derecha</td>


         <td>centro</td>


         <td>texto justificado izq. y derecha</td>



      </tr>

</tbody>



   </table>

  </body>


</html>



En ejemplo hemos definido tres grupos de columnas la primer color verde, las 2 siguientes amarillas y la tercera roja.









Representación en el navegador:




<="<"><="<"><="<">







































Tabla - Ejemplo de Agrupamientos lógicos
Nombre Telefono Otros Comentarios
Expansion hacia abajo derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha
Expansion hacia la derecha derecha centro texto justificado izq. y derecha



Una forma muy común de agrupamientos que se puede ver en la paginas web que se visitan, es insertar una tabla dentro de otra o una al lado de otra. Con esto logramos ubicar en nuestra pagina los diferentes elementos que la componen. Aunque se utiliza el consorcio W3C, recomienda utilizar hojas de estilo para conseguir este resultado.



Temas anteriores de curso HTML gratis

90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”


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


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



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)