HTML

LINEAS

<HR > l nea horizontal

<HR width= "x% "> Anchura de la lnea en %
<HR width= x> Anchura de la lnea en pxeles
<HR size=x> Alt ura de la l nea en pxeles
<HR color=color> C olor de la lnea
<HR align=center> l nea centrada
<HR align=left> l nea ali neada a la izquierda
<HR align=right > l nea ali neada a la derecha
<HR noshade> l nea sin efecto de sombreado

LISTAS
Organizan elementos en forma ordenada, no ordenada, usando o no numeraciones, y vietas

Tipos de Listas

1. Sin orden
2. Ordenadas
Listas Regulares
3. De directorios
4. De men
5. De definicin
Las 4 primeras se denomina listas regulares, por hacen uso de la directiva <LI>
Lista no ordenadas
<UL>
<LI>Sin orden</LI>
<LI>Ordenadas</LI>
<LI>De directorio</LI>
<LI>De definicin</LI>
</UL>

1. Listas sin orden.Usa la directiva <UL>

Sintaxis:
<UL>Lista </UL>
Por defecto coloca la vieta
Las vietas se pueden cambiar agregando el atributo Type
Ejm.
<UL type=circle>
<UL type=square>
<UL type=circle>

2. Listas Ordenadas. Permite numerar la lista.

Sintaxis:
<OL>Lista</OL>
Tambien usa el atributo Type, para escoger el tipo de numeracin
Type=1 Nmeros por defectos (arab ojos)
Type=A Letras en maysculas
Type=a Letras en minsculas.
Type=I Nmeros en romanos
Type=i Nmeros en romas en minsculas
Si se desea que la lista empiece desde un # determinado se usa el atributo Stara
<OL Type=tipo Stara=#

Docente: Jaime Villaverde Gonzales Pag.1

 HTML
3. Listas de directorios. Igual a la lista sin orden
Sintaxis:
<DIR>Lista</DIR>

4. Listas de mens. Igual a la lista sin orden.

Sintaxis:
<MENU>Lista</MENU>
5. Lista de definicin. Lista sin numeracin que permite describir a cada uno de los
elementos de la lista, como en los glosarios.
Sintaxis:
<DL>Lista</DL>
Donde:
Lista usa las directivas <DT> y <DD>
Sintaxis:
<DL>
<DT>Texto1
<DD>Descripcin del texto1
<DT>Texto1
<DD>Descripcin del texto1
</DL>

Anidamiento de listas.-Se pueden usar combinaciones en las listas y anidarlas para mostrar
texto en forma jerrquica.
Ejm.
<dl>
<dt> Sin Orden
<dd>Desarrollo web
<dt>
<dd>Administracin de Redes
<dt>
<dd>Desarrollo de Proyectos
</dl>
<ul>
<li>Carrera profesin de Computacin e Informtica
<ul>
<li>Cursos Bsicos
<ul>
<li> Windows
<li>office
<ul>
<li>Word
<li>Excel
<li>Access
<li>Power Point
</ul>
<li>Internet
</ul>
<li>Cursos Intermedios
<li>Cursos Avanzados
</ul>
<li>Carrera tcnica de computacin
</ul>

Docente: Jaime Villaverde Gonzales Pag.2

 HTML
TABLAS
Las tablas sirven para presentar la informacin de una manera ordenada. Dentro de sus celdas
podremos incluir texto, imgenes, etc.

Estructura de una tabla

<Table>
resto de las etiquetas
</Table>
<table>

<tr> <td> <td> </tr>

</td> </td>
<tr> <td> <td> </tr>
</td> </td>
</table>

TR=TABLE ROW
TD=TABLE DATA
TH=TABLE HEADER ( negrita y centrado)
ROWSPAN Y COLSPAN. Atributos de la etiqueta </TABLE>que permite que una celda ocupe
mas de una celda o columna.
<TABLE width="50%" border=1>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD colspan=2 rowspan=2>
<pre>
Texto que
esta ocupando mas de
una fila y columna</pre></TD>
</TR>
<TR>
<TD>5</TD>
</TR>
</TABLE>
1 2 3
4
Texto que
5 esta ocupando mas de
una fila y columna

CELLSPACING.- Separacin entre las celdas de una tabla.

CELLPADDING.- Separacin entre el borde y el contenido dentro de las celdas
Son atributos de la etiqueta TABLE

Docente: Jaime Villaverde Gonzales Pag.3

 HTML

Atributos de <TABLE cellSpacing=1 cellPadding=1 width="40%" border=1>

Ejemplo alineacin:Align y <TR>
<TD>Ejemplo</TD>
valign
<TD colspan=3>Atributos de alineacin:Align y valign</TD>
Alineacin top </TR>
middle <TR>
Vertical bottom
<TD>Alineacin<br>Vertical</TD>
Alineacin <TD valign=top>top</TD>
left center right
Horizontal <TD valign=middle>middle</TD>
<TD valign=bottom>bottom</TD>
</TR>
<table border=1 bordercolor=red width=70% bgcolor=yellow>
<tr> <TR>
<td colspan=5> <marquee behavior=alternate>Ventas Verano 2006</marquee></td>
<TD>Alineacin<br>Horizontal</TD>
</tr> <TD align=left>left</TD>
<tr> <TD align=center>center</TD>
<td width=20%>zona</td>
<TD align=right>right</TD>
<td width=20%>Dastrito</td>
<td width=20%> Gaseosa</th> </TR>
<td width=20%>Helado</th> </TABLE>
<td width=20%>Licor</td>
</tr>
<tr>
<td rowspan=3>Norte</td>
<td>Comas</td>
<td> 750</td>
<td>480</td>
<td>990</td>
</tr>
<tr>
<td>los olivos</td>
<td> 620</td>
<td>475</td>
<td>710</td>
</tr>
<tr>
<td>Independencia</th>
<td> 450</td>
<td>480</td>
<td>156</td>
</tr>

<tr bgcolor=aquamarine>
<td rowspan=3>Sur</td>
<td>S.J.M</td>
<td> 625</td>
<td>325</td>
<td>698</td>
</tr>
<tr bgcolor=aquamarine>
<td>V.E.S</td>
<td> 710</td>
<td>400</td>
<td>899</td>
</tr>
<tr bgcolor=aquamarine>
<td>S.J.L</td>
<td> 460</td>
<td>550</td>
<td>810</td>
</tr>
</table>

Docente: Jaime Villaverde Gonzales Pag.4