You are on page 1of 35

kiubix.

com

Html Parte 1
Contributed by Friday, 04 April 2008

Propósito de este documento Estas páginas 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 informáticos. 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 explicación sobre el ISO 8859-1, pensé: "... bueno, esto en realidad no necesitan saberlo... pero, todo sea por el rigor técnico...". 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 sólo conocía "eso que dicen por la tele de las autopistas de la información...". El resultado, como era de esperar, fue algo peor que desastroso. De las cinco primeras líneas, sólo comprendió una docena de palabras, y de las restantes, sus preguntas daban pie a pensar que era algo más que un breve cursillo lo que haría falta para que saliese medianamente enterado. Y sin embargo, yo tengo claro que el HTML no es tan difícil. Pero, ¿cuál es el objetivo real? Simple: saber lo necesario para poder hacer una página 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 más que sea realmente imprescindible. Y esto es poco más o menos lo que saben la mayoría de usuarios. Había que olvidar el "rigor técnico", 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 serán demandados por el propio alumno a medida que avanza. Esto no es un manual de referencia. Ni siquiera es un manual. No hay referencias técnicas ni siglas, ni lenguaje técnico... 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 después de leer esto, ya puedas trabajar sin ayuda. Cómo utilizar éste documento No te aconsejo que te "empolles" toda la guía. Solamente hojéala. Ahora se trata de que sepas lo que se puede hacer, no cómo se puede hacer. Cuando te hayas dado un ligero baño de sabiduría HTML, piensa lo que quieres hacer. El diseño inicial es importante, comienza a editar tu primera página. No temas cometer errores, no se puede romper nada. Lo peor que puede pasar es que no funcione. Cuando ya tengas algo escrito, pruébalo. Si algo no funciona, busca la sintaxis correcta, ves complicando el documento poco a poco, "tirando de guía" cuando te atasques. Copia algunos ejemplos y modifícalos. Compara su funcionamiento antes y después. Propósito de este documento (varios años después)Más reflexiones Como ya se ha dicho, estas páginas fueron creadas, allá por el ya lejano 1996 (en informática esto es casi como hablar del jurásico), como material para un curso, es decir, sin ánimo de continuidad y para un grupo de alumnos de características muy definidas. Una vez cumplido su destino inicial, nada parecía 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 dirección del servidor donde se había quedado una copia. Hoy, años después, se han servido más de un millón de copias y he tenido que responder a miles de e-mails con las más 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 línea 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 críticos y muchos los satisfechos, y estos últimos son los que constantemente han demandado más contenidos; gracias a ellos la guía 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 ocasión de formar parte de algunos tribunales de selección 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 añadir 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, críticas 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 revisión constante de la guía requiere de un tiempo del que no dispongo, y dado que profesionalmente me dedico a la programación de gestión, aplazo, que no descarto, la inclusión de temas tan solicitados como el Java Script, Visual Basic Script, Perl, etc., etc., y por el momento, me limitaré a incluir pequeños fragmentos de aplicaciones de gestión, aquellos que considere más interesantes a nivel general... por la sencilla razón de que los tendré ya hechos. Es posible que queden un poco escasos de explicaciones básicas, pero tal vez algun dia.... Pero, ¡si esto está anticuado! En efecto, en este documento encontrarás 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 estándar: el XHTML, nacido después del auge que han tomado las hojas de estilo en cascada (CSS). Hay quien sostiene que se deben escribir las páginas con la última tecnología disponible en el mercado y respetando escrupulosamente los estándares... Me parece correcto, siempre que se pueda disponer de esa tecnología 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 página 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 rincón, que trabajando con una máquina 486 encontrada en la chatarra, y un editor MSDOS consiguió crear una página para que la gente de su pueblo pudiera exponer sus muchas necesidades al mundo, logrando que una comisión de UNICEF apareciese por allí. Esta página, y otras muchas creadas o mantenidas en lugares donde la precariedad no tiene límites, no cumplen los requisitos que marca la W3C, ni estan escritas en XHTML, ni tienen hoja de estilo. Ni siquiera tienen más de 16 colores. Pero sirven para mucho más que la mejor página diseñada con el más lujoso de los paquetes de desarrollo, con cuyo solo importe esa pequeña escuela funcionará varios años. El HTML, el viejo, entrañable y fácil HTML, se ha convertido en algo más que un lenguaje de programación; no es como tantos otros de los que existen en informática. Éste tiene algo de especial, casi de mágico. El enorme calado social que ha conseguido internet en el mundo, probablemente no se habría logrado si para escribir una página fuera necesario ser un profesional informático. Es indudable que debe evolucionar de forma acorde a las nuevas necesidades, pero creo necesario separar la programación profesional de la vieja herramienta que ha permitido tantas cosas, cosas que no se pueden medir con parámetros 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 información (por ejemplo bases de datos) que pueden estar en tu propia máquina o en máquinas remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y sonidos seamos capaces de imaginar. Por supuesto, la estética 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 tamaños y fuentes, tablas, párrafos tabulados, sangrías, incluso texto y fondo de página de colores, y muchos más. Posiblemente te dirás 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 hacía en los antiguos procesadores de texto para DOS;) con complicados y poderosos servidores de información 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 más práctico de lo que parece. Evidentemente, si lo que quieres es montar un servidor de información con miles de páginas, links a varias bases de datos tanto locales como remotas, posibilidad de búsquedas indexadas, gráficos animados, sonido, páginas interactivas, etc., etc., necesitarás saber algo más 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 colección de sellos con una imagen escaneada de cada uno y un comentario sobre su tema, y organizado por años, valores, o lo que se te ocurra? - ¿Idem de la colección 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 próximo trabajo lleno de diagramas, gráficos, tablas, colores... en un disquete? - ¿Organizar para siempre y poner al alcance de todos ese catálogo o listín siempre perdido en la oficina? - ¿Preparar los temas de legislación, 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 estés usando ahora... y haberte leído esto. ¿Cómo funciona esto? Básicamente, 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 estás utilizando para ver esto. Todas las codificaciones de efectos en el texto que forman el lenguaje HTML no son más que instrucciones para el visualizador. Partiendo de esto, se entiende el porqué no se ve lo mismo con todos los visualizadores. Depende de cómo estén diseñados y para qué versión de lenguaje estén diseñados. Actualmente existen multitud de ellos, aunque los más 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 más respeta los estándares, cosa muy de agradecer en estos tiempos. Todo lo que se dice en esta guía 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, además de ver documentos HTML se puede recibir y enviar correo electrónico, recibir y enviar NEWS (noticias), visitar los servidores GOPHER (servidores de ficheros ya desaparecidos), y acceder a servidores FTP (más servidores de ficheros) tanto en entrada como en salida, todo ello con el mismo programa. También, 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: sólo tienes que crear un documento con tu editor preferido (como documento entenderemos el conjunto de ficheros, tanto de texto como de imágenes, que forman las distintas páginas), guardarlo con la extensión .htm o .html, abrirlo con tu navegador preferido, y ya tienes un hipertexto en marcha. Las páginas 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 kilómetros en otro ordenador llamado servidor web o servidor http, que es el protocolo utilizado. Si es así, entonces te estarás 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 página escrita en HTML no es más que texto normal, escrito con cualquier editor, y al que, cuando se le quiere dar algun aspecto especial, como por ejemplo el tamaño de la letra, habrá que acompañar de ciertos códigos para indicar el efecto deseado. A estos códigos se les llama elementos del lenguaje. Pero no hay que olvidar que al fin y al cabo no hablamos más que de texto. Simple y llano texto. Por lo tanto, para montajes sencillos, en los que no se requiera ningún efecto especial, nos podemos olvidar hasta del mismísimo HTML. El visualizador nos presentará perfectamente cualquier página ".txt" generada por cualquier editor, y los links entre documentos sólo requieren un simple y sencillo comando. Y aún así podremos conseguir el tipo y tamaño de letra y colores de texto y fondo que queramos, simplemente configurando el visualizador. Como ya habrás deducido, lo primero es crear las páginas en tu máquina, es decir, en local, y eso ya te permite navegar por tu documento, simplemente abriendo las páginas 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 páginas a ese servidor. Para ello puedes utilizar la página que habitualmente proporcionan los ISP para "subir" tus ficheros desde tu máquina, o bien utilizar algun programa de FTP, configurándolo según las instrucciones del ISP. Suele ser más sencillo utilizar las páginas 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 mayoría de ellos) los nombres no pueden tener espacios en blanco, y además se tienen en cuenta las mayúsculas. No es lo mismo Index.html que index.html.
http://www.kiubix.com/portal Powered by Joomla! Generated: 22 August, 2011, 22:30

los navegadores funcionan igual que cualquier otro programa de Windows. se escribirá: <H1> Texto de prueba </H1>. como el XHTML. resulta más claro si se escribieron en mayúsculas.es en mayúsculas. Por ejemplo.miservidor. es necesario que el usuario escriba el nombre de la primera página del documento que desea visitar. solamente se precisa el nombre del servidor: http://mi_servidor/ Si estás diseñando tu documento y solamente quieres ver tu trabajo en local. Por ejemplo. Elementos llenosSe forman escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción pero con una barra inclinada inmediatamente antes de la misma. cedillas. pero no es necesario poner la instrucción repetida al final con una barra. pero CUIDADO. se escribirá: <H1><I>Texto de prueba </I></H1>.com/portal Powered by Joomla! Generated: 22 August. pero si en el futuro hay que convertir la página a otro estándar.com Otra cosa importante es que nunca utilices palabras con acentos o caracteres especiales. para dar nombre a los ficheros. y con la opción "Archivo/Abrir" de tu navegador preferido puedes ver cualquier fichero escrito en HTML. etc.htm Si utilizas como nombre de la primera página el aceptado por el servidor. eso es un nombre de máquina y sería interpretado como OTRA máquina. teniendo cuidado de poner los cierres en el lugar adecuado.es/mifichero.miservidor. a las instrucciones que forman el lenguaje HTML les llamaremos elementos. no se admitirán las mayúsculas.es.es/mifichero. y por tanto no es necesario indicar su fin. antes de llegar al cliente. Estructura de una página HTML Las páginas HTML están estructuradas en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo). la ruta será de este estilo: file:///C:/mi_web_local/mi_pagina. Esto se debe a que estos elementos no producen un efecto sobre el texto. Elementos vacíos Los elementos vacíos se escriben como los llenos. y se llaman atributos del elemento.htm"> Link de prueba </A>.htm". A la hora de revisar el código escrito.miservidor. hazlo como más cómodo te resulte. Casi todos los servidores basados en UNIX o LINUX consideran como primera página cualquier fichero llamado index. es el nombre por defecto de la primera página de tu documento. Por ejemplo. Si no existe este archivo. tendrán que pasar por muchos nodos enrutadores que generalmente son máquinas UNIX. y este sería el resultado: Texto de pruebaSi olvidas poner </H1> todo el resto de la página tendrá el mismo tamaño grande. y eso se agradece a la hora de hacer correcciones.miservidor. Otra cosa que hay que tener en cuenta. Es como pasarle parámetros a la instrucción. el elemento <H1> combinado con <I> que sirve para generar texto en itálica. si no utilizas el nombre incial que por defecto admita tu servidor. y este sería el resultado: Texto de prueba Los elementos. Puede ser preferible la primera opción ya que aporta claridad al documento fuente. 2011. Funciona igual <P> que <p>. Los elementos pueden escribirse tanto en mayúsculas como en minúsculas. Los elementos pueden anidarse unos con otros. la dirección se tiene que escribir completa: http://mi_servidor/mi_usuario/mi_pagina_inicial.miservidor.htm que está en el servidor www. el elemento <A> que sirve para hacer un link (enlace) con otro documento o con otra página del actual. 22:30 . Generalmente se utilizan para separar bloques de texto. Por ejemplo. como eñes. Ejemplo de páginaSi escribes: <!Tipo de documento> <HTML> <HEAD> <TITLE> Documento de prueba </TITLE> </HEAD> <!-.htm Introducción al HTMLElementos en un documento HTMLEn esta guía. el elemento <HR> que sirve para dibujar una linea horizontal en la pantalla. los puedes escribir tanto en mayúsculas como en minúsculas.es/mifichero. o "ETIQUETAS". Otros autores también las denominan "TAGS". en HTML. Por ejemplo.html. En ese caso. solamente habría que escribir hasta el directorio: http://mi_servidor/mi_usuario/ Y si tienes la suerte de disponer de tu propio servidor.kiubix. Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.kiubix. Si no piensas migrar a otras tecnologías. o el que establezca el administrador del sistema.Esto es un comentario--> <BODY> <H1> Esto es una "demo" de documento HTML </H1> Esto es el más sencillo de los http://www. el valor de algunos atributos hay que escribirlos EXACTAMENTE como deban ser. Si el servidor utiliza sistemas Windows esto carece de importancia. La notación de los elementos consiste en los símbolos < y > que encierran dentro una instrucción. el elemento H1 que sirve para dar el máximo tamaño al texto. El texto al que afecta este elemento es Link de prueba y realiza un link con el fichero mifichero. se escribirá: <A href="http://www. pero hay que tener en cuenta que tus páginas. En el ejemplo anterior no funcionaría el link si escribiéramos www. se escribirá: <HR> Y este sería el resultado: Elementos con argumentoAlgunos elementos se escriben con argumento. Los elementos pueden ser llenos o vacíos. Empiezan y terminan en el mismo punto.htm" mce_href="http://www.

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

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

