LISTAS
DE ELEMENTOS EN HTML
Elemento de lista <li>
Cada uno de los elementos de una lista
debe insertarse entre las etiquetas <li> y </li>. Por ejemplo, para insertar en una lista los
siguientes elementos:
·
Perro
·
Gato
·
Periquito
Habría que escribir:
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
Todos los elementos de la lista
deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada
(con viñetas) u ordenada (numerada) como veremos a continuación.
Lista desordenada <ul>
Para que una lista sea desordenada
(con viñetas), sus elementos deberán encontrarse entre las etiquetas <ul>
y </ul>.
A través del atributo type es posible
elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square
(cuadrado).
Por ejemplo, para insertar la
siquiente lista:
- Perro
- Gato
- Periquito
Habría que escribir:
<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
Lista ordenada <ol>
Para que una lista sea ordenada, sus
elementos deberán encontrarse entre las etiquetas <ol> y </ol>.
A través del atributo type es posible
elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas),
A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos
en mayúsculas). El type por defecto es
NUMERICO.
Por ejemplo, para insertar la
siquiente lista:
i. Perro
ii.
Gato
iii.
Periquito
El codigo será:
<ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>
TABLAS <table> </table>
En
este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas
y columnas, y modificar sus propiedades.
Hoy en dia, la mayoría de las páginas
web se basan en tablas, ya que resultan de gran utilidad al mejorar
notablemente las opciones de diseño.
Todos los objetos se alinean por
defecto a la izquierda de las páginas web, pero gracias a las tablas es posible
distribuir el texto en columnas, colocar imágenes al lado de un bloque de
texto, y otra serie de cosas que sin las tablas serían imposibles de
realizarse.
Las
tablas están formadas por celdas, que son los recuadros que se obtienen como
resultado de la intersección entre una fila y una columna.
Para
crear una tabla hay que insertar las etiquetas <table> y </table>.
Entre dichas etiquetas habrá que especificar las filas y columnas que formarán
la tabla.
Fila
<tr>
Es
necesario insertar las etiquetas <tr> y </tr> por cada una de las
filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas
<table> y </table>.
Por
ejemplo, para crear una tabla con cuatro filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o
celda <td>
Para
crear una tabla no basta con especificar el número de filas, es necesario
también especificar el número de columnas.
Es
necesario insertar las etiquetas <td> y </td> por cada una de las
celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que
insertar esas etiquetas entre las etiquetas <tr> y </tr>.
Entre
las etiquetas <td> y </td> se podrá especificar el contenido de
cada una de las celdas.
Propiedades
para Formato de una tabla
Es posible modificar los siguientes atributos de
una tabla:
|
Atributo
|
Significado
|
Posibles valores
|
|
width
|
ancho de la tabla
|
un número, acompañado de % cuando se
desee que sea en porcentaje
|
|
height
|
altura de la tabla
|
un número, acompañado de % cuando se desee que sea en
porcentaje
|
|
cellpadding
|
espacio entre el contenido de las celdas y el borde
|
un número
|
|
cellspacing
|
espacio entre celdas
|
un número
|
|
border
|
grosor del borde
|
un número
|
|
align
|
alineación de la tabla dentro de la página
|
left (izquierda)
right (derecha) center (centro) |
|
bgcolor
|
color de fondo
|
número hexadecimal
|
|
background
|
imagen de fondo
|
número hexadecimal
|
|
bordercolor
|
color del borde
|
número hexadecimal
|
Ejercicio de Listas y Tablas
Codigo HTML para la pagina de ejemplo
<html>
<head>
<title>Ejercicio 4 HTML</title>
</head>
<body>
<h1>EJEMPLO
DE LISTA DESORDENADA</h1>
<ul
type="disc">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
<h1>EJEMPLO
DE LISTA ORDENADA</h1>
<ol type="I">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>
<h1>EJEMPLO
DE LISTAS ANIDADAS</h1>
<h1>LISTA
DE MATERIAS</h1>
<ol type="1">
<li>Materias
basicas</li>
<ol
type="a">
<li>Fisica</li>
<li>Matematicas</li>
</ol>
<li>Materias
tecnicas</li>
<ol
type="I">
<li>Programacion</li>
<li>Diseño
Web</li>
<li>Electricidad y
Electronica</li>
</ol>
</ol>
<h1>EJEMPLO
DE UNA TABLA</h1>
<table border="1"
bgcolor="Pink" bordercolor="Red">
<tr>
<td>Azul</td>
<td>Blanco</td>
</tr>
<tr>
<td>Negro</td>
<td>Gris</td>
</tr>
<tr>
<td>Rojo</td>
<td>Verde</td>
</tr>
</table>
</body>
</html>
No hay comentarios:
Publicar un comentario