Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

HTML
Elementos más complejos

Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007

Listas

Una lista es simplemente una secuencia de ítems,

cada uno de los cuales se identifica mediante una bala
(viñeta), un número o por medio del sangrado.
HTML contempla tres tipos de listas:

Listas Listas Listas de

sin orden con orden definiciones

El lenguaje HTML: Elementos más complejos HTML: 3 - 1

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Listas sin orden

Los ítems de la lista se muestran con balas (viñetas)

a su izquierda (discos -por defecto-, círculos o cuadros).
Elemento para la lista entera: UL (Unordered List)
<UL>...</UL>
Elemento para cada ítem de la lista: LI (List Item)
<LI>...</LI>
<UL>
<LI>Marco geográfico</LI>
<LI>Política</LI>
<LI>Economía</LI>
<LI>Sociedad</LI>
<LI>Cultura</LI>
<LI>Vida cotidiana</LI>
</UL>

El lenguaje HTML: Elementos más complejos HTML: 3 - 2

Listas sin orden

Para indicar explícitamente el tipo de bala a mostrar

se usa el atributo TYPE.
El atributo TYPE puede tomar estos valores:
disc circle square

<UL TYPE="square">...</UL>

El lenguaje HTML: Elementos más complejos HTML: 3 - 3

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Listas sin orden en HomeSite

HomeSite tiene una ficha Lists en la barra de acceso

rápido que incluye herramientas para ayudar en la
creación de listas.
Se crea una nueva lista sin orden con el botón UL.
Dentro de un elemento UL se crea un nuevo ítem
con el botón LI.

Asistente para listas

El botón Quick list de la barra de acceso rápido Lists
muestra un cuadro de diálogo que permite especificar
las opciones para insertar una nueva lista (sirve tanto
para listas sin orden como para listas sin con orden).

El lenguaje HTML: Elementos más complejos HTML: 3 - 4

Listas sin orden en HomeSite

Cuadro de diálogo List

El lenguaje HTML: Elementos más complejos HTML: 3 - 5

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Anidamiento de listas
<UL>
<LI>Marco geográfico</LI>
<LI>Política</LI>
<LI>Economía</LI>
<LI>Sociedad</LI>
<LI>Cultura</LI>
<UL>
<LI>Arte</LI>
<LI>Ciencia</LI>
<UL>
<LI>Formales</LI>
<UL>
<LI>Matemáticas</LI>
<LI>Lógica</LI>
</UL>
<LI>Humanidades</LI>
</UL>
</UL>
<LI>Vida cotidiana</LI>
</UL>

El lenguaje HTML: Elementos más complejos HTML: 3 - 6

Listas con orden

Los ítems de la lista se muestran con un esquema de

numeración (números -por defecto-, letras o romanos,
en mayúscula/minúscula).
Elemento para la lista entera: OL (Ordered List).
<OL>...</OL>
Elemento para cada ítem de la lista: LI (List Item).
<OL>
<LI>Peras</LI>
<LI>Naranjas</LI>
<LI>Limones</LI>
<LI>Fresas</LI>
<LI>Melocotones</LI>
<LI>Melones</LI>
<LI>Arándanos</LI>
</OL>

El lenguaje HTML: Elementos más complejos HTML: 3 - 7

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Listas con orden

Para indicar explícitamente el tipo de numeración a

mostrar se usa el atributo TYPE.
El atributo TYPE puede tomar estos valores:
1 a A i I
Para indicar explícitamente el "número" por el que se
debe empezar la numeración se usa el atributo START.
El atributo START toma un número como valor.

<OL TYPE="i" START="3">...</UL>

HomeSite también incluye botones

para listas con orden.

El lenguaje HTML: Elementos más complejos HTML: 3 - 8

Listas de definiciones

Para elaborar glosarios, aunque pueden resultar útiles

en otras situaciones; son pares término-definición.
Elemento para la lista entera: DL (Definition List).
<DL>...</DL>
Elemento para cada término: DT (Definition Term).
<DT>...</DT>
Elemento para cada definición: DD (Definition Def).
<DD>...</DD>
HomeSite también tiene botones en la barra de acceso
rápido Lists para crear listas de definiciones.

El lenguaje HTML: Elementos más complejos HTML: 3 - 9

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Ejercicio sobre listas

Fondo: #B0A0C0

Listas.html

Arial en
color #008000

Arial

Courier New

El lenguaje HTML: Elementos más complejos HTML: 3 - 10

Ejercicio sobre listas

Listas.html

Courier New

Archivo
de partida

El lenguaje HTML: Elementos más complejos HTML: 3 - 11

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Mapas de imágenes

Definición de áreas sensibles en las imágenes: zonas de

la imagen que pueden tener asociado un vínculo.
Dos tipos de mapas:
9 Mapas gestionados por el cliente (navegador).
9 Mapas gestionados por el servidor.
Simplemente se envían al servidor las
coordenadas sobre las que ha pulsado el usuario
sobre la imagen y el servidor decide.
Aquí vemos los mapas de imágenes de cliente.
Identificación del mapa y posterior asociación del mapa
con la imagen:
<MAP NAME="ucm">...</MAP>
<IMG SRC="UCM.jpg" USEMAP="#ucm"
ALT="Universidad Complutense de Madrid">
El lenguaje HTML: Elementos más complejos HTML: 3 - 12

Mapas de imágenes

Cada mapa se crea para una imagen concreta,

ya que se construye en base a sus dimensiones.

Cada área del mapa se establece

dentro del elemento MAP
con un elemento AREA.
113 píxeles
La forma de cada área se indica
con el atributo SHAPE:
zona rectangular (rect),
circular (circle) o poligonal (poly). 95 píxeles

Con el atributo COORDS se delimita la zona (esquinas

superior izquierda e inferior derecha, centro y radio,
secuencia de puntos).
Los valores (coordenadas, radio) se separan con comas.

El lenguaje HTML: Elementos más complejos HTML: 3 - 13

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Mapas de imágenes

Supongamos que queremos "dividir" la imagen en

cuatro zonas rectangulares del mismo tamaño (aprox).

0 47 48 94

0
113 píxeles

56
57

95 píxeles
112

Las zonas rectangulares se delimitan con las esquinas

superior izquierda e inferior derecha:
0,0,47,56 48,0,94,56
0,57,47,112 48,57,94,112

El lenguaje HTML: Elementos más complejos HTML: 3 - 14

Mapas de imágenes

A cada área le asignaremos un destino con el atributo

HREF, creando zonas hipervinculadas (e igual que con el
elemento IMG, podemos establecer textos alternativos
con el atributo ALT).
El elemento MAP quedaría con la siguiente forma:
<MAP NAME="ucm">
<AREA HREF="estudios.html" SHAPE="rect"
COORDS="0,0,47,56" ALT="Estudios">
<AREA HREF="alumnos.html" SHAPE="rect"
COORDS="48,0,94,56" ALT="Alumnos">
<AREA HREF="docentes.html" SHAPE="rect"
COORDS="0,57,47,112" ALT="Docentes">
<AREA HREF="institucional.html" SHAPE="rect"
COORDS="48,57,94,112" ALT="Institucional">
</MAP>

El lenguaje HTML: Elementos más complejos HTML: 3 - 15

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Ejercicio sobre mapas de imágenes

Crear una nueva página Mapa.htm y colocar la imagen

HTML.jpg.
La imagen tiene unas dimensiones de 200 x 160.

160 píxeles

200 píxeles

Aplica a la imagen un mapa que la divida en cuatro

zonas rectangulares y que se llame HTML.

El lenguaje HTML: Elementos más complejos HTML: 3 - 16

Ejercicio sobre mapas de imágenes

Cada zona del mapa estará vinculada con las páginas

que se indican a continuación:

EjMapa.html

Formatos.html Hiper.html

Imágenes.html Listas.html
Archivo
de partida

El lenguaje HTML: Elementos más complejos HTML: 3 - 17

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Tablas

Una tabla en HTML es lo mismo que en otros tipos de

documentos: un conjunto de filas en las que hay celdas;
las correspondientes celdas de las distintas filas
conforman columnas.
Las celdas de las tablas pueden contener casi cualquier
cosa: texto, imágenes y otros elementos multimedia,
vínculos, formularios, otras tablas, objetos, ...
Las celdas de una tabla se pueden combinar entre sí
para obtener celdas que se expanden a través de varias
filas o varias columnas:

El lenguaje HTML: Elementos más complejos HTML: 3 - 18