marginheight="pixels". El valor por defecto del texto es 3. sin importar el que por defecto tenga establecido el visualizador. Otra cosa que puede controlarse desde BODY es el color que tomarán los links que pongamos en la página..Tamaños y tipos de letra en HTMLPara definir distintos tamaños de letra. cada impresora. Netscape utiliza solamente dos instrucciones que afectan simultáneamente a los márgenes superior e inferior e izquierdo y derecho respectivamente: marginwidth="pixels". Otro problema que suele presentarse con los márgenes es que a la hora de imprimir una página. ya que después del cierre automáticamente el visualizador inserta un salto de párrafo. Por ejemplo. por defecto. el Internet Explores. 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. los navegadores. para los márgenes superior e inferior. para el margen superior rightmargin="pixels". para el margen derecho bottommargin="pixels".kiubix.. Lo malo es que cada navegador los interpreta de una manera. Tal vez algun dia todo esto funcione bien. y verdes después de haber sido utilizados. Por ejemplo. Este tipo de elemento se suele utilizar para escribir encabezamientos. 2011. para los márgenes izquierdo y derecho. Este elemento admite un parámetro de alineación. Por ejemplo estos dos valores dan el mismo resultado: <FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT> ABcde ABcde Con la versión 3. para el margen inferior Donde pixels es el número de pixels que se quiere mover cada margen hacia el interior de la página. azul-verde cuando son activados. por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base. como cabría esperar. en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un número que puede variar entre 1 y 6. presentan el texto de una página ajustando los contenidos a la esquina superior izquierda de la pantalla.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. junto con el navegador. Así.com/portal Powered by Joomla! Generated: 22 August. para hacer que los links sean amarillos antes de ser visitados. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto. Estos parámetros también son accesibles desde instrucciones de estilo. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente. si escribes: <H3 align=center> Texto en H3 </H3> Texto en H3Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > con el atributo VALOR. los tamaños también pueden indicarse de forma relativa. 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 tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. que es un número entre 1 y 7. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio. 22:30 . se las ingeniarán para hacer justo lo contrario de lo que se desea. El elemento BODY tiene parámetros que permiten modificar los márgenes por defecto. siendo 1 el tamaño mayor. En cambio. Se trata del atributo FACE.kiubix. se escribe: <BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF"> Veamos a hora los elementos más habituales del lenguaje que deben escribirse en el BODY. Se escribirán 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 sería 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. utiliza uno para cada cual: leftmargin="pixels". El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. para el margen izquierdo topmargin="pixels". 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.com Se escibirá asi: <BODY> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </BODY> Como ya habrás visto.

no existe. definir tipos raros. 2011. este efecto es anidable con el de tamaño y todos los demás. Si a pesar de todo. que probablemente. 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.com/portal Powered by Joomla! Generated: 22 August. y si tampoco lo tiene el próximo. donde "xxx" es el nombre en inglés del color que se desea. Texto en color Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx". Así: <FONT FACE="raro. este atributo es compatible con todos los demás ya conocidos. Por supuesto.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. pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente. no llegarán a verse nunca. No es interesante por tanto. como color y tamaño. Por ejemplo. por supuesto. se ha declarado como primer tipo de letra el llamado "raro" que. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta. 256 colores. 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 combinación de colores y tamaños: 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.kiubix. etc. se define un tipo del que se tienen dudas de que exista en el cliente. 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. ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. por lo menos. se pueden indicar otros tipos alternativos. utilizará el siguiente. 22:30 . y el navegador pasa a utilizar el siguiente. "courier". que sí es habitual. de forma que el navegador si no tiene el primer tipo.

Las distintas definiciones de los bloques. es más cómodo escribir el nombre aunque sea en inglés. no un indicador de bloque. Comenzaremos con el elemento <Hx> </Hx> donde x es un número que puede variar entre 1 y 6. es conveniente acostumbrarse a ponerlo siempre. Así. ALIGN=RIGHT .com/portal Powered by Joomla! Generated: 22 August. hay una línea en blanco entre los dos bloques. está compuesta de distintos bloques. Se escribirán 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 sería 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. 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. 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 sería 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 alineación: ALIGN=LEFT (por defecto). en realidad.com Los colores también se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores básicos. habrá que elegir los elementos más convenientes para que nuestros contenidos aparezcan finalmente con la alineación debida. como cabría esperar. si escribes: <H3 align=center> Texto en H3 </H3> Texto en H3Para definir los párrafos se utiliza el elemento lleno <P> </P> (por Paragraph). 22:30 <P> Texto 2 . pero cuando se trata de definir un color que "no tiene nombre" no hay más remedio que usar la codificación hexadecimal. Aunque a menudo no se utiliza el cierre </P>. como los del ejemplo de arriba. ya que el texto continuará normalmente hasta que encuentre otro párrafo <P>. que pueden ser texto. el visualizador inserta un salto de párrafo.kiubix. 2011. siendo 1 el tamaño mayor. Es decir. Dependiendo de la composición que se quiera hacer. etc. ya que después del cierre.kiubix. automáticamente. gráficos o las dos cosas. que el elemento <BR> es un separador. Por ejemplo. Este tipo de elemento suele emplearse para escribir encabezamientos. el tamaño apropiado. Si no se quiere dejar esa línea vacía entre los dos párrafos puede utilizarse el elemento <BR> (por BReak).Si se analiza una página cualquiera veremos que. Es algo así como un mosaico en el que cada parte de la composición final tiene sus propios contenidos. Separadores. En la nueva definición del XHTML el cierre es obligatorio. Este elemento admite un parámetro de alineación. ALIGN=CENTER y ALIGN=JUSTIFY Se escribirán 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 sería 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. 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 sería 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.

El primero define la longitud de la línea y el segundo su anchura.) Otro elemento que es casi igual que <DIV> pero que no admite atributos de alineado. tamaño. Como por ejemplo http://www. 22:30 . 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. Por supuesto. de forma directa no sirve para nada. Así: <HR NOSHADE>El resultado es: El elemento <HR> admite dos parámetros: WIDTH y SIZE. dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios. pero no los enmarcados. pero no funciona en todos los navegadores. texto. etc. etc. Textos preformateadosPosiblemente ya te habrás dado cuenta de que. no tiene ninguna utilidad práctica. debe haber dos cierres </BLOCKQUOTE> al final Otro separador de bloques de texto es el elemento vacío <HR> (por Horizontal Rule). imágenes. salvo por las alineaciones. aunque no funciona en todos los navegadores. color. Este sería 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.kiubix. aparecido en la versión 6 de Netscape. algunas cosas no están como tú las pusiste. y no produce separación de párrafo ni de línea es <SPAN>. RIGHT y CENTER.com/portal Powered by Joomla! Generated: 22 August. Así: <HR WIDTH=80% SIZE=5> El resultado será: Además se puede indicar su posición respecto a los márgenes de la ventana con los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Este sería el resultado: Al igual que al texto. es porque no tienes una versión de navegador adecuada. Recuerda que si no tienes la versión adecuada de navegador. etc. en los siguientes ejemplos sólo verás el texto. y por tanto. a la hora de ver lo hecho con el visualizador.com texto3 texto3 texto3 texto3 texto3 texto3 </DIV> Fíjate en que aquí sí se utiliza el cierre </DIV>. si escribes <HR WIDTH=400 SIZE=5> El resultado será: El valor del atributo WIDTH se puede expresar. 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 sería 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 Fíjate que en este ejemplo hay un anidamiento. cuando escribes un texto con tu editor. o en tantos por ciento referidos al ancho total de la ventana. No es obligado usar los dos a la vez Por ejemplo. También se puede cambiar su apariencia añadiéndole el atributo <NOSHADE>. 2011. En realidad. se le puede incluir un parámetro de color. como en el ejemplo anterior. que ya se hacen con <P>.. y opcionalmente ponerle una etiqueta. Si se escribe: <FIELDSET> Esto es una prueba de enmarcado </FIELDSET> Se obtiene: Esto es una prueba de enmarcado Este elemento tiene un parámetro 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 parámetro <LEGEND> tiene tres atributos que indican la posición de la etiqueta: LEFT (por defecto). y ha sido creado también para aplicar las hojas de estilo. 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.. situación.kiubix. alineación. en número de puntos (píxels). y en general solamente se utiliza para definir bloques especiales definidos con instrucciones de estilo (bordes. Se trata del elemento: <FIELDSET>. que permite rodear un texto con un marco.. 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 párrafos adentrados (como si estuviesen tabulados).

si escribes: texto texto&nbsp. una imagen o cualquier otra cosa.texto textoSe ve así: texto texto texto texto Con Netscape 3.kiubix. este elemento puede ir acompañado de los atributos TYPE y SIZE y se puede utilizar en cualquier zona de una página. los textos preformateados se ven con tipo de letra "curier". pueden estar centradas respecto a los márgenes de la ventana. Para ambos tipos el tamaño del espacio se da en puntos (pixels) con el atributo SIZE. es necesario indicarle a <SPACER> donde termina el párrafo para que ejecute la siguiente instrucción del mismo tipo. funciona como un avance de carro. elimina varios espacios en blanco y los convierte en uno solo.&nbsp. Por ejemplo si utilizas el elemento <H>. Se escribe: y como alias se utiliza: &nbsp. además de a texto sólo. pero hay que darla codificada. Fíjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. El valor por defecto es 0. TYPE=vertical deja espacio en blanco por arriba de la primera linea. 22:30 . Al texto que va dentro del elemento PRE se le pueden aplicar todos los elementos que se quiera. se rompería el preformateo pero no ocurrirá lo mismo con <FONT SIZE>. Quedan algunos otros elementos que modifican el aspecto del texto. por defecto. Este elemento admite el parámetro WIDTH=x donde x define la máxima longitud de línea visualizada. Por defecto.&nbsp. no todas las impresoras son capaces de interpretarlo correctamente.0 se ha implementado un nuevo elemento que permite definir espacios en blanco sin utilizar el elemento <PRE> Se trata del elemento <SPACER>. se puede recurrir a una instrucción especial que le indica esto al navegador.com/portal Powered by Joomla! Generated: 22 August. es decir de paso fijo y los no preformateados en "Times New Roman". 15 16 17 18 19 20 21 Dentro de un bloque preformateado también se pueden poner links a otros documentos y codificación para caracteres especiales (se verá más adelante lo que es eso). y otros no funcionan con el visualizador de Netscape. 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 sería el resultado: 1 2 3 4 5 6 7 Esto es una demostracion de 8 9 10 11 12 13 14 texto preformateado.&nbsp.&nbsp. se puede aplicar a una tabla. hacen la misma cosa. Estos tipos son configurables en el visualizador. Para conseguir columnas sin utilizar este elemento la única solución es emplear tablas: <TABLE> Otros efectos en el textoUna o varias líneas de texto. Este elemento no funciona con el navegador de Microsoft. Texto en negrita: <B>Texto en negrita</B>Texto realzado: <STRONG>Texto realzado</STRONG>Texto en itálica: <I>Texto en itálica</I>Texto con énfasis: <EM>Texto con énfasis</EM>Texto ejemplo de código: <CODE>Texto ejemplo de código</CODE>Texto teletipo: http://www. 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. Si lo que deseas es separar una palabra de otra más de un espacio. No funciona con Netscape. Esto afecta sólo al texto que hay entre <CENTER> y </CENTER>. o intentar encolumnar los datos de una pequeña tabla: ¡acaba todo junto y en la misma línea! Este efecto se puede eliminar con el elemento lleno <PRE> . cuando se imprime la página. El navegador. con TYPE=horizontal deja espacio en blanco a la izquierda de la primera linea. y aunque en pantalla cumple su objetivo. En efecto. siempre que sean elementos que no alteren la posición del texto. por lo que se omiten aquí. pero no a todo el párrafo. pero donde más se aprecia su efecto es en las columnas. Algunos. Es el valor por defecto.kiubix. 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.com poner dos o tres espacios en blanco entre palabras. 2011. aparentemente. Por ejemplo.

