Listas
Una lista es una forma de organizar la información en diferentes líneas. Cada uno de los elementos de la lista puede estar precedida por una marca, número, letra o cadena. Las listas pueden anidarse, es decir, podemos crear listas dentro de otras listas. Existen tres tipos de listas:
- listas no ordenadas
- listas ordenadas
- listas de definiciones
Dentro de cada lista los difentes elementos que la componen se indican encerrándoslos entre las etiquetas <li> y </li>.
Listas no ordenadas <ul>
Se crean utilizando la etiqueta <ul>. En este tipo de listas los elementos aparecen precedidos de una marca, que, dependiendo del nivel será diferente. Para escoger el tipo de marca hemos de utilizar el atributo type. Los posibles valores que puede tonar son:
- circle: marcas en forma de circulo (por defecto)
- square: marcas en forma de cuadrado
- disk: marcas en forma de disco
- none: no utilizar ningún tipo de marca
He aqui un ejemplo:
<html>
<head>
<title>ejemplo de lista no ordenada</title>
</head>
<body>
<h1>Ejemplo de lista no ordenada</h1>
<ul>
<li>primer elemento</li>
<li>segundo elemento
<ul>
<li>primer elemento</li>
<li>segundo elemento</li>
<li>tercer elemento</li>
<li>cuarto elemento</li>
</ul>
</li>
<li>tercer elemento</li>
<li>cuarto elemento</li>
</ul>
</body>
</html>
Resultado del ejemplo:
- primer elemento
- segundo elemento
- primer elemento
- segundo elemento
- tercer elemento
- cuarto elemento
- tercer elemento
- cuarto elemento
Listas ordenadas <ol>
Para crear una lista de este tipo debemos utilizar la etiqueta <ol>. En este tipo de listas los elementos aparecen ordenados mediante una secuencia de números o letras. Para escoger el tipo de marca hemos de utilizar el atributo type. Los posibles valores que puede tonar son:
- 1: secuencia de números (por defecto)
- a: secuencia de letras minúsculas
- A: secuencia de letras mayúsculas
- i: secuencia de números romanos en minúsculas
- I: secuencia de números roimanos en mayúsculas
También podemos utilizar lo atributo start para indicar el valor inicial que debe tomar la lista. Además la etiqueta <li> posee otro atributo llamado value que nos permitirá modificar el número de cualquier elemento de la lista de forma individual.
Ejemplo:
<html>
<head>
<title>ejemplo de lista ordenada</title>
</head>
<body>
<h1>Ejemplo de lista ordenada</h1>
<table>
<td>
<ol>
<li>primer elemento</li>
<li>segundo elemento</li>
<li>tercer elemento</li>
</ol>
</td>
<td>
<ol type=a>
<li>primer elemento</li>
<li>segundo elemento</li>
<li>tercer elemento</li>
</ol>
</td>
<td>
<ol type=A>
<li>primer elemento</li>
<li>segundo elemento</li>
<li>tercer elemento</li>
</ol>
</td>
<td>
<ol type=i>
<li>primer elemento</li>
<li>segundo elemento</li>
<li>tercer elemento</li>
</ol>
</td>
<td>
<ol type=I>
<li>primer elemento</li>
<li>segundo elemento</li>
<li>tercer elemento</li>
</ol>
</td>
</table>
</body>
</html>
Resultado del ejemplo:
- primer elemento
- segundo elemento
- tercer elemento
|
- primer elemento
- segundo elemento
- tercer elemento
|
- primer elemento
- segundo elemento
- tercer elemento
|
- primer elemento
- segundo elemento
- tercer elemento
|
- primer elemento
- segundo elemento
- tercer elemento
|
Listas de definiciones <dl>
Las listas de definiciones muestran un término y su definición. Su uso es ligeramente diferente a los dos tipos de listas vistos anteriormente. Para crear una de esta listas hemos de emplear las etiquetas <dl> y </dl>. En su interior hemos de utilizar dos etiquetas diferentes: <dt> para identificar el término que deseamos describir y <dd> para señalar la defición que deberá emparejarse con el término anterior.
Ejemplo:
<html>
<head>
<title>ejemplo de lista de definiciones</title>
</head>
<body>
<DL>
<DT>HTML
<DD>This tag marks a text file as an HTML document.
<DT>HEAD
<DD>This tag encloses the heading for the HTML document.
<DT>BODY
<DD>This tag displays the body for the HTML document.
<DT>DL
<DD>This tag displays a definition list in the HTML document.
<DT>DT
<DD>This tag displays a term in a definition list.
<DT>DD
<DD>This tag displays a definition description.
</DL>
</body>
</html>
Resultado del ejemplo:
- HTML
- This tag marks a text file as an HTML document.
- HEAD
- This tag encloses the heading for the HTML document.
- BODY
- This tag displays the body for the HTML document.
- DL
- This tag displays a definition list in the HTML document.
- DT
- This tag displays a term in a definition list.
- DD
- This tag displays a definition description.
Enlaces
Los enlaces se crean mediante la etiqueta <a>. Como veremos a continuación, esta etiqueta puede hacer cosas muy diferentes en función de cuales de sus atributos utilicemos y como. Aquí sólamente veremos el uso de dos ellos: href y name.
El primer uso que veremos es el del atributo name para crear identificadores dentro de una página para, así, luego poder saltar a ellos. La forma de crear un identificador es:
<a name="identificador">
Para poder saltar a otra parte, tanto dentro del mismo documento como en cualquier otra direción de la red, hemos de usar el atributo href de la siguiente forma:
<a href="dirección">
Para saltar a otra parte dentro de un mismo documento primero habremos de definir un identificador mediante name y después saltar a él mediante href. Los saltos dentro del mismo documento so especiales y es necesario añadir un caracter # antes del identificador en href.
Para pasar a cualquier otro documento de nuestro sistema de ficheros simplemente utilizaremos el atributo href al que pondermos la dirección del documento de destino. Esta direccción puede especificarse tanto de forma absoluta como relativa al directorio del documento de origen.
También podremos saltar a páginas servidas por un servidor web utilizando la siguiente sintaxis:
<a href="http://www.geneura.org">
Otro uso es poder descargarnos directamente ficheros a través del protocolo FTP. Veamos como hacerlo:
<a href="ftp://ftp.geneura.org/datos.txt">
Para enviar un correo electrónico:
<a href="mailto:pepe@sucasa.es">
Para escribir a un grupo de noticias:
<a href="news:migrupo@colegas.es">
Para conectarnos mediante telnet a otro ordenador:
<a href="telnet://mipc.es">
Gráficos
Los gráficos se añaden al documento mediante la etiqueta <img>. Esta posse una gran cantidad de atributos para modificar su comportamiento. Veamos algunos de los más importantes:
- src: localización de la imagen
- lowsrc: localización de una imagen de baja resolución que se mostrará mientras la imagen es cargada
- alt: texto que se mostrará si la imagen no está displonible
- height: altura de la imagen
- width: anchura de la imagen
- align: alineación horizontal respecto al texto: left, right o center
- valing: alineación vertical: top, bottom o middle
- border: grosor del borde
Ejemplo:
<html>
<head>
<title>ejemplo de imagen</title>
</head>
<body>
<table>
<td> <img src="apple.jpg" align=top border=0> align=top </td>
<td> <img src="apple.jpg" align=center border=1> align=center </td>
<td> <img src="apple.jpg" align=bottom border=4> align=bottom </td>
</table>
</body>
</html>
Resultado del ejemplo:
 align=top |
align=center |
align=bottom |
Tablas
Las tablas son utilizadas con más frecuencia de la que en principio se pudiera pensar. Esto se debe a que no sólo se usan para crear tablas propiamente dichas, sino que con frecuencia toda una página es en realidad una tabla y entonces su uso se debe a su capacidad distribuir los diferentes elementos de forma ordenada.
Las tablas se crean utilizando las etiquetas <table> y </table>. Veamos algunos de sus atributos más importantes:
- align: posición horizontal de la tabla: left, rigth o center
- bgcolor: color de fondo
- border: anchura del borde
- cellpadding: cantidad de espacio en blanco entre el contenido de una celda y el borde
- cellspacing: cantidad de espacio en blanco entre elementos
- height: altura de la tabla
- width: anchura de la tabla
- cols: número de columnas
Dentro de una tabla podremos utilizar otra serie de etiquetas para identificar las diferentes partes de una tabla. Comenzaremos hablande de <caption> y </caption>. Esta etiquetas permiten espcificar un título para la tabla. Posee un atributo, align
, que permite escojer si este se mostrará por encima o por debajo de la tabla (top y bottom).
Veamos ahora los dos pares de etiquetas que permiten identificar en que fila y columna debe mostrarse la información. <tr> y </tr> sirven para crear filas. <td> y </td> sirven para crear columnas. La forma más habitual de utilizarlos es creando en primer lugar las filas y a su vez dentro de estas las columnas. Ambas etiquetas tienen varios atributos en común:
- align: alineación horizontal de la celda: left|right|center
- valign: alineación vertical de la celda: top|botton|middle|baseline
- bgcolor: color del fondo de la celda
Ejemplo:
<html>
<head>
<title>título</title>
</head>
<body>
<table border=0>
<td>
<table border=1 align=left>
<caption>Tabla básica</caption>
<tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr>
<tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr>
<tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr>
</table>
</td>
<td>
<table border=1 align=left>
<caption>Tabla hueca</caption>
<tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr>
<tr> <td>2,1</td> <td> </td> <td>2,3</td> </tr>
<tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr>
</table>
</td>
<td>
<table border=1 align=left>
<caption>Tabla con colspan</caption>
<tr> <td colspan=3 align=center>1,x</td> </tr>
<tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr>
<tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr>
</table>
</td>
<td>
<table border=1>
<caption>Tabla con rowspan</caption>
<tr> <td rowspan=3>x,1</td> <td>1,2</td> <td>1,3</td> </tr>
<tr> <td>2,2</td> <td>2,3</td> </tr>
<tr> <td>3,2</td> <td>3,3</td> </tr>
</table>
</td>
</table>
</body>
</html>
Resultado del ejemplo:
Tabla básica
| 1,1 |
1,2 |
1,3 |
| 2,1 |
2,2 |
2,3 |
| 3,1 |
3,2 |
3,3 |
|
Tabla hueca
| 1,1 |
1,2 |
1,3 |
| 2,1 |
|
2,3 |
| 3,1 |
3,2 |
3,3 |
|
Tabla con colspan
| 1,x |
| 2,1 |
2,2 |
2,3 |
| 3,1 |
3,2 |
3,3 |
|
Tabla con rowspan
| x,1 |
1,2 |
1,3 |
| 2,2 |
2,3 |
| 3,2 |
3,3 |
|
Otras cosas
En esta sección vamos a ver algunas cosas que se pueden hacer modificando los atributos de la etiqueta <html>. Como esta etiqueta engloba a todo el documento, los cambios que se efectuen afectarán a todo el mismo.
- background: URL de la imagen que utilizar como fondo
- bgcolor: color de fondo
- text: color del texto
- link: color de los enlaces no visitados
- alink: color de los enlaces activos
- vlink: color de los enlaces visitados
Información sobre HTML
