PDF de programación - Diseño y creación de páginas web: Tema 5. Estructuración de contenidos

Tema 5. Estructuración de contenidos

ETSI ICAI!

Departamento de Sistemas Informáticos!

Rafael Palacios Hielscher!
Cristina Puente Águeda!

Listas!
–  Permiten enumerar una serie de contenidos.
–  Todas ellas se pueden meter unas dentro de otras formando

árboles.

–  El formato general el el siguiente:
<tipo_lista>

<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>

–  Donde <tipo_lista> pueden ser listas desordenadas <ul>,

listas ordenadas <ol>, o listas de definiciones <dl>

Listas desordenadas!
–  La etiqueta <UL> nos permite presentar listas de elementos

sin orden alguno.

–  Cada elemento de la lista irá normalmente precedido por un

círculo como se puede ver en el ejemplo:

<ul>

<LI>Primer elemento
<LI>Segundo elemento
</ul>



Listas desordenadas!
–  La etiqueta <UL> admite el parámetro ‘TYPE’ donde se le
puede indicar al navegador el dibujo que precederá a cada
elemento de la lista

–  Para mayor flexibilidad se admite también como parámetro de

la etiqueta <LI>
<ul>

<LI type=“square”>Primer elemento
<LI type=“circle”>Segundo elemento
<LI type=“disc”>Tercer elemento
</ul>



Listas ordenadas!
–  La etiqueta <OL> nos permite presentar listas de elementos

ordenados de menor a mayor.

–  Normalmente cada elemento de la lista irá precedido por su

número en el orden

<ol>
<LI >Primer elemento
<LI >Segundo elemento
</ol>

Listas ordenadas!
–  La etiqueta <OL> admite una serie de atributos para cambiar

sus características.

–  TYPE Indica al navegador el tipo de numeración que

precederá a cada elemento de la lista. Puede ser igual a ‘l’,
‘a’, ‘A’, ‘i’, ‘I’.

–  START =“num” ,indica al navegador el número por el que se

empezarán a contar los elementos de la lista.

<ol>



</ol>

<LI TYPE="a">Primer elemento

<LI TYPE="A">Segundo elemento
<LI TYPE="i">Tercer elemento

<LI TYPE="I">Cuarto elemento
<LI TYPE="l">Quinto elemento



Listas de definiciones!
–  Es el único tipo de lista que no utiliza la etiqueta <LI>
–  Al presentar una lista de definiciones, tiene que plasmar de

manera distinta el objeto definido y la definición.

–  Esto se hace por medio de las etiquetas <DT> y <DD> de la

siguiente manera:

<DL>
<DT>Primer elemento<DD>Definici&oacute;n del primer elemento.
<DT>Segundo elemento<DD>Definici&oacute;n del segundo elemento.
</DL>

Tablas!
–  Las tablas son posiblemente la manera más clara de

organizar la información.

–  También es el modo más adecuado de maquetar texto y
gráficos de una manera algo más controlada que con los
parámetros ALIGN.

–  Para definir una tabla, primero se deben especificar las

características de la tabla, luego las de cada fila y dentro de
ésta, cada celda.

–  De un modo simplificado, el código de una tabla de una fila y

dos columnas sería el siguiente:

<TABLE>
<TR>

<TD>Contenido de la 1ª celda</TD>
<TD>Contenido de la 2ª celda </TD>

</TR> </TABLE>

Tablas!

–  Para mejorar el aspecto de la tabla, podemos añadir una serie de
atributos a la etiqueta <table> que nos van a permitir modificar los
siguientes parámetros:



border

Grosor del borde que se dibujará alrededor de las celdas

cellspacing Define el número de pixels que separarán las celdas.

cellpadding Especifica el número de pixels que habrá entre el borde de

width

bgcolor

una celda y su contenido.
Especifica la anchura de la tabla

Color de fondo

background

Imagen de fondo

bordercolor Color del borde

align

Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro
(CENTER).

Filas!

–  Cada fila se define con una etiqueta <TR>, que puede tener los

siguientes atributos:

align

valign

Alinea el contenido de las celdas de la fila horizontalmente a
izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
Alinea el contenido de las celdas de la fila verticalmente arriba
(TOP), abajo (BOTTOM) o centro (MIDDLE).

Celdas!

–  Cada celda se define con una etiqueta <td> o <th>
–  Estas etiquetas son equivalentes, pero la última se utiliza para

