[SOLUCIONADO] Enlaces y anclas (no lo consigo)

young_grasshopper · #1 (**permalink**) 07/06/2013, 15:48

Buenas a todos, soy recién llegado y mi intención es aprender paso a paso los lenguajes de programación web para llegar a crear páginas con cierta calidad.

El caso es que ya llevo varios días peleándome con el tema de los enlaces dentro de la propia página y no logro salirme.

Posiblemente (casi seguro) que será una chorrada, pero me he quedado atascado y no hay manera de salir, a ver si alguien podría ayudarme a ver dónde estoy errando.

Os paso el código, porque pulsando sobre los enlaces no obedecen como, teóricamente, deberían.

No he usado <a name> porque he leído que ya no se utiliza y que ahora debe usarse <id>

<html>
<head>
<title>ejemplos de enlaces</title>
</head>
<body bgcolor="D0E1B4"> 
 
INDICE 
 
<A href="#parrafo1"> Párrafo 1 </A> 
<A href="#parrafo2"> Párrafo 2 </A> 
<A href="#parrafo3"> Párrafo 3 </A> 
<A href="#parrafo4"> Párrafo 4 </A> 
 
 
<h3 id="parrafo1"> primer párrafo </h3>
Bla bla bla.
 

<h3 id="parrafo2"> segundo párrafo </h3>
Bla bla bla.
 

<h3 id="parrafo3"> tercer párrafo </h3>
Bla bla bla.
 

<h3 id="parrafo4"> cuarto párrafo </h3>
Bla bla bla.
 

</body>



</html>

Muchas gracias de antemano y saludos a tod@s.

alberto510a · #2 (**permalink**) 07/06/2013, 16:17

Hola, no sé que pretendes hacer ni cual es tu problema pero por lo pronto fíjate en como tienes la etiqueta que cierra a este , la tienes fuera del body.

Saludos

young_grasshopper · #3 (**permalink**) 08/06/2013, 17:36

Tienes toda la razón alberto510a, ya ves que soy muy novato en el tema, lo que pretendo hacer con el código (habiendo corregido el cierre de ) es aprender a crear enlaces internos a anclas dentro de la propia página y cuando pulso sobre los 4 enlaces creados inicialmente no obedecen, de modo que no me conducen a las anclas invocadas.

Repito que seguro que se trata de alguna tontería o error de novato pero, puesto que hace poco me he puesto a aprender sobre el tema de manera autodidacta, me he bloqueado y no veo donde puede estar el error, así que os agradezco vuestra paciencia y ayuda.

Saludos.

caricatos · #4 (**permalink**) 08/06/2013, 18:13

Hola:

Prueba con el lorem ipsum.

Las pocas líneas no llegan a necesitar un scroll, y por eso el anclaje no consigue su efecto....

En vez de un simple br, prueba con 50...

Saludos

herzbazi · #5 (**permalink**) 08/06/2013, 18:18

lo que quieres hacer son anclas

<a href="#uno">texto 1</a>
<a href="#dos">texto 2</a>
<a href="#tres">texto 3</a>

<a name="uno" id="uno"></a>esto es un texto
aqui le das el alto necesario o los que quieras
<a name="dos" id="dos"></a>texto 2 

<a name="tres" id="tres"></a>texto 3 ahi un ejemplo sencillo

si te ayude sumame un puntillo

espero te sirva ,cualqueir cosa estoy para ayudarte

young_grasshopper · #6 (**permalink**) 09/06/2013, 14:50

Muchísimas gracias caricatos y herzbazi por vuestra respuesta; el caso es que he probado tal y como me indicáis los dos, depurando el código (pasándolo por el validator de W3C) y, tanto en un caso como en otro, me funcionan las 2 primeras anclas pero las otras 2 no, no sé dónde estoy fallando pero parece que mi relación con las anclas no es muy fructífera...
Adjunto los dos códigos para que detectéis qué es lo que hago mal porque le he dado muchas vueltas y no encuentro solución :

Opción "caricatos" :

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplos de enlaces</title>
<meta charset="UTF-8">
</head>
 
INDICE 
 
