Debe introducir al menos 3 caracteres en el buscador.
Inicio / Wikis / Cursos gratis / Curso completo de HTML - Anclas (II)

Curso completo de HTML - Anclas (II)

 ***** (126 opiniones)
GNU Free Documentation License Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
Temas Relacionados: HTML
8. Anclas (II)

Uso de enlace y ancla en la misma etiqueta

Hasta ahora hemos visto el uso de la etiqueta <a ...>..</a%gt; de dos maneras diferentes: para crear enlaces hipertexto o para crear anclas. En el primero de los casos se usaba el atributo 'href' para especificar la página que se querías enlazar. En el segundo caso, al crear el ancla, se usaba el atributo 'name' para darle un nombre con el que poder identificarle. Pero ¿qué ocurre si usamos los dos atributos a la vez?, ¿Está permitido? La respuesta es SÍ. En ese caso se estará creando ambas cosas a la vez un enlace o un ancla. Por ejemplo:

 <a href="http://es.gnome.org" name="enlace_gnome_hispano">
  GNOME Hispano
  </a> 
       

En este caso al pulsar sobre la palabra 'GNOME Hispano' se salta a la página de GNOME Hispano. Y por otro lado se puede acceder al lugar de la página donde está este enlace creando una referencia al ancla denominada 'enlace_gnome_hispano'. Es decir, la línea anterior es equivalente a poner las dos siguientes:

 <a name="enlace_gnome_hispano">
  <a href="http://es.gnome.org">
  GNOME Hispano
  /a>
       

Todavía puede plantearse otra pregunta: ¿para que puede servir un enlace-ancla? Esta pregunta tiene mucha lógica porque para lo único que sirve un ancla es para crear un enlace a ella. En el ejemplo anterior se podrías escribir en algún otro lugar de la página:

 <a href="#enlace_gnome_hispano">
  página de GNOME Hispano</a>
  
       

Pero ¿por qué no poner directamente?:

 <a href="http://es.gnome.org">
  página de GNOME Hispano
  </a>
       

Parece más lógico y así no se forza al visitante de la página a dar dos pasos en vez de uno. Sin embargo puede encontrar casos en que el enlace-ancla puede ser conveniente. Por ejemplo, puede ocurrir que se desee poner un enlace a la página de GNOME Hispano desde una página principal. Pero también se quiere hacer caso al consejo de ciertos diseñadores web experimentados de no poner enlaces externos en ella. ¿Cómo solucionarlo? Seguramente el lector ya lo sabrá: se puede tener una página especial con todos los enlaces externos llamada por ejemplo links.html donde estuviese el enlace-ancla anterior. Entonces desde la página principal se escribiría:

 <a href="links.html#enlace_gnome_hispano">
  GNOME Hispano</a>
       

Con lo que además hemos conseguido que el usuario visite otra de nuestras páginas, que en definitiva es uno de los objetivos de todo programador Web: que sus páginas sean vistas.

El atributo 'title'

El lenguaje HTML define, además de los vistos, otro atributo interesante para la etiqueta <a>..</a>: 'title'. Con este atributo puede escribirse un título o una descripción breve del link. Los navegadores pueden mostrar esta información al usuario de varias maneras:

  • En un margen de la pantalla o mediante una caja de texto (en ocasiones llamadas bocadillos) que aparezca cuando se sitúen el ratón encima de la zona activa del link. Este es el método usado por Explorer .

  • Cuando el link ya ha sido pulsado y se esté esperando recibir la página puede mostrarse como texto de espera o anticipo a lo que va a llegar.

  • Leyendo el texto (con un sintetizador de voz) cuando se selecciona o se pasa por encima

  • etc.

No es habitual encontrar el atributo 'title' en muchas páginas, quizá porque Netscape ha decidido ignorarlo y sus usuarios no verán la información que introduzcamos en él de ninguna manera.

Para ver un ejemplo de su uso se utilizá la página titulada "La chistera - Humor y magia" realizada en la primera práctica. En ella se cambia la línea de código:

 <p><a 
    href="http://www.ciudadfutura.com/areirse">
  ¡A Reírse Toca, ¡Ja, ja, ja!</a> 
  </p>
       

Por esta otra con el atributo 'title':

 <p><a
    href="http://www.ciudadfutura.com/areirse" 
    title="Yo me reí mucho">¡A Reírse Toca, ¡Ja,
  ja, ja! </a></p>.
       

El resultado puede verse en la figura 2.17. Al pasar el cursor por encima del texto activo nos aparece un bocadillo con el texto del atributo 'title'.

Figura 2.17. Con el atributo 'title' podemos incluir información adicional sobre el Link. Explorer mostrará esta información con un bocadillo.

Es aconsejable usar 'title' siempre. De esta manera aquellos usuarios (que visiten la página) con navegadores que entiendan este atributo (como Explorer) disfrutarán de una información extra y los que usen otros navegadores que no lo entiendan (como Netscape) se quedarán como si no hubiéramos incluido dicha información, pero en ningún caso saldrán perjudicados.

Los atributos 'rel' y 'rev'

Antes de terminar con la etiqueta <a> ...</a> es conveniente comentar algunos atributos más que completan su repertorio y que no han sido mencionados hasta ahora porque no son muy usados.

Entre estos destacan 'rel' y 'rev' porque en los últimos estándares de HTML en los que han trabajado conjuntamente Microsoft, Netscape y muchas otras compañías y organizaciones, se les ha dado mayor importancia de la que tienen actualmente.

Estos atributos fueron creados para establecer relaciones entre las páginas enlazadas entre sí. Sin embargo no se ha especificado todavía para que pueden servir estas relaciones. 'rel' y 'rev' sólo existen con vistas a que en un futuro se les dé algún uso. El nombre 'rel' proviene de la palabra inglesa relation (relación) mientras que 'rev' proviene de REVerse relation (relación inversa).

Un ejemplo podría consistir en un libro publicado en Internet donde cada capítulo se ha escrito en una página (capitulo1.html, capitulo2.html, etc.) Puede ser interesante establecer una relación entre cada una de las páginas. Así en el capítulo 4 se podría emplear lo siguiente:

 <a href="capitulo3.html"
    rel="anterior">Capítulo 3
  </a>
  <a href="capitulo5.html" rel="siguiente">
  Capítulo 5</a>
       

Es decir el capítulo 3 se relaciona con el actual (el cuarto) en que es el anterior y el 5 en que es el siguiente. Un posible uso (futuro) que podría darse a este tipo de relaciones podría ser con vistas a imprimir el libro completo.

El atributo 'rev' establece la misma relación que 'rel' pero a la inversa. En el ejemplo anterior hubiese sido equivalente escribir:

 <a href="capitulo3.html" rev="anterior">
  Capítulo 3 
  </a>
  <a href="capitulo5.html" rev="siguiente">
  Capítulo 5</a>
       

El capítulo actual es el siguiente al tercero y el anterior al quinto.

Por último, para terminar por completo la etiqueta < a>...</a>, sólo nos queda comentar dos atributos: 'urn' y 'methods'. Estos dos atributos existían en los orígenes del lenguaje HTML pero fueron eliminados por su poca utilidad. Los mencionamos únicamente para que el lector no se extrañe si los ve en alguna página, pero no recomendamos su uso.

