Enlaces web - HTML5 básico - Capítulo 9


En este capítulo te voy a enseñar como funcionan los enlaces, tanto internos en tu sitio web como externos.

Los enlaces html a webs externas

Los enlaces se crean con las etiquetas <a> </a> de anchor (ancla en español). Por si solas estas etiquetas no sirven, deberás utilizar el atributo href. Aquí puedes ver un ejemplo:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilizando el texto con html.</title>
</head>
<body>

    <a href="https:www.google.com">Haz click aquí para ir a Google.</a>

</body>
</html>

En esta etiqueta a, tienes el enlace href que entre comillas lleva el protocolo (no le des mucha importancia aún) y la dirección web, www.google.com en este caso. Lo que hay entre las etiquetas de apertura y cierre es el texto que quieras que vea el usuario.

Resultado en el navegador

Enlace html

Lo que aparece es un texto subrayado y en color azul si no ha sido clickeado y en color lila si ya has visitado el enlace (esto es para la mayoría de navegadores).

Los enlaces html internos

Nos quedan por ver los enlaces internos, los cuales funcionan practicamente igual. Aquí tienes el ejemplo que se ve en el vídeo de este capítulo:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Enlaces html</title>
</head>
<body>

    <p>Aquí tienes una lista de las páginas de mi web:</p>
    <ul>
        <li><a href="pagina-1.html">Página 1.</a></li>
        <li><a href="pagina-2.html">Página 2.</a></li>
        <li><a href="pagina-3.html">Página 3.</a></li>
        <li><a href="#">Página 4 - disponible muy pronto.</a></li>
    </ul>

</body>
</html>

Resultado en el navegador

Enlaces internos html

En este ejemplo tenemos 3 enlaces que apuntan a nuestra propia página, fíjate que en este cao no llevan ningún protocolo como https o http y que la terminación es un archivo .html y además tenemos un cuarto enlace con una almohadilla. Esta almohadilla se especifica cuando queremos crear un enlace pero todavía no tenemos creada esa página o no hemos decidido cual va a ser. De este modo, tendremos un enlace que no va a ninguna parte hasta que decidamos a donde queremos que vaya.

Te recomiendo que veas el vídeo para que te hagas una mejor idea sobre su funcionamiento. Esto aún es muy básico, veremos más sobre este tema en el curso de html avanzado.


Ejercicios de html

18- Crea un enlace que lleve a wikipedia.org y otro que te lleve a la página principal de este sitio web.

19- Crea tres enlaces internos a otras dos páginas que crees (pueden estar vacías) y el tercero que no enlace a ningún sitio.

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.