En la clase de , vamos a aprender a enlazar secciones de una misma página, es decir, crear enlaces internos. La creación y uso de dichos enlaces, se ha extendido mucho en los últimos años. Se ha convertido en una técnica imprescindible si creamos páginas muy largas, con mucho contenido. Esta técnica nos permite realizar saltos, dentro de una misma página, a diferentes lugares de la misma. En mi caso lo uso para webs sencillas de empresas donde todo el contenido está incluido en una sola página.
Uno de los ejemplos mas conocidos es la archiconocida web, que seguro has usado en alguna ocasión Wikipedia. En esta web cada articulo suele comenzar con un indice, que no es más que una lista de enlaces. Cada enlace del indice te conduce a diferentes secciones del articulo en cuestión. Al final de cada sección, también podemos encontrar un enlace que nos devuelve al inicio del articulo. La verdad es que esto es de agradecer cuando te encuentras con artículos muy largos.
Voy a recomendarte que antes de que sigas con la lectura de esta clase, le des un repaso a la clase anterior Creando enlaces en nuestra página web. Es recomendable su lectura ya que es donde hemos aprendido a crear enlaces y tiene relación directa con esta clase.
Para poder enlazar a una sección o secciones de nuestra página, debemos conocer el atributo "id". Este atributo va a otorgar un identificador al titulo de la sección que queremos enlazar. Para no cometer fallos, debéis tener muy claro que los los atributo "id" y "class" no pueden contener ningún carácter extraño y además no pueden comenzar con un numero.
Habiendo hecho una introducción algo extensa pero necesaria, vamos a los ejemplos que es como mejor se aprende. Vamos a simular que tenemos una página que contiene un articulo muy extenso. La página va a ser muy fea ya que no va a tener estilos css definidos, bueno los estilos definidos por defecto de cada navegador si.
La página va a contener un titulo <h1>, tres titulos <h2>, una lista de elementos donde cada uno va a enlazar a uno de los títulos (secciones) <h2> y un enlace situado justo al final que nos devolverá al inicio del articulo. Después del ejemplo os dejare un enlace donde podéis descargar el archivo html y visualizarlo en el navegador, ya que en el ejemplo he omitido los saltos de linea para se notaran más los desplazamientos a las diferentes secciones.
<h1 id="indice">PREGUNTAS FRECUENTES</h1> <ol> <li><a href="#cuenta-apple">Tu cuenta e ID de Apple</a></li> <li><a href="#envio-producto">Envío y entrega</a></li> <li><a href="#pago-impuestos">Pagos e IVA</a></li> </ol> <h2 id="cuenta-apple">Tu cuenta e ID de Apple</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, temporibus. Incidunt nesciunt asperiores pariatur doloremque ipsa cum totam cupiditate, atque obcaecati, libero commodi, modi maiores placeat. Illum quos voluptatibus libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae voluptas, nemo, eligendi dolor quis eos quisquam ducimus eveniet cum, magni veniam praesentium possimus cumque. Labore qui nesciunt, aliquam aliquid. </p> <h2 id="envio-producto">Envío y entrega</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, temporibus. Incidunt nesciunt asperiores pariatur doloremque ipsa cum totam cupiditate, atque obcaecati, libero commodi, modi maiores placeat. Illum quos voluptatibus libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae voluptas, nemo, eligendi dolor quis eos quisquam ducimus eveniet cum, magni veniam praesentium possimus cumque. Labore qui nesciunt, aliquam aliquid. </p> <h2 id="pago-impuestos">Pagos e IVA</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, temporibus. Incidunt nesciunt asperiores pariatur doloremque ipsa cum totam cupiditate, atque obcaecati, libero commodi, modi maiores placeat. Illum quos voluptatibus libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae voluptas, nemo, eligendi dolor quis eos quisquam ducimus eveniet cum, magni veniam praesentium possimus cumque. Labore qui nesciunt, aliquam aliquid. </p> <p><a href="#cuenta-apple">Tu cuenta e ID de Apple</a></p>
Para que el ejemplo sea más completo y como he dicho más arriba, os dejo el (Ejemplo) Enlazando a secciónes de una misma página.html, podéis descargarlo desde Google Drive, abrirlo en vuestro navegador y poder testearlo.
Conclusiones
Buenos, pues ya habéis aprendido a enlazar contenidos de una misma pagina con HTML5. Como podéis comprobar nada complicado y muy útil a la hora tanto de su uso en artículos extensos como en páginas presenciales para pequeñas empresas o comercios.
Nada más por ahora y os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.
0 Comentarios