<A href="#parrafo1">Párrafo 1</A> 
<A href="#parrafo2">Párrafo 2</A> 
<A href="#parrafo3">Párrafo 3</A> 
<A href="#parrafo4">Párrafo 4</A> 
 
 
<h1 id="parrafo1">primer párrafo</h1> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo orci
ut tortor facilisis non lacinia magna porttitor. Mauris cursus eleifend
imperdiet. Donec malesuada sodales nisl, vitae suscipit ipsum ornare ut.
Vestibulum nisi purus, dignissim rutrum feugiat in, vehicula sit amet urna.
Curabitur sit amet metus urna. In auctor mauris vulputate sapien pretium in
pretium velit elementum. Morbi vel quam ante. Vivamus sit amet porttitor
risus. Nam faucibus dolor vitae ipsum porta nec ullamcorper dolor ornare.
Maecenas rhoncus congue turpis. Sed lorem lectus, commodo eget accumsan
fringilla, imperdiet eget mi. Vivamus sollicitudin imperdiet mattis.
Nam dapibus erat ac mauris consectetur cursus. Proin in nisi mi, ut convallis
nibh.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<h1 id="parrafo2">segundo párrafo</h1> 
Nunc egestas egestas consequat. Pellentesque mi lorem, interdum semper mattis
nec, lobortis a sem. Cras ultricies tellus ut mi dictum nec vulputate nunc
dignissim. Integer ligula ipsum, aliquam laoreet mattis nec, consequat at
elit. Quisque porta tortor ut risus porta sit amet facilisis augue rutrum.
Mauris vitae magna eu orci vestibulum blandit non eu sapien. Nunc condimentum
leo et lacus euismod a laoreet justo interdum. Nam eros felis, laoreet sed
molestie et, volutpat in sapien.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<h1 id="parrafo3">tercer párrafo</h1> 
Proin porta volutpat pretium. Sed dolor nisl, tempor sed tincidunt ut,
eleifend eget lorem. Nulla facilisi. Mauris congue nunc in sapien dignissim
dignissim. Sed lacinia faucibus gravida. Aliquam eget quam est, eu cursus
lacus. In imperdiet faucibus volutpat. Morbi adipiscing posuere imperdiet.
Praesent eu ligula ut arcu laoreet bibendum ac ac urna. Curabitur at blandit
nulla. Praesent eget ligula non erat tincidunt mollis id ut leo. Integer vel
dolor arcu. Aenean viverra scelerisque odio eget pellentesque. Quisque porta
hendrerit nisi nec cursus.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<h1 id="parrafo4">cuarto párrafo</h1> 
Cras tincidunt commodo mattis. Donec est nisi, euismod facilisis volutpat
eget, euismod in dui. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Praesent egestas metus non diam volutpat nec
eleifend diam posuere. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Curabitur tristique, lacus non imperdiet
imperdiet, ipsum nunc varius neque, ut porta dui libero sed ligula.
Vestibulum malesuada pretium vulputate. Vivamus orci est, tincidunt nec
mollis et, molestie in quam. Donec vestibulum suscipit mi a pulvinar.
Morbi eleifend tellus a erat feugiat eget suscipit leo scelerisque.

</body>
</html>

Opción "herzbazi" :

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplos de enlaces</title>
<meta charset="UTF-8">
</head>
 
INDICE 
 
