Vínculos en HTML

Práctica

Esta pŕactica estará dividida en dos partes, ambas aplicadas al documentos obtenido en la práctica del tutorial anterior, "Agrupación y estructura del contenido". La primera parte consistirá en la inserción de un par de vínculos en la sección de encabezado del documento, para proveer información relacional. En la segunda parte convertiremos los ítems de la tabla de contenidos en vínculos, apuntando cada uno a su correspondiente sección.

Entonces, nuestro primer paso en este proceso consiste en la adición de un elemento link con información de contacto acerca del autor del documento (más precisamente una dirección de e-mail). Para este propósito, utilizaremos el atributo rel con el valor "author", cuando declaremos nuestro link.

Para mayor practicidad, sólo mostraremos aquí la sección de encabezado del documento (head), pero tu deberías tener el resto en tu archivo.

<head>
  <title>Este soy yo, aprendiendo HTML por mi cuenta</title>
  <link rel="author" href="mailto:jhon@supersitiowebsuperincreible.com">
</head>

Ahora podemos ir al cuerpo (body) y convertir esos items de la tabla de contenidos en vínculos. La idea aquí es envolver el texto dentro de cada elemento li con un elemento a. Al principio no agregaremos un vínculo per se, sino solamente el elemento a (sin atributos).

<body>
  <header>
    <h1>Tabla de contenidos</h1>
    <ol>
      <li><a>Me decidí</a></li>
      <li><a>Agarrándole la mano</a></li>
    </ol>
  </header>
  <main>
    <section>
      <h1>Me decidí</h1>
      <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
    </section>
    <section>
      <h1>Agarrándole la mano</h1>
      <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
    </section>
  </main>
</body>

Tabla de contenidos

  1. Me decidí
  2. Agarrándole la mano

Me decidí

Hoy desperté decidido a aprender HTML por mi cuenta.

Agarrándole la mano

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Pero para hacer un vínculo a un fragmento de un documento, hay algo importante que necesitamos y nuestro documento no lo tiene. Esto es el atributo id en el elemento al que queremos enlazar. En este caso, y porque tiene sentido, agregaremos un atributo id a cada una de las dos secciones que componen el contenido principal de este documento.

<body>
  <header>
    <h1>Tabla de contenidos</h1>
    <ol>
      <li><a>Me decidí</a></li>
      <li><a>Agarrándole la mano</a></li>
    </ol>
  </header>
  <main>
    <section id="introduccion">
      <h1>Me decidí</h1>
      <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
    </section>
    <section id="superando-obstaculos">
      <h1>Agarrándole la mano</h1>
      <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
    </section>
  </main>
</body>

Habiendo hecho esto, la única cosa que falta es agregar el atributo href a ambos elementos a. La complicación aquí es determinar cómo deberá ser el URI para realmente vincular a la sección correspondiente. Bien, si recuerdas, en los vínculos a fragmentos, los URIs están compuestos por tres elementos: la dirección del recurso, un símbolo numeral ("#") y el identificador del fragmento.

En este caso, la dirección del recurso puede ser dejada en blanco ya que es el mismo documento actual. Esto nos deja con el símbolo numeral ("#") seguido del indentificador del fragmento, siendo en este ejemplo, uno de los dos atributos id de las secciones descritos anteriormente ("introduccion" y "superando-obstaculos").

<body>
  <header>
    <h1>Tabla de contenidos</h1>
    <ol>
      <li><a href="#introduccion">Me decidí</a></li>
      <li><a href="#superando-obstaculos">Agarrándole la mano</a></li>
    </ol>
  </header>
  <main>
    <section id="introduccion">
      <h1>Me decidí</h1>
      <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
    </section>
    <section id="superando-obstaculos">
      <h1>Agarrándole la mano</h1>
      <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
    </section>
  </main>
</body>

Tabla de contenidos

  1. Me decidí
  2. Agarrándole la mano

Me decidí

Hoy desperté decidido a aprender HTML por mi cuenta.

Agarrándole la mano

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Como última tarea en esta práctica, agregaremos un vínculo a HTMLQuick.com dentro del contenido. Para este propósito, agregaremos un poco más de texto al párrafo en la primera sección. Este vínculo será exactamente como los agregados a la tabla de contenidos, con la diferencia de que tendrá un URL completo en el atributo href.

<body>
  <header>
    <h1>Tabla de contenidos</h1>
    <ol>
      <li><a href="#introduccion2">Me decidí</a></li>
      <li><a href="#superando-obstaculos2">Agarrándole la mano</a></li>
    </ol>
  </header>
  <main>
    <section id="introduccion2">
      <h1>Me decidí</h1>
      <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta. Así que, abrí <a href="http://www.htmlquick.com/">HTMLQuick.com</a> en mi navegador y puse manos a la obra.</p>
    </section>
    <section id="superando-obstaculos2">
      <h1>Agarrándole la mano</h1>
      <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
    </section>
  </main>
</body>

Tabla de contenidos

  1. Me decidí
  2. Agarrándole la mano

Me decidí

Hoy desperté decidido a aprender HTML por mi cuenta. Así que, abrí HTMLQuick.com en mi navegador y puse manos a la obra.

Agarrándole la mano

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Con esta pequeña práctica, has probado las formas más habituales de construir un vínculo en HTML. De aquí en adelante, con práctica y un poco de ayuda de la referencia, deberías poder construir cualquier tipo de vínculo de acuerdo a las necesidades del proyecto. Así que juega un poco con lo aprendido y dirígite directamente al próximo tutorial. Nos vemos allí.

Próximo tutorial ›

Prev123