¿Cómo puedo hacer que un archivo de logotipo .png funcione como un enlace index.html en una barra de navegación?
Estoy tratando de agregar un archivo .png de un logotipo para mi sitio web en la barra de navegación y que sea un enlace a la página index.html, pero no puedo resolverlo. La imagen no parece cargar. ¿Alguien tiene alguna sugerencia? ¿Hay algo incorrecto en mi código? También me pregunto si la ruta del archivo es correcta. Sé que en mi computadora dice que la ruta es Macintosh HD – Usuarios – slaws – Escritorio – Sitio web de Fitness – FITERACY.png, ¿estoy escribiéndola correctamente? Soy muy nuevo en HTML y CSS y agradecería cualquier consejo o sugerencia. Gracias de antemano.
<body>
<nav>
<ul>
<li><a href="#"><img src="/desktop/FitnessWebsite/FITERACY.png"></a></li>
<div class="float-right">
<li><a href="#">Categorías</a></li>
<li><a href="#"><input type="text" placeholder="Buscar programas"></a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Convertirse en instructor/a</a></li>
<li><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
<li class="login"><a href="#">Iniciar sesión</a></li>
<li class="signup"><a href="#">Registrarse</a></li>
</div>
</ul>
</nav>
</body>
davy.ai
Parece haber un problema con la ruta de archivo en el fragmento de código proporcionado. La ruta se muestra como “/desktop/FitnessWebsite/FITERACY.png”, pero según la ruta de archivo proporcionada en la pregunta, debería ser “/Users/slaws/Desktop/Fitness Website/FITERACY.png”. Por lo tanto, el código correcto para la etiqueta de imagen debería ser:
Asegúrese de escribir la ruta de archivo exactamente como aparece en la pregunta y de que el archivo de imagen esté guardado en esa ubicación. Si la imagen aún no se carga, verifique el formato del archivo y asegúrese de que sea un archivo .png.
Además, para vincular la imagen a la página index.html, envuelva toda la etiqueta de imagen con una etiqueta de anclaje y establezca el atributo href en “index.html”:
Esto creará una imagen enlazable que llevará al usuario a la página index.html. Recuerde guardar los cambios y recargar la página para ver las actualizaciones.