Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

Todo sobre los enlaces en HTML

Siempre me ha parecido que, una de las cosas más agradecidas de los documentos HTML de la web, aparte de poder insertar imágenes o vídeos, está en la posibilidad de crear hipervínculos o enlaces entre ellos.

De hecho, creo que esta es una de las características que más puede emocionar y motivar a los novatos que jamás han tocado código ni con un palo y que deciden adentrarse en el mundo del desarrollo web.

De repente, escribes cuatro líneas de HTML y, ¡zas!, eres capaz de añadir interactividad a un simple texto. Dado que estás viendo este post, deduzco que ahora mismo estás dando tus primeros pasos con HTML, así que seguro que entiendes lo que te quiero decir.

¿Cómo se ponen los enlaces?

Los enlaces en HTML se crean principalmente con la etiqueta <a>, que tiene su correspondiente etiqueta de cierre </a>. Pero, pero... ni "enlace", ni "link", ni "hipervínculo comienzan por "a". ¿De dónde viene esto?

Pues viene del inglés "anchor", que literalmente significa "ancla". Así que, cada vez que pongas un enlace en tu página web, imagínate que estás lanzando un ancla con una cuerda hacia otra página web, y así quedan enganchadas ambas. Vinculadas.

El atributo href de los enlaces

El atributo más importante más importante en los enlaces es href, ¿qué significa? Pues es la abreviatura de Hipertext Reference, o lo que es lo mismo Referencia de Hipertexto. En este atributo es donde indicamos el URL a la que apuntaremos con el enlace. O sea, la página a donde irá el navegador al hacer clic en el enlace.

Así que, si quieres enlazar al blog de recursos de campusMVP, desde tu página pondrías:

 <a href="https://www.campusmvp.es/recursos/" title="Al blog de recursos de campusMVP">Ir al blog de campusMVP</a>

Y se vería así:

Ir al blog de campusMVP

Fíjate en el atributo title, sirve para mostrar en el navegador un tooltip (deja quieto el cursor sobre el enlace) que normalmente aporta información sobre la página de destino. Utilízalo. Mejorarás la accesibilidad y experiencia de usuario en tus páginas, aparte de resultar muy útil para optimizar tu página para los buscadores, ya que les ayudas a entender mejor tu contenido.

Por cierto. Como puedes ver, el texto del enlace es lo que va entre <a> y </a>. Si en vez de texto quieres que el enlace sea una imagen, tendrías que ponerle ahí la correspondiente etiqueta <img>:

<a href="https://www.campusmvp.es/recursos/" title="Al blog de recursos de campusMVP">
  <img src="/recursos/image.axd?picture=/2017/4T/enlaces-imagenes-campusmvp.png" alt="Enlace con imagen usando el logo de campusMVP" />
</a>

Y, entonces, se vería así:

Enlace con imagen usando el logo de campusMVP

Enlaces con rutas absolutas

Pero si quisieras enlazar una página concreta tendrías que poner una dirección más detallada:

<a href="https://www.campusmvp.es/directorio1/directorio2/archivo.htm">Ir al post de los enlaces</a>

Nota: en la jerga de Internet a las direcciones únicas de un recurso, como la que acabamos de colocar en nuestro enlace, se les denomina URL, del inglés Uniform Resource Locator o Localizador Uniforme de Recursos. Un URL es una dirección única que identifica un recurso en Internet, no solo en la Web. Lo más habitual es que escuches hablar de URLs y no tanto de direcciones, pero es lo mismo.

Fíjate en el URL. Ahora, aparte del dominio, en la ruta aparecen varios directorios separados por una barra inclinada hacia delante "/", también llamada slash , más el nombre del archivo completo con su extensión. Este tipo de URL que incluye el dominio (más la estructura de carpetas y/o archivo, si procede) es una "ruta absoluta".

Enlaces con rutas relativas

