1.

Listas
Listas con vietas desordenadas
He aqu el ejemplo ms sencillo de una de estas listas:

escribimos en html
<ul>
<li>Primer trmino de la lista
<li>Segundo trmino
<li>Tercer trmino
</ul>

se ver como

Primer trmino de la lista

Segundo trmino
Tercer trmino

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. Tambin
podemos modificar las vietas por medio del atributo TYPE= circle, disc o square (crculo, disco o cuadrado) y
aadir sublistas.

escribimos en html

se ver como

<ul>
<li type= disc>Primer trmino de la lista
<ul>
<li>Sublista
<li>Otro elemento
</ul>
<li type=circle>Segundo trmino
<li type=square>Tercer trmino
</ul>

Primer trmino de la lista

o Sublista
o Otro elemento
Segundo trmino
Tercer trmino

Otro atributo interesante es compact para reducir el espacio entre los elementos

Listas con vietas ordenadas

Estas listas se caracterizan porque aparecen nmeros o ciertos caracteres que ordenan sus elementos. La
etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPEtoma ahora los
valores 1, a, A, i, I. Un ejemplo de estas listas es el siguientee

escribimos en html
<ol type=i>
<li >Primer trmino de la lista
<li >Segundo trmino
<li>Tercer trmino
<li>Cuarto
<li>Quinto
</ol>

se ver como
i.
ii.
iii.
iv.
v.

Primer trmino de la lista

Segundo trmino
Tercer trmino
Cuarto
Quinto

2. Ttulos
Los ttulos o encabezamientos se emplean al comienzo de una seccin. Las etiquetas
que se usan son:

Etiqueta

Se ve

<h1> Ttulo </h1>

Ttulo

<h2> Ttulo </h2>

Ttulo

<h3> Ttulo </h3>

<h4> Ttulo </h4>
<h5> Ttulo </h5>
<h6> Ttulo </h6>

Ttulo
Ttulo
Ttulo
Ttulo

3. Fuentes
Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes
que colocar el texto entre las etiquetas adecuadas.

Etiqueta
<B>Texto en Negrita</b>
<I>Itlica</i>
<B><I>Negrita e Itlica</i></b>
<U>Subrayado</u>
<STRONG>Fuerte</strong>
<CODE>Code Texto</code>
<CITE> Citation Text</cite>
<KBD>Keyboard Text</kbd>
<BIG>Texto grande</big>
<SMALL>Texto pequeo</small>
X<SUB>en base n</SUB>
X<SUP>elevado a la n</SUP>
<STRIKE>Texto tachado</STRIKE>

Se ve

Texto en Negrita
Itlica
Negrita e Itlica
Subrayado
Fuerte

Texto grande

Code Texto

Citation Text
Keyboard Text
Texto pequeo
Subndice
Superndice

Texto tachado

Tamao de fuentes
El tamao de las fuentes se puede especificar de dos maneras, una de ellas por medio
de un nmero del 1 al 7 (de ms pequeo a ms grande) del siguiente modo
<font size=1> Esta es la letra ms pequea que se puede conseguir </font>
que se ver como
Esta es la letra ms pequea que se puede conseguir

Otra forma es por medio de una referencia relativa:

<font size="+1"> Esto es igual que poner size=4 </font>

que se ve como

Esto es igual que poner size=4

El tamao por defecto es el 3

Tipos de fuentes
El tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis
<font face="Courier">Eso se ver en la fuente Courier</font>
que se ve como:
Eso se ver en la fuente Courier

Color de las fuentes

Es otro atributo de FONT. Mira en la pgina de colores (haga click para ver los
colores) para saber cmo se especifican los colores. La sintaxis es la siguiente:
<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner
varios atributos separados por un espacio</font>

Prrafos y bloques
Etiquetas de bloques:
<P> Se utiliza para que los prrafos queden separados por una lnea en blanco. Si solo
quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final
son <P> y </P>. La etiqueta<P> admite los atributos:
ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a
la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto est
alineado a la izquierda.
<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los
prrafos de esta pgina estn entre las etiquetas <BLOCKQUOTE> y
</BLOCKQUOTE>, de ese modo se consigue que el texto se presente con mrgenes a
ambos lados.
<BR> Este elemento slo tiene marca inicial e indica un salto de lnea, es decir un punto
y aparte sin separar el prrafo. Esta etiqueta no tiene su correspondiente de cierre
<HR> Se emplea para representar una lnea horizontal. Tampoco tiene pareja de
cierre. Se pueden emplear los atributos:
ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por
defecto aparece centrada
WIDTH="66%" SIZE="5", para especificar el ancho en % y el alto en pxels
COLOR="#0000FF" , para especificar el color

