una - hipervinculos en html ejemplos

¿Cómo creo un enlace a una nota al pie en HTML?

Question

Por ejemplo:

Este es el cuerpo principal de mi contenido. Tengo un enlace a pie de página para esta línea [1]. Entonces, tengo algo más de contenido. Algo de esto es interesante y también tiene algunas notas al pie [2].

[1] Aquí está mi primera nota al pie.

[2] Otra nota al pie.

Entonces, si hago clic en el enlace "[1]", dirige la página web a la primera referencia de notas al pie y así sucesivamente. ¿Cómo puedo lograr esto en HTML?

Answer 1

<a name="1"> Nota al pie </a>

bla bla

<a href="#1"> vaya </a> a la nota al pie.

Answer 2

Déle un identificador a un contenedor, luego use # para referirse a ese Id.

p.ej

This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.

<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>

Answer 3

Deberá configurar etiquetas de anclaje para todas sus notas al pie. Prefijándolos con algo como esto debería hacerlo:
<a name = "FOOTNOTE-1"> [1] </ a>

Luego, en el cuerpo de su página, enlace a la nota al pie de la siguiente manera:
<a href = "# FOOTNOTE-1"> [1] </ a>
(tenga en cuenta el uso del nombre frente a los atributos href )

Básicamente, cada vez que establece un nombre de una etiqueta A, puede acceder a ella al vincularla a # NAME-USED-IN-TAG.

http://www.w3schools.com/HTML/html_links.asp tiene más información.

Answer 4

Es una buena práctica proporcionar un enlace desde la nota al pie hasta donde se hace referencia (suponiendo que exista una relación 1: 1). Esto es útil porque el botón Atrás llevará al usuario nuevamente a la posición de desplazamiento en la que se encontraba anteriormente, dejando que el lector encuentre su lugar en el texto. Al hacer clic en un enlace de regreso a donde se hizo referencia a la nota de pie de página en el texto, se coloca ese texto en la parte superior de la ventana, lo que hace que sea muy fácil para el lector continuar donde lo dejó.

Quirksmode tiene una página en notas al pie en la web (aunque sugiere que use notas al margen en lugar de notas a pie de página, creo que las notas a pie de página son más accesibles , con un enlace a la nota al pie y la nota al pie seguidas de un enlace al texto Sospecho que serían más fáciles seguir con un lector de pantalla ).

Uno de los enlaces de la página de modo peculiar sugiere tener una flecha, ↩, después de que el texto de la nota al pie se vincule hacia atrás, y para usar la entidad & # 8617; para esto.

p.ej:

This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.

<p id="footnote-1">
   1. Here is my first footnote. <a href="#footnote-1-ref">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</a>
</p>

Sin embargo, no estoy seguro de cómo manejarían los lectores de pantalla a la entidad. Relacionado con los comentarios de la publicación de Grubber está la publicación de Bob Eastern sobre la accesibilidad de notas a pie de página que sugiere que no se lee, aunque eso fue hace algunos años y espero que los lectores de pantalla hayan mejorado a estas alturas. Para la accesibilidad podría valer la pena usar un anclaje de texto como "regresar al texto" o tal vez ponerlo en el atributo de título del enlace. También puede valer la pena poner uno en la nota original, aunque no sé cómo los lectores de pantalla manejarían eso.

This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.

<p id="footnote-1">
   1. Here is my first footnote.
      <a href="#footnote-1-ref" title="return to text">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</a>
</p>

(Solo estoy adivinando los problemas de accesibilidad aquí, pero como no fue mencionado en ninguno de los artículos que mencioné, pensé que valía la pena mencionarlo. Si alguien puede hablar con más autoridad sobre el tema, estaría interesado en oír.)

Answer 5

Este es el cuerpo principal de mi contenido. Tengo un enlace a pie de página para esta línea [1]. Entonces, tengo algo más de contenido. Algo de esto es interesante y también tiene algunas notas al pie [2].

[1] Aquí está mi primera nota al pie.

[2] Otra nota al pie.

Hacer <a href = # tag> texto </ a>

y luego en la nota al pie: <a name = "tag"> text </ a>

Todo sin espacios Referencia: http://www.w3schools.com/HTML/html_links.asp

Answer 6

La respuesta de Peter Boughton es buena, pero podría ser mejor si en lugar de declarar la nota de pie de página como "p" (párrafo), declaras como "li" (elemento de lista) dentro de un "ol" (lista ordenada):

This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.

<h2>References</h2>
<ol>
    <li id="footnote-1">Here is my first footnote.</li>
    <li id="footnote-2">Another footnote.</li>
</ol>

De esta manera, no es necesario escribir el número en la parte superior, y debajo ... siempre y cuando las referencias se enumeren en el orden correcto a continuación.

Answer 7

Para su caso, probablemente sea mejor que haga esto con las etiquetas a-href y las etiquetas con nombre a en sus enlaces y pies de página, respectivamente.

En el caso general de desplazamiento a un elemento DOM, hay un complemento jQuery . Pero si el rendimiento es un problema, sugeriría hacerlo manualmente. Esto implica dos pasos:

1. Encontrar la posición del elemento al que está desplazándose.
2. Desplazarse a esa posición.

quirksmode da una buena explicación del mecanismo detrás de la primera. Esta es mi solución preferida:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Utiliza casting de nulo a 0, que no es la etiqueta adecuada en algunos círculos, pero me gusta :) La segunda parte usa window.scroll . Entonces el resto de la solución es:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

Answer 8

Primero ingrese y coloque una etiqueta de anclaje con un atributo de nombre al frente de cada nota al pie.

 <a name="footnote1">Footnote 1</a>
 <div>blah blah about stuff</div>

Esta etiqueta de anclaje no será un enlace. Simplemente será una sección con nombre de la página. Luego, convierte al marcador de notas al pie en una etiqueta que hace referencia a esa sección nombrada. Para referirse a una sección nombrada de una página, usa el signo #.

 <p>So you can see that the candidate lied 
 <a href="#footnote1">[1]</a> 
 in his opening address</p>

Si desea vincular esa sección desde otra página, puede hacerlo también. Solo vincula la página y pega el nombre de la sección en ella.

 <p>For more on that, see 
 <a href="mypaper.html#footnote1">footnote 1 from my paper</a>
 , and you will be amazed.</p>

Answer 9

Usa marcadores en etiquetas de anclaje ...

    This is main body of my content. I have a footnote link for this 
line <a href="#foot1">[1]</a>. Then, I have some more content. 
Some of it is interesting and it has some footnotes as well 
<a href="#foot2">[2]</a>.

<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>

<div>
<a name="foot2">[2]</a> Another footnote.
</div>

Answer 10

etiquetas de anclaje utilizando anclas con nombre

http://www.w3schools.com/HTML/html_links.asp