Pero si yo quiero enlazar este archivo desde otra página dentro del dominio de campusMVP, me bastaría con poner esto (y funcionaría igual):

<a href="/directorio1/directorio2/pagina.html">Ir a mi archivo</a>

Si estoy en otro documento HTML del mismo directorio también lo podría hacer así:

<a href="./pagina.html">Ir al post de los enlaces</a>

O así:

<a href="../directorio2/pagina.html">Ir a mi archivo</a>

Los tres casos son ejemplos de rutas relativas, esto es, relativas a la página en la que estoy ahora mismo, y tienen la ventaja de que son independientes del dominio. Si el día de mañana le cambias el dominio a tu página web, seguirán funcionando igual de bien.

  1. En el primer caso, la dirección empieza por un slash "/". Esto significa que empezará a buscar la ruta a partir de la raíz del dominio.
  2. En el segundo caso empieza por "./". Esto significa que empezará a buscar la ruta a partir del nivel de la carpeta actual.
  3. Y en el tercero, empieza por "../". Esto significa que empezará a buscar la ruta a partir del nivel inmediatamente superior al de la carpeta actual. Podrías anidar varios "../" para subir varios niveles, pero no te recomiendo usar más de dos o tres.

El atributo name y los enlaces dentro de la misma página

El atributo name sirve para crear enlaces vacíos que indicarán puntos concretos de la página. Estos se podrán visitar al hacer clic en otros enlaces dentro de la misma. Por ejemplo, el típico enlace de "Volver al principio" que se pone al final de una página y que, al hacer clic, el navegador hace scroll hacia el principio. Otro uso muy habitual es en índices o tablas de contenidos en páginas muy largas.

Por ejemplo. Al principio de tu página pones esto:

<a name="principio"></a>

Y al final un enlace que apunte a ahí. Se hace con el símbolo "almohadilla" seguido del valor de name

<a href="#principio">Ir al principio de la página</a>

También lo podríamos hacer usando el id de cualquier elemento. ¿No te lo crees? Haz clic en este enlace.

Te ha llevado al primer párrafo del post, ¿verdad?. Eso es porque el enlace apunta al atributo id que le he puesto al primer párrafo del post a propósito para que pudieras ver este ejemplo.

De hecho, aunque esta técnica con name se usa mucho, en la recomendación de HTML5 se considera obsoleto usar el atributo name en los elementos <a> y se desaconseja su uso en favor de la técnica de usar el id:

<a id="principio"></a>

Y el enlace para ir a allí quedaría exactamente igual:

<a href="#principio">Ir al principio de la página</a>

Otros atributos interesantes

Aparte de los dos atributos mencionados, hay más atributos que puedes usar en los enlaces:

De tipo de contenido: type

Estos son solo algunos ejemplos

  • text/html : documentos HTML
  • image/jpg: imágenes JPG
  • text/css: hojas de estilo CSS
  • application/rss+xml: archivos XML para feeds RSS

De relación: rel y rev

Indica relaciones entre documentos, rel indica la relación entre la página que enlaza y la enlazada y rev indica la relación inversa.

  • alternate: indica que es una versión alternativa al documento actual (en otro idioma, una versión para imprimir)
  • stylesheet: indica que el archivo enlazado es una hoja de estilos
  • start: informa que el documento enlazado es el primero de un conjunto o secuencia
  • next: el documento enlazado es la continuación del actual dentro de una secuencia lógica (un post de un blog o un libro)
  • prev: el documento enlazado es el anterior del actual dentro de una secuencia lógica (un post de un blog o un libro)
  • bookmark: indica que el enlace es un "marcador" o "favorito", esto significa que es importante.
  • contents: el elemento enlazado contiene una tabla de contenidos
  • nofollow: indica a los spiders de los buscadores, que no sigan ese link
  • noindex: indica a los spiders de los buscadores, que no muestren ese link en los resultados de búsqueda
  • external: indica que la página enlazada pertenece a un sitio web externo

