kiubix.

com

Html Parte 1
Contributed by Friday, 04 April 2008

Propsito de este documento Estas pginas han sido creadas como parte del material para imp sobre el mundo WWW, en particular, y las herramientas para moverse por la INTERNET, en general, a un grupo de estudiantes con pocos o nulos conocimientos informticos. Al escribir esto comenc como suelen comenzar casi todos los manuales que pueden encontrarse a lo largo y ancho del ciberespacio, pero en mitad de una farragosa explicacin sobre el ISO 8859-1, pens: "... bueno, esto en realidad no necesitan saberlo... pero, todo sea por el rigor tcnico...". Y entonces hice una prueba... Le di a leer lo que acababa de escribir a un "conejillo de indias" que pasaba por all y que de esto slo conoca "eso que dicen por la tele de las autopistas de la informacin...". El resultado, como era de esperar, fue algo peor que desastroso. De las cinco primeras lneas, slo comprendi una docena de palabras, y de las restantes, sus preguntas daban pie a pensar que era algo ms que un breve cursillo lo que hara falta para que saliese medianamente enterado. Y sin embargo, yo tengo claro que el HTML no es tan difcil. Pero, cul es el objetivo real? Simple: saber lo necesario para poder hacer una pgina personal en un servidor ya instalado. Evidentemente, habr que partir de unos leves conocimientos de "entorno": como haber manejado un procesador de textos en Windows, saber guardar un fichero donde uno quiere y poco ms que sea realmente imprescindible. Y esto es poco ms o menos lo que saben la mayora de usuarios. Haba que olvidar el "rigor tcnico", y escribir las cosas de forma que no se requiriera ser analista de sistemas para comprenderlas, y sobre todo, pensando qu es lo realmente necesario para poder obtener resultados aceptables, que animen al estudiante en un tiempo razonable pero sin dejar de lado los conocimientos de altura, que sern demandados por el propio alumno a medida que avanza. Esto no es un manual de referencia. Ni siquiera es un manual. No hay referencias tcnicas ni siglas, ni lenguaje tcnico... ni por supuesto, est "todo" sobre el HTML. Es una serie de apuntes donde no falta nada de lo que hace atractivo el HTML, con ejemplos de los de cortar y pegar, como un recetario. Algunas cosas son, por naturaleza, algo complejas, y puede que tengas que preguntar, es inevitable. Aunque espero que sean las menos, y que despus de leer esto, ya puedas trabajar sin ayuda. Cmo utilizar ste documento No te aconsejo que te "empolles" toda la gua. Solamente hojala. Ahora se trata de que sepas lo que se puede hacer, no cmo se puede hacer. Cuando te hayas dado un ligero bao de sabidura HTML, piensa lo que quieres hacer. El diseo inicial es importante, comienza a editar tu primera pgina. No temas cometer errores, no se puede romper nada. Lo peor que puede pasar es que no funcione. Cuando ya tengas algo escrito, prubalo. Si algo no funciona, busca la sintaxis correcta, ves complicando el documento poco a poco, "tirando de gua" cuando te atasques. Copia algunos ejemplos y modifcalos. Compara su funcionamiento antes y despus. Propsito de este documento (varios aos despus)Ms reflexiones Como ya se ha dicho, estas pginas fueron creadas, all por el ya lejano 1996 (en informtica esto es casi como hablar del jursico), como material para un curso, es decir, sin nimo de continuidad y para un grupo de alumnos de caractersticas muy definidas. Una vez cumplido su destino inicial, nada pareca indicar que pudieran tener otro que no fuese la papelera. Y en efecto, ese fue. Pero los alumnos del curso pensaron que, al igual que a ellos, le podian servir a otros, y comenzaron a difundir la direccin del servidor donde se haba quedado una copia. Hoy, aos despus, se han servido ms de un milln de copias y he tenido que responder a miles de e-mails con las ms variadas consultas. No han faltado comentarios en contra de su estilo, de su contenido, e incluso de quien duda que a estas alturas alguien pueda escribir una sola lnea as, "a mano", sin recurrir a un asistente de los muchos que existen y que te lo dan todo hecho. Afortunadamente, han sido pocos los crticos y muchos los satisfechos, y estos ltimos son los que constantemente han demandado ms contenidos; gracias a ellos la gua sigue en la red. Para quienes piensan que es mejor utilizar un asistente.... son muy libres... No obstante, hay quien prefiere saber lo que est haciendo. Profesionalmente he tenido ocasin de formar parte de algunos tribunales de seleccin de personal. Uno de los requisitos solicitados era saber HTML, y resultaba lastimoso ver el poco HTML que sabian casi todos los
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

candidatos, que manejaban con soltura los asistentes, pero que a la hora de analizar su propio trabajo "por dentro" fallaban estrepitosamente, y no digamos si la propuesta era modificar o aadir alguna cosa de las que los asistentes no hacen. Y es que nada tratado en profundidad, resulta tan sencillo como parece. A la vista de las consultas, crticas y parabienes recibidos, se observa que los lectores abarcan un amplio espectro de usuarios: desde el aficionado que se inicia en estas lides, hasta el nuevo profesional que tiene unas necesidades muy concretas, lo que explica la gran variedad de peticiones de nuevos contenidos recibidas. Como la revisin constante de la gua requiere de un tiempo del que no dispongo, y dado que profesionalmente me dedico a la programacin de gestin, aplazo, que no descarto, la inclusin de temas tan solicitados como el Java Script, Visual Basic Script, Perl, etc., etc., y por el momento, me limitar a incluir pequeos fragmentos de aplicaciones de gestin, aquellos que considere ms interesantes a nivel general... por la sencilla razn de que los tendr ya hechos. Es posible que queden un poco escasos de explicaciones bsicas, pero tal vez algun dia.... Pero, si esto est anticuado! En efecto, en este documento encontrars cosas que profesionalmente ya no se utilizan, lo que no siginifica que no funcionen. De momento no pienso borrar nada, y tengo buenas razones para ello. El HTML, como todo, ha evolucionado y ser sustituido por un nuevo estndar: el XHTML, nacido despus del auge que han tomado las hojas de estilo en cascada (CSS). Hay quien sostiene que se deben escribir las pginas con la ltima tecnologa disponible en el mercado y respetando escrupulosamente los estndares... Me parece correcto, siempre que se pueda disponer de esa tecnologa y se tenga la capacidad suficiente para desarrollar con lenguaje estricto. En nuestro despilfarrador "primer mundo" es relativamente sencillo obtener lo ltimo de lo ltimo, pero desgraciadamente eso no ocurre en todas partes; ni todos los que se lanzan a escribir una pgina la quieren para entretenerse, ni para ganar dinero, ni son capaces de comprender los postulados de la W3C, ni tienen capacidad para escribir maquetando en capas. Las mayores satisfacciones que me ha proporcionado este documento han sido algunos e-mails recibidos de un humilde maestro de una aldehuela perdida en algun remoto rincn, que trabajando con una mquina 486 encontrada en la chatarra, y un editor MSDOS consigui crear una pgina para que la gente de su pueblo pudiera exponer sus muchas necesidades al mundo, logrando que una comisin de UNICEF apareciese por all. Esta pgina, y otras muchas creadas o mantenidas en lugares donde la precariedad no tiene lmites, no cumplen los requisitos que marca la W3C, ni estan escritas en XHTML, ni tienen hoja de estilo. Ni siquiera tienen ms de 16 colores. Pero sirven para mucho ms que la mejor pgina diseada con el ms lujoso de los paquetes de desarrollo, con cuyo solo importe esa pequea escuela funcionar varios aos. El HTML, el viejo, entraable y fcil HTML, se ha convertido en algo ms que un lenguaje de programacin; no es como tantos otros de los que existen en informtica. ste tiene algo de especial, casi de mgico. El enorme calado social que ha conseguido internet en el mundo, probablemente no se habra logrado si para escribir una pgina fuera necesario ser un profesional informtico. Es indudable que debe evolucionar de forma acorde a las nuevas necesidades, pero creo necesario separar la programacin profesional de la vieja herramienta que ha permitido tantas cosas, cosas que no se pueden medir con parmetros de eficacia profesional. Mal que le pese al corporativismo de algunos, el HTML ya forma parte del patrimonio de la humanidad. Notas sobre el lenguaje El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto presentado de forma estructurada, con enlaces (links) que conducen a otros documentos o a otras fuentes de informacin (por ejemplo bases de datos) que pueden estar en tu propia mquina o en mquinas remotas de la red. Todo ello se puede presentar acompaado de cuantos grficos estticos o animados y sonidos seamos capaces de imaginar. Por supuesto, la esttica de los documentos escritos en HTML no se limita a texto digamos normal; consigue todos los efectos que habitualmente se pueden producir con un moderno procesador de textos: negrita, cursiva, distintos tamaos y fuentes, tablas, prrafos tabulados, sangras, incluso texto y fondo de pgina de colores, y muchos ms. Posiblemente te dirs que todo esto est muy bien, pero que t no vas a tener la necesidad o posibilidad de desarrollar uno de esos famosos WWW de los que todo el mundo habla, a veces sin saber demasiado bien de qu habla. Mucha gente asocia este lenguaje (que en realidad casi ni siquiera es un lenguaje, sino una forma de definir efectos en el texto de manera similar a como se haca en los antiguos procesadores de texto para DOS;) con complicados y poderosos servidores de informacin que misteriosamente alguien programa, y que seguramente es un genio en estas cuestiones, y piensa que en el trabajo cotidiano o incluso en casa, esto no sirve para nada.... Pues no es as. Esto es muy sencillo y ms prctico de lo que parece. Evidentemente, si lo que quieres es montar un servidor de informacin con miles de pginas, links a varias bases de datos tanto locales como remotas, posibilidad de bsquedas indexadas, grficos animados, sonido, pginas interactivas, etc., etc., necesitars saber algo ms que simple HTML. Pero has pensado en: - Poner en limpio de una vez por todas esas notas que tienes desperdigadas, llenas de llamadas de unas a otras y que no hay manera de encontrar?
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

- Presentar tu coleccin de sellos con una imagen escaneada de cada uno y un comentario sobre su tema, y organizado por aos, valores, o lo que se te ocurra? - Idem de la coleccin de discos? - Montar el lbum de fotos de familia con un texto explicativo de cada una? - Organizar tu biblioteca, incluyendo el ndice escaneado de cada libro y haciendo links entre temas? - Las fotos del ltimo viaje de vacaciones, incluyendo llamadas a los planos de las ciudades visitadas, y a todas las historias que te contaron en cada sitio? - Si eres estudiante, presentar al "profe" tu prximo trabajo lleno de diagramas, grficos, tablas, colores... en un disquete? - Organizar para siempre y poner al alcance de todos ese catlogo o listn siempre perdido en la oficina? - Preparar los temas de legislacin, llenos de referencias cruzadas, de esas oposiciones que te llevan de cabeza? En fin, la lista puede ser infinita. Pero esto es bastante sencillo de conseguir. Qu necesitas para empezar? pues solamente un editor de texto cualquiera (desde Word al humilde "Bloc de notas" de Windows), un visualizador WWW como el que ests usando ahora... y haberte ledo esto. Cmo funciona esto? Bsicamente, la cosa es simple: la pieza clave es el "browser", "navegador", "visualizador" o "cliente" o como quieras llamarle, HTML, es decir, el programa que ahora mismo ests utilizando para ver esto. Todas las codificaciones de efectos en el texto que forman el lenguaje HTML no son ms que instrucciones para el visualizador. Partiendo de esto, se entiende el porqu no se ve lo mismo con todos los visualizadores. Depende de cmo estn diseados y para qu versin de lenguaje estn diseados. Actualmente existen multitud de ellos, aunque los ms conocidos son el Internet Explorer de Microsoft (en lo sucesivo IE), el Netscape Navigator de Netscape (en lo sucesivo Netscape), o el Mozilla Firefox (que en realidad es el nuevo Netscape), y sin olvidar el navegador Opera, que tiene fama de ser el que ms respeta los estndares, cosa muy de agradecer en estos tiempos. Todo lo que se dice en esta gua funciona correctamente con Netscape, Opera o Firefox, casi todo con el IE. Algunas cosas puede que no se vean bien dependiendo del navegador utilizado, sobre todo si son versiones antiguas. Si se est conectado a Internet, con un navegador, adems de ver documentos HTML se puede recibir y enviar correo electrnico, recibir y enviar NEWS (noticias), visitar los servidores GOPHER (servidores de ficheros ya desaparecidos), y acceder a servidores FTP (ms servidores de ficheros) tanto en entrada como en salida, todo ello con el mismo programa. Tambin, como no, se pueden imprimir los documentos visualizados. Casi todos suelen ser "WYSWYG", es decir, que lo impreso es exactamente como lo ves en pantalla...Siempre que tu impresora est de acuerdo, claro. La idea es sencilla: slo tienes que crear un documento con tu editor preferido (como documento entenderemos el conjunto de ficheros, tanto de texto como de imgenes, que forman las distintas pginas), guardarlo con la extensin .htm o .html, abrirlo con tu navegador preferido, y ya tienes un hipertexto en marcha. Las pginas o documentos creados pueden residir en el disco duro de tu ordenador personal, en un disquete, en un CD-ROM, o estar a varios miles de kilmetros en otro ordenador llamado servidor web o servidor http, que es el protocolo utilizado. Si es as, entonces te estars moviendo por la WWW (World Wide Web) que es como se ha dado en llamar a este tipo de servicios de Internet. As pues, en esencia, una pgina escrita en HTML no es ms que texto normal, escrito con cualquier editor, y al que, cuando se le quiere dar algun aspecto especial, como por ejemplo el tamao de la letra, habr que acompaar de ciertos cdigos para indicar el efecto deseado. A estos cdigos se les llama elementos del lenguaje. Pero no hay que olvidar que al fin y al cabo no hablamos ms que de texto. Simple y llano texto. Por lo tanto, para montajes sencillos, en los que no se requiera ningn efecto especial, nos podemos olvidar hasta del mismsimo HTML. El visualizador nos presentar perfectamente cualquier pgina ".txt" generada por cualquier editor, y los links entre documentos slo requieren un simple y sencillo comando. Y an as podremos conseguir el tipo y tamao de letra y colores de texto y fondo que queramos, simplemente configurando el visualizador. Como ya habrs deducido, lo primero es crear las pginas en tu mquina, es decir, en local, y eso ya te permite navegar por tu documento, simplemente abriendo las pginas creadas con tu navegador preferido. Si lo que quieres es ponerlas en Internet (algunos a eso le llaman "colgarlas" en Internet), lo siguiente es conseguir una cuenta y espacio en disco en algun proveedor de servicios internet (ISP -Internet Service Provider-), si no tienes tu propio servidor, claro. Una vez conseguido el espacio en servidor, hay que enviar los ficheros que contienen tus pginas a ese servidor. Para ello puedes utilizar la pgina que habitualmente proporcionan los ISP para "subir" tus ficheros desde tu mquina, o bien utilizar algun programa de FTP, configurndolo segn las instrucciones del ISP. Suele ser ms sencillo utilizar las pginas proporcionadas por los ISP. Recuerda que dependiendo del sistema operativo que tenga el servidor, los nombres de los ficheros deben atenerse a ciertas convenciones. Si el servidor utiliza una plataforma UNIX o LINUX (la mayora de ellos) los nombres no pueden tener espacios en blanco, y adems se tienen en cuenta las maysculas. No es lo mismo Index.html que index.html.
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Otra cosa importante es que nunca utilices palabras con acentos o caracteres especiales, como ees, cedillas, etc. para dar nombre a los ficheros. Si el servidor utiliza sistemas Windows esto carece de importancia, pero hay que tener en cuenta que tus pginas, antes de llegar al cliente, tendrn que pasar por muchos nodos enrutadores que generalmente son mquinas UNIX. Otra cosa que hay que tener en cuenta, es el nombre por defecto de la primera pgina de tu documento. Casi todos los servidores basados en UNIX o LINUX consideran como primera pgina cualquier fichero llamado index.html. Si no existe este archivo, o el que establezca el administrador del sistema, es necesario que el usuario escriba el nombre de la primera pgina del documento que desea visitar. Por ejemplo, si no utilizas el nombre incial que por defecto admita tu servidor, la direccin se tiene que escribir completa: http://mi_servidor/mi_usuario/mi_pagina_inicial.htm Si utilizas como nombre de la primera pgina el aceptado por el servidor, solamente habra que escribir hasta el directorio: http://mi_servidor/mi_usuario/ Y si tienes la suerte de disponer de tu propio servidor, solamente se precisa el nombre del servidor: http://mi_servidor/ Si ests diseando tu documento y solamente quieres ver tu trabajo en local, los navegadores funcionan igual que cualquier otro programa de Windows, y con la opcin "Archivo/Abrir" de tu navegador preferido puedes ver cualquier fichero escrito en HTML. En ese caso, la ruta ser de este estilo: file:///C:/mi_web_local/mi_pagina.htm Introduccin al HTMLElementos en un documento HTMLEn esta gua, a las instrucciones que forman el lenguaje HTML les llamaremos elementos. Otros autores tambin las denominan "TAGS", o "ETIQUETAS". La notacin de los elementos consiste en los smbolos < y > que encierran dentro una instruccin. Los elementos pueden ser llenos o vacos. Elementos llenosSe forman escribiendo la instruccin correspondiente seguida del texto al que se quiere aplicar la instruccin y se termina repitiendo la instruccin pero con una barra inclinada inmediatamente antes de la misma. Por ejemplo, el elemento H1 que sirve para dar el mximo tamao al texto, se escribir: <H1> Texto de prueba </H1>. y este sera el resultado: Texto de pruebaSi olvidas poner </H1> todo el resto de la pgina tendr el mismo tamao grande. Elementos vacos Los elementos vacos se escriben como los llenos, pero no es necesario poner la instruccin repetida al final con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente se utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan y terminan en el mismo punto. Por ejemplo, el elemento <HR> que sirve para dibujar una linea horizontal en la pantalla, se escribir: <HR> Y este sera el resultado: Elementos con argumentoAlgunos elementos se escriben con argumento. Es como pasarle parmetros a la instruccin, y se llaman atributos del elemento. Por ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro documento o con otra pgina del actual, se escribir: <A href="http://www.miservidor.es/mifichero.htm" mce_href="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>. Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto al que afecta este elemento es Link de prueba y realiza un link con el fichero mifichero.htm que est en el servidor www.miservidor.es. Los elementos pueden escribirse tanto en maysculas como en minsculas. Puede ser preferible la primera opcin ya que aporta claridad al documento fuente, y eso se agradece a la hora de hacer correcciones, pero CUIDADO, el valor de algunos atributos hay que escribirlos EXACTAMENTE como deban ser. En el ejemplo anterior no funcionara el link si escribiramos www.miservidor.es en maysculas, eso es un nombre de mquina y sera interpretado como OTRA mquina. Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itlica, se escribir: <H1><I>Texto de prueba </I></H1>. y este sera el resultado: Texto de prueba Los elementos, en HTML, los puedes escribir tanto en maysculas como en minsculas. Funciona igual <P> que <p>. A la hora de revisar el cdigo escrito, resulta ms claro si se escribieron en maysculas, pero si en el futuro hay que convertir la pgina a otro estndar, como el XHTML, no se admitirn las maysculas. Si no piensas migrar a otras tecnologas, hazlo como ms cmodo te resulte. Estructura de una pgina HTML Las pginas HTML estn estructuradas en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo). Ejemplo de pginaSi escribes: <!Tipo de documento> <HTML> <HEAD> <TITLE> Documento de prueba </TITLE> </HEAD> <!-- Esto es un comentario--> <BODY> <H1> Esto es una "demo" de documento HTML </H1> Esto es el ms sencillo de los
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

documentos HTML. </BODY> </HTML> El tipo de documento no es obligatorio a efectos prcticos, es decir que la pgina se ver igual tanto si lo escribes como si no. Slo sirve como identificacin del tipo de contenido del fichero a los efectos de cumplir las especificaciones de estndar recomendadas por el consorcio W3C, que es el organismo que regula el lenguaje. Por ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd"> Indica que cumple el estndar HTML 4.0 <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd"> Significa que cumple el estndar HTML 4.0 y, adems, no contiene elementos desaconsejables. Y esta es una definicin de marcos que cumple el estndar HTML 4.0: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://w3.org/TR/REChtml40/frameset.dtd"> En el HTML 4.0 se consideran desaconsejables aquellos elementos que, an siendo soportados, han sido sustituidos por otros y, por ello, es posible que sean eliminados en el futuro. En cualquier caso, el que un elemento escrito en tus pginas se vea o no, depender siempre del navegador utilizado y/o de su versin, no de lo que diga el estndar. Para escribir comentarios en la pgina (que slo se ven en el texto fuente, pero no en el visualizador) se utilizar el elemento <!-- --> cuidado: el que no se vea de forma normal en el navegador, no significa que no pueda verse el cdigo fuente. Nunca escribas comentarios con claves de acceso o datos confidenciales. Esquema de tipos de un documento HTML Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que ste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografa en formato GIF, o un vdeo en formato MPG, o si lo que estamos intentando es transferir un fichero. En cada caso, el visualizador pondr en juego distintas habilidades, de las muchas que posee. Si el fichero procede de un servidor http remoto, (es decir un servidor web; http es el nombre del protocolo que utilizar el servicio invocado), ste se encargar de decirle al visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la nica forma de saberlo es por la extensin del fichero. La extensin de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje) que hay despus del nombre del fichero y que estn separadas del mismo por un punto. Por ejemplo, esta pgina se llama estruc.htm. Las tres letras que hay despus del punto (htm) son la extensin del fichero. Las otras, las que estn delante del punto, son el nombre del fichero. Las extensiones de 4 o ms letras son tpicas de sistemas operativos como UNIX o LINUX y las de 3 o menos de Windows, que ha mantenido esta costumbre por herencia de los tiempos del DOS, ya que puede trabajar perfectamente con extensiones de ms de 3 letras. Por ejemplo, la extensin .html funciona en Windows igual que la .htm Estas son algunas de las extensiones stndard ms comunes y sus contenidos. La primera de ellas suele utilizarse en sistemas UNIX-LINUX y la segunda en Windows: .html o .htm Documento HTML. Contine texto e instrucciones HTML que sern interpretadas. .text o .txt Contiene texto plano. El visualizador presentar todo el fichero como si fuera un nico bloque de texto y no interpretar ninguna instruccin HTML que pudiera llevar. Esto lo har con cualquier fichero que lleve una extensin desconocida o simplemente no lleve ninguna. .gif Contiene un fichero de imagen en formato GIF. .npg Contiene un fichero de imagen en formato NPG. .xbm Contiene un fichero de imagen en formato X-Bitmap (blanco y negro). .xpm Contiene un fichero de imagen en formato X-Pixmap (color). .jpeg o .jpg Contiene un fichero de imagen en formato codificado jpeg. .mpeg o .mpg Contiene un fichero de imagen de video o cine (en movimiento). .au Contiene un fichero de audio (sonido) codificado en aiff-encoded. .mid Contiene un fichero de audio (sonido) generado con secuenciadores midi tpicos de Windows. .avi Contiene un fichero con video y sonido tpico de Windows. .mp3 Contiene un fichero con sonido tpico de Windows y otros sistemas. .exe Contiene un fichero binario ejecutable en DOS o Windows. .hqx Contiene un fichero binario ejecutable en Macintosh. .Z o .zip Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para poder utilizarlo hay que indicarle al visualizador una herramienta de compresindescompresin. .pdf Contiene un fichero de imagen de cualquier documento generado con Acrobat Writer. .doc Contiene un fichero de documento generado por Microsoft Word En el entorno web se utilizan los MIME types (Multipurpose Internet Mail Extension) para definir el tipo de un fichero transferido. El visualizador determina desde el MIME type cmo hay que tratar cada fichero. Los visualizadores tienen una configuracin de los mapas de tipos aceptables, e instrucciones de cmo proceder en cada caso. Algunos tipos son tratados directamente por el propio visualizador (p.ej.: htm, gif, txt) mientras que para otros necesitan de una herramienta auxiliar adecuada, que hay que indicar al visualizador, para que sea llamada en el momento preciso (p.ej.: zip, mpg, avi, pdf). Ahora que ya sabes qu son las extensiones de fichero, es el momento de aclarar una cuestin importante: Los documentos HTML los puedes escribir con lo que quieras... Siempre que los salves en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word. Tampoco vale dejarlos con la extensin .txt que les dejan la mayora de editores al salvarlos en modo Solo Texto. No seran interpretados correctamente. Por lo tanto si tienen extensin .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensin por defecto .txt y
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

darle ya directamente la extensin .htm. Algunos procesadores de texto ya incluyen entre sus tipos el .htm. Si es as, lo que hacen es eliminar la codificacin propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itlica, automticamente es convertido al elemento <I>, etc.. El problema de los editores avanzados de texto y de la mayora de programas asistentes para escribir HTML es que generan un cdigo bastante "sucio", difcil de corregir o modificar despus. No es que no funcione, pero como el programa no sabe cual es la finalidad del texto escrito, por defecto le pone todo lo que sabe por si acaso, aplicando el dicho de "mejor que sobre..." Cabecera (HEAD) de un documento HTML La HEAD es la primera de las dos partes en que se estructura un documento HTML. En la HEAD reside informacin acerca del documento, y generalmente no se ve cuando se navega por l. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripcin que identifica la pgina. Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o libro de direcciones), con lo que crea la lista que aparece en la orden "Go" de la barra de rdenes, lo que aparece en la esquina superior izquierda cuando se imprime el documento, y lo que aparece en el marco de la ventana del navegador. Tambin lo guarda en su cach, y servir para mostrar la pgina, cuando sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor de origen. No hay que confundir el elemento <TITLE> con el nombre del fichero. Por ejemplo, esta pgina est contenida en un fichero llamado head.htm y el texto de su <TITLE> es: Head de un documento. Se escibir asi: <HEAD> <TITLE>Head de un documento </TITLE> </HEAD> Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se escribe: <HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10"> </HEAD> Esto hace que el visualizador vuelva a cargar la pgina activa al cabo de 10 segundos. Tambin puede hacerse a un servidor. As: <HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm"> </HEAD> Utiliza esto con precaucin. Si sabes que el contenido de la pgina no va a cambiar, es intil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, slo tendr utilidad en casos muy especiales. Otra opcin es forzar la expiracin inmediata en la cach del navegador de la pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la mquina del cliente. Se escribe as: <HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT"> </HEAD> Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la cach la pgina recibida, y si no es pasada, lo har en el momento indicado por la misma. Tambin se le puede dar valor cero a la fecha de expiracin: <HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="0"> </HEAD> Otra opcin es impedir directamente que el navegador guarde en cach la pgina. Esto es especialmente til cuando se trabaja con formularios que consultan datos dinmicos: <HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="no-cache"> </HEAD> Si tienes inters en que tus pginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la pgina separadas por comas. Por ejemplo: <HEAD> <TITLE>Head de un documento </TITLE> <META NAME="keywords" CONTENT="HTML, internet "> </HEAD> Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu pgina: <HEAD> <TITLE>Head de un documento </TITLE> <META NAME="description" CONTENT="Manual para escribir HTML."> </HEAD> Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos. Habrs notado que se ha utilizado la palabra "cach", y tal vez no sepas a qu se refiere. Todos los navegadores, por defecto, siempre que reciben una pgina de un servidor se hacen una copia de la misma en el disco de tu mquina. Con esto se pretende que si vuelves a solicitar la misma pgina, en lugar de pedirla de nuevo al servidor, te mostrar la que tiene guardada en el disco. A esta rea del disco donde el navegador va poniendo las pginas visitadas, se le denomina cach. El tamao de la cach lo puedes modificar desde las opciones de configuracin del navegador, e incluso puedes darle tamao cero, con lo que siempre que veas una pgina, sta habr sido solicitada al servidor independientemente de lo que digan las instrucciones META. Hay otros elementos que pueden aparecer en la HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> s lo es).Cuerpo (BODY) de un documento El cuerpo (BODY) es la segunda y ltima de las dos partes en que se estructura un documento HTML. Por supuesto es obligatoria, ya que es aqu donde reside el verdadero contenido de la pgina, y por tanto, al contrario de la HEAD s se ve cuando navegamos por ella.
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Se escibir asi: <BODY> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </BODY> Como ya habrs visto, los navegadores, por defecto, presentan el texto de una pgina ajustando los contenidos a la esquina superior izquierda de la pantalla. El elemento BODY tiene parmetros que permiten modificar los mrgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. Por ejemplo, Netscape utiliza solamente dos instrucciones que afectan simultneamente a los mrgenes superior e inferior e izquierdo y derecho respectivamente: marginwidth="pixels", para los mrgenes izquierdo y derecho. marginheight="pixels", para los mrgenes superior e inferior. En cambio, el Internet Explores, utiliza uno para cada cual: leftmargin="pixels", para el margen izquierdo topmargin="pixels", para el margen superior rightmargin="pixels", para el margen derecho bottommargin="pixels", para el margen inferior Donde pixels es el nmero de pixels que se quiere mover cada margen hacia el interior de la pgina. Estos parmetros tambin son accesibles desde instrucciones de estilo. Otro problema que suele presentarse con los mrgenes es que a la hora de imprimir una pgina, cada impresora, junto con el navegador, se las ingeniarn para hacer justo lo contrario de lo que se desea... Tal vez algun dia todo esto funcione bien. Otra cosa que puede controlarse desde BODY es el color que tomarn los links que pongamos en la pgina. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes despus de haber sido utilizados, se escribe: <BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF"> Veamos a hora los elementos ms habituales del lenguaje que deben escribirse en el BODY.Tamaos y tipos de letra en HTMLPara definir distintos tamaos de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as: <H1> Texto de prueba (H1)</H1> <H2> Texto de prueba (H2)</H2> <H3> Texto de prueba (H3)</H3> <H4> Texto de prueba (H4)</H4> <H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6> y este sera el resultado: Texto de prueba (H1)Texto de prueba (H2)Texto de prueba (H3)Texto de prueba (H4)Texto de prueba (H5)Texto de prueba (H6)No hay que olvidar poner el cierre </Hx> a cada elemento utilizado. Este tipo de elemento se suele utilizar para escribir encabezamientos, 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 H1Texto en H3Y no una cosa al lado de la otra, como cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes: <H3 align=center> Texto en H3 </H3> Texto en H3Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notacin respecto a la anterior es que no se produce un salto de prrafo despus de cada cambio, por lo que pueden hacerse cosas como esta: <FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font> <FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font> <FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT> Dar como resultado: AAAAAAAAA Se puede cambiar el tamao por defecto (3) de toda la pgina con el elemento <BASEFONT SIZE=valor>. El texto tomar el tamao indicado por valor y lo mantendr hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaos tambin pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamao base. Por ejemplo estos dos valores dan el mismo resultado: <FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT> ABcde ABcde Con la versin 3.0 de Netscape se ha implementado un nuevo atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseador de la pgina quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador. Si escribes <FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT> <FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT> <FONT FACE="courier new">Texto de prueba
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

12345 con tipo COURIER NEW</FONT> <FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT> <FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT> <FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT> Se ver: Texto de prueba 12345 con tipo ARIAL Texto de prueba 12345 con tipo TIMES NEW ROMAN Texto de prueba 12345 con tipo COURIER NEW Texto de prueba 12345 con tipo COURIER Texto de prueba 12345 con tipo ROMAN Texto de prueba 12345 con tipo VERDANA Texto de prueba 12345 con tipo SMALL FONTS Por supuesto, este atributo es compatible con todos los dems ya conocidos, como color y tamao. Por ejemplo, si escribes <FONT FACE="impact" SIZE=6 COLOR="red"> Texto de prueba 12345 con tipo IMPACT</FONT> Se ver: Texto de prueba 12345 con tipo IMPACT Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la mquina cliente no est instalada una determinada fuente, sta no se ver y en su lugar aparecer la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarn a verse nunca. Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizar el siguiente, y si tampoco lo tiene el prximo, etc. As: <FONT FACE="raro, courier" SIZE=4 COLOR="red"> Texto de prueba 12345 con tipos alternativos</FONT> Se ver: Texto de prueba 12345 con tipos alternativos Como puedes ver, se ha declarado como primer tipo de letra el llamado "raro" que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente, "courier", que s es habitual. Texto en color Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre en ingls del color que se desea. Hay que tener presente que algunos no se vern o se vern mal si la mquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamao y todos los dems. Si escribes: <B><FONT COLOR="red">Texto ROJO </FONT> <br> <FONT COLOR="blue">Texto AZUL </FONT> <br> <FONT COLOR="navy">Texto AZUL MARINO </FONT> <br> <FONT COLOR="green">Texto VERDE </FONT> <br> <FONT COLOR="olive">Texto OLIVA </FONT> <br> <FONT COLOR="yellow">Texto AMARILLO </FONT> <br> <FONT COLOR="lime">Texto LIMA </FONT> <br> <FONT COLOR="magenta">Texto MAGENTA </FONT> <br> <FONT COLOR="purple">Texto PURPURA </FONT> <br> <FONT COLOR="cyan">Texto CYAN </FONT> <br> <FONT COLOR="brown">Texto MARRON </FONT> <br> <FONT COLOR="black">Texto NEGRO </FONT> <br> <FONT COLOR="gray">Texto GRIS </FONT> <br> <FONT COLOR="teal">Texto TEAL </FONT> <br> <FONT COLOR="white">Texto BLANCO </FONT> <br> </B> Se ver: Texto ROJO Texto AZUL Texto AZUL MARINO Texto VERDE Texto OLIVA Texto AMARILLO Texto LIMA Texto MAGENTA Texto PURPURA Texto CYAN Texto MARRON Texto NEGRO Texto GRIS Texto TEAL Texto BLANCO

He aqu una combinacin de colores y tamaos: Si escribes: <FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> <FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT> Resulta: Esto es una Prueba
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Los colores tambin se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores bsicos, como los del ejemplo de arriba, es ms cmodo escribir el nombre aunque sea en ingls, pero cuando se trata de definir un color que "no tiene nombre" no hay ms remedio que usar la codificacin hexadecimal.Las distintas definiciones de los bloques. Separadores.Si se analiza una pgina cualquiera veremos que, en realidad, est compuesta de distintos bloques. Es algo as como un mosaico en el que cada parte de la composicin final tiene sus propios contenidos, que pueden ser texto, grficos o las dos cosas. Dependiendo de la composicin que se quiera hacer, habr que elegir los elementos ms convenientes para que nuestros contenidos aparezcan finalmente con la alineacin debida, el tamao apropiado, etc. Comenzaremos con el elemento <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as: <H1> Texto de prueba (H1)</H1> <H2> Texto de prueba (H2)</H2> <H3> Texto de prueba (H3)</H3> <H4> Texto de prueba (H4)</H4> <H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6> y este sera el resultado: Texto de prueba (H1)Texto de prueba (H2)Texto de prueba (H3)Texto de prueba (H4)Texto de prueba (H5)Texto de prueba (H6)No hay que olvidar poner el cierre </Hx> a cada elemento utilizado. Este tipo de elemento suele emplearse para escribir encabezamientos, 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 H1Texto en H3Y no una cosa al lado de la otra, como cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes: <H3 align=center> Texto en H3 </H3> Texto en H3Para definir los prrafos se utiliza el elemento lleno <P> </P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuar normalmente hasta que encuentre otro prrafo <P>, es conveniente acostumbrarse a ponerlo siempre. En la nueva definicin del XHTML el cierre es obligatorio. Se escribir as: <P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> Y este sera el resultado: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Como puede verse, hay una lnea en blanco entre los dos bloques. Si no se quiere dejar esa lnea vaca entre los dos prrafos puede utilizarse el elemento <BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un indicador de bloque. Se escribir as: <P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <BR> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> y este sera el resultado: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 El elemento <P> admite cuatro atributos de alineacin: ALIGN=LEFT (por defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirn as: <P ALIGN=LEFT> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> <P ALIGN=RIGHT> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> <P ALIGN=CENTER> Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P> <P ALIGN=JUSTIFY> Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 </P> y este sera el resultado: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER Se escribe as: <DIV ALIGN=LEFT> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 </DIV> <DIV ALIGN=RIGHT> texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 < /DIV> <DIV ALIGN=CENTER> texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

<P>

Texto 2

kiubix.com

texto3 texto3 texto3 texto3 texto3 texto3 </DIV> Fjate en que aqu s se utiliza el cierre </DIV>. Este sera el resultado: texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 Como puedes ver, salvo por las alineaciones, que ya se hacen con <P>, no tiene ninguna utilidad prctica, y en general solamente se utiliza para definir bloques especiales definidos con instrucciones de estilo (bordes, tamao, situacin, alineacin, color, etc., etc.) Otro elemento que es casi igual que <DIV> pero que no admite atributos de alineado, y no produce separacin de prrafo ni de lnea es <SPAN>. En realidad, de forma directa no sirve para nada, y ha sido creado tambin para aplicar las hojas de estilo. Se escribe as: <SPAN> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 </SPAN> Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que sirve para presentar prrafos adentrados (como si estuviesen tabulados). Se escribir as: <BLOCKQUOTE> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <BLOCKQUOTE> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </BLOCKQUOTE> </BLOCKQUOTE> Y este sera el resultado: texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Fjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres </BLOCKQUOTE> al final Otro separador de bloques de texto es el elemento vaco <HR> (por Horizontal Rule). Este sera el resultado: Al igual que al texto, se le puede incluir un parmetro de color, pero no funciona en todos los navegadores. Tambin se puede cambiar su apariencia aadindole el atributo <NOSHADE>. As: <HR NOSHADE>El resultado es: El elemento <HR> admite dos parmetros: WIDTH y SIZE. El primero define la longitud de la lnea y el segundo su anchura. No es obligado usar los dos a la vez Por ejemplo, si escribes <HR WIDTH=400 SIZE=5> El resultado ser: El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en nmero de puntos (pxels), o en tantos por ciento referidos al ancho total de la ventana. As: <HR WIDTH=80% SIZE=5> El resultado ser: Adems se puede indicar su posicin respecto a los mrgenes de la ventana con los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo: <HR WIDTH=80% SIZE=5 ALIGN=LEFT> El resultado ser: O bien: <HR WIDTH=80% SIZE=5 ALIGN=RIGHT> El resultado ser: Hay otro elemento, aparecido en la versin 6 de Netscape, que permite rodear un texto con un marco, y opcionalmente ponerle una etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no tienes la versin adecuada de navegador, en los siguientes ejemplos slo vers el texto, pero no los enmarcados. Si se escribe: <FIELDSET> Esto es una prueba de enmarcado </FIELDSET> Se obtiene: Esto es una prueba de enmarcado Este elemento tiene un parmetro que permite etiquetar el recuadro: <LEGEND> Si se escribe: <FIELDSET> <LEGEND>Esto es una etiqueta</LEGEND> Esto es una prueba de enmarcado </FIELDSET> Se obtiene: Esto es una etiquetaEsto es una prueba de enmarcado El parmetro <LEGEND> tiene tres atributos que indican la posicin de la etiqueta: LEFT (por defecto), RIGHT y CENTER, aunque no funciona en todos los navegadores. Por ejemplo: <FIELDSET> <LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND> Esto es una prueba de enmarcado </FIELDSET> Se obtiene: Esto es una etiquetaEsto es una prueba de enmarcado Si en estos ejemplos no ves el recuadro o la etiqueta no est donde debiera, es porque no tienes una versin de navegador adecuada. Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios, imgenes, texto, etc. Textos preformateadosPosiblemente ya te habrs dado cuenta de que, cuando escribes un texto con tu editor, a la hora de ver lo hecho con el visualizador, algunas cosas no estn como t las pusiste... Como por ejemplo
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los datos de una pequea tabla: acaba todo junto y en la misma lnea! Este efecto se puede eliminar con el elemento lleno <PRE> . Al texto que va dentro del elemento PRE se le pueden aplicar todos los elementos que se quiera, siempre que sean elementos que no alteren la posicin del texto. Por ejemplo si utilizas el elemento <H>, se rompera el preformateo pero no ocurrir lo mismo con <FONT SIZE>. Por defecto, los textos preformateados se ven con tipo de letra "curier", es decir de paso fijo y los no preformateados en "Times New Roman". Estos tipos son configurables en el visualizador. Se escribir as: <PRE> 1 2 3 4 5 6 7 <B>Esto es una demostracion de</B> preformateado. 15 16 17 18 19 20 21 </PRE> 8 9 10 11 12 13 14 texto

y este sera el resultado: 1 2 3 4 5 6 7 Esto es una demostracion de 8 9 10 11 12 13 14 texto preformateado. 15 16 17 18 19 20 21 Dentro de un bloque preformateado tambin se pueden poner links a otros documentos y codificacin para caracteres especiales (se ver ms adelante lo que es eso). Este elemento admite el parmetro WIDTH=x donde x define la mxima longitud de lnea visualizada. No funciona con Netscape. El navegador, por defecto, elimina varios espacios en blanco y los convierte en uno solo. Si lo que deseas es separar una palabra de otra ms de un espacio, se puede recurrir a una instruccin especial que le indica esto al navegador, pero hay que darla codificada; funciona como un avance de carro, y aunque en pantalla cumple su objetivo, cuando se imprime la pgina, no todas las impresoras son capaces de interpretarlo correctamente. Se escribe: y como alias se utiliza: &nbsp; Por ejemplo, si escribes: texto texto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texto textoSe ve as: texto texto texto texto Con Netscape 3.0 se ha implementado un nuevo elemento que permite definir espacios en blanco sin utilizar el elemento <PRE> Se trata del elemento <SPACER>. este elemento puede ir acompaado de los atributos TYPE y SIZE y se puede utilizar en cualquier zona de una pgina, pero donde ms se aprecia su efecto es en las columnas. Se escibir asi: <MULTICOL COLS=2> <SPACER TYPE=HORIZONTAL SIZE=35> texto texto texto texto texto texto texto texto texto texto texto texto <P> <SPACER TYPE=HORIZONTAL SIZE=35> texto texto texto texto texto texto texto texto texto texto texto texto <SPACER TYPE=VERTICAL SIZE=35> texto texto texto texto texto texto texto texto texto texto texto texto </MULTICOL> Y se ve as: texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Como puedes ver, con TYPE=horizontal deja espacio en blanco a la izquierda de la primera linea. Es el valor por defecto. TYPE=vertical deja espacio en blanco por arriba de la primera linea. Para ambos tipos el tamao del espacio se da en puntos (pixels) con el atributo SIZE. El valor por defecto es 0. Fjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En efecto, es necesario indicarle a <SPACER> donde termina el prrafo para que ejecute la siguiente instruccin del mismo tipo. Este elemento no funciona con el navegador de Microsoft. Para conseguir columnas sin utilizar este elemento la nica solucin es emplear tablas: <TABLE> Otros efectos en el textoUna o varias lneas de texto, pueden estar centradas respecto a los mrgenes de la ventana. Esto afecta slo al texto que hay entre <CENTER> y </CENTER>, pero no a todo el prrafo. Por ejemplo: texto texto texto texto texto texto texto texto texto texto texto texto <CENTER>texto centrado texto centrado</CENTER> texto texto texto texto texto texto texto texto texto texto texto texto Se ver: texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto texto centrado texto centrado texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto Esto, adems de a texto slo, se puede aplicar a una tabla, una imagen o cualquier otra cosa. Quedan algunos otros elementos que modifican el aspecto del texto. Algunos, aparentemente, hacen la misma cosa, y otros no funcionan con el visualizador de Netscape, por lo que se omiten aqu. Texto en negrita: <B>Texto en negrita</B>Texto realzado: <STRONG>Texto realzado</STRONG>Texto en itlica: <I>Texto en itlica</I>Texto con nfasis: <EM>Texto con nfasis</EM>Texto ejemplo de cdigo: <CODE>Texto ejemplo de cdigo</CODE>Texto teletipo:
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

<TT>Texto teletipo</TT>Texto subrayado: Texto subrayadoTexto tachado: <STRIKE>Texto tachado</STRIKE>Texto de direccin: <ADDRESS>Texto de direccin</ADDRESS>Texto intermitente <BLINK>Texto intermitente</BLINK>Texto superndiceTexto normal <SUP>Texto Superndice</SUP>Texto subndiceTexto nomal <SUB>Texto Subndice</SUB>Texto grande <BIG>Texto grande</BIG>Texto pequeo <SMALL>Texto pequeo</SMALL>En los navegadores de ltima generacin se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratn por encima (sin pulsar), pero sin cambiar de pgina ni abrir ninguna ventana nueva. Por ejemplo, si escribes: <ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM> Al pasar el ratn sobre la palabra HTML, se desvela su significado: HTML De funcionamiento similar al anterior tambin tenemos el elemento <abbr> <abbr TITLE="Hyper Text Markup Language">HTML</abbr> Y este es el aspecto que toma el texto: HTML Este ltimo elemento NO funciona con el navegador IE. Como puedes ver, los dos trabajan de la misma forma que el parmetro title que se aplica al elemento <A> y se diferencian de ste solamente por el tipo de subrayado, que es ms ligero. Listas y mensHay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio), desordenados <UL> (no numerados), directorios <DIR>, menu <MENU> y listados de definicin <DL>. Veamos cmo es la sintaxis bsica y apariencia de estos elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros, hasta conseguir prcticamente cualquier presentacin deseada: Esto es una lista ordenada (numerada): - Primera linea - Segunda linea Se escribe: <OL> <LI>Primera linea <LI>Segunda linea </OL> Fjate en que los elementos <LI> no necesitan cierre. Terminan cuando aparece otro igual o se cierra la lista. Puede ser conveniente poner el cierre </LI> si se van a aplicar instrucciones de estilo. Esto es una lista desordenada ( no numerada): - Primera linea - segunda linea Se escribe: <UL> <LI>Primera linea <LI>Segunda linea </UL> En este caso los nmeros han sido sustituidos por unos puntos gruesos. Esa es la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se ver: - Primera linea - segunda linea Se escribe: <UL TYPE=CIRCLE> <LI>Primera linea <LI>Segunda linea </UL> Tambin puede usarse el valor SQUARE. As: - Primera linea - segunda linea Se escribe: <UL TYPE=SQUARE> <LI>Primera linea <LI>Segunda linea </UL> Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se pueden utilizar letras y numeracin romana tanto en maysculas como minsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para nmeros, TYPE=A para letras maysculas, TYPE=a para letras minsculas, TYPE=I para numeracin romana en maysculas y TYPE=i para numeracin romana en minsculas. Esto es una lista ordenada con letras maysculas: - Primera linea - Segunda linea - Tercera linea - Cuarta linea Se escribe: <OL TYPE=A> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL> Esto es una lista ordenada con letras minsculas: - Primera linea - Segunda linea - Tercera linea - Cuarta linea Se escribe: <OL TYPE=a> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL> Esto es una lista ordenada con numeracin romana en maysculas: - Primera linea - Segunda linea - Tercera linea - Cuarta linea Se escribe: <OL TYPE=I> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL> Esto es una lista ordenada con numeracin romana en minsculas: - Primera linea - Segunda linea
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

- Tercera linea - Cuarta linea Se escribe: <OL TYPE=i> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL> En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el atributo START combinado con TYPE. Esto es una lista ordenada con letras maysculas y que comienza por la E: - Primera linea - Segunda linea - Tercera linea - Cuarta linea Se escribe: <OL TYPE=A START=5> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL> El nmero que pones en el atributo START indica en que nmero o letra comenzar la lista. la E es la quinta letra. Esto es un men: - Primera linea - Segunda linea Se escribe: <MENU> <LI>Primera linea <LI>Segunda linea </MENU> La diferencia entre un men y una lista desordenada, es que las lneas en la lista desordenada comienzan en el margen izquierdo y las del men unas posiciones ms a la derecha (aunque eso depende del visualizador, con Netscape se ven igual). Esto es un directorio: - Primera linea - Segunda linea Se escribe: <DIR> <LI>Primera linea <LI>Segunda linea </DIR> Ocurre lo mismo que con el men, con Netscape no se aprecia diferencia. Esto es una lista de definicion: Primera linea Segunda linea Se escribe: <DL> <DT>Primera linea <DD>Segunda linea </DL> Fjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como tipo <DL>. Estos tres nuevos elementos tambin se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia. Ejemplos de listas y mensDesordenadasDesordenada simple con marcas - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 Se escribe: <UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </UL> Desordenada simple sin marcas. Comienzo en margen izquierdo Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe: <DL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3 </DL> Desordenada simple sin marcas. Comienzo una posicin a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe: <UL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3 </UL> Desordenada simple con marcas. Comienzo una posicin a la derecha - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 Se escribe: <UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </UL> Desordenada simple sin marcas. Comienzo dos posiciones a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe: <UL> <DD>Linea de texto 1 <DD>Linea de texto 2 <DD>Linea de texto 3 </UL> Desordenada simple sin marcas. Comienzo tres posiciones a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe: <UL> <UL> <DD>Linea de texto 1 <DD>Linea de texto 2 <DD>Linea de texto 3 </UL> </UL> Desordenada simple con marcas. Comienzo dos posiciones a la derecha - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 Se escribe: <UL> <UL TYPE=DISC> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </UL> </UL> Desordenada con 4 niveles sin marcas Linea de texto 1 Linea de texto 2 Linea de texto 3 Linea de texto 3.1 Linea de texto 3.2 Linea de texto 3.2.1 Linea de texto 3.2.2 Linea de texto 3.2.2.1 Linea de texto 3.2.2.2 Linea 4 de texto Se escribe: <DL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3 <DL> <DT>Linea de texto 3.1 <DT>Linea de texto 3.2 <DL> <DT>Linea de texto 3.2.1 <DT>Linea de texto 3.2.2 <DL> <DT>Linea de texto 3.2.2.1 <DT>Linea de texto 3.2.2.2 </DL> </DL> </DL> <DT>Linea 4 de texto </DL> Desordenada con 4 niveles con marcas - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 - Linea de texto 3.1 - Linea de texto 3.2 - Linea de texto 3.2.1 - Linea de texto 3.2.2 - Linea de texto 3.2.2.1
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

- Linea de texto 3.2.2.2 - Linea 4 de texto Se escribe: <UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <UL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <UL> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <UL> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </UL> </UL> </UL> <LI>Linea 4 de texto </UL> Ordenadas Ordenada simple - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 Se escribe: <OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </OL> Ordenada con 4 niveles, todos ordenados - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 - Linea de texto 3.1 - Linea de texto 3.2 - Linea de texto 3.2.1 - Linea de texto 3.2.2 - Linea de texto 3.2.2.1 - Linea de texto 3.2.2.2 - Linea de texto 4 Se escribe: <OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <OL> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <OL> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </OL> </OL> </OL> <LI>Linea de texto 4 </OL> Ordenada con 4 niveles, todos ordenados. Numeracin romana en maysculas y minsculas - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 - Linea de texto 3.1 - Linea de texto 3.2 - Linea de texto 3.2.1 - Linea de texto 3.2.2 - Linea de texto 3.2.2.1 - Linea de texto 3.2.2.2 - Linea de texto 4 Se escribe: <OL TYPE=I> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL TYPE=i> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <OL TYPE=i> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <OL TYPE=i> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </OL> </OL> </OL> <LI>Linea de texto 4 </OL> Ordenada con 4 niveles, 2 desordenados con marcas - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 - Linea de texto 3.1 - Linea de texto 3.2 - Linea de texto 3.2.1 - Linea de texto 3.2.2 - Linea de texto 3.2.2.1 - Linea de texto 3.2.2.2 - Linea de texto 4 Se escribe: <OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <UL TYPE=SQUARE> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <UL TYPE=CIRCLE> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </UL> </UL> </OL> <LI>Linea de texto 4 </OL> Ordenada con 4 niveles, 2 desordenados sin marcas - Linea de texto 1 - Linea de texto 2 - Linea de texto 3 - Linea de texto 3.1 - Linea de texto 3.2 Linea de texto 3.2.1 Linea de texto 3.2.2 Linea de texto 3.2.2.1 Linea de texto 3.2.2.2 - Linea de texto 4 Se escribe: <OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <DL> <DD>Linea de texto 3.2.1 <DD>Linea de texto 3.2.2 <DL> <DD>Linea de texto 3.2.2.1 <DD>Linea de texto 3.2.2.2 </DL> </DL> </OL> <LI>Linea de texto 4 </OL> TablasLas tablas son sin duda uno de los elementos ms potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamao y color, imgenes, links... Por supuesto, adems de permitir cualquier contenido, tienen sus propios atributos de alineacin tanto horizontal como vertical, y atributos de
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamao a su contenido, pero tambin es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las pginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho ms sencillo de utilizar. El elemento bsico de definicin de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos tambin han de llevar sus correspondientes cierres: </TR> </TH> </TD>. Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automtica el texto de su contenido recibe los atributos de negrita y centrado. Slo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez. He aqu una tabla-resumen de los elementos utilizados y los atributos que admite cada uno: Resumen de tablas TABLETRTDTHCAPTIONBORDERX----BORDERCOLORX----ROWSPAN--XX-COLSPAN--XX-ALIGN-XXXXVALIGN--X-WIDTHX-X--HEIGTHX-X--CELLPADDINGX----CELLSPACINGX----NOWRAP--X--EVENTSXXXXVeamos el significado de cada atributo: - BORDER Indica el ancho de los bordes de la tabla. Se mide en pxels. Si no se escribe este atributo, es equivalente a BORDER=0 (por defecto). - BORDERCOLOR Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores. - CELLSPACING Indica el nmero de pxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2. - CELLPADDING Indica los pxels de separacin entre el borde de la celda y su contenido. Su valor por defecto es 1. - WIDTH Segn donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamao tanto en pxels como en porcentaje respecto al ancho de la pantalla. - ALIGN Indica la alineacin horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro). - VALIGN Indica la alineacin vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro). - ROWSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado nmero de filas. - COLSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado nmero de columnas. - NOWRAP Para impedir que las lneas de texto dentro de una celda se trunquen en los espacios en blanco. - EVENTS Se pueden capturar todos los eventos tpicos de los navegadores en cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es compatible con todos los navegadores. Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE> Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qu bordes o lneas de la tabla se mostrarn: Este atributo sirve para definir qu bordes del marco de la tabla sern visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser: - void - Ningn lado (por defecto). - above - Slo el borde superior - below - Slo el borde inferior. - hsides - Slo los bordes superior e inferior. - vsides - Slo los lados derecho e izquierdo. - lhs - Slo el lado izquierdo. - rhs - Slo el lado derecho. - box - Los cuatro lados. - border - Los cuatro lados (no es lo mismo que el ya conocido) Y este otro sirve para definir qu bordes de la tabla sern visibles: <TABLE RULES="valor"> ... </TABLE> donde valor puede ser: - none - Ninguna lnea de divisin (por defecto). - groups - Slo aparecen lneas de divisin entre grupos de filas y grupos de columnas. - cols - Slo aparecern lneas de divisin entre filas. - rows - Slo aparece lneas de divisin entre columnas. Estos ltimos atributos no funcionan igual en todos los navegadores, y no funcionan en absoluto si no son de la ltima generacin. Segn el navegador de que se trate, puede que haya que combinar ms de un atributo para conseguir el efecto deseado. Lo mejor es hacer pruebas con algunas versiones para asegurarse. Ejemplos de tablasTabla bsica de 3x2 ABCDEF<TABLE BORDER> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Dos ejemplos de lnea expandida <ROWSPAN>
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Item 1Item 2Item 3Item 4Item 5<TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE> Item 1Item 2Item 3Item 4Item 5Item 6Item 7<TABLE BORDER> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE> Ejemplo de columna expandida <COLSPAN> Item 1Item 2Item 3Item 4Item 5<TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE> Tabla con cabeceras <TH> Head1Head2Head3ABCDEF<TABLE BORDER> <TR> <TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Combinacin de columna expandida y cabecera Head1Head2ABCDEFGH<TABLE BORDER> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE> Combinacin de cabeceras mltiples y columnas expandidas Head1Head2Head 3Head 4Head 5Head 6ABCDEFGH<TABLE BORDER> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TH>Head 3</TH> <TH>Head 4</TH> <TH>Head 5</TH> <TH>Head 6</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE> Cabeceras laterales Head1Item 1Item 2Item 3Head2Item 4Item 5Item 6Head3Item 7Item 8Item 9<TABLE BORDER> <TR> <TH>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TH>Head2</TH> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD> </TR> <TR> <TH>Head3</TH> <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD> </TR> </TABLE> Combinacin de cabeceras laterales y lneas expandidas Head1Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Head2Item 9Item 10Item 3Item 11<TABLE BORDER> <TR> <TH ROWSPAN=2>Head1</TH> TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD> </TR> <TR> <TH>Head2</TH> <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD> </TR> </TABLE> Combinacin de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Ttulo al pie. Resumen de tablas TABLETRTDTHCAPTIONBORDERX----ROWSPAN--XX-COLSPAN--XX-ALIGN-XXXXVALIGN--X-WIDTHX-X--HEIGTHX-X--CELLPADDINGX----CELLSPACINGX----<CENTER> <TABLE BORDER> <CAPTION ALIGN=bottom>Resumen de tablas</CAPTION> <TR> <TD> <TH>TABLE</TH> <TH>TR</TH> <TH>TD</TH> <TH>TH</TH> <TH>CAPTION</TH> </TD> </TR> <TR ALIGN=CENTER> <TH>BORDER</TH> <TD>X</TD> <TD>-</TD> <TD>-</TD> <TD>-</TD> <TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>ROWSPAN</TH> <TD>-</TD> <TD>-</TD> <TD>X</TD> <TD>X</TD> <TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>COLSPAN</TH> <TD>-</TD> <TD>-</TD> <TD>X</TD> <TD>X</TD> <TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>ALIGN</TH> <TD>-</TD> <TD>X</TD> <TD>X</TD> <TD>X</TD> <TD>X</TD> </TR> <TR ALIGN=CENTER> <TH>VALIGN</TH> <TD>-</TD> <TD>-</TD> <TD>X</TD> <TD>-</TD> <TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>WIDTH</TH> <TD>X</TD> <TD>-</TD> <TD>X</TD> <TD>-</TD> <TD></TD> </TR> <TR ALIGN=CENTER> <TH>HEIGTH</TH> <TD>X</TD> <TD>-</TD> <TD>X</TD> <TD>-</TD> <TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>CELLPADDING</TH> <TD>X</TD> <TD>-</TD> <TD>-</TD> <TD>-</TD> <TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>CELLSPACING</TH> <TD>X</TD> <TD>-</TD> <TD>-</TD> <TD>-</TD> <TD>-</TD> </TR> </TABLE> </CENTER> Ejemplo con todos los elementos y parmetros Media AlturaPesoSexoHombres1.985Mujeres1.760<TABLE BORDER> <TR> <TD> <TH ROWSPAN=2></TH> <TH COLSPAN=2>Media</TH> </TD> </TR> <TR> <TD> <TH>Altura</TH> <TH>Peso</TH> </TD> </TR> <TR> <TH ROWSPAN=2>Sexo</TH> <TH>Hombres</TH> <TD>1.9</TD> <TD>85</TD> </TR> <TR> <TH>Mujeres</TH> <TD>1.7</TD> <TD>60</TD> </TR> </TABLE> Otro ejemplo de lnea y columna expandidos A1234CD<TABLE BORDER> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD> <TD>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD> </TR> <TR> </TR> </TABLE> Ajustando mrgenes y bordesTabla sin bordes Item 1Item 2Item 3Item 4Item 5<TABLE> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE> Aqu no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento <TABLE>. La omisin o no es equivalente a parametrizarlo; se consigue lo mismo as: BORDER=0, y como ya habrs deducido, el valor de BORDER puede ser variable.
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Mira el siguiente ejemplo: Tabla con borde de 10 puntos Item 1Item 2Item 3Item 4<TABLE BORDER=10> <TR> <TD>Item 1</TD> <TD> Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> </TR> </TABLE> Dimensionado de celdas ABCDEF<TABLE BORDER CELLPADDING=10 CELLSPACING=0> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> ABCDEF<TABLE BORDER CELLPADDING=0 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> ABCDEF<TABLE BORDER CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> ABCDEF<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Alineacin, ttulos y subtablas Lneas mltiples en un tabla EneroFebreroMarzoCelda 1Celda 2Otra celda Celda 3 Celda 4y esta es la celda 5Celda 6<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD>Celda 4</TD> <TD>y esta<br>es la celda 5</TD> <TD>Celda 6</TD> </TR> </TABLE> Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER Se puede aplicar individualmente a una celda o a toda la lnea EneroFebreroMarzoTodas alineadas al centroCelda 2Otra celda Celda 3Alineado a la derechaAlineado al centro Por defecto Alineado a la izquierda <TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR ALIGN=center> <TD>Todas alineadas al centro</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD ALIGN=right>Alineado a la derecha</TD> <TD ALIGN=center>Alineado al centro</TD> <TD>Por defecto<br>Alineado a la izquierdat</TD> </TR> </TABLE> Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE Se puede aplicar individualmente a una celda o a toda la columna EneroFebreroMarzoTodas alineadas arribaEsta es la Celda 2 Celda 3Alineado arribaAlineado abajoPor defecto Alineado al centro<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR VALIGN=top> <TD>Todas alineadas arriba</TD> <TD>Esta es la<br>Celda 2</TD> <TD>Celda 3</TD> </TR> <TR> <TD VALIGN=top>Alineado arriba</TD> <TD VALIGN=bottom>Alineado abajo</TD> <TD>Por defecto<br>Alineado al centro</TD> </TR> </TABLE> Titulando las tablas. CAPTION=TOP | BOTTOM Ttulo arriba EneroFebreroMarzoCelda 1Celda 2Celda 3<TABLE BORDER> <CAPTION ALIGN=top>Titulo arriba</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE> Ttulo abajo EneroFebreroMarzoCelda 1Celda 2Celda 3<TABLE BORDER> <CAPTION ALIGN=bottom>Titulo abajo</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE> Anidando tablas. La tabla ABCD dentro de la tabla 12345 123 ABCD456<TABLE BORDER> <TR> <!-- ROW 1, TABLE 1 --> <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR> <!-- ROW 1, TABLE 2 --> <TD>A</TD> <TD>B</TD> </TR> <TR> <!-- ROW 2, TABLE 2 --> <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR> <TR> <!-- ROW 2, TABLE 1 --> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> </TABLE> Longitud horizontal de las tablas Tabla que ocupa el 50 % de la pantalla, y cuyas celdas estn dimensionadas al 50 % cada una respecto a la longitud total de la tabla Width=50%Width=50%Celda 3Celda 4<TABLE BORDER WIDTH="50%"> <TR> <TD>Width=50%</TD> <TD>Width=50%</TD> </TR> <TR> <TD>Celda 3</TD> <TD>Celda 4</TD> </TR> </TABLE>
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsvese que se alargan ms de lo que lo haran sin forzar la longitud de la tabla Celda 12Celda 34<TABLE BORDER WIDTH="50%"> <TR> <TD>Celda 1</TD> <TD>2</TD> <TD>Celda 3</TD> <TD>4</TD> </TR> </TABLE> El mismo efecto anterior, pero con la tabla dimensionada al 100 % WIDTH=100%Celda 23Celda 4<TABLE BORDER WIDTH="100%"> <TR> <TD>WIDTH=100%</TD> <TD>Celda 2</TD> </TR> <TR> <TD>3</TD> <TD>Celda 4</TD> </TR> </TABLE> Centrado de una tabla en la pgina ABCDEF<CENTER> <TABLE BORDER WIDTH="50%"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> </CENTER> Tabla forzada al 50 % de la pgina, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla est forzada a ocupar el 100 % de la celda receptora. Item 1Item 2Item AItem BItem 4<TABLE BORDER WIDTH="50%"> <TR> <TD>Item 1</TD> <TD>Item 2</TD> </TR> <TR> <TD> <TABLE BORDER WIDTH=100%> <TR> <TD>Item A</TD> <TD>Item B</TD> </TR> </TABLE> </TD> <TD>Item 4</TD> </TR> </TABLE> Longitud vertical de las tablas Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25% HEIGHT=25%Item 234<TABLE BORDER WIDTH="50%" HEIGHT="25%"> <TR> <TD>HEIGHT=15%</TD> <TD>Item 2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE> Fondos de colores o grficos en las tablas Una tabla de cuatro celdas. Cada una de un color. Texto ROJOTexto VERDETexto AZULTexto AMARILLO<TABLE BORDER> <TR> <TD BGCOLOR="RED">Texto ROJO</TD> <TD BGCOLOR="green">Texto VERDE</TD> </TR> <TR> <TD BGCOLOR="blue">Texto AZUL</TD> <TD BGCOLOR="YELLOW">Texto AMARILLO</TD> </TR> </TABLE> En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, slo sera necesario escribir: <TABLE BORDER BGCOLOR="red"> .... .... </TABLE> Para toda la lnea: <TABLE BORDER> <TR BGCOLOR="red"><TD> texto </TD></TR> .... </TABLE> Tambin se puede usar una imagen como fondo de toda la tabla: <TABLE BORDER BACKGROUND="yellow_r.gif"> .... .... </TABLE> De slo una celda: <TABLE BORDER> <TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR> .... </TABLE> O de toda la fila: <TABLE BORDER > <TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR> .... </TABLE> Bordes de colores en las tablasSe puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona igual en todos los navegadores, ya que en el IE el color afecta a todas las lneas de la tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo: Ejemplo de bordes de color rojoEjemplo de bordes de color rojo <TABLE BORDER=2 bordercolor="red" > <TR> <TD> Ejemplo de bordes</TD> <TD> de color rojo </TD> </TR> <TR> <TD> Ejemplo de bordes</TD> <TD> de color rojo </TD> </TR> </TABLE> Atributos de ltima generacinTabla que solamente muestra los cuatro bordes ABCDEF<TABLE FRAME="border" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR>
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

</TR> <TR>

kiubix.com

<TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Tabla que solamente muestra los bordes superior e inferior ABCDEF<TABLE FRAME="hsides" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Tabla que solamente muestra los bordes izquierdo y derecho ABCDEF<TABLE FRAME="vsides" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Tabla que solamente muestra las lneas de divisin entre columnas ABCDEF<TABLE FRAME="void" RULES="cols"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Tabla que solamente muestra las lneas de divisin entre filas ABCDEF<TABLE FRAME="void" RULES="rows"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Ejemplo de tabla con agrupamientos de columnas y filas Ejemplo de grupos de columnas y lneas Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7 C1L1 C2L1 C3L1 C4L1 C5L1 C6L1 C7L1 C1L2 C2L2 C3L2 C4L2 C5L2 C6L2 C7L2 C1L3 C2L3 C3L3 C4L3 C5L3 C6L3 C7L3 C1L4 C2L4 C3L4 C4L4 C5L4 C6L4 C7L4 C1L5 C2L5 C3L5 C4L5 C5L5 C6L5 C7L5 C1L6 C2L6 C3L6 C4L6 C5L6 C6L6 C7L6 C1L7 C2L7 C3L7 C4L7 C5L7 C6L7 C7L7 <TABLE border="1" frame="border" rules="groups"> <CAPTION>Ejemplo de grupos de columnas y lneas</CAPTION> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR> <TH>Columna1</TH> <TH>Columna2</TH> <TH>Columna3</TH> <TH>Columna4</TH> <TH>Columna5</TH> <TH>Columna6</TH> <TH>Columna7</TH> </TR> <TBODY> <TR> <TD>C1L1</TD> <TD>C2L1</TD> <TD>C3L1</TD> <TD>C4L1</TD> <TD>C5L1</TD> <TD>C6L1</TD> <TD>C7L1</TD> </TR> <TR> <TD>C1L2</TD> <TD>C2L2</TD> <TD>C3L2</TD> <TD>C4L2</TD> <TD>C5L2</TD> <TD>C6L2</TD> <TD>C7L2</TD> </TR> <TR> <TD>C1L3</TD> <TD>C2L3</TD> <TD>C3L3</TD> <TD>C4L3</TD> <TD>C5L3</TD> <TD>C6L3</TD> <TD>C7L3</TD> </TR> <TR> <TD>C1L4</TD> <TD>C2L4</TD> <TD>C3L4</TD> <TD>C4L4</TD> <TD>C5L4</TD> <TD>C6L4</TD> <TD>C7L4</TD> </TR> <TBODY> <TR> <TD>C1L5</TD> <TD>C2L5</TD> <TD>C3L5</TD> <TD>C4L5</TD> <TD>C5L5</TD> <TD>C6L5</TD> <TD>C7L5</TD> </TR> <TR> <TD>C1L6</TD> <TD>C2L6</TD> <TD>C3L6</TD> <TD>C4L6</TD> <TD>C5L6</TD> <TD>C6L6</TD> <TD>C7L6</TD> </TR> <TFOOT> <TR> <TD>C1L7</TD> <TD>C2L7</TD> <TD>C3L7</TD> <TD>C4L7</TD> <TD>C5L7</TD> <TD>C6L7</TD> <TD>C7L7</TD> </TR> </TABLE> Como puedes ver, existe un agrupamiento desde la lnea 1 a la 4, y otro de la 5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro. Los dos agrupamientos de columnas se definen con las instrucciones: <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> Hay cuatro grupos de filas: La que aparece debajo de las cabeceras la escribe <THEAD> Las dos lneas que separan los grupos de filas centrales las producen las dos instrucciones <TBODY>, Y la ltima la produce <TFOOT>. Por supuesto, no es obligado que esten todas, puedes poner solamente las que necesites. Todo esto funciona solamente si en la definicin de la tabla se incluye el atributo rules="groups" Tablas con efectos compatibles con todos los navegadores... Como ya has podido ver, muchos de los efectos de ltima generacin mostrados no funcionan igual, o no funcionan en absoluto con todos los navegadores. Qu hacer entonces para conseguir tablas cuyas lneas de bordes se vean siempre bien? Pues la nica solucin es usar una tabla sin bordes. S, ya s que lo que buscas no es eso, pero si utilizando atributos de tabla para poner lneas de bordes donde queramos hay problemas con algunos navegadores, la solucin es utilizar otros recursos del HTML que sean admitidos por todos. No es ninguna solucin mgica: solamente tienes que crear un grfico con un punto (preferiblemente cuadrado) del color y grosor que quieras dar a tus lneas... y listo. Supongamos que queremos conseguir con una tabla representar un recuadro con bordes rojos. Para ello, utilizando cualquier editor de grficos creamos un fichero que contenga un punto de color rojo. Solamente uno, ser casi invisible. No necesitamos ms. Le llamaremos rojo.gif Ejemplo de recuadro con ngulos rectos. Y este sera del cdigo necesario: <table width="300" height="50" cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5" align="center"> <tr> <td rowspan="3" width="1" height="50"> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"rojo.gif" width="1px" height="50" border="0" alt=""></td>
http://www.kiubix.com/portal Powered by Joomla!

<td

Generated: 22 August, 2011, 22:30

kiubix.com

colspan="4" height="1"> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"rojo.gif" width="300" height="1" border="0" alt=""></td> <td rowspan="3" width="1"> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"rojo.gif" width="1px" height="50" border="0" alt=""></td> </tr> <tr> <td colspan="4" align="center" height="48"> <font color="white">Ejemplo de recuadro con ngulos rectos.</font></td> colspan="4" height="1"> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"rojo.gif" width="300" height="1" border="0" alt=""></td> </tr> </table> Como puedes ver, el truco consiste en definir celdas alrededor de la celda que lleva el texto. Estas celdas que rodean a la principal solamente contienen el fichero grfico con el punto. Para conseguir que aparezcan las lneas, slo hay que "estirar" el punto contenido en nuestro fichero grfico rojo.gif. Esto nos permite "dibujar" las lneas que se quieran y donde se quieran, sin problemas de compatibilidad, ya que estos atributos del elemento <IMG> son completamente estandarizados (por lo menos de momento). Fjate en que adems de atributos propios del elemento IMG tambin se utiliza una instruccin de estilo: width="1px" para asegurar un grosor mnimo de la lnea. Este es el aspecto de la misma tabla con los bordes visibles: Vertical izquierdaHorizontal arribaVertical derechaEjemplo de recuadro con ngulos rectos.Horizontal abajo------------------Utilizando una tcnica parecida, tambin se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un grfico previamente, pero este nos dar algo ms de trabajo. Con cualquier editor de grficos (el "Paint" de Windows, por ejemplo) generas un crculo del color que quieras, y con el borde transparente o de otro color. A continuacin lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. As Recuadro con ngulos redondeados Y este es el cdigo necesario: <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#DDE0FC" width="20"><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"angulo1.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#DDE0FC" width="20"> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"angulo2.gif" width="20" height="20"> </tr> <tr> <td bgcolor="#DDE0FC" width="20"> <td bgcolor="#DDE0FC">Recuadro con ngulos redondeados <td bgcolor="#DDE0FC" width="20"> </tr> <tr> <td bgcolor="#DDE0FC" width="20"><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"angulo4.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#E5E7FD" width="20"><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"angulo3.gif" width="20" height="20"> </tr> </table> Como puedes ver, para que el efecto sea completo hay que dar el mismo color que tienen los grficos como fondo de las celdas. Estos son los cuatro grficos necesarios: angulo1.gif angulo2.gif angullo4.gif angulo3.gif Cdigos hexadecimales de color

Estos cdigos de color se pueden utilizar como valor de atributo en los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>. Algunos no funcionarn en ciertos visualizadores, as como si Windows no est configurado con 256 colores al menos. La codificacin de estos colores est basada en mezclas cromticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores bsicos (rojo verde y azul), para conseguir el color deseado. La cantidad de cada color est definida por el cdigo que utilizamos, que tiene seis dgitos en hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de cada color. La sintaxis para cambiar el fondo de la pgina (background) a color rojo es: <BODY BGCOLOR=#FF0000> y para dar color al texto, ver la pgina Texto de colores. Para combinaciones generales de colores, ver el ejemplo de control de colores. Lista de cdigos RGBPuedes probar los diez primeros para hacerte una idea, o puedes verlos todos desde aqu White rgb=#FFFFFF Red rgb=#FF0000 Green rgb=#00FF00 Blue rgb=#0000FF Magenta rgb=#FF00FF Cyan rgb=#00FFFF Yellow rgb=#FFFF00 Black rgb=#000000 Aquamarine rgb=#70DB93 Baker's Chocolate rgb=#5C3317 Blue Violet rgb=#9F5F9F Brass rgb=#B5A642 Bright Gold rgb=#D9D919 Brown rgb=#A62A2A
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Bronze rgb=#8C7853 Bronze II rgb=#A67D3D Cadet Blue rgb=#5F9F9F Cool Copper rgb=#D98719 Copper rgb=#B87333 Coral rgb=#FF7F00 Corn Flower Blue rgb=#42426F Dark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F Dark Orchid rgb=#9932CD Dark Purple rgb=#871F78 Dark Slate Blue rgb=#6B238E Dark Slate Grey rgb=#2F4F4F Dark Tan rgb=#97694F Dark Turquoise rgb=#7093DB Dark Wood rgb=#855E42 Dim Grey rgb=#545454 Dusty Rose rgb=#856363 Feldspar rgb=#D19275 Firebrick rgb=#8E2323 Forest Green rgb=#238E23 Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Lime Green rgb=#32CD32 Mandarian Orange rgb=#E47833 Maroon rgb=#8E236B Medium Aquamarine rgb=#32CD99 Medium Blue rgb=#3232CD Medium Forest Green rgb=#6B8E23 Medium Goldenrod rgb=#EAEAAE Medium Orchid rgb=#9370DB Medium Sea Green rgb=#426F42 Medium Slate Blue rgb=#7F00FF Medium Spring Green rgb=#7FFF00 Medium Turquoise rgb=#70DBDB Medium Violet Red rgb=#DB7093 Medium Wood rgb=#A68064 Midnight Blue rgb=#2F2F4F Navy Blue rgb=#23238E Neon Blue rgb=#4D4DFF Neon Pink rgb=#FF6EC7 New Midnight Blue rgb=#00009C New Tan rgb=#EBC79E Old Gold rgb=#CFB53B Orange rgb=#FF7F00 Orange Red rgb=#FF2400 Orchid rgb=#DB70DB Pale Green rgb=#8FBC8F Pink rgb=#BC8F8F Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Sienna rgb=#8E6B23 Silver rgb=#E6E8FA Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32Control de coloresEste es un documento de ejemplo de control de color. El texto es gris claro sobre negro, y los links son amarillos al principio, azul-verde cuando son activados, y verdes despus de haber sido utilizados. Todo son atributos del elemento <BODY>. Se escribe as: <BODY BGCOLOR="#000000" FGCOLOR="#00FF00" TEXT="#F0F0F0" LINK="#FFFF00" VLINK="22AA22" ALINK="#0077FF"> Por qu hay que usar cdigos?Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente despus de encender el ordenador, y son los que se encargan de darle "vida" a nuestra mquina. Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene tu teclado y algunos ms que no estn en el mismo, pero que se pueden escribir en pantalla por otros medios. Estas tablas, desafortunadamente, no son siempre las mismas, y varan de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que desde un MACintosh, o una terminal UNIX, si las escribimos directamente desde el teclado. Dado que el HTML pretende ser un lenguaje universal, y que una pgina debe verse como su creador desea, sin importar si estamos ante un ordenador que "habla" en ingls o en espaol, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad estn todos, pero generalmente slo se usa para caracteres especiales) que se escriben con un cdigo en lugar de pulsar la tecla que lo contiene directamente. Por ejemplo, nuestra denostada en medio mundo "" se escribir: &Ntilde; o bien Esto habr que hacerlo con todos los caracteres que no sean las letras del alfabeto (maysculas y minsculas), los nmeros y unos pocos signos, como el punto, la coma, el guin y algunos otros. A este conjunto de caracteres, comn para todos los sistemas, se le denomina cdigo ASCII, y desde luego hay que codificar todas las letras acentuadas, ees, cedillas, etc., etc. Como puedes ver, la tabla tiene una columna con el carcter deseado seguida de su cdigo numrico en base decimal, una descripcin del carcter y despus un nombre corto (una especie de alias) que para los ms habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el cdigo numrico. En algunos casos especiales que se vern ms adelante, habr que escribir los cdigos numricos en base hexadecimal (la calculadora de Windows tiene un conversor). Generalmente, se pueden escribir directamente desde teclado todos los que no tienen alias en la tabla, los que s tienen normalmente darn problemas en sistemas diferentes al que se ha utilizado para escribir el documento. Si lo que escribes en HTML tienes la seguridad de que slo va a ser utilizado como ficheros locales en mquinas similares a la tuya, no ser necesario complicarse la vida; pero si tus pginas van a residir en un servidor WWW, cualquier tipo de mquina podr acceder a ellas, y su aspecto no ser el adecuado en algunas. Existen multitud de editores especiales para escribir HTML, y la mayora de ellos tienen herramientas para convertir de forma automtica los caracteres especiales a su correspondiente cdigo. Tambin hay paquetes de "macros" para hacer lo mismo con procesadores de texto como Word o Word Perfect. Tabla de cdigos de caracteres Actualmente existen muchos ms, con cdigos de 4 dgitos, como el euro. Estos son algunos de los ms utilizados. Caracter Cdigo Descripcin Alias ! ! Cerrar exclamacin -- " " Dobles comillas -- # # Signo de nmero -- $ $ Dlar -- % % Tanto por ciento -- &permil; 0 Tanto por mil -- & & Ampersand amp ' ' Apstrofe -- ( ( Cerrar parntesis -- ) ) Abrir parntesis -- * * Asterisco -- + + Signo ms -- , , Coma -- - - Guin -- . . Punto -- / / Barra de divisin -- 0 - 9 0 - 9 Dgitos del
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

al 0-9 -- : : Dos puntos -- ; ; Punto y coma -- < < Menor -- < < Menor lt = = Igual -- > > Mayor -- > > Mayor gt ? ? Cerrar interrogacin -- @ @ Arroba -- A - Z A - Z Letras A-Z -- [ [ Cerrar corchete (izquierdo) -- \ \ Barra inversa -- ] ] Abrir corchete -- ^ ^ Circunflejo -- _ _ Subrayado -- ` ` Acento agudo -- a - z a - z Letras a-z -- { { Abrir llave -- | | Barra vertical -} } Cerrar llave -- ~ ~ Tilde -- Espacio sin separacin nbsp Abrir exclamacin iexcl Centavo cent Libra Esterlina pound Signo de divisa general curren Yen yen Barra vertical partida (pipe) brvbar Seccin sect Diresis uml Copyright copy Doa ordf Abrir comillas francesas laquo No (smbolo lgico) not - - Guin dbil shy Registrado reg Macrn macr Grados deg Ms-menos plusmn Dos superndice sup2 Tres superndice sup3 Acento agudo acute Micro micro Fin de prrafo para Punto medio middot Cedilla cedil Uno superndice sup1 Gnero masculino ordm Cerrar comillas francesas raquo Un cuarto frac14 Un medio frac12 Tres cuartos frac34 [ [ Un octavo -- \ \ Tres octavos -- ] ] Cinco octavos -- ^ ^ Siete octavos -- Abrir interrogacin iquest A mayscula, acento grave Agrave A mayscula, acento agudo Aacute A mayscula, acento circunflejo Acirc A mayscula, tilde Atilde A mayscula, diresis Auml A mayscula, anillo Aring AE mayscula AElig C cedilla mayscula Ccedil E mayscula, acento grave Egrave E mayscula, acento agudo Eacute E mayscula, acento circunflejo Ecirc E mayscula, diresis Euml I mayscula, acento grave Igrave I mayscula, acento agudo Iacute I mayscula, acento circunflejo Icirc I mayscula, diresis Iuml Eth mayscula ETH Ee mayscula Ntilde O mayscula, acento grave Ograve O mayscula, acento agudo Oacute O mayscula, acento circunflejo Ocirc O mayscula, tilde Otilde O mayscula, diresis Ouml Signo de multiplicacin times O barrada mayscula Oslash U mayscula, acento grave Ugrave U mayscula, acento agudo Uacute U mayscula, acento circunflejo Ucirc U mayscula, diresis Uuml Y mayscula, acento agudo Yacute THORN mayscula THORN Beta minscula szlig a minscula, acento grave agrave a minscula, acento agudo aacute a minscula, acento circunflejo acirc a minscula, tilde atilde a minscula, diresis auml a minscula, anillo aring ae mnuscula aelig c cedilla minscula ccedil e minscula, acento grave egrave e minscula, acento agudo eacute e minscula, acento circunflejo ecirc e minscula, diresis euml i minscula, acento grave igrave i minscula, acento agudo iacute i minscula, acento circunflejo icirc i minscula, diresis iuml eth minscula eth ee minscula ntilde o minscula, acento grave ograve o minscula, acento agudo oacute o minscula, acento circunflejo ocirc o minscula, tilde otilde o minscula, diresis ouml Signo de divisin divide o barrada minscula oslash u minscula, acento grave ugrave u minscula, acento agudo uacute u minscula, acento circunflejo ucirc u minscula, diresis uuml y minscula, acento agudo yacute thorn minscula thorn y minscula, diresis yuml &euro; &#8364 Euro euro &ne; ` Distinto de ne &le; d Menor o igual que le &ge; e Mayor o igual que ge &radic; Radical radic & & Omega -- &uarr; Flecha arriba uarr &darr; Flecha abajo darr &larr; Flecha izquierda larr &rarr; Flecha derecha rarr &harr; Flecha izq-der harr N -- Flecha ar - Flecha de -- Flecha ab -- Flecha iz -- Cuadrado lleno -- Cuadrdo vacio -- Mini cuadrado lleno -- Mini cuadrado vacio -- Punto lleno -- Punto vacio -- &loz; Rombo vacio loz Creacin de enlaces (links) El siguiente es sin duda el elemento ms importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, parecindonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto, para la persona que est leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dnde est el documento que lee. Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee est repartido por medio mundo, o en un plano ms modesto, el documento ledo puede estar compuesto en realidad por varios cientos de pginas que "saltan" de unas a otras sin notarlo. Todo esto lo consigue el elemento <A> (por Anchor, en ingls = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en ingls link=eslabn o enlace). Pero seguramente te preguntars qu es eso de un "link". Pues un link es un rea de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratn, y al ponerlo sobre ella y pulsar el botn izquierdo el visualizador llamar a la pgina que tiene asignada el link. Habitualmente por defecto los visualizadores sealan un rea linkada subrayndola, si es texto, o ponindole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la esttica en algunos casos, se puede parametrizar con una instruccin de estilo. Se escribir: <A href="http://www.miservidor.es/mifichero.htm" mce_href="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>. Y se vera as: Link de prueba Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se puede recurrir a una instruccin de estilo. As: <A href="http://www.miservidor.es/mifichero.htm" mce_href="http://www.miservidor.es/mifichero.htm" style="color:red; text-decoration:none";> Link de prueba </A>. Y se vera as: Link de prueba (Esto puede que no funcione en algunos navegadores antiguos)

El elemento <A> tiene dos atributos: HREF y NAME. En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas:
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

"http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que est en el servidor www.miservidor.es. Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que saltar de una mquina a otra, si el enlace es para otra pgina de nuestro propio servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien: /otro_directorio/mifichero.htm segn proceda. Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del elemento </A>, pero tambin puede hacerse con una imagen cualquiera, que ira en lugar del texto, incluso puedes poner el texto junto con una imagen. Por ejemplo para hacer un link que nos lleve al ndice desde una bola roja, se escribe: Ir al ndice <A href="indice.htm" mce_href="indice.htm"> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"poster.gif"> </A>. Y este sera el resultado: Ir al ndice Al igual que el texto aparece subrayado en azul cuando forma parte de un enlace, los grficos reciben un borde azul alrededor de toda la imagen, lo que a veces puede resultar poco esttico. Esto tambin tiene solucin, pero aqu se hace en la instruccin de la imagen: Ir al ndice <A href="indice.htm" mce_href="indice.htm"> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"bolaroja.gif" border=0> </A>. Y este sera el resultado: Ir al ndice El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionara el link si escribiramos www.miservidor.es en maysculas o con alguna otra diferencia, eso es un nombre de mquina y sera interpretado como OTRA mquina. Esto es aplicable a todos los parmetros: servicio (http://) servidor (www.miservidor.es) y fichero (mifichero.htm). Estas precauciones son ineludibles en el caso de servidores montados en mquinas con sistema operativo UNIX. En el caso de que el servidor resida en una mquina con Windows NT o Windows 95/98, es indiferente. Si no se sabe el sistema que tiene la mquina, es mejor atenerse a la forma UNIX. Dentro de los parmetros pasados a HREF, podrs ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios : ServicioDescripcinEjemploEfectohttp://Servicios WWW<A href="http://www.uv.es/" mce_href="http://www.uv.es/"> WWW</A>WWWftp://Servicios FTP<A href="ftp://ftp.uv.es/" mce_href="ftp://ftp.uv.es/">FTP</A>FTPnews://Servicios NEWS<A href="news://news.uv.es/" mce_href="news://news.uv.es/">NEWS</A>NEWSmailto://Servicios E-mail<A href="mailto:jac@uv.es/" mce_href="mailto:jac@uv.es/">E-mail</A>E-mailfile:///C|Fichero local<A href="indice.htm/" mce_href="indice.htm/">Fichero</A>Fichero Adems de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la pgina que se desee. Se escribir: <A href="indice.htm" mce_href="indice.htm" TARGET="Ventana-2"> </A> Esta instruccin mostrar la pgina indice.htm pero con otra ventana del visualizador, es decir tendremos lanzado el visualizador 2 veces. Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la pgina llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis siguiente: <A href="indice.htm" mce_href="indice.htm" TARGET="_parent"> </A> Existen otros valores para TARGET: TARGET="_blank": Para que el enlace se muestre en una nueva ventana vaca. Tambin puede darse un nombre cualquiera con el mismo efecto. TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia (valor por defecto). TARGET="_top": El documento solicitado se cargar en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior, si existe. Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentar desde la primera lnea del mismo. El atributo NAME se utiliza para definir algo as como "un punto de aterrizaje" en cualquier lnea del documento de destino, de forma que nos aparecer en pantalla desde la lnea deseada y no desde el principio. Esto es muy til cuando se trata de documentos largos divididos en secciones. Se escribir as: En el documento activo: <A href="http://www.miservidor.es/mifichero.htm#punto1" mce_href="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A> En el documento destino: <A NAME="punto1"></A> NAME tambin puede utilizarse para saltar de una lnea a otra dentro de un mismo documento. Se escribir as:
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Dentro del documento activo En la lnea de partida: <A href="#punto1" mce_href="#punto1">Ir al punto 1</A> En la lnea de destino <A NAME="punto1"></A> Por ejemplo, si haces "clik" aqu con el ratn, saltars al principio de esta pgina. Como habrs visto en el cuadro de arriba, es posible enviar un e-mail desde un link con la instruccin: <A href="mailto:jac@uv.es" mce_href="mailto:jac@uv.es">Enviar e-mail</A>. Con esta sintaxis se invoca al cliente de correo predeterminado para que abra una ventana con la direccin deseada ya escrita. Si adems quieres que dicha ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede conseguir as: <A HREF="mailto:jac@uv.es?&subject=Asunto de prueba&body=Texto de prueba">Enviar e-mail</A> Con los links, al igual que con los formularios, es posible moverse usando la tecla de tabulacin, para conseguir que el enfoque salte de un link a otro en un cierto orden. Para ello se utiliza el atributo tabindex. Por ejemplo, pulsa la tecla "Tab": Tablas Imgenes Body Como puedes ver, los saltos en esta lnea se han producido siguiendo la numeracin indicada por los disintos tabindex, al resto de links se llega por orden de escritura. Se escribe: <A href="tablas.htm" mce_href="tablas.htm" tabindex="2">Tablas</A> <A href="imagen1.htm" mce_href="imagen1.htm" tabindex="3">Imgenes</A> <A href="body.htm" mce_href="body.htm" tabindex="1">Body</A> Esto solamente funciona con versiones recientes de navegadores. Otro atributo reciente de los links es title que permite escribir una descripcin del link sin necesidad de pulsar en l, simplemente poniendo encima el puntero del ratn. Por ejemplo: <A href="tablas.htm" mce_href="tablas.htm" title="Saltar a la seccin de tablas">Tablas</A> Se obtiene: Tablas Debes saber que... - El texto que pongas despus del smbolo # puede ser cualquiera, siempre que no tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por supuesto, que no est repetido en el mismo documento de destino. - Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador nos presentar en pantalla la ltima lnea del mismo. - Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas direcciones absolutas y despus tienes que mover los ficheros por cualquier razn, tendrs que modificar todas las direcciones. - Si al hacer un link, despus del nombre de la mquina no pones el nombre de un fichero, por defecto el servidor entiende que se le pide la "home page" (pgina inicial) de ese directorio. Generalmente (aunque depende de la configuracin del servidor) el fichero inicial de un directorio suele ser index.htm o default.htm - Si un servidor no tiene definida pgina inicial, simplemente nos mostrar una lista de todos los ficheros y directorios que tenga en el directorio definido como raz si el servidor tiene activada la opcin de listar directorios, en caso contrario, dar un error. - Si despus de la direccin de la mquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio, generalmente el servidor nos mostrar un simple listado de los ficheros y directorios que ste contenga si el servidor tiene activada la opcin de listar directorios, en caso contrario, dar un error. - No slo puedes montar el link sobre un texto, tambin puedes hacerlo sobre una imagen cualquiera. Es decir, despus del link y antes de </A> puedes poner lo que quieras. - El arte de escribir buen HTML reside en dar una buena estructura a la informacin. Siempre que puedas huye de crear pginas muy largas. Crea cuantas necesites, con buena estructura y enlzalas con cuantos links sean precisos. - Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has utilizado direcciones absolutas, al hacer un link, no empieces con aquello de: "http://....". No funcionar. - Si continuas deseando poner direcciones absolutas con ficheros locales, tendr que ser as file:///C:/MIDIRECTORIO/mifichero.htm - Despus de C (que puede ser A, B, D o la unidad de disco que quieras) fjate en que las barras que separan los directorios y ficheros son barras a la derecha. Insertar imgenesInsertar imgenes en un documento permite crear pginas mucho ms atractivas. Segn el tipo de grficos utilizado se pueden conseguir efectos realmente sorprendentes. Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompaado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGTH BORDER VSPACE HSPACE. Con las nuevas implementaciones que Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR. Las imgenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son interpretados directamente por el navegador. La diferencia entre estos dos formatos es su nivel de compresin. En efecto, el JPG tiene una compresin mucho mayor que el GIF, por lo que suele ser el formato ms utilizado en el mundo web, donde siempre se debe perseguir que las pginas sean lo ms ligeras posible. Por contra, cuanta mayor compresin tenga un grfico menor
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

calidad se consigue, pero para usos generales el JPG es perfectamente vlido. Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vdeo), pero entonces el visualizador llamar a un programa auxiliar, que previamente le habrs definido, para que sea ste el que visualice el fichero. La desventaja de las imgenes en formatos no tratados por el propio visualizador es que no vers el texto junto con la imagen, y por tanto no podrs imprimir la pgina compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeos programas que permiten llamar a aplicaciones especficas ejecutndose como ventanas del navegador. Un ejemplo muy comn son los ficheros .pdf. Algunos navegadores no son capaces de tratar imgenes, o aunque el navegador s pueda, tal vez el cliente est navegando en modo solo texto, es decir, sin ver las imgenes, lo que permite moverse ms rpido. Para estos casos podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecer en lugar de la imagen. Esto es importante cuando una imagen, adems de ser un elemento decorativo o informativo, soporta un link. El uso de ALT es recomendado por la W3. Veamos ejemplos del uso de <IMG>: Imagen alineada a la izquierda (por defecto) <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen con un texto alternativo Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. Tambin se utiliza para que al colocar el puntero del ratn sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opcin de cargar imgenes de tu visualizador (slo es posible con Netscape). <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALT="AQUI VA UNA IMAGEN"> Imagen alineada a la izquierda.

Texto alineado arriba <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=TOP> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado abajo <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado al centro <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=LEFT> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto envolviendo la imagen <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido: <TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto texto</TD><TD align=center><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif"></TD></TR> </TABLE> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Imagen redimensionada a ms.Texto alineado a la derecha de la imagen <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamao original es de 136x46 puntos. Este es su aspecto al doble: 272x92.

Imagen redimensionada a menos.Texto alineado a la derecha de la imagen <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamao original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23 Consideraciones sobre WIDTH y HEIGTHEstos dos atributos, adems de para variar el tamao de un grfico, tambin pueden (casi deben) utilizarse con los valores naturales del mismo. Es decir, que no se pretende alterar las dimensiones del grfico. Y te preguntars que finalidad tiene esto. La razn estriba en cmo funcionan los navegadores. Cuando el navegador solicita una pgina y comienza a recibirla, lo primero que hace es leer la cabecera, a continuacin lee el cdigo del BODY y por ltimo carga las imgenes que contenga la pgina haciendo nuevas conexiones al servidor para cada una de ellas. Esta forma de trabajar tiene como consecuencia, que si en el cdigo del BODY no hay instrucciones sobre el espacio que hay que reservar en pantalla para cada imagen, cuando stas lleguen en el ltimo paso de la carga de la pgina, el texto ya estar compuesto, pero al no saber el tamao de las imgenes, no se habr reservado el espacio adecuado para insertarlas, por lo que todo el texto ser desplazado hacia abajo, con la consiguiente prdida del formato original de la pgina, ya que el navegador no va a recomponer el texto que ya estaba escrito. Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la imagen <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios verticales y horizontales vacos forzados. texto texto texto texto texto texto texzto texto texto texto texto texto <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Usar una imagen como punto de montaje de un link texto texto <A href="indice.htm" mce_href="indice.htm"><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ></A>texto texto. Como puedes ver, la imagen aparece rodeada de un marco de color como es habitual en los puntos de link (en el texto es el subrayado). Si quieres eliminar el marco, escribe: .... IMG src="sugeren.gif" mce_src="sugeren.gif" BORDER=0 > Ahora que ya sabes cmo manejar las imgenes, veamos algunos efectos especiales algo ms complicados. Mapeado de una imagen para usarla como direccionador <A href="/cgi-bin/imagemap/mimapa" mce_href="/cgibin/imagemap/mimapa"><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ISMAP></A> Si mueves el ratn por encima de la imagen, vers que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos nmeros que cambian segn muevas el ratn. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha. Vers las cifras 1,1 y 136,46, respectivamente, que son las medidas en puntos que tiene el grfico. Como ya habrs supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un men direccionador, lo que necesitamos es que algn elemento convierta esas coordenadas en una direccin del estilo ya conocido: "http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos obtener un enorme nmero de direcciones, tericamente tantas como pares de coordenadas tiene la imagen. En la prctica sern menos, ya que andar intentando atinar en el punto 11,32, por ejemplo, es un poco engorroso. Existen multitud de programas llamados mapeadores que parten la imagen en imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos programas generan un fichero con todas las direcciones. Algo as: rect http://miservidor.es/mifichero1.htm 12,35 rect http://miservidor.es/mifichero2.htm 90,42 rect http://miservidor.es/mifichero3.htm 112,46 Este podra ser el aspecto del fichero del ejemplo, el llamado mimapa. El parmetro rect significa rectngulo, y nos indica que la imagen ha sido troceada en rectngulos y las coordenadas indican la esquina superior izquierda y la inferior derecha. Tambin podra ser en crculos (circ) o polgonos (poly). Ahora veamos el resto de instrucciones del ejemplo: <A href="/cgi-bin/imagemap/mimapa" mce_href="/cgibin/imagemap/mimapa"><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" ISMAP></A> La primera parte A HREF ya la conocemos, es un link. Despus viene un directorio: cgi-bin. Este es un directorio especial que tienen los servidores http, donde se ejecutan los programas auxiliares del servidor, y al que normalmente slo puede acceder el administrador del sistema. En ese directorio hay un fichero llamado imagemap (segn el sistema puede ser otro) que es un programa que se encarga de leer tu fichero mimapa, capturar las coordenas que seale el puntero del ratn y servir la direccin que tiene asociada, con lo que acabamos obteniendo un link normal. Ya por ltimo, aparece ISMAP que es el que convierte una simple imagen en una potente herramienta. Slo queda por decir que el fichero mimapa tiene que estar en otro directorio especial que tiene el servidor a estos efectos, y al que por supuesto, solo puede acceder el administrador del sitema. Todo esto es suponiendo que el servidor est en una mquina UNIX. Si reside en tu propio PC con Windows o en un MAC (que los hay), tendrs que ver las instrucciones concretas del programa servidor. La forma de montar el mapa puede variar de un programa servidor a otro, pero la base de funcionamiento es siempre la misma. Otra forma alternativa de conseguir que una imagen responda con ciertas acciones, es operar con los elementos de formularios. En el ndice encontrars informacin sobre un tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite ejecutar una accin. Pero, una vez ms, Netscape ha propuesto una solucin mucho ms simple: que sea el propio visualizador quien haga las veces de programa conversor. En efecto, un recurso tan bueno como los mapas, no debe depender de tener tu mquina en red y de que haya un servidor http que te atienda. Adems, eso resta portabilidad a los documentos locales y a los trabajos personales en disquete. Para ello ha implementado el elemento MAP que acompaar a IMG. Por ejemplo: <MAP NAME="nombre1"> <AREA SHAPE="rect" COORDS="1,1,75,46" href="indice.htm" mce_href="indice.htm"> <AREA SHAPE="rect" COORDS="76,1,136,46" href="intro.htm" mce_href="intro.htm"> </MAP> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"sugeren.gif" USEMAP="#nombre1"> Aunque se comprende a simple vista, analicmoslo: En primer lugar tenemos el elemento MAP, que lo que est haciendo es definir un mapa de coordenadas. Va
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

acompaado del atributo NAME que da nombre al mapa. Es necesario nombrarlo porque podra haber ms de uno en la misma pgina, y evidentemente, sus nombres no debern repetirse. A continuacin tenemos el atributo AREA que define las reas de la imagen. El parmetro SHAPE="rect" indica la figura geomtrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly. El parmetro COORDS fcilmente se adivina que indica las coordenadas del rea, en este caso vrtice superior izquierdo e inferior derecho, respectivamente. HREF ya sabemos lo que hace: indica un link con una pgina, pero esta vez no va acompaando al elemento <A>, digamos que es un atributo prestado. Hay un rea por cada link definido. Si un rea no queremos que tenga link se definir con NOHREF. IMG SRC tambin son conocidos: hacen que se visualice la imagen. Y por fin, USEMAP nos dice qu mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fjate en que nombre1, (el nombre del mapa) va precedido del smbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia est en la misma pgina que la instruccin IMG. Podra estar en otra, y en ese caso el smbolo tendra que estar despus del nombre de la pgina. Por ejemplo: otrapagina.htm#nombre1 Como ya se ha dicho ms arriba, hay tres figuras geomtricas definibles para las reas: rect, circle y poly. El rectngulo ya lo conocemos; consiste en parejas de coordenadas que indican los vrtices superior izquierdo e inferior derecho respectivamente del rea. Para el cculo (circ) son necesarios tres valores: x,y r donde x,y es el par de coordenas que indican el punto donde est el centro del cculo, y r es el radio del crculo medido en puntos. Para los polgonos (poly) se necesitan tantas parejas de coordenadas como vrtices tenga el polgono, procurando que la ltima pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el grfico como rea de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada. Imgenes de fondoEl fondo (background) de este documento es una imagen en formato GIF. Es un atributo del elemento <BODY> Se escribe as: <BODY BACKGROUND="yellow_r.gif"> Y es compatible con todos los dems atributos de este elemento. Algunos ejemplos de imgenes en listasSe escriben todas igual, slo hay que cambiar el nombre de los grficos: <DL> <DT> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"bolaroja.gif">Linea de texto <DT> <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"bolaroja.gif">Linea de texto <DT><img src=http://www.kiubix.com/contenidos/POSTER.jpg>"bolaroja.gif">Linea de texto </DL> Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Grficos animadosUna nueva propiedad de algunos visualizadores es la posibilidad de presentar grficos con animacin. No hay que confundir los grficos animados en formato GIF con los "movies" o vdeos en formato MPG que no son tratados directamente por el visualizador, sino por una herramienta auxiliar que hay que definirle. Los visualizadores suelen presentar correctamente los formatos GIF y JPG. Netscape ha implementado la posibilidad de mostrar un tipo de grfico tipo GIF que incluye en su interior una secuencia, que junto con instrucciones de repeticin (loop), espera (wait) y controles de cabecera permiten reproducir una animacin. La diferencia de tamao entre un GIF animado y un MPG es considerable. Evidentemente, las animaciones GIF tienen peor resolucin que las MPG, y slo estn pensadas para fines sencillos. La forma de incluir una imagen animada en el documento es la misma que una imagen fija. No se requiere ningun tipo de programa ni script, todo est definido en la propia imagen. Existen en la red en forma de shareware programas para hacer ficheros de imgenes animadas. Su construccin es muy sencilla: slo necesitas tener la serie de imgenes que quieres animar e ir ensamblndolas con algn programa al efecto, definir el tiempo entre imagen, el ciclo de repeticin... y listo. Los visualizadores que no soportan este efecto, lo que hacen es presentar solamente la primera o la ltima de las imgenes de la secuencia. Hay que tener esto presente, y no comenzar o terminar las secuencias con, por ejemplo, una imagen vaca. Para representarlos en la pgina se utiliza el mismo elemento HTML de los grficos normales: <img src=http://www.kiubix.com/contenidos/POSTER.jpg>"migrafico.gif"> Introduccin a los formularios GeneralidadesEsta es una de las partes ms tcnicas y complejas del HTML. Los formularios o forms en ingls, son unas pginas
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

especiales que se utilizan para realizar transacciones. En una pgina que contenga un formulario pueden adems existir todos los elementos hasta ahora conocidos, incluso el propio formulario puede estar integrado dentro de otros elementos, como por ejemplo una tabla. Los formularios, en algunas impresoras, pueden dar problemas al imprimir las pginas que los contienen. Cmo funcionan los formularios?El formulario no es ms que una pgina escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opcin desde botones fijos o de todas ellas combinadas. Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http (web) que lo procesar y devolver una respuesta (o no). Pueden utilizarse tambin para enviar su contenido a una direccin de correo electrnico, o que simplemente abran otra pgina. Si el formulario se disea para abrir una pgina o para ser enviado por e-mail, todo se reduce a escribir HTML, pero la cosa se complica cuando se trata de transacciones de datos que hay que guardar en un servidor (comercio electrnico). En este caso, en el servidor tiene que haber un programa especial, creado especficamente para ese formulario, que reciba los datos y sepa qu hacer con ellos, procesarlos y confeccionar la respuesta que remitir al navegadorr. A esa respuesta se le denomina documento virtual ya que esa pgina no est escrita en ninguna parte; es generada, enviada y destruida. A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI (Common Gateway Interface) y no hay que confundirlos con las pginas dinmicas escritas en ASP o PHP, aunque se parecen mucho. Los programas CGI pueden estar escritos en cualquier lenguaje de programacin que sea soportado por el sistema operativo del servidor, y pueden estar diseados para cualquier funcin: desde una simple captura de datos que sern guardados en un fichero, hasta la ms sofisticada consulta a una base de datos. Cmo es un CGI?Aunque el propsito de esta gua no es tratar temas de programacin, como breve orientacin se muestra un sencillo programa hecho con comandos shell de UNIX. Muestra los valores de las variables de servidor ms usuales, as como el nombre de los campos definidos en el formulario y contenido de cada uno de ellos. Ejemplo de programa CGI (shell UNIX)#!/bin/sh echo Content-type: text/plain echo echo Test CGI. Se visualiza el contenido de las variables mas usuales echo echo numero de argumentos: $#. valor argumentos: "$*". echo echo SERVER_SOFTWARE = $SERVER_SOFTWARE echo SERVER_NAME = $SERVER_NAME echo GATEWAY_INTERFACE = $GATEWAY_INTERFACE echo SERVER_PROTOCOL = $SERVER_PROTOCOL echo SERVER_PORT = $SERVER_PORT echo REQUEST_METHOD = $REQUEST_METHOD echo HTTP_ACCEPT = $HTTP_ACCEPT echo PATH_INFO = $PATH_INFO echo PATH_TRANSLATED = $PATH_TRANSLATED echo SCRIPT_NAME = $SCRIPT_NAME echo QUERY_STRING = $QUERY_STRING echo REMOTE_HOST = $REMOTE_HOST echo REMOTE_ADDR = $REMOTE_ADDR echo REMOTE_USER = $REMOTE_USER echo REMOTE_IDENT = $REMOTE_IDENT echo AUTH_TYPE = $AUTH_TYPE echo CONTENT_TYPE = $CONTENT_TYPE echo CONTENT_LENGTH = $CONTENT_LENGTH echo HTTP_USER_AGENT = $HTTP_USER_AGENT echo HOME = $HOME echo HTTP_FROM = $HTTP_FROM echo HTTP_REFERER = $HTTP_REFERER echo REFERER_URL = $REFERER_URL if [ "$CONTENT_TYPE" = "application/x-www-form-urlencoded" ]; then read lo_que_viene echo echo ESTO VIENE POR LA INPUT: echo echo $lo_que_viene exit 0 else echo NO VIENE NADA POR LA INPUT exit 0 fi Esta sera la respuesta del CGI test2-cgi a un imaginario formulario llamado prueba.htm con dos campos de captura por teclado llamados CAMPO1 y CAMPO2 en los que hemos introducido: "Esto es una" y "demostracion de formularios" respectivamente. Ejemplo de respuesta del programa test2-cgi al formulario prueba.htmTest CGI. Se visualiza el contenido de las variables mas usuales numero de argumentos: 0. valor argumentos: . SERVER_SOFTWARE = NCSA/1.3 SERVER_NAME = miserver.midominio.mipais GATEWAY_INTERFACE = CGI/1.1 SERVER_PROTOCOL = HTTP/1.0 SERVER_PORT = 80 REQUEST_METHOD = POST HTTP_ACCEPT = image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */* PATH_INFO = PATH_TRANSLATED = SCRIPT_NAME = /cgi-bin/test2-cgi QUERY_STRING = REMOTE_HOST = mimaquina.misubdominio.midominio.mipais REMOTE_ADDR = 255.255.255.255 REMOTE_USER = REMOTE_IDENT = unknown AUTH_TYPE = CONTENT_TYPE = application/x-www-form-urlencoded CONTENT_LENGTH = 52 HTTP_USER_AGENT = Mozilla/2.02 (Win95; I) HOME = HTTP_FROM = HTTP_REFERER = http://sestud.uv.es/manual.esp/prueba.htm REFERER_URL =ESTO VIENE POR LA INPUT:CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios Fjate que las palabras aparecen separadas por el signo + y no por espacios como hemos escrito. Si adems hubiramos escrito algn carcter especial, no se vera como tal, sino su valor en hexadecimal precedido del carcter %. Por ejemplo, el cracter & es transferido como %26. Esta conversin se hace para no confundirlo con el separador de campos, que como puedes ver es el mismo smbolo. El signo = despus del nombre del campo, tambin lo pone el visualizador. Todo esto y algunas cosas ms (que habr que ver en la documentacin de referencia) han de tenerse presentes a la hora de realizar programas CGI. Para terminarlo de complicar, no todos los visualizadores utilizan la misma forma de enviar los datos recibidos, por lo que se plantea a menudo la necesidad de decidir para qu visualizador queremos programar nuestro WEB.
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

Los programas de test, como el del ejemplo, son muy tiles cuando se estn diseando formularios, ya que permiten comprobar de forma real su funcionamiento y analizar el registro que envan, cosa imprescindible para poder programar el correspondiente CGI. Intenta hacer uno a tu medida, o simplemente copia ste, instlalo en tu servidor http, (si no tienes acceso, pide a tu administrador de sistema que lo haga), empieza a probar... y buena suerte. Cmo se escriben los formularios ?La base del formulario es el elemento <FORM>, y es el que define una zona de la pgina como formulario. En una pgina puede haber varias zonas definidas como formulario, en cuyo caso es conveniente darles distintos nombres a cada uno. Dentro de este elemento, que es un objeto, se insertan otros elementos, que a su vez son sub-objetos del objeto FORM, que son los que realmente dibujan en pantalla los componentes del formulario. Se ver con detalle el concepto de objeto en las secciones de programacin de esta guia, ya que ahora no lo necesitamos. Hay tres clases de estos sub-objetos: - <INPUT> - Campos de entrada por teclado. - Botones de seleccin. - Casillas de marca. - Botones de proceso. - Botones de inicializacin (reset). - Imgenes sensibles al ratn. - <SELECT> - Listas desplegables de valores. - Listas fijas de valores. - <TEXTAREA> - Ventanas de escritura libre. Este sera el ms elemental de los formularios, con slo un campo y un botn de envo: Analicemos cmo se escribe: <FORM NAME="MI_FORMULARIO" METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="submit" VALUE="Procesar"></FORM> En la primera lnea vemos el elemento de definicin de formulario: <FORM>. Va acompaado de tres atributos: NAME, METHOD y ACTION. NAME, evidentemente, se refiere al nombre que se le asigne al formulario. No es obligatorio, pero si el formulario va a ser utilizado en pginas ASP, PHP, o simplemente en VBScript o JavaScript, se necesitar un nombre, ya que el formulario ser considerado como un objeto. METHOD se refiere al mtodo que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de programacin basadas en la mxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta ms longitud es POST, y ser el que utilicemos en casi todos los ejemplos. Si el formulario solamente se utiliza para llamar a otras pginas, se utiliza el mtodo GET, y si se trata de envio de datos POST. Echale un vistazo a la respuesta del programa test2-cgi de la pgina anterior. Fjate en las variables QUERY_STRING e INPUT. Por la primera llegarn los datos cuando se utilice METHOD=GET y por la segunda cuando es POST el mtodo elegido. ACTION se refiere a la accin que queremos que ejecute el formulario en un servidor http o en local. Con el valor del ejemplo ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" se le est indicando que ejecute un programa llamado test2-cgi que est en el directorio /cgi-bin del servidor http miserver.midominio.mipais cuya respuesta ser similar a la que hemos visto en la pgina de introduccin a los formularios. Adems de enviar datos a un servidor, ACTION tambin puede realizar una accin en local, por ejemplo traer una pgina: Se escribe: <FORM METHOD="POST" ACTION="indice.htm"> igual que un link. ...... </FORM> En este caso el formulario funcionara

Otra cosa que puede hacer ACTION, y que adems tiene la ventaja de que no sera preciso disear un CGI, es enviar un e-mail (correo electrnico) a un usuario o a una lista de usuarios. Los datos enviados por el formulario, tendrn la forma que ya conocemos, pero una vez recibidos por esta va, pueden ser tratados con programas de edicin de texto, y convertidos al formato que se quiera. Se escribe: <FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"> ...... </FORM> Si no quieres complicarte la vida con descodificaciones (depende de lo que se vaya a hacer con los datos recibidos), el navegador puede remitirlos con un formato ms sencillo y ya descodificado. Para ello slo hay que aadir el parmetro ENCTYPE con el valor TEXT/PLAIN. Se escribe as: <FORM METHOD="POST" ACTION="mailto:miusuario@miservidor-e-mail" ENCTYPE="TEXT/PLAIN"> ...... </FORM> Resumiendo: sin poner ningun parmetro al elemento ACTION los datos te llegarn as:
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios y poniendo ENCTYPE="TEXT/PLAIN" as: CAMPO1=Esto es una CAMPO2=demostracion de formularios Al igual que con el elemento <A> es posible hacer que el asunto (subject) del e-mail se reciba con el texto que quieras, pero omitiendo la parte correspondiente al cuerpo (body) del mismo, ya que en este caso el contenido del e-mail son los campos del formulario: <FORM METHOD="POST" ACTION= "mailto:mi-usuario@miservidor-e-mail?&subject=asunto de prueba" ENCTYPE="TEXT/PLAIN"> ...... </FORM> Esto funcionar siempre que en la mquina del cliente haya instalado algun programa que permita enviar correo electrnico, si no es as hay que recurrir a un programa CGI o de otro tipo en el servidor que se encargue de hacerlo. No es buena idea presuponer que todo el mundo tiene un cliente de correo instalado en su mquina. El elemento INPUT INPUT sin ningn atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una lnea de ancho: Se escribe: <FORM> <INPUT> </FORM> <INPUT> admite varios atributos: SIZE define la longitud de la ventana de texto. MAXLENGTH define la mxima longitud de la cadena que se puede escribir dentro de la ventana. NAME define el nombre de la ventana (que en realidad es un campo dentro del registro, que en conjunto, es el formulario). Si escribes: <FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM> Como puedes comprobar, slo se pueden escribir 10 caracteres dentro de la ventana, que tambin es de longitud 10. No es obligatorio que concidan ambos valores, puedes definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o menor.VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vaca como hace por defecto: Se escribe: <FORM> <INPUT VALUE="HOLA"> </FORM> El valor puede ser modificado o barrado por el usuario. READONLY Sirve para que el valor de la ventana, que contiene un valor predeterminado, no pueda ser modificado por el usuario. Se escribe: <FORM> <INPUT VALUE="HOLA" READONLY> </FORM> No funciona en versiones antiguas de los navegadores. TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse. TYPE=PASSWORD para que el valor predeterminado de la ventana est en formato oculto: Se escribe: <FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM> TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma estn en formato oculto: Se escribe: <FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM> Esta opcin se utiliza cuando es necesario enviar un valor fijo al servidor, pero no se desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un formato encriptado, viendo el documento fuente se puede saber el valor de la ventana. TYPE=SUBMIT para generar un botn que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos. Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> </FORM> VALUE puede acompaar a SUBMIT , y en este caso sirve para definir el texto que queremos que tenga el botn en su interior. Si se omite, por defecto el visualizador le da el valor "Submit Query". Existe otro tipo llamado TYPE=BUTTON que genera un botn igual al generado por el tipo submit, pero que no realiza ninguna accin; es simplemente un botn "muerto" en cuanto a acciones directas. Suele utilizarse para asociarle instrucciones en JavaScript o VBScript mediante el evento onClick. Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="BUTTON" VALUE="No hace nada"> </FORM> TYPE=RESET para generar un botn que al ser pulsado inicializa todos los componentes del formulario. Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="RESET" VALUE="Inicializar"> </FORM> VALUE puede acompaar a RESET , y en este caso sirve para definir el texto que queremos que tenga el botn en su interior. Si se omite, por defecto el visualizador le da el valor "Reset".
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

TYPE=FILE Este es un nuevo tipo que slo funciona con Netscape 3.0 o superior, y sirve para enviar un fichero a una mquina remota (hacer FTP), pero no funciona solo, necesita de ciertos acompaantes que hacen su uso un poco ms complicado: Aqu hay que echar mano de un atributo parametrizado de <FORM>: ENCTYPE="multipart/form-data" para generar un botn que permitir buscar un fichero en nuestra mquina, ponerlo en una ventanita de entrada como las ya conocidas (por tanto tanbin se puede escribir directamente el nombre del fichero en lugar de buscarlo) y junto con un botn tipo submit enviar el fichero. Enviar el fichero: Se escribe: <FORM enctype="multipart/form-data" ACTION="ftp://miservidor/" METHOD="POST"> Enviar el fichero: <INPUT NAME="mifichero" TYPE="FILE"> <INPUT TYPE="SUBMIT" VALUE="Enviar fichero"> </FORM> el botn generado aparece con el texto "Browse.." y no sirve de nada aadirle el parmetro VALUE para darle otro nombre, como se puede hacer con el botn de tipo submit. En este ejemplo se hara una conexin al servicio FTP general de la mquina remota, pero se puede hacer a un directorio en particular de un usuario concreto. Slo habra que cambiar la lnea ACTION="ftp://miservidor/" METHOD="POST"> y escribir: ACTION="ftp://miusuario@miservidor/" METHOD="POST"> Otra forma ms directa de hacer un FTP en las dos direcciones, es desde la ventana "Location" del visualizador. La sintaxis de los parmetros de ACTION son vlidos en esa ventana. Por supuesto, todo esto si no tienes cuenta y permiso de escritura en la mquina remota, no sirve para nada... Como ya se ha dicho antes, el atributo ACTION es capaz de enviar el contenido del formulario por correo electrnico, pero no slo es capaz de enviar el formulario: tambin puede adjuntar al e-mail un fichero cualquiera. Lo nico que hay que hacer es aadirle un instruccin como la que acabamos de ver para el FTP. As: <FORM enctype="multipart/formdata" ACTION="mailto:mi-usuario@miservidor-e-mail/" METHOD="POST"> Adjuntar el fichero: <INPUT NAME="mifichero" TYPE="FILE"> <INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero"> </FORM> TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al ratn. Lo que el formulario enva al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parmetros .x=n .y=n donde n son los nmeros de las coordenas x y del punto en el que estaba el ratn en el momento del envo. Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sera un ejemplo de respuesta: imagen.x=99&imagen.y=15 Prueba a pulsar en cualquier parte de esta imagen:

Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif"> </FORM> Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opcin Clase A Clase B Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B"> </form> En este ejemplo, los botones permiten seleccionar la clase A, la clase B o ninguna de las dos. Si se desea que por defecto un valor est seleccionado, por ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor: ... VALUE="B" CHECKED></form> TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opcin Clase A Clase B Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> Clase A <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form> En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase B, ninguna, o las dos. Si se desea que por defecto un valor est seleccionado, por ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor: ... VALUE="B" CHECKED></form> El elemento SELECTSELECT sin ningn atributo define por defecto una lista desplegable de toda la pantalla de alto y una columna de ancho: Se escribe: <FORM> <SELECT> </SELECT> </FORM> Como evidentemente esto no es muy prctico, hay que parametrizar el elemento. En primer lugar se le da nombre, ya que ste es un campo ms del formulario, la diferencia es que no hay que escribir en l sino escoger un valor de los que nos muestre al desplegarlo, se usar el atributo NAME, y para entrar valores en la lista se usa el atributo OPTION. Valor 1Valor 2Valor 3 Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1"> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 </SELECT> </FORM> Se deben tener en cuenta varias cosas respecto a SELECT: La longitud de la ventana de seleccin se autoajusta al valor ms largo de la lista. La ventana de seleccin, por defecto, muestra una lnea, si se quieren mostrar ms se utilizar el atributo SIZE. Se debe procurar que los contenidos de los campos sean lo ms cortos posibles; una excesiva longitud implica mayor trfico por la red, pero se deben construir las listas de forma clara, y que resulten de fcil lectura al usuario, lo que
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

puede aumentar la longitud de los valores. Para enviar un valor diferente del que aparece en la lista, se utiliza el parmetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente lista: Valor 1Valor 2Valor 3Valor 4Este es el Valor 5Valor 6Valor 7 Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1" SIZE=3> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 <OPTION>Valor 4 <OPTION VALUE="Valor 5">Este es el Valor 5 <OPTION>Valor 6 <OPTION>Valor 7 </SELECT> </FORM> Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se enva al servidor es "Valor 5". Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no hay ninguno seleccionado, por defecto el visualizador enviar el primer valor de la lista. Se puede hacer que haya un valor preseleccionado aadiendo el parmetro SELECTED al atributo OPTION, y si se quiere permitir ms de una seleccin, se pondr el atributo MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows. Valor 1Valor 2Valor 3Valor 4Valor 5Valor 6Valor 7 Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1" MULTIPLE SIZE=3><OPTION>Valor 1 <OPTION SELECTED>Valor 2 <OPTION>Valor 3 <OPTION>Valor 4 <OPTION>Valor 5 <OPTION>Valor 6 <OPTION>Valor 7 </SELECT> </FORM> Puede ocurrir que interese agrupar los valores de la lista desplegable, a fin de que resulte ms fcil encontrar la opcin adecuada, sobre todo si la lista es larga. Para ello se puede utilizar el parmetro optgroup. Por ejemplo: Ninguno Rolls Royce Ferrari Mercedes Renault Peugeot Seat Y se escribe: <select name="coches"> <option selected value="0">Ninguno <optgroup label="Coches de lujo"> <option value="1">Rolls Royce <option value="2">Ferrari <option value="3">Mercedes </optgroup> <optgroup label="Coches normales"> <option value="4">Renault <option value="5">Peugeot <option value="6">Seat </optgroup> </select> El elemento TEXTAREA Este elemento, como su nombre indica, permite definir un rea de texto en la pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya parametrizada en cuanto a dimensiones, con los atributos ROWS (lneas) y COLS (COLUMNAS). No tiene otros atributos o posibles variantes. Por supuesto, para que sea operativo, deber ir acompaado de los componentes necesarios para enviar e inicializar. Se escribe: <FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <TEXTAREA NAME="texto1" ROWS=5 COLS=40 > </TEXTAREA> </FORM> Aunque no es habitual, dentro de un rea de texto puede haber un contenido por defecto (que puede ser borrado o modificado por el usuario). Para ello simplemente se escribir el texto entre <TEXTAREA> y </TEXTAREA>. As: <TEXTAREA NAME="texto1" ROWS=5 COLS=40> Contenido del area de texto </TEXTAREA> El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla de conversin hexadecimal que utilizan la mayora de visualizadores. Recuerda que las palabras en destino aparecen separadas por el signo +, y las letras acentuadas y otros caracteres, por valores hexadecimales precedidos del smbolo % Se puede proceder a la descodificacin en el programa CGI que recibe los datos, o bien definir macros en programas auxiliares que sern ejecutados despus. Estilos en los formulariosEn las ltimas versiones de los dos navegadores ms utilizados, pueden aplicarse cambios de estilo a los formularios, lo que permite una presentacin ms sofisticada. ATENCION: Hay que tener en cuenta que los estilos no estan estandarizados, y hay cosas que se ven bien en unos navegadores y no se ven en otros, y hay solo unos pocos efectos que se vean en todos ellos. En los elementos de formulario pueden redefinirse casi todos los parmetros: colores de fondo, tipo y anchura de bordes, color y tipo de letra del texto, altura y anchura del elemento, alineacin del texto dentro del elemento, etc. Por ejemplo:

Se escribe as: <FORM METHOD="GET" ACTION=""> <INPUT TYPE="text" STYLE="background:yellow;color:red" NAME="campo1"> <INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue" readonly NAME="campo2" VALUE="Solo lectura"> <INPUT TYPE="button" STYLE="background:transparent;color:red" VALUE="Procesar"> </FORM> Problemas de privacidad en los formulariosEn las ltimas versiones del navegador Internet Explorer de Microsoft, ha aparecido una nueva prestacin consistente en memorizar los datos introducidos en
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

kiubix.com

cualquier formulario de uso habitual. En efecto, muchas veces se utilizan formularios para tareas repetitivas, en las que casi siempre hay que introducir los mismos datos. Esto nos puede ahorrar tener que escribir cada vez lo mismo, y Microsoft pens que sera buena idea facilitar la labor del usuario haciendo que el navegador guarde en una lista desplegable todos los datos que se van escribiendo en cada transaccin, de manera que cuando se accede a la pgina, cada campo de texto (<INPUT TYPE="text">) queda convertido en una lista desplegable (<SELECT>) cuyo contenido son los datos que se han introducido en ese mismo campo en ocasiones anteriores. Visto as suena incluso interesante.... a condicin de que el usuario sea siempre el mismo, claro. Porque, qu ocurre si el formulario est incluido en una pgina que es utilizada por numerosas personas en una sala comn con mquinas pblicas, como una sala de usuarios o un cibercaf? Pues que si el siguiente usuario se conecta a la misma pgina, puede ver los datos que escribi su antecesor en esa mquina. Para evitarlo, existe un parmetro, poco conocido en general, que debe incluirse en la definicin del formulario, y que no tiene ningn efecto en los navegadores que no tienen la costumbre de ser tan indiscretos. As: <FORM NAME="MI_FORMULARIO" METHOD="POST" AUTOMPLETE="OFF"> ... ... </FORM>

http://www.kiubix.com/portal

Powered by Joomla!

Generated: 22 August, 2011, 22:30