4. Enlaces
Enlace a una direccin de Internet
Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de direccin
del navegador, es decir:
<A HREF="http://www.colegioacademicoelpoblado.com">Colegio</A>

Enlace con una direccin de correo

Este es un enlace un poco diferente, veamos un ejemplo
<A HREF="mailto: informatica@colegioacademicoelpoblado.com">
informatica@colegioacademicoelpoblado.com </A>
que se ve como informatica@colegioacademicoelpoblado.com y que si lo pulsas se abre
el programa de correo que tengas configurado, con la direccin en el campo
correspondiente

Enlace que se abre en una nueva ventana

Si quieres que la pgina que enlazas aparezca en una nueva ventana del
navegador, solamente tienes que poner target="nombre" como atributo del
enlace, es decir:
<a href="index.htm" target="nueva">Indice</a>
que se ver como Indice
An hay ms tipos de enlaces, pero stos son los ms importantes

5.Tablas
Una tabla bsica
Las tablas se usan con profusin en las pginas Web, muchas veces debido a
que son el nico instrumento con el que se cuenta, para asegurarse que las
cosas estarn en su sitio. Para definir una tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde est contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila
(<th> y </th> si es una fila de cabecera)
<TD> y </TD> sealan una celda.
La tabla se va definiendo declarando una fila y a continuacin las celdas que
contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las
filas contengan el mismo nmero de celdas.
La tabla (2x2) ms sencilla que podemos hacer es la siguiente
Escribimos:

Visualizamos

<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

12
34

El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que
tenemos para mejorarlo.

Atributos de la etiqueta TABLE

Todos los atributos son opcionales
BORDER="4". Indica el tamao del borde en pxels, en este caso 4. Si no se indica nada
carece de borde
WIDTH="500" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor
absoluto (5 pxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las
mismas, por defecto es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.
Otro ejemplo

Escribimos:

Visualizamos

<TABLE BORDER="3" CELLSPACING="5"

WIDTH="150">
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

Atributos de las etiquetas de fila y celda

Las etiquetas que soportan las filas y las celdas son
WIDTH="30". Ancho de toda la fila o celda. Tambin se puede dar en %
ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o
abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el nmero de columnas que abarca la fila
ROWSPAN=2. Especifica el nmero de filas que abarca la columna
Tercer ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con
negrita, por eso se usa para los ttulos

Escribimos:
<TABLE BORDER="3" CELLSPACING="5"
WIDTH="200">
<TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el
ttulo</TH>
<TR align="center">
<TD>Esta es la celda de la 1 fila y de la 1 columna</TD>
<TD> Esta es de la 1 fila y de la 2 columna</TD>
</TR>
<TR BGCOLOR="#6D8FFF>
<TD>Esto est con un fondo azul</TD>
<TD align="right" valign="bottom">Y esto tambin</TD>
</TR>
</TABLE>

Visualizamos

Este es el ttulo
Esta es la
Esta es de la
celda de la 1
1 fila y de la
fila y de la 1
2 columna
columna
Esto est con
un fondo azul

Y esto
tambin

Como ves, se pueden ir modificando los comandos bsicos para obtener la tabla que
deseemos.
Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadores
presentan la tabla igual y nos ahorramos unas cuantas pulsaciones de teclas.

6.Formularios
Cmo se hace un formulario?
He aqu los elementos bsicos para la realizacin de un formulario
Abrir y cerrar un formulario
<FORM ACTION="mailto:tulogin@tuservidor.pntic.mec.es" METHOD="post"
ENCTYPE="text/plain">
...
</FORM>
Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones,
casillas, campos, etc. y tambin todas las etiquetas de HTML que permitan dar forma al
formulario (tablas, colores, etc)
El atributo ACTION nos indica la direccin de correo a la cual se van a enviar los datos
del formulario. As pues debes sustituir tulogin@tuservidor.pntic.mec.es por tu direccin
de correo.
Los atributos METHOD y ENCTYPE indican cmo se transferirn los datos (post, correo)
y la codificacin del texto
El atributo HIDDEN no mostrar el campo en la pgina web, aunque s enviar su
contenido.
Entrada de texto de una lnea
<INPUT TYPE="text" SIZE="25" NAME="Nombre">
Esta etiqueta produce un campo similar al que se muestra debajo, para introducir texto
(en este caso el nombre), de una longitud de 25 caracteres.

Cuando nos llegue al buzn de correo el texto de este campo aparecer asociado a la
palabra que pongamos en NAME (en este caso a Nombre)
Puede incluirse otro atributo opcional VALUE="Pon aqu tu nombre", en este caso
aparecera Pon aqu tu nombre dentro del campo
Entrada de texto de varias lneas
<TEXTAREA NAME="comentario" ROWS=3 COLS=50>
Introduzca aqu sus comentarios
</TEXTAREA>
Este cdigo producira el siguiente resultado:

Lista de opciones o men desplegable

<SELECT NAME="estudios">
<OPTION SELECTED> ESO
<OPTION> Bachillerato
<OPTION> Ciclos Formativos
<OPTION> Garanta Social
</SELECT>
Que producira un campo similar al siguiente:
ESO

donde ESO aparece seleccionada por defecto.

Una variante de las listas de opciones son los mens con barras de desplazamiento
<SELECT NAME="americanos" SIZE=6> <OPTION>Espaa
<OPTION>Mxico
<OPTION>Argentina
<OPTION>Costa Rica
<OPTION>Panam
<OPTION>Belice
<OPTION>Honduras
<OPTION>Bolivia
<OPTION>Chile
<OPTION>Paraguay
</SELECT>

que da como resultado una entrada del tipo

Espaa
Mxico
Argentina
Costa Rica
Panam
Belice

Si en la etiqueta <SELECT ...> introducimos el atributo MULTIPLE: nos est permitido

efectuar selecciones mltiples.
<SELECT NAME="menu" SIZE=6 MULTIPLE>

Casillas de verificacin o Checkboxes

< INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato
<BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria <BR

Nos permite elegir entre varias posibilidades una o ms casillas. Recibiremos como dato

el valor de la casilla sealada, asociada en este caso a nivel. Producira un resultado

como el siguiente:
ESO
Bachillerato
Primaria
Botones de radio o de opcin
< INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED> Hombre
< INPUT TYPE="radio" NAME="sexo" VALUE="mujer" > Mujer

Similar al anterior, con la diferencia de que solo nos permite seleccionar una de las
opciones mostradas, se utiliza para mostrar opciones excluyentes entre si. Luce como:
Hombre
Mujer
Botones envo y borrado
Se utilizan las siguientes etiquetas para hacer los botones de Enviar y Borrar
< INPUT TYPE="submit" VALUE="Enviar">
< INPUT TYPE="reset" VALUE="Borrar">

Producirn uno botones como estos:

Enviar

Borrar

Cuando presionemos "Enviar" se transferir el contenido de los campos a la direccin

de correo indicada, por lo que necesitamos estar conectados a Internet para
comprobarlo.
Si presionamos Borrar se borrar el contenido de los campos

Ejemplo
Sustituye los campos necesarios para colocarlo en tu pgina
<form action="mailto:tu@direccion.es" method="post" enctype="text/plain">
<center><table bgcolor="#cccccc" border="0" cellpadding="6"
cellspacing="0" width="400">
<tr>
<td align="right" valign="top"><b>Nombre</b></td>
<td><input type="text" size="25" name="Nombre"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>E-mail</b></td>
<td><input type="text" size="25" name="e-mail"> </td>
</tr>
<tr>

<td align="right" valign="top"><b>Especialidad</b></td>

<td><input type="text" size="25" name="Especialidad"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Centro de destino</b></td>
<td><input type="text" size="25" name="Centro"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Departamento</b></td>
<td><input type="text" size="25" name="Provincia"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Pulsa una vez</b>&nbsp; <b>&gt;</b> </td>
<td align="center">&nbsp; <input
type="submit" name="Enviar datos" value=" Enviar "><input type="reset" value="Borrar"
name="B1"> </td>
</tr>
</table>
</center>
</form>