11 | Enlace ancla [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">Ancla es un enlace a cierto punto concreto de una determinada página HTML, de forma que mediante el <i>enlace ancla</i> el visitante salta directamente a ese lugar señalado de la página. En este post se explica la manera de llegar a dos secciones específicas de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><b>Enlazar vs. incrustar</b></a> anteriormente mostrada.</div>
</td></tr>
</tbody></table>

<br />
<p>Para crear un enlace es preciso distinguir entre dos conceptos y a cada cual le corresponderá un código HTML, los conceptos son:</p>

<ul>
<li>Punto de destino, su código será un identificador.</li>
<li>Punto de origen, su código HTML es la URI completa del punto de destino.</li>
</ul>

<br />
<hr style="background-color: #0056b2; height: 4px;" />
<br />

<h3>Punto de destino</h3>
<p>Supongamos que en cierto lugar de la página <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span> se desea colocar un par de anclas que serán los puntos de destino. Para ello se escribirá en cada punto de destino el siguiente código:</p>
<p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;">
&lt;div id="AnclaEnlazar"&gt; &lt;/div&gt;<br />
&lt;div id="AnclaIncrustar"&gt; &lt;/div&gt;</span></p>
<br />
<h3>Punto de origen</h3>
<p>Para referirse directamente uno de los puntos anteriormente definidos, habrá que usar la correspondiente URI completa. En el caso que nos ocupa, una de las direcciones sería: <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#</span><span style="font-family: courier;"><span style="font-family: courier;">AnclaEnlazar</span></span> donde a la referencia de la página se le ha añadido, por ejemplo, el identificador del primer punto de destino.</p><p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;">&lt;div id="AnclaEnlazar"&gt; &lt;/div&gt;</span> <br /></p>
<br />
<p>Continuando con el caso anterior, distingamos entre sí estas tres URIs:</p>

<ol>
<li>Ir al comienzo de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span></a> <br /></li>
<li>Ir a una sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar</span></a> <br /></li>
<li>Ir a otra sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar</span></a></li>
</ol>