¿A dónde apuntamos?: target

El atributo target se utiliza para especificar dónde vamos a abrir el URL enlazado. Parte del ámbito en el que estamos (una ventana, un marco) y, en función de este, se designa dónde abrimos el recurso. El valor de target puede ser el  nombre de un <iframe> o de un <frame> (aunque está obsoleto en HTML5 y se desaconseja su uso) o alguno de los siguientes valores:

  • _self: carga el recurso en el mismo contexto en el que estamos, ya sea una ventana o un iframe.
  • _blank: el atributo más utilizado. Sirve para abrir el recurso en una pestaña nueva. Cuando los navegadores no disponían de pestañas, se abría en una ventana nueva, aunque los navegadores modernos se pueden configurar por parte del usuario para que se abra en una ventana nueva en lugar de en una pestaña.
  • _parent: se abre en la página "madre" desde la que se ha abierto la actual o que contiene a esta (normalmente es un frameset). Si no existe un elemento "padre", se comporta como _self.
  • _top: se abre en el contexto de navegación más alto, que suele ser un ancestro y que no tiene padre. Si no hay un elemento que sea padre del contexto actual, entonces funciona como _self.

Lenguaje de la página de destino: hreflang

Indica, con su correspondiente código ISO, el idioma de la página enlazada. Es especialmente útil para sitios web multiidioma usándola conjuntamente con rel="alternate" para que los buscadores (o sea, Google) no se hagan un lío con las diferentes versiones e idiomas.

Estos son solo unos pocos atributos, pero hay más. Si te pica la curiosidad, puedes seguir indagando en la página del W3C o en la de recursos para desarrolladores de la Fundación Mozilla.

Y si estas aprendiendo HTML, o simplemente quieres asentar mejor tus conocimientos, échale un vistazo nuestro curso de HTML y CSS. Aprenderás de una forma mucho más estructurada y ordenada que si vas por libre, y en poco tiempo verás grandes progresos en tu dominio de la maquetación web.

Pablo Iglesias Pablo Iglesias es diseñador Web. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (40) -

Santiago Robinet
Santiago Robinet

