44.5 Enlaces, imágenes listas y tablas

Enlaces

Se colocan usando la etiqueta a (anchor ó ancla), cuyo atributo principal es href, donde se coloca la URL de la página. Otro de sus atributos es target donde se especifica si se abrirá el enlace en una nueva página o pestaña del navegador; el valor ’_blank’ en el atributo target indica que se abrirá en una nueva pestaña, si no se usa este atributo se abrirá por defecto en la misma. El contenido de la etiqueta es el texto que se desea mostrar.

<a href="https://www.uexternado.edu.co/programa/departamento-de-matematicas/ciencia-de-datos/" target="_blank">Ciencia de datos UE</a>

Se mostrará en el documento el enlace:

Ciencia de datos UE

Imágenes

Las imágenes se incrustan por medio de la etiqueta img que es de tipo vacío (no requiere cierre), y cuyo atributo principal es src (source) donde se especifica la ruta de la imagen, que puede ser una dirección url, o la ruta del archivo de la imagen, si se encuentra en la ruta del archivo html donde se quiere colocar la imagen. Otros atributos comunes son width para especificar el ancho en pixeles de la imagen, y border para colocar un marco en la imagen cuyo ancho es el número de pixeles indicado en este atributo.

<img src = "https://img.freepik.com/foto-gratis/adorable-perro-basenji-marron-blanco-sonriendo-dando-maximo-cinco-aislado-blanco_346278-1657.jpg?" width = 500 border = 15>

que se observa como:

Listas

En el lenguaje HTML es posible crear listas no ordenadas con la etiqueta ul (unordered list), donde se despliegan los elementos a través de ítems, y las listas ordenadas ol (ordered list) donde aparecen indexadas.

Ejemplo:

Lista no ordenada

<hr>
<h3>Manzanas de mayor consumo</h3>
<hr>
<ul>
  <li>Golden</li>
  <li>Gala</li>
  <li>Red delicious</li>
</ul>

Que se observará como:

Manzanas de mayor consumo

Golden
Gala
Red delicious

Lista ordenada

<hr>
<h3>Ranking de países en evaluación de indicadores de ODS</h3>
<hr>
<ol>
  <li>Finlandia</li>
  <li>Suecia</li>
  <li>Dinamarca</li>
  <li>>Alemania</li>
  <li>>Bélgica</li>
</ol>

Ranking de países en evaluación de indicadores de ODS

Finlandia
Suecia
Dinamarca
Alemania
Bélgica

Tablas

Se construyen mediante la etiqueta table. Cada fila se agrega colocando al interior tr (table row). Para la fila inicial se usa th (table headers) especificando los nombres de cada columna en una de estas etiquetas, así:

<table>
  <tr>
    <th> Lunes  </th>
    <th> Martes </th>
    <th> Miércoles </th>
  </tr>
</table>

Este código genera únicamente los encabezados:

Lunes	Martes	Miércoles

Para añadir filas se utiliza de nuevo la etiqueta tr, y al interior la etiqueta td (table data) para cada ítem de la fila.

Para darle una presentación más llamativa a la tabla es posible usar atributos en la etiqueta table al inicio del código. el atributo border que coloca bordes en la tabla, cuyo marco tendrá el ancho que se indique en pixeles. El atributo cellpadding controla el espacio entre el texto y el borde de cada celda, y el atributo cellspacing el espacio entre celdas.

<table border = "2" cellpadding = "10" cellspacing = "2">

y la tabla se mostrará así:

<table border = "2" cellpadding = "10" cellspacing = "2">
  <tr>
    <th> Lunes  </th>
    <th> Martes </th>
    <th> Miércoles </th>
  </tr>
  <tr>
    <td> Soleado </td>
    <td> Parcialmente nublado </td>
    <td> Lluvioso </td>
  </tr>
  <tr>
    <td> 18° C </td>
    <td> 15° C </td>
    <td> 9° C  </td>
  </tr>
</table>

Lunes	Martes	Miércoles
Soleado	Parcialmente nublado	Lluvioso
18° C	15° C	9° C