html parte3
TRANSCRIPT
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 2/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
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 3/13
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>.
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 4/13
El Atributo TYPE en <OL> • El atributo TYPE puede tomar varios valores, en la siguiente
tabla se muestran los más utilizados:
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 5/13
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>.
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 6/13
El Atributo TYPE en <UL>
• El atributo TYPE puede tomar varios valores, en la
siguiente tabla se muestran los más utilizados:
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 7/13
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>
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 8/13
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 …
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 9/13
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>
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 10/13
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.
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 11/13
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.
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 12/13
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.
7/22/2019 HTML Parte3
http://slidepdf.com/reader/full/html-parte3 13/13
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>