Buenas, tengo un problema. Estoy tratando de escribir el enlace en HTML en notepad++.
Cuando lo escribo : <a href:"https://www.google.com/";>GOoglE</a> , despues lo abro en el chrome para probar que funcione y me encuentro con que me aparece la palabra GOoglE pero no esta ni azul, ni subrayada, ni le puedo hacer click.
Hace 2 dias que estoy intentando crear enlaces, visito foros y busco videos en YouTube y todos los hacen igual, pero a mi no me funciona de ninguna de las formas que lo intento :(
Si alguien me puede dar una mano, lo agradeceria muchisimo.


Responder

Hola Santiago:

Los atributos HTML se ponen con el símbolo &quot;=&quot; no con dos puntos y no necesitas el &quot;;&quot; del final Pon:

<a href="https://www.google.com";>Google</a>

y ya está.

Saludos

Responder

se puede hacer que con 1 enlace se abran dos ficheros de texto? si se puede, por favor me pueden decir como?

Responder

Pablo Iglesias
Pablo Iglesias

Sí, se puede hacer pero necesitar usar JavaScript, y siempre será necesario que haya al menos un clic.

Para ello puedes usar el método open(): (developer.mozilla.org/es/docs/Web/API/Window/open )

Aunque la mejor solución, en téminos de accesibilidad y usabilidad, me parece que sería un enlace para cada documento, o comprimir ambos en un solo archivo zip descargable.

Responder

Hola, trabajo en un sitio web para mi ong, y necesito poner un enlace hacia un marcador del index, es decir, que desde una pagina secundaria, se direcciones hacia el marcador contacto del index, se puede hacer???

Gracias

Responder

Pablo Iglesias
Pablo Iglesias

No entiendo bien tu pregunta ¿Quieres poner un enlace a la página de contacto? Claro que se puede mientras esa página sea una URL pública. ¿Cuál es el problema?

Si no es eso, por favor, reformula tu pregunta porque no la entiendo. :-/

Responder

ivan pulache
ivan pulache

si se puede
seria con http://tu-enlace.com/#id_div

Responder

Buenas, tengo una tabla en la que está relacionada la imagen con una url. Al pasar por la imagen se pone la mano marcando que hay enlace, pero si no hay enlace, también aparece la mano. ¿Como puedo hacer para que en cada de no existir enlace el icono del ratón no cambie? Lo uso en una página web de joomla y utilizo un componente llamado joodatabase. El código que utilizo para mostrar el enlace en la imagen es: <a href="{joodb field|weburl}" target="_blank">.
No se como evitar que se muestre la mano al pasar sobre la imagen si el campo weburl está vacío.

A ver si me puedes orientar. Gracias.

Responder

Pablo Iglesias
Pablo Iglesias

Hola Darrcan,
No controlo mucho Joomla, hace más de diez años que no lo toco, pero sospecho que, aunque ese campo "weburl" esté vacío la etiqueta <a> sigue existiendo con su atributo href, aunque sea vacío. Eso provoca que se vea "la mano del cursor".

Por cierto, que el cursor se puede cambiar también a través de CSS. Si no controlas mucho de HTML y CSS me veo en el deber de recomendarte este curso: www.campusmvp.es/.../...a-desarrolladores_185.aspx Te dará una base de HTML muy útil sea cual sea el CMS que estés usando.

Responder

Mi duda es si con html o css se puede evitar que se muestre la mano si esta el campo de la base de datos vacío el campo de URL. Porque la tabla es html y en otros lenguaje como javascript se puede decir que si no cumple un requisito, haga otra cosa. Pero no tengo muy claro si con html o con el css como comentas se puede llegar a hacer.
Gracias por contestar. Solo busco algo de orientación para solucionarlo. Me gusta intentar averiguar todo lo que puedo por mi parte pero a veces ando perdido.
Gracias de nuevo.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Con CSS puedes cambiar casi cualquier cosa.

En concreto, para cambiar el cursor hay una propiedad del mismo nombre, cursor, y para que sea el "normal" solo tienes que aplicar esta propiedad usando el selector CSS adecuado al elemento que quieres modificar:

cursor:default;

y listo.

Más información:  developer.mozilla.org/en-US/docs/Web/CSS/cursor

Saludos.

Responder

hola quiero saber si se puede desde un enlace se habran 2 frame

Responder

Hola! soy un estudiante de mecátronica y estoy desarrollando una página para un control domótico, mi duda es: ¿se puede programar algun enlace que nos permita conectar nuestra pagina con una aplicación previamente instalada en nuestro smartphone?

Responder

Hola , una consulta . en caso de que tenga un enlace con una dirección a :  "mipagina"  y  "mipagina" ya  se encuentra cargada en otra ventana  del navegador . ¿existe una opción de que envés de abrir nuevamente "mipagina" en una ventana nueva . esta se posicione en la que ya se encuentre abierta ?

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Sí, basta que el enlace tenga el mismo valor para el atributo "target" para que se abra siempre en la misma ventana. Es decir, si por ejemplo en tu código HTML metes el enlace con target="miVentana", cada vez que lo pulses se abrirá en la misma pestaña, que tendrá asignado ese nombre.

Saludos.

Responder

Hola, intento hacer un proyecto personal, mientras estoy en un curso de diseño web, soy algo nuevo.
En la pagina tengo un "div" y dentro de el hay varios "articles", cabe destacar que hay una imagen y un pequeño texto en cada "article" al final de este texto aparece un enlace que dice: " ¡¡¡ compra aqui uno!!!".
Pero quiero que se pueda acceder al enlace haciendo clic en todo el "article" ¿que tengo que hacer para que se pueda acceder a la pagina dando clic en cualquier parte de el "article"?

Responder

Neyser Slee
Neyser Slee

Hola, una pregunta, como puedo hacer que una ventana de google o pestaña, aparezca en mi pagina web, al momento que le doy un clic al botón de facebook, sin necesidad de que me abra una nueva pestaña arriba por default, solo quiero que aparezca como una ventana modal (pero que sea una pestaña de google) en medio de mi pagina web. Gracias, Saludos.

Responder

Hola Pablo. Muy buena tu enseñanza !!  en HTML quisiera mostrar otro nombre de destino al posarse sobre un botón. ¿Se puede hacer con una simple línea o instrucción ?

Responder

Pablo Iglesias
Pablo Iglesias

Hola Fede,
No entiendo muy bien qué es exactamente lo que quieres, porque se pueden cambiar muchas cosas.
Al pasar el ratón por encima de un enlace puedes cambiar su apariencia con CSS usando el pseudo-elemento ":hover" (es muy sencillo, búscalo). A través de técnicas no muy ortodoxas se podría llegar a cambiar el texto del enlace o, más bien, que parezaca que se ha cambiado.
Si lo que quieres cambiar directamente el texto del enlace (el anchor text) o la URL que se muestra en la barra de estado, ya necesitarás JavaScript y dependiendo del caso es un poquito más complejo.

Responder

Buenos días,

tengo una pregunta, de la cual estoy prácticamente seguro la respuesta, pero necesito confirmación.

Desde un navegador, poniéndome encima de un enlace y con el botón derecho y seleccionando la opción "Copiar la ruta del enlace", el valor que recoge es es del href.

¿Estoy en lo cierto?

Saludos

Responder

Hola Carlos:

Sí, ese es el valor que copias.

Saludos.

Responder

El artículo es muy bueno, pero fue publicado en Diciembre de 2017 y a la fecha amerita una revisión o actualización; por ejemplo, así mirando ligeramente, el atributo 'name' es totalmente obsoleto su uso en HTML5, se usó únicamente para HTML4, actualmente se utiliza el atributo global id en su lugar.

Responder

Pablo Iglesias
Pablo Iglesias

Hola.
Muchas gracias por tu aporte, pero quizá lo has leído demasiado "ligeramente".  ;-)
Eso que comentas ya se indica en el post desde el momento en que se publicó. Concretamente donde digo esto: "De hecho, aunque esta técnica con name se usa mucho, en la recomendación de HTML5 se considera obsoleto usar el atributo name en los elementos <a> y se desaconseja su uso en favor de la técnica de usar el id"
Saludos

Responder

Cecilio Páez Acero
Cecilio Páez Acero

hola a todos estoy necesitando direccionar una ruta en HTML en el link del head de esta manera <link href='<?PHP echo $_SESSION['ruta$nom_proyec']; ?>bootstrap-3.3.7/dist/css/hola.php' rel='stylesheet' type='text/css'>
pero no encuentra la ruta. Si imprimo echo $_SESSION['ruta$nom_proyec']; me da la ruta que es pero esta ruta no continúa con bootstrap-3.3.7/dist/css/ osea no concatena el session  con la ruta. Lo siento no se si me doy a entender esto. Necesito ayuda y de antemano y gracias.

Responder

Como puedo hacer para que un texto dentro del campo de un formulario complemente un link preestablecido, y al dar click en "Ir" en el "submit" vaya al destino del link completo?

Es decir

Tengo una base de datos (muy extensa) con una serie de paginas hechas automáticamente de las cuales conozco plenamente la mitad del link, todas las url's terminan con cinco dígitos, que necesito que el usuario ingrese para poder acceder al link

lo que no quiero es tener que hacerle links a cada pagina de manera manual, ya que son demasiados (99999 para ser exactos) y no se cuales ni en que momento se van a usar.

Algo mas o menos así

<FORM NAME="FORMULARIO" METHOD="POST"
ACTION="http://miserver.midominio.mipais/number00000<;!-- aqui tendria que ir el contenido del campo1 -->
">INGRESAR CODIGO
<INPUT NAME="campo1">
<INPUT TYPE="submit" INPUT SIZE=5 MAXLENGTH=5
VALUE="acceder"></FORM>

