UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLOGICOS

ESCUELA DE COMPUTACION
GUIA DE LABORATORIO N 6

CICLO 01-2016

Nombre de la prctica: Uso de Listas y vnculos en una pgina Web

Lugar de ejecucin: Laboratorio de Informtica
Tiempo estimado: 3 horas
Materia: Lenguajes de Marcado y Estilos Web

I. Objetivos
Que el estudiante sea capaz de:
Identificar las caractersticas y diferencias de los diversos tipos de listas en HTML
Implementar los diferentes tipos de listas de HTML en una pgina Web.
Crear pginas Web utilizando listas anidadas de diferentes tipos.
Identificar y utilizar los distintos tipos de vnculos en HTML.
Crear mens de navegacin utilizando listas, vnculos y algunas propiedades CSS.
II. Introduccin Terica
Listas en CSS
Las listas en CSS constituyen uno de los elementos ms importantes para el desarrollo de una pgina
web que respete los estndares.
As como es importante el marcado correcto de prrafos y encabezados, las listas tambin deben
estar especificadas de la forma adecuada.
Ms all de la marcacin del documento HTML, con la ayuda de CSS es posible cambiar por
completo la apariencia de las listas y crear elementos atractivos y de gran impacto visual, tanto para
un simple listado como para la creacin de una barra de navegacin.
El marcado de las listas
En HTML la manera correcta de presentar una lista con tems es utilizando las etiquetas UL y OL. La
sigla UL proviene de Unordered List (listas sin orden) y OL de Ordered list (listas ordenadas). Al
utilizar estas etiquetas en un documento HTML el navegador se encarga de colocar vietas (cuando
se usa UL) o numerar los tems (al usar OL):
Ejemplo:

Para lograr las listas anteriores el cdigo HTML utilizado es:

Lista con UL:
<ul>
<li>Argentina</li>
<li>Brasil</li>
1

<li>Uruguay</li>
</ul>
Lista con OL:
<ol>
<li>Argentina</li>
<li>Brasil</li>
<li>Uruguay</li>
</ol>
Otro tipo de listas son las generadas por DL (Definition list) donde intervienen dos
elementos: trmino y definicin del trmino.
Ejemplo:
Listas con DL

El cdigo HTML para la lista anterior es:

<dl>
<dt>Asteroides:</dt>
<dd>Objetos rocosos o metlicos que orbitan alrededor del Sol</dd>
<dt>Cometas:</dt>
<dd>Cuerpos formados por substancias duras y gases congelados</dd>
<dt>Planetas:</dt>
<dd>No tienen luz propia, sino que reflejan la luz solar</dd>
</dl>
Estilos bsicos
- Vietas personalizadas
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una vieta
formada por un pequeo crculo de color negro. Los elementos de las listas ordenadas se muestran
por defecto con la numeracin decimal utilizada en la mayora de pases.
No obstante, CSS define varias propiedades para controlar el tipo de vieta que muestran las listas,
adems de poder controlar la posicin de la propia vieta. La propiedad bsica es la que controla el
tipo de vieta que se muestra y que se denomina list-style-type.
list-style-type

Tipo de vieta

Valores

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman

| lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha |
upper-alpha | none | inherit

Se aplica a

Elementos de una lista

2

Valor inicial

disc

Descripcin

Permite establecer el tipo de vieta mostrada para una lista

En primer lugar, el valor none permite mostrar una lista en la que sus elementos no
contienen vietas, nmeros o letras. Se trata de un valor muy utilizado, ya que es
imprescindible para los mens de navegacin creados con listas, como se ver ms adelante.
El resto de valores de la propiedad list-style-type se dividen en tres tipos: grficos,
numricos y alfabticos.
Los valores grficos son disc, circle y square y muestran como vieta un crculo relleno, un
crculo vaco y un cuadrado relleno respectivamente.
Los valores numricos estn formados por decimal, decimal-leading-zero, lower-roman,
upper- roman, armeniany georgian.
Por ltimo, los valores alfanumricos se controlan mediante lower-latin, lower-alpha,
upper- latin, upper-alpha y lower-greek.
La siguiente imagen muestra algunos de los valores definidos por la propiedad liststyle-type:

Figura 1. Ejemplo de propiedad liststyle-type

El cdigo CSS de algunas de las listas del ejemplo anterior se muestra a
continuacin:
<ul style="list-style-type: square">
<li>list-style-type: square</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ol style="list-style-type: lower-roman">
<li>list-style-type: lower-roman</li>
<li>Elemento</li>
<li>Elemento</li>
3

</ol>
<ol style="list-style-type: decimal-leading-zero; padding-left: 2em;">
<li>list-style-type: decimal-leading-zero</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
La propiedad list-style-position permite controlar la colocacin de las vietas.
list-style-position

Posicin de la vieta

Valores

inside | outside | inherit

Se aplica a

Elementos de una lista

Valor inicial

outside

Descripcin

Permite establecer la posicin de la vieta de cada elemento de una lista

La diferencia entre los valores outside e inside se hace evidente cuando los
elementos contienen mucho texto, como en la siguiente imagen:

Figura 2. Ejemplo de propiedad list-style-position

Utilizando las propiedades anteriores (list-style-type y list-style-position), se puede
seleccionar el tipo de vieta y su posicin, pero no es posible personalizar algunas de
sus caractersticas bsicas como su color y tamao.
Cuando se requiere personalizar el aspecto de las vietas, se debe emplear la
propiedad list-style- image, que permite mostrar una imagen propia en vez de una vieta
automtica.
list-style-image

Imagen de la vieta

Valores

<url> | none | inherit

Se aplica a

Elementos de una lista

Valor inicial

none
4

Descripcin

Permite reemplazar las vietas automticas por una imagen personalizada

Las imgenes personalizadas se indican mediante la URL de la imagen. Si no se

encuentra la imagen o no se puede cargar, se muestra la vieta automtica
correspondiente (salvo que explcitamente se haya eliminado mediante la propiedad liststyle-type).
La siguiente imagen muestra el uso de la propiedad list-style-image mediante tres ejemplos
sencillos de listas con vietas personalizadas:

Figura 3. Ejemplo de propiedad list-style-image

Las reglas CSS correspondientes al ejemplo anterior se muestran a continuacin:
ul {
margin:0;
padding-left: 1.5em;
line-height: 1.5em;
}
ul li { padding-left: .2em; }
ul.ok { list-style-image: url(imagenes/ok.png); }
ul.go { list-style-image: url(imagenes/bullet_go.png); }
ul.redondo { list-style-image: url(imagenes/bullet_red.png); }
Como es habitual, CSS define una propiedad de tipo "shorthand" que permite establecer todas
las propiedades de una lista de forma directa. La propiedad se denomina list-style.
list-style

Estilo de una lista

Valores

( <list-style-type> || <list-style-position> || <list-style-image> ) | inherit

Se aplica a

Elementos de una lista

Valor inicial

Descripcin

Propiedad que permite establecer de forma simultnea todas las opciones de una
lista

En la definicin anterior, la notacin || significa que el orden en el que se indican los valores
de la propiedad es indiferente. El siguiente ejemplo indica que no se debe mostrar ni vietas
automticas ni vietas personalizadas:
ul { list-style: none }
Cuando se utiliza una vieta personalizada, es conveniente indicar la vieta automtica que
se mostrar cuando no se pueda cargar la imagen:
5

ul { list-style: url(imagenes/cuadrado_rojo.gif) square; }

Vnculos en HTML
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una
pgina web o archivo a otras pginas web o archivos. Hay varios tipos de enlaces y para crear un
enlace, aquel texto o imagen, titulo o cualquier cosa que existe en un documento html debe ser
rodeada de la directiva <a>, que se le va a especificar una direccin. La direccin del vnculo la
podemos especificar a travs del atributo href.
Etiqueta

<a>

Atributos

( <href> )

Valor

URL

Descripcin

