Ms de HTML

Probablemente entre los elementos ms importantes en HTML podemos destacar las etiquetas que dan
formato: <h1>, prrafos <p>, y saltos de lnea <br>.
Gracias a estos elementos del HTML podremos dar una estructura general a nuestro documento de HTML .
Estas etiquetas nos ayudarn a configurar la aparencia del documento en el navegador.
<h1>...</h1>, <h6>....</h6>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis
niveles de titulares, siendo <h1> el de mayor tamao y el <h6> el de menor tamao. El texto que nos
gustara que sea un titular lo pondremos entre los elementos <h1> Titular h1 </h1>.
Ejemplo:

<h1> Titular h1 </h1>

se mostrar:

Titular h1
<p>...</p>: Prrafos. Etiqueta que se dise para saltar de prrafo. Por lo que puede ir sola "<p>" al final de
un texto indicando que a continuacin se quiere una lnea en blanco. Es aconsejable que se abra y cierre.
Ejemplo:

Texto normal
<p> esto es un prrafo </p>
continuamos con el texto normal

se ver:
Texto normal

esto es un prrafo
continuamos con el texto normal

<br>: Saltos de lnea. Este elemento realiza un salto de lnea, podemos poner tantos como necesitemos y
realizar un salto de lnea por cada una de ellos.
Ejemplo:

insertando <br> saltos <br> de lnea

se visualizar:
insertando
saltos
de lnea

<!-- comentario -->: Comentarios. Lo que nosotros introduzcamos entre los elementos <!-- --> no se
mostrarn a travs del navegador, permitindonos recordar posteriormente, en futuras revisiones el porque
de esta o aquella instruccin en el documento.

<hr>: Se emplea para dibujar una lnea horizontal. Posee los atributos
align="left / right" Alineacin izquierda o derecha. Por defecto aparece centrada
width="66%" Asigna el ancho en %
size="3".Designa el alto en pxels
color="#0000FF". Especifica el color
Ejemplo:

<hr width="75%">
<hr width="50%">
<hr width="25%">
<hr width="12%">

Tamao de las letras

Aunque ya hemos visto anteriormente ests instrucciones al explicar los estilos lgicos y los estilos fsicos.
Vamos a explicar como utilizarlas.
Para definir distintos tamaos de letra, en HTML tenemos varias opciones:
1) Usamos el elemento <hx>....</hx>: donde x es un nmero que puede variar entre 1 y 6, siendo 1 el
tamao mayor. Esto se utiliza slamente para los titulares de pginas
Ejemplo podra ser el siguiente:
<h1> Texto de prueba h1
<h2> Texto de prueba h2
<h3> Texto de prueba h3
<h4> Texto de prueba h4
<h5> Texto de prueba h5
<h6> Texto de prueba h6

se ver:

</h1>
</h2>
</h3>
</h4>
</h5>
</h6>

Texto de prueba h1
Texto de prueba h2
Texto de prueba h3

Texto de prueba h4
Texto de prueba h5
Texto de prueba h6
Es importante no olvidar el cerrar </hx> cada etiqueta ulitizada.
Como ya hemos mencionado anteriormente este tipo de elemento se suele utilizar para escribir titulares, ya
que despus del cierre automticamente el visualizador inserta un salto de prrafo.
Por ejemplo: si escribes
<h1> Texto en h1

</h1>

<h3> Texto en h3

</h3>

se ver:

Texto en H1
Texto en H3
Y no una cosa al lado de la otra, como cabra esperar.
2) por medio de la etiqueta <font> con el atributo size <font size="3"> (tamao en ingls) seguido por
un nmero, el cual indica el tamao entre 1 y 7. Tenemos que tener en cuenta que el valor por defecto es 3.
Esta notacin no provoca un salto de prrafo despus de cada cambio.
Ejemplo:
<font size="3">N</font> <font size="4">N</font>
<font size="5">N</font> <font size="6">N</font>
<font size="7">N</font> <font size="6">N</font>
<font size="5">N</font> <font size="4">N</font>
<font size="3">N</font>

El resultado ser:

NNN

NNN NNN

Es posible cambiar el tamao por defecto (3) de toda la pgina con el elemento <basefont size="valor">.
El texto pasar al tamao indicado por valor y lo mantendr hasta que aparezca otro elemento <basefont
size="valor"> y lo restaure o lo cambie por otro diferente.

Tipo de las Fuentes

Para cambiar el tipo de le letra podemos usar el atributo face seguido por el nombre del tipo de letra al cual
queremos cambiar.
Ejemplo:

<font face="times new roman">Fuente

<font face="arial">Fuente
<font face="courier new">Fuente
<font face="courier">Fuente
<font face="roman">Fuente

Times New Roman </font>

Arial </font>
Courier New </font>
Courier </font>
Roman </font>

el navegador mostrar:

Fuente Times New Roman

Fuente Arial
Fuente Courier New
Fuente Courier
Fuente Roman

Este atributo se puede usar en conjuncin con color y tamao.

Por ejemplo:
<font face="univers" size="6" color="blue">

Texto tipo Univers

</font>

Se ver:

Texto tipo Univers

Podemos definir cualquier tipo de letra, pero tenemos que tener en cuenta que si en el ordenador de la
persona que esta visualizando la pgina no tiene instalada la fuente que nosotros hemos definido en font
face se mostrar la en su lugar fuente que el navegador tenga por defecto. Por tanto hemos de tener mucho
cuidado a la hora de definir los tipos de letra. Puesto que si definimos tipos de letra raros es muy probable
que no lleguen a mostrase en la pantalla del cliente.

Color del Texto

El color del texto puede ser definido mediante el atributo color. En principio existen dos posibilidades para
definir los colores:
1. Mediante la Utilizacin de los valores RGB en forma hexadecimal RGB=Red/Green/Blue; Insertar los
valores Rojo/Verde/Azul.
Por ejemplo:

<font color="#24AAFF">
Este texto est en azul usando color="#24AAff"
</font>

se ver:
Este texto est en azul usando color="#24AAff"

2. Utilizando la especificacin del nombre del color.

Por ejemplo:

<font color="red">
Este texto est en rojo usando color="red"
</font>

se mostrar:
Este texto est en azul usando color="red"

Si nos decidimos a trabajar con valores hexadecimales, podremos escoger entre una paleta de 16,7
millones de colores. De esta manera se trabaja independientemente de los navegadores Web.
Si embargo escribimos el nombre del color, podemos evitar la definicin del color en forma hexadecimal que
es un poco ms dificil. Actualmente estn estndarizados tan slo 16 colores. Existen colores adicionales
los cuales son dependientes de los navegadores Web. Los cuales son:
Nombre

