Los enlaces son un elemento fundamental en Internet. Gracias a ellos podemos vincular unas páginas con otras y de este modo poder navegar a lo ancho y largo de la red.

En esta clase vamos a aprender tanto a crear un enlace a una página externa (se encuentra en otro servidor) como a una local (en el mismo servidor).

La buena noticia es que es súper sencillo 🙂 así que ¡vamos allá!

Clases del curso básico de HTML:

Enlace a una página externa

Vamos a hacer uso del elemento a (<a>) junto con el atributo href, y lo escribimos de esta manera:

<body>
    <p>Visita la página de este <a href="http://www.google.com" title="google">buscador tan famoso</a></p>    
</body>

En el atributo href es donde indicamos la dirección donde queremos enlazar. Es importante que no se nos olvide añadir el http:// para que dé resultado.

Además también debemos escribir el atributo title para añadirle una descripción al enlace. Éste se mostrará al pasar el ratón por encima.

curso-html-1-5

En mi caso el enlace se muestra en color morado, en lugar de azul, debido a que ya he visitado esa página previamente.

Cuando pulsemos sobre el enlace, la página se abrirá en la misma ventana donde nos encontramos. Si lo que queremos es que se abra en una pestaña nueva añadiremos el atributo target=”_blank”.

<body>
    <p>Visita la página de este <a href="http://www.google.com" target="_blank" title="google">buscador tan famoso</a></p>    
</body>

Enlace a una página local

Para poder enlazar a una página local lo primero que tenemos que hacer es crear otra página en nuestro editor de texto. En ella copiaremos la estructura que teníamos en la anterior y la guardamos como sobremi.html.

<body>
    <h1>Sobre mí</h1>
    <p>Aquí iría un texto muy interesante</p>    
</body>

En el body de esta nueva página he creado un poco de contenido, y en la otra voy a crear el enlace:

<body>
    <p><a href="sobremi.html" title="sobre mí">Lee algo sobre mí</a></p>
</body>

Como tengo guardadas ambas páginas en el mismo directorio (en este caso en el escritorio) bastará con escribir su nombre en el atributo href.

curso-html-2-5

Como nunca antes había visitado la página enlazada, mi link se muestra en color azul.

curso-html-3-5

Ahora si quisiéramos volver a la página principal, podríamos añadir un enlace en la página recién creada. Escribiríamos href=”index.html”.

Y… ¿qué ocurre si ambas páginas NO están en el mismo directorio?

Imagina que nuestra página «sobremi» en lugar de estar en el escritorio, se encuentra dentro de una carpeta con el mismo nombre.

En ese caso lo indicaríamos así:

<body>
    <p><a href="sobremi/sobremi.html" title="sobre mí">Lee algo sobre mí</a></p>
</body>

Añadiríamos delante el nombre de la carpeta y una barra (/).

En esta situación debemos tener en cuenta que ahora nuestra página principal se encuentra un directorio por encima de la página “Sobre mí”.

Para poder enlazarlas a la inversa tendríamos que escribir dos puntitos y una barra (../).

<body>
    <h1>Sobre mí</h1>
    <p>Aquí iría un texto muy interesante</p>    
    <p><a href="../index.html" title="Página principal"></a></p>
</body>

Ahora ya tendríamos nuestras dos páginas enlazadas entre sí estando en diferentes carpetas.

curso-html-4-5

Nota: si al meter la página «sobremi» en una carpeta la tenías también abierta en el editor de texto, es probable que tengas que cerrarla y volverla a abrir desde su nueva ubicación antes de enlazarla al «index».

RESUMEN

Enlace a una página local en un mismo directoriosobremi.html
Enlace a una página local en un subdirectoriosobremi/sobremi.html
Enlace a una página local en un directorio por encima../index.html

¡Espero que esta clase te haya resultado fácil!

Y recuerda, no dejes de practicar para poderlo aprender y asimilar de manera mucho más efectiva.

¡Nos vemos!

¡No te pierdas ni un solo post!

100% libre de spam