Vínculos, listas e imágenes de investigación

5 minutos

La palabra "hipertexto" significa que puede mostrar algo más que texto en una página web. HTML ofrece la posibilidad de crear enlaces a otros recursos y añadir imágenes a una página.

Hipervínculos

Los hipervínculos (o simplemente enlaces) permiten al usuario navegar a otras cosas. Puede ser otra página de tu sitio web, un sitio web completamente independiente o incluso una dirección de correo electrónico. Uno de los principales objetivos de HTML era permitir que estos "punteros" se agregaran a una página para facilitar el acceso. Esto se hace a través de enlaces.

La etiqueta utilizada para crear un enlace es a, que es la abreviatura de ancla. El contenido entre la etiqueta open y close a se convierte en hipertexto que permite a un usuario acceder al recurso.

El recurso al que se hace referencia se indica mediante un atributo llamado href (o referencia de hipertexto). Los atributos se agregan dentro de la etiqueta de apertura y, por lo general, son un nombre emparejado con un valor (denominados pares clave-valor) con el valor contenido entre comillas.

<a href="some url">clickable text</a>

Los pares clave-valor se utilizan en los formularios. Si llena un formulario, es posible que se le pida su nombre y apellido por separado. El formulario tiene una etiqueta Nombre y un espacio en blanco y otra etiqueta Apellido y un espacio en blanco. Las etiquetas son como claves en atributos HTML, y lo que sea que pongas en el espacio en blanco es el valor. En los atributos HTML, la clave y el valor se unen mediante un signo igual para mostrar que pertenecen juntos.

Indicadores de recursos

Hay muchos tipos de recursos a los que puede apuntar un enlace. Muchas veces los enlaces apuntan a otras páginas web o sitios web. Pero un enlace también puede apuntar a una dirección de correo electrónico, un archivo (como un documento PDF), un vídeo o una imagen.

Para crear un enlace a un sitio externo, utilice la dirección completa del sitio. Por ejemplo, para crear un vínculo al sitio de documentación de Microsoft, puede usar:

<a href="/">Microsoft Technical Documentation</a>

Es posible enlazar a una dirección de correo electrónico. Este tipo de enlace abrirá automáticamente el cliente de correo electrónico del usuario y completará el campo Para con la dirección indicada después de la mailto: directiva.

<a href="mailto:someone@example.com">Email us!</a>

Accesibilidad y enlaces

Si pones un enlace en la página HTML que estás creando, te darás cuenta de que el texto entre (no dentro) de la etiqueta de apertura y cierre se vuelve azul. También notarás que la dirección está oculta. Finalmente, observa que la palabra ahora se puede seleccionar. Es decir, selecciona la palabra que se llevará al recurso.

El texto que se muestra como enlace se conoce como texto de enlace. El uso de un buen texto de enlace es clave para garantizar que su página sea accesible para todos los usuarios. Frases como "haga clic aquí" son perjudiciales para los lectores de pantalla y otras herramientas que no son del navegador y que se utilizan para navegar por la web. Como práctica recomendada, utilice siempre un texto de enlace que describa brevemente el recurso al que se hace referencia. Para obtener más información sobre cómo garantizar la accesibilidad, explore el módulo de aprendizaje sobre accesibilidad.

Imágenes

La img etiqueta se utiliza para mostrar imágenes en una página. A diferencia de la mayoría de los otros elementos, img no tiene etiqueta de cierre. El src atributo se utiliza para señalar la ubicación de la imagen que se va a mostrar en la página y alt describe el contenido de la imagen para cosas como motores de búsqueda y lectores de pantalla.

Importante

Aunque los height atributos y width se pueden utilizar para especificar la altura y la anchura de visualización de la imagen, no cambian el tamaño del archivo de imagen en sí. La práctica recomendada es hacer que el archivo de imagen tenga las dimensiones que utilice en la página.

<img src="headshot.png" alt="Picture of an employee.">

Creación de listas

Con frecuencia necesitará mostrar una lista de información en una página. Al crear su currículum, desea enumerar los roles o calificaciones anteriores. HTML proporciona dos tipos diferentes de listas, ordenadas y desordenadas.

Para crear una lista, primero decidirá el tipo de lista que desea crear. Una lista ordenada se ordena con números (el valor predeterminado) o letras y se utiliza ol para la lista ordenada. Una lista desordenada utiliza viñetas y se identifica con ul la lista desordenada. Los elementos se indican con li para el elemento de lista.

Lista desordenada

A continuación se crea una lista desordenada:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

La lista generó:

Primer punto
Segundo punto
Tercer punto

Lista ordenada

A continuación se crea una lista ordenada:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>