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
