Colegio  

PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
PRÁCTICA Nº 6. Listas

Trabajamos con la página web preparativos.html en modo normal. Crearemos

una lista no ordenada con los siguientes puntos como mínimo:

Importante: aumentar la distancia del margen izquierdo, para eso utilizar el botón
sangrar texto. También dejar una línea de separación entre punto y punto. En el punto
MALETA deben aparecer 5 cosas imprescindibles que llevar en la maleta. A la derecha de la
lista, en el espacio vacío, deberá aparecer una foto del hotel (la foto debe estar guardada en la
carpeta recursos).
Ahora vamos a cambiar los símbolos de la lista no ordenada (circulitos vacíos,
cuadrados) por unos personalizados (bajar estas imágenes del blog del profesor y guardarlas
en la carpeta recursos).

Y lo vamos a hacer trabajando con el código fuente (ATENCIÓN a los pasos):

1. Buscamos por el código fuente VIAJE.

1
 
 Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
Nos fijamos en las etiquetas que lo rodean:

‐ <ul> es para indicar que es una lista ordenada (más abajo estará </ul>)

‐ <li> es cada uno de los puntos que aparece en la lista ordenada (vemos un poco
más adelante que aparece escrito VIAJE, si nos fijamos en el li siguiente, veremos que un
poco más adelante aparecerá escrito ALOJAMIENTO). Pues bien, vamos a modificar esta
etiqueta para que salga la imagen que yo quiero y no la que aparece por defecto (circulito
vacío)

Para eso, sustituyo <li> por: 

<li style=”list‐style‐imagen: url(recursos/bus.gif)”> 

Lo que le estoy “diciendo” con esta línea es que el estilo (style) del punto (li) sea una
imagen (list‐style‐imagen) y la imagen en cuestión es: carpeta/imagen.extension
(url(recursos/bus.gif)).

Debería quedarnos así:

Hacemos lo mismo para el hotel, la maleta y la documentación, y debe quedar:

2
 
 Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 

También vamos a cambiar los “cuadrados” de las listas que hay dentro de MALETA y
DOCUMENTACIÓN.

Para ello, buscamos en el código fuente MALETA. Un poco más delante de MALETA
vemos que aparece <ul>, lo vamos a cambiar por <ol> (tanto en la etiqueta de apertura
como de cierre):

Antes:

Después:

Guardamos y vemos en la página web que ahora la lista pasa a ser ordenada (tiene
números)

3
 
 Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
Hacemos lo mismo para la lista que hay en DOCUMENTACIÓN.

Al final el resultado será:

Comprime en un archivo todas los archivos que forman nuestra web (páginas html y
las imágenes de la carpeta recursos) y envíaselas a tu profesor. Publica la nueva página que
has realizado.

4