Elementos para la creación de tablas

Definición de una tabla:

<TABLE>...</TABLE>
Dentro del elemento TABLE:
Leyenda asociada a la tabla (arriba por defecto):
<CAPTION>...</CAPTION>
Definición de una fila de la tabla:
<TR>...</TR>
Dentro de una fila de una tabla:
Celda con datos:
<TD>...</TD>
Celda con encabezamiento:
<TH>...</TH>

El lenguaje HTML: Elementos más complejos HTML: 3 - 19

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Tablas

<TABLE> <TD>0,724</TD>
<CAPTION>Distancias <TD>0,723</TD>
medias al Sol</CAPTION> </TR>
<TR> <TR>
<TD></TD> <TH>Tierra</TH>
<TH>Copérnico</TH> <TD>1,0000</TD>
<TH>Kepler</TH> <TD>1,000</TD>
<TH>Siglo XX</TH> <TD>1,000</TD>
</TR> </TR>
<TR> <TR>
<TH>Mercurio</TH> <TH>Marte</TH>
<TD>0,3763</TD> <TD>1,5198</TD>
<TD>0,389</TD> <TD>1,523</TD>
<TD>0,387</TD> <TD>1,524</TD>
</TR> </TR>
<TR> <TR><TD>En unidades
<TH>Venus</TH> astronómicas</TD></TR>
<TD>0,7193</TD> </TABLE>

El lenguaje HTML: Elementos más complejos HTML: 3 - 20

Tablas

Tabla.html

La anchura de las celdas

se ajusta al contenido más largo

El lenguaje HTML: Elementos más complejos HTML: 3 - 21

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Formato general de la tabla

<TABLE BORDER="2" CELLSPACING="2"

CELLPADDING="2">...</TABLE>
BORDER: grosor del borde que rodea la tabla (píxeles).
CELLSPACING: espacio entre las celdas (píxeles).
CELLPADDING: espacio entre los límites de las celdas.

El lenguaje HTML: Elementos más complejos HTML: 3 - 22

Formato de celdas

Color de fondo para una fila:

<TR BGCOLOR="#008080">...</TR>
<TR BGCOLOR="#C0C0C0">...</TR>

El lenguaje HTML: Elementos más complejos HTML: 3 - 23

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Formato de celdas

Alineamiento horizontal de los datos en las celdas:

TD: A la izquierda por defecto.
TH: Centrado por defecto.
<TD ALIGN="center">...</TD>
<TH ALIGN="left">...</TH>
Por ejemplo, alineamos los planetas a la izquierda:

El lenguaje HTML: Elementos más complejos HTML: 3 - 24

Más sobre formato de tablas

Alineamiento vertical de los datos en las celdas:

<TD VALIGN="bottom">...</TD>
<TH VALIGN="top">...</TH>
Valores posibles para VALIGN: top, middle, bottom.
Ancho total para la tabla:
<TABLE WIDTH="50%">...</TABLE>
(Porcentaje respecto del ancho de la ventana.)
<TABLE WIDTH="400">...</TABLE>
(Ancho fijo en píxeles.)
Ancho y alto de una celda (ancho para toda la columna):
<TD WIDTH="30%" HEIGHT="40">...</TD>
(Ancho en porcentaje respecto del ancho de la tabla.)

El lenguaje HTML: Elementos más complejos HTML: 3 - 25

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Agrupación de celdas

Combinación de varias celdas de una misma fila:

<TD ALIGN="right" COLSPAN="4">En unidades
astronómicas</TD>

Para combinar varias celdas de una misma

columna se usa el atributo ROWSPAN.

El lenguaje HTML: Elementos más complejos HTML: 3 - 26

Ejercicio sobre tablas

Tabla1.html

Color:
56,120,85
(#387855)

Archivo
de partida

www.ucm.es www.upm.es www.uax.es www.uem.es

El lenguaje HTML: Elementos más complejos HTML: 3 - 27

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Otro ejercicio sobre tablas

Todo en
negrita
Tabla2.html

Comic
Sans MS
Tamaño: +2

Archivo
de partida

40% CELL-PADDING: 10

El lenguaje HTML: Elementos más complejos HTML: 3 - 28

Universidad Complutense de Madrid Universidade Federal de Santa Catarina