directorios <DIR>. TYPE=I para numeración romana en mayúsculas y TYPE=i para numeración romana en minúsculas.com <TT>Texto teletipo</TT>Texto subrayado: Texto subrayadoTexto tachado: <STRIKE>Texto tachado</STRIKE>Texto de dirección: <ADDRESS>Texto de dirección</ADDRESS>Texto intermitente <BLINK>Texto intermitente</BLINK>Texto superíndiceTexto normal <SUP>Texto Superíndice</SUP>Texto subíndiceTexto nomal <SUB>Texto Subíndice</SUB>Texto grande <BIG>Texto grande</BIG>Texto pequeño <SMALL>Texto pequeño</SMALL>En los navegadores de última generación se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratón por encima (sin pulsar).Primera linea .Primera linea .Segunda linea . Por ejemplo.segunda linea Se escribe: <UL TYPE=CIRCLE> <LI>Primera linea <LI>Segunda linea </UL> También puede usarse el valor SQUARE.Segunda linea Se escribe: <OL> <LI>Primera linea <LI>Segunda linea </OL> Fíjate en que los elementos <LI> no necesitan cierre. pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros.kiubix.Primera linea . 22:30 .kiubix.com/portal Powered by Joomla! Generated: 22 August.Tercera linea . desordenados <UL> (no numerados). Listas y menúsHay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados.Primera linea . 2011. Veamos cómo es la sintaxis básica y apariencia de estos elementos.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 numeración romana en mayúsculas: . a partir de los cuales. Esa es la apariencia por defecto.Tercera linea .segunda linea Se escribe: <UL> <LI>Primera linea <LI>Segunda linea </UL> En este caso los números han sido sustituidos por unos puntos gruesos. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para números. Así: .Primera linea . que es más ligero. se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). no ordenados por algun criterio).Primera linea . si escribes: <ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM> Al pasar el ratón sobre la palabra HTML. Terminan cuando aparece otro igual o se cierra la lista. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. TYPE=A para letras mayúsculas.Primera linea .Segunda linea http://www.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 minúsculas: . TYPE=a para letras minúsculas.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 numeración romana en minúsculas: . Esto es una lista desordenada ( no numerada): .Tercera linea .Primera linea . pero sin cambiar de página ni abrir ninguna ventana nueva.segunda linea Se escribe: <UL TYPE=SQUARE> <LI>Primera linea <LI>Segunda linea </UL> Las listas ordenadas no sólo se pueden ordenar con números. Con el valor CIRCLE se verá: .Segunda linea . los dos trabajan de la misma forma que el parámetro title que se aplica al elemento <A> y se diferencian de éste solamente por el tipo de subrayado. Puede ser conveniente poner el cierre </LI> si se van a aplicar instrucciones de estilo. Esto es una lista ordenada con letras mayúsculas: . menu <MENU> y listados de definición <DL>.Segunda linea . se desvela su significado: HTML De funcionamiento similar al anterior también 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. hasta conseguir prácticamente cualquier presentación deseada: Esto es una lista ordenada (numerada): . Como puedes ver.

2 Linea de texto 3. con Netscape no se aprecia diferencia. Comienzo una posición a la derecha .Linea de texto 3 .2.2.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.2. 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.Primera linea . Esto es un menú: .kiubix.2.2. Esto es un directorio: .Linea de texto 1 . Ejemplos de listas y menúsDesordenadasDesordenada simple con marcas .com .Linea de texto 2 . 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.2.Tercera linea .Primera linea . Comienzo dos posiciones a la derecha .com/portal Powered by Joomla! Generated: 22 August. y como tipo <DL>.Segunda linea Se escribe: <MENU> <LI>Primera linea <LI>Segunda linea </MENU> La diferencia entre un menú y una lista desordenada.2 <DL> <DT>Linea de texto 3.kiubix.2.Linea de texto 1 .2.1 .2. 2011. alterando por completo su apariencia.2.Tercera linea . es que las líneas en la lista desordenada comienzan en el margen izquierdo y las del menú unas posiciones más a la derecha (aunque eso depende del visualizador.Cuarta linea Se escribe: <OL TYPE=A START=5> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL> El número que pones en el atributo START indica en que número o letra comenzará la lista.1 Linea de texto 3.2 .Linea de texto 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.2 .2. Se puede conseguir con el atributo START combinado con TYPE.Linea de texto 2 .2.Linea de texto 1 . Esto es una lista de definicion: Primera linea Segunda linea Se escribe: <DL> <DT>Primera linea <DD>Segunda linea </DL> Fíjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>.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.2 <DL> <DT>Linea de texto 3.1 http://www.Linea de texto 3.2.Linea de texto 3.Segunda linea .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.Linea de texto 1 .2.1 <DT>Linea de texto 3.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 número 1 (por ejemplo si es una lista que continua en otra página).Segunda linea Se escribe: <DIR> <LI>Primera linea <LI>Segunda linea </DIR> Ocurre lo mismo que con el menú.2 </DL> </DL> </DL> <DT>Linea 4 de texto </DL> Desordenada con 4 niveles con marcas . Comienzo una posición 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. 22:30 .Primera linea . la E es la quinta letra.Linea de texto 2 .1 <DT>Linea de texto 3.Linea de texto 3. Estos tres nuevos elementos también se pueden usar con cualquiera de los anteriores tipos de lista.Linea de texto 3.1 . Esto es una lista ordenada con letras mayúsculas y que comienza por la E: .1 Linea de texto 3.1 <DT>Linea de texto 3.1 Linea de texto 3.Linea de texto 3. con Netscape se ven igual).2 Linea de texto 3.

2 .Linea de texto 3. Con pocos elementos se pueden conseguir efectos espectaculares.2. Numeración romana en mayúsculas y minúsculas .kiubix.1 .2.2.2.2.2.1 Linea de texto 3.com .2.Linea de texto 3.2 .2 <OL TYPE=i> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2 </UL> </UL> </UL> <LI>Linea 4 de texto </UL> Ordenadas Ordenada simple . imágenes.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.2.2.2 .Linea de texto 3.2 <DL> <DD>Linea de texto 3. tienen sus propios atributos de alineación tanto horizontal como vertical.Linea de texto 3.1 .1 .Linea de texto 3.2 .2.Linea de texto 3.1 . todos ordenados .2 .Linea de texto 3.2.2.2 Linea de texto 3.2 <OL> <LI>Linea de texto 3. y atributos de http://www.Linea de texto 3.kiubix.1 .2.2. que pueden ser con borde visible o invisible.2.1 <LI>Linea de texto 3.Linea de texto 1 .2.2.Linea de texto 3 .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.2.Linea de texto 2 .Linea de texto 3.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.2.2 </DL> </DL> </OL> <LI>Linea de texto 4 </OL> TablasLas tablas son sin duda uno de los elementos más potentes del HTML. 2 desordenados con marcas .2 <UL> <LI>Linea de texto 3.2 . En el interior de las celdas de una tabla.Linea de texto 2 .Linea de texto 3 .2 .2.Linea de texto 3.2.2.2.2 .Linea de texto 3.1 <LI>Linea de texto 3.Linea de texto 3.Linea de texto 3.1 <LI>Linea de texto 3.Linea de texto 3.Linea de texto 3. se puede poner cualquier cosa: texto de cualquier tamaño y color.1 <LI>Linea de texto 3.1 Linea de texto 3.2.1 <LI>Linea de texto 3.Linea de texto 3.2 <UL TYPE=CIRCLE> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2 <DL> <DD>Linea de texto 3. Por supuesto.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.2.1 <DD>Linea de texto 3..1 <LI>Linea de texto 3.Linea de texto 1 .2.Linea de texto 3 .Linea de texto 3.Linea de texto 3.Linea de texto 1 .2 <UL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 .2.2.com/portal Powered by Joomla! Generated: 22 August.2.2.2. 2 desordenados sin marcas .2 <OL TYPE=i> <LI>Linea de texto 3.2.1 <DD>Linea de texto 3.2.2.Linea de texto 1 .Linea de texto 1 .Linea de texto 2 .2.2. 22:30 . todos ordenados.1 .2..2 </OL> </OL> </OL> <LI>Linea de texto 4 </OL> Ordenada con 4 niveles.Linea de texto 3. además de permitir cualquier contenido.1 .2.Linea de texto 3.Linea de texto 3.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 .2.2 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2. links.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.2 </OL> </OL> </OL> <LI>Linea de texto 4 </OL> Ordenada con 4 niveles.2.2.1 <LI>Linea de texto 3.Linea de texto 2 .2.2.2.Linea de texto 2 .2 <UL TYPE=SQUARE> <LI>Linea de texto 3.2 .2.1 <LI>Linea de texto 3.1 .2.2.2 Linea de texto 3.2 </UL> </UL> </OL> <LI>Linea de texto 4 </OL> Ordenada con 4 niveles.Linea de texto 3 .1 <LI>Linea de texto 3.2.1 . 2011.2.2 .2.2.

. . y es mucho más sencillo de utilizar. Si no se escribe este atributo.void . </TABLE> Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qué bordes o líneas de la tabla se mostrarán: Este atributo sirve para definir qué bordes del marco de la tabla serán visibles: <TABLE FRAME="valor"> ..rows . . .kiubix. ..ALIGN Indica la alineación horizontal de los datos dentro de las celdas.Sólo aparece líneas de división entre columnas. 22:30 .Sólo el borde inferior. .VALIGN Indica la alineación vertical de los datos dentro de las celdas.groups . no hace lo mismo que BORDER. . Estos últimos atributos no funcionan igual en todos los navegadores.WIDTH Según donde se escriba.lhs . Puede tener tres valores: LEFT (izquierda).Sólo el borde superior . Sólo es posible definirlas al principio de las filas. El elemento básico de definición 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). sirve para controlar el ancho de toda la tabla o de sus columnas. es equivalente a BORDER=0 (por defecto).border .Sólo los lados derecho e izquierdo.com/portal Powered by Joomla! Generated: 22 August. no es un elemento que vaya a desaparecer.Ningún lado (por defecto).Los cuatro lados (no es lo mismo que el ya conocido) Y este otro sirve para definir qué bordes de la tabla serán visibles: <TABLE RULES="valor"> .cols .Sólo el lado derecho. Por defecto se autodimensionan. Aunque pueda parecerlo. se adaptan en tamaño a su contenido.hsides . . . BOTTOM (abajo) y MIDDLE (centro).CELLSPACING Indica el número de píxels que separan una celda de otra.Sólo el lado izquierdo. Para ello es necesario JavaScript.COLSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla. Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. </TABLE> donde valor puede ser: . . Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las páginas. Se mide en píxels.CELLPADDING Indica los píxels de separación entre el borde de la celda y su contenido.EVENTS Se pueden capturar todos los eventos típicos de los navegadores en cualquiera de las partes de una tabla. . RIGHT (derecha) y CENTER (centro). Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> . pero también es posible definirlo de forma fija.none . . Puede tener tres valores: TOP (arriba). y no funcionan en absoluto si no son de la última generación. 2011. . de las columnas o de ambas a la vez.Ninguna línea de división (por defecto). Según el navegador de que se trate. es decir.Sólo los bordes superior e inferior. ..BORDER Indica el ancho de los bordes de la tabla. . . y no es compatible con todos los navegadores. ..BORDERCOLOR Establece el color de los bordes de la tabla. </TABLE> donde valor puede ser: .com dimensionado. No funciona igual en todos los navegadores.NOWRAP Para impedir que las líneas de texto dentro de una celda se trunquen en los espacios en blanco.below .Sólo aparecerán líneas de división entre filas. Su valor por defecto es 1.above .Los cuatro lados. Su valor por defecto es 2.box . Ejemplos de tablasTabla básica 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 línea expandida <ROWSPAN> http://www. . . y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML).rhs . Lo mejor es hacer pruebas con algunas versiones para asegurarse.. Estos sub elementos también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.Sólo aparecen líneas de división entre grupos de filas y grupos de columnas.vsides . puede que haya que combinar más de un atributo para conseguir el efecto deseado. .ROWSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas. 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: . .kiubix.

y como ya habrás deducido. 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 parámetros Media AlturaPesoSexoHombres1. el valor de BORDER puede ser variable. 22:30 .7</TD> <TD>60</TD> </TR> </TABLE> Otro ejemplo de línea 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 márgenes 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>.9</TD> <TD>85</TD> </TR> <TR> <TH>Mujeres</TH> <TD>1. La omisión o no es equivalente a parametrizarlo.985Mujeres1. Tabla centrada.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. http://www.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> Combinación 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> Combinación de cabeceras múltiples 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> Combinación de cabeceras laterales y líneas 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> Combinación de cabeceras superiores y laterales.kiubix. Título al pie.kiubix. Contenidos centrados. se consigue lo mismo así: BORDER=0.com/portal Powered by Joomla! Generated: 22 August. 2011.

La tabla ABCD dentro de la tabla 12345 123 ABCD456<TABLE BORDER> <TR> <!-. 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. 22:30 .ROW 2. TABLE 1 --> <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR> <!-.ROW 1.ROW 2. TABLE 2 --> <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR> <TR> <!-. CAPTION=TOP | BOTTOM Título 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> Título 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. ALIGN=LEFT | RIGHT | CENTER Se puede aplicar individualmente a una celda o a toda la línea 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. 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.com/portal Powered by Joomla! Generated: 22 August. títulos y subtablas Líneas múltiples 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.kiubix. y cuyas celdas están 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. 2011.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> Alineación. TABLE 2 --> <TD>A</TD> <TD>B</TD> </TR> <TR> <!-.kiubix.ROW 1.

Por ejemplo.. .kiubix.. </TABLE> O de toda la fila: <TABLE BORDER > <TR BACKGROUND="yellow_r.... El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. . ya que en el IE el color afecta a todas las líneas de la tabla. 22:30 </TR> <TR> .com Tabla dimensionada al 50 % de la pantalla. Obsévese que se alargan más de lo que lo harían 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. y el 25 % vertical.gif"><TD> texto </TD></TR> .. 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 gráficos en las tablas Una tabla de cuatro celdas. sólo sería necesario escribir: <TABLE BORDER BGCOLOR="red"> . celdas sin dimensionar.com/portal Powered by Joomla! Generated: 22 August.gif"> texto </TD></TR> .. 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 generaciónTabla 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. 2011.. 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. </TABLE> Para toda la línea: <TABLE BORDER> <TR BGCOLOR="red"><TD> texto </TD></TR> .. 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...gif"> . </TABLE> Bordes de colores en las tablasSe puede cambiar el color de los bordes de una tabla. </TABLE> De sólo una celda: <TABLE BORDER> <TR><TD BACKGROUND="yellow_r. aunque este atributo no funciona igual en todos los navegadores. conteniendo otra tabla anidada en una de sus celdas. y en Mozilla solamente a los bordes exteriores. Cada una de un color.. </TABLE> También se puede usar una imagen como fondo de toda la tabla: <TABLE BORDER BACKGROUND="yellow_r.. 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 página 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 página..kiubix.. para hacer toda la tabla en rojo. La segunda tabla está forzada a ocupar el 100 % de la celda receptora.......

6 y 7 otro. Por supuesto. Sí. A su vez. Y este sería del código 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. y la 5.kiubix. utilizando cualquier editor de gráficos creamos un fichero que contenga un punto de color rojo.gif" width="1px" height="50" border="0" alt=""></td> http://www.. Y la última la produce <TFOOT>. Todo esto funciona solamente si en la definición de la tabla se incluye el atributo rules="groups" Tablas con efectos compatibles con todos los navegadores. No necesitamos más. No es ninguna solución mágica: solamente tienes que crear un gráfico con un punto (preferiblemente cuadrado) del color y grosor que quieras dar a tus líneas.. ¿Qué hacer entonces para conseguir tablas cuyas líneas de bordes se vean siempre bien? Pues la única solución es usar una tabla sin bordes. las columnas 3 y 4 forman un grupo. 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 líneas que separan los grupos de filas centrales las producen las dos instrucciones <TBODY>.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 líneas de división 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 líneas de división 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 líneas 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 líneas</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. y listo. será casi invisible. ya sé que lo que buscas no es eso. muchos de los efectos de última generación mostrados no funcionan igual. pero si utilizando atributos de tabla para poner líneas de bordes donde queramos hay problemas con algunos navegadores.com/contenidos/POSTER. Solamente uno. Como ya has podido ver.kiubix.jpg>"rojo. Supongamos que queremos conseguir con una tabla representar un recuadro con bordes rojos.. la solución es utilizar otros recursos del HTML que sean admitidos por todos. puedes poner solamente las que necesites. 2011. o no funcionan en absoluto con todos los navegadores. 22:30 .com/portal Powered by Joomla! <td Generated: 22 August. Le llamaremos rojo. y otro de la 5 a la 6. Para ello.kiubix.. existe un agrupamiento desde la línea 1 a la 4.gif Ejemplo de recuadro con ángulos rectos. no es obligado que esten todas.

es decir. Para conseguir que aparezcan las líneas. se mezclan ciertas cantidades de los tres colores básicos (rojo verde y azul).kiubix. Este es el aspecto de la misma tabla con los bordes visibles: Vertical izquierdaHorizontal arribaVertical derechaEjemplo de recuadro con ángulos rectos. obtendremos la cantidad (en hexadecimal) de cada color. por ejemplo.com/contenidos/POSTER.kiubix. Fíjate en que además de atributos propios del elemento IMG también se utiliza una instrucción de estilo: width="1px" para asegurar un grosor mínimo de la línea. sólo hay que "estirar" el punto contenido en nuestro fichero gráfico rojo. ver la página Texto de colores.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.jpg>"rojo. ya que estos atributos del elemento <IMG> son completamente estandarizados (por lo menos de momento).com/contenidos/POSTER. Para combinaciones generales de colores.com/contenidos/POSTER. La sintaxis para cambiar el fondo de la página (background) a color rojo es: <BODY BGCOLOR=#FF0000> y para dar color al texto.gif" width="300" height="1" border="0" alt=""></td> <td rowspan="3" width="1"> <img src=http://www.jpg>"rojo. La cantidad de cada color está definida por el código que utilizamos.jpg>"angulo3.gif. y guardas cada trozo con un nombre cualquiera.com/portal Powered by Joomla! Generated: 22 August.jpg>"rojo.kiubix. para conseguir el color deseado. Con cualquier editor de gráficos (el "Paint" de Windows. angulo2.kiubix. por ejemplo) generas un círculo del color que quieras.jpg>"angulo1.gif" width="20" height="20"> </tr> </table> Como puedes ver.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#E5E7FD" width="20"><img src=http://www.kiubix.com/contenidos/POSTER. Esto nos permite "dibujar" las líneas que se quieran y donde se quieran. el truco consiste en definir celdas alrededor de la celda que lleva el texto. Estos son los cuatro gráficos necesarios: angulo1. Si los cortamos en 3 grupos de dos de izquierda a derecha. Algunos no funcionarán en ciertos visualizadores.gif Códigos hexadecimales de color Estos códigos de color se pueden utilizar como valor de atributo en los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>.gif" width="300" height="1" border="0" alt=""></td> </tr> </table> Como puedes ver.kiubix. y con el borde transparente o de otro color. 2011. A continuación lo cortas en cuatro porciones. angulo1. también se pueden conseguir recuadros con las esquinas redondeadas. 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.gif angulo2. Estas celdas que rodean a la principal solamente contienen el fichero gráfico con el punto. La codificación de estos colores está basada en mezclas cromáticas RGB (RED GREEN BLUE). así como si Windows no está configurado con 256 colores al menos.gif angulo3.jpg>"angulo4.com/contenidos/POSTER.jpg>"angulo2.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#DDE0FC" width="20"> <img src=http://www. para que el efecto sea completo hay que dar el mismo color que tienen los gráficos como fondo de las celdas.gif angullo4.com colspan="4" height="1"> <img src=http://www.Horizontal abajo------------------Utilizando una técnica parecida.kiubix.com/contenidos/POSTER. pero este nos dará algo más de trabajo. Al igual que en el anterior ejemplo. Así Recuadro con ángulos redondeados Y este es el código necesario: <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#DDE0FC" width="20"><img src=http://www.</font></td> colspan="4" height="1"> <img src=http://www.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. como una tarta. ver el ejemplo de control de colores. etc. Lista de códigos RGBPuedes probar los diez primeros para hacerte una idea.kiubix. 22:30 . es necesario tener un gráfico previamente.com/contenidos/POSTER. que tiene seis dígitos en hexadecimal.kiubix. sin problemas de compatibilidad.

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.com/portal Powered by Joomla! Generated: 22 August.kiubix. 22:30 .kiubix. 2011.

y que una página debe verse como su creador desea. Por ejemplo. de una marca de ordenador a otra. o una terminal UNIX." " Dobles comillas -. desafortunadamente. la tabla tiene una columna con el carácter deseado seguida de su código numérico en base decimal. o que tiene tal o cual sistema operativo. los números y unos pocos signos.0 . Se escribe así: <BODY BGCOLOR="#000000" FGCOLOR="#00FF00" TEXT="#F0F0F0" LINK="#FFFF00" VLINK="22AA22" ALINK="#0077FF"> ¿Por qué hay que usar códigos?Existen diversos sistemas operativos dentro del mundo de los ordenadores. ayudan. una descripción del carácter y después un nombre corto (una especie de alias) que para los más habituales se llegan a memorizar. y son los que se encargan de darle "vida" a nuestra máquina. En algunos casos especiales que se verán más adelante. Existen multitud de editores especiales para escribir HTML.kiubix. los que sí tienen normalmente darán problemas en sistemas diferentes al que se ha utilizado para escribir el documento. y la mayoría de ellos tienen herramientas para convertir de forma automática los caracteres especiales a su correspondiente código. Todo son atributos del elemento <BODY>.+ + Signo más -.# # Signo de número -. etc. y desde luego hay que codificar todas las letras acentuadas.) ) Abrir paréntesis -. no se ven igual las letras con acentos desde un PC que desde un MACintosh.* * Asterisco -. no será necesario complicarse la vida. A este conjunto de caracteres. pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente. Por ejemplo. eñes. no son siempre las mismas. y los links son amarillos al principio. como el punto. cualquier tipo de máquina podrá acceder a ellas. y esos hay que escribirlos con el código numérico. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador. azul-verde cuando son activados. pero que se pueden escribir en pantalla por otros medios.. Estos son algunos de los más utilizados. se le denomina código ASCII. los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene tu teclado y algunos más que no están en el mismo. Punto -. sin importar si estamos ante un ordenador que "habla" en inglés o en español. 2011. Como puedes ver. el guión y algunos otros. Coma -. y su aspecto no será el adecuado en algunas. 22:30 ./ / Barra de división -. .9 0 . se pueden escribir directamente desde teclado todos los que no tienen alias en la tabla. Dado que el HTML pretende ser un lenguaje universal. También hay paquetes de "macros" para hacer lo mismo con procesadores de texto como Word o Word Perfect. si las escribimos directamente desde el teclado... Tabla de códigos de caracteres Actualmente existen muchos más. El texto es gris claro sobre negro. No todos tienen ese nombre corto. y verdes después de haber sido utilizados. y varían de un sistema a otro. la coma.( ( Cerrar paréntesis -.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. con códigos de 4 dígitos.Guión -. habrá que escribir los códigos numéricos en base hexadecimal (la calculadora de Windows tiene un conversor). se ha creado una tabla de caracteres "conflictivos" (en realidad están todos.. Generalmente. pero si tus páginas van a residir en un servidor WWW. Junto con estos programas.9 Dígitos del http://www. etc.% % Tanto por ciento -. Si lo que escribes en HTML tienes la seguridad de que sólo va a ser utilizado como ficheros locales en máquinas similares a la tuya. o bien Ñ Esto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto (mayúsculas y minúsculas).$ $ Dólar -. y por supuesto. de un idioma a otro. .&permil.. como el euro. común para todos los sistemas.& & Ampersand amp ' ' Apóstrofe -.kiubix. Estas tablas. cedillas. nuestra denostada en medio mundo "Ñ" se escribirá: &Ntilde. 0 Tanto por mil -.com/portal Powered by Joomla! Generated: 22 August. y para cosas cortas. Caracter Código Descripción Alias ! ! Cerrar exclamación -.

