2. HTML: listas, tablas, imágenes y rutas

Crear listas ordenadas con HTML

A cada elemento de la lista se le añade de manera automática un número. Por defecto: 1, 2, 3...

<ol>
  <li>Coches</li>
  <li>Motos</li>
  <li>...</li>
</ol> 

Si añadimos type="a", la lista muestra "a, b, c..." en vez de "1, 2, 3...":

<ol type="a">
  <li>Coches</li>
  <li>Motos</li>
  <li>...</li>
</ol>  

Crear listas sin orden con HTML

A cada elemento de la lista se le añade de manera automática un punto negro.

<ul>
  <li>Coches</li>
  <li>Motos</li>
  <li>...</li>
</ul>

Anidar listas HTML

Podemos hacer que cada elemento de la lista contenga a su vez otra lista.

<ul>
  <li>Coches
    <ul>
      <li>Diésel</li>
      <li>Gasolina</li>
      <li>Eléctricos</li>
    </ul>
  </li>
  <li>Motos</li>
  <li>...</li>
</ul>

Crear tablas con HTML: la estructura simple

<table border="1">
  <tr>
    <td>NOMBRE</td>
    <td>APELLIDOS</td>
    <td>NIF</td>
  </tr>
  <tr>
    <td>Laura</td>
    <td>Montes</td>
    <td>03113676P</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>Solís</td>
    <td>23228456B</td>
  </tr>
</table>

Crear tablas con HTML: una estructura más completa

Las etiquetas <thead>, <tbody> y <tfoot> identifican la cabecera, el cuerpo y el pie de una tabla respectivamente.

<table border="1">
  <thead>
    <tr>
      <td>NOMBRE</td>
      <td>APELLIDOS</td>
      <td>NIF</td>
    </tr>
  </thead>
  <tbody> 
    <tr>
      <td>Laura</td>
      <td>Montes</td>
      <td>03113676P</td>
    </tr>

    <tr>
      <td>Pedro</td>
      <td>Solís</td>
      <td>23228456B</td>
    </tr> 
  </tbody> 
  <tfoot>
  </tfoot>
</table>

Crear tablas con HTML: formatear celdas con <th></th>

Si usamos la marca <th> en vez de <td> para crear una celda, el contenido se centra y se pone en negrita. Esta marca se suele usar en la cabecera de la tabla.
 
<table border="1">
  <tr>
    <th>NOMBRE</th>
    <th>APELLIDOS</th>
    <th>NIF</th>
  </tr>
  <tr>
    <td>Laura</td>
    <td>Montes</td>
    <td>03113676P</td>
  </tr>
</table>

Crear tablas con HTML: agrupar celdas horizontalmente

<table border="1">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>100€</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>80€</td>
  </tr>
  <tr>
    <td colspan="2">Total: 180€</td>
  </tr>
</table>

Crear tablas con HTML: agrupar celdas verticalmente

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Añadir imágenes con HTML

<img src=".." alt="..." width=".." height="..">

• width: ancho que le queremos dar a la imagen.
• height: alto que le queremos dar a la imagen.
• src: archivo de la imagen que queremos mostrar. Ejemplo: src="mi_imagen.jpg".
• alt: descripción de la imagen. Ejemplo: alt="parque con arboles"

Ejemplo completo:

<img src="parque.jpg" alt="parque con arboles">

En este caso el archivo parque.jpg se encuentra en el mismo directorio que el documento .html donde estamos incluyendo la marca <img>. Pero.. ¿¿que ocurre si la imagen está en una directorio distinto?? En ese caso en vez de escribir el nombre del archivo tendremos que escribir la RUTA donde se encuentra el archivo.

Rutas

Una ruta es la manera de identificar el lugar donde se encuentra un archivo o carpeta en un sistema de archivos.

Ejemplo de ruta en Windows: C:\Document and Settings\di\Escritorio




Las rutas se pueden expresar de manera absoluta o relativa.

Ruta absoluta

Indica cual es el lugar del archivo o directorio con respecto al directorio raiz del sistema de archivos.

Ejemplo en Windows: C:\Document and Settings\di\Escritorio

Para una etiqueta <img> la ruta absoluta sería esta:

     file://C:/Users/CEI01/Desktop/html/images/parque.jpg 

La etitqueta <img> quedaría así:

<img src="file://C:/Users/CEI01/Desktop/html/images/parque.jpg" alt="parque con arboles">

Ruta relativa

Señalan la ubicación del archivo o directorio con respecto al archivo o directorio actual.

Los dos puntos seguidos (..) llevan a un nivel atrás en la jerarquia. Es decir, para hacer referencia a un archivo archivo.jpg que se encuentra en un directorio precedente al actual escribimos: ..\archivo.jpg.

Si queremos hacer referencia a un archivo imagen.jpg que se encuentra en un directorio con dos niveles de jerarquía hacia atrás, escribimos: ..\..\imagen.jpg

Un punto (.) representa el directorio actual.


Ejemplo:

La ruta relativa del archivo electricista.jpg desde el archivo electricidad.html sería: ..\..\images\electricista.jpg, donde los dos primeros puntos (..) hacen referencia al directorio html y los dos segundos hacen referencia al directorio padre de los directorio html e images.

Ejercicio

Crea la siguiente estructura de archivos y directorios.


  
a) En el archivo inicio.html añade la imagen logotipo.jpg que se encuentra en el directorio images.

b) En el archivo electricidad.html crea la siguiente tabla y añade la imagen electricista.jpg que se encuentra en el directorio images.



  
c) En el archivo jardinería.html crea la siguiente lista, y añade la imagen jardin.jpg que se encuentra en el directorio images: