Arriba: Lenguaje de marcado - Elementos de frases
Fuente original Capítulo 7 Punto de anclaje
La forma correcta de decir enlaces en HTML debe llamarse anclajes. No solo nos permiten señalar documentos, sino también a párrafos específicos en la página, y también pueden usarse como una herramienta conveniente para enlaces precisos. Deje que el objeto de enlace se acerque al foco. En este capítulo, veremos cuatro prácticas de anclaje diferentes, explicando las ventajas de cada método y también introduciremos cómo el atributo del título puede mejorar la facilidad de uso de los enlaces. Además, también usaremos CSS para diseñar estilos para enlaces. Cuando necesite especificar una parte específica de la página, marcar los anclajes es la mejor manera de hacerlo.
Esta es una situación común al diseñar un sitio web. Desea vincular a una parte específica de una determinada página, pero el usuario puede estar leyendo en otra página. Elija cualquiera de los cuatro métodos discutidos a continuación para permitirle lograr su objetivo.
En el ejemplo, supongamos que tenemos la intención de vincular a un título específico en la misma página: Método A: El nombre del agujero
<p> <a href =#oranges> sobre naranjas </a> </p>
... algún texto ...
<a name = oranges> </a>
<h2> Las naranjas son sabrosas </h2>
... más texto ...
Use una etiqueta de anclaje con contenido en blanco y un atributo de nombre para marcar un punto de enlace específico. Quizás este es el método con el que está familiarizado. Coloque un contenido en blanco <a> frente al título y conecte (usando el símbolo #, seguido del valor del atributo de nombre), que nos permite conectarnos a una parte específica de la página. Cuando la página contiene una larga lista de elementos que deben desplazarse, podemos conectarnos fácilmente a un proyecto específico a través de este método.
La Figura 7-1 muestra el resultado después de hacer clic en el enlace Acerca de las naranjas, lo que significa saltar al lugar que identificamos <a name = oranges> </a>, que está exactamente en el título.
Figura 7-1. Ejemplo de hacer clic para conectarse al enlace de anclaje específico
El efecto es bueno, pero desperdiciar una etiqueta en blanco para identificar la ubicación del enlace es un poco inconsistente con la semántica. El método B puede mejorar esto. Método B: todo dentro del nombre
<p> <a href =#oranges> sobre naranjas </a> </p>
... algún texto ...
<h2> <a name = oranges> Las naranjas son sabrosas </a> </h2>
... más texto ...
Al igual que el método A, todavía usamos la etiqueta <a> con el atributo de nombre, pero esta vez lo envolvemos fuera del título al que quiero vincular. Esto se ve más semántico. En el método A, nuestro objeto de conexión es ... bueno, no hay nada, sino en el método B, no solo explicamos que este texto es parte de la etiqueta de título, sino también uno de los anclajes de conexión de esta página. Tenga cuidado con el estilo global de <a>
Si se usa el método B, hay un lugar al que debe prestar atención. Si especifica los estilos CSS globales para todos los elementos <a> (color, tamaño de texto, decoración de texto, etc.), estos estilos anularán los estilos que especifique para los elementos <h2>. La razón por la que esto sucede es que en este ejemplo, la etiqueta <a> es un elemento infantil ubicado dentro de la etiqueta <h2> que la rodea.
Por ejemplo, si tiene una declaración como esta en su CSS:
a{
Color: verde;
Font-Weight: Bold;
Decoración de texto: subrayado;
}
El método B y este CSS harán que el título se vuelva verde, audaz y subrayado como el <a> en otras páginas, quizás diferente del estilo <h2> que espera.
Podemos usar la pseudo-clase de enlace de <a> para evitar este fenómeno (y también obtener otros beneficios), que se discutirá en detalle más adelante en este capítulo. Atributos de nombre más ricos
Uno de los beneficios de usar el Método B (y el Método A) es que el atributo de nombre puede manejar nombres de anclaje más abundantes. Específicamente, es la capacidad de usar símbolos dentro del nombre
Por ejemplo, si usa el método B, puede hacer esto (aquí representa el símbolo E)::
<p> <a href =#reum é> mi reanudar é </a> </p>
... algún texto ...
<h2> <a name = reum é> Reume de Dan é </a> </h2>
... más texto ...
Esta función es muy importante cuando se trata de personajes que no pertenecen a letras inglesas.
Pero hay varios métodos que vale la pena mencionar. El siguiente método no requiere el uso de <a> para establecer el punto de anclaje. Echemos un vistazo al método C.
Método C: Deseche el nombre
<p> <a href =#oranges> sobre naranjas </a> </p>
... algún texto ...
<h2 id = oranges> las naranjas son sabrosas </h2>
... más texto ...
Ah, la función del atributo de identificación es como el atributo de nombre, que también puede especificar puntos de anclaje para la página. Además, el método C también elimina el método A y B utiliza el atributo de nombre como una etiqueta adicional <a>. Hemos reducido el código fuente, que siempre ha sido algo bueno.
Dado que el atributo de identificación se puede agregar a cualquier etiqueta, podemos agregar fácilmente anclajes a cualquier elemento en la página. En este ejemplo, elegimos agregar anclajes al título, pero también podemos agregar fácilmente anclajes a <div>, <form>, <p>, <ul> ... y a todas las demás etiquetas. Una matanza, dos pájaros con un pájaro
De hecho, en la mayoría de los casos, podemos agregar estilos o secuencias de comandos al atributo de ID preexistente, que es otro beneficio del método C. Debido a esto, no necesitamos agregar código adicional para configurar el ancla.
Por ejemplo, supongamos que tiene un formulario para dejar comentarios en la parte inferior de una página larga, y desea agregar un enlace a la parte superior de la página. Este formulario ha establecido ID = comentarios para especificar un estilo único. Así es como podemos conectar directamente las ID como anclajes sin agregar una etiqueta <a> con el atributo de nombre.
El código se ve así:
<p> <a href =#comentarios> Agregue un comentario! </a> </p>
... muchos texto ...
<Form ID = Comentarios Action =/Path/To/Script>
... elementos de forma ...
</form>
Además, si su página es larga, agregue un enlace al ancla superior en la parte inferior para que el usuario pueda volver a la parte superior.
Vale la pena mencionar que, aunque parece muy adecuado, es mejor evitar usar la parte superior al especificar nombres de anclaje. Algunos navegadores conservan este nombre para fines especiales. El uso de este nombre puede causar resultados inconsistentes. Es mejor elegir un nombre similar pero no causa problemas. ¿Quizás usar #Gemesis? ¿O #? Tienes tu propia idea.
Navegador antiguo con atributos de identificación
Al usar solo el atributo de identificación como ancla, existe una desventaja importante que vale la pena mencionar, es decir, algunos navegadores antiguos no admiten este método. Oh, esto es de hecho una obligación que se considera al identificar su propio ancla, y también es un desafortunado ejemplo de compatibilidad hacia adelante. Veamos el último ejemplo, Método D. Método D: juntos
<p> <a href =#oranges> sobre naranjas </a> </p>
... algún texto ...
<h2> <a id = oranges name = oranges> las naranjas son sabrosas </a> </h2>
... más texto ...
Si desea lograr la compatibilidad hacia adelante y la compatibilidad hacia atrás al etiquetar los anclajes, probablemente le gustará este método. Tanto los navegadores antiguos como los futuros pueden identificar correctamente las etiquetas de anclaje con nombre, pero debido a que W3C no recomienda el atributo de nombre (http://www.w3.org/tr/xhtml1/#c_8) en la recomendación XHTML1.0, también usa el atributo de identificación para admitir futuros navegadores.
Igual que el Método B, debemos prestar atención al estilo global que afecta la etiqueta <a>.
Nombre compartido
Si elige usar el método D, es aceptable elegir el mismo nombre para los atributos de identificación y nombre (puede ser muy conveniente), pero esto solo es posible si están en la misma etiqueta. Además, solo hay unas pocas etiquetas específicas que permiten esto, que, para ser precisas, incluye <a>, <Applet>, <Frame>, <MG>, <MAP>. Por lo tanto, movemos ID = naranjas de <h2> a la etiqueta de anclaje.
Ahora que hemos visto cuatro métodos para establecer puntos de anclaje, resumamos las ventajas y desventajas de cada método.
Página anterior 1 2 3 Página siguiente Lea el texto completo