Direccin URL a conectar.

Ejemplo 1.

Con la definicin anterior, para crear un enlace que apunte a la pgina principal de Google solamente
habra que incluir lo siguiente en un documento HTML:
<a href="http://www.google.com">Pgina principal de Google</a>
El otro atributo bsico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma
pgina web. Si una pgina es muy larga, puede ser til mostrar enlaces de tipo "Saltar hasta la segunda
seccin", "Volver al principio de la pgina", etc.
Este tipo de enlaces son especiales, ya que la URL de la pgina siempre es la misma para todas las
secciones y por tanto, debe aadirse otra parte a las URL para identificar cada seccin.
Etiqueta

<a>

Atributos

( <name> )

Valor

nombre de seccin

Descripcin

Para crear un marcapginas dentro de un documento.

Ejemplo 2.
La sintaxis es: <a name="primera seccin"></a>
Tambin es posible utilizar este tipo de enlaces con URL relativas en una misma pgina. El siguiente
ejemplo aade enlaces de tipo "Volver al inicio de la pgina" en varias secciones:
<a name="inicio"></a>
6

III. Requerimientos
No.
1

2
3
4

Cantidad
Descripcin
1
PC con uno de los editores de pginas Web: Sublime Text, Brackets, Notepad ++,
BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7
u 8, Firefox (ltima versin disponible), Google Chrome (ltima versin
disponible), Opera (ltima versin disponible), Safari (ltima versin disponible).
1
Gua de Laboratorio #6 de Lenguajes de Marcado y Estilo Web
1
Recursos para laboratorio prctico.
1
Memoria USB

IV. Procedimiento
Indicaciones Generales.
1. Crear una carpeta en mis documentos y colocar en el nombre NCarnet_Guia6, Nota: Cambiar
NCarnet por su nmero de carnet brindado por la Universidad.
2. Crear una nueva carpeta dentro de la anterior y colocarle en el nombre css.
3. Abrir el editor Sublime Text.

Ejercicio 1. Uso de listas ordenadas.

1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_ordenada.html
3. Estructura de la pgina web:

<title>Uso de listas ordenadas

<h1>Listas ordenadas
<p>Para convertirse en webmaster, debera considerar aprender:
<ol>
<li>HTML
<li>CSS
<li>JavaScript
<li>PHP/ASP/JSP
<p>Es realmente importante que lo haga en ese orden, puesto que cada lenguaje se vuelve
ms complicado a medida avanza al siguiente nivel.
4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre style.css
5. Aplicar las reglas de estilo necesarias para lograr que la pgina se muestre de la siguiente
forma:

Color de fondo: #2E9AFE.

Color de la tipografa: #D8D8D8.
H1: Texto centrado.
Hr: estilo de borde slido, ancho de borde 5px, margen 0px 45px.
Div: ancho 80% margen 45px auto, color de fondo #00FFBF, padding 3%, color de la
tipografa: negro, box-sizing: border-box.

6. Agregar la lnea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
7. Visualizar la pgina web en el navegador.

8. Realice los cambios necesarios para que las vietas de la lista sean nmeros romanos en
maysculas.

Ejercicio 2. Uso de listas desordenadas

1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_desordenada.html
3. Estructura de la pgina web:
Para este ejemplo necesitaremos copiar la misma estructura del ejemplo anterior y solamente
cambiar la etiqueta <ol> por <ul> para realizar la lista desordenada.
<title>Uso de listas desordenadas
<h1>Listas desordenadas
<p>Los pases de Centroamrica son:
<ul>
<li>El Salvador
<li>Honduras
<li>Guatemala
<li>Costa Rica
<li>Nicaragua
<li>Panam;
<li>Belice
<p>Algunos autores quitan de la lista de pases Centroamericanos a Panam y Belice por races
histricas y geo-polticas.
4. El archivo css ser el mismo que el del ejemplo anterior.
5. Agregar la lnea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
6. Visualizar la pgina web en el navegador.

