HTML Parte3

7/22/2019 HTML Parte3

http://slidepdf.com/reader/full/html-parte3 1/13



USO DE LISTAS (Numeración y Viñetas)

Las listas sirven para representar enumeraciones o puntos. Hay tres tipos de listas enHTML:

• Listas ordenadas o numeradas:1. Primer elemento

2. Segundo elemento

3. Tercer elemento• Listas desordenadas o no numeradas:

o Primer elemento

o Segundo elemento

o Tercer elemento

• Listas de definiciones:

Primer Término: Definición del primer término puede ser tan larga comose quiera e incluso contener más de una línea.

Segundo Término: Definición del segundo Término

Tercer Término: Definición del tercer Término Otra definición para el tercerTérmino



LISTAS ORDENADAS <OL></OL>• Consisten en un conjunto de elementos ordenados

identificados mediante números griegos (1, 2, ...),números latinos (en mayúsculas I, II, III, IV,..., o minúsculasi, ii, iii, iv, ...) o letras (en mayúsculas: A, B, C, ..., o

minúsculas: a, b, c, ...).• El comienzo y final de la lista se indica mediante las

etiquetas <OL>...</OL>

• Cada elemento de la lista se indica mediante lasetiquetas <li>...</li>

• El atributo TYPE dentro de la etiqueta <OL> nos indica eltipo de marcador elegido para cada elemento de la lista.

Se escribe <OL type="valor">...</OL>.



El Atributo TYPE en <OL> • El atributo TYPE puede tomar varios valores, en la siguiente

tabla se muestran los más utilizados:



LISTAS DESORDENADAS <UL></UL>

• Consisten en una enumeración de elementos dondecada uno de ellos viene indicado mediante un punto,guión, asterisco u otros signos).

•

El comienzo y final de la lista se indica mediante lasetiquetas <UL>...</UL>

• Cada elemento de la lista se indica mediante lasetiquetas <li>...</li>

• El atributo TYPE dentro de la etiqueta <UL> nos indicael tipo de marcador elegido para cada elemento de lalista.

Se escribe <UL type="valor">...</UL>.



El Atributo TYPE en <UL>

• El atributo TYPE puede tomar varios valores, en la

siguiente tabla se muestran los más utilizados:



LISTAS DE DEFINICIONES <DL></DL>

• Consisten en conjunto de términos acompañadosde sus definiciones.

• El comienzo y final de la lista se indica mediante

las etiquetas <DL>...</DL> • Cada elemento de la lista consta al menos de dos

partes:

1. Lo que llamamos término e indicamos mediante

las etiquetas <dt>...</dt>2. Lo que llamamos definición o

descripción <dd>...</dd>



USO DE ENLACES (links) - <A></A>• Los enlaces son textos o imágenes que permiten direccionarnos a

determinadas paginas; utilizan la etiqueta <A> … </A> . Esta etiquetacontiene los siguientes atributos:

HREF .- Para definir con que pagina se enlazará al hacer clic

TARGET .- Para definir el destino del link; es decir en que tipo de ventana se mostrará,pudiendo ser (_blank, _self, _top) – ventana vacía, en la misma ventana, en la pantallaactual.

NAME .- Para definir algo así como "un punto de aterrizaje" en cualquier línea deldocumento destino, de forma que nos aparecerá en pantalla desde la línea deseada yno desde el principio.

Por ejemplo se escribirá así:<A HREF="http://www.google.com"> Ir a GOOGLE … </A>

y éste sería el resultado:Ir a GOOGLE …



Enlaces a Determinadas Lineas

<A NAME= … > </A> • Para que el enlace se realice en determinada línea de otra

pagina se escribirá así:<A HREF=“ejemplo.htm#punto1"> Ir al punto 1</A>

• En el documento destino:

<A NAME="punto1"></A>

• Para que el enlace se realice en determinada línea dentro de

la pagina activa se escribirá así:<A HREF="#punto1">Ir al punto 1</A>

• En el documento destino:

<A NAME="punto1"></A>



USO DE TABLAS - <TABLE></TABLE>

• Las tablas son sin duda uno de los elementos más potentes

del HTML. Las celdas de una tabla pueden contener

elementos como texto, imágenes, enlaces, etc.

• La etiqueta básica de definición de tabla es <TABLE> </TABLE>y en su interior se disponen las sub etiquetas <TR> para

definir una fila (Row) <TH> para definir una cabecera (Header)

<TD> para definir una celda de datos (Data). Estos sub

elementos también han de llevar sus correspondientescierres: </TR> </TH> </TD>.

• Las etiquetas para edición de tablas contienen sus respectivos

atributos.



Atributos para Etiquetas de Tablas

• Aquí una tabla-resumen de las etiquetas usadaspara tablas y los atributos que admite cada una:

X

X

X

X

permite unir celdas por filas.

alineaciòn vertical

permite unir celdas por comlumnas.



Atributos para Etiquetas de Tablas • BORDER Indica el ancho de los bordes de la tabla. Se mide en píxels.

BORDERCOLOR Establece el color de los bordes de la tabla.

• CELLSPACING Indica el número de píxels que separan una celda de otra.

• CELLPADDING Indica los píxels de separación entre el borde de la celda y su contenido. Suvalor por defecto es 1.

• WIDTH Sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en<TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de lapantalla.

• ALIGN Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tresvalores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).

• VALIGN Indica la alineación vertical de los datos dentro de las celdas. Puede tener tresvalores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).

• ROWSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar quesu anchura o altura son equivalentes a un determinado número de filas.

• COLSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar quesu anchura o altura son equivalentes a un determinado número de columnas.



Ejemplo Tabla Basica de 3x2

<TABLE BORDER>

<TR>

<TD>A</TD> <TD>B</TD>

<TD>C</TD> </TR>

<TR>

<TD>D</TD> <TD>E</TD>

<TD>F</TD> </TR>

</TABLE>

Ejemplo Tabla con Cabeceras

<TABLE BORDER>

<TR>

<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>

</TR>

<TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD>

</TR>

<TR>

<TD>D</TD> <TD>E</TD> <TD>F</TD>

</TR>

</TABLE>

HTML Parte3

Documents

Transcript of HTML Parte3