Creación de Listas y Tabas
Temario:
- Listas
- Código para crear Listas
- Pasos para Construir las listas
- Tablas
- Código para crear Tablas
- Pasos para Construir Tablas
Código para crear Listas
Las páginas son a menudo acerca de datos, y los datos se organizan con frecuencia en las listas.
<!DOCTYPE HTML><html lang = "es"><head><title>Listas</title><meta charset = "utf-8" /></head><body><h2>Idiomas</h2><ul><li>Español</li><li>Ingles</li><li>Ruso</li></ul><h2>Listas Ordenadas</h2><ol><li>Uno</li><li>Dos</li><li>Tres</li></ol><h2>Lista sobre otra lista</h2><ul><li>Español<ol><li>uno</li><li>dos</li><li>tres</li></ol></li><li>Japanese<ol><li>ichi</li><li>ni</li><li>san</li></ol></li></ul></body>
</html>
Pasos Para construir una lista
Las listas, como la mayoría de los elementos HTML, son muy fáciles de construir.
1. Designar al principio de la lista con <ul> o <ol>.
La etiqueta <ul> indica una (única) lista desordenada, la cual aparece con viñetas
La etiqueta <ol> se utiliza para describir una lista ordenada.
Cuando se utiliza CSS para dar esilo a las listas, se pueden tener muchos tipos diferentes de marcas, incluyendo números, Números romanos, viñetas, o gráficos personalizados.
2. Marque cada elemento con una <li> </ li> par.
La etiqueta <li> se utiliza para indicar un elemento de la lista. Todos los elementos de la lista deben estar incluidos en los elementos <li>.
3. (Opcional) Una lista dentro de otra lista.
El <li> de una lista puede contener toda una lista nueva. Esta es la técnica utilizada para construir las listas anidadas en el último ejemplo. Sólo asegúrese de cerrar una lista antes de iniciar una nueva. Tabulación adecuada, ayuda a mantener un registro de lo que está anidado.
Código para crear Tablas
<!DOCTYPE HTML><html lang = "es"><head><title>Listas</title><meta charset = "utf-8" /></head><body><h2>Idiomas</h2><ul><li>Español</li><li>Ingles</li><li>Ruso</li></ul><h2>Listas Ordenadas</h2><ol><li>Uno</li><li>Dos</li><li>Tres</li></ol><h2>Lista sobre otra lista</h2><ul><li>Español<ol><li>uno</li><li>dos</li><li>tres</li></ol></li><li>Japanese<ol><li>ichi</li><li>ni</li><li>san</li></ol></li></ul></body>
</html>
Pasos Para crear Tablas
Al examinar el código, se puede ver que una tabla, es simplemente un conjunto etiquetas anidadas.
1. Planifique su primera tabla.
Es mucho más fácil construir una tabla en HTML si ya saber cómo va a estar estructurada. Usted debe saber cuántas columnas tendrá, y qué filas o columnas serán titulares.
Es una buena idea esbozar su tabla en papel si no está seguro de estas cosas.
2. Comience la tabla con la etiqueta <table>.
La etiqueta <table> y </ table> par, encierra toda la tabla.
3. Crear un registro de la tabla con <tr>.
La tabla se define con una serie de filas. Utilice la <tr> </ tr> par de encerrar cada fila de datos.
4. Coloque los elementos titulares de la tabla entre las etiquetas <th> y </th>.
A menudo, la fila superior contendrá los encabezados, (a veces la columna izquierda también lo hará).
Utilice las etiquetas <th> y </th> par para significar que texto debe ser tratado como una celda de encabezado.
Por defecto, el texto de estas columnas aparecen centradas y en negritas, pero eso se puede cambiar con CSS.
5. Especifique las celdas de datos comunes con las etiquetas <td> y </td>.
El <td> </ td> par, se utiliza para especificar una celda de datos ordinaria. La mayoría de las células de la tabla se especifica mediante etiquetas td.
6. Mantener el número de células consistente.
Cada fila debe tener el mismo número de columnas. (Aunque hay técnicas que permiten ampliar una columna, lo cual veremos posteriormente)
7. Añadir CSS según sea necesario.
Tablas tienen un formato básico, pero como de costumbre, usted puede cambiar las cosas con CSS.
He añadido estilos parra el borde de este ejemplo, aunque es muy básico.
8. No utilice tablas para maquetar.
Las primeras versiones de HTML no tenían suficiente apoyo para el diseño (creación de columnas y diseño de página). Antiguamente los diseñadores empleaban las tablas para dar una determinada estructura, lo cual ya no es un recurso eficiente ni pensable en la práctica profesional.
No hay comentarios:
Publicar un comentario