Tabla de contenidos
  1. 1 - Introducción al lenguaje HTML
  2. 2 - Primeros pasos con HTML
  3. 3 - Parrafos en HTML
  4. 4 - Cómo insertar imagenes en una pagina
  5. 5 - Cómo crear enlaces hipertexto
  6. 6 - PRÁCTICA 1: La pagina web de "La chistera"
  7. 7 - Anclas (I)
  8. 8 - Anclas (II)
  9. 9 - Formato de texto
  10. 10 - La etiqueta FONT
  11. 11 - Texto preformateado
  12. 12 - Acentos y otros caracteres especiales
  13. 13 - Listas en HTML (I)
  14. 14 - Listas en HTML (II)
  15. 15 - Comentarios en HTML
  16. 16 - Practica 2: Un sitio web completo
  17. 17 - Usando color en el WWW
  18. 18 - Cómo cambiar la apariencia de una pagina
  19. 19 - Imagenes en las paginas Web (I)
  20. 20 - Imagenes en las paginas Web (II)
  21. 21 - Imagenes en las paginas Web (III)
  22. 22 - Cómo cambiar la apariencia de las imagenes
  23. 23 - Alternativas a las imagenes inline (I)
  24. 24 - Alternativas a las imagenes inline (II)
  25. 25 - Mejoras en las imagenes
  26. 26 - Cómo se crea una tabla HTML (I)
  27. 27 - Cómo se crea una tabla HTML (II)
  28. 28 - Alineamiento de tablas
  29. 29 - Alineamiento de celdas y filas
  30. 30 - Ancho de tablas y celdas
  31. 31 - Celdas que abarcan varias filas o columnas
  32. 32 - Margenes y separación de celdas
  33. 33 - Anidamiento
  34. 34 - Practica 3 - Tabla de Datos
  35. 35 - Practica 4 - Pagina Web con una estructura creada con tablas
  36. 36 - Practica 4 - Pagina Web con una estructura creada con tablas
  37. 37 - Practica 4 - Pagina Web con una estructura creada con tablas
  38. 38 - Estandares y extensiones del lenguaje HTML (I)
  1. 39 - Estandares y extensiones del lenguaje HTML (II)
  2. 40 - Extensiones a las listas (I)
  3. 41 - Extensiones a las listas (II)
  4. 42 - Alineamiento
  5. 43 - La etiqueta META
  6. 44 - Otras etiquetas del lenguaje HTML 3.2
  7. 45 - El atributo TARGET
  8. 46 - La etiqueta BASE
  9. 47 - Creación de paginas con frames
  10. 48 - Creación del documento de definición de frames (I)
  11. 49 - Creación del documento de definición de frames (II)
  12. 50 - Pagina completa con frames
  13. 51 - Atributos de la etiqueta FRAME
  14. 52 - Compatibilidad: NOFRAME
  15. 53 - Anidamiento de framesets
  16. 54 - Bordes de los frames
  17. 55 - Valores especiales del atributo TARGET
  18. 56 - Practica 5: Web de Los Alpes con frames
  19. 57 - Frames flotantes
  20. 58 - Sonido vídeo y otros ficheros externos
  21. 59 - Multimedia Inline (I)
  22. 60 - Multimedia Inline (I)
  23. 61 - Plug-ins y objetos incrustados
  24. 62 - Java en las Paginas Web
  25. 63 - Inserción de Applets Java (I)
  26. 64 - Inserción de Applets Java (II)
  27. 65 - Inserción de Applets Java (III)
  28. 66 - ActiveX, la tecnología del futuro
  29. 67 - Formularios en HTML
  30. 68 - Controles de Formularios (I)
  31. 69 - Controles de Formularios (II)
  32. 70 - Controles de Formularios (III)
  33. 71 - Controles de Formularios (IV)
  34. 72 - Otros controles
  35. 73 - Practica 6-Formulario para "Los Alpes"
  36. 74 - COMO USAR LOS DATOS DE UN FORMULARIO
  37. 75 - Envío De Ficheros Usando Formularios
Autor y licencia de 'Curso completo de HTML - Anclas (II)'
Jorge Ferrer, Víctor García y Rodrigo García Extraído de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ GNU Free Documentation License
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.

Wikis relacionados con 'Curso completo de HTML - Anclas (II)'

Bienvenidos al manual de HTML de Indaya. A través de todos estos capítulos vamos a... Más »
Excelente curso de iniciación a la astronomía para aquellos que quieran aprender sobre esta apasionante... Más »
En la edición anterior, se explicó las bases de Netfilter/IPTables. En esta segunda entrega, se... Más »
Este trabajo ha tenido en cuenta los supuestos teóricos analizados en el artículo “Competencias: Un... Más »
Las fotografias de flores (flora en general) quizas sean las que mejor se dejan enmarcar.... Más »
Gente Wiki
Walter Noel Leyria
Diseñador grafico. Presidente de la asoc de diseño de la pcia de san luis. Argentina. Propietario del studio l35 desde...
Administración pública, Administración pública y cultura,...
Carlos Octavio Gonzalez
Lider de proyectos de implementación de sap. Conocimientos de los modulos wm, mm y sd.
Transporte
César Ríos
Profesor de pre y porstgrado en las áreas de economía, estadística matemática y econometría, e investigador en las áreas de...
Jorge Hernan Ocampo
Soy Ingeniero civil. Trabajo en carreteras y construcción. Soy constructor, pero me interesa todo lo ambiental. Plantas de tratamiento de...
Ingeniería civil
Mariana Moretti
Soy profesora educación física y trabajo en el área capacitación de fitness grupal: especializada en aerobox y gimnasia localizada.
Jorge Jhuéz
Soy gestor de sistemas de la calidad, pero mis intereses son variados, negocios, deportes, familia, comida. Bueno en fin soy...
Inspección y auditoría agrícola, ISO 14000,...
Suscribirse
¿Estás seguro de que deseas eliminar este capítulo?