Color

Nombre

Color

Nombre

Aqua

Black

Blue

Fuchsia

Gray

Green

Lime

Maroon

Purple

Navy

Olive

Red

Silver

Teal

White

Yellow

Veamos lo siguiente ejemplos:

Color

<font color="blue">
Este texto est en azul usando color="blue"
</font>

Este texto est en azul usando color="blue"

<font color="maroon">
Este texto est en azul usando color="maroon"
</font>

El alineamiento del texto, esto es, que aparezca a la izquierda, centrado o a la derecha de la pgina, se
consigue en HTML mediante las etiquetas como <center>...</center> y <p align="center"> ,...
Centrado del texto
1. <center>...</center> en desuso , que centra todos los elementos que englobaba.
2. <p aling="center">..</p> , mediante el atributo align.
Veamos un ejemplo:
<center> Este prrafo est centrado </center >
<p align="center"> Este prrafo est centrado </p>
Visualizacin:

Este prrafo est centrado

Este prrafo est centrado

Un prrafo puede alinearse a la izquierda, centro, derecha o justificarlo. El prrafo en cuestin debe
estar contenido entre las etiquetas
<p align="left/center/right/justify">...</p>.
Ejemplo:
<p align="left">
Este texto est alineado a la izquierda
</p>
<p align="center">
Este texto est centrado
</p>
<p align="right">
Este texto est alineado a la derecha
</p>
<p align="justify">
Este texto est justificado
</p>
Visualizacin:
Este texto est alineado a la izquierda
Este texto est centrado
Este texto est alineado a la derecha
Este texto est justificado

Muy Importante: La recomendacin actual para alinear el texto segn nos interese, es la de utilizar
las CSS:
<p style="text-align:center">
Este texto est centrado.
</p>
<p style="text-align:left">
Este texto est alineado a la izquierda.
</p>
<p style="text-align:right">
Este texto est alineado a la derecha.
</p>
<p style="text-align:justify">
Este texto est justificado,
Margenes alineados a derecha e izquierda.
</p>
Este texto est centrado.
Este texto est alineado a la izquierda.
Este texto est alineado a la derecha.
Este texto est justificado, Margenes alineados a derecha e izquierda.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Supongamos que queremos mostrar en nuestra pgina web un pedido, por ejemplo una lista de las
pelculas que hemos adquirido recientemente, las que nos gustara comprar, o quizs es Navidad y nos
gustara realizar una lista con nuestros buenos deseos de todos los aos.

HTML tiene unas posibilidades limitadas a la hora del tratamiento del texto. Las listas se usan para citar,
numerar y definir cosas. Podemos clasificar las listas en tres tipos:
1. Listas desordenadas
2. Listas Ordenadas
3. Listas de Definicin

Listas Desordenadas
Estn englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista
comenzar con una etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre.
Veamos un ejemplo:

<p> Lenguajes en Internet </p>

<ul>
<li> Ingls 50% </li>
<li> Espaol 10 % </li>
<li> Francs 10% </li>
</ul>

Esto nos mostrar:

Lenguajes en Internet

Ingls 50%
Espaol 10 %
Francs 10%

Atributos de la etiqueta <ul>

La etiqueta <ul> dispone una serie de atributos, con los cuales es posible configurar el aspecto que va a
tener la lista.
type="circle / disc / square". Define la vieta a emplear en la lista. El parmetro tipo puede tomar los
valores:
circle: punto redondeado negro y relleno
disc: lnea crcular
square: cuadro relleno
Ejemplo (1)

<p> Lenguajes en Internet </p>

<ul type="circle">
<li> Ingls 50% </li>
<li> Espaol 10 % </li>
<li> Francs 10% </li>
</ul>

Esto nos mostrar:

Lenguajes en Internet
o
o
o

Ingls 50%
Espaol 10 %
Francs 10%

Ejemplo (2)

<p> Lenguajes en Internet </p>

<ul type="square">
<li> Ingls 50% </li>
<li> Espaol 10 % </li>
<li> Francs 10% </li>
</ul>

Esto nos mostrar:

Lenguajes en Internet

Ingls 50%
Espaol 10 %
Francs 10%

Importante: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar y por
mucho que lo intentemos, siempre saldr el redondel negro.

Estn delimitadas por las etiquetas <ol> y </ol> (ordered list). Al igual que las desordenadas cada uno
de los elementos de la lista comenzar con una etiqueta <li>, que puede o no llevar su correspondiente </li>
de cierre.
Veamos un ejemplo:

<p> Ciudades del Mundo <p>

<ol>
<li> NewYork </li>
<li> Tokio </li>
<li> Shangai </li>
</ol>

Esto nos mostrar:

Ciudades del Mundo

1. NewYork
2. Tokio
3. Shangai

Atributos de la etiqueta <ol>

La etiqueta <ol> dispone una serie de atributos, con los cuales es posible configurar la apariencia que va a
tener la lista. Los ms importantes son:
(1) type="1 / a / A / i / I ": define el tipo de secuenciador a usar en la lista. Los secuenciadores en una lista
van en su orden natural lgico. El atributo tipo puede tomar los valores:
type="1" - Para ordenar por nmeros - Este el valor que tiene type por defecto
type="a" - Numerar por letras minsculas del alfabeto
type="A" - Clasificar por letras maysculas del alfabeto
type="i" - Numerar por nmeros romanos en minsculas
type="I" - Ordenacin por nmeros romanos en maysculas
Veamos algunos ejemplos:
Cdigo HTML

Visualizacin

<ol type="1">
<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>

1. primer elemento
2. segundo elemento
3. tercer elemento

<ol type="a">
<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>

a. primer elemento
b. segundo elemento
c. tercer elemento

<ol type="A">
<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>

A. primer elemento
B. segundo elemento
C. tercer elemento

<ol type="i">
<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>

i.
ii.

primer elemento
segundo elemento

</ol&gr;

iii.

tercer elemento

<ol type="I">
<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>

I.
II.
III.

primer elemento
segundo elemento
tercer elemento

(2) start="n": donde n es el valor con el que comenzar la lista. Los valores del parmetro "n" son nmeros
enteros a partir de 1. Si se omite este atributo la lista comenzar por el nmero 1.
Cdigo HTML

Visualizacin

<ol type="1" start="4">

<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>

4. tercer elemento
5. cuarto elemento
6. quinto elemento

<ol type="A" start="5">

<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>

E. cuarto elemento
F. quinto elemento
G. sexto elemento

Estn englobadas por las etiquetas <dl> y </dl> (definition list). La etiquetas del elemento a definir es
<dt> (definition term) y su correspondiente definicin son <dd>.(definition definition).
Las etiquetas <dt> y <dl> no tienen pareja de cierre, pero la etiqueta padre <dl> se debe cerrar siempre con
su correspondiente pareja </dl>.

Veamos un ejemplo para aclarar esto un poco ms:

<p>Diccionario Oxford </p>
<dl>
<dt>footstep
<dd> Seguirle los pasos a alguen
<dt>misplace
<dd>perder algo transitoriamente
</dl>

El efecto producido:
Diccionario Oxford
footstep

Seguirle los pasos a alguen

misplace
perder algo transitoriamente
Obsrvese que la etiqueta <dd> desplaza hacia la izquierda el texto al cual acompaan. Siendo estas
etiquetas usadas algunas veces para desplazar textos a la izquierda.
Ejemplo:
<dl>
<dd> 1 Primer punto
<dl>
<dd> 1.1 Desplazado hacia la izquierda
<dl>

<dd>1.1.1 Mas desplazado hacia la izquierda

</dl>
</dl>
</dl>

Mostrndonos:
1 Primer punto
1.1 Desplazado hacia la izquierda
1.1.1 Mas desplazado hacia la izquierda

HTML tambin no plantea la posibilidad de anidar listas. Esta opcin nos puede ser muy til, puesto que nos
permite obtener listas mixtas.
Vease el siguiente ejemplo:
<p> Deportes <p>
<ul>
<li> Deportes de pelota
<ol>
<li> Ftbol
<li> Baloncesto
<li> Balon mano
</ol>
<li> Atletismo
<ol>
<li> Maraton
<li> 10.000 metros
<li> Relevos
</ol>
</ul>

Conseguiendo una lista como esta:

Deportes

Deportes de pelota
1. Ftbol
2. Baloncesto
3. Balonmano
Atletismo
1. Maraton
2. 10.000 metros
3. Relevos

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TABLAS
Las tablas son muy usadas en el diseo de las pginas Web, aparecieron en la versin HTML 3.0. Las
tablas son una de las etiquetas ms tiles que podemos encontrar en HTML, ya que nos van a permitir
"maquetar", darle la aparencia externa a nuestra pgina, como lo ver el usuario. La tcnica es dividiendo la
pgina en pequeas celdas e insertando en cada celda de la tabla, el elemento y/o los elementos que
compondrn nuestra pgina web. Este mtodo era el nico lgico hasta la que se quedo desfasado por
la aparicin de las Hojas de Estilo, CSS.
Estructura de una tabla:
Las
tablas
estn
formadas
por
celdas
agrupadas
en
filas
---->
y
columnas
|
Una fila esta compuesta por uno o ms espacios (celdas) alineados horizontalmente.
Una
columna
esta
compuesta
por
uno
o
ms
espacios
alineados
verticalmente.
Una celda es el espacio formado por la interseccin de una fila y una columna
El nmero de celdas esta componen la tabla esta definido por el diseador de la pgina.

Columna 1 Columna 2 Columna 3

Fila 1 Celda (1,1) Celda (2,1) Celda (2,1)
Fila 2 Celda (2,1) Celda (2,2) Celda (2,1)
Fila 3 Celda (3,1) Celda (3,1) Celda (2,1)
Sin embargo no es todo tan fcil a la hora de trabajar con tablas, puesto que algunas veces parecen
comportarse de una forma ilgica, por tanto debemos de conocer todo lo referente a ellas incluso algunos
pequeos trucos que existen.
Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseadas por cientficos de las
universidades para contener y organizar informacin, no como una ayuda para el diseo grfico de la
pgina, ya que en esa poca el lenguaje y las pginas web se conceban como una forma de transmitir texto
plano, en monitores monocromos y de poca resolucin, y no fu hasta el posterior desarrollo de Internet, de
la WWW y de la tecnologa de ordenadores personales avanzados cuando se empez a tener en cuenta la
importancia del diseo visual de una pgina web como un medio global para transmitir no solo texto plano,
si no tambin contenidos grficos y multimedia.
Para conseguir que las tablas funcionen perfectamente necesitamos conocer muy bien todos los atributos
de las tablas. Adems de algunos truquillos que se han echo famosos a lo largo del tiempo.
Veamos como se define una tabla:
1. Las tablas se crean con la etiqueta <table>...</table> la tabla est contenida entre esta etiqueta
2. Las filas se definen con la etiqueta <tr>...</tr> table row, (row = fila en ingls)
3. Cada etiqueta <tr> contiene celdas que inicialmente coincidirn con el nmero de columnas,
definidas por medio de la etiqueta <td>...</td>
4. Cada celda de datos puede contener lo que quieras insertar : texto, Imgenes, listas, e incluso otras
tablas.
La estructura de una tabla, se puede ver fcilmente en el siguiente esquema :
<table>
<tr> <td>...</td> <td>...</td> <td>...</td> </tr>
<tr> <td>...</td> <td>...</td> <td>...</td> </tr>
<tr> <td>...</td> <td>...</td> <td>...</td> </tr>
</table>
Que llevado al HTML es:
<table>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</table>

<td> celda (1,1)</td>

<td> celda (1,2)</td>
<td> celda (1,3)</td>
<td> celda (2,1)</td>
<td> celda (2,2)</td>
<td> celda (2,3)</td>
<td> celda (3,1)</td>
<td> celda (3,2)</td>
<td> celda (3,3)</td>

Se ver como:

celda (1,1) celda (1,2) celda (1,3)

celda (2,1) celda (2,2) celda (2,3)
celda (3,1) celda (3,2) celda (3,3)
El conocimiento de los atributos de una tabla puede considerarse como esencial para la correcta utilizacin
de las tablas:
border="n" Crea un borde alrededor de la tabla de grosor especificado por el valor "n", tomando como
unidad el pxel. Teniendo cero como valor por defecto. Cuando comenzamos la realizacin de una tabla es
aconsejable usarlo para ir comprobando que todo funciona como hemos pensado.
Width="n" el valor "n" indica la anchura de la tabla en pixels (200) o porcentaje (20%). Tambin se puede
utilizar este atributo con las celdas <td>
height ="n" el valor "n", asigna la altura de la tabla en pixels o porcentaje.
Align="right / left / center" Alinea horizontalmente la tabla con respecto a su entorno.
Background="nombre_imagen.extension_del formato" Nos permite colocar un fondo para la tabla a
partir de un enlace a una imagen.
bgcolor="#ffaabb" indica el color de fondo de la tabla o celda.
bordercolor="#ffffff",define el color del borde.
cellpadding="n",define el espacio, en pixels, entre los bordes de la celda y el contenido de la misma. Por
defecto, y si no se especifica, tiene un valor de 1.
cellspacing="x", define el espacio ,en pixels, entre el borde cada una de las celdas y el borde de la tabla.
De no especificarse, tiene un valor por defecto de 2.:

Los atributos que modifican a una celda tienen prioridad respecto a los que modifican a una tabla.
Por ejemplo podemos aplicar un color azul a una tabla y amarillo para una celda.
Ejemplo (1):

<table border="1">
<tr>
<td > Antonio Perez</td>
<td> Zaragoza </td>
</tr>
</table>

se visualizar:
Antonio Perez Zaragoza

Ejemplo (2):
<table border="10">
<tr>
<td > Antonio Perez</td>
<td> Zaragoza </td>
</tr>
</table>

se visualizar:
Antonio Perez Zaragoza

Ejemplo (3):
<table border="1" width="100%">
<tr>
<td > Antonio Perez</td>
<td> Zaragoza </td>
</tr>
</table>

se visualizar:
Antonio Perez

Zaragoza

Ejemplo (4):
<table border="1" width="200" bgcolor="red">
<tr>
<td bgcolor=yellow> Antonio Perez</td>
<td> Zaragoza </td>
</tr>
<tr>
<td> Texto </td>
<td> Texto </td>
</tr>
</table>

se visualizar:
Antonio Prez

Zaragoza

Texto

Texto

Estos atributos modifican el formato de las filas y/o celdas dependiendo si estn en un <tr bgcolor="red">
afectara a toda la fila o se encuentra en <td bgcolor="yellow"> donde solamente afectara a la celda.
Estos atributos son:
bgcolor ="nombre del color / nmero hexadecimal". Define el color de la celda o fila.
bordercolor="nombre del color / nmero hexadecimal". Define el color del borde de la celda.
align="top / middle / bottom". Elegimos el lugar en cual el texto es colocado. Top (arriba),middle(centro) y

bottom(abajo)
valign="left / center / right". Alineacin del texto izquierda (left), centro(center), o derecha (right)
Los siguientes atributos slo pueden ser aplicados a una celda y no al conjunto de celdas que forman una
fila.
colspan="n". Expande el una celda horizontalmente tantas celdas como el valor asignado a n
rowspan="n". Expande una celda verticalmente tanta celdas como el valor asignado a n
width="n". El valor n indica la anchura de la tabla en pixels (200) o porcentaje (20%). Este atributo tambin
se puede aplicar a la celdas <td>.
height ="n". El valor n, define la altura de la celda en pixels o porcentaje.
Ejemplos aplicando lo anterior:
Ejemplo (1) :

<table border="1">
<tr>
<td bgcolor="lime" width="250">Diseo de pginas</td>
<td> las tablas </td>
</tr>
</table>

se visualizar:
Diseo de pginas

las tablas

Ejemplo (2):

<table border="1">
<tr>
<td colspan="3" > Diseo de pginas</td>
</tr>
<tr>
<td> Atributos </td>
<td> Celdas </td><
td> las tablas </td>
</tr>
</table>

se visualizar:
Diseo de pginas
Atributos
Ejemplo (3):

<table border="1">
<tr>
<td> Diseo de pginas</td>
</tr>
<tr>
<td rowspan="2"> Atributos </td>
<td> Celdas </td>
<td> las tablas </td>
</tr>
<tr>
<td> A </td><td> B </td>
</tr>
</table>

Celdas

las tablas

Se visualizar:
Diseo de
pginas
Celdas las tablas

Atributos

Ttulos y Cabeceras en las tablas.

Por medio de las etiquetas <caption>...</caption> podemos colocar un ttulo a una tabla. El caption posee
el atributo align="top/ bottom". top alinea el ttulo arriba de la tabla y bottom lo muestra debajo de la tabla.
Vease el siguiente, ejemplo:
<table>
<caption align="bottom"> ttulo </caption>
<tr>
<td> celda(1,1) </td>
<td> celda (1,2) </td>
<tr>
<tr>
<td> celda (2,1) </td>
<td> celda (2,2) </td>
</tr>
</table>

se mostrar:
celda(1,1) celda (1,2)
Celda (2,1) celda (2,2)
ttulo

Cabeceras
Las etiquetas <th>...</th> definen las cabeceras de la tabla (table header). Esta etiqueta produce el
efecto de visualizar el texto centrado y en negrita:
<table>
<tr>
<th>
<th>
<th>
</tr>
<tr>
<td>
<td>
<td>
</tr>
</table>

Cabecera 1 </th>
Cabecera 2 </th>
Cabecera 3 </th>
A </td>
B </td>
C </td>

se mostrar:
Cabecera 1

Cabecera 2

Cabecera 3

Anidando tablas
El lenguaje HTML tambin nos da la posibilidad de anidar tablas es decir podemos insertar o colocar
tablas unas dentro de otras tablas.
Para poder anidar tablas simplemente tenemos introducir la estructura de una tabla completa dentro de una
celda.
Si realizamos la anidacin de tablas tendremos que ser sumamente cuidadosos, ya que esto es un
proceso complicado y enrevesado.
Es importante tener en cuenta que es posible anidar tablas sin lmite siendo esta tcnica muy til. Pero
debido a la complejidad en la que podemos derivar es muy aconsejable practicar esta tcnica con
anterioridad. Pero al mismo tiempo tambin intentaremos usar cuantas menos tablas mejor. Puesto que
las ventajas de usar una sola tabla son mltiples: mayor velocidad de carga, mejor control sobre el
contenido de la misma, cdigo ms sencillo, etc. El retardo al cargar la pgina can tablas anidadas es
debido a que el navegador debe leer primero toda la tabla ante de visualizarla, consiguientemente usando
tablas anidadas se produce un efecto acumulativo.
Veamos los siguientes ejemplos:
Ejemplo (1):
<table cellspacing="10" cellpadding="10" border="4">
<tr>
<td align="center">Celda tabla principal (padre)</td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="6">
<tr>
<td>Tabla anidada, Celda (1,1) </td>
<td>Tabla anidada, Celda (1,2) </td>
</tr>
<tr>
<td> Tabla anidada, Celda (2,1) <td>
<td> Tabla anidada, Celda (2,2) <td>
</tr>
</table>
</td>
</tr>
</table>

se mostrara:

Celda tabla principal (padre)

Tabla anidada Celda (1,1)

Tabla anidada Celda (1,2)

Tabla anidada, Celda (2,1) Tabla anidada, Celda (2,2)

Ejemplo (2)
<table cellspacing="2" border="4" bgcolor="red">
<tr>
<td align="center"> Tabla principal </td>
<td align="center">

<table border="2">
<tr>
<td>Tabla anidada </td>
<td>Tabla anidada </td>
</tr>
<tr>
<td> Tabla anidada <td>
<td> Tabla anidada <td>
</tr>
</table>
</td>
<tr>
<td align="center"> Tabla principal </td>
</tr>
</tr>
</table>

se mostrar:

Tabla principal

Tabla principal

Tabla Anidada Tabla Anidada

Tabla Anidada Tabla Anidada
Tabla principal

Enlaces HTML
Son sin duda alguna la caracterstica que ms ha contribuido, junto con la implementacin de las imgenes
al espectacular desarrollo de la Web (links).

Siendo uno de los elementos ms importantes del HTML, puesto que permiten "navegar" (desplazarse y/o
moverse entre los diversos documentos que componen un sitio o incluso entre diferentes sitios web) a esto
se le llama hipertexto.
Los enlaces son tan importantes que dan nombre al propio lenguaje HTML, Lenguaje de Marcas de
HiperTexto.
Un enlace es una referencia a otro documento HTML o a cualquier otro objeto, expresada por un
formato universalmente aceptado denominado URL (Universal Resource Locator).

Ejemplo (1):

<a href="htpp://wwww.pcweb.es/index.html">
ir al la pgina de inicio del manual
</a>

Visualizacin:
ir al la pgina de inicio del manual

En prcticamente todas las pginas web, los enlaces son fcilmente reconocibles a simple vista, puesto que
suelen ir diferente color al texto, subrayados y cuando pasamos el ratn por encima el cursor cambia de
forma que suele ser una mano con un dedo se&ntoilde;alador.
Los enlaces se generan mediante la etiqueta <a>...</a> (a de anchor, ancla en ingls). Irn acompaados
siempre por un atributo ya sea:
<a href="..."> o <a name="...">
La sintaxis general de un enlace es por tanto de la forma:
<a href="destino"> Referencia</a>
<a name="destino"> Referencia</a>
Pudiendo la referencia un texto o una imagen. El destino podr ser un pgina web, una direccin de correo
electrnico o incluso un archivo.
Ejemplo (2):
<a href="http://www.elmundo.es"> el mundo</a>
<a href="index.html"> Pgina Inicial del manual</a>
<a href="enlaces"> enlace interno</a>

Visualizacin:
el mundo
Pgina Inicial del manual
enlace interno

Enlaces internos: A otro lugar del mismo documento

Este tipo de enlaces estn compuestos de 2 partes:
1. En el lugar a donde queremos desplazarnos, ponemos la siguiente etiqueta:
<a name="enlaces _internos"> </a>
2. En punto el punto desde donde queremos ir, insertamos la siguiente etiqueta:
<a href="#enlaces_internos"> ir al principio del punto </a>
En este caso la direccin (URL) es sustituida por un marcador en la misma pgina. El marcador puede ser
texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se ver.
Veamos un ejemplo para desplazarnos al inicio de est pagina:
(1) En el lugar al cual queremos ir, pondremos:
<a name="inicio_pagina"> </a>

(2) Escribiremos en el lugar desde el que queremos saltar:

<a href="#inicio_pagina">Ir al inicio de la pgina </a>

Al pulsar sobre este enlace nos llevar al principio de este punto:

ir al principio de la pgina ya que fue all donde colocamos el marcador
<a name:inicio_pagina> </a>

Enlaces Locales: A otra pgina que pertence al Sitio Web

En este caso la direccin de la pgina URL se pondr de forma relativa. Por ejemplo si tenemos tres
pginas en el mismo directorio: pagina1.html, pagina2.html y pagina3.html y queremos desplazarnos de la
pagina1.html a la pagina3.html escribiremos en la pagina1.html:
<a href="pagina3.html">Ir a la pgina 3 </a>

Con esto es suficiente, no hay que crear ningn marcador a no ser que quieras ir a un sitio concreto de la
pagina3.htm. En ese caso tendras que poner en el sitio adonde quieres llegar de la pagina3.htm

Enlace remotos: A una direccin de Internet

Deberemos escribir la direccin (URL) debe darse forma absoluta, es decir como se ve en el navegador, en
la barra de direcciones.
Vease el siguiente ejemplo:

<a href="http://www.elmundo.es">
Ir al el peridico el mundo
</a>

Este enlace no llevar a la pgina principal de el peridico "el mundo".

Ir al el peridico el mundo

Enlace a una direccin de correo

Para realizar un enlace dirigido hacia una direccin de correo electrnico deberemos usar la instruccin
mailto: en el atributo href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace.
<a href="mailto: jorge_ferrer@gmail.com">
jorge_ferrer@gmail.com
</a>

jorge_ferrer@gmail.es

Pulsando sobre el enlace se abrir el programa de correo que tengas configurado, con esta direccin de
correo como destinatario.

Enlace para descargar un fichero

Tendremos que poner la direccin (URL) la ruta donde est el fichero. Por ejemplo, para descargar un
fichero de nombre manual_html.zip se deber escribir el siguiente cdigo:
<a href="../manuales/manual_html.zip">
manual_html.zip
</a>

Que se ver lo siguiente manual_html.zip. Al pinchar sobre este enlace se abrir una ventana avisndote de
una descarga de archivos y preguntndote qu deseas hacer.

El atributo: target
El atributo target="nombre del marco de destino, _top / _blank/ _self / _parent".

_top: muestra el documento enlazado ocupando toda la ventana del navegador. Sale de los frames.
_blank: abre un ventana nueva en el navegador(sin frames), en la cual carga el fichero.
_self : carga el documento en le marco desde donde pulsamos el enlace. Es la opcin por defecto.
_parent: carga el documento en el frame anterior al que contine el enlace "padre". En caso de no
haber lo muestra en una ventana completa.

Ejemplo:
<a href="http://www.innovanetworks.es" target="_top">
ir a Innova Networks
</a>