7. Realice los cambios necesarios para que la vieta de los elementos de la lista sea cuadrada en
lugar de ser un disco slido.

Ejercicio 3. Uso de lista de definicin

1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_definicion.html
3. Estructura de la pgina web:

<title>Uso de listas de definicin

<h1>Listas de Definicin
<h2>Metalenguajes
<dt>SGML
<dd>Metalenguaje para la definicin de otros lenguajes de marcado
<dt>XML
<dd>Lenguaje basado en SGML y que se emplea para describir datos
<dt>RSS
<dd>RSS son las siglas de Really Simple Syndication, un formato XML para indicar o compartir
contenido en la Web
10

<dt>GML
<dd>Lenguaje de Marcado Geogrfico al modelaje, transporte y almacenamiento informacin
geogrfica
<dt>XUL
<dd>Lenguajes derivados de XML para determinadas aplicaciones
4. El archivo css ser el mismo que el ejercicio anterior.
5. Agregar la lnea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
6. Realizar los cambios necesarios para que cada uno de los trminos (etiqueta dt) se muestre en
negrita y con un margen superior e inferior de 10px.
7. Visualizar la pgina web en el navegador.

11

Ejercicio 4. Lista con imgenes y css

1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_css.html
3. Descargar los recursos de la gua y ubicarlos en la carpeta de trabajo
4. Estructura de la pgina web:

<title>Mis pasatiempos
<h1>Pasatiempos
<li>Leer y escribir emails
<li>Leer Libros
<li>Ir de compras
<li>Jugar en lnea
<li>Recibir clases de Lenguajes de Marcado y Estilo Web
5. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre ejercicio4.css
6. Aplicar las reglas de estilo necesarias para lograr que la pgina se muestre de la siguiente
forma:

Color de fondo: #4682B4.

Tipografa: tamao 20px.
H1: text-transform: uppercase, color: #FFD700.
ul: margin: 0, padding: 0, list-style-image: url(../images/bullet.gif).
div: margin: 60px auto, ancho: 80%, color de fondo: #008080, padding: 20px 20%, boxsizing: border-box.

12

7. Agregar la lnea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
8. Visualizar la pgina web en el navegador.

Ejercicio 5. Lista con imgenes.

1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_imagenes.html
3. Estructura de la pgina web:

<title>Personalizando listas
<div id="titulo">Bonita forma de personalizar nuestras listas
<li class="mac">Usando <span>Macintosh
13

<li class="wordpress">Powered by <span>Wordpress

<li class="clickideas">Design by <span>Clickideas
<li class="pownce">MyPownce
<li class="flickr">My Photos Flickr
<li class="blog">My blog
<li class="mail">My E-mail
<li class="tarjeta">My vcard
<li class="info">More Info

4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre style_imagen.css

5. Aplicar las reglas de estilo necesarias para lograr que la pgina se muestre de la siguiente
forma:

Color de fondo: #222222.

Color de la tipografa: blanco.
<a>: color: #FF8000.
#titulo: color de la tipografa :#ccc, alto:50px, ancho:400px, margen:50px auto 0,
padding:0, color de fondo:#141414, borde: 5px solid #1A1A1A, alineacin del
texto: center
#cuadro: color de la tipografia:#fff, alto:230px, ancho:400px, margen:0 auto,
padding:0, color de fondo: #141414, borde: 5px solid #1A1A1A
Span que estan dentro de los elementos de la lista: color de la fuente: #C42808,
subrayado.
.mac: Tamao de fuente: 14px, padding izquierdo:17px, margen izquierdo 2px, margen
inferior 5px, background:url(../images/macosx.gif) bottom left no-repeat, list-styletype:none;

NOTA: A todas las dems clases debe aplicarse el estilo aplicado a la clase mac asegurndose de
cambiar el nombre de la imagen (revise el nombre de las imgenes en la carpeta images descargada
en los recursos).
6. Agregar la lnea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
7. Visualizar la pgina web en el navegador.

14

Ejercicio 6. Vnculos.
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre vnculos.html
3. Estructura de la pgina web:

<title>Usando diversos tipos de vnculos

<h1>Vnculos
<h2>Ejemplo 1: Atributo href
<a href="http://www.google.com/">Google
<h2>Ejemplo 2: El atributo target
<p>Se utiliza para definir donde queremos que se abra el documento al presionar sobre el
enlace. Vamos a abrir el documento en una nueva pgina del navegador.
<a href="http://www.google.com/" target="_blank">Google
<h2>Ejemplo 3: El atributo name
<p>Este atributo se usa para definir una determinada ubicacin dentro de la pgina.
Supongamos que definimos un destino de vnculo llamado "destino-uno" en el archivo
"uno.html".
<a name="destino-uno">Capitulo 1
<h2> Ejemplo 4: Creando un enlace a un email
<p>Se utiliza en caso que queramos que un enlace mande un email. En el momento que
presionamos dicho link se abrir automticamente el programa de email que tenemos definido
por defecto.
<a href="/mailto: alguien@gmail.com">Mandar email

15

<h2>Ejemplo 5: Un enlace a partir de una imagen

<p>Muchas veces queremos usar una imagen como enlace a otro documento. Para ello
debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.
<a href="http://www.google.com/"><img src="images/Google.png">
4. El estilo css ser el mismo que se aplic al ejercicio nmero 1 de la gua.
5. Visualizar la pgina web en el navegador.

16

Ejercicio 7. Usando enlaces como botones

1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle como nombre botones.html
3. Digitar el siguiente cdigo HTML dentro de su archivo botones.html

4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre botones.css

5. Vincular la hoja de estilo con el archivo HTML creado.
6. Comenzaremos aplicndole estilos bsicos al body de la pgina web.

7. Ahora se proceder a darle estilos al div con clase contenedor.

17

8. A continuacin se establecen los estilos generales de los botones:

9. Visualice los resultados en el navegador de su preferencia.

10. Responda: Qu se consigue mediante la declaracin display: inline-block?
11. Responda, Para qu sirve colocar la declaracin line-height: 2.5? De qu otra forma pudo
obtenerse un resultado similar?
12. Si visualiza su archivo HTML notar que el quinto botn tiene la clase redondeado. Haga las
modificaciones necesarias para que este botn se muestre con el borde redondeado aplicando
un radio de 1.25em.
13. Ahora procederemos a proporcionarle color a nuestros botones usando para ellos las clases
rojo, rosa, morado, azul, celeste, verde, naranja. Digite las siguientes reglas de
estilo y visualice los cambios en el navegador