Responder

Pablo Iglesias
Pablo Iglesias

Hola Kewois,
La verdad es que la pregunta es un poco extraña dado que este es un post simplemente sobre enlaces en HTML.
Supongo que podrías hacerlo con JavaScript o, dependiendo del lenguaje de backend que estés usando, en el "action" apuntas a un archivo donde concatenes  los datos de la BBDD con los datos del formulario y redirijas al navegador a esa URL.
Ahora bien, si estás usando eso para proteger cualquier tipo de contenido no parece buena idea esa solución, ya que cualquier usuario puede ir probando aleatoriamente distintas combinaciones de números.
Aprovecho el comentario para recomendarte estos cursos por si estás comenzando en desarrollo web, probablemente te vengan bien:
- HTML y CSS para desarrolladores (www.campusmvp.es/.../...a-desarrolladores_185.aspx)
- Interfaces Responsive (www.campusmvp.es/.../...-Grid-y-Bootstrap_212.aspx)
- Fundamentos de JavaScript (www.campusmvp.es/.../...vaScript-y-jQuery_207.aspx)

Saludos

Responder

hola soy nuevo aprendiendo programacion web, tengo varias dudas. las comillas que va en la url y luego en el texto del vinculo y los espacio entre cada palabra apertura o cierre de <> son obligatorios ?
pongo un ejemplo <a href="https://www.campusmvp.es/recursos/"; title="Al blog de recursos de campusMVP">Ir al blog de campusMVP</a> ahi todo esta con comillas pero es lo mismo si se las saco o al escribir esto me olvido de ponerlas ? modifica en algo ? y luego fijate que esta todo junto pero ahora lo pondre separado una cosa de otra es lo mismo o modifica en algo a la hora de programar ?
<a href = " https://www.campusmvp.es/recursos/"; title =" Al blog de recursos de campusMVP " > Ir al blog de campusMVP </a>
el signo = esta separado de href y de las comillas y luego de campusmvp las comillas de cierre tambien estan separadas como tambiem lo esta esto >
agrego una duda mas yo coloque este codigo en un blog de notas y le hice algunas modificaciones para ir probando y practicando
tu has agregado al terminar el url / es lo mismo si le agrego > ?
lo de tiitle hasta campusMVP''> se consideraria parte de la url no ? por que he probado sacarle > y ponerselo en recursos antes de las  ''  y la pantalla del navegador me queda en blanco

Responder

Pablo Iglesias
Pablo Iglesias

Hola Gonzalo:

La URL de destino es solo lo que está en el atributo href="" dentro de las comillas. Lo del title="" es una atributo que aporta información extra sobre el destino del enlace y que se muestra al pasarle el ratón por encima del enlace.

Las comillas no son obligatorias pero sí muy recomedables y una buena práctica para evitar errores indeseados y que el código sea más fácil de leer. Lo mismo te digo de los espacios entre el nombre del atributo, el "=" y el valor de éste.

De todas formas, tómatelo como si fuese obligatorio: hazlo sin espacios y con comillas. Y si tienes dudas de si tu HTML es correcto, compruébalo en el validador del W3C: https://validator.w3.org/

En cuanto al slash final "/" en una URL, como norma general suele indicar que se debe cargar el archivo HTML por defecto dentro de ese directorio. El nombre del archivo que se carga por defecto se suele definir en la configuración del servidor, aunque lo más normal es que su nombre sea "index.htm" o "default.htm".

