Capitulos de este wiki
  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)
  39. 39 Estandares y extensiones del lenguaje HTML (II)
  40. 40 Extensiones a las listas (I)
  41. 41 Extensiones a las listas (II)
  42. 42 Alineamiento
  43. 43 La etiqueta META
  44. 44 Otras etiquetas del lenguaje HTML 3.2
  45. 45 El atributo TARGET
  46. 46 La etiqueta BASE
  47. 47 Creación de paginas con frames
  48. 48 Creación del documento de definición de frames (I)
  49. 49 Creación del documento de definición de frames (II)
  50. 50 Pagina completa con frames
  51. 51 Atributos de la etiqueta FRAME
  52. 52 Compatibilidad: NOFRAME
  53. 53 Anidamiento de framesets
  54. 54 Bordes de los frames
  55. 55 Valores especiales del atributo TARGET
  56. 56 Practica 5: Web de Los Alpes con frames
  57. 57 Frames flotantes
  58. 58 Sonido vídeo y otros ficheros externos
  59. 59 Multimedia Inline (I)
  60. 60 Multimedia Inline (I)
  61. 61 Plug-ins y objetos incrustados
  62. 62 Java en las Paginas Web
  63. 63 Inserción de Applets Java (I)
  64. 64 Inserción de Applets Java (II)
  65. 65 Inserción de Applets Java (III)
  66. 66 ActiveX, la tecnología del futuro
  67. 67 Formularios en HTML
  68. 68 Controles de Formularios (I)
  69. 69 Controles de Formularios (II)
  70. 70 Controles de Formularios (III)
  71. 71 Controles de Formularios (IV)
  72. 72 Otros controles
  73. 73 Practica 6-Formulario para "Los Alpes"
  74. 74 Como usar los datos de un formulario
  75. 75 Envío De Ficheros Usando Formularios

Curso completo de HTML - Anclas (II)

8 - Anclas (II)

[editar]
Curso gratis creado por Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
23 de Febrero de 2006

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.

[editar]

193 opiniones

fLakita

Me gustaria saber como se pone el signo de copyleft.
Gracias
sara

deberian poner como hacer un enlace a otra pagina desde un boton
luis

este tutorial esta fabuloso!
esta chivo

gracias por publicar cosas buenas
OCHOA

BUENO
1 2 3 4 5 6 7 ... 39 | siguiente >

Cursos gratis relacionados con 'Curso completo de HTML'

Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo... Más »
El objetivo de este curso es aprender a programar en el lenguaje Ada, desde sus... Más »
Práctico y completo curso de hacking.
Completo curso de Linux, un sistema operativo gratuito y de libre distribución inspirado en el... Más »
Completo curso acerca de los virus informáticos, historia, clasificación, protección...

Autor y licencia de 'Curso completo de HTML'


Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ CopyLeft
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.