4.4 Enlaces básicos

Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés «anchor», literalmente traducido como «ancla»). A continuación se muestra la definición simplificada de <a> y más adelante se muestra su definición completa:

Etiqueta<a>
Atributos comunesbásicos, internacionalización, eventos y foco
Atributos propiosname = "texto" – Permite nombrar al enlace para que se pueda acceder desde otros enlaceshref = "url" – Indica la URL del recurso que se quiere enlazar
Tipo de elementoEn línea
DescripciónSe emplea para enlazar todo tipo de recursos

El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.

Con la definición anterior, para crear un enlace que apunte a la página principal de Google solamente habría que incluir lo siguiente en un documento HTML:

<a href="http://www.google.com">Página principal de Google</a>

Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen, que se mostrará en el navegador cuando el usuario pinche sobre el enlace:

<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondo de escritorio</a>

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.

<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a>

Un truco muy útil con los enlaces es el uso de URL relativas para poder volver al inicio del sitio web desde cualquier página web interior:

<a href="/">Volver al inicio</a>

El enlace anterior utiliza una URL relativa con una ruta que apunta directamente a la raíz del servidor. Para obtener la URL absoluta, el navegador añade el mismo protocolo y el mismo nombre de servidor de la página en la que se encuentra el enlace. El resultado es que cuando se pincha ese enlace, siempre se vuelve al inicio del sitio web, independientemende de la página en la que se incluya el enlace.

El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo «Saltar hasta la segunda sección«, «Volver al principio de la página«, etc.

Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.

<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>

...

<a name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p>

...

El atributo name permite crear «enlaces vacíos» que hacen referencia a secciones dentro de una misma página. Una vez definidos los «enlaces vacíos», es posible crear un enlace que apunte directamente a una sección concreta de una página:

<!-- Enlace normal a la página -->
<a href="http://www.ejemplo.com/pagina1.html">Enlace a la página 1</a>

<!-- Enlace directo a la segunda sección de la página -->
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a la sección 2 de la página 1</a>

La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el símbolo # seguido del nombre de la sección a la que se apunta. Cuando el usuario pincha sobre uno de estos enlaces, el navegador accede a la página apuntada por la URL y baja directamente a la sección cuyo nombre se indica después del símbolo #.

También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El siguiente ejemplo añade enlaces de tipo «Volver al inicio de la página» en varias secciones:

<a name="inicio"></a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

Los enlaces directos a secciones también funcionan con el atributo id de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:

<h1 id="inicio">Título de la página</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

El nombre de la sección que se indica después del símbolo # puede utilizar el valor de los atributos id de cualquier elemento. De hecho, se recomienda utilizar los atributos id de los elementos ya existentes en la página en vez de crear «enlaces vacíos» de tipo <a name="nombre_seccion"></a>.

Ejercicio

Descubrir el siguiente código:

Página principal del sitio web de ejemplo

Respuesta

<!DOCTYPE html>
    <head>
        <title>Mi Sitio</title>
    </head>
    
    <body>
    
      <h1>Título principal del Sitio</h1>
    
         <p>Este es un párrafo introductorio</p>
    
      <h2>Título secundario</h2>
    
         <p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
    
         <p>
             <a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
             Accede al blog para ver los últimos posteos.
             </a>
         </p>
    
    
    </body>
    
</html>

Ahora, cómo ejercicio complementario hacer lo mismo, pero con tres párrafos.

Ejemplo de ejercicio complementario

Resultado:

<!DOCTYPE html>
    <head>
        <title>Mi Sitio</title>
    </head>
    
    <body>
    
      <h1>Título principal del Sitio</h1>
    
         <p>Este es un párrafo introductorio</p>
    
      <h2>Título secundario</h2>
    
         <p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
    
         <p>
             <a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
             Accede al blog para ver los últimos posteos.
             </a>
         </p>

         <h2>Título secundario</h2>
    
         <p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
    
         <p>
             <a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
             Accede al blog para ver los últimos posteos.
             </a>
         </p>
         
         <h2>Título secundario</h2>
    
         <p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
    
         <p>
             <a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
             Accede al blog para ver los últimos posteos.
             </a>
         </p>
    
    
    </body>
    
</html>

Estructura de archivos y directorios de un sitio web

Ahora que sabemos crear

A partir de la estructura de directorios y archivos indicada en la siguiente imagen:

Ejercicio Complejo

1. Crear la siguiente página llamada indice.html que sirva como página principal del sitio:

Este es el código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título del sitio</title>
</head>
<body>
    

<h1>Título principal</h1>

<p>Párrafo de introducción</p>

<h2>Título secundario</h2>

<p>Párrafo secundario</p>

<p><a href="proyectos/indice1.html" title="Ultimos proyectos del sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p>


    
</body>
</html>

2. Crear la página índice1.html del directorio de proyectos:

Este debería ser el resultado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título del sitio</title>
</head>
<body>

    <p><a href="../indice.html" title="Página principal">Volver al home de la pagina principal</a></p>
    
    <h1>Ultimos proyectos</h1>
    
    <p>Párrafo introductorio.</p>
    
    <h2>Proyecto 1</h2>
    
    <p>Párrafo del proyecto 1.</p>
    
    <p><a href="../imagenes/proyecto1.jpg" title="Imagen del Proyecto 1">Ver imagen del Proyecto 1</a></p>
    
    <h2>Proyecto 2</h2>
    
    <p>Párrafo del proyecto 2.</p>
    
    <p><a href="../imagenes/proyecto2.jpg" title="Imagen del Proyecto 2">Ver imagen del Proyecto 2</a></p>
    
    </body>
</html>
error: Content is protected !!
Ir arriba