INTRODUCCION A LA INGENIERIA EN SISTEMAS IA

capitulo 7

Las listas

Las listas (hay quién las llama Indices) son uno de los elementos mas usados a la hora de formatear la información porque:

permiten ordenar claramente la información
son simples de usar
pueden anidarse unas en otras
tienen multiples configuraciones
(Por supuesto, esto es una lista)

Primer elemento

Segundo elemento

Tercer elemento
...

Donde

son los tags que acotan a toda la lista y

acotan a cada elemento de esta.

Antes hemos dicho que, en principio, la marca es igual para todos los elementos de la lista, y que esta depende del navegador.
Sin embargo, se puede cambiar esto mediante la opción TYPE=, que puede tomar los valores DISC, CIRCLE o SQUARE, que fuerzan la representación de la marca como un círculo negro, un círculo vacío y un cuadrado respectivamente. ¿que en qué tag se usa esta opción? Pues se puede usar en los dos. Si lo pones en la forma

, todos los elementos de la lista serán círculos negros, y si lo haces de la forma
, solo se aplicará a ese elemento y a los que le sigan después.

Nota Importante: Lo anterior es el caso teórico e ideal. Por misteriosas razones, Explorer de Microsoft no reconocerá los valores de TYPE= si están escritos en mayuscula, solo si lo están en minuscula. Opera, otro navegador, si los reconoce, pero solo aplica el valor asignado en

al elemento en cuestión, y no a los siguientes. Para que veas que no todo es color de rosa en el mundo del HTML

Para ver esto de las listas mas claro, vamos a ver un ejemplillo (Por lo expuesto en la nota anterior, los valores de TYPE= se han puesto en minuscula):

EJEMPLO DE LISTA

Primer elemento

Segundo elemento

Elemento con cuadradito

Sigue habiendo cuadradito (supongo)

Otro elemento

Elemento con círculo vacio

Último elemento

Ya sabes como verla directamente.

Si el universo de las listas terminase aquí, yo tendría que trabajar menos para hacer este curso de Edición Extremadamente Simple de HTML, pero la cosa esta de las listas sería poco útil. Pero como aun hay más, yo trabajo y esto sigue.

El siguiente tipo de lista es la lista numerada, se construye casi igual que la anterior, pero con el tag que englo ba a toda la lista distinto:

Primer elemento

Segundo elemento

Tercer elemento
...

O sea, que solo hemos cambiado el tag

por
. La diferencia con la anterior es que en esta, en lugar de una marca, cada elemento se indica con su número de orden (1 para el primero, 2 para el sgundo, ect). Además, tú no tienes que preocuparte por saber por recordar que número tienes que poner en la línea, eso ya lo hace el navegador.

Otro tipo de lista que puede ser muy útil es la llamada lista de descripciones o de definiciones. Se la llama así porque se asemeja a la disposición de las palabras y sus definiciones en muchos diccionaros (y se suele utilizar para eso). Para que lo veas mas claro, esto de abajo es una lista de definiciones:

Allan Psicobyte

El autor de Edición Extremadamente Simple de HTML

HTML

Lo que se explica en Edición Extremadamente Simple de HTML

EESdHTML

Las iniciales de Edición Extremadamente Simple de HTML

Vale, perfecto, muy bonito, pero ¿Como se hace esto? Pues de la siguiente forma:

Primer elemento

Primera definición/DD>

Segudo elemento

Segunda definición
...

Como puedes ver,

engloba a toda la lista,

indica cada elemento y

cada definición.

La primera es la lista de directorio, en la que elementos deberían ordenarse horizontalmente en líneas, y en tu navegador se ven de esta forma:

Primer elemento
Segundo elemento
Tercer elemento
Cuarto elemento
(En la mayoría de los navegadores se representa igual que las del tipo

.

Se deben declarar de esta otra:

Primer elemento

Segundo elemento

Tercer elemento

Cuarto elemento
...

En definitiva, que mejor te lo piensas dos veces y no la usas, para eso ya tienes otras formas de lista.

Lo mismo te digo del último tipo de lista, la lista de menu, que se usa de esta forma:

Primer elemento

Segundo elemento

Tercer elemento
...

Y que, a efectos practicos, se representa igual que una lista desordenada. Mejor no la uses.

Bueno, para terminar solo me queda decirte que dentro de una lista (concretamente, dentro de

...
)se puede poner casi cualquier otro elemento de HTML, esto incluye otra lista, lo que te daría una lista "en escalera", experimentalo, verás que las listas se pueden transformar en un elemento crucial en tus paginas Web. Nos vemos en el capítulo 8.

Capitulo 8

Tablas para todo

Si, aunque solo fuera por un momento, pensaste que las listas eran el elemento definitivo en cuanto a forma de ordenar la información, te equivocaste de plano. Esta de aquí abajo sí es la forma definitiva, el modo mas decente y, a veces, la chapuza que te sacará de algún apuro con el formateo.

1. Esto es una celda de una tabla
2. Esto TAMBIÉN es una celda de esta tabla

3. Esto TAMBIÉN es una celda de la tabla
4. Y esto TAMBIÉN es una celda de esta tabla

Vale, imagino que ahora te haces una idea de qué es una tabla. Por si las moscas, vamos a verlo un poco mas despacio:

La tabla anterior tiene el siguiente código:

1. Esto es una celda de una tabla
2. Esto TAMBIÉN es una celda de esta tabla

3. Esto TAMBIÉN es una celda de la tabla
4. Y esto TAMBIÉN es una celda de esta tabla

Parece un poco complicado, así que veamoslo más despacio:

El tag que define la tabla es , toda la tabla debe estar entre estas dos etiquetas, y las opciones que se apliquen aquí tendrán efecto sobre toda la tabla.

Con defininos cada una de las líneas de la tabla, los atributos que se empleen en este tag tendrá efecto en toda la línea. En resumen, tendremos tantos ... como filas tenga la tabla y, como la tabla de arriba tiene dos filas, entonces tiene dos tags ....

Y, por últmo, dentro de cada fila indicamos una celda concreta con las etiquetas , entre las cuales pondremos lo que queremos que valla en esa celda (Texto en nuestro caso, aunque pueden ser imágenes o cualquier otra cosa).

Esto es lo básico de las tablas, ahora vamos a meternos un poco mas en profundidad.

Los principales atributos aplicables al tag son:
align=(valor), que puede valer "left", "right" o "center", y que, como te estás imaginando, alinea toda la tabla a la izquierda, derecha y centro, respectivamente.

bgcolor=(color), esta opción permite elegir el color del fondo de la tabla, para esto se usan los códigos de color que ya conocemos.

border=(tamaño), donde tamaño es el grosor en pixels del borde de la tabla. Si es cero, la tabla no tendrá borde (es la opción por defecto si no usas el atributo border) si no pones nada ( o sea, solo pones "border", sin signo igual),entonces se considera como si fuera "border=1".

width=(ancho), donde (ancho) puede ser un número que representará el ancho de la tabla, o estar en la forma número% (por ejemplo, 50%) que indicaría el ancho en proporción al ancho total de la ventana.

cellspacing=(separación), que indica la separación en pixels que existe entre cada celda.

cellpadding=(separación), no la confundas con la anterior, esta indica la separación entre el borde de la celda y su contenido.

cols=(columnas), especifica el número de columnas de la tabla (no es obligatorio ponerlo, pero se supone que los navegadores modernos tardan menos en representar la tabla si lo pones).

Un nuevo atributo para TABLE, que no es soportado por muchos navegadores, es FRAME, que permite decidir la forma en la que se verán los bordes exteriores de la tabla. Su valor puede ser uno de los siguientes:

frame="void" hace que se no muestre el ningún borde lde la tabla.

frame="avove" hace que se muestre solo la línea superior de la tabla (igual que con border=0, es la opción por defecto).

frame="below" muestra solo el borde inferior de la tabla.

frame="hsides" hace que se vean los bordes inferior y superior.

frame="vsides" para mostrar solo los bordes derecho e izquierdo.

frame="lhs" solo muestra el lado izquierdo.

frame="rhs" solo muestra el lado derecho.

frame="border" o frame="box" hacen que se vean los cuatro lados de la tabla.

Otro atributo parecido, pero este dedicado a modificar el aspecto de las líneas de separación entre celdas, es RULES:

rules="none" hace que no aparezcan líneas entre las celdas.

rules="all" para que aparezcan líneas entre todas las celdas.

rules="rows" aparecen solo las líneas horizontales, entre fila y fila.

rules="cols" hace que solo aparezcan las líneas verticales, entre columna y columna.

rules="groups" solo mostrará las líneas entre grupos de filas y/o grupos de columnas (más adelante veremos qué son estos grupos).

Las filas, que como hemos visto se declaran con los tags
...
, tiene las siguientes opciones:
align=(valor), que puede ser left, center, right o justfy, los cuales, respectivamente, alinean el CONTENIDO de la celda a la izquierda, centrado, derecha o justificado.(bueno, lo de justfy lo dicen las especificaciones del HTML pero, hasta ahora, no hay navegadores que lo soporten).

valign=(valor), alinea verticalmente los datos en cada celda (si esta ocupa mas de una línea), puede ser top, middle, botton o baseline, que se corresponden con situar los dato arriba, en el centro, abajo o (mucha atención) arriba, pero alineando la linea de base de las letras, aunque uses fuentes de distinto tamaño. (lo malo es que los navegadores todavía no soportan esto).

Y, por último, las celdas tienen los siguientes atributos:

bgcolor=(color), igual que en
align=(valor), igual que en
valign=(valor), igual que en

colspan=(número), ver más abajo.

rowspan=(número), ver más abajo.

colspan hace que una celda se expanda una o más columnas a la derecha, y rowspan hace lo mismo, pero hacia abajo. ambas propiedades se pueden usar conjuntamente. Veamoslo con un ejemplo:

(colspan=2. Ocupa una fila y dos columnas)
( rowspan=3. Ocupa tres filas y una columna)
(normal 1)

(colspan=2, rowspan=2. Ocupa dos filas y dos columnas)
(normal 2)

(normal 3)

(normal 4)
(normal 5)
(normal 6)
(normal 7)

El lugar concreto donde aparezca este título lo indicamos con el atributo ALIGN. Si indicamos TOP (que es la opción por defecto), este aparecerá sobre la tabla, si usamos BOTTON, debería aparecer al pié de esta, con la opción LEFT hacemos que se vea a la izquierda de la tabla, y con RIGHT se smostrará a la derecha.

El alineamiento en CAPTION aún no está muy soportado, en particular los modos LEFT y RIGHT.

Otro elemento útil para organizar nuestras tablas es , que sirve para crear unas celdas especiales llamadas cabeceras. Se usa exactamente igual que , y también crea una celda, pero se trata de una celda especial, que suele contener información sobre la tabla. Por ejemplo, supongamos que quieres crear un horario en el que organizar tus actividades a lo largo de la semana. Lo mejor para ello es crear una tabla en la que cada colunna sea un día de la semana y cada fila una hora. Para que seas más claro, la primera celda de cada fila contendrá la hora y la primera de cada columna contendrá el dí. Esas son las celdas de cabecera.

Horario Semanal

Lunes Martes Miercoles Jueves Viernes Sábado Domingo

Mañana Madrugar Madrugar Madrugar otra vez Madrugar Madrugar No Madrugar Despertar Tarde

Mediodía Comer Mucho Comer Comer Mucho Comer Poco Comer Comer Mucho Estoy Engordando

Tarde Dormir la Siesta Hacer Joging Ir al Cine Comer (hoy tengo hambre) Telefonear Internet No levantrse del Sofá

Noche Dormir Dormir Insomnio Dormir Mucho Colgar el teléfono Saturday Night Dormir

Espero que esto aclare el uso de TH. La mayoría de los navegadores pondrán el contenido de esta etiqueta en negrita. Como puedes ver, también hemos usado CAPTION para poner un título a la tabla.

Con esto hemos visto lo más básico de las tablas. Si no te ha quedado claro será mejor que le des otro vistazo antes de continuar. Ahora vamos a ver algunas cosas un poco más complejas.

Con lo que hemos visto hasta ahora ya podemos hacer tablas tremendamente elaboradas. Pero HTML 4.0 nos provee de nuevas herramientas tremendamente poderosas para construir nuestras tablas.

El primer método es usar el elemento , que sirve para agrupar filas de una tabla. Su uso es muy simple: Solo hay que agrupar las filas que quieras entre las etiquetas y . Adepta los mismos atributos ALIGN y VALIGN que hemos visto para , solo que en este caso se aplicarán a todas las celdas contenidas en TBODY, tal como puedes ver en este ejemplo:

Tabla con dos TBODYs

Contenido de la celda
Contenido de la celda
Contenido de la celda

Contenido de la celda
Contenido de la celda
Contenido de la celda

Contenido de la celda
Contenido de la celda
Contenido de la celda

Pero, a veces, puede ser mucho más interesante organizar nuestra tabla por columnas. Pra ello disponemos, en principio, de la siguiente etiqueta:

Vale: En principio, no es necesario cerrar esta etiqueta (aunque es recomendable), luego veremos un caso en el que sí es obligatorio.

En SPAN debes poner el número de columnas que se agrupan (si no usas SPAN, se considerará que se trata de una sola columna), y WIDTH, VALIGN, y ALIGN funcionan exactamente igual que en el elemento TD.

Podemos repetir el elemento COLGROUP tantas veces como sea necesario del siguiente modo:

Pero COLGROUP nos ofrece otra posibilidad: La de definir algunas características para una o varias columnas dentro de un mismo grupo. Esto se hace por medio de la etiqueta , que se usa dentro de COLGROUP del siguiente modo:

Se trata de una etiqueta vacía (esto es, no tiene etiquta de cierre ) y tiene los mismos atributos SPAN, WIDTH, ALIGN y VALIGN que ya conocemos.

Otras dos etiquetas interesantes son las que nos permiten crear, con un grupo de filas, una cabecera y un pié de tabla. La principal utilidad de estos elementos se muestra a la hora de imprimir: Si tu tabla ha de dividirse en varias páginas, la cabecera se imprimirá al principio de cada una de ellas, y el pié al final.

Para poner cabeceras usamos un procedimiento similar al que vimos en TBODY, pero con la siguiente etiqueta:

Celda 1Celda 2
...

Como ves, hemos creado, al igual que con TBODY, un grupo de filas. De hecho, la única diferencia práctica con TBODY es la relativa a la impresión del documento.

THEAD acepta los mismos atributos que TBODY.

Para crear un pié de tabla hacemos exactamente lo mismo, pero con el siguiente tag:

Celda 1Celda 2
...

Que funciona exactamente igual que THEAD.

Al usar estas etiquetas de agrupamiento debes tener muy en cuenta el orden: Primero va THEAD, despues TFOOT y, por último, TBODY. Mejor será que veamos un ejemplo:

Capitulo 9

Los fames

Lo primero que necesitamos es una página "madre" que dividiremos en viñetas (los frames propiamente dichos), y una serie de páginas "hijas", que serán las que ocupen esas viñetas. El código necesario para crear esta "página madre" es el siguiente:

Como primera cosa curiosa vemos que nuestro viejo amigo ...ya no está por aquí, así que no vayas a equivocarte y ponerlo.

Para crear los frames usamos la sentencia ..., este tag tiene dos opciones que son mutuamente excluyentes (o sea, que solo puedes usar una de las dos) que son:

ROWS=(números separados entre comas)

COLS=(números separados entre comas)

ROWS crea tantos frames como números separados entre comas hayas puesto, distribuyendolos de forma vertical.

COLS hace lo mismo, pero distribuyendolos en horizontal.

Los números separa dos entre comas indican la parte proporcional de la ventana que utilizará cada frame, se puede representar de varias formas (Lo siguiente vale tanto para COLS como para ROWS):

ROWS="1*,2*,4*" Esto crearía tres frames, de modo que el tercero ocupara el doble que el segundo y el segundo el doble que el primero. (No te preocupes, el navegador se ocupa de calcular esto)

ROWS="10%,40%,50%" Esto crea otros tres frames, que ocupan el 10% el 40% y el 50% respectivamente. (Ten cuidado en ajustar que sumen 100%, o algunos navegadores pueden tener problemas)

ROWS="10,50%,*" crearía tres frames horizontales (uno encima de otro), el primero de 10 pixels, el segundo de la mitad del alto de la ventana, y el tercero ocuparía el espacio restante (que depende del tamaño total de la ventana).

Dentro de ... puedes poner otra etiqueta ... (Luego veremos esto) o poner directamente dos o más etiquetas (tantas como hayas indicado en COLS o ROWS). La directiva no tiene contenido ni etiqueta de cierre, y tiene las siguientes opciones:

SRC=URL Donde URL es la dirección de la página que quieres que aparezca en este frame.

NAME=nombre Donde nombre es precisamente eso, un nombre que le damos al frame. (Esto es muy útil, ya lo veremos luego)

FRAMEBORDER=número Donde número puede ser 1 ó 0, si es 1 (que es la opción por defecto) el frame tendrá borde, si es 0 no lo tendrá. (Algunos navegadores pueden reconocer otros números, indicando el grosor en pixels del borde, pero esto no es muy legal)

MARGINWIDTH=número Indica la distancia entre el ancho del contenido y el borde del frame en pixels.

MARGINHEIGHT=número Hace lo mismo que MARGINWIDTH, pero en altura.

NORESIZE Que no tiene ningún valor, indica al navegador que no es posible cambiar el tamaño del frame.

SCROLLING=valor Sirve para indicar si aparecerá una barra de scroll en el frame, valor puede ser uno de los siguientes: YES, que hace que la barra aparezca siempre (Aunque no sea necesaria), NO, que hace que no aparezca nunca (Aunque sí lo sea), y AUTO, (que es el valor por defecto) hace que solo aparezca si es necesaria.

Por defecto, si tú picas un link en un frame, la página a la que llamas te aparecerá dentro de ese mismo frame. ¿Como podemos cambiar esto? Pues con el atributo NAME que habíamos visto antes y con otro nuevo, el atributo TARGET del tag ..., que no vimos en su momento, pero que vamos a ver ahora mismo. Se usa del siguiente modo:

...

TARGET=_top Hace lo que decíamos arriba: La página aparece en la ventana principal (La que contiene a todos los frames).

TARGET=_blank Muestra la página en una nueva ventana.

TARGET=_parent Hace que la página se muestre en la ventana que contiene a ese frame en concreto. Es decir, si tienes una página con frames, en uno de los cuales hay otra página con frames, y en uno de ellos tienes un link con TARGET=_parent, entonces la página a la que llames con ese link aparecerá en el frame que contenía a la segunda página con frames. Tras picar en el link tendrías una página con frames en uno de los cuales está la nueva página.(Si hubieras usado TARGET=_top tendrías solo la nueva página).

TARGET=_self Hace aparecer la página en ese mismo frame (Es la opción por defecto)

Ojo, estos nombres deben ir, necesariamente, en minúsculas y, como te puedes imaginar, no puedes usarlos para ponerselos a tus frames.

Posiblemente te estés preguntando que para qué demonios sirve el TARGET=_self si esa es precisamente la opción por defecto. Pués la solución es muy simple: Porque podemos cambiar esa opción por defecto y hacer que todos los links de una página aparezcan en un frame o página en concreto. Para ello tenemos el siguiente tag:

(En realidad hace más cosas, pero a nosotros nos basta, por ahora, con esto.)

no tiene contenido ni etiqueta de cierre, se coloca dentro del a cabecera (es decir, entre y ) y la opción TARGET puede ser el nombre de un frame, un nombre nuevo (para una nueva ventana), o cualquiera de los nombres especiales que hemos indicado arriba.

O sea, que si en una página pones , todos los links de esa página se abrirán en nuevas ventanas, en lugar de hacerlo en esa misma.

Es por ello que existe otra etiqueta que pueede agregarse a nuestra página de frames:

Los navegadores que soporten frames ignorarán el contenido de noframes, pero aquellos que no los soporten mostrarán el contenido de esta etiqueta. De este modo te aseguras de que nadie se pierda lo que tienes que decirles en tu página.

De este modo, una página con frames bién hecha tendrá una estructura parecida a la de este ejemplo:

Algunos webmasters se limitan a poner en la sección NOFRAMES un texto del tipo de "Su navegador necesita frames para ver esta página". Esto es, además de una muestra de mal estilo de diseño, una tontería. Es mucho mejor usar la etiqueta NOFRAMES para construir un menú alternativo con el que permitir el acceso a tu página a los navegadores que no reconozcan frames.

NOFRAMES tiene, además, otro uso. Se podría poner una sección NOFRAMES en una página cualquiera, aunque no fuese de frames, de modo que su contenido solo se mostrase si esa página no aparece en un frame. D este modo se podrían poner, por ejemplo, links en cada una de las páginas, que solo se verían en un navegador que no pudiese acceder a una barra de menús en otro frame. Desafortunadamente, ningún navegador reconoce ese uso de NOFRAMES.

Y, para terminar, existe un tipo especial de frame que sirve para mostrar dentro de una página normal una ventana con otra página dentro. Lo malo es quemuy pocos navegadores la soportan (a la hora de escribir este capítulo, solo Internet explorer es capaz de reconocerlos).

Esta etiqueta es la siguiente:

¡Cielos! Veamos esto despacio:

Los atributos SRC y NAME funcionan exactamente igual que los que hemos visto en los frames normales.

HEIGHT y WIDTH sirven para declarar, respectivamente, el alto y el ancho de la ventana del frame. Puede ser un valor en pixels o un procentaje.

MARGINHEIGHT y MARGINWIDTH se usan para poner los márgenes entre el contenido de la ventana y su borde. El primero para los márgenes superior e inferior y el segundo para el izquierdo y el derecho.

Con FRAMEBORDER especificamos si queremos que aparezca un borde o no. Pondremos un 1 para que aparezca y un 0 para que no se vea ningún borde.

Quizás sea mejor verlo con un ejemplo:

Página con un IFRAME

Esta página tiene un IFRAME

Capitulo 10

Formularios primeros pasos

Los formularios son el sistema del que nos provee el HTML para enviar información desde una página web a algún programa u otro recurso en un ordenador remoto. Esto quiere decir que un formulario no sirve de mucho si no tenemos un lugar al que enviarlo.

El funcionamiento de los formularios es muy simple: La persona que visita la página rellena una "matriz" (el formulario propiamente dicho) con los datos que se quieran enviar y, al picar en un botón, estos son enviados al lugar que corresponda (generalmente, un programa CGI alojado en nuestro servidor) en la forma NOMBRE-DEL-CONTROL=VALOR.

Aquí no hablaremos de los CGIs, si no que nos limitaremos a ver como se construyen los formularios web. Por ahora, te basta con saber que los CGI son programas que se ejecutan en la máquina donde está alojada tu página (o en otra máquina de Internet), y que envían una respuesta al navegador.

El primer tag que tenemos que tener en cuenta es el que crea un formulario. Este tag deberá englobar en su interior a todos los elementos que formen parte de este:

...

tiene tres atributos:

ACTION=URL que indica la dirección a la que será enviado el contenido del formulario.

METHOD=método. Donde método, que puede ser POST o GET, indica la forma en que se enviarán los datos a la url especificada en ACTION. (La opción por defecto es "GET")

ENCTYPE=tipo-mime que sirve para definir el tipo de datos que se enviarán. La opción por defecto (y la más usual) es el "application/x-www-form-urlencoded", que significa que la información se mandará codificada como una cadena URL (sustituyendo algunos caractéres "problemáticos" con códigos especiales).

Dentro debemos colocar algunos elementos, llamados controles, como cuadros de texto, botones, ect. Para crear cada uno de estos elementos tenemos la directiva , que tiene un atributo obligatorio: TYPE, que es el que determina el tipo concreto de control de que se trata:

Donde "tipo de control" puede ser uno de los siguientes:

"SUBMIT" crea el clásico botón "Enviar", y es el que, al ser pulsado, envía los datos del formulario a la dirección especificada en ACTION.

"RESET" inserta un botón "Borrar" que, al ser pulsado, elimina los datos de todos los controles del formulario que lo contiene.

"BUTTON" crea un botón.

"TEXT" crea un cuadro para insertar una línea de texto.

"PASSWORD" hace lo mismo que "TEXT", pero los caracteres que se escriban no se verán en pantalla, sino que serán sustituidos por asteriscos.

Mucho ojo: El que en una entrada "PASSWORD" los caractéres aparezcan como asteriscos no quiere decir que la información que se inserte e ella esté encriptada o portegida de ningún modo. Para lo único que sirve es para evitar que un curioso pueda mirar por encima de tu hombro y leer lo que pones.

"CHECKBOX" crea una caja de verificación, que es uno de esos pequeños cuadraditos que pueden marcarse como activados o desactivados (Bueno, luego los verás).

"RADIO" crea un "Radio Button", algo parecido a lo anterior, pero con la sutil diferencia de que suelen ser redondos, estar agrupados, y que, dentro de un grupo solo puede aparecer uno marcado cada vez. (De acuerdo, también los verás luego).

"IMAGE" funciona exactamente igual que "SUBMIT", pero aquí puedes especificar una imagen para que aparezca en lugar del aburrido botón tradicional.

"HIDDEN" no muestra nada, absolutamente nada. Si lo pones dentro de tu formulario, este se verá exactamente igual. ¿Y para que sirve entonces? Pues para enviar al CGI, siempre que se use ese formulario, información que pueda ser necesaria, pero que no necesite cambiarse ni verse.

"FILE" sirve para crear un cuadro de diálogo mediante el que enviar un archivo desde tu disco duro. No está soportado en todos los navegadores.

Bueno, esto parece un poco complicado. Veamos un ejemplo con el que aclararnos un poco:

(TYPE=TEXT)

(TYPE=PASSWORD)

(TYPE=CHECKBOX)

(TYPE=RADIO)

(TYPE=BUTTON)

(TYPE=FILE)

(TYPE=SUBMIT)

(TYPE=RESET)

e se usan de forma casi idéntica, y tienen los siguientes atributos:

NAME="nombre" le asigna un nombre al formulario, lo que es necesario para que el programa CGI que vayas a usar sepa qué datos le estás en viando y qué tiene que hacer con ellos.

SIZE="tamaño", donde "tamaño" es un número que indica el ancho en caracteres de la línea de texto.

MAXLENGTH="número", que sirve para indicar el número máximo de caracteres que se podrán introducir. (es decir, que si pones MAXLENGTH=10, el navegador no te dejará introducir más de 10 letras).

VALUE="texto" sirve para asignar un texto por defecto que aparecerá dentro del cuadro. (Por ejemplo, el clásico "Ponga aquí su nombre").

READONLY, que se pone así, sin ningun valor, hace que el texto que haya en el cuadro no pueda ser cambiado por el navegante.

acepta los siguientes atributos:

NAME="nombre" funciona igual que vimos antes, asignando un nombre al control, con la salvedad de que se puede asignar el mismo nombre a varios checkboxs, para agruparlos como un único control.

VALUE="valor" asigna al checkbox el valor que enviará, si está seleccionado, al enviar el formulario.

CHECKED se usa para indicar que una casilla está seleccionada por defecto.

Al enviar el formulario, este control no enviará absolutamente nada si no está seleccionado, o enviará la cadena "nombre"="valor", donde "nombre" es el contenido de NAME y "valor" el de VALUE, si está seleccionado.

es casi igual que checkbox, pero con la diferencia de que este tipo de control nunca debe aparecer solo, y que solo puede ser seleccionado uno de cada grupo al mismo tiempo:

NAME="nombre" sirve, como siempre, para asignar un nombre al control. debe ser el mismo para cada uno de los que formen parte de un mismo grupo, y solo uno de ellos podrá ser activado a un mismo tiempo. (Ya sé que me pongo demasiado pesado con esto, pero quiero que quede muy claro).

VALUE="valor" funciona exactamente igual que en el control checkbox.

CHECKED también tiene el mismo uso que en checkbox. Pero recuerda usarlo con solo uno de los miembros de un grupo.

Al enviar el formulario, enviará la cadena "nombre"="valor", donde "nombre" es el contenido de NAME y "valor" el de VALUE del botón que esté seleccionado en ese grupo.

es un control un poco especial. Por sí mismo no sirve de nada, pero es muy útil en combinación con Scripts. Puede aceptar muchos modificadores, pero ahora solo vamos a ver dos:

NAME="nombre", para asignar un nombre al control.

VALUE="nombre", que hace que el texto que pongas en "nombre" aparezca escrito en el botón.

es casi exactamente igual que "BUTTON":

NAME="nombre", el nombre al control.

SRC="imagen", donde pones la URL de la imagen que usarás como botón.

ALT="texto", sirve para poner un texto alternativo (igual que hacíamos con ).

solo funcionará si tu servidor acepta que se le envíen archivos (cosa que no es muy habitual) o si tienes un programa CGI preparado para trabajar co ellos. Lo que hace este control es abrir una ventana del tipo "Abrir Archivo", en la que se puede seleccionar un archivo para enviar:

NAME="nombre", es, como siempre, el nombre del control.

Si vas a usar este control, tendrás que usar también, en la etiqueta
, el atributo ACCEPT="tipos mime", en el que "tipos mime" representa una lista de todos los tipos MIME de archivo, separados por comas, que tu programa aceptará.

se usa, como ya dije, cuando quieres poner un valor, pero no es necesario cambiarlo ni que se muestre en el navegador:

NAME="nombre", seguimos usándolo para asignar el nombre del control.

VALUE="nombre", el valor que acompañará al nombre al enviarlo.

. Este control no contiene ningún valor y no envía nada. Sirve solo para deshacer todos los cambios que pueda haber hecho el navegante. Los campos que no tengan ningún valor por defecto quedarán en blanco, y los que lo tengan adoptarán este de nuevo.

VALUE="nombre", hace que el contenido de "nombre" aparezca escrito en el botón, es recomendable poner cosas del estilode "Borrar", "Borrar todo" o algo que indique claramente para qué sirve este botón.

es el botón que envía el contenido del formulario a la URL que hayas indicado en el parámetro ACTION de la etiqueta .

VALUE="nombre", indica el texto que aparecerá escrito en el botón, pon algo como "Enviar" o algo parecido.

Con lo que tenemos hasta ahora nuestro formulario de ejemplo puede quedar bastante más completo:

(TYPE=TEXT)

(TYPE=TEXT)

(TYPE=PASSWORD)

(TYPE=CHECKBOX 1)

(TYPE=CHECKBOX 2)

(TYPE=CHECKBOX 3)

(TYPE=CHECKBOX 4)

(TYPE=RADIO 1)

(TYPE=RADIO 2)

(TYPE=RADIO 3)

(TYPE=RADIO 4)

(TYPE=BUTTON)

(TYPE=FILE)

(TYPE=SUBMIT)

(TYPE=RESET)

Capitulo 11

Mas formularios

Bienvenido al capítulo 11 (¡Once capítulos, Dios mío!) de este curso de Edición Extremadamente Simple de HTML.

En el capítulo anterior vimos un montón de controles que podemos usar para nuestros formularios. ¿Te parecieron sufucientes? Pues aún nos quedan unos cuantos.

Para abrir boca, veamos el utilísimo cuadro de texto:

Texto por defecto a incluir en el cuadro.
(Incluso con retornos de carro)
(Y espacios...)

¿Pero qué demonios es esto? La etiqueta sirve para crear un cuadro de texto. En este texto se respetarán los saltos de línea y los espacios en blanco. NAME es el atributo que usaremos para asignar un nombre al cuadro de texto. En COLS indicaremos el número de columnas que queramos que tenga (en otras palabras, el número de caractéres de ancho del control) y en ROWS el número de filas (su alto en caractéres). Otra opción que podemos usar es READONLY, que hace que no pueda modificarse el contenido del cuadro. Entre

y podemos poner, opcionalmente, un texto que aparecerá por defecto. Cuando el usuario active el botón SUBMIT del formulario, se enviará el nombre del cuadro seguido del contenido de este. Facil y bonito, me va gustando esto. Otro control muy espectacular es el menú de selección. primera opciónsegunda opcióntercera opcióncuarta opción Tal como lo hemos puesto arriba, esto creará un pequeño cuadro, parecido a un cuadro de texto, pero con algún botón o similar (esto puede variar de un navegador a otro) que nos permitirá elegir una de entre las opciones que le hemos indicado con la etiqueta . Si le indicamos a la etiqueta primera opciónsegunda opcióntercera opcióncuarta opción Se crea una ventana en la que se puede seleccionar una de las líneas. Si hubiesemos indicado un número de líneas menor que el de opciones, nos mostraría una barra de desplazamiento en el lateral. Y si el valor de SIZE fuera mayor que el número de opciones, nos aparecerían una o más líneas en blanco. Pero, ¿Y cómo indicamos un valor por defecto? Pues con el atributo SELECTED aplicado a una de las etiquetas de este modo: opción preseleccionada Como ves no es nada complicado. ¿Y si queremos que se puedan seleccionar mas de una opción? Pues nada, que le ponemos en la etiqueta que haya seleccionado el navegante. Pero, a veces, es más convenienteenviar, en lugar de el texto de, otro texto distinto (para que lo maneje mejor el prograna CGI, por comodidad...) para ellotiene un atributo, VALUE que se usa del mismo modo que en otros controles:Texto de la opción TextArea y SelectEdición Extremadamente Simple de HTMLEsta en la que estoyLa página de HTML de Allan PsicobyteTodas las anteriores son ciertas ¿Por qué te gusta? (Puedes dar varias razones): Porque síPorque me dá la ganaPorque es muy bonita¿Y a tí que te importa?   Capitulo 12 Introduccion a la css Las hojas de estilo son un sistema práctico y eficiente para controlar la apariencia de las páginas web. Con ellas es posible controlar todo aquello que se refiera a la representación en pantalla, o incluso en otros soportes, como medios impresos, lectores de voz... Las hojas de estilo están escritas en un lenguaje propio, o sea, independiente al HTML. Por ello aquí nos vamos a ocupar solamente de cómo se insertan en un documento HTML, sin preocuparnos de cómo se escriben. Para aprender a usar la hojas de estilo hará falta un tutorial aparte. En teoría, existen varios lenguajes en los que se pueden escribir las hojas de estilo, pero en la práctica solo uno está lo suficientemente extendido. Ese lenguaje es el Cascading Style Sheet (Hojas de Estilo en Cascada), más usualmente llamado CSS para ahorrar tiempo. Por lo tanto, en lo que queda de capítulo, vamos a suponer que este es el lenguaje del que hablamos, aunque sería lo mismo para cualquier otro que usemos (si algún día los navegadores soportan otro lenguaje de estilo). Empecemos: La primera forma de aplicar un estilo a un elemento de tu página Web es por medio del atributo STYLE, que se puede aplicar a casi cualquier etiqueta de HTML. Por ejemplo, la siguiente línea: Hola, amigos, esto solamente es un texto experimental. La cadena background-color: #FFFF00; que hay entre las comillas es una regla de estilo escrita en CSS. Se pueden aplicar varias reglas a un mismo elemento. Por ejemplo, la regla de CSS para hacer que un texto aparezca en negrita es font-style: italic;, de modo que, si queremos que un párrafo aparezca en cursiva sobre un fondo de color verde, tenemos que escribir lo siguiente: Hola, amigos, esto solamente es otro texto experimental, con la sola idea de demostrar las virtudes de las hojas de estilo en cascada CSS. Aunque hoy día no es necesario, para evitar posibles errores el día que se generalicen varios lenguajes de estilo dustintos, es recomendable poner, dentro de la sección , la siguiente directiva: Supongo que ahora empiezan a parecerte muy interesantes la hojas de estilo, y que ya estás empezando a imaginar la cantidad de posibilidades que tienen. Pues esto solo es el principio, aún queda lo mejor. Lo que hemos visto hasta ahora se distingue muy poco, en la práctica, del uso de atributos HTML tradicionales. Incluso puede parecer un problema: ¿No teníamos suficiente con aprender todos esos tags y atributos, y ahora tenemos que aprender unas nuevas reglas de estilo? ¿qué ventaja tiene esto? Veamos qué te parece esto: Que debe ir dentro de la sección HEAD de la página. (Entre las etiquetas y ) Las líneas de comentario ( ) son para evitar que los navegadores más antíguos (que no reconocen CSS) muestren en pantalla las reglas como si fueran texto (lo cual quedaría muy feo y poco elegante, claro). Y, donde pone "reglas de estilo", puedes poner todas las que quieras, siguiendo el formato del tipo de hojas de estilo que hayas especificado en TYPE (en este caso, CSS). Esta forma es, esquematicamente, la siguiente: ETIQUETA { PROPIEDAD: VALOR;} Como, por ejemplo, sería: I {text-decoration: underline;} Que haría que TODOS los Textos que apareciesen entre y se mostrasen subrayados. La mejor forma de ver esto es mediante un ejemplo: EJEMPLO Ejemplo de una página con una hoja de estilo CSS bastante simple. Con la sola idea de mostrar con un ejemplo elemental algunas de las muchas capacidades de las Hojas de Estilo En Cascada, y nada más. Con textos en NEGRITA Pero ahora creo que no me gusta como ha quedado el ejemplo anterior, así que voy a hacer unos cambios, para lo cuál solo tengo que modificar las reglas de estilo: EJEMPLO Ejemplo de una página con una hoja de estilo CSS bastante simple. Con la sola idea de mostrar con un ejemplo elemental algunas de las muchas capacidades de las Hojas de Estilo En Cascada, y nada más. Con textos en NEGRITA Como puedes ver, hemos modificado todo el aspecto de la página con solo cambiar unas líneas. Eso es muy intresante, pero, ¿Y si, po ejemplo, no quiero cambiar la apariencia de todas las negritas, sino solo de algunas? Puede hacerse, pero primero hace falta conocer un par de nuevos atributos. Estos atributos se pueden aplicar a casi cualquier etiqueta de HTML, y sirven, nada más y nada menos, para ponerles nombre. El primero de ellos es CLASS, y se usa del siguiente modo: Donde ETIQUETA puede ser cualquier Tag al que le queramos poner un nombre, y nombre es el nombre que le quieras poner. Por ejemplo, podríamos poner esto para darle el nombre "importante" a una etiqueta de negrita: Muy bién, pero ¿Para qué demonios quiero ponerle un nombre a una etiqueta? Pues bién, puedes ponerle el mismo nombre a varias etiquetas del mismo tipo, para distinguirlas de las normales, y aplicar una misma regla a todas ellas del siguiente modo: ETIQUETA.NOMBRE { PROPIEDAD: VALOR;} Que es igual que hemos visto antes, pero poniendo el nombre que le hemos dado a las etiquetas que queramos, detras del nombre del tag separado por un punto. Por ejemplo: B.importante {color: #FFFFFF;} Esto hará que todos las negritas que tengan "importante" en su CLASS se muestren en color rojo, sin afectar en nada al resto. EJEMPLO Ejemplo de una página con una hoja de estilo CSS bastante simple. Con la sola idea de mostrar con un ejemplo elemental algunas de las muchas capacidades de las Hojas de Estilo En Cascada, y nada más. Con textos en NEGRITA, algunos con el atributo CLASS para marcarlos como "importante" Recuerda no olvidar las cosas IMPORTANTES Como puedes ver, algo cómodo facil y eficiente. Por otro lado tenemos otro modificador muy parecido al anterior, ID, que se usa de forma muy parecida, con la salvedad de que este se usa para hacer referencia a UN SOLO ELEMENTO EN TADA LA PÁGINA. Es decir, no puede haber dos elementos con un mismo ID en la misma página. Como te podrás imaginar, su uso es mucho más restringido que el de CLASS, y se usa de esta forma: Donde ETIQUETA es el nombre del tag que estás usando (evidentemente) y nombre es el nombre exclusivo que le quieres dar a esta. Un ejemplo de un párrafo con el nombre "principal" sería: Como vés, no tiene ninguna complicación. Cuando, en la sentencia STYLE, le queramos indicar una serie de regla a una de estas etiquetas, lo haremos del siguiente modo: #nombre {variable: valor;} Es decir, el signo "almohadilla" (#), seguido del nombre que le hayas puesto, y las reglas que apliques. Para poner el ejemplo anterior del párrafo "principal" subrayado, escrobiríamos lo siguiente: #principal {text-decoration: underline;} Para eso tenemos las Hojas de Estilo Externas. Esto son unos pequeños archivos de texto que van APARTE de los documentos HTML, en los que se declaran las reglas de estilo. De esta forma pueden aplicarse las mismas reglas a muchas hojas distintas. Las hojas de estilo externas se situan en un documento HTML en la sección HEAD de la página, con la siguiente etiquteta: Donde lo único que tienes que cambiar es URL, que es la dirección donde está guardada la hoja de estilo y su nombre. La hoja de estilo puede llamarse como más te guste, pero lo tradicional es ponerle la extensión .css. De este modo, si queremos usar en una página una hoja de estilo llamada "mihoja.css" que se encuentra en el subdirectorio "estilo", deberíamos hacerlo del siguiente modo: Y, para terminar, aquí tienes dos nuevas etiquetas que pueden serte muy útiles junto con las hojas de estilo: La rpimera de ellas es ... , que es una etiqueta de formato de bloque (Igual que, por ejemplo ... o ... ), pero que no modifica en nada a su contenido (lo que hace que puedas usarla para separar bloques y asignarles estilos como hemos visto más arriba). La segunda es ..., que se comporta como una etiqueta de formato de línea (Como, por ejemplo, ... o ...), y que tampoco modifica en nada su contenido, muy útil para dar formato con CSS a palabras o líneas concretas. Read more