FRAMES
Los frames (marcos, cuadros o paneles) nos dan la posibilidad de dividir nuestra pgina en ventanas ms
pequeas. Cada una con sus propios bordes y barras de desplazamiento, pudiendo cargar dentro de cada
una de ellas una pgina externa independiente.

Puesto que esta funcin se incluyo con el HTML 4.0 (la ltima versin). Las versiones ms antiguas de los
navegadores no tienen implementada esta caracterstica (posibilidad hoy en da bastante improbable)
Los frames o marcos son una herramienta que ofrece muchas posibilidades, con grandes inconvenientes.
por ejemplo: divisin de la pgina en vario archivos, al tratarse de varios documentos, la carga puede
demorarse. y su uso est actualmente sujeto a discusin ignorndose si en un futuro desaparecern de la
recomendacin xhtml.
En resumen tendremos que valorar si los frames son realmente necesarios en nuestros diseos web. Como
dato las casas de programacin y diseo web estn dejando de usar frames.

Estructura de los frames

Lo primero que tendremos que hacer es una pequea organizacin para la realizacin de nuestra pgina
con frames.
Veamos los pasos ha seguir para la creacin de una pgina con tres frames:
1. Creacin de un documento maestro en el cual estan definidos los frames.
2. Creacin de tres documentos ms, que se cargarn cada uno en su respectivo frame.
(1) Creacin de un documento maestro en el cual estn definidos los frames:
Este documento no contendr head y body sino que estar compuesto por head y frameset. Es dentro de la
seccin frameset y solamente si colocamos una subseccin no frames donde insertaremos el body. Este

body suele ser un texto alternativo que se visualizar en caso de que los navegadores que no soporten
frames o tengan esta opcin inactivada)
<html>
<head>

<title> Ttulo de la pgina </title> </head>

<frameset rows="75,*">
<frame src="pagina1.html" name="frame_izda"></frame>
<frame src="pagina2.html" name="frame_dch_arriba"></frame>
<frame src="pagina3.html" name="frame_dch_centro"></frame>
</frameset>
<noframes>
<body>
Lo siento,su navegador no soporta frames.
Pulse <a href="frames1.htm> aqu </A>
para acceder a los contenidos de estas pginas.
</body>
</noframes>
</html>

(2) Creacin de tres documentos ms, que se cargarn cada uno en su respectivo frame:
Estos documentos son archivos HTML exactamente iquales a los que hemos estado creando anteriormente.
Podemos insertar en esto documentos los elementos HTML que deseemos como etiquetas de cabecera,
imagenes etc..
------------ pagina1.html--------------:
<html>
<head>

<title> Pgina1 </title> </head>

<body bgcolor="gray">
frame izquierdo
</body>
</html>

------------ pagina2.html--------------:

<html>
<head> <title> Pgina2 </title> </head>
<body bgcolor="gray">
frame derecha arriba
</body>
</html>

------------ pagina3.html--------------:
<html>
<head>

<title> Pgina3 </title> </head>

<body bgcolor="gray">
frame derecha centro
</body>
</html>

FORMULARIOS
Hasta el momento, hemos visto caractersticas del HTML que permiten al usuario visualizar las diferentes
pginas Web con su contenido es decir el usuario se limita simplemente ha recibir informacin no tiene la
posibilidad de interactuar con el sitio o autor Web. Los Formularios nos dan la posibilidad comunicarnos
con el sitio web. Estos formularios se componen de tantos campos como queramos obtener. Una vez que

los datos han sido enviados a la URL estos sern procesados. Un ejemplo de esto son las encuestas online,
formularios de proceso de pedido, etc..
Empleando HTML solamente podremos enviar el formulario. Para procesarlo tendremos que emplear un
programas especiales llamados CGI (Common Gateway Interface), estos programas los podemos encontrar
en bastantes servidores, si nuestra pginas estn alojados en un servidor que no dispone de esta
caracterstica, podremos encontrar en otros servidores que nos ofrezcan este servicio. Tambin es posible
procesar los datos enviados por los formularios a travs de lenguajes como PHP o ASP.
La etiqueta <form>...</form>
Una vez dicho todo esto, no hay que olvidar que un formulario sigue siendo cdigo HTML. Para iniciar un
formulario utilizaremos la etiqueta <form>...</form>, englobando esta etiqueta todos los campos que
pertenecen al formulario.
La etiqueta <form>, deber de obligatoriamente ir con los siguientes atributos:
1. action="pepe@hotmail.com / cgi-bin/ encuesta ", definimos la accin que llevar a cabo el
formulario. (lo enviamos a una direccin de correo URL mailto, o lo enviamos a un CGI)
2. method="get / post" indicamos el mtodo de transferencia de las variables que componen dicho
formulario.
Usando el mtodo get, los datos se envan a travs de la barra de direcciones, aadidos a la url
especificada en el atributo action.
3.
por ejemplo: http://www.encuentas?formulario_54a=encuesta_1
Este mtodo tiene varias limitaciones:
1. la longitud de la infomacin transmitida esta limitada a 256 caracteres.
2. deben usarse nicamente caracteres ascii
A travs del mtodo post se envan a internamente al HTML, a travs del STDIO. No teniendo
ninguna de las limitaciones anteriores.
veamos ahora el atributo opcional y solamente se puede emplear cuando si hemos elegido el
mtodo post (method="post").
o

enctype="text/plain", Especifica el sistema de encriptacin. Por defecto, tiene el sistema

MIME. Si queremos enviar el formulario sin ningn tipo de encriptacin le daremos el valor
"text/plain".
Si queremos enviar el formulario por correo electrnico, el valor de enctype deber ser
"text/plain". De esta manera enviamos el formulario y su contenido como texto plano
formando parte del email.
Sin embargo si el destino del formulario es un programa que lo procese no incluiremos
enctype dentro de la etiqueta form, as enctype tendr su valor por defecto.

Ejemplo de una etiqueta <form> completa:

<form action="mailto:direccion@correo.com (o nombre del
programa CGI)" method="post" enctype="text/plain">
Entre esta etiqueta y su cierre deberemos de colocar el resto de etiquetas que componen el formulario.
La etiqueta <input> posibilita y define la introduccin de datos en el formulario.

Atributos de la etiquta <input> :

type = "text / radio / checkbox / button / image / password / hidden / file / submit / reset ", donde type puede
tomar uno de los anteriores valores.
(1) text. Indica que el campo a introducir ser texto, posee los siguiente parmetros:

size="n". Determina el tamao de la caja de texto que aparece en pantalla.

