Listas y enlaces

Objetivos

• Organizar varios elementos en una lista desordenada.
• Organizar varios elementos en una lista ordenada.
• Distinguir listas ordenadas y desordenadas.
• Describir las similitudes entre listas ordenadas y desordenadas.
• Crear un hipervínculo a una sección dentro de su documento.
• Enlace el documento al contenido externo.
• Resumir el propósito de hipervínculos (etiquetas delimitadoras).
• Crear un diagrama que representa dos documentos con hipervínculos.
• Compartir tu diagrama con este grupo de estudio.

Materiales de trabajo

Listas

Vamos a echar un vistazo a la manera de detallar las listas, enlaces a otros documentos, y insertar multimedia  en nuestras páginas.

Las listas vienen en dos tipos: Ordenadas y desordenadas. Las listas ordenadas fluye en secuencia mientras que en las listas desordenadas no se requieren el orden. Por ejemplo, una lista de la compra se puede considerar como una lista desordenada, ya que no tienen que ver con el orden en que se encuentran los artículos de la tienda.

La etiqueta <ol> es usado para crear listas ordenadas mientras que la etiqueta <ul> denota listas desordenadas.

Vamos a crear dos listas: Una lista de compras o una lista de instrucciones que describe la forma de salida en el mercado.

Lista desordenada

Primero la lista de la compra. Crear una lista desordenada dispone de tres pasos:

1. Abra la lista desordenada: <ul>.
2. Rodear los elementos de la lista con la etiqueta <li>.
3. Cerrar la lista desordenada: </ul>.

Veamos una lista desordenada en su totalidad:

<ul>
  <li>Camiseta</li>
  <li>Zapatillas</li>
  <li>Balón</li>
</ul>

Lista ordenada

Segundo, haremos una lista de los pasos que finaliza la compra.

1. Abra la lista ordenada: <ol>.
2. Inserte los pasos como elementos de lista: <li>.
3. Cerrar la lista ordenada: </ol>.

<ol>
  <li>Descargue su cesta de la compra</li>
  <li>Salude al cajero</li>
  <li>Sonríe a la linda bebé al lado de usted en línea</li>
  <li>Pague al cajero</li>
  <li>Reúna sus provisiones y salir.</li>
</ol>

Hipervínculos

Los hipervínculos son las interconexiones entre las páginas y recursos en el World Wide Web. La creación de hipervínculos se requiere otro aspecto de las etiquetas HTML llamados atributos. Los atributos son elementos de texto descriptivos dentro de las cajas de etiquetas HTML (el < y >). Los atributos están asociados con los valores. Por ejemplo:

<tag attribute="value">

La etiqueta de anclaje <a> es así como crear vínculos tanto dentro de un documento y de los recursos externos. Una etiqueta de anclaje tiene un atributo llamado 'href' que significa referencia de hipertexto.  La referencia de hipertexto es el elemento interno o externo a la que apunta el enlace. Por ejemplo:

<a href="http://p2p4-html5yuichi.blogspot.com/">Introducción de HTML5</a>

Este enlace apunta a http://p2p4-html5yuichi.blogspot.com/ con el texto de ayuda de enlace "Introducción de HTML5".

Mi ejemplo

Podéis ver mi ejemplo aquí: https://thimble.webmaker.org/p/fkwg