Ya que estás empezando, te recomendaría que te hagas este curso: www.campusmvp.es/.../...a-desarrolladores_185.aspx Te ahorrarás muchos quebraderos de cabeza y se te aclararán muchos conceptos básicos.

Responder

hola una consulta estoy viendo el tema: Enlaza hacia secciones internas de una página con los elementos anchor,lo estoy haciendo en freecodecamp la cuestion es que dos de las tareas que me rechaza o estan mal son estas; La etiqueta a debe tener un atributo href establecido como "#footer".
La etiqueta footer debe tener un atributo id establecido como "footer". y mi codigo hasta el momento es este:

<h2>CatPhotoApp</h2>
<main>

  <a>#footer= "https://www.freecatphotoapp.com";>jump to bottom</a>

  <img src="cdn.freecodecamp.org/.../relaxing-cat.jpg"; alt="A cute orange cat lying on its back.">

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>

</main>

id footer <footer>Copyright Cat Photo App</footer>
no entiendo que es lo que hice mal

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

¿En Freecodecamp no contestan a las dudas? En CampusMVP sí, y lo hace la misma persona experta que ha creado el curso 😉

Respecto a lo que preguntas, tú mismo te contestas en el enunciado cuando dices "La etiqueta a debe tener un atributo href establecido como &quot;#footer&quot;."

Tú has puesto:

<a>#footer= "https://www.freecatphotoapp.com";;>jump to bottom</a>

pero ahí no hay ningún atributo href además de que has cerrado la etiqueta "a".

Lo que tienes que poner es simplemente:

<a href="#footer">jump to bottom</a>

y luego deberías tener en algún lado de la página (supongo que en la parte de abajo por el texto que le has puesto) algún elemento (normalmente una cabecera) con un id="footer" que es a donde apunta el enlace.

Es decir, los "anchor" funcionan porque hay un elemento identificado con un determinado nombre y un enlace que apunta a ellos mediante dicho identificador (que se denota con el # delante). Lo tienes explicado en este artículo de Pablo en el apartado "El atributo name y los enlaces dentro de la misma página". Léelo con calma y verás que no tiene dificultad alguna.

Saludos.

Responder

Se puede poner un link en un ícono? Estoy intentando poner una flecha para que suba al inicio de la página y no funciona.

<div class="icono_volver">
        <a href="#index.html"></a><i class="fas fa-circle-arrow-up"></i>
</div>

O los links solamente funcionan con imágenes? Gracias.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Tienes que envolver el icono con el enlace. Así tienes el enlace delante del icono, no envolviéndolo.

Además, la referencia está al revés: el hash va detrás de la página, no delante. Pero si lo que quieres es que vaya a la parte superior de la propia página no hace falta que le pongas el nombre, solo el hash (#). O sea:

<div class="icono_volver">
        <a href="#"><i class="fas fa-circle-arrow-up"></a></i>
</div>

Saludos.

Responder

Buenas,
Estoy indagando en Internet para solucionar una consulta, pero no encuentro una buena respuesta.
Se ve que dominas el tema. Si me la respondes, te mencionaré en mi blog y crearé un enlace a tu web.
La pregunta es la siguiente: Estoy haciendo un estudio de mercado en mi ciudad, y me encuentro que hay tiendas físicas que quieren que promocionemos algunos artículos/productos de ellos en nuestra web.
El problema es que esos negocios (tiendas físicas) tienen web, pero no tienen programa de afiliación ( ni propio ni usando otra plataforma). Entonces, ¿cómo puedo agregarle( incrustar) un 'id' (una identificación) a la url de ese artículo/producto para que cuando un cliente compre su artículo/producto a través de softemperator.com ( nuestra web) ellos sepan que el cliente a llegado y comprado en su web a través de nuestra web?

Responder

Pablo Iglesias
Pablo Iglesias

Hola Raúl, para poder llevar a cabo eso necesitas que la tienda quiera saber que se lo has vendido tú. Esto es, implementar un sistema de afiliados o algún sistema de analítica que lo registre y después que estén pendientes de revisarlo.

Y aún así muchas veces se pierden registros de conversiones, incluso en plataformas que son empresas nativas de internet en las que ese es su negocio principal.

Responder

Hola! Gracias por la información, te comento que yo ya cree mi enlace, ahora, la duda que se me planteo fue, si a ese enlace se lo puede ubicar ya sea al margen derecho o al margen izquierdo sin tener que usar hojas de estilo css. Por favor, si puedes ayudarme te lo agradecería.

Responder

campusMVP.es
campusMVP.es

Hola:

Estilos tienes que utilizar sea a través de una hoja de estilos .css, de una etiqueta <style> o directamente con el atributo style del elemento que contiene a tu enlace. En este último caso, si tienes el enlace dentro de un elemento de bloque como puede ser un <div> y es lo único que hay, puedes alinearlo a la izquierda o a la derecha poniendo la propiedad `text-align:left` o `text-align:right` (o mejor aún, con los valores `start` o `end` para tener en cuenta los idiomas que se escriben de derecha a izquierda), y listo. O sea:

<div style="text-align:start">
    <a href="xxxx">Mi enlace a la izquierda</a>
</div>

Para casos más complejos no hay una respuesta directa, pues existen infinidad de maneras de lograrlo dependiendo del caso.

Te recomendamos que si quieres aprender en serio HTML y CSS, le eches un vistazo a nuestra formación al respecto que es específica para desarrolladores, no para diseñadores com la mayoría: www.campusmvp.es/.../...a-desarrolladores_185.aspx

Saludos.

Responder

Tengo una duda, tengo diferentes links que cambian a diario ya que en el link va incluido el nombre del mes y el numero del día por ejemplo: "https://sp2019.sitio.net/maquina1/febrero 20/3er. Turno"

¿Cómo podría hacer para generar el link utilizando una función que devuelva el nombre del mes, el día y unirlo al link?

"https://sp2019.sitio.net/maquina1/"; + NombredelMes + " " + NumeroDia

Agradecería mucho la información.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Carlos:

Para eso tienes que utilizar código que genere esos enlaces. Puedes hacerlo en el servidor (con PHP, .NET, node.js... lo que sea que utilices en el servidor) y que ya vayan los enlaces directos en la página, o bien puedes hacerlo en el navegador cuando cargue la página con JavaScript. En ambos casos es muy sencillo, pero tienes que saber programar un poco.

Con JavaScript tendrías que localizar los enlaces en cuestión y añadirle esos parámetros:

[code]
function generarLink(fecha) {
    // Uso la fecha actual si no se proporciona una
    fecha = fecha || new Date();

    // Array de nombres de meses en español
    const meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio",
                   "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
    
    // Obtenemos el nombre del mes y el día
    let nombreMes = meses[fecha.getMonth()]; // getMonth() devuelve un índice basado en 0
    let dia = fecha.getDate(); // getDate() devuelve el día del mes
    
    // Construimos la parte final de los enlaces
    return `${nombreMes} ${dia}/3er. Turno`;
}

//Ahora localizas los enlaces y los cambias
//(aquí localizo todos, pero tendrías que restringirlos a los que te interesen)
var enlaces = document.querySelectorAll('a');
enlaces.forEach(enlace => {
        enlace.href += generarLink();
};
[/code]

Con esto tienes una idea de cómo hacerlo pero, como digo, necesitas saber programar un poco. Si quieres aprender bien a programar, ya sabes: https://www.campusmvp.es/catalogo/ 😉

Responder

Sé un poco de programación, pero estoy un poco oxidado en java, lo intentaré con las funciones que me mandas, muchas gracias por la información.

Responder

José Manuel Alarcón
José Manuel Alarcón

JavaScript 😉

www.campusmvp.es/.../...vaScript-son-lo-mismo.aspx

Saludos y suerte.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.