<A href="#parrafo1">Párrafo 1</A> 
<A href="#parrafo2">Párrafo 2</A> 
<A href="#parrafo3">Párrafo 3</A> 
<A href="#parrafo4">Párrafo 4</A> 
 
 
<A href="parrafo1" id="parrafo1"></A>primer párrafo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo orci
ut tortor facilisis non lacinia magna porttitor. Mauris cursus eleifend
imperdiet. Donec malesuada sodales nisl, vitae suscipit ipsum ornare ut.
Vestibulum nisi purus, dignissim rutrum feugiat in, vehicula sit amet urna.
Curabitur sit amet metus urna. In auctor mauris vulputate sapien pretium in
pretium velit elementum. Morbi vel quam ante. Vivamus sit amet porttitor
risus. Nam faucibus dolor vitae ipsum porta nec ullamcorper dolor ornare.
Maecenas rhoncus congue turpis. Sed lorem lectus, commodo eget accumsan
fringilla, imperdiet eget mi. Vivamus sollicitudin imperdiet mattis.
Nam dapibus erat ac mauris consectetur cursus. Proin in nisi mi, ut convallis
nibh.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<A href="parrafo2" id="parrafo2"></A>segundo párrafo
Nunc egestas egestas consequat. Pellentesque mi lorem, interdum semper mattis
nec, lobortis a sem. Cras ultricies tellus ut mi dictum nec vulputate nunc
dignissim. Integer ligula ipsum, aliquam laoreet mattis nec, consequat at
elit. Quisque porta tortor ut risus porta sit amet facilisis augue rutrum.
Mauris vitae magna eu orci vestibulum blandit non eu sapien. Nunc condimentum
leo et lacus euismod a laoreet justo interdum. Nam eros felis, laoreet sed
molestie et, volutpat in sapien.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<A href="parrafo3" id="parrafo3"></A>tercer párrafo
Proin porta volutpat pretium. Sed dolor nisl, tempor sed tincidunt ut,
eleifend eget lorem. Nulla facilisi. Mauris congue nunc in sapien dignissim
dignissim. Sed lacinia faucibus gravida. Aliquam eget quam est, eu cursus
lacus. In imperdiet faucibus volutpat. Morbi adipiscing posuere imperdiet.
Praesent eu ligula ut arcu laoreet bibendum ac ac urna. Curabitur at blandit
nulla. Praesent eget ligula non erat tincidunt mollis id ut leo. Integer vel
dolor arcu. Aenean viverra scelerisque odio eget pellentesque. Quisque porta
hendrerit nisi nec cursus.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<A href="parrafo4" id="parrafo4"></A>cuarto párrafo
Cras tincidunt commodo mattis. Donec est nisi, euismod facilisis volutpat
eget, euismod in dui. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Praesent egestas metus non diam volutpat nec
eleifend diam posuere. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Curabitur tristique, lacus non imperdiet
imperdiet, ipsum nunc varius neque, ut porta dui libero sed ligula.
Vestibulum malesuada pretium vulputate. Vivamus orci est, tincidunt nec
mollis et, molestie in quam. Donec vestibulum suscipit mi a pulvinar.
Morbi eleifend tellus a erat feugiat eget suscipit leo scelerisque.

</body>
</html>

Muchas gracias y saludos

caricatos · #7 (**permalink**) 10/06/2013, 00:15

Hola:

Sigues con el mismo problema que al principio, detrás del último texto la página llega a su fin sin poder ir más abajo... además de algunos errores que no entiendo que se ta hayan pasado después de validar... falta el tag body, y todas las etiquetas van en minúsculas... si coloreas la página o le asignas un borde podrás comprobar lo que te estoy planteando.

Saludos

young_grasshopper · #8 (**permalink**) 10/06/2013, 14:23

caricatos, sólo puedo decir una cosa: "¡¡¡Qué burro!!!", debí de borrar el <body> cuando le quité el color de fondo para depurar el código y ya no pensé más en él.
Ya he añadido un montón de entre párrafos de anclas y ahora ya me funciona (muchas gracias).
Sólo me queda una duda; si quiero que me funcionen los enlaces internos con anclas, ¿éstas siempre deberán estar muy separadas?¿no es posible que funcione si las anclas quedan bastante seguidas?

Muchas gracias.

caricatos · #9 (**permalink**) 10/06/2013, 17:45

Hola:

Cita:

Iniciado por young_grasshopper

Sólo me queda una duda; si quiero que me funcionen los enlaces internos con anclas, ¿éstas siempre deberán estar muy separadas?¿no es posible que funcione si las anclas quedan bastante seguidas?

Muchas gracias.

Los anclajes funcionan siempre, pero si tu página tiene un tamaño por su contenido, los enlaces internos solo podrán mostrar lo que está dentro. No dejes de hacerlo aunque visualmente no te guste... es una buena práctica.

Saludos