14. Proceda a realizar las reglas de estilo para las clases rosa, morado, azul, celeste,
verde y naranja tomando como base el ejemplo anterior. Para ello considere la paleta de
colores del diseo material (http://www.materialui.co/colors). Note que en la pseudo-clase
hover al botn se le coloca un color de fondo en una tonalidad ligeramente ms slida (oscura)
que la del botn.
15. Al realizar el paso anterior debera de conseguirse un resultado similar al siguiente:

18

Ejercicio 8. Diseando un men horizontal multinivel

1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle como nombre menu_horizontal.html
3. Digite la estructura bsica de un documento HTML.

4. Colocar como ttulo de la pgina (etiqueta <title>) el texto Men horizontal.

5. Digitar el siguiente cdigo HTML dentro del cuerpo (body) de la pgina web.

6. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre menu.css

7. Vincular la hoja de estilo con el archivo HTML creado.
8. Comenzaremos aplicando algunos estilos bsicos a la pgina web

19

9. En este ejemplo construiremos un men horizontal de dos niveles por tanto dividiremos los
estilos en tres grupos: Los estilos generales (que se aplicaran a todos los elementos del men
independientemente del nivel), los estilos del primer nivel y los estilos del segundo nivel.
Estilos generales
10. Comenzaremos escribiendo los estilos generales de los elementos del men. Iniciaremos
quitndole las vietas a cada uno de los elementos de la lista.

11. A continuacin aumentaremos el alto de la lnea de cada elemento de la lista. Digite las
siguientes reglas de estilo y visualice los resultados en el navegador:

12. Ahora se proceder a estilizar cada uno vnculos que forman el men. Digite las siguientes
reglas de estilo y visualice los resultados en el navegador.

Note que en las reglas de estilo anteriores se le ha quitado el subrayado a los enlaces, adems se le ha
agregado un relleno horizontal para que el enlace se muestre ms ancho. Adems se le ha aplicado
estilo a la pseudo-clase hover para que cambie el color de fondo del vnculo cuando el usuario pase el
cursor sobre l.
Estilos del primer nivel
13. Comenzaremos colocando la lista del primer nivel a ancho completo y con un color de fondo.
Digite las siguientes reglas de estilo y visualice los cambios en el navegador.

20

14. A continuacin conseguiremos que cada uno de los elementos del primer nivel del men floten
a la izquierda. Digite la siguiente regla de estilo y visualice los cambios en el navegador.

15. Al visualizar los resultados se habr dado cuenta que se perdi el color de fondo de la lista,
esto es porque la etiqueta ul se qued sin elementos(es decir, sin altura) dado que los
elementos li se salieron del flujo al momento en que se pusieron a flotar. Para solucionar
este problema debe aplicar la declaracin overflow:hidden al contenedor de la lista (selector
nav>ul), con esto obligar a que el elemento ul cubra a los elementos li.
16. Hasta este punto su men debe lucir de la siguiente manera:

Segundo nivel
17. Ahora procederemos a realizar el segundo nivel del men, para ello anidaremos una lista, es
decir, colocaremos una lista como elemento de otra lista. Para este ejemplo, listaremos los
departamentos de El Salvador. Para ello, modificaremos el segundo elemento de la lista
original, el cdigo HTML debera lucir de la siguiente manera:

21

18. Hasta este punto la pgina web debera lucir de la siguiente manera:

19. El error que ocurre es que los elementos del segundo nivel del men (es decir, los
departamentos) empujan a la etiqueta ul principal lo que hace que ese ul cubra a ambos
niveles del men. Para solucionar esto posicionaremos de forma absoluta a la lista del segundo
nivel del men para que se salgan del flujo.

20. Al visualizar los resultados notar que los elementos de la lista ms interior son sacados del
flujo pero an se ven. Nuestro objetivo es ocultar dicha lista hasta que el usuario pase el cursor
por el elemento del primer nivel del men. Para ocultar la lista interior digite la declaracin
display:none dentro del selector de la regla del paso 19 (selector nav>ul>li>ul).
21. Ahora haremos que esa lista interior se muestre cuando se haga hover sobre los elementos
del primer nivel del men. Digite la siguiente regla de estilo y visualice los resultados en el
navegador:

22. Al visualizar los resultados notar que el resultado casi est listo y solo nos resta darle un color
de fondo slido a los elementos del segundo nivel de la lista.

22

23. Si ha seguido los pasos al pie de la letra debera obtener un resultado como el siguiente:

V. Anlisis de resultados
El instructor evaluar el correcto funcionamiento de cada uno de los ejemplos de la gua y realizar una
pregunta a cada estudiante para evaluar su comprensin de los temas de la gua.
VI. Ejercicios complementarios
1. Investigue la forma de utilizar web icons fonts (se recomienda usar font-awesome) y coloque
un icono diferente en cada uno de los botones del ejercicio 7.
Ejemplo:

2. Investigue cmo realizar un acorden utilizando nicamente HTML y CSS (no se admite
utilizar jquery, javascript, bootstrap o alguna otra tecnologa o framework). Presentar un
ejemplo.
3. Desarrolle un ejemplo de men de navegacin vertical.
4. Agregue un nivel ms al men del ejercicio 8 de la gua de tal forma que se muestren los
municipios del departamento de San Salvador. Los elementos del tercer nivel (los municipios)
deben mostrarse a la derecha del elemento padre (es decir, del departamento).

Fecha de entrega: Prxima semana

23