maxlenght="n". Designa el nmero mximo de caracteres que se pueden introducir en la caja de
texto.
name=" nombre". Asigna un nombre nico a los datos que se inserten en la caja de texto.
value=" texto ". Designa el texto que aparecer inicialmente en la caja de texto.
disabled. Desactiva la caja de texto, por tanto el usario no podr insertar ningn texto en dicho
campo.
accept="lista de content-type". Indicamos el tipo de datos que aceptara el servidor.
Teniendo como valores:
1. text/html
2. application/msexcel
3. application/msword
4. image/gif
5. image/jpg

readonly. Establece que el texto no puede ser modificado por el usuario.

tabindex="n". Asigna el orden de tabulador que tiene el campo respecto a los dems elementos
que componen el formulario..
alt= "comentario". Descripcin del elemento.

Ejemplo(1):
<form action="cgi-bin/sport.exe" method="post"
enctype="text/plain" name="encuesta_deportiva_1">
Nombre:
<input type="text" size="20" maxlength="20" name="nombre">
</form>

(2) radio. Es un campo multivalor excluyente, permite escoger una y slo una opcin de un conjunto de
valores. Posee lo siguientes parmetros:

name="nombre". Asigna un nombre identificador nico. Este identificador debe ser el mismo para
todos los elementos radio de un grupo.
value="valor"". Asigna un valor a la variable de cada casilla que componen el elemento radio.
checked". Selecciona por defecto uno de los radio botones del grupo.
disabled". Desactiva el radio botn, por lo que el usuario no podra marcarlo.
tabindex="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos
que componen el formulario.

Ejemplo:

<form action="mailto:server@server.com" method="post"

enctype="text/plain" name=" ejemplo_formulario"> Sexo
<input type="Radio" name="sexo" value="Hombre"checked>Mujer
<input type="Radio" name= "sexo" value="Mujer">Hombre
</form>

Que se mostrar en el navegador:

Sexo

Mujer

Hombre

(3) checkbox. Define las casillas de verificacin que tendr nuestro formulario. Este tipo de elementos
pueden ser activados o desactivados por el usuario al pulsar sobre la caja. A diferencia con el componente
anterior radio, este elemento no es auto excluyente. Tiene como parmetros complementarios:

name="nombre". Asigna un nombre identificador nico a la variable definida por el elemento. Este
identificador debe ser el mismo para todos los elementos radio de un grupo.
value="valor". Asigna un valor a la variable a cada casilla de verificacin que componen el
ceckbox.
checked. Selecciona por defecto una o ms de las casillas del grupo.
disabled. Desactiva la casilla de verificacin, por lo que el usuario no podra selecionarla.
tabindex="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos
que componen el formulario.

Ejemplo.-

<form action="mailto:formulario1@server.com" method="post"

enctype="text/plain" name="checkbox">
Cual es tu genero de cine preferido:
<input type="checkbox" name="cine" value="Western"> Western
<input type="checkbox" name="cine" value="Terror"> Terror
<input type="checkbox" name="cine" value="Comedia"> Comedia
<input type="checkbox" name="cine" value="accion"> Accin
</form>

(4) button. Inserta en el formulario de un botn estandar. Este botn puede ser usado para diferentes
acciones. El uso ms frecuente de un botn es en la programacin en el cliente. Utilizando lenguajes como
Javascript ,podemos definir acciones a tomar cuando un visitante pulse el botn de una pgina web. Sus
parametros son:

name=" nombre". Asigna un nombre al botn,

value=" valor ". Define el texto que veremos en el botn, cuando lo nuestre el navegador.
disabled. Desactiva el botn, cuando se pulsa no se produce ninguna accin..
tabindex ="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos
que incluye el formulario.

Ejemplo:

<form action="mailto:formulario1@server.com" method="post"

enctype="text/plain" name="button">
<input type="button" name="boton_enviar" value="enviar">
</form>

(5) image. nos permite personalizar el tipo de botones que tiene el formulario, es decir, nos permite la
posibilidad de conferir a una imagen la funcionalidad de un botn. Posee lo siguiente parmetros:

name="nombre". Asigna un nombre al botn para identificarlo de forma nica y poder as acceder
luego a sus propiedades.
src="ruta_imagen". Asigna la ruta al fichero de la imagen. Recomendamos que esta ruta sea
relativa al directorio, aunque puede ser absoluta.
width="n". Asigna la anchura del botn de imagen.
height="n". Define la altura del botn de imagen.
align= " left / middle / right / bottom / baseline...". Asignamos la posicin del texto que rodea el
botn.
hspace="n". Define el espacio horizontal que hay entre el botn y el texto que lo rodea.

vspace="n". Define el espacio vertical que hay entre el botn y el texto que lo rodea.
alt="texto". Asocia un texto explicativo al botn de imagen. Al situar el cursor encima del botn se
mostrara este texto.
disabled. Inhabilita el botn, impidiendo que se produzca accin alguna cuando es pulsado, pus
permanece inactivo
tabindex="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos
que componen el formulario.
usemap= " #nombre de mapa ". Nos da la posibilidad del uso de un mapa de imagenes para la de
entrada de datos.

Ejemplo.-

<form action="mailto:imagen@server.com" method="post" enctype="text/plain" name="imagen">

<input type="image" name="boton" src="imagenes/boton.jpg" width="107" height="35"
hspace="10" align="middle">
</form>

Se mostrar:

(6) password. Crea una zona de texto donde los caracteres al introducirlos por el usuario se reemplazan
por asteriscos, debido a motivos de seguridad. Teniendo como parmetros opcionales, los mismos que
posee el tipo text
Ejemplo.-

<form action="mailto:yo@miservidor.com" method="post"

enctype="text/plain" name="miform">
Contrasea
<input type="password" size="15" maxlength="10">
</form>

(7) hidden define un campo escondido, por lo que no se ve en pantalla. Sus atributos son:

name=" nombre". Asigna un nombre identificador nico al campo oculto.

value=" valor ". Asigna un valor campo.

Ejemplo:

<form action="mailto:yo@miservidor.com" method="post"

enctype="text/plain" name="miform">
<input type="hidden" name="contrasea" value="123ABC">
</form>

(8) file. nos permite enviar un archivo adjunto al formulario. Sus principales atributos son:

title="titulo": que muestra un texto en tipo al situar el cursor encima del botn de examinar (slo en
Internet Explorer).
accept="tipo_archivo":que determina el tipo de archivo que se admite como para enviar.
disabled : que desactiva tanto el botn como la caja de texto, impidiendo al usuario seleccionar un
archivo (slo Internet Explorer y Nestcape 6x).

size="numero_entero": que fija la anchura de la caja de texto asociada.

(9) submit. Inserta en el formulario un botn de envo de datos. Cuando el usuario pulsa en el botn los
datos contenidos en el formulario son enviados a su destino definido en el atributo action, direccin de
correo o programa de proceso de datos. Teniendo como parmetros:

name="nombre". Asigna un nombre identificador nico al campo .

value="valor". Define el texto que aparecer en el botn.
disabled. Desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus
permanece inactivo.
tabindex="n". Designa el orden de tabulador que tendra el campo respecto todos los elementos
que incluye el formulario.

(10) reset. Botn de borrado de todos los datos introducidos en el formulario. Sus atributos son los mismos
que los de submit.
Ejemplo:

<form>
<input type="reset" value="borrar">
</form>

Etiqueta Select
Algunas veces nos interesar, no que el usuario inserte unos datos, sino acotarle el rango de la respuesta,
esto es, le mostramos unos posibles valores de los cuales el usuario escoger uno. Por ejemplo, elegir, el
tipo de tarjeta de crdito para un pago, mdelo de coche, etc... Las listas de seleccin son este tipo de
mens desplegables que nos permiten elegir una (o varias) de las mltiples opciones de las que nos
proponen.
Para conseguir esto, disponemos de la etiqueta <select>...</select>
Veamos un ejemplo:
<form>
<select name="colores">
<option value="blanco">blanco</option>
<option value="amarillo">amarillo</option>
<option value="verde">verde</option>
<option value="rojo">rojo</option>
<option value="azul">azul</option>
<option value="negro">negro</option>
</select>
</form>

Es importante observar la primera opcin aparece selecionada por defecto es la primera de la lista.
Podemos elegir la opcin que queremos, con la propiedad selected.
<option value="amarillo" selected>amarillo</option>
<form>
<select name="colores">

<option value="blanco">blanco</option>
<option value="amarillo" selected >amarillo</option>
<option value="verde">verde</option>
<option value="rojo">rojo</option>
<option value="azul">azul</option>
<option value="negro">negro</option>
</select>
</form>

Con el objetivo de asegurarnos de que el usuario a elegido el mismo la opcin, en muchas ocasiones por
despiste de este se enva con el formulario la opcin por defecto, muchos desarrallodores web colocan un
espacio en blanco o habilitan un texto generico.
Ejemplo:

<option value="enblanco"></option>

Y una cosa mas, podemos convertir la ventana en un scroll fijo, sin mas que aadir a select el atributo
size="":
Si se desean seleccionar varias opciones se debe especificar el atributo multiple en la directiva select.
Ejemplo:

<form>
<select name="material" size="3" multiple>
<option> Corcho
<option> Plastico
<option> Madera
<option> Acero Inoxidable
<option> Cobre
<option> Plomo
</select>
</form>

ETIQUETA TEXTAREA

Esta etiqueta <textarea>...</textarea> nos permite asignar una zona de texto, donde el usuario podr
escribir libremente.
Ejemplo:

<form>
<textarea name="opinion" rows="5" cols="55">
Introduzca su opinin sobre este manual prctico de HTML
</textarea>
</form>

Atributos de <textarea>:

rows="n".Donde n es el nmero de filas

cols="n". Donde n es el nmero de columnas
name="nombre". Asigna un nombre identificador nico al campo.
wrap="off / soft / hard". Se usa para indicar el texto que el texto se debe justificar (ajustar al ancho
de la ventana. Off valor por defecto, no hay ajuste del texto envindose este tal y como fue escrito.
Soft, ajusta el texto a la ventana, adems envia este como una cadena continua. Hard, ajusta el
texto a la venta enviando el texto como separando la palabra y lneas donde sea necesario
readonly. No deja que el texto escrito en el rea de texto pueda ser modificado por las personas
que vean la pgina (sin embargo ese contenido ser enviado con el resto del formulario).

disable. Desactiva el elemento. Impidiendo que el texto que contiene se ha modificado, y adems
tampoco es enviado con el formulario.

Ejemplo:
<form>
<textarea name="opinion2" rows="2" cols="55" readonly>
Este texto no se puede modificar es slo de lectura
</textarea>
</form>

A continuacin presentamos un ejemplo de un formulario, maquetado por medio de una tabla:

<form

action="mailto:direccion@correo.com" method="post"
enctype="text/plain">

<table border="0">
<tr height="50">
<td>Nombre</td>
<td>
<input name="nombre" type="Text" size="18" maxlength="18">
</td>
</tr>
<tr height="50">
<td>apellidos</td>
<td>
<input type="text" name="apellidos" size="48" maxlength=48">
</td>
</tr>
<tr height="50">
<td>f. nacimiento </td>
<td>
<input name="f_n" type="text" size="18" maxlength="18">
</td>
</tr>
<tr height="50">
<td>calle y nmero</td>
<td>
<input type="text" name="domicilio" size="48" maxlength="48">
</td>
</tr>
<tr height="50">
<td>cdigo postal</td>
<td>
<input type="text" name="cp" size="5" maxlength="5">
</td>
</tr>
<tr height="50">
<td>provincia</td>
<td>
<input type="text" name="ciudad" size="20" maxlength="20">
&nbsp; &nbsp;
Telfono
<input type="text" name="telefono" size="9" maxlength="9">
</td>
</tr>
<tr height="50">
<td>Sexo</td>
<td>Hombre <input type="radio" name="sexo" value="H">
Mujer <input type="radio" name="sexo" value="M">
Estado Civil
<select name="estado_civil">

<option>Soltero
<option>Casado
<option>Divorciado
<option>Otro
</select>
<td>
</tr>
<tr height="50">
<td>Idiomas</td>
<td>
<input type="checkbox" mane="idiomas" value="E"> Espaol
<input type="checkbox" mane="idiomas" value="F"> Francs
<input type="checkbox" mane="idiomas" value="I"> Ingls
<input type="checkbox" mane="idiomas" value="A"> Alemn
</td>
</tr>
<tr height="50">
<td>Comentarios <br> Personales</td>
<td>
<textarea name="coment" rows="2" cols="44"> </textarea>
</td>
</tr>
<tr height="50">
<td>Pulse aqui</td>
<td align="center">
<input type="submit" value="enviar los datos">
<input type="reset" value="borrar los datos">
</td>
</tr>
</table>
</form>