universidad don bosco facultad de estudios tecnologicos escuela de

UNIVERSIDAD DON BOSCO
FACULTAD DE ESTUDIOS TECNOLOGICOS
ESCUELA DE COMPUTACION
GUIA DE LABORATORIO Nº 6
CICLO 01-2016
Nombre de la práctica: Uso de Listas y vínculos en una página Web
Lugar de ejecución: Laboratorio de Informática
Tiempo estimado: 3 horas
Materia: Lenguajes de Marcado y Estilos Web
I. Objetivos
Que el estudiante sea capaz de:
 Identificar las características y diferencias de los diversos tipos de listas en HTML
 Implementar los diferentes tipos de listas de HTML en una página Web.
 Crear páginas Web utilizando listas anidadas de diferentes tipos.
 Identificar y utilizar los distintos tipos de vínculos en HTML.
 Crear menús de navegación utilizando listas, vínculos y algunas propiedades CSS.
II. Introducción Teórica
Listas en CSS
Las listas en CSS constituyen uno de los elementos más importantes para el desarrollo de una página
web que respete los estándares.
Así como es importante el marcado correcto de párrafos y encabezados, las listas también deben
estar especificadas de la forma adecuada.
Más allá de la marcación 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 creación de una barra de navegación.
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 viñetas (cuando
se usa UL) o numerar los ítems (al usar OL):
Ejemplo:
Para lograr las listas anteriores el código 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: término y definición del término.
Ejemplo:
Listas con DL
El código HTML para la lista anterior es:
<dl>
<dt>Asteroides:</dt>
<dd>Objetos rocosos o metálicos 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 básicos
- Viñetas personalizadas
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta
formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran
por defecto con la numeración decimal utilizada en la mayoría de países.
No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas,
además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el
tipo de viñeta que se muestra y que se denomina list-style-type.
list-style-type
Tipo de viñeta
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
Descripción
Permite establecer el tipo de viñeta mostrada para una lista
En primer lugar, el valor none permite mostrar una lista en la que sus elementos no
contienen viñetas, números o letras. Se trata de un valor muy utilizado, ya que es
imprescindible para los menús de navegación creados con listas, como se verá más adelante.
El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos,
numéricos y alfabéticos.
Los valores gráficos son disc, circle y square y muestran como viñeta un círculo relleno, un
círculo vacío y un cuadrado relleno respectivamente.
Los valores numéricos están formados por decimal, decimal-leading-zero, lower-roman,
upper- roman, armeniany georgian.
Por último, los valores alfanuméricos 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 código CSS de algunas de las listas del ejemplo anterior se muestra a
continuación:
<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 colocación de las viñetas.
list-style-position
Posición de la viñeta
Valores
inside | outside | inherit
Se aplica a
Elementos de una lista
Valor inicial
outside
Descripción
Permite establecer la posición de la viñeta 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 viñeta y su posición, pero no es posible personalizar algunas de
sus características básicas como su color y tamaño.
Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la
propiedad list-style- image, que permite mostrar una imagen propia en vez de una viñeta
automática.
list-style-image
Imagen de la viñeta
Valores
<url> | none | inherit
Se aplica a
Elementos de una lista
Valor inicial
none
4
Descripción
Permite reemplazar las viñetas automáticas por una imagen personalizada
Las imágenes personalizadas se indican mediante la URL de la imagen. Si no se
encuentra la imagen o no se puede cargar, se muestra la viñeta automática
correspondiente (salvo que explícitamente 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 viñetas personalizadas:
Figura 3. Ejemplo de propiedad list-style-image
Las reglas CSS correspondientes al ejemplo anterior se muestran a continuación:
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
-
Descripción
Propiedad que permite establecer de forma simultánea todas las opciones de una
lista
En la definición anterior, la notación || 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 viñetas
automáticas ni viñetas personalizadas:
ul { list-style: none }
Cuando se utiliza una viñeta personalizada, es conveniente indicar la viñeta automática que
se mostrará cuando no se pueda cargar la imagen:
5
ul { list-style: url(imagenes/cuadrado_rojo.gif) square; }
Vínculos en HTML
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una
página web o archivo a otras páginas 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 dirección. La dirección del vínculo la
podemos especificar a través del atributo href.
Etiqueta
<a>
Atributos
( <href> )
Valor
URL
Descripción
Dirección URL a conectar.
Ejemplo 1.
Con la definición anterior, para crear un enlace que apunte a la página principal de Google solamente
habría que incluir lo siguiente en un documento HTML:
<a href="http://www.google.com">Página principal de Google</a>
El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma
página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda
sección", "Volver al principio de la página", etc.
Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las
secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.
Etiqueta
<a>
Atributos
( <name> )
Valor
nombre de sección
Descripción
Para crear un marcapáginas dentro de un documento.
Ejemplo 2.
La sintaxis es: <a name="primera sección"></a>
También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El siguiente
ejemplo añade enlaces de tipo "Volver al inicio de la página" en varias secciones:
<a name="inicio"></a>
6
III. Requerimientos
No.
1
2
3
4
Cantidad
Descripción
1
PC con uno de los editores de páginas Web: Sublime Text, Brackets, Notepad ++,
BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7
u 8, Firefox (última versión disponible), Google Chrome (última versión
disponible), Opera (última versión disponible), Safari (última versión disponible).
1
Guía de Laboratorio #6 de Lenguajes de Marcado y Estilo Web
1
Recursos para laboratorio práctico.
1
Memoria USB
IV. Procedimiento
Indicaciones Generales.
1. Crear una carpeta en mis documentos y colocar en el nombre N°Carnet_Guia6, Nota: Cambiar
N°Carnet por su número 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 página web:
7
<title>Uso de listas ordenadas
<h1>Listas ordenadas
<p>Para convertirse en webmaster, debería 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
más 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 página se muestre de la siguiente
forma:





Color de fondo: #2E9AFE.
Color de la tipografía: #D8D8D8.
H1: Texto centrado.
Hr: estilo de borde sólido, ancho de borde 5px, margen 0px 45px.
Div: ancho 80% margen 45px auto, color de fondo #00FFBF, padding 3%, color de la
tipografía: negro, box-sizing: border-box.
6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
7. Visualizar la página web en el navegador.
8. Realice los cambios necesarios para que las “viñetas” de la lista sean números romanos en
mayúsculas.
8
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 página 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 países de Centroamérica 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 países Centroamericanos a Panamá y Belice por raíces
históricas y geo-políticas.
4. El archivo css será el mismo que el del ejemplo anterior.
5. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
6. Visualizar la página web en el navegador.
7. Realice los cambios necesarios para que la viñeta de los elementos de la lista sea cuadrada en
lugar de ser un disco sólido.
9
Ejercicio 3. Uso de lista de definición
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 página web:
<title>Uso de listas de definición
<h1>Listas de Definición
<h2>Metalenguajes
<dt>SGML
<dd>Metalenguaje para la definición 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 Geográfico al modelaje, transporte y almacenamiento información
geográfica
<dt>XUL
<dd>Lenguajes derivados de XML para determinadas aplicaciones
4. El archivo css será el mismo que el ejercicio anterior.
5. Agregar la línea 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 términos (etiqueta dt) se muestre en
negrita y con un margen superior e inferior de 10px.
7. Visualizar la página web en el navegador.
11
Ejercicio 4. Lista con imágenes 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 guía y ubicarlos en la carpeta de trabajo
4. Estructura de la página web:
<title>Mis pasatiempos
<h1>Pasatiempos
<li>Leer y escribir emails
<li>Leer Libros
<li>Ir de compras
<li>Jugar en línea
<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 página se muestre de la siguiente
forma:





Color de fondo: #4682B4.
Tipografía: tamaño 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 línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
8. Visualizar la página web en el navegador.
Ejercicio 5. Lista con imágenes.
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 página 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 página se muestre de la siguiente
forma:







Color de fondo: #222222.
Color de la tipografía: blanco.
<a>: color: #FF8000.
#titulo: color de la tipografía :#ccc, alto:50px, ancho:400px, margen:50px auto 0,
padding:0, color de fondo:#141414, borde: 5px solid #1A1A1A, alineación 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: Tamaño 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 demás clases debe aplicarse el estilo aplicado a la clase “mac” asegurándose de
cambiar el nombre de la imagen (revise el nombre de las imágenes en la carpeta “images” descargada
en los recursos).
6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
7. Visualizar la página web en el navegador.
14
Ejercicio 6. Vínculos.
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 vínculos.html
3. Estructura de la página web:
<title>Usando diversos tipos de vínculos
<h1>Vínculos
<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 página 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 ubicación dentro de la página.
Supongamos que definimos un destino de vínculo 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á automáticamente 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 número 1 de la guía.
5. Visualizar la página 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 código 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 aplicándole estilos básicos al body de la página web.
7. Ahora se procederá a darle estilos al div con clase “contenedor”.
17
8. A continuación 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 declaración “display: inline-block”?
11. Responda, ¿Para qué sirve colocar la declaración “line-height: 2.5”? ¿De qué otra forma pudo
obtenerse un resultado similar?
12. Si visualiza su archivo HTML notará que el quinto botón tiene la clase “redondeado”. Haga las
modificaciones necesarias para que este botón 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 “diseño material” (http://www.materialui.co/colors). Note que en la pseudo-clase
hover al botón se le coloca un color de fondo en una tonalidad ligeramente más sólida (oscura)
que la del botón.
15. Al realizar el paso anterior debería de conseguirse un resultado similar al siguiente:
18
Ejercicio 8. Diseñando 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 básica de un documento HTML.
4. Colocar como título de la página (etiqueta <title>) el texto “Menú horizontal”.
5. Digitar el siguiente código HTML dentro del cuerpo (body) de la página 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 básicos a la página 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
quitándole las viñetas a cada uno de los elementos de la lista.
11. A continuación aumentaremos el alto de la línea 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 vínculos 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, además se le ha
agregado un relleno horizontal para que el enlace se muestre más ancho. Además se le ha aplicado
estilo a la pseudo-clase hover para que cambie el color de fondo del vínculo 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 continuación 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 declaración “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 código HTML debería lucir de la siguiente manera:
21
18. Hasta este punto la página web debería 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 más interior son sacados del
flujo pero aún 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 declaración
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 sólido a los elementos del segundo nivel de la lista.
22
23. Si ha seguido los pasos al pie de la letra debería obtener un resultado como el siguiente:
V. Análisis de resultados
El instructor evaluará el correcto funcionamiento de cada uno de los ejemplos de la guía y realizará una
pregunta a cada estudiante para evaluar su comprensión de los temas de la guía.
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 cómo realizar un “acordeón” utilizando únicamente HTML y CSS (no se admite
utilizar jquery, javascript, bootstrap o alguna otra tecnología o framework). Presentar un
ejemplo.
3. Desarrolle un ejemplo de menú de navegación vertical.
4. Agregue un nivel más al menú del ejercicio 8 de la guía 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: Próxima semana
23