Mapas

 Mapas: son un caso especial de imágenes y

enlaces.
 Esla combinación de ambos para usar

imágenes como mapas sensibles al ratón.

 Para implementar los mapas se divide la

imagen en zonas y a cada zona se le asocia

un enlace distinto.
 Mapas
 Se define con la etiqueta <MAP> y </MAP>

 Dentro de este mapa, cada nueva zona de la

imagen se define con la etiqueta <AREA>

 Esta AREA puede tener forma de circulo,

cuadrado o rectangulo.
 Mapas
 <map name=“mi_mapa”>
 <area shape=“rect” coords=“x1,y1,x2,y2”
href=“enlace1.html”>
 <area shape=“circ” coords=“x,y,r”
href=“enlace2.html”>
 <area shape=“poly” coords=“x1,y1,x2,y2,x3,y3…”
href=“enlace3.html”>
 <area shape=“default” nohref>
 </map>
 <img src=“mapa.gif” usemap=“#mi_mapa”>
 Listas
 En HTML existen tres tipos de listas:

◦ Listas no numeradas

◦ Listas numeradas

◦ Listas de definición
 Listas
 Listas no numeradas

 Son una sucesión de elementos sin numerar

 Se utilizan las etiquetas <UL> y </UL>

 Dentro de la lista se definen los elementos de

la misma con las etiquetas <LI> y </LI>
 Ejercicio 8
 Haga una lista de compra, construya una lista
no numerada del estilo:
◦ Lechuga
◦ Tomate
◦ Manzana
◦ Queso
 Listas
 Listas numeradas
 Similares a las listas no numeradas, pero cada

elemento tiene una numeración asociada.

 Se usan las etiquetas <OL> y </OL>
 También se usan <LI> y </LI> para los items

de la lista.
 Ejercicio 9
 Haga una receta de cocina. Construya una
lista numerada del estilo:

 1 hacer las masa y dejarla reposar

 2 pelar, lavar y cortar las manzanas
 3 estirar la masa sobre la bandeja, colocar

encima las manzanas y añadir mermelada

 4 meter al horno hasta que se haga
 Listas
 Listas de definición
 Se emplean para definir términos

 Se emplean las etiquetas <DL> y </DL>

 <DT> y </DT> elemento a definir

 <DD> y </DD> definición del elemento

 Ejercicio 10
 Construya una lista de definición según el
patrón:

 Aserción: afirmación de alguna cosa

 Aserradero: sitio donde sierran la madera

 Listas
 Las listas pueden anidarse.

 Para ello hay que sustituir un elemento de la

lista por la lista completa

 A la hora de representar la lista, el navegador

deja la sangría correspondiente mas la
sublista y cambia el icono
 Listas
 El icono se puede cambiar especificando el
atributo TYPE de la etiqueta que marca el inicio de
la lista

 <UL> sus valores son: disc, circle o square

 <OL> sus valores pueden ser

◦ A: letras mayúsculas
◦ A: letras minúsculas
◦ I: números romanos en mayúscula
◦ i: números romanos en minúscula
◦ 1: números árabes
 Ejercicio 11
 Cambie el icono de la lista no numerada antes
realizada y pruebe con los tres tipos para ver
su aspecto.
 Cambie el icono de la lista numerada antes

realizada y pruebe con los cinco tipos para ver

su aspecto.
 Ponga un icono distinto para cada elemento de

las listas anteriormente definidas.

 Haga que la lista numerada anterior empiece

en 5 y que a mitad de la lista salte varios

números entre dos elementos.
 Proyecto
Uso de múltiples elementos
 Proyecto
Uso de múltiples elementos