encabezados, de modo que su interior se escribirá por defecto en
negrita y centrado.

align

valign

width

Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro
(CENTER).
Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro
(MIDDLE).
Especifica la anchura de la celda, tanto en pixels como en porcentaje.

nowrap

Impide que, en el interior de la celda, se rompa la línea en un espacio.

colspam

Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta.

bgcolor

Color de fondo

background

Imagen de fondo

bordercolor Color del borde

rowspam

Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.

Titulo de la tabla!

–  Si lo definimos como BOTTOM el título se colocará al final de la

tabla en lugar del comienzo.

–  La etiqueta <CAPTION> permite incluir un título en la tabla
–  Esta etiqueta admite sólo un parámetro: ALIGN, que es por

defecto TOP.

Ejemplo!
<TABLE border="2" align="center" cellspacing="0"
bordercolor="#ff2233" bgcolor="#226677">
<CAPTION> Primera tabla!!
</CAPTION>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>

Marcos!

–  Un marco (o frame) es una ventana independiente dentro de la

ventana general del navegador.

–  Cada marco tendrá sus bordes y sus propias barras de

desplazamiento.

–  Para crearlos necesitaremos un documento HTML específico,

que llamaremos documento de definición de marcos.

–  En él especificaremos el tamaño y posición de cada marco y el

documento HTML que contendrá.
<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES> ¡Su navegador no soporta frames!
</NOFRAMES> </FRAMESET> </HTML>

Marcos!

Marco 1

Marco 2

Marco 3

Marcos!

–  La etiqueta <body>, es sustituida por un <frameset>
–  En cada FRAMESET se divide la ventana actual (sea la general o
un marco) en varias ventanas definidas o por el parámetro COLS
o por ROWS.

–  En éste, separado por comas, se define el número de marcos y el

tamaño de cada uno.

–  Dentro de la etiqueta <frameset> se define, cada uno de los
marcos poniéndoles un nombre y especificando qué fichero
HTML le corresponde mediante la etiqueta <FRAME>.

–  Por otro lado el contenido que aparecerá en el caso en el que el

navegador no soporte frames <noframes>.

Etiqueta <frameset>!

–  Define las características de un conjunto de marcos.
–  Los atributos principales de la etiqueta son:

frameborder

Para eliminar (frameborder=0), o aumentar el borde de separación entre marcos

framespacing Permite definir el espacio de separación entre marcos.

cols

rows

Para definir el número de columnas que va a ocupar el marco

Permite especificar el número de filas que va a ocupar el marco

–  En el caso de los atributos cols y rows, deberemos asignarles una
lista de tamaños separada por comas. Se admiten los siguientes
formatos de tamaño:
•  Con porcentajes: Al igual que con las tablas, podemos definir el tamaño

de un marco como un porcentaje del espacio total disponible.

•  Absolutos: Si ponemos un número a secas, el marco correspondiente

tendrá el tamaño especificado en pixels.

•  Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos

indicando que queremos todo el espacio sobrante para ese marco.



Etiqueta <frameset>!
–  Las etiquetas <frameset> se pueden anidar

<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html"> </
FRAMESET>
</FRAMESET>

Etiqueta <frame>!
–  Esta etiqueta define tan sólo las características de un marco

determinado. Admite los siguientes parámetros:

name

src

scrolling

noresize

Asigna un nombre a un marco para que después podamos referirnos a él.

Indica la dirección del documento HTML que ocupará el marco.
Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos
por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras
opciones que tenemos son YES y NO.
Si lo especificamos el usuario no podrá cambiar de tamaño el marco.

frameborder Si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan

también este valor a cero.

marginwidth Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.

marginheight

Igual al anterior pero con márgenes verticales.

Acceso a otros marcos!
–  Al definir un enlace, parámetro target, nos permite definir en qué

marco se va a abrir la página seleccionada.


<A HREF="pagina.html" TARGET="principal">

–  También existen cuatro nombres reservados que podremos

Marco en el que
queremos abrir la
página

utilizar en el parámetro TARGET:

–  _top Elimina todos los marcos existente y muestra la nueva

página en la ventana original sin marcos.

–  _blank Muestra la nueva página en una ventana nueva y sin

–  _parent Muestra la nueva página en el <FRAMESET> que

contiene al marco donde se declara el enlace.

–