acento agudo Iacute Î Î I mayúscula. probablemente el conjunto de lo que lee está repartido por medio mundo. acento agudo oacute ô ô o minúscula.es/mifichero.htm" mce_href="http://www. &#8364 Euro euro &ne. diéresis Ouml × × Signo de multiplicación times Ø Ø O barrada mayúscula Oslash Ù Ù U mayúscula.miservidor. acento grave egrave é é e minúscula.@ @ Arroba -. pareciéndonos que siempre estamos en el mismo.htm"> Link de prueba </A>. el documento leído puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a otras sin notarlo. en inglés = ancla o punto de anclaje).com/portal Powered by Joomla! Generated: 22 August.` ` Acento agudo -. todo parece un mismo documento.\ \ Tres octavos -.ª ª Mini cuadrado lleno -. tilde otilde ö ö o minúscula. o poniéndole un borde si es una imagen. acento agudo Oacute Ô O mayúscula.^ ^ Circunflejo -. acento circunflejo ocirc õ õ o minúscula. acento grave Agrave Á Á A mayúscula.< < Menor -. Para el lector.. 2011. Se escribirá: <A href="http://www. e Mayor o igual que ge &radic. Y se vería así: Link de prueba Si lo que se desea es que aparezca sin subrayado o de otro color. ambas cosas en color azul.² ² Flecha ar . • Flecha izquierda larr &rarr.> Link de prueba </A>. acento agudo Aacute   A mayúscula. anillo Aring Æ Æ AE mayúscula AElig Ç Ç C cedilla mayúscula Ccedil È È E mayúscula.\ \ Barra inversa -. acento agudo Uacute Û Û U mayúscula. Todo esto lo consigue el elemento <A> (por Anchor. y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link.Ï Ï Punto lleno -.º º Flecha de -. acento circunflejo Acirc à à A mayúscula.> > Mayor -. Pues un link es un área de la pantalla.¼ ¼ Flecha ab -. diéresis Uuml Ý Ý Y mayúscula. Pero seguramente te preguntarás qué es eso de un "link". acento agudo Yacute Þ Þ THORN mayúscula THORN ß ß Beta minúscula szlig à à a minúscula.. o ambas cosas. ’ Flecha derecha rarr &harr.< < Menor lt = = Igual -.com al 0-9 -. acento agudo Eacute Ê Ê E mayúscula. diéresis ouml ÷ ÷ Signo de división divide ø ø o barrada minúscula oslash ù ù u minúscula. nuestro documento puede ser infinito.> > Mayor gt ? ? Cerrar interrogación -. d Menor o igual que le &ge. ” Flecha izq-der harr Nº -. tilde Atilde Ä Ä A mayúscula. 22:30 . diéresis euml ì ì i minúscula.miservidor. diéresis Euml Ì Ì I mayúscula.es/mifichero. se puede parametrizar con una instrucción de estilo.z a . Si no se desea que aparezca el subrayado para mejorar la estética en algunos casos. acento grave Egrave É É E mayúscula.Ë Ë Punto vacio -. Por supuesto. acento circunflejo ucirc ü ü u minúscula. acento grave Igrave Í Í I mayúscula. acento circunflejo Ecirc Ë Ë E mayúscula. diéresis auml å å a minúscula. acento agudo yacute þ þ thorn minúscula thorn ÿ ÿ y minúscula.htm" style="color:red. Y se vería así: Link de prueba (Esto puede que no funcione en algunos navegadores antiguos) El elemento <A> tiene dos atributos: HREF y NAME. acento grave ugrave ú ú u minúscula.« « Mini cuadrado vacio -. eso se puede cambiar en las configuraciones de visualizador.{ { Abrir llave -.&loz. no hay diferencias ostensibles que le hagan notar dónde está el documento que lee. a esto se le llama hipertexto ya que con esta posibilidad.es/mifichero. que es "sensible" al puntero del ratón. acento circunflejo icirc ï ï i minúscula. acento agudo eacute ê ê e minúscula. text-decoration:none".¡ ¡ Cuadrdo vacio -. acento grave igrave í í i minúscula. ` Distinto de ne &le. Ê Rombo vacio loz Creación de enlaces (links) El siguiente es sin duda el elemento más importante del HTML.Z A . En lo sucesivo le llamaremos enlace o sinplemente link (en inglés link=eslabón o enlace).^ ^ Siete octavos -._ _ Subrayado -. o en un plano más modesto.kiubix. si es texto. “ Flecha abajo darr &larr. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola. Así: <A href="http://www.&uarr. tilde atilde ä ä a minúscula. ‘ Flecha arriba uarr &darr. acento circunflejo acirc ã ã a minúscula. acento circunflejo Ucirc Ü Ü U mayúscula. tilde Otilde Ö Ö O mayúscula. acento agudo uacute û û u minúscula. diéresis uuml ý ý y minúscula. anillo aring æ æ ae mínuscula aelig ç ç c cedilla minúscula ccedil è è e minúscula. acento agudo aacute â â a minúscula. acento circunflejo Icirc Ï Ï I mayúscula. En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: http://www.A .es/mifichero. diéresis Iuml Ð Ð Eth mayúscula ETH Ñ Ñ Eñe mayúscula Ntilde Ò Ò O mayúscula. cuando en realidad. acento grave ograve ó ó o minúscula.Espacio sin separación nbsp ¡ ¡ Abrir exclamación iexcl ¢ ¢ Centavo cent £ £ Libra Esterlina pound ¤ ¤ Signo de divisa general curren ¥ ¥ Yen yen ¦ ¦ Barra vertical partida (pipe) brvbar § § Sección sect ¨ ¨ Diéresis uml © © Copyright copy ª ª Doña ordf « « Abrir comillas francesas laquo ¬ ¬ No (símbolo lógico) not .| | Barra vertical -} } Cerrar llave -.~ ~ Tilde -.miservidor.htm" mce_href="http://www. se puede recurrir a una instrucción de estilo.: : Dos puntos -. Radical radic & & Omega -.] ] Cinco octavos -. diéresis yuml &euro. acento circunflejo Ocirc Õ Õ O mayúscula.] ] Abrir corchete -.Guión débil shy ® ® Registrado reg ¯ ¯ Macrón macr ° ° Grados deg ± ± Más-menos plusmn ² ² Dos superíndice sup2 ³ ³ Tres superíndice sup3 ´ ´ Acento agudo acute µ µ Micro micro ¶ ¶ Fin de párrafo para · · Punto medio middot ¸ ¸ Cedilla cedil ¹ ¹ Uno superíndice sup1 º º Género masculino ordm » » Cerrar comillas francesas raquo ¼ ¼ Un cuarto frac14 ½ ½ Un medio frac12 ¾ ¾ Tres cuartos frac34 [ [ Un octavo -. En efecto. acento circunflejo ecirc ë ë e minúscula.kiubix. en realidad.Cuadrado lleno -. ya que permite realmente "navegar" por uno o varios documentos.Ä Ä Flecha iz -.[ [ Cerrar corchete (izquierdo) -.¿ ¿ Abrir interrogación iquest À À A mayúscula. diéresis Auml Å Å A mayúscula.. acento grave Ograve Ó Ó O mayúscula. diéresis iuml ð ð eth minúscula eth ñ ñ eñe minúscula ntilde ò ò o minúscula. acento grave Ugrave Ú Ú U mayúscula.Z Letras A-Z -.. para la persona que está leyendo sobre un determinado tema. . acento grave agrave á á a minúscula. Punto y coma -. acento agudo iacute î î i minúscula. que pueden residir en cualquier parte.a .z Letras a-z -.miservidor. que puede contener una o varias palabras o una imagen.

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

