Listas y enlaces.
Índice:
Listas.
Una lista es un elemento que permite organizar información en forma de elementos relacionados.
Existen tres tipos de listas:
- Listas ordenadas.
- Listas no ordenadas.
- Listas de definición.
Listas ordenadas.
Son listas en las que los elementos llevan cierto orden numérico. La sintaxis es simple:
<ol> <li>[Elemento de la lista]</li> <li>[Elemento de la lista]</li> <li>[Elemento de la lista]</li> </ol>
Se verá así:
- [Elemento de la lista]
- [Elemento de la lista]
- [Elemento de la lista]
Listas no ordenadas.
Los elementos se enlistan sin orden de importancia.
<ul> <li>[Elemento de la lista]</li> <li>[Elemento de la lista]</li> <li>[Elemento de la lista]</li> </ul>
Se verá así:
- [Elemento de la lista]
- [Elemento de la lista]
- [Elemento de la lista]
Listas de definición.
Lista que se compone de pares concepto-descripción. Se especificarán diferentes términos con su nombre y se escribirá la definición para cada uno.
Por ejemplo:
<dl> <dt>Gato</dt> <dd>Animal de cuatro patas que maulla.</dd> <dt>Perro</dt> <dd>Animal de cuatro patas que ladra.</dd> </dl>
Se verá así:
- Gato
- Animal de cuatro patas que maulla.
- Perro
- Animal de cuatro patas que ladra.
Enlaces.
Un enlace es un elemento que permite que el usuario navegue entre secciones de la página que se encuentra, otras páginas dentro del sitio e incluso páginas externas al sitio web.
Para crear un enlace (también llamado vínculo o link), usamos la etiqueta <a>
La etiqueta 'a'
Hablemos de la etiqueta a
. Se utiliza de la siguiente manera:
<a href="[enlace]">Texto</a>
href es la dirección hacia la cual estamos enlazando. Esta dirección puede ser una sección, una página dentro del mismo sitio, o una página externa.
Enlace a una sección.
Una sección en una página web estará definida por atributo llamado id. Al momento que creamos un encabezado, por ejemplo, le agregamos el atributo id
.
Por ejemplo:
<h4 id="Prueba">Esta es una prueba</h4>
El resultado es el siguiente:
Esta es una prueba
Para poder enlazar con esta sección podemos usar la etiqueta a
de la siguiente manera:
<a href="#Prueba">Enlazando con la sección "prueba"</a>
Lo cual queda de esta manera:
Enlace a otra página dentro de la misma web (Enlace relativo).
Dependiendo del hosting, se puede enlazar a un archivo que se encuentre en el mismo directorio en el que almacenas tu página web simplemente usando el nombre de la página que quieras cargar (el nombre del archivo html).
En ocasiones tendrás que indicarle el directorio "." para hacerle saber que la página se encuentra en el mismo directorio de la página en la que te encuentras en este momento.
Para enviar al índice puede hacerse de las siguientes formas:
<a href="index.html">Volver al índice</a> -- En la mayoría de los casos funciona. <a href="/index.html">Volver al índice</a> -- Úsese solo cuando tenemos la certeza que el archivo se encuentra en la mera raíz de la página. <a href="./index.html">Volver al índice</a> -- Esta también es una manera razonable. Garantizamos que busque dentro de la misma carpeta.
Enlace a otra página (Enlace absoluto).
Si requerimos enlazar a una página externa, primeramente necesitamos la dirección web completa de la página. En el caso de Youtube (por poner un ejemplo), la dirección es: https://youtube.com
El enlace quedaría:
<a href="https://youtube.com">YouTube</a>
Lo que nos da como resultado: