Beruflich Dokumente
Kultur Dokumente
CICLO 01-2016
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:
<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
Tipo de vieta
Valores
Se aplica a
Valor inicial
disc
Descripcin
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:
</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
Se aplica a
Valor inicial
outside
Descripcin
La diferencia entre los valores outside e inside se hace evidente cuando los
elementos contienen mucho texto, como en la siguiente imagen:
Imagen de la vieta
Valores
Se aplica a
Valor inicial
none
4
Descripcin
Valores
Se aplica a
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
<a>
Atributos
( <href> )
Valor
URL
Descripcin
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
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.
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.
7. Realice los cambios necesarios para que la vieta de los elementos de la lista sea cuadrada en
lugar de ser un disco slido.
<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
<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:
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.
<title>Personalizando listas
<div id="titulo">Bonita forma de personalizar nuestras listas
<li class="mac">Usando <span>Macintosh
13
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:
15
16
17
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
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).
23