simplemente nos mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz si el servidor tiene activada la opción de listar directorios..com/portal Powered by Joomla! Generated: 22 August.El arte de escribir buen HTML reside en dar una buena estructura a la información. por defecto el servidor entiende que se le pide la "home page" (página inicial) de ese directorio. Por ejemplo.htm o default.es?&subject=Asunto de prueba&body=Texto de prueba">Enviar e-mail</A> Con los links. si haces "clik" aquí con el ratón. Es decir. se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR.. el JPG tiene una compresión mucho mayor que el GIF. Con esta sintaxis se invoca al cliente de correo predeterminado para que abra una ventana con la dirección deseada ya escrita.htm" mce_href="tablas. los saltos en esta línea se han producido siguiendo la numeración indicada por los disintos tabindex.Recuerda: si tu trabajo HTML no va a residir en un servidor en red. Siempre que puedas huye de crear páginas muy largas. es preferible utilizar direcciones relativas.com Dentro del documento activo En la línea de partida: <A href="#punto1" mce_href="#punto1">Ir al punto 1</A> En la línea de destino <A NAME="punto1"></A> Por ejemplo.Cuando hagas un link. al resto de links se llega por orden de escritura.. .htm" tabindex="1">Body</A> Esto solamente funciona con versiones recientes de navegadores. Si utilizas direcciones absolutas y después tienes que mover los ficheros por cualquier razón. el visualizador nos presentará en pantalla la última línea del mismo. .htm . es posible enviar un e-mail desde un link con la instrucción: <A href="mailto:jac@uv. dará un error. Para ello se utiliza el atributo tabindex.kiubix. generalmente el servidor nos mostrará un simple listado de los ficheros y directorios que éste contenga si el servidor tiene activada la opción de listar directorios. La diferencia entre estos dos formatos es su nivel de compresión. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGTH BORDER VSPACE HSPACE. 22:30 . siempre que no tenga espacios en blanco.es">Enviar e-mail</A>. . ..Si al hacer un link. No funcionará. saltarás al principio de esta página. Se escribe: <A href="tablas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes. . Por contra.El texto que pongas después del símbolo # puede ser cualquiera. tendrás que modificar todas las direcciones. Por ejemplo: <A href="tablas. al hacer un link. Otro atributo reciente de los links es title que permite escribir una descripción del link sin necesidad de pulsar en él. . simplemente poniendo encima el puntero del ratón. pulsa la tecla "Tab": Tablas Imágenes Body Como puedes ver.htm" tabindex="2">Tablas</A> <A href="imagen1. y por supuesto.htm . y has utilizado direcciones absolutas.htm" tabindex="3">Imágenes</A> <A href="body.Después de C (que puede ser A. . Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. en caso contrario. después del link y antes de </A> puedes poner lo que quieras. cuanta mayor compresión tenga un gráfico menor http://www.No sólo puedes montar el link sobre un texto. caracteres especiales ni caracteres codificados. por lo que suele ser el formato más utilizado en el mundo web.Si un servidor no tiene definida página inicial.kiubix.Si después de la dirección de la máquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio. Si además 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. tendrá que ser así file:///C:/MIDIRECTORIO/mifichero. . Las imágenes utilizadas pueden estar en formato GIF o JPG.htm" mce_href="imagen1. D o la unidad de disco que quieras) fíjate en que las barras que separan los directorios y ficheros son barras a la derecha. B.. Crea cuantas necesites. después del nombre de la máquina no pones el nombre de un fichero.Si continuas deseando poner direcciones absolutas con ficheros locales.es" mce_href="mailto:jac@uv. dará un error.". en caso contrario.htm" mce_href="tablas. donde siempre se debe perseguir que las páginas sean lo más ligeras posible. también puedes hacerlo sobre una imagen cualquiera. En efecto.htm" title="Saltar a la sección de tablas">Tablas</A> Se obtiene: Tablas Debes saber que.Si en el documento de destino no existe el punto definido en el documento de origen. Insertar imágenesInsertar imágenes en un documento permite crear páginas mucho más atractivas. con buena estructura y enlázalas con cuantos links sean precisos. Generalmente (aunque depende de la configuración del servidor) el fichero inicial de un directorio suele ser index. Como habrás visto en el cuadro de arriba. es posible moverse usando la tecla de tabulación. al igual que con los formularios. no empieces con aquello de: "http://. 2011. . para conseguir que el enfoque salte de un link a otro en un cierto orden. que no esté repetido en el mismo documento de destino. Con las nuevas implementaciones que Netscape hace del elemento.htm" mce_href="body. Estos formatos son interpretados directamente por el navegador.

Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vídeo).Texto alineado abajo <img src=http://www. El uso de ALT es recomendado por la W3.kiubix.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.jpg>"sugeren. lo que permite moverse más rápido.com/portal Powered by Joomla! Generated: 22 August.kiubix. Texto alineado arriba <img src=http://www.com/contenidos/POSTER. si no es posible cargar la imagen. <img src=http://www.kiubix.jpg>"sugeren. También se utiliza para que al colocar el puntero del ratón sobre la imagen.kiubix. Para verlo tienes de deshabilitar la opción de cargar imágenes de tu visualizador (sólo es posible con Netscape).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.com/contenidos/POSTER.com/contenidos/POSTER.jpg>"sugeren. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no verás el texto junto con la imagen. Un ejemplo muy común son los ficheros . Veamos ejemplos del uso de <IMG>: Imagen alineada a la izquierda (por defecto) <img src=http://www.kiubix. o aunque el navegador sí pueda.com/contenidos/POSTER.jpg>"sugeren. soporta un link.Texto alineado al centro <img src=http://www.kiubix. Esto es importante cuando una imagen.com/contenidos/POSTER.Texto alineado a la derecha de la imagen <img src=http://www. aparezca un texto en su lugar. es decir. se utilizan los llamados "plug-in" que consisten en pequeños programas que permiten llamar a aplicaciones específicas ejecutándose como ventanas del navegador.com calidad se consigue. aparezca el texto.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. además de ser un elemento decorativo o informativo. pero entonces el visualizador llamará a un programa auxiliar.kiubix. que previamente le habrás definido.pdf. y por tanto no podrás imprimir la página compuesta.jpg>"sugeren. 2011.gif" ALT="AQUI VA UNA IMAGEN"> Imagen alineada a la izquierda.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.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. sin pulsar.kiubix. pero para usos generales el JPG es perfectamente válido. para que sea éste el que visualice el fichero.com/contenidos/POSTER. 22:30 .com/contenidos/POSTER.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. tal vez el cliente esté navegando en modo solo texto. Algunos navegadores no son capaces de tratar imágenes.kiubix. para evitar esto. Para estos casos podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecerá en lugar de la imagen. sin ver las imágenes.

además de para variar el tamaño de un gráfico. el texto ya estará compuesto.com/contenidos/POSTER.jpg>"sugeren. Esta forma de trabajar tiene como consecuencia. Este es su aspecto a la mitad: 75x23 Consideraciones sobre WIDTH y HEIGTHEstos dos atributos.Texto alineado a la derecha de la imagen <img src=http://www.Texto alineado a la izquierda de la imagen <img src=http://www. Aquí la imagen es la misma de los ejemplos anteriores.kiubix.kiubix. texto texto texto texto texto texto texzto texto texto texto texto texto <img src=http://www. Espacios verticales y horizontales vacíos forzados. 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.gif"></TD></TR> </TABLE> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen redimensionada a más. que no se pretende alterar las dimensiones del gráfico.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. también pueden (casi deben) utilizarse con los valores naturales del mismo.jpg>"sugeren. Este es su aspecto al doble: 272x92.com/contenidos/POSTER.com/contenidos/POSTER. pero ha sido redimensionada por el visualizador.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.com/contenidos/POSTER. con la consiguiente pérdida del formato original de la página. Su tamaño original es de 136x46 puntos.kiubix.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. Cuando el navegador solicita una página y comienza a recibirla. Imagen alineada a la izquierda con marco.kiubix.jpg>"sugeren. lo primero que hace es leer la cabecera.kiubix. ya que el navegador no va a recomponer el texto que ya estaba escrito.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. Imagen redimensionada a menos.Texto alineado a la derecha de la imagen.com/contenidos/POSTER. Y te preguntarás que finalidad tiene esto. no se habrá reservado el espacio adecuado para insertarlas.kiubix.Texto alineado a la derecha de la imagen <img src=http://www.com/portal Powered by Joomla! Generated: 22 August. pero al no saber el tamaño de las imágenes.jpg>"sugeren. pero ha sido redimensionada por el visualizador. cuando éstas lleguen en el último paso de la carga de la página. 22:30 .kiubix.kiubix.jpg>"sugeren. por lo que todo el texto será desplazado hacia abajo.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. a continuación lee el código del BODY y por último carga las imágenes que contenga la página haciendo nuevas conexiones al servidor para cada una de ellas.com Imagen alineada a la derecha. La razón estriba en cómo funcionan los navegadores. Su tamaño original es de 136x46 puntos.com/contenidos/POSTER.jpg>"sugeren. que si en el código del BODY no hay instrucciones sobre el espacio que hay que reservar en pantalla para cada imagen. 2011.Texto alineado a la derecha de la imagen <img src=http://www. Aquí la imagen es la misma de los ejemplos anteriores. Es decir.

capturar las coordenas que señale el puntero del ratón y servir la dirección que tiene asociada.htm 112. Después viene un directorio: cgi-bin.jpg>"sugeren. tendrás que ver las instrucciones concretas del programa servidor. y cada uno de ellos indica un link con alguna parte. Mapeado de una imagen para usarla como direccionador <A href="/cgi-bin/imagemap/mimapa" mce_href="/cgibin/imagemap/mimapa"><img src=http://www. lo que necesitamos es que algún elemento convierta esas coordenadas en una dirección del estilo ya conocido: "http://miservidor. un recurso tan bueno como los mapas. En ese directorio hay un fichero llamado imagemap (según el sistema puede ser otro) que es un programa que se encarga de leer tu fichero mimapa.kiubix. Como puedes ver. En el índice encontrarás información sobre un tipo de formulario que devuelve un par de coordenadas. y al que normalmente sólo puede acceder el administrador del sistema. y nos indica que la imagen ha sido troceada en rectángulos y las coordenadas indican la esquina superior izquierda y la inferior derecha.1. Ahora veamos el resto de instrucciones del ejemplo: <A href="/cgi-bin/imagemap/mimapa" mce_href="/cgibin/imagemap/mimapa"><img src=http://www.htm"><img src=http://www. Ya por último.gif" USEMAP="#nombre1"> Aunque se comprende a simple vista. el llamado mimapa. Netscape ha propuesto una solución mucho más simple: que sea el propio visualizador quien haga las veces de programa conversor.46 Este podría ser el aspecto del fichero del ejemplo. verás que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos números que cambian según muevas el ratón.es/mifichero. 2011. Sólo queda por decir que el fichero mimapa tiene que estar en otro directorio especial que tiene el servidor a estos efectos.jpg>"sugeren.es/mifichero2. La forma de montar el mapa puede variar de un programa servidor a otro.75. Por ejemplo: <MAP NAME="nombre1"> <AREA SHAPE="rect" COORDS="1.32.35 rect http://miservidor. veamos algunos efectos especiales algo más complicados. no debe depender de tener tu máquina en red y de que haya un servidor http que te atienda..gif" ISMAP></A> La primera parte A HREF ya la conocemos. 22:30 . es un poco engorroso. En la práctica serán menos.46. ya que andar intentando atinar en el punto 11. con lo que acabamos obteniendo un link normal.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. y para que nuestra imagen funcione como un menú direccionador. es operar con los elementos de formularios.htm" mce_href="intro.com/contenidos/POSTER.htm" mce_href="indice. Verás las cifras 1. es un link. analicémoslo: En primer lugar tenemos el elemento MAP.com/contenidos/POSTER. Pero. Además.gif" ISMAP></A> Si mueves el ratón por encima de la imagen.htm 12.com/contenidos/POSTER. aparece ISMAP que es el que convierte una simple imagen en una potente herramienta.es/mifichero3. que una vez evaluadas permite ejecutar una acción.es/mifichero1. donde se ejecutan los programas auxiliares del servidor. esto es un sistema de coordenadas. En efecto. la imagen aparece rodeada de un marco de color como es habitual en los puntos de link (en el texto es el subrayado). que son las medidas en puntos que tiene el gráfico.gif" mce_src="sugeren. Para ello ha implementado el elemento MAP que acompañará a IMG.htm"> <AREA SHAPE="rect" COORDS="76. Algo así: rect http://miservidor. pero la base de funcionamiento es siempre la misma. escribe: . teóricamente tantas como pares de coordenadas tiene la imagen. Estos programas generan un fichero con todas las direcciones.htm" mce_href="indice. Va http://www. Si quieres eliminar el marco. IMG src="sugeren. También podría ser en círculos (circ) o polígonos (poly). Esto siginifica que con un solo link podemos obtener un enorme número de direcciones. Existen multitud de programas llamados mapeadores que parten la imagen en imaginarios trozos.kiubix. Este es un directorio especial que tienen los servidores http. eso resta portabilidad a los documentos locales y a los trabajos personales en disquete.kiubix. respectivamente.1.jpg>"sugeren..46" href="intro. Otra forma alternativa de conseguir que una imagen responda con ciertas acciones.1 y 136. El parámetro rect significa rectángulo.kiubix.gif" BORDER=0 > Ahora que ya sabes cómo manejar las imágenes.kiubix.htm". Como ya habrás supuesto. que lo que está haciendo es definir un mapa de coordenadas. y al que por supuesto.kiubix.42 rect http://miservidor. por ejemplo.com/contenidos/POSTER. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha.jpg>"sugeren.htm 90..gif" ></A>texto texto.136.com/portal Powered by Joomla! Generated: 22 August. una vez más. solo puede acceder el administrador del sitema. Todo esto es suponiendo que el servidor está en una máquina UNIX.htm"> </MAP> <img src=http://www. Si reside en tu propio PC con Windows o en un MAC (que los hay).46" href="indice.

consiste en parejas de coordenadas que indican los vértices superior izquierdo e inferior derecho respectivamente del área. procurando que la última pareja quede unida a la primera. A continuación tenemos el atributo AREA que define las áreas de la imagen. Para representarlos en la página se utiliza el mismo elemento HTML de los gráficos normales: <img src=http://www. 2011.jpg>"bolaroja.com/contenidos/POSTER. todo está definido en la propia imagen. y no comenzar o terminar las secuencias con. 22:30 . La forma de incluir una imagen animada en el documento es la misma que una imagen fija. Los formularios o forms en inglés.jpg>"migrafico.y es el par de coordenas que indican el punto donde está el centro del cículo. Es un atributo del elemento <BODY> Se escribe así: <BODY BACKGROUND="yellow_r. respectivamente.gif">Linea de texto <DT><img src=http://www.kiubix.com/contenidos/POSTER. y evidentemente. No es obligatorio que sean figuras regulares.com/portal Powered by Joomla! Generated: 22 August. una imagen vacía. El parámetro SHAPE="rect" indica la figura geométrica que estamos utilizando para ello.jpg>"bolaroja.gif">Linea de texto <DT> <img src=http://www. son unas páginas http://www. espera (wait) y controles de cabecera permiten reproducir una animación. Evidentemente.y r donde x. se puede emplear default. y no es necesario indicar ninguna coordenada. Fíjate en que nombre1.com acompañado del atributo NAME que da nombre al mapa.com/contenidos/POSTER. El rectángulo ya lo conocemos. (el nombre del mapa) va precedido del símbolo #. y r es el radio del círculo medido en puntos. Los visualizadores que no soportan este efecto. Es necesario nombrarlo porque podría haber más de uno en la misma página. IMG SRC también son conocidos: hacen que se visualice la imagen. Si un área no queremos que tenga link se definirá con NOHREF.gif"> Y es compatible con todos los demás atributos de este elemento. el mapa al que se hace referencia está en la misma página que la instrucción IMG. sus nombres no deberán repetirse. Algunos ejemplos de imágenes en listasSe escriben todas igual. Hay que tener esto presente. es decir.com/contenidos/POSTER. por ejemplo. Y por fin. en este caso. y listo. Netscape ha implementado la posibilidad de mostrar un tipo de gráfico tipo GIF que incluye en su interior una secuencia. Por ejemplo: otrapagina. las animaciones GIF tienen peor resolución que las MPG.jpg>"bolaroja. digamos que es un atributo prestado. circle y poly. Imágenes de fondoEl fondo (background) de este documento es una imagen en formato GIF. definir el tiempo entre imagen.htm#nombre1 Como ya se ha dicho más arriba.gif"> Introducción a los formularios GeneralidadesEsta es una de las partes más técnicas y complejas del HTML. En el caso de que se quiera emplear todo el gráfico como área de enlace. ya que la figura debe estar cerrada. el ciclo de repetición. puede ser rect circ y poly. en este caso vértice superior izquierdo e inferior derecho. sólo hay que cambiar el nombre de los gráficos: <DL> <DT> <img src=http://www. A una misma imagen se le pueden aplicar distintos mapas si se desea. pero esta vez no va acompañando al elemento <A>. La diferencia de tamaño entre un GIF animado y un MPG es considerable. No hay que confundir los gráficos animados en formato GIF con los "movies" o vídeos en formato MPG que no son tratados directamente por el visualizador. lo que hacen es presentar solamente la primera o la última de las imágenes de la secuencia. hay tres figuras geométricas definibles para las áreas: rect.kiubix. y en ese caso el símbolo tendría que estar después del nombre de la página. Para el cículo (circ) son necesarios tres valores: x. USEMAP nos dice qué mapa de coordenadas hay que aplicar a la imagen. HREF ya sabemos lo que hace: indica un link con una página.kiubix. Su construcción es muy sencilla: sólo necesitas tener la serie de imágenes que quieres animar e ir ensamblándolas con algún programa al efecto.. Hay un área por cada link definido. Existen en la red en forma de shareware programas para hacer ficheros de imágenes animadas.kiubix. que junto con instrucciones de repetición (loop). Podría estar en otra.. Los visualizadores suelen presentar correctamente los formatos GIF y JPG. No se requiere ningun tipo de programa ni script. Al igual que con los otros mapas. un solo link. Esto se debe a que.kiubix. y sólo están pensadas para fines sencillos. Para los polígonos (poly) se necesitan tantas parejas de coordenadas como vértices tenga el polígono.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 Gráficos animadosUna nueva propiedad de algunos visualizadores es la posibilidad de presentar gráficos con animación. sino por una herramienta auxiliar que hay que definirle.kiubix. El parámetro COORDS fácilmente se adivina que indica las coordenadas del área.

I) HOME = HTTP_FROM = HTTP_REFERER = http://sestud. así como el nombre de los campos definidos en el formulario y contenido de cada uno de ellos. Se visualiza el contenido de las variables mas usuales echo echo numero de argumentos: $#. ¿Cómo funcionan los formularios?El formulario no es más que una página escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado. es generada. valor argumentos: "$*".0 SERVER_PORT = 80 REQUEST_METHOD = POST HTTP_ACCEPT = image/gif.esp/prueba. Los programas CGI pueden estar escritos en cualquier lenguaje de programación que sea soportado por el sistema operativo del servidor. 22:30 . procesarlos y confeccionar la respuesta que remitirá al navegadorr. valor argumentos: . image/x-xbitmap. como breve orientación se muestra un sencillo programa hecho con comandos shell de UNIX. image/jpeg. aunque se parecen mucho. también lo pone el visualizador.midominio. El signo = después del nombre del campo. estos forman un registro que es enviado a un servidor http (web) que lo procesará y devolverá una respuesta (o no). Pueden utilizarse también para enviar su contenido a una dirección de correo electrónico. creado específicamente para ese formulario. o que simplemente abran otra página. A los programas que hacen de puente entre el formulario y el servidor. no todos los visualizadores utilizan la misma forma de enviar los datos recibidos.mipais GATEWAY_INTERFACE = CGI/1. Esta conversión se hace para no confundirlo con el separador de campos. Ejemplo de programa CGI (shell UNIX)#!/bin/sh echo Content-type: text/plain echo echo Test CGI. http://www. en algunas impresoras. Por ejemplo.midominio. no se vería como tal. 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" ].htm REFERER_URL =ESTO VIENE POR LA INPUT:CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios Fíjate que las palabras aparecen separadas por el signo + y no por espacios como hemos escrito. hasta la más sofisticada consulta a una base de datos.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. incluso el propio formulario puede estar integrado dentro de otros elementos.255.255. Ejemplo de respuesta del programa test2-cgi al formulario prueba. A esa respuesta se le denomina documento virtual ya que esa página no está escrita en ninguna parte. Si además hubiéramos escrito algún carácter especial.es/manual.255 REMOTE_USER = REMOTE_IDENT = unknown AUTH_TYPE = CONTENT_TYPE = application/x-www-form-urlencoded CONTENT_LENGTH = 52 HTTP_USER_AGENT = Mozilla/2. Los formularios. que como puedes ver es el mismo símbolo. Se visualiza el contenido de las variables mas usuales numero de argumentos: 0. enviada y destruida. que reciba los datos y sepa qué hacer con ellos.02 (Win95. 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 sería la respuesta del CGI test2-cgi a un imaginario formulario llamado prueba. */* PATH_INFO = PATH_TRANSLATED = SCRIPT_NAME = /cgi-bin/test2-cgi QUERY_STRING = REMOTE_HOST = mimaquina. se les llama programas CGI (Common Gateway Interface) y no hay que confundirlos con las páginas dinámicas escritas en ASP o PHP.htmTest CGI. Todo esto y algunas cosas más (que habrá que ver en la documentación de referencia) han de tenerse presentes a la hora de realizar programas CGI. Para terminarlo de complicar.com especiales que se utilizan para realizar transacciones. En una página que contenga un formulario pueden además existir todos los elementos hasta ahora conocidos. Una vez terminada la captura de datos. todo se reduce a escribir HTML. ¿Cómo es un CGI?Aunque el propósito de esta guía no es tratar temas de programación. como por ejemplo una tabla. escogiendo un valor de una lista desplegable o seleccionando una opción desde botones fijos o de todas ellas combinadas. Si el formulario se diseña para abrir una página o para ser enviado por e-mail. 2011. Muestra los valores de las variables de servidor más usuales. SERVER_SOFTWARE = NCSA/1. image/pjpeg.com/portal Powered by Joomla! Generated: 22 August.misubdominio. En este caso. el cáracter & es transferido como %26. y pueden estar diseñados para cualquier función: desde una simple captura de datos que serán guardados en un fichero. pero la cosa se complica cuando se trata de transacciones de datos que hay que guardar en un servidor (comercio electrónico). sino su valor en hexadecimal precedido del carácter %.mipais REMOTE_ADDR = 255.3 SERVER_NAME = miserver. por lo que se plantea a menudo la necesidad de decidir para qué visualizador queremos programar nuestro WEB. pueden dar problemas al imprimir las páginas que los contienen.kiubix.uv.kiubix. en el servidor tiene que haber un programa especial.1 SERVER_PROTOCOL = HTTP/1.

. </FORM> En este caso el formulario funcionaría Otra cosa que puede hacer ACTION.Imágenes sensibles al ratón. o simplemente copia éste. Además de enviar datos a un servidor..Botones de proceso. Fíjate en las variables QUERY_STRING e INPUT. El que soporta más longitud es POST. y si se trata de envio de datos POST. cada uno usa un canal de salida distinto. ¿Cómo se escriben los formularios ?La base del formulario es el elemento <FORM>. ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor http o en local. y será el que utilicemos en casi todos los ejemplos.Casillas de marca. 22:30 .kiubix.kiubix. pueden ser tratados con programas de edición de texto.com/portal Powered by Joomla! Generated: 22 August..Botones de inicialización (reset). ...<INPUT> . pero si el formulario va a ser utilizado en páginas ASP. Por la primera llegarán los datos cuando se utilice METHOD=GET y por la segunda cuando es POST el método elegido. ya que permiten comprobar de forma real su funcionamiento y analizar el registro que envían. No es obligatorio.. como el del ejemplo.Botones de selección. Con el valor del ejemplo ACTION="http://miserver.Ventanas de escritura libre. ya que el formulario será considerado como un objeto. </FORM> Resumiendo: sin poner ningun parámetro al elemento ACTION los datos te llegarán así: http://www. Intenta hacer uno a tu medida. . y buena suerte. con sólo un campo y un botón de envío: Analicemos cómo se escribe: <FORM NAME="MI_FORMULARIO" METHOD="POST" ACTION="http://miserver. </FORM> Si no quieres complicarte la vida con descodificaciones (depende de lo que se vaya a hacer con los datos recibidos). tendrán la forma que ya conocemos. Si el formulario solamente se utiliza para llamar a otras páginas. en cuyo caso es conveniente darles distintos nombres a cada uno. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse.<SELECT> .Listas desplegables de valores. Hay tres clases de estos sub-objetos: . que es un objeto. que a su vez son sub-objetos del objeto FORM...midominio..midominio. NAME.com Los programas de test. Echale un vistazo a la respuesta del programa test2-cgi de la página anterior. o simplemente en VBScript o JavaScript. evidentemente... 2011. .. el navegador puede remitirlos con un formato más sencillo y ya descodificado. y es el que define una zona de la página como formulario.midominio.htm"> igual que un link.mipais cuya respuesta será similar a la que hemos visto en la página de introducción a los formularios. Va acompañado de tres atributos: NAME.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="submit" VALUE="Procesar"></FORM> En la primera línea vemos el elemento de definición de formulario: <FORM>... se refiere al nombre que se le asigne al formulario.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. cosa imprescindible para poder programar el correspondiente CGI. son muy útiles cuando se están diseñando formularios. ACTION también puede realizar una acción en local. Se escribe: <FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"> . . Los datos enviados por el formulario. Para ello sólo hay que añadir el parámetro ENCTYPE con el valor TEXT/PLAIN. . se insertan otros elementos.<TEXTAREA> . Este sería el más elemental de los formularios. (si no tienes acceso. En una página puede haber varias zonas definidas como formulario. y convertidos al formato que se quiera.. Se verá con detalle el concepto de objeto en las secciones de programación de esta guia. por ejemplo traer una página: Se escribe: <FORM METHOD="POST" ACTION="indice.Campos de entrada por teclado. y pueden ser dos: POST y GET.. METHOD se refiere al método que emplearemos para enviar los datos al servidor.. METHOD y ACTION. Se escribe así: <FORM METHOD="POST" ACTION="mailto:miusuario@miservidor-e-mail" ENCTYPE="TEXT/PLAIN"> . ya que ahora no lo necesitamos. se utiliza el método GET.Listas fijas de valores. . PHP. que son los que realmente dibujan en pantalla los componentes del formulario. empieza a probar. pide a tu administrador de sistema que lo haga). y que además tiene la ventaja de que no sería preciso diseñar un CGI. Dentro de este elemento. .. . se necesitará un nombre. instálalo en tu servidor http. pero una vez recibidos por esta vía. es enviar un e-mail (correo electrónico) a un usuario o a una lista de usuarios.

que también es de longitud 10.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> </FORM> VALUE puede acompañar a SUBMIT . por defecto el visualizador le da el valor "Reset". Se escribe: <FORM METHOD="POST" ACTION="http://miserver. El elemento INPUT INPUT sin ningún atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una línea de ancho: Se escribe: <FORM> <INPUT> </FORM> <INPUT> admite varios atributos: SIZE define la longitud de la ventana de texto.midominio. es el formulario)..mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="RESET" VALUE="Inicializar"> </FORM> VALUE puede acompañar a RESET . Se escribe: <FORM METHOD="POST" ACTION="http://miserver. y en este caso sirve para definir el texto que queremos que tenga el botón en su interior. Se escribe: <FORM> <INPUT VALUE="HOLA" READONLY> </FORM> No funciona en versiones antiguas de los navegadores. Existe otro tipo llamado TYPE=BUTTON que genera un botón igual al generado por el tipo submit.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. y no vacía como hace por defecto: Se escribe: <FORM> <INPUT VALUE="HOLA"> </FORM> El valor puede ser modificado o barrado por el usuario. pero que no realiza ninguna acción. No es obligatorio que concidan ambos valores. Suele utilizarse para asociarle instrucciones en JavaScript o VBScript mediante el evento onClick.midominio. 2011. Puede omitirse. CUIDADO. si no es así hay que recurrir a un programa CGI o de otro tipo en el servidor que se encargue de hacerlo. Si escribes: <FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM> Como puedes comprobar. http://www.. y en este caso sirve para definir el texto que queremos que tenga el botón en su interior. 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 estén en formato oculto: Se escribe: <FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM> Esta opción se utiliza cuando es necesario enviar un valor fijo al servidor. MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana. TYPE=TEXT Es el valor por defecto de TYPE. Si se omite. pero omitiendo la parte correspondiente al cuerpo (body) del mismo. puedes definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o menor. TYPE=SUBMIT para generar un botón que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos. READONLY Sirve para que el valor de la ventana. 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"> . esto no es un formato encriptado. NAME define el nombre de la ventana (que en realidad es un campo dentro del registro.. pero no se desea que el usuario intervenga o que lo vea.. 22:30 ..kiubix. Se escribe: <FORM METHOD="POST" ACTION="http://miserver. es simplemente un botón "muerto" en cuanto a acciones directas. No es buena idea presuponer que todo el mundo tiene un cliente de correo instalado en su máquina. por defecto el visualizador le da el valor "Submit Query".midominio. que en conjunto.VALUE sirve para que la ventana aparezca con un valor predeterminado. sólo se pueden escribir 10 caracteres dentro de la ventana.kiubix. viendo el documento fuente se puede saber el valor de la ventana. </FORM> Esto funcionará siempre que en la máquina del cliente haya instalado algun programa que permita enviar correo electrónico.com/portal Powered by Joomla! Generated: 22 August. Si se omite. no pueda ser modificado por el usuario. que contiene un valor predeterminado.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="BUTTON" VALUE="No hace nada"> </FORM> TYPE=RESET para generar un botón que al ser pulsado inicializa todos los componentes del formulario.

y=n donde n son los números de las coordenas x y del punto en el que estaba el ratón en el momento del envío. los botones permiten seleccionar la clase A. VALUE="B" CHECKED></form> TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opción Clase A Clase B Se escribe: <FORM METHOD="POST" ACTION="http://miserver. Como ya se ha dicho antes.. por ejemplo clase B. 22:30 . VALUE="B" CHECKED></form> El elemento SELECTSELECT sin ningún 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 práctico. si se quieren mostrar más se utilizará el atributo SIZE. necesita de ciertos acompañantes que hacen su uso un poco más complicado: Aquí hay que echar mano de un atributo parametrizado de <FORM>: ENCTYPE="multipart/form-data" para generar un botón que permitirá buscar un fichero en nuestra máquina. y para entrar valores en la lista se usa el atributo OPTION. por defecto. hay que añadir el parámetro CHECKED después del valor: . la diferencia es que no hay que escribir en él sino escoger un valor de los que nos muestre al desplegarlo.TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opción Clase A Clase B Se escribe: <FORM METHOD="POST" ACTION="http://miserver...0 o superior. no sirve para nada. y que resulten de fácil lectura al usuario.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. Si se desea que por defecto un valor esté seleccionado. En este ejemplo se haría una conexión al servicio FTP general de la máquina remota. pero no sólo es capaz de enviar el formulario: también puede adjuntar al e-mail un fichero cualquiera.x=99&imagen.x=n . Sólo habría que cambiar la línea ACTION="ftp://miservidor/" METHOD="POST"> y escribir: ACTION="ftp://miusuario@miservidor/" METHOD="POST"> Otra forma más directa de hacer un FTP en las dos direcciones. hay que añadir el parámetro CHECKED después del valor: . la clase B o ninguna de las dos.com/portal Powered by Joomla! Generated: 22 August. 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 botón generado aparece con el texto "Browse. y sirve para enviar un fichero a una máquina remota (hacer FTP). o las dos. Lo que el formulario envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros . Lo único que hay que hacer es añadirle un instrucción como la que acabamos de ver para el FTP. ya que el formulario se cierra con la imagen. una excesiva longitud implica mayor tráfico por la red.com TYPE=FILE Este es un nuevo tipo que sólo funciona con Netscape 3.midominio.. pero se puede hacer a un directorio en particular de un usuario concreto. pero no funciona solo. las casillas de marca permiten seleccionar la clase A. 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 ratón.. ninguna.kiubix. hay que parametrizar el elemento. Valor 1Valor 2Valor 3 Se escribe: <FORM METHOD="POST" ACTION="http://miserver.gif"> </FORM> Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT..y=15 Prueba a pulsar en cualquier parte de esta imagen: Se escribe: <FORM METHOD="POST" ACTION="http://miserver." y no sirve de nada añadirle el parámetro VALUE para darle otro nombre. es desde la ventana "Location" del visualizador. Este sería un ejemplo de respuesta: imagen. La ventana de selección.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 selección se autoajusta al valor más largo de la lista.mipais/cgi-bin/test2-cgi"> <INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.. se usará el atributo NAME. Si se desea que por defecto un valor esté seleccionado. En primer lugar se le da nombre. la clase B. por ejemplo clase B. lo que http://www.midominio. el atributo ACTION es capaz de enviar el contenido del formulario por correo electrónico. 2011. Por supuesto. muestra una línea. ponerlo en una ventanita de entrada como las ya conocidas (por tanto tanbién se puede escribir directamente el nombre del fichero en lugar de buscarlo) y junto con un botón tipo submit enviar el fichero. ya que éste es un campo más del formulario. Se debe procurar que los contenidos de los campos sean lo más cortos posibles. todo esto si no tienes cuenta y permiso de escritura en la máquina remota. pero se deben construir las listas de forma clara. La sintaxis de los parámetros de ACTION son válidos en esa ventana. como se puede hacer con el botón de tipo submit.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.kiubix. Para presentar la imagen se utiliza el atributo SRC del elemento IMG.

Se puede hacer que haya un valor preseleccionado añadiendo el parámetro SELECTED al atributo OPTION.color:red" NAME="campo1"> <INPUT TYPE="text" STYLE="border:1. y las letras acentuadas y otros caracteres.kiubix. pueden aplicarse cambios de estilo a los formularios.midominio.com puede aumentar la longitud de los valores.background:yellow.midominio. Para enviar un valor diferente del que aparece en la lista. para que sea operativo. Para ello simplemente se escribirá el texto entre <TEXTAREA> y </TEXTAREA>. y hay cosas que se ven bien en unos navegadores y no se ven en otros. 2011. permite definir un área de texto en la pantalla en la que podemos escribir cualquier cosa. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows. 22:30 . Recuerda que las palabras en destino aparecen separadas por el signo +. ha aparecido una nueva prestación consistente en memorizar los datos introducidos en http://www. se pondrá el atributo MULTIPLE al elemento SELECT.midominio. deberá ir acompañado de los componentes necesarios para enviar e inicializar. y hay solo unos pocos efectos que se vean en todos ellos. tipo y anchura de bordes.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. sobre todo si la lista es larga. Se debe escribir ya parametrizada en cuanto a dimensiones. 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 conversión hexadecimal que utilizan la mayoría de visualizadores. dentro de un área de texto puede haber un contenido por defecto (que puede ser borrado o modificado por el usuario). ATENCION: Hay que tener en cuenta que los estilos no estan estandarizados. por defecto el visualizador enviará el primer valor de la lista.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 envía al servidor es "Valor 5". Con las listas desplegables es obligatorio seleccionar siempre un valor. color y tipo de letra del texto. y si no hay ninguno seleccionado. Por ejemplo: Se escribe así: <FORM METHOD="GET" ACTION=""> <INPUT TYPE="text" STYLE="background:yellow. Por supuesto. se utiliza el parámetro VALUE asociado al atributo OPTION. etc. No tiene otros atributos o posibles variantes. con los atributos ROWS (líneas) y COLS (COLUMNAS). Se escribe: <FORM METHOD="POST" ACTION="http://miserver.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. por valores hexadecimales precedidos del símbolo % Se puede proceder a la descodificación en el programa CGI que recibe los datos. 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. y si se quiere permitir más de una selección. a fin de que resulte más fácil encontrar la opción adecuada. Valor 1Valor 2Valor 3Valor 4Valor 5Valor 6Valor 7 Se escribe: <FORM METHOD="POST" ACTION="http://miserver. Estilos en los formulariosEn las últimas versiones de los dos navegadores más utilizados.com/portal Powered by Joomla! Generated: 22 August. altura y anchura del elemento.kiubix.color:red" VALUE="Procesar"> </FORM> Problemas de privacidad en los formulariosEn las últimas versiones del navegador Internet Explorer de Microsoft. lo que permite una presentación más sofisticada. Para ello se puede utilizar el parámetro optgroup.color:blue" readonly NAME="campo2" VALUE="Solo lectura"> <INPUT TYPE="button" STYLE="background:transparent. 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. En los elementos de formulario pueden redefinirse casi todos los parámetros: colores de fondo. como su nombre indica. o bien definir macros en programas auxiliares que serán ejecutados después. alineación del texto dentro del elemento.

muchas veces se utilizan formularios para tareas repetitivas.kiubix. de manera que cuando se accede a la página.com cualquier formulario de uso habitual. poco conocido en general.kiubix. .. ¿qué ocurre si el formulario está incluido en una página que es utilizada por numerosas personas en una sala común con máquinas públicas. Así: <FORM NAME="MI_FORMULARIO" METHOD="POST" AUTOMPLETE="OFF"> . Visto así suena incluso interesante.com/portal Powered by Joomla! Generated: 22 August. claro. En efecto. existe un parámetro... a condición de que el usuario sea siempre el mismo. que debe incluirse en la definición del formulario. puede ver los datos que escribió su antecesor en esa máquina. como una sala de usuarios o un cibercafé? Pues que si el siguiente usuario se conecta a la misma página.. Para evitarlo... Esto nos puede ahorrar tener que escribir cada vez lo mismo. y Microsoft pensó que sería 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 transacción. 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. 22:30 . </FORM> http://www.. 2011. y que no tiene ningún efecto en los navegadores que no tienen la costumbre de ser tan indiscretos. Porque. en las que casi siempre hay que introducir los mismos datos.