LISTAS Y TABLAS
Es importante entender que la buena organizacion del material contenido en una pagina web es un elemento muy importante para la “usabilidad: del propio sitio.
Por ejemplo escribir una sola idea en un solo parrafo es muy importante para la claridad y comprension del usuario.
Listas y tablas son maneras de organizar el conocimiento de manera facil y organizada pata su facil entendimiento por parte del usuario del sitio.
<UL>…</UL>
Lista no ordenada, cada uno de sus elementos deben ir dentro de un tag LI, sus atributos son TYPE=[disc, square circle]
Ejemplo
<UL TYPE=disc>
<LI>conejos blancos</LI>
<LI>conejos verdes</LI>
<LI>conejos rojos</LI>
</UL>
Despliegue:
El atributo o propiedad TYPE produce diferentes tipos de “BULLETS”.
<OL>…</OL>
Lista Ordenada se utiliza para desplegar un conjunto ordenado de elementos, lo de ordenado significa que los elementos estaran acompañados de alguna notacion o simbologia creciente.
Los elementos de esta lista tambien se cargan con el tag <LI>elemento</LI>
Sus atributos principales son, TYPE=[1,a,A,i,I] donde:
“1” ←- numeros arabigos (1,2,3..default si no se usa TYPE)
“a” ←- alfabeto en minusculas (a,bc,d…)
A ←- alfabeto en mayusculas (A,B,C..)
“i” ←–numeros romanos minusculas (i,ii,iii…)
“I” ←—numeros romanos en mayusculas (I,II,III..)
Ejemplo
<OL TYPE=i>
<LI>conejos blancos</LI>
<LI>conejos verdes</LI>
<LI>conejos rojos</LI>
</OL>
despliegue
<TABLE>..</TABLE>
Su estructura completa debe incluir los siguientes tres elementos:
<TR>..</TR> ←- renglon
<TH>..<TH> ←- celda de encabezado
<TD>..</TD> ←–celda de dato o informacion
La tabla es un conjunto organizado de datos o informacion distribuidos en n columnas y m renglones.
Las propiedades de <TABLE> son:
ALIGN=[left,center,right] ←- Alinea toda la tabla, los datos en celdas pueden usar su propio ALIGN
WIDTH=[npixels, p%] ←- el tamaño completo de la tabla ejemplo 400px (400 pixels) o 75% (75% del browser)
* Es muy recomendable trabajar mejor con % de la ventana del browser, para que se ajuste la tabla automaticamente a la resolucion de pantalla que tenga el usuario.
BORDER=x ←- Tamaño del marco de toda la tabla, no de las celdas
CELLSPACING = x ←- Tamaño en pixels blancos que debe haber entre celdas individuales
CELLPADDING = x ←- Pixels blancos entre el dato y el marco de la celda
<TR>..</TR> Renglon de la tabla, tiene como atributos o propiedades:
ALIGN=[left,rigth,center] Alineacion horizontal de todo el RENGLON
VALIGN=[top,middle,bottom] Alineacion vertical de todo el RENGLON
<TD>..</TD> Celda individual de la tabla y es quien contiene el dato o informacion sus ppropiedades o atributos son:
ROWSPAN=n ←- Cantidad de renglones que traslapa, es decir esta celda puede abarcar mas de un renglon.
COLSPAN=n ←- Cantidad de columnas que traslapa, es decir esta celda pueda abarcar mas de una columna.
NOWRAP ←- El dato o informacion se desplegara en forma continua sin cambios de renglon, es decir si se usa NOWRAP dentro del texto se tendra que usar <BR> para cambios de renglon
ALIGN y VALIGN ←- Alineacion horizontal y vertical de la celda.
WIDTH y HEIGHT ←- Cantidad SUGERIDA de pixels para el tamaño de la celda.
<TH>..</TH> ←- Celda para encabezados de columnas y tiene las mismas propiedades o atributos del tag <TD>
Ejemplo
<H2>Los Conejos Del Himalaya</H3>
<TABLE BORDER=10px WIDTH=75% HEIGHT=100px>
<TR>
<TH>COLOR CONEJO</TH>
<TH>RECETA</TH>
</TR>
<TR>
<TD>conejos blancos</TD>
<TD>guisado</TD>
</TR>
<TR>
<TD>conejos verdes</TD>
<TD>asado</TD>
</TR>
<TR>
<TD>conejos rojos</TD>
<TD>al carbon</TD>
</TR>
</TABLE>
Despliegue:
Bien espero que este tutorial de algo les sirva y lo estare actualizando continuamente con mas de los tags que vienen en la definicion completa de html.
Recordar que tambien se incluyen algunos apendices muy utiles de HTML
Fuente:enlace
No hay comentarios:
Publicar un comentario