Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Vega Contenido
Vega Contenido
DEFINICION DE CSS
CSS, es una tecnologa que nos permite crear pginas web de una manera ms exacta. Gracias a las CSS somos
mucho ms dueos de los resultados finales de la pgina, pudiendo hacer muchas cosas que no se poda hacer
utilizando solamente HTML, como incluir mrgenes, tipos de letra, fondos, colores... Incluso podemos definir
nuestros propios estilos en un archivo externo a nuestras pginas; as, si en algn momento queremos cambiar
alguno de ellos, automticamente se nos actualizarn todas las pginas vinculadas de nuestro sitio.
ESPECIFICACION OFICIAL DE CSS
CSS es una especificacin desarrollada por el W3C (World Wide Web Consortium) para permitir la separacin de
los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento
con las hojas de estilo, incluyendo elementos tales como los colores, fondos, mrgenes, bordes, tipos de letra...,
modificando as la apariencia de una pgina web de una forma ms sencilla, permitiendo a los desarrolladores
controlar el estilo y formato de sus documentos.
Cmo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos
estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una
declaracin, esta ltima va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos
puntos.
FUNSIONAMIENTO BASICO DE CSS
Antes de que se generalizara el uso de CSS, los diseadores de pginas web utilizaban etiquetas HTML
especiales para modificar el aspecto de los elementos de la pgina. El siguiente ejemplo muestra una pgina
HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el
tamao de letra de cada elemento de la pgina.
El problema de utilizar este mtodo para definir el aspecto de los elementos se puede ver claramente con el
siguiente ejemplo: si la pgina tuviera 50 elementos diferentes, habra que insertar 50 etiquetas <font>. Si el sitio
web entero se compone de 10.000 pginas diferentes, habra que definir 500.000 etiquetas <font>. Como cada
etiqueta <font> tiene tres atributos, habra que definir 1.5 millones de atributos.
Como el diseo de los sitios web est en constante evolucin, es habitual modificar cada cierto tiempo el
aspecto de las pginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto del sitio requerira
modificar 500.000 etiquetas y 1.5 millones de atributos
La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla est compuesta de una
parte de "selectores", un smbolo de "llave de apertura" ({), otra parte denominada "declaracin" y por ltimo, un
smbolo de "llave de cierre" (}).
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaracin: especifica los estilos que se aplican a los elementos. Est compuesta por una o ms
propiedades CSS.
Propiedad: caracterstica que se modifica en el elemento seleccionado, como por ejemplo su tamao de
letra, su color de fondo, etc.
completo cualquier comentario de los archivos CSS, por lo que es comn utilizarlos para estructurar de forma
clara los archivos CSS complejos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */,
tal y como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas lneas como sea necesario, pero no se puede incluir un comentario
dentro de otro comentario:
/* Este es un
comentario CSS de varias
lineas */
Aunque los navegadores ignoran los comentarios, su contenido se enva junto con el resto de estilos, por lo que
no se debe incluir en ellos ninguna informacin sensible o confidencial.
La sintaxis de los comentarios CSS es muy diferente a la de los comentarios HTML, por lo que no deben
confundirse:
< !-- Este es un comentario en HTML -->
< !-- Este es un
comentario HTML de varias
lineas -->
SINTAXIS DE LA DEFINICION DE CADA PROPIEDAD DE CSS
A lo largo de los prximos captulos, se incluyen las definiciones formales de la mayora de propiedades de CSS.
La definicin formal se basa en la informacin recogida en el estndar oficial y se muestra en forma de tabla.
Una de las principales informaciones de cada definicin es la lista de posibles valores que admite la propiedad.
Para definir la lista de valores permitidos se sigue un formato que es necesario detallar.
Si el valor permitido se indica como una sucesin de palabras sin ningn carcter que las separe (parntesis,
comas, barras, etc.) el valor de la propiedad se debe indicar tal y como se muestra y con esas palabras en el
mismo orden.
Si el valor permitido se indica como una sucesin de valores separados por una barra simple (carcter |) el valor
de la propiedad debe tomar uno y slo uno de los valores indicados. Por ejemplo, la notacin <porcentaje> |
<medida> | inherit indica que la propiedad solamente puede tomar como valor la palabra reservada inherit o un
porcentaje o una medida.
Si el valor permitido se indica como una sucesin de valores separados por una barra doble (smbolo ||) el valor
de la propiedad puede tomar uno o ms valores de los indicados y en cualquier orden.
Por ejemplo, la notacin <color> || <estilo> || <medida> indica que la propiedad puede tomar como valor
cualquier combinacin de los valores indicados y en cualquier orden. Se podra establecer un color y un estilo,
solamente una medida o una medida y un estilo. Adems, el orden en el que se indican los valores es
indiferente. Opcionalmente, se pueden utilizar parntesis para agrupar diferentes valores.
Por ltimo, en cada valor o agrupacin de valores se puede indicar el tipo de valor: opcional, obligatorio,
mltiple o restringido.
El carcter * indica que el valor ocurre cero o ms veces; el carcter + indica que el valor ocurre una o ms
veces; el carcter ? indica que el valor es opcional y por ltimo, el carcter {nmero_1, nmero_2} indica que el
valor ocurre al menos tantas veces como el valor indicado en nmero_1 y como mximo tantas veces como el
valor indicado en nmero_2.
Por ejemplo, el valor [<family-name> , ]* indica que el valor de tipo <family_name> seguido por una coma se
puede incluir cero o ms veces. El valor <url>? <color> significa que la URL es opcional y el color obligatorio y
en el orden indicado. Por ltimo, el valor [<medida> | thick | thin] {1,4} indica que se pueden escribir entre 1 y 4
veces un valor que sea o una medida o la palabra thick o la palabra thin.
No obstante, la mejor forma de entender la notacin formal para las propiedades de CSS es observar la
definicin de cada propiedad y volver a esta seccin siempre que sea necesario
SELECTORES
Para crear diseos web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio
en el captulo anterior, una regla de CSS est formada por una parte llamada "selector" y otra parte llamada
"declaracin" ejemplo:
< !--[if !supportLineBreakNewLine]-->
< !--[endif]-->
Selector universal
Se utiliza para seleccionar todos los elementos de la pgina. El siguiente ejemplo elimina el margen y el relleno
de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaracin de la regla CSS):
*{
margin: 0;
padding: 0;
}
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro
cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la pgina que se encuentren dentro
de un elemento
<p>:
p span { color: red; }
Si el cdigo HTML de la pgina es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
AGRUACION DE REGLAS
Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual que los estilos que se
aplican a un mismo selector se definan en diferentes reglas:
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
Las tres reglas anteriores establecen el valor de tres propiedades diferentes de los elementos <h1>. Antes de
que el navegador muestre la pgina, procesa todas las reglas CSS de la pgina para tener en cuenta todos los
estilos definidos para cada elemento.
Cuando el selector de dos o ms reglas CSS es idntico, se pueden agrupar las declaraciones de las reglas para
hacer las hojas de estilos ms eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
El ejemplo anterior tiene el mismo efecto que las tres reglas anteriores, pero es ms eficiente y es ms fcil de
modificar y mantener por parte de los diseadores. Como CSS ignora los espacios en blanco y las nuevas
lneas, tambin se pueden agrupar las reglas de la siguiente forma:
h1 { color: red; font-size: 2em; font-family: Verdana; }
Si se quiere reducir al mximo el tamao del archivo CSS para mejorar ligeramente el tiempo de carga de la
pgina web, tambin es posible indicar la regla anterior de la siguiente forma:
h1 {color:red;font-size:2em;font-family:Verdana;}
HERENCIA
Una de las caractersticas principales de CSS es la herencia de los estilos definidos para los elementos. Cuando
se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma
automtica el valor de esa propiedad. Si se considera el siguiente ejemplo:
p { color: red; }
p { color: blue; }
<p>...</p>
De qu color se muestra el prrafo anterior? CSS tiene un mecanismo de resolucin de colisiones muy
complejo y que tiene en cuenta el tipo de hoja de estilo que se trate (de navegador, de usuario o de diseador), la
importancia de cada regla y lo especfico que sea el selector.
El mtodo seguido por CSS para resolver las colisiones de estilos se muestra a continuacin:
1. Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
2. Ordenar las declaraciones segn su origen (CSS de navegador, de usuario o de diseador) y su prioridad
(palabra clave !important).
3. Ordenar las declaraciones segn lo especfico que sea el selector. Cuanto ms genrico es un selector,
menos importancia tienen sus declaraciones.
4. Si despus de aplicar las normas anteriores existen dos o ms reglas con la misma prioridad, se aplica la
que se indic en ltimo lugar.
Hasta que no se expliquen ms adelante los conceptos de tipo de hoja de estilo y la prioridad, el mecanismo
simplificado que se puede aplicar es el siguiente:
1. Cuanto ms especfico sea un selector, ms importancia tiene su regla asociada.
2. A igual especificidad, se considera la ltima regla indicada.
Como en el ejemplo anterior los dos selectores son idnticos, las dos reglas tienen la misma prioridad y
prevalece la que se indic en ltimo lugar, por lo que el prrafo se muestra de color azul.
En el siguiente ejemplo, la regla CSS que prevalece se decide por lo especfico que es cada selector:
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>
Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia es la misma, decide la
especificidad del selector. El selector * es el menos especfico, ya que se refiere a "todos los elementos de la
pgina". El selector p es poco especfico porque se refiere a "todos los prrafos de la pgina". Por ltimo, el
selector p#especial slo hace referencia a "el prrafo de la pgina cuyo atributo id sea igual a especial". Como el
selector p#especial es el ms especfico, su declaracin es la que se tiene en cuenta y por tanto el prrafo se
muestra de color verde.
UNIDADES DE MEDIDA Y COLORES
Muchas de las propiedades de CSS que se ven en los prximos captulos permiten indicar medidas y colores en
sus valores. Adems, CSS es tan flexible que permite indicar las medidas y colores de muchas formas
diferentes.
Por este motivo, se presentan a continuacin todas las alternativas disponibles en CSS para indicar las medidas
y los colores. En los siguientes captulos, cuando una propiedad pueda tomar como valor una medida o un
color, no se volvern a explicar todas estas alternativas
COLORES
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB
hexadecimal, RGB numrico y RGB porcentual. Aunque el mtodo ms habitual es el del RGB hexadecimal, a
continuacin se muestran todas las alternativas que ofrece CSS.
B)implementacion de los elementos cssen la definicion de la aparencia de los elementos que integran las
paginas web
BOXMODEL
Bordes
The border width properties specify the width of the . Las propiedades ancho del borde especifican el ancho de
la zona fronteriza. The properties defined in this section refer to the value type, which may take one of the
following values: Las propiedades definidas en esta seccin se refieren a la <border-width> tipo de valor, que
puede tomar uno de los siguientes valores:
delgado
A thin border. Un borde fino.
medio
A medium border. Un borde medio.
de espesor
A thick border. Un borde grueso.
< medidas>
The border's thickness has an explicit value. El espesor de borde tiene un valor explcito. Explicit border widths
cannot be negative. anchos explcita frontera no puede ser negativo.
The interpretation of the first three values depends on the user agent. La interpretacin de los primeros tres
valores depende de la aplicacin del usuario. The following relationships must hold, however: Las siguientes
relaciones deben tener, sin embargo:
'thin' <='medium' <= 'thick'. "Delgada" <<= 'medio' = 'de espesor.
Furthermore, these widths must be constant throughout a document. Adems, estos anchos debe ser constante
en todo el documento.
Border-top-width , 'border-right-width' , 'border-bottom-width' , 'border-left-width'
This property is a shorthand property for setting , , , and at the same place in the style sheet. Esta propiedad es
una propiedad resumida para definir border-top-width, border-right-width , Border-bottom-widthy border-leftwidth en el mismo lugar en la hoja de estilos.
If there is only one component value, it applies to all sides. Si slo hay un valor del componente, se aplica a
todas las partes. If there are two values, the top and bottom borders are set to the first value and the right and
left are set to the second. Si hay dos valores, los bordes superior e inferior son determinados por el primer valor
y el derecho e izquierdo son determinados por el segundo. If there are three values, the top is set to the first
value, the left and right are set to the second, and the bottom is set to the third. Si hay tres valores, el superior se
establece en el primer valor, la izquierda y la derecha se establecen en el segundo, y la parte inferior se
establece en el tercero. If there are four values, they apply to the top, right, bottom, and left, respectively. Si hay
cuatro valores, se aplican a la parte superior derecha, inferior e izquierdo, respectivamente.
Example(s):
In the examples below, the comments indicate the resulting widths of the top, right, bottom, and left borders: En
los ejemplos siguientes, los comentarios que indican el ancho resultante de la parte superior, derecha, abajo,
izquierda y las fronteras:
h1 { border-width: thin } /* thin thin thin thin */ h1 {border-width: delgada} / * * fina fina fina fina /
h1 { border-width: thin thick } /* thin thick thin thick */ h1 {border-width: fina gruesa} / * * delgada de espesor
grueso delgado /
h1 { border-width: thin thick medium } /* thin thick medium thick */ h1 {border-width: medio de espesor delgado} /
* * espesor delgado espesor medio /
Margen, relleno, bordes y boxmdel
Las propiedades de color del borde de especificar el color del borde de una caja.
, , , 'Border-top-color' , 'border-right-color' , 'border-bottom-color' , 'border-left-color'
The property sets the color of the four borders. El"border-color" propiedad establece el color de los cuatro
bordes. Values have the following meanings: Los valores tienen los siguientes significados: <color>
Specifies a color value. Especifica un valor de color.
transparente
The border is transparent (though it may have width). El borde es transparente (aunque puede tener ancho).
The property can have from one to four component values, and the values are set on the different sides as for .
El "border-color" propiedad puede tener de uno a cuatro valores de los componentes, y los valores se
establecen en las diferentes partes en cuanto a "border-width".
If an element's border color is not specified with a border property, user agents must use the value of the
element's property as the for the border color. Si el elemento de un borde de color no se especifica con una
propiedad de la frontera, los agentes de usuario debe utilizar el valor del elemento de "color" de propiedad como
el valor calculado para el color del borde.
Example(s):
In this example, the border will be a solid black line. En este ejemplo, la frontera ser una lnea de color negro
slido.
p{p{
color: black; color: negro;
background: white; de fondo: blanco;
Tipos de elementos
El estndar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en lnea y elementos de
bloque.
Los elementos de bloque ("block elements" en ingls) siempre empiezan en una nueva lnea y ocupan todo el
espacio disponible hasta el final de la lnea. Por su parte, los elementos en lnea ("inline elements" en ingls) no
empiezan necesariamente en nueva lnea y slo ocupan el espacio necesario para mostrar sus contenidos.
Debido a este comportamiento, el tipo de un elemento influye de forma decisiva en la caja que el navegador crea
para mostrarlo. La siguiente imagen muestra las cajas que crea el navegador para representar los diferentes
elementos que forman una pgina HTML:
Posicionamiento normal
El posicionamiento normal o esttico es el modelo que utilizan por defecto los navegadores para mostrar los
elementos de las pginas. En este modelo, ninguna caja se desplaza respecto de su posicin original, por lo que
slo se tiene en cuenta si el elemento es de bloque o en lnea.
Los elementos de bloque forman lo que CSS denomina "contextos de formato de bloque". En este tipo de
contextos, las cajas se muestran una debajo de otra comenzando desde el principio del elemento contenedor. La
distancia entre las cajas se controla mediante los mrgenes verticales.
Si un elemento se encuentra dentro de otro, el elemento padre se llama "elemento contenedor" y determina tanto
la posicin como el tamao de todas sus cajas interiores.
Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento contenedor es el
elemento <body> de la pgina. Normalmente, la anchura de los elementos de bloque est limitada a la anchura
de su elemento contenedor, aunque en algunos casos sus contenidos pueden desbordar el espacio disponible.
Los elementos en lnea forman los "contextos de formato en lnea". En este tipo de contextos, las cajas se
muestran una detrs de otra de forma horizontal comenzando desde la posicin ms a la izquierda de su
elemento contenedor. La distancia entre las cajas se controla mediante los mrgenes laterales.
Si las cajas en lnea ocupan ms espacio del disponible en su propia lnea, el resto de cajas se muestran en las
lneas inferiores. Si las cajas en lnea ocupan un espacio menor que su propia lnea, se puede controlar la
distribucin de las cajas mediante la propiedad text-align para centrarlas, alinearlas a la derecha o justificarlas.
Posicionamiento float
El posicionamiento float es uno de los ms utilizados, sobre todo al definir la estructura de las pginas, como se
ver ms adelante. Una caja posicionada mediante la propiedad float, se desplaza hasta la zona ms a la
izquierda o ms a la derecha de la lnea en la que se debera mostrar si no se desplazara.
Una caja desplazada mediante float no pertenece al posicionamiento normal de un documento, por lo que los
elementos de bloque anteriores y posteriores se visualizan como si la caja desplazada no existiera.
Si en el anterior ejemplo la "Caja 1" se posiciona mediante un float: left
En las imgenes anteriores, el resto de cajas ocupan la posicin libre dejada por la "Caja 1" original. Como la
"Caja 1" est desplazada a la izquierda, se coloca por encima de la nueva posicin que ocupa la "Caja 2", a la
que cubre por completo.
Si existen otras cajas desplazadas hacia la izquierda o derecha, la nueva caja desplazada se coloca al lado de las
dems cajas. El siguiente ejemplo desplaza las tres cajas:
Si no existe sitio en la lnea actual, la caja pasa a la siguiente lnea hasta que encuentra el sitio necesario para
mostrarse a la izquierda o derecha de la lnea.
imagen............
Una caja posicionada mediante float influye en la disposicin de todas las dems cajas. CSS permite definir si el
resto de los elementos fluyen alrededor de la caja desplazada o no lo hacen.
Los elementos en lnea que se encuentran al lado de las cajas desplazadas mediante float adaptan su anchura al
espacio libre dejado por la caja desplazada. Si en la lnea donde se encuentra la caja desplazada no existe sitio
necesario para los contenidos de los elementos en lnea, estos se visualizan en la lnea inmediatamente inferior.
Los posibles valores de la propiedad determinan el posicionamiento del elemento y el comportamiento de los
elementos adyacentes. Si se indica un valor left, el elemento se desplaza hasta el punto ms a la izquierda
posible en esa misma lnea (si no existe sitio en esa lnea, el elemento baja una lnea y se muestra lo ms a la
izquierda posible en esa nueva lnea). El resto de elementos adyacentes se adaptan y fluyen alrededor del
elemento desplazado.
El valor right tiene un funcionamiento idntico, salvo que en este caso el elemento se desplaza hacia la derecha.
El valor none permite eliminar el posicionamiento y que el elemento se muestre en su posicin original.
Posicionamiento absoluto
La propiedad position establece el esquema de posicionamiento absoluto de un elemento. Existen cuatro tipos
en el esquema de posicionamiento absoluto:
static: posicionamiento absoluto esttico
relative: posicionamiento absoluto relativo
fixed: posicionamiento absoluto fijo
absolute: posicionamiento absoluto absoluto
IMAGENES Y ELACES
Una de las caractersticas fundamentales de HTML es el hecho de
que se pueden vincular entre s diferentes documentos y tipos de
documentos. Las imgenes vinculadas al texto, designadas tambin
como imgenes in-line, son ya un ejemplo de este tipo de vnculo. La
vinculacin se realizar mediante el tag <IMG> de HTML. En el tag
< IMG> debe estar asignado el atributo SRC (Source, fuente) del URL del
archivo de imgenes. As un tag <IMG> tpico podra ser el siguiente:
< IMG SRC="http://www.nombrepagina.es/imgenes/imagen1.jpg">
Los hiperenlaces se realizan con el tag ancla <A>. El elemento
HTML correspondiente es un continer, es decir, debe cerrarse con el
tag final de forma </A>. En el tag <A> se debe asignar al atributo HREF
la direccin (que se activar pulsando el hiperenlace) en forma de un
URL. En la siguiente lnea HTML, la frase "Universidad de Murcia"
representa un hiperenlace al ordenador de nuestra Universidad:
El laboratorio de redes se encuentra en el stano de la Facultad de
Informtica de la <A HREF=" http://www.um.es">Universidad de
Murcia</A>.
Tambin podemos colocar varios enlaces en una sola frase,
constituyendo lo que se ha dado en llamar con uno de esos trminos
tan extraos que elegimos en este mundo de la informtica, hipertexto.
El <A HREF=" http://aries.dif.um.es">laboratorio de redes</A> se
encuentra en el stano de la <A HREF="
http://www.um.es/~fac_info">Facultad de Informtica</A> de la <A
HREF=" http://www.um.es">Universidad de Murcia</A>.
A menudo se utilizan imgenes como hiperenlaces. Para ello es
necesario anidar los tags <IMG> y <A> descritos anteriormente.
Falta mencionar que el URL de un documento que se encuentra
en el mismo ordenador y el mismo directorio que el documento que se
quiere activar, se puede indicar en forma abreviada. En este caso es
suficiente con indicar el nombre del archivo. El siguiente ejemplo ofrece
la sintaxis de un hiperenlace con forma de imagen:
< A HREF="http://www.um.es">
< IMG SRC="logounimurcia.jpg">
< /A>
Podramos utilizar la opcin de <IMG> BORDER para hacer que el
borde que aparece alrededor de una imagen con hiperenlace,
desaparezca, dando una imagen mucho ms adecuada a la calidad que
requiere una buena web.
< A HREF="http://www.um.es">
< IMG SRC="logounimurcia.jpg">
< /A>
LISTAS
Listas desordenadas
La etiqueta <UL>significa unordered list, lista desordenada, y se corresponde con las vietas en los
procesadores de texto: son listas donde cada elemento est precedido de un smbolo como un putno o un disco.
< TD><TD><TD>columna3
< TFOOT>
< TR>
< TH>lnea de pie 1
< TD><TD>pie 2<TD>
< TR>
< TH>linea de pie 2
< TD>pie 1<TD><TD>pie 3
< TBODY>
< TR>
< TH>linea principal 1
< TD>1-1<TD>1-2<TD>1-3
< TR>
< TH>lnea principal 2
< TD>2-1<TD>2-2<TD>2-3
< TR>
< TH>lnea principal 3
< TD>3-1<TD>3-2<TD>3-3
< /TABLE>
< /BODY> </HTML>
Sin embargo, la presentacin que hacen los browsers en versiones
inferiores a las 4.0 no son satisfactorias, pues el rea de pie de la tabla
queda sobrepuesta al cuerpo de la tabla.
FORMULARIOS
Los formularios interactivos permiten a los autores de pginas Web poner elementos interactivos en sus
pginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se
encuentra en algunas revistas.
El lector escribe la informacin rellenando campos o haciendo clic sobre botones, y luego presiona un botn de
envo para enviarla a una direccin URL que se suele dirigir a una direccin de correo electrnico o a un script
dinmico Web como PHP, ASP o CGI.
La etiqueta FORM
Los formularios estn delimitados con la etiqueta <FORM> ...</FORM>, que permite reunir varios elementos de
formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:
METHOD indica cmo se enviarn las respuestas
"POST" es el valor que enva los datos al agente de procesamiento almacenndolos en el cuerpo del formulario,
en tanto que "GET" enva los datos agregndolos a la direccin URL y separndolos de la direccin con un
signo de interrogacin (para aprender ms sobre los mtodos POST y GET, consulte el artculo sobre protocolo
HTTP)
ACTION indica la direccin a la que se enviar la informacin (un script CGI o direccin de correo electrnico
(mailto:direccin_de_correo_e@equipo))
Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cmo se codifican los datos del
formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/xwww-form-urlencoded) es el nico valor vlido. El atributo opcional ACCEPT se usa para establecer tipos MIME
para los datos que el formulario puede enviar.
Esta es la sintaxis para la etiqueta FORM:
< FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM>
Aqu hay algunos ejemplos de las etiquetas FORM:
< FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">
< FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">
Dentro de la etiqueta FORM
La etiqueta FORM acta como una especie de contenedor para almacenar elementos que permiten al usuario
seleccionar o introducir datos. Todos los datos se enviarn a la direccin URL indicada en el atributo ACTION de
la etiqueta FORM, por el mtodo indicado en el atributo METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero
los elementos interactivos son los ms interesantes. Estos elementos interactivos son:
La etiqueta INPUT: Todos los botones y casillas de texto
La etiqueta TEXTAREA: una casilla de texto