Manual HTML Actualizado

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual de HTML
HTML es el lenguaje utilizado como base para crear las pginas web. En este manual explicamos en profundidad cmo utilizarlo, desde lo ms bsico a los temas ms a anzados.
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (24 captulos)
Rubn Alvarez
edactor de DesarrolloWeb.com http://www.desarrolloweb.com (2! captulos)
Christian Santaluca
http://www.criarweb.com (2 captulos)
Luciano Moreno
"onsultor# dise$ador % desarrollador web en Desarrollador independiente &ara ede'(). Especialista en usabillidad % (2 captulos) dise$o centrado en el usuario. (* captulos)
Dairo Galeano
Manual de HTML: http://www.desarrolloweb.com/manuales/21/

+ ,os manuales de DesarrolloWeb.com tienen el cop%right de sus autores. -o reproducir sin autorizaci.n.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Parte 1:
Introduccin a HTML
/ntroducci.n al manual de 012, % al lengua3e de modelado de p4ginas web. 5eremos 6u7 es 012, % las primeras nociones 6ue nos a%udar4n a realizar las primeras pruebas de creaci.n de una p4gina web sencilla.
1.1. !r"logo al manual de #$ML

! "ui#n a dirigido este manual $ las lecturas aconsejadas antes de abordarlo. Bienvenidos al manual de HTML de DesarrolloWeb . A travs de todos estos captulos vamos a descubrir el lenguaje utilizado para la creacin de pginas web: el Hyper Text Markup Language, ms conocido como HTML. Puede que en un principio, el ec o de ablar de un lenguaje in!ormtico pare los pies a ms de uno. "o os asustis, el #$%& no deja de ser ms que una !orma un tanto peculiar de dar !ormato a los te'tos e imgenes que pretendemos ver por medio de un navegador. Antes de entrar en materia, lo cual aremos de una !orma directa ( practica, os recomendamos fervorosamente la lectura previa de nuestro manual Publicar en Internet. A partir de esta gua, aprenderis los conceptos ms bsicos necesarios para creacin de un sitio web. $ambin os permitir acceder a este manual con unos conocimientos de base sobre #$%& imprescindibles ( os dejara bien claro lo que su conocimiento aporta con respecto al simple uso de editores de #$%&. Adems, en dic o manual sobre la publicacin en )nternet, e'plicamos tambin algo tan importante como qu ace !alta para subir una pgina web realizada que tenemos en nuestro ordenador a un servidor de )nternet. *i lo deseamos, lo podemos ver en vdeo en el +ideotutorial sobre subir una web a )nternet. ,l p-blico al que va en!ocado este manual es a todos aquellos que, con conocimientos mnimos de in!ormtica, desean acer mundialmente p-blico un mensaje, una idea o una in!ormacin usando para ello el medio ms prctico, econmico ( actual: )nternet. &o que necesitis como base para llevar a buen trmino el aprendizaje .aparte de leer el manual Publicar en )nternet/ es: *aber escribir con un teclado *aber manejar un ratn $ener ganas de aprender
0omo podris ver, cualquier persona que sepa manejar un ordenador tiene los conocimientos bsicos para aprender #$%&. *i le pones un poco de ganas ( sigues este manual asta el !inal, tendrs las siguientes abilidades o conocimientos: 0apacidad para crear ( publicar vuestro propio sitio web con un mnimo de calidad. 0onocimientos de todo tipo sobre las tecnologas ( erramientas empleadas en el mbito de la 1ed.
2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Posiblemente una a!icin que puede convertirse en pasin ( terminar, en algunos casos, siendo un vicio o un o!icio.
Podis !ormular vuestras cuestiones (, esperamos que en un !uturo a(udar a otros compa2eros, enviando discusiones sobre #$%& o bien en la lista de correo de 3esarrollo4eb.com. Para quien no sepa nada sobre crear una pgina web, ( le gusta que le e'pliquen las cosas desde cero ( de manera visual, recomendamos ver el vdeo donde mostramos el proceso de creacin de la primera pgina bsica. Adems, para complementar las e'plicaciones de este manual, tambin recomendamos el videotutorial de #$%&. 5inalmente, antes de comenzar con el temario, queremos daros una re!erencia importante a la seccin #$%& a !ondo, donde publicamos todos los contenidos que tienen que ver con #$%& ( donde encontrars este ( otros manuales relacionados con el lenguaje. Pasemos pues sin ms prembulos a ver de qu se trata el #$%&...
Artculo por
Rubn Alvarez
1.%. &ntroducci"n al #$ML

Las primeras cosas "ue debes saber sobre HTML% &istoria, objeti os $ dems conocimientos donde sentar las bases del manual. HTML es el lengua e con el !ue se escriben las p"ginas #eb. &as pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo tanto que el #$%& es el lenguaje usado por los navegadores para mostrar las pginas webs al usuario, siendo o( en da la inter!ace ms e'tendida en la red. ,ste lenguaje nos permite aglutinar te'tos, sonidos e imgenes ( combinarlos a nuestro gusto. Adems, ( es aqu donde reside su ventaja con respecto a libros o revistas, el #$%& nos permite la introduccin de re!erencias a otras pginas por medio de los enlaces iperte'to. ,l #$%& se cre en un principio con objetivos divulgativos. "o se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el #$%& se cre sin dar respuesta a todos los posibles usos que se le iba a dar ( a todos los colectivos de gente que lo utilizaran en un !uturo. *in embargo, pese a esta de!iciente plani!icacin, si que se an ido incorporando modi!icaciones con el tiempo, estos son los estndares del #$%&. "umerosos estndares se an presentado (a. ,l #$%& 6.78 es el -ltimo estndar a septiembre de 9778. ,sta evolucin tan anrquica del #$%& a supuesto toda una seria de inconvenientes ( de!iciencias que an debido ser superados con la introduccin de otras tecnologas accesorias capaces de organizar, optimizar ( automatizar el !uncionamiento de las webs. ,jemplos que pueden sonaros son las 0**, :ava*cript u otros. +eremos ms adelante en qu consisten algunas de ellas. ;tros de los problems que an acompa2ado al #$%& es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una manera uni!icada. ,sto obliga al webmster a, una vez creada su pgina, comprobar que esta puede ser leda satis!actoriamente por todos los navegadores, o al menos, los ms utilizados. Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra erramienta capaz de crear la pgina en si. <n arc ivo #$%& .una pgina/ no es ms que un te'to. ,s por ello que para programar en #$%& necesitamos un editor de te'tos. ,s recomendable usar el =loc de notas que viene con windows, u otro editor de te'tos sencillo. #a( que tener cuidado con algunos editores ms complejos como 4ordpad o %icroso!t 4ord, pues colocan su propio cdigo especial al guardar las pginas ( #$%& es $nicamente texto plano, con lo que podremos tener problemas. ,'isten otro tipo de editores espec!icos para la creacin de pginas web los cuales o!recen muc as !acilidades que nos permiten aumentar nuestra productividad. "o obstante, es aconsejable en un principio utilizar una erramienta lo ms

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com sencilla posible para poder prestar la m'ima atencin a nuestro cdigo ( !amiliarizarnos lo antes posible con l. *iempre tendremos tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente ganancia de tiempo. Para tener ms claro todo el tema de editores ( los tipos que e'isten, visita los artculos: ,ditores de #$%&. =loc de notas. $ambin puedes acceder a descripciones editores ms complejos que el =loc> de "otas, pero ms potentes como #omesite o <ltra,dit.
,s importante tener claro todo ello puesto que en !uncin de vuestros objetivos puede que, ms que aprender #$%&, resulte ms interesante aprender el uso de una aplicacin para la creacin de pginas. As pues, una pgina es un arc ivo donde est contenido el cdigo #$%& en !orma de te'to. ,stos arc ivos tienen e'tensin . tml o . tm .es indi!erente cul utilizar/. 3e modo que cuando programemos en #$%& lo aremos con un editor de te'tos ( guardaremos nuestros trabajos con e'tensin . tml, por ejemplo mipgina. tml
%onse o& <tiliza siempre la misma e'tensin en tus arc ivos #$%&. ,so evitar que te con!undas al escribir los nombres de tus arc ivos unas veces con . tm ( otras con . tml. *i trabajas con un equipo en un pro(ecto todava ms importante que os pongis todos de acuerdo en la e'tensin.
Artculo por
Rubn Alvarez
1.'. Sinta(is del #$ML

'escripcin de la sintaxis con la "ue se trabaja en el lenguaje HTML, as( como la estructura "ue tendr el documento bsico HTML. ,l #$%& es un lenguaje de marcas que basa su sinta'is en un elemento de base al que llamamos etiqueta. A travs de las etiquetas vamos de!iniendo los elementos del documento, como enlaces, prra!os, imgenes, etc. As pues, un documento #$%& estar constituido por te'to ( un conjunto de etiquetas para de!inir la !orma con la que se tendr que presentar el te'to ( otros elementos en la pgina. &a etiqueta presenta !recuentemente dos partes: 'na apertura de !orma general ?etiqueta@ 'n cierre de tipo ?Aetiqueta@ $odo lo incluido en el interior de esa etiqueta su!rir las modi!icaciones que caracterizan a esta etiqueta. As por ejemplo: &as etiquetas ?b@ ( ?Ab@ de!inen un te'to en negrita. *i en nuestro documento #$%& escribimos una !rase con el siguiente cdigo:
<b>Esto esta en negrita</b>
,l resultado *er: (sto esta en negrita &as etiquetas ?p@ ( ?Ap@ de!inen un prra!o. *i en nuestro documento #$%& escribiramos:
<p>Hola, estamos en el prrafo 1</p> <p>Ahora hemos cambiado de prrafo</p>
,l resultado sera: #ola, estamos en el prra!o 8 A ora emos cambiado de prra!o

1.'.1. !artes de un documento #$ML

Adems de todo esto, un documento HTML )a de estar delimitado por la eti!ueta *)tml+ y *,)tml+ . 3entro de este documento, podemos asimismo distinguir dos partes principales: (l encabe-ado. delimitado por *)ead+ y *,)ead+ donde colocaremos etiquetas de ndole in!ormativo como por ejemplo el titulo de nuestra pgina. (l cuerpo. flan!ueado por las eti!uetas *body+ y *,body+, que ser donde colocaremos nuestro te'to e imgenes delimitados a su vez por otras etiquetas como las que emos visto. ,l resultado es un documento con la siguiente estructura:
<html>
? ead@ ,tiquetas ( contenidos del encabezado 3atos que no aparecen en nuestra pgina pero que son importantes para catalogarla: $itulo, palabras clave,... ?A ead@ ?bod(@ ,tiquetas ( contenidos del cuerpo Parte del documento que ser mostrada por el navegador: $e'to e imgenes ?Abod(@ ?A tml@
1.'.%. Las ma)*sculas o min*sculas son indi+erentes al escribir eti,uetas

A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de ma(-sculas ( min-sculas. ? tml@, ?#$%&@ o ?#t%l@ son la misma etiqueta. 1esulta sin embargo aconsejable acostumbrarse a escribirlas en min-scula (a que otras tecnologas que pueden convivir con nuestro #$%& .B%& por ejemplo/ no son tan permisivas ( nunca viene mal coger buenas costumbres desde el principio para evitar !allos triviales en un !uturo.
Artculo por
Rubn Alvarez
1.-. $u .rimera ./gina

)amos a er cmo se &ace una pgina mu$ sencilla en HTML, "ue sir a de prctica a los debutantes. Podemos (a con estos conocimientos, ( alguno que otro ms, crear nuestra primera pgina. Para ello, abre tu editor de te'tos ( copia ( pega el siguiente te'to en un nuevo documento.
<html>
? ead@ ?title@0ocina Para $odos?Atitle@ ?A ead@ ?bod(@ ?p@?b@=ienvenido,?Ab@?Ap@ ?p@,sts en la pgina ?b@0omida para $odos?Ab@.?Ap@ ?p@Aqu aprenders recetas !ciles ( deliciosas.?Ap@ ?Abod(@

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ?A tml@ A ora guarda ese arc ivo con e'tensin . tml o . tm en tu disco duro. Para ello accedemos al men- Arc ivo ( seleccionamos la opcin Cuardar como. ,n la ventana elegimos el directorio donde deseamos guardarlo ( colocaremos su nombre, por ejemplo miDpagina. tml
%onse o& <tiliza nombres en tus arc ivos que tengan algunas normas bsicas para a orrarte disgustos ( lios. "uestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. $ambin te a(udar escribir siempre las letras en min-sculas. ,sto no quiere decir que debes acer nombres de arc ivos cortos, es mejor acerlos descriptivos para que te aclaren lo que a( dentro. Alg-n caracter como el guin EFE o el guin bajo EDE te puede a(udar a separar las palabras. Por ejemplo quienesDsomos. tml
0on el documento #$%& creado, podemos ver el resultado obtenido a partir de un navegador. ,s conveniente, llegado a este punto, acer incapi en el ec o de que no todos los navegadores son idnticos. 3esgraciadamente, los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Ceneralmente se usan )nternet ,'plorer ( 5ire!o' como re!erencias (a que son los ms e'tendidos. A decir verdad, en el momento que estas lneas son escritas, )nternet ,'plorer acapara la inmensa ma(ora de usuarios .G7H ms o menos/ ( 5ire!o' esta relegado a un segundo plano. ,sto no quiere decir que lo debemos dejar totalmente de lado (a que el 87H de visitas que puede proporcionarnos puede resultar mu( importante para nosotros.
/ota& ,n la disputa por ser el navegador ms usado, en la actualidad otros productos vienen tomando !uerza como 0 rome, el navegador de Coogle. Para el que le interese este tema ( conocer datos reales sobre los porcentajes de uso de cada navegador, se puede leer uno de los in!ormes que publicamos peridicamente, como el ran>ing de uso de los navegadores en noviembre de 9787.
Pues bien, volviendo al tema, una vez creado el arc ivo . tml o . tm, podemos visualizar el resultado de nuestra labor abriendo dic a pgina con un navegador. Para acerlo, la !orma resulta di!erente dependiendo del navegador: *i estamos empleando el ,'plorer, emos de ir al barra de men-, elegir Arc ivo ( seleccionar Abrir. <na ventana se abrir. Pulsamos sobre el botn ,'aminar ( accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro asta dar con el arc ivo que deseamos abrir. &a cosa no resulta ms di!cil para "etscape. ,n este caso, nos dirigimos tambin a la barra de men- principal ( elegimos 5ile ( a continuacin ;pen 5ile. &a misma ventana de b-squeda nos permitir escudri2ar el contenido de nuestro P0 asta dar con el arc ivo buscado.
/ota& $ambin puedes abrir el arc ivo si accedes al directorio donde lo guardaste. ,n l podrs encontrar tu arc ivo #$%& ( vers que tiene como icono el logotipo de "etscape o el de )nternet ,'plorer. Para abrirlo simplemente acemos un doble clic> sobre l.
<na vez abierto el arc ivo podris ver vuestra primera pgina web. Algo sencillita pero por algo se empieza. Ia veris como en poco tiempo seremos capaces de mejorar sensiblemente. 5ijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la presencia del te'to delimitado por la etiqueta ?title@. ,sta es una de las !unciones de esta etiqueta, cu(o principal cometido es el de servir de re!erencia en los motores de b-squeda como Altavista o Ia oo.

Por otro lado, los elementos que colocamos entre la etiqueta ?bod(@ ( ?Abod(@ se pueden ver en el espacio reservado para el cuerpo de la pgina. *e puede ver la pgina del ejemplo en !uncionamiento aqu. *i a ora acis clic> con el botn derec o sobre la pgina ( elegs +er cdigo !uente .o +iew page source/ veris como en una ventana accesoria aparece el cdigo de nuestra pgina. ,ste recurso es de e'tremada importancia (a que nos permite ver el tipo de tcnicas empleadas por otros para la con!eccin de sus pginas. 0on todo esto asimilado (a estamos en condiciones de adentrarnos un poco ms en la descripcin de algunas de las etiquetas ms empleadas del #$%&.
Posible problema& Al utilizar el =loc> de "otas en 4indows en ocasiones, aunque le digamos que es un arc ivo . tml, el documento se guarda como si !uera un te'to ( no una pgina web. &o que est pasando es que el =loc> de "otas tiene predeterminado guardar sus arc ivos con e'tensin .t't ( en realidad lo que est guardando en el disco duro es miDpagina. tml.t't Para conseguir tener el control de las e'tensiones en el bloc> de notas ( en 4indows en general podemos acceder a %)FP0 ( en el mende +er seleccionis E;pciones de carpetaE. ,n la ventana que sale pulsamos en la solapa E+erE ( nos permite deseleccionar una caja de seleccin que pone algo como E;cultar e'tensiones para los tipos de arc ivos conocidosE. .As se ace en 4inGJ, puede variar un poco en otras versiones de 4indows./ 0on ello conseguiremos que se vea siempre la e'tensin del arc ivo con el que estamos trabajando ( que el =loc> de "otas nos aga caso cuando le indicamos que grabe el arc ivo con otra e'tensin que no sea .t't
Artculo por
Rubn Alvarez

Parte 2:
Formatos bsicos con HTML

".mo realizar el 8ormato de te9tos 6ue se colocan en una p4gina web. :prende a utilizar tus primeras eti6uetas 012, % atributos para de8inir los contenidos de la p4gina % aplicar un 8ormato b4sico.
%.1. 0ormato de ./rra+os en #$ML

*mo colocar prrafos $ saltos de l(nea en pginas web. Tambi#n emos los encabezados como prrafos "ue sir en de titulo. ,n los captulos anteriores emos presentado a titulo de ejemplo algunas etiquetas que permiten dar !ormato a nuestro te'to. ,n este capitulo veremos con ms detalle las ms ampliamente utilizadas ( ejempli!icaremos algunas de ellas posteriormente. 5ormatear un te'to pasa por tareas tan evidentes como de!inir los prra!os, justi!icarlos, introducir vi2etas, numeraciones o bien poner en negrita, itlica... #emos visto que para de!inir los prra!os nos servimos de la etiqueta ?p@ que introduce un salto ( deja una lnea en blanco antes de continuar con el resto del documento. Podemos tambin usar la etiqueta ?br@, de la cual no e'iste su cierre correspondiente .?Abr@/, para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo cambiamos de lnea.
/ota& ,'isten otras etiquetas que no tienen su correspondiente de cierre, como ?img@ para las imgenes, las veremos ms adelante. ,sto ocurre porque un salto de lnea o una imagen no empiezan ( acaban ms adelante sino que slo tienen presencia en un lugar puntual.
Podis comprobar que cambiar de lnea en nuestro documento #$%& sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. ,n realidad el navegador introducir el te'to ( no cambiara de lnea a no ser que esta llegue a su !in o bien lo especi!iquemos con la etiqueta correspondiente. &os prra!os delimitados por etiquetas ?p@ pueden ser !cilmente justi!icados a la izquierda, centro o derec a especi!icando dic a justi!icacin en el interior de la etiqueta por medio de un atributo align. <n atributo no es ms que un parmetro incluido en el interior de la etiqueta que a(uda a de!inir el !uncionamiento de la etiqueta de una !orma ms personal. +eremos a lo largo de este manual cantidad de atributos mu( -tiles para todo tipo de etiquetas. As, si desesemos introducir un texto alineado a la i-!uierda escribiramos:
<p align="left">Texto alineado a la i !"ierda</p>
,l resultado seria:

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com $e'to alineado a la izquierda Para una ustificaci0n al centro:
<p align="center">Texto alineado al centro</p>
que dara: $e'to alineado al centro Para ustificar a la derec)a:

<p align="right">Texto alineado a la derecha</p>
cu(o e!ecto seria: $e'to alineado a la derec a 0omo veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. ,n algunas ocasiones necesitamos especi!icar algunos atributos para el correcto !uncionamiento de la etiqueta. ,n otros casos, el propio navegador toma un valor de!inido por de!ecto. Para el caso de align, el valor por de!ecto es le!t.
/ota& &os atributos tienen sus valores indicados entre comillas .E/, pero si no los indicamos entre comillas tambin !uncionar en la ma(ora de los casos. *in embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar omogeneidad a nuestros cdigos ( para evitar errores !uturos en sistemas ms quisquillosos.
,l atributo align no es e'clusivo de la etiqueta ?p@. ;tras etiquetas mu( comunes, que veremos ms adelante, entre las cuales se introducen te'to o imgenes, suelen acer uso de este atributo de una !orma abitual. )maginemos un te'to relativamente largo donde todos los prra!os estn alineados a la izquierda .por ejemplo/. <na !orma de simpli!icar nuestro cdigo ( de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta ?div@. ,sta etiqueta por si sola no sirve para nada. $iene que estar acompa2ada del atributo align ( lo que nos permite es alinear cualquier elemento .prra!o o imagen/ de la manera que nosotros deseemos. As, el cdigo:
<p align="left">#arrafo1</p> <p align="left"> #arrafo$</p> <p align="left"> #arrafo%</p>
es equivalente a:
<di& align="left"> <p>#arrafo1</p> <p>#arrafo%</p> <p>#arrafo$</p> </di&>
0omo emos visto, la etiqueta ?div@ marca divisiones en las que de!inimos un mismo tipo de alineado.
%.1.1. 12em.lo .r/ctico3

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis resolver en vuestros ordenadores. *implemente queremos construir una pgina que tenga, por este orden: 9 Prra!os centrados K Prra!os alineados a la derec a <n salto de lnea triple 8 prra!o alineado a la izquierda

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com "o vamos a escribir en esta ocasin el cdigo !uente del ejercicio. Podemos verlo en !uncionamiento en nuestro navegador ( en la ventana podemos obtener el cdigo !uente seleccionando en el men- +er la opcin 0digo !uente. +er el ejercicio en marc a.
%.1.%. 1ncabezados
,'isten otras etiquetas para de!inir prra!os especiales, !ormateados como ttulos. *on los encabezados o #eader en ingls. 0omo decimos, son etiquetas que !ormatean el te'to como un titular, para lo cual asignan un tama2o ma(or de letra ( colocan el te'to en negrita. #a( varios tipos de encabezados, que se di!erencian en el tama2o de la letra que utilizan. &a etiqueta en concreto es la ? 8@, para los encabezados ms grandes, ? 9@ para los de segundo nivel ( as asta ? L@ que es el encabezado ms peque2o. &os encabezados implican tambin una separacin en prra!os, as que todo lo que escribamos dentro de ? 8@ ( ?A 8@ .o cualquier otro encabezado/ se colocar en un prra!o independiente. Podemos ver cmo se presentan algunos encabezados a continuacin.
<h1>Encabe ado de ni&el 1</h1>
*e ver de esta manera en la pgina:
Encabezado de nivel 1
&os encabezados, como otras etiquetas de #$%&, soportan el atributo align. +emos un ejemplo de encabezado de nivel 9 alineado al centro.
<h% align="center">Encabe ado de ni&el %</h%>
*e ver de esta manera en la pgina:
Encabezado de nivel 2
;tro ejercicio interesante es construir una pgina web que contenga todos los encabezados posibles. *e puede ver a continuacin.
<html>
? ead@ ?title@$odos los encabezados?Atitle@ ?A ead@ ?bod(@ ? ? ? ? ? ? 8@,ncabezado de nivel 8?A 9@,ncabezado de nivel 9?A K@,ncabezado de nivel K?A 6@,ncabezado de nivel 6?A M@,ncabezado de nivel M?A L@,ncabezado de nivel L?A 8@ 9@ K@ 6@ M@ L@
?Abod(@ ?A tml@

10
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com *e puede ver el ejercicio en una pgina aparte.
%onse o& "o debemos utilizar las etiquetas de encabezado para !ormatear el te'to, es decir, si queremos colocar un tipo de letra ms grande ( en negrita debemos utilizar las etiquetas que e'isten para ello .que veremos en seguida/. &os encabezados son para colocar titulares en pginas web ( es el navegador el responsable de !ormatear el te'to de manera que parezca un titular. 0ada navegador, pues, puede !ormatear el te'to a su gusto con tal de que parezca un titular.
Artculo por
Rubn Alvarez
%.%. 0ormateando el te(to

)emos como colocar negritas, itlicas, subra$ados, sub(ndices $ supre(ndices. Adems de todo lo relativo a la organizacin de los prra!os, uno de los aspectos primordiales del !ormateo de un te'to es el de la propia letra. 1esulta mu( com-n ( prctico presentar te'to resaltado en negrita, itlica ( otros. Paralelamente el uso de ndices, subndices resulta vital para la publicacin de te'tos cient!icos. $odo esto ( muc o ms es posible por medio del #$%& a partir de multitud de etiquetas entre las cuales vamos a destacar algunas.
%.%.1. 4egrita
Podemos escribir te'to en negrita inclu(ndolo dentro de las etiquetas ?b@ ( ?Ab@ .bold/. ,sta misma tarea es desempe2ada por ?strong@ ( ?Astrong@ siendo ambas equivalentes. "osotros nos inclinamos por la primeras por simple razon de es!uerzo. ,scribiendo un cdigo de este tipo:
<b>Texto en negrita</b>
;btenemos este resultado: Texto en negrita

/ota& NOu di!erencia a( entre ?b@ ( ?strong@P Aunque las dos etiquetas acen el mismo e!ecto, tienen una peculiaridad que las ace distintas. &a etiqueta ?b@ indica negrita, mientras que la etiqueta ?strong@ indica que se debe escribir resaltado. ,l #$%& lo interpretan los navegadores seg-n su criterio, es por eso que las pginas se pueden ver de distinta manera en unos browsers ( en otros. &a etiqueta ?#8@ quiere decir Eencabezado de nivel 8E, es el navegador el responsable de !ormatear el te'to de manera que parezca un encabezado de primer nivel. ,n la prctica los encabezados de )nternet ,'plorer ( "etscape son mu( parecidos .tama2o de letra grande ( en negrita/, pero otro navegador podra colocar los encabezados con subra(ado si le pareciese oportuno. &a di!erencia entre ?b@ ( ?strong@ se podr entender a ora. %ientras que ?b@ signi!ica simplemente negrita ( todos los navegadores la interpretarn como negrita, ?strong@ es una etiqueta que signi!ica que se tiene que resaltar !uertemente el te'to ( cada navegador es el responsable de resaltarlo como desee. ,n la prctica ?strong@ coloca el te'to en negrita, pero podra ser que un navegador decidiese resaltar colocando negrilla, subra(ado ( color rojo en el te'to.
%.%.%. &t/lica
$ambin en este caso e'isten dos posibilidades, una corta: ?i@ e ?Ai@ .italic/ ( otra un poco ms larga: ?em@ ( ?Aem@. ,n este manual, ( en la ma(ora de las pginas que veris por a , os encontraris con la primera !orma sin duda ms sencilla a escribir ( a acordarse. #e aqu un ejemplo de te'to en itlica:
<i>Texto en itlica</i>

11
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Oue da el siguiente e!ecto: Texto en itlica
%.%.'. Subra)ado
,l #$%& nos propone tambin para el subra(ado el par de etiquetas: ?u@ ( ?Au@ .underlined/. *in embargo, el uso de subra(ados a de ser aplicado con muc a precaucin dado que los enlaces iperte'to van, a no ser que se indique lo contrario, subra(ados con lo que podemos con!undir al lector ( apartarlo del verdadero inters de nuestro te'to.
%.%.-. Subndices ) su.randices

,ste tipo de !ormato resulta de e'tremada utilidad para te'tos cient!icos. &as etiquetas empleadas son:
<s"p> ' </s"p> para los s"pra(ndices <s"b> ' </s"b> para los s"b(ndices
Aqu tenis un ejemplo:

)a <s"p>1$</s"p>**<s"b>$</s"b>H<s"b>+</s"b>*l,-. es "n heterociclo alergeno enri!"ecido
,l resultado: &a 8K00K#60l";* es un eterociclo alergeno enriquecido
%.%.5. Anidar eti,uetas

$odas estas etiquetas ( por supuesto el resto de las vistas ( que veremos ms adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados di!erentes. As, podemos sin ning-n problema crear te'to en negrita e itlica embebiendo una etiqueta dentro de la otra:
<b>Esto s/lo est en negrita <i>' esto en negrita e itlica</i></b>
,sto nos daria: (sto s0lo est" en negrita y esto en negrita e itlica
%onse o& 0uando anides etiquetas #$%& azlo correctamente. "os re!erimos a que si abres etiquetas dentro de otra ms principal, antes de cerrar la etiqueta principal cierres las etiquetas que a(as abierto dentro de ella. 3ebemos evitar cdigos como el siguiente: <b>Esto est en negrita e <i>itlica</b></i> ,n !avor de cdigos con etiquetas correctamente anidadas: <b>Esto est en negrita e <i>itlica</i></b>
,sto es mu( aconsejable, aunque los navegadores entiendan bien las etiquetas mal anidadas, por dos razones:
8.
*istemas como B%& no son tan permisivos con estos errores ( puede que en el !uturo nuestras pginas no !uncionen correcamente. A los navegadores les cuesta muc o tiempo de procesamiento resolver este tipo de errores, incluso ms que construir la propia pgina ( debemos evitarles que su!ran por una mala codi!icacin.
9.
$odo lo que se a visto asta el momento en el %anual de #$%& se puede ver en un vdeo para aprender visualmente. *i te interesa puedes acceder al +ideotutorial de #$%& F Parte 8, documento bsico ( !ormato de te'to.

12
Artculo por
Rubn Alvarez
%.'. Color6 tama7o ) ti.o de letra

+eguimos aprendiendo eti"uetas "ue nos sir en para formatear el texto. A pesar de que por razones de omogeneidad ( sencillez de codigo este tipo de !ormatos son controlados actualmente por ojas de estilo en cascada .de las cuales (a tendremos tiempo de ablar/, e'iste una !orma clsica ( directa de de!inir color tama2o ( tipo de letra de un te'to determinado. ,sto se ace a partir de la etiqueta ?!ont@ ( su cierre correspondiente. 3entro de esta etiqueta deberemos especi!icar los atributos correspondientes a cada uno de estos parmetros que deseamos de!inir. A continuacin os comentamos los atributos principales de esta etiqueta:
%.'.1. Atributo +ace

3e!ine el tipo de letra. ,ste atributo es interpretado por versiones de "etscape a partir de la K ( de %*), K o superiores. ;tros navegadores las ignoran completamente ( muestran el te'to con la !uente que utilizan. #a( que tener cuidado con este atributo (a que cada usuario, dependiendo de la plata!orma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver !orzado a mostrar el te'to con la !uente que utiliza por de!ecto .suele ser $imes "ew 1oman/. Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. ,n este caso el navegador comprobar que dispone del primer tipo enumerado ( si no es as, pasar al segundo ( as sucesivamente asta encontrar un tipo que posea o bien acabar la lista ( poner la !uente por de!ecto. +eamos un ejemplo.
<font face="*omic .ans 0.,arial,&erdana">Este texto tiene otra tipograf(a</font>
Oue se visualizara as en una pgina web. Este texto tiene otra tipografa
/ota& Aqu tenemos un ejemplo de atributo cu(o valor debe estar limitado por comillas .E/. #abamos dic o que las comillas eran opcionales en los atributos, sin embargo esto no es as siempre. *i el valor del atributo contiene espacios, como es el caso de:
!aceQE0omic *ans %*,arial,verdanaE
debemos colocar las comillas para limitarlo. ,n caso de no tener comillas
!aceQ0omic *ans %*,arial,verdana
se entendera que !aceQ0omic, pero no se tendra en cuenta todo lo que sigue, porque #$%& no lo asociara al valor del atributo. ,n este caso #$%& pensara que las siguientes palabras .despus del espacio/ son otros atributos, pero como no los conoce como atributos simplemente los desestimar.

13
%.'.%. Atributo size

3e!ine el tama2o de la letra. ,ste tama2o puede ser absoluto o relativo. *i ablamos en trminos absolutos, e'isten R niveles de tama2o distintos numerados de 8 a R por orden creciente. ,legiremos por tanto un valor sizeQE8E para la letra ms peque2a o sizeQERE para la ms grande.
<font si e=+>Este texto es ms grande</font>
Oue se visualizara as en una pgina web.
,ste te'to es ms grande

Podemos asimismo modi!icar el tama2o de nuestra letra con respecto al del te'to mostrado precedentemente de!iniendo el n-mero de niveles que queremos subir o bajar en esta escala de tama2os por medio de un signo S o F. 3e este modo, si de!inimos nuestro atributo como sizeQES8E lo que queremos decir es que aumentamos de un nivel el tama2o de la letra. *i estabamos escribiendo previamente en K, pasaremos automticamente a 6. &os tama2os reales que veremos en pantalla dependern de la de!inicin ( del tama2o de !uente elegido por el usuario en el navegador. ,ste tama2o de !uente puede ser de!inido en el ,'plorer (endo al menu superior, +erA$ama2o de la !uente. ,n "etscape elegiremos +iewA$e't *ize. ,sta !le'ibilidad puede en ms de una ocasin resultarnos embarazosa (a que en muc os casos desearemos que el tama2o del te'to permanezca constante para que ste quepa en un determinado espacio. +eremos en su momento que esta pre!ijacin del tama2o puede ser llevada a cabo por las ojas de estilo en cascada.
%.'.'. Atributo color

,l color del te'to puede ser de!inido mediante el atributo color. 0ada color es a su vez de!inido por un n-mero e'adecimal que esta compuesto a su vez de tres partes. 0ada una de estas partes representa la contribucin del rojo, verde ( azul al color en cuestin. Podis entender cmo !unciona esta numeracin ( cules son los colores que resultan ms compatibles a partir de este artculo: &os colores ( #$%&. Por otra parte, es posible de!inir de una manera inmediata algunos de los colores ms !recuentemente usados para los que se a creado un nombre ms memotcnico:
4ombre Color :6ua 'lac; 'lue <uchsia =ra% =reen ,ime 2aroon -a>% ?li>e &urple ed )il>er

14
1eal White @ellow

<font color="red">Este texto est en ro1o</font>
Oue se visualizara as en una pgina web. ,ste te'to est en rojo 0on todo esto estamos (a en disposicion de crear un te'to !ormateado de una !orma realmente elaborada. Pongamos pues en practica todo lo que emos aprendido en estos capitulos aciendo un ejercicio consistente en una pgina que tenga las siguientes caractersticas: <n titular con encabezado de nivel 8, en itlica ( color verde oliva. <n segundo titular con encabezado de nivel 9, tambin de color verde oliva. $odo el te'to de la pgina deber presentarse con una !uente distinta de la !uente por de!ecto. Por ejemplo E0omic *ans %*E ( en caso de que sta no est en el sistema que se coloque la !uente EArialE.
*e puede ver una posible solucin del ejercicio en este enlace. .+er el cdigo !uente de la pgina para ver cmo lo emos resuelto/
Artculo por
Rubn Alvarez
%.-. Los colores ) #$ML

En este reportaje tratamos de acercarte todos los detalles relati os al buen uso de colores en HTML. *olores compatibles con todos los sistemas. ,l la composicin de webs juegan un papel mu( importante los colores. *e indican en valores 1C=, es decir, que para conseguir un color cualquiera mezclaremos cantidades de 1ojo, +erde ( Azul. &os valores 1=C se indican en numeracin e'adecimal, en base 8L. .&os dgito pueden crecer asta 8L. 0omo no a( tantos dgitos numricos se utilizan las letras de la A a la 5.
ABA DBD 2B2 !B!
4B4 EBE *B* GBG
CBC FBF :BDA 'BDD
"BD2 DBD! EBD4 <BDE
$abla de color
Para conseguir un color, mezclaremos valores de esta manera:
1122BB
Donde cada valor puede crecer desde 33 )asta 445
%.-.1. 12em.lo
0mo se cambiara la !uente para escribir en rojo:
<font color="2334444">5o1o</font>
Al Atributo color le damos un valor 1C= en !ormato e'adecimal. ,l caracter T se coloca al principio de la cadena.

15
%.-.%. 8tros colores

4aran2a <erde tur,uesa Azul oscuro 900:;;; 9''==>> 9;;;;:;
%.-.'. Colores com.atibles en todos los sistemas

0omo las pginas web las tienen que ver todos los usuarios, ( los sistemas que utilizan para entrar son distintos, a( que utilizar colores compatibles con la paleta de todos ellos. &a !orma de conseguir esto es limitando nuestros colores alos que se pueden conseguir utilizando la siguiente norma:
?tilizaremos siem.re estos valores3
;; '' >> == CC 00 ( emplos& 6778844 6449933 6888888 :e consiguen los colores siguientes& Por -ltimo, te o!recemos unos arc ivos con programillas en :ava*cript que te pueden a(udar a encontrar los colores adecuados. ,ntro otros, podrs encontrar el script que genera la tabla de arriba. %olores5-ip ;8<b
Artculo por
%.5. Atributos .ara ./ginas

Explicamos una serie de atributos "ue se aplican de manera global a toda la pgina, como el color de fondo el del texto, de los enlaces, mrgenes, etc. &as pginas #$%& pueden construirse con variedad de atributos que le pueden dar un aspecto a la pgina mu( personalizado. Podemos de!inir atributos como el color de !ondo, el color del te'to o de los enlaces. ,stos atributos se de!inen en la etiqueta ?bod(@ (, como decamos son generales a toda la pgina. &o mejor para e'plicar su !uncionamiento es verlos uno por uno.
%.5.1. Atributos .ara +ondos

bgcolor: especi!icamos un color de !ondo para la pgina. ,n el captulo anterior ( en el taller de los colores ( #$%& emos aprendido a construir cualquier color, con su nombre o su valor 1C=. ,l color de !ondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la super!icie del navegador. background: sirve para indicar la colocacin de una imagen como !ondo de la pgina. &a imagen se coloca aciendo un mosaico, es decir, se repite muc as veces asta ocupar todo el espacio del !ondo de la pgina. ,n captulos ms adelante veremos como se insertan imgenes con #$%& ( los tipos de imgenes que se pueden utilizar.

16
%.5.%. 12em.lo de +ondo

+amos a colocar esta imagen como !ondo en la pgina.
&a imagen se llama !ondo.jpg ( suponemos que se encuentra en el mismo directorio que la pgina. ,n este caso se colocara la siguiente etiqueta ?bod(@
<bod' bac6gro"nd="fondo71pg">
*e puede ver el e!ecto de colocar ese !ondo en una pgina a parte.

%onse o: siempre que coloquemos una imagen de !ondo, debemos poner tambin un color de !ondo cercano al color de la imagen. ,sto se debe a que, al colocar una imagen de !ondo, el te'to de la pgina debemos colocarlo en un color que contraste su!icientemente con dic o !ondo. *i el visitante no puede ver el !ondo por cualquier cuestin .Por ejemplo tener des abilitada la carga de imgenes/ puede que el te'to no contraste lo su!iciente con el color de !ondo por de!ecto de la web. 0reo que lo mejor ser poner un ejemplo. *i la imagen de !ondo es oscura, tendremos que poner un te'to claro para que se pueda leer. *i el visitante que accede a la pgina no ve la imagen de !ondo, le saldr el !ondo por de!ecto, que generalmente es blanco, de modo que al tener un te'to con color claro sobre un !ondo blanco, nos pasar que no podremos leer el te'to convenientemente. ;curre parecido cuando se est cargando la pgina. *i todava no a llegado a nuestro sistema la imagen de !ondo, se ver el !ondo que a(amos seleccionado con bgcolor ( es interesante que sea parecido al color de la imagen para que se pueda leer el te'to mientras se carga la imagen de !ondo.
%.5.'. Color del te(to

text: este atributo sirve para asignar el color del te'to de la pgina. Por de!ecto es el negro. Adems del color del te'to, tenemos tres atributos para asignar el color de los enlaces de la pgina. Ia debemos saber que los enlaces deben di!erenciarse del resto del te'to de la pgina para que los usuarios puedan identi!icarlos !cilmente. Para ello suelen aparecer subra(ados ( con un color ms vivo que el te'to. &os tres atributos son los siguientes: link: el color de los enlaces que no an sido visitados. .por de!ecto es azul clarito/ vlink: el color de los enlaces visitandos. &a EvE viene justamente de la palabra visitado. ,s el color que tendrn los enlaces que (a emos visitado. Por de!ecto su color es morado. ,ste color debera ser un poco menos vivo que el color de los enlaces normales. alink: es el color de los enlaces activos. <n enlace est activo en el preciso instante que se pulsa. A veces es di!cil darse cuenta cuando un enlace est activo porque en el momento en el que se activa es porque lo estamos pulsando ( en ese caso el navegador abandonar la pgina rpidamente ( no podremos ver el enlace activo ms que por unos instantes mnimos.
%.5.-. 12em.lo de color del te(to

+amos a ver una pgina donde el color de !ondo sea negro, ( los colores del te'to ( los enlaces sean claros. Pondremos el color de te'to balnco ( los enlaces amarillos, ms resaltados los que no estn visitados ( menos resaltados lo que (a estn visitados. Para ello escribiramos la etiqueta bod( as:
<bod' bgcolor="2444444" text="2ffffff" lin6="2ffff$$" alin6="2ffffcc" &lin6="ffff44">
,l e!ecto se puede ver en una pgina a parte.

17
%.5.5. M/rgenes
0on otros atributos de la etiqueta ?bod(@ se pueden asignan espacios de margen en las pginas, lo que es mu( -til para eliminar los mrgenes en blanco que aparecen a los lados, arriba ( debajo de la pgina. ,stos atributos son distintos para )nternet ,'plorer ( para "etscape "avigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten per!ectamente. leftmargin: para indicar el margen a los lados de la pgina. +lido para ie'plorer. topmargin: para indicar el margen arriba ( debajo de la pgina. Para ie'plorer. margin#idt): la contrapartida de le!tmargin para "etscape. .%argen a los lados/ margin)eig)t: igual que topmargin, pero para "etscape. .%argen arriba ( abajo/ $enemos un artculo sobre la utilizacin de estos atributos para acer dise2os avanzados con tablas en distintas de!iniciones de pantalla, que puede ser interesante de leer. <n ejemplo de pgina sin margen es la propia pgina de 3esarrollo4eb.com, que ests visitando actualmente. .Por lo menos a la ora de escribir este artculo/ Adems, vamos a ver otra pgina sin mrgenes, por si alguien necesita ver el ejemplo en estas lneas.
<bod' topmargin=4 leftmargin=4 marginheight=4 margin8idth=4 bgcolor="ffffff"> <table 8idth=1449 bgcolor=ff::::><tr><td> <h1>Hola amigos</h1> <br> <br> ;racias por &isitarme< </td></tr></table> </bod'>
,sta pgina tiene el !ondo blanco ( dentro una tabla con el !ondo rojo. ,n la pgina podremos ver que la tabla ocupa el espacio en la pgina sin dejar sitio para ning-n tipo de margen. Puede verse el ejemplo en una pgina a parte. $odo lo que emos visto asta a ora en el %anual de #$%& lo podemos encontrar en vdeo ( en concreto las e'plicaciones de los -ltimos artculos se an recogido en el +deotutorial de #$%& F 5uentes, colores ( estilos de =;3I.
Artculo por
%.>. Caracteres es.eciales

,na referencia -til, $ una lista completa de los caracteres especiales del HTML. <na pgina web se a de ver en paises distintos, que usan conjuntos de caracteres distintos. ,l lenguaje #$%& nos o!rece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres. ,ste conjunto son los caracteres especiales. 0uando queremos poner uno de estos caracteres en una pgina, debemos sustituirlo por su cdigo. Por ejemplo, la E"E .a min-scula acentuada/ se escribe E=aacute>E de modo que la palabra pgina se escribira en una pgina #$%& de este modo: pUaacuteVgina
%.>.1. Caracteres es.eciales b/sicos

,n realidad estos caracteres se usan en #$%& para no con!undir un principio o !inal de etiqueta, unas comillas o un U con su correspondiente caracter.

18
HltI HampI
J H
HgtI H6uotI
K L
%.>.%. Caracteres es.eciales del #$ML %.;

H:acuteI HEacuteI H/acuteI H?acuteI HUacuteI HaacuteI HeacuteI HiacuteI HoacuteI HuacuteI H:umlI HEumlI H/umlI H?umlI HUumlI HaumlI HeumlI HiumlI HoumlI HuumlI H:tildeI H-tildeI H?tildeI HatildeI HntildeI HotildeI H?slashI HoslashI HE10I HethI HszligI M O Q S V 4 7 . \ ^ ` b d f h j l n p r t v x $ { } H:gra>eI HEgra>eI H/gra>eI H?gra>eI HUgra>eI Hagra>eI Hegra>eI Higra>eI Hogra>eI Hugra>eI H:circI HEcircI H/circI H?circI HUcircI HacircI HecircI HicircI HocircI HucircI HaringI H:ringI H"cedilI HccedilI H@acuteI H%acuteI H%umlI H10? -I HthornI H:EligI HaeligI N P R T W X Y Z [ ] _ a c e g i k m o q s u w y z | ~

19
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com %aracteres especiales del HTML 75?
H8racD4I H8racD2I H8rac!4I Hcop%I HregI Hord8I Hsup2I Hsup!I HsupDI HmacrI HmicroI HparaI HmiddotI HdegI HcedilI Hi6uestI
HnbspI Hie9clI HpoundI H%enI HsectI HcurrenI Hbr>barI Hla6uoI HnotI Hsh%I HordmI HacuteI HumlI HplusmnI Hra6uoI
%.>.'. 8tros caracteres es.eciales

HtimesI Hdi>ideI HD4GI HD4CI HD4AI HD!EI HcentI HeuroI HDE!I HD!GI HD!DI HD!4I -
Para descargar la lista de caracteres especiales:
caracteresespeciales5-ip ?<b
1eferencia& #a( un videotutorial en 3esarrollo4eb.com que trata sobre enlaces ( caracteres especiales. "o son temas mu( relacionados entre si, pero seguro que nos sirve como prctica para aprender todo lo que se a tratado en este artculo.
Artculo por

20
Parte 3:
Listas en HTML
: continuaci.n comenzaremos a e9plicar las listas de 012, 6ue implican >arias eti6uetas para crear su estructura. 5eremos >arios tipos de listas 6ue se pueden utilizar para di>ersos ob3eti>os.
'.1. Listas & Listas desordenadas

)emos lo "ue son las listas $ se.alamos los tres tipos "ue &a$. Estudiamos las listas desordenadas. &as posibilidades que nos o!rece el #$%& en cuestin de tratamiento de te'to son realmente notables. "o se limitan a lo visto asta a ora, sino que van ms lejos todava. +arios ejemplos de ello son las listas, que sirven para enumerar ( de!inir elementos, los te'tos pre!ormateados ( las cabeceras o ttulos. &as listas originalmente estn pensadas para citar, numerar ( de!inir cosas a travs de caractersticas, o al menos as lo acemos en la escritura de te'tos. *in embargo, las listas !inalmente se utilizan para muc o ms que enumerar una serie de puntos, en realidad son un recurso mu( interesante para poder maquetar elementos diversos, como barras de navegacin, pesta2as etc. Pero esto lo veremos ms adelante, cuando apliquemos estilos 0** a las listas. 3e momento, en este %anual de #$%&, trataremos las listas desde el punto de vista de su construccin ( veremos los di!erentes tipos que e'isten, ( que podemos utilizar para resolver nuestras distintas necesidades a la ora de escribir te'tos en #$%&.
1eferencia& $odos los tipos de listas los emos e'plicado en vdeo ( se pueden revisar en el +ideotutorial de #$%&, ms concretamente en la entrega siguiente: +deo sobre las &istas #$%&.
Podemos distinguir tres tipos de listas #$%&: &istas desordenadas &istas ordenadas &istas de de!inicin
&as veremos detenidamente una a una. Listas desordenadas *on delimitadas por las etiquetas ?ul@ ( ?Aul@ .unordered list/. 0ada uno de los elementos de la lista es citado por medio de una etiqueta ?li@ .sin cierre, aunque no a( inconveniente en colocarlo/. &a cosa queda as:
<p>#a(ses del m"ndo</p> <"l> <li>Argentina <li>#er= <li>*hile </"l>
,l resultado:

21
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Pases del mundo Argentina Per0 ile
Podemos de!inir el tipo de vi2eta empleada para cada elemento. Para ello debemos especi!icarlo por medio del atributo t(pe incluido dentro de la etiqueta de apertura ?ul@, si queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta ?li@ si queremos acerlo espec!ico de un solo elemento. &a sinta'is es del siguiente tipo:
<"l t'pe="tipo de &i>eta">
donde tipo de vi2eta puede ser uno de los siguientes: circle disc square
/ota& ,n algunos navegadores no !unciona la opcin de cambiar el tipo de vi2eta a mostrar ( por muc o que nos empe2emos, siempre saldr el redondel negro. ,n caso de que no !uncione siempre podemos construir la lista a mano con la vi2eta que queramos utilizando las tablas de #$%&. +eremos ms adelante cmo trabajar con tablas.
+amos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, ( en el -ltimo elemento colocaremos un crculo. Para ello vamos a colocar el atributo t(pe en la etiqueta ?ul@, con lo que a!ectar a todos los elementos de la lista.
<"l t'pe="s!"are"> <li>Elemento 1 <li>Elemento % <li>Elemento $ <li t'pe="circle">Elemento + </"l>
Oue tiene como resultado

Artculo por
,lemento 8 ,lemento 9 ,lemento K ,lemento 6

Rubn Alvarez
'.%. Listas && Listas ordenadas

Estudiamos otro tipo de listas% las listas ordenadas. ,stamos en el %anual de #$%& ( continuamos estudiando las listas de #$%&, con las que crear estructuras atractivas para presentar la in!ormacin. ,n el captulo anterior vimos las listas desordenadas ( a ora estudiaremos las listas ordenadas.
'.%.1. Listas ordenadas

&as listas ordenadas sirven tambin para presentar in!ormacin, en diversos elementos o items, con la particularidad que stos estarn predecidos de un n-mero o una letra para enumerarlos, siempre por un orden.

22
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Para realizar las listas ordenadas usaremos las etiquetas ?ol@ .ordered list/ ( su cierre. 0ada elemento sera igualmente indicado por la etiqueta ?li@, que (a vimos en las listas desordenadas. Pongamos un ejemplo:
<p>5eglas de comportamiento en el traba1o</p> <ol> <li>El 1efe siempre tiene la ra /n <li>En caso de d"da aplicar regla 1 </ol>
,l resultado es: 1eglas de comportamiento en el trabajo 8. ,l je!e siempre tiene la razn 9. ,n caso de duda aplicar regla 8 3el mismo modo que para las listas desordenadas, las listas ordenadas o!recen la posibilidad de modi!icar el estilo. ,n concreto nos es posible especi!icar el tipo de numeracin empleado eligiendo entre n-meros .8, 9, K.../, letras .a, b, c.../ ( sus ma(-sculas .A, =, 0,.../ ( n-meros romanos en sus versiones ma(-sculas .), )), ))),.../ ( min-sculas .i, ii, iii,.../. Para realizar dic a seleccin emos de utilizar, como para el caso precedente, el atributo t(pe, el cual ser situado dentro de la etiqueta ?ol@. &os valores que puede tomar el atributo en este caso son: 8 Para ordenar por n-meros a Por letras del al!abeto A Por letras ma(-sculas del al!abeto i ;rdenacin por n-meros romanos en min-sculas ) ;rdenacin por n-meros romanos en ma(-sculas
/ota& 1ecordamos que en algunos navegadores no !unciona la opcin de cambiar el tipo de vi2eta a mostrar
Puede que en alg-n caso deseemos comenzar nuestra enumeracin por un n-mero o letra que no tiene por qu ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un segundo atributo, start, que tendra como valor un n-mero. ,ste n-mero, que por de!ecto es 8, corresponde al valor a partir del cual comenzamos a de!inir nuestra lista. Para el caso de las letras o los n-meros romanos, el navegador se encarga de acer la traduccin del n-mero a la letra correspondiente. ;s proponemos un ejemplo usando este tipo de atributos:
<p>-rdenamos por n"meros</p> <ol t'pe="1"> <li>Elemento 1 <li> Elemento % </ol> <p>-rdenamos por letras</p> <ol t'pe="a"> <li>Elemento a <li> Elemento b </ol>
?p@;rdenamos por n-meros romanos empezando por el 87?Ap@ ?ol t(peQEiE startQE87E@ ?li@,lemento ' ?li@ ,lemento 'i ?Aol@ ,l resultado: ;rdenamos por n-meros 8. ,lemento 8

23
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 9. ,lemento 9
;rdenamos por letras a. ,lemento a b. ,lemento b ;rdenamos por numeros romanos empezando por el 87 '. ,lemento ' 'i. ,lemento 'i
Artculo por
Rubn Alvarez
'.'. Listas &&& Listas de de+inici"n

)emos las listas de definicin $ aprendemos a anidar listas para crear estructuras lista ms complejas. $erminamos el tema de listas en el manual de #$%& de 3esarrollo4eb.com estudiando las listas de de!inicin. +eremos tambin la anidacin de listas, que resultar un recurso interesante para estructurar datos un poco ms complejos o enumerar elementos con una jerarqua.
'.'.1. Listas de de+inici"n

&as listas de de!inicin sirven para acer un conjunto de elementos con pares conceptoFdescripcin. ,s decir, se especi!icarn varios trminos por su nombre ( se escribir una de!inicin para cada uno. 0ada elemento es presentado junto con su de!inicin, uno detrs de otro. Para realizar una lista de de!inicin, ja etiqueta principal es ?dl@ ( ?Adl@ .de!inition list/. &a etiquetas del elemento ( su de!inicin son ?dt@ .de!inition term/ ( ?dd@ .de!inition de!inition/ respectivamente. Aqu os proponemos un cdigo que podr aclarar este sistema:
<p>?iccionario de la 5eal Academia</p> <dl> <dt>@r"1"la <dd>.e>/r"la montada en "na esc/b"la <dt>-re1a <dd>.esenta min"te1os </dl>
,l e!ecto producido: 3iccionario de la 1eal Academia
=rujula *e2rula montada en una escbula ;reja *esenta minutejos

5ijaos en que cada lnea ?dd@ esta desplazada acia la izquierda. ,ste tipo de etiquetas son usadas a menudo con el propsito de crear te'tos ms o menos desplazados acia la izquierda. ,l cdigo:
<dl> <dd>#rimer ni&el de despla amiento <dl> <dd>.eg"ndo ni&el de despla amiento

24

<dl> <dd>Tercer ni&el de despla amiento </dl> </dl> </dl>
,l resultado:
Primer nivel de desplazamiento *egundo nivel de desplazamiento $ercer nivel de desplazamiento '.'.%. Anidando listas
"ada nos impide utilizar todas estas etiquetas de !orma anidada como emos visto en otros casos. 3e esta !orma, podemos conseguir listas mi'tas como por ejemplo:
<p>*i"dades del m"ndo</p> <"l> <li>Argentina <ol> <li>@"enos Aires <li>@ariloche </ol> <li>Ar"g"a' <ol> <li>0onte&ideo <li>#"nta del Este </ol> </"l>
3e esta !orma creamos una lista como esta: 0iudades del mundo Argentina 8. =uenos Aires 9. =ariloc e <rugua( 8. %ontevideo 9. Punta del ,ste
1eferencia& 0on esto emos acabado el tema sobre &istas #$%&, sin embargo, podemos completar las e'plicaciones en el +ideotutorial de #$%&, en el +deo sobre las &istas #$%&.
Artculo por
Rubn Alvarez

25
Parte :
Todo sobre los enlaces en HTML

,os enlaces son los elementos 6ue nos permiten na>egar por las p4ginas 012, % son tan importantes 6ue la web no tendra sentido sin ellos. Dedicaremos >arios captulos a e9plorar los distintos tipos de enlaces# sus usos % di>ersos conse3os para hacer p4ginas na>egables.
-.1. 1nlaces en #$ML

)emos "u# son los enlaces en HTML $ los distintos tipos. #asta aqu, emos podido ver que una pgina web es un arc ivo #$%& en el que podemos incluir, entre otras cosas, te'tos !ormateados a nuestro gusto e imgenes .las veremos enseguida/. 3el mismo modo, un sitio web podr ser considerado como el conjunto de arc ivos, principalmente pginas #$%& e imgenes, que constitu(en el contenido al que el navegante tiene acceso. *in embargo, no podramos ablar de navegante o de navegacin si estos arc ivos #$%& no estuviesen debidamente conectados entre ellos ( con el e'terior de nuestro sitio por medio de enlaces iperte'to. ,n e!ecto, el atractivo original del #$&% radica en la posible puesta en relacin de los contenidos de los arc ivos introduciendo re!erencias bajo !orma de enlaces que permitan un acceso rpido a la in!ormacin deseada. 3e poco servira en la red tener pginas aisladas a las que la gente no puede acceder ( desde las que la gente no puede saltar a otras. <n enlace puede ser !cilmente detectado en una pgina. =asta con deslizar el puntero del ratn sobre las imgenes o el te'to ( ver como cambia de su !orma original trans!ormndose por regla general en una mano con un dedo se2alador. Adicionalmente, estos enlaces suelen ir, en el caso de los te'tos, coloreados ( subra(ados para que el usuario no tenga di!icultad en reconocerlos. *i no especi!icamos lo contrario .(a tendremos ocasin de e'plicar como/, estos enlaces te'to estarn subra(ados ( coloreados en azul. ,n el caso de las imgenes que sirvan de enlace, veremos que estn delimitadas por un marco azul por de!ecto. Para colocar un enlace, nos serviremos de las etiquetas ?a@ ( ?Aa@. 3entro de la etiqueta de apertura deberemos especi!icar asimismo el destino del enlace. ,ste destino ser introducido bajo !orma de atributo, el cual lleva por nombre re!. &a sinta'is general de un enlace es por tanto de la !orma:
<a href="destino">contenido</a>
*iendo el contenido un te'to o una imagen. ,s la parte de la pgina que se colocar activa ( donde deberemos pulsar para acceder al enlace. Por su parte, destino ser una pgina, un correo electrnico o un arc ivo.

26
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,n !uncin del destino los enlaces son clsicamente agrupados del siguiente modo: (nlaces internos: los que se dirigen a otras partes dentro de la misma pgina. (nlaces locales: los que se dirigen a otras pginas del mismo sitio web. (nlaces remotos: los dirigidos acia pginas de otros sitios web. (nlaces con direcciones de correo: para crear un mensaje de correo dirigido a una direccin. (nlaces con arc)ivos: para que los usuarios puedan acer download de !ic eros.
1eferencia& Para complementar las e'plicaciones sobre los enlaces #$%& recomendamos ver el videotutorial sobre enlaces.
Artculo por
Rubn Alvarez
-.%. 1nlaces internos

Los enlaces HTML "ue se &acen con otras partes de la misma pgina. *on los enlaces que apuntan a un lugar di!erente dentro de la misma pgina. ,ste tipo de enlaces son esencialmente utilizados en pginas donde el acceso a los contenidos puede verse di!icultado debido al gran tama2o de la misma. %ediante estos enlaces podemos o!recer al visitante la posibilidad de acceder rpidamente al principio o !inal de la pgina o bien a di!erentes prra!os o secciones. Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dic o, un segundo enlace que ser colocado en el destino. +eamos ms claramente como !uncionan estos enlaces con un ejemplo sencillo:
,nlace con !inal de este documento, para que probis su !uncionamiento: )r abajo
*upongamos que queremos crear un enlace que apunte al !inal de la pgina. &o primero ser colocar nuestro enlace origen. &o pondremos aqu mismo ( lo escribiremos del siguiente modo:
<a href="2aba1o">Br aba1o</a>
0omo podis ver, el contenido del enlace es el te'to E)r abajoE ( el destino, abajo, es un punto de la misma pgina que todava no emos de!inido. ;jo al smbolo TV es l quien especi!ica al navegador que el enlace apunta a una seccin en particular. ,n segundo lugar, a( que generar un enlace en el destino. ,ste enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma pgina. ,n este caso, la etiqueta que escribiremos ser sta:
<a name="aba1o"></a>
A decir verdad, estos enlaces, aunque -tiles, no son los ms e'tendidos de cuantos a(. &a tendencia general es la de crear pginas .arc ivos/ independientes con tama2os ms reducidos enlazados entre ellos por enlaces locales .los veremos enseguida/. 3e esta !orma evitamos el e'ceso de tiempo de carga de un arc ivo ( la introduccin de e'ceso de in!ormacin que pueda desviar la atencin del usuario. <na aplicacin corriente de estos enlaces consiste en poner un peque2o ndice al principio de nuestro documento donde introducimos enlaces origen a las di!erentes secciones. Paralelamente, al !inal de cada seccin introducimos un enlace que apunta al ndice de manera que podamos guiar al navegante en la b-squeda de la in!ormacin -til para l.
Artculo por
Rubn Alvarez

27
-.'. 1nlaces locales

Enlaces HTML con otras pginas del mismo sitio web. 0omo emos dic o, un sitio web esta constituido de pginas intercone'as. ,n el capitulo anterior emos visto como enlazar distintas secciones dentro de una misma pgina. "os queda pues estudiar la manera de relacionar los distintos documentos #$%& que componen nuestro sitio web. Para crear este tipo de enlaces, emos de crear una etiqueta de la siguiente !orma:
<a href="archi&o7html">contenido</a>
Por regla general, para una mejor organizacin, los sitios suelen estar ordenados por directorios. ,stos directorios suelen contener di!erentes secciones de la pgina, imgenes, sonidos...,s por ello que en muc os casos no nos valdr con especi!icar el nombre del arc ivo, sino que tendremos que especi!icar adems el directorio en el que nuestro arc ivo. tml esta alojado. *i abis trabajado con %*F3;* no tendris ning-n problema para comprender el modo de !uncionamiento. $an solo a( que tener cuidado en usar la barra EAE en lugar de la contrabarra EE. Para aquellos que no saben como mostrar un camino de un arc ivo, aqu van una serie de indicaciones que os a(udaran a comprender la !orma de e'presarlos. "o resulta di!cil en absoluto ( con un poco de practica lo aris prcticamente sin pensar. 8. #a( que situarse mentalmente en el directorio en el que se encuentra la pgina con el enlace. 9. *i la pgina destino esta en un directorio incluido dentro del directorio en el que nos encontramos, emos de marcar el camino enumerando cada uno de los directorios por los que pasamos asta llegar al arc ivo ( separndolos por el smbolo barra EAE. Al !inal obviamente, escribimos el arc ivo. K. *i la pgina destino se encuentra en un directorio que inclu(e el de la pgina con el enlace, emos de escribir dos puntos ( una barra E..AE tantas veces como niveles subamos en la arborescencia asta dar con el directorio donde esta emplazado el arc ivo destino. 6. *i la pgina se encuentra en otro directorio no incluido ni inclu(ente del arc ivo origen, tendremos que subir como en la regla K por medio de E..E asta encontrar un directorio que englobe el directorio que contiene a la pgina destino. A continuacin aremos como en la regla 9. ,scribiremos todos los directorios por los que pasamos asta llegar al arc ivo. ( emplo& Para clari!icar este punto podemos acer un ejemplo a partir de la estructura de directorios de la imagen.
Para acer un enlace desde inde'. tml acia (((. tml:

<a href="seccion1/paginas/'''7html">contenido</a>
Para acer un enlace desde '''. tml acia (((. tml:

<a href="77/seccion1/paginas/'''7html">contenido</a>
Para acer un enlace desde (((. tml acia '''. tml:

<a href="77/77/seccion%/xxx7html">contenido</a>
&os enlaces locales pueden a su vez apuntar (a no a la pgina en general sino ms precisamente a una seccin concreta. ,ste tipo de enlaces resultan ser un brido de interno ( local. &a sinta'is es de este tipo:

28

<a href="archi&o7html2seccion">contenido</a>
0omo para los enlaces internos, en este caso emos de marcar la seccin con otro enlace del tipo:
<a name="seccion"></a>
0omo ejemplo, e aqu un enlace que apunta al capitulo anterior al !inal de la pgina.
Artculo por
Rubn Alvarez
-.-. 1nlaces e(ternos6 de correo ) hacia archivos

)emos tres tipos de enlaces. Los dirigidos a otras pginas de otros webs, a direcciones de correo $ a fic&eros externos. Para acabar con los enlaces vamos a ver los -ltimos K tipos de enlaces que abamos se2alado.
-.-.1. 1nlaces remotos

*on los enlaces que se dirigen acia pginas que se encuentran !uera de nuestro sitio web, es decir, cualquier otro documento que no !orma parte de nuestro sitio. ,ste tipo de enlaces es mu( com-n ( no representa ninguna di!icultad. *implemente colocamos en el atributo #1,5 de nuestra etiqueta ?A@ la <1& o direccin de la pgina con la que queremos enlazar. *er algo parecido a esto.
<a href="httpC//8887g"iarte7com">ir a g"iarte7com</a>
*lo cabe destacar que todos las direcciones web .<1&s/ empiezan por )ttp&,,. ,sto indica que el protocolo por el que se accede es #$$P, el utilizado en la web. "o debemos olvidarnos de colocarlas, porque si no los enlaces sern tratados como enlaces locales a nuestro sitio. ;tra cosa interesante es que no tenemos que enlazar con una pgina web con el protocolo #$$P necesariamente. $ambin podemos acceder a recursos a travs de otros protocolos como el 5$P. ,n tal caso, las direcciones de los recursos no comenzarn por ttp:AA sino por !tp:AA.
-.-.%. 1nlaces a direcciones de correo

&os enlaces a direcciones de correo son aquellos que al pinc arlos nos abre un nuevo mensaje de correo electrnico dirigido a una direccin de mail determinada. ,stos enlaces son mu( abituales en las pginas web ( resultan la manera ms rpida de o!recer al visitante una va para el contacto con el propietario de la pgina. Para colocar un enlace dirigido acia una direccin de correo colocamos mailto& en el atributo re! del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace.
<a href="mailtoCe"gimDdesarrollo8eb7com">e"gimDdesarrollo8eb7com</a>
,ste enlace se puede ver en !uncionamiento aqu: eugimWdesarrolloweb.com

%onse o& 0uando coloques enlaces a direcciones de correo procura indicar en el contenido del enlace .lo que a( entre ?A@ ( ?AA@/ la direccin de correo a la que se debe escribir. ,sto es porque si un usuario no tiene con!igurado un programa de correo en su ordenador no podr enviar mensajes, pero por lo menos podr copiar la direccin de mail ( escribir el correo a travs de otro ordenador o un sistema webFmail.
Adems de la direccin de correo del destinatario, tambin podemos colocar en el enlace el asunto del mensaje. ,sto se consigue colocando despus de la direccin de correo un interrogante, la palabra subject, un signo igual .Q/ ( el asunto en concreto.
<a href="malitoCe"gimDdesarrollo8eb7comEs"b1ect=contacto a tra&Fs de la

29

pagina">e"gimDdesarrollo8eb7com</a>
Podemos colocar otros atributos del mensaje con una sinta'is parecida. ,n este caso indicamos tambin que el correo debe ir con copia a colaboraWdesarrolloweb.com.
<a href="mailtoCe"gimDdesarrollo8eb7comEs"b1ect=contacto a tra&Fs de la paginaGcc=colaboraDdesarrollo8eb7com">e"gimDdesarrollo8eb7com</a> /ota& ,l visitante de la pgina necesitar tener con!igurada una cuenta de correo electrnico en su sistema para enviar los mensajes. &gicamente, si no tiene servicio de correo en el ordenador no se podrn enviar los mensajes ( este sistema de contacto con el visitante no !uncionar. $enemos un artculo en desarrolloweb que abla sobre el contacto con el navegante.
-.-.'. 1nlaces con archivos

,ste no es un tipo de enlace propiamente dic o, pero lo se2alamos aqu porque son un tipo de enlaces mu( abitual ( que presenta alguna complicacin para el usuario novato. ,l mecanismo es el mismo que emos conocido en los enlaces locales ( los enlaces remotos, con la -nica particularidad de que en vez de estar dirigidos acia una pgina web est dirigido acia un arc ivo de otro tipo. *i queremos enlazar con un arc ivo miD!ic ero.zip que se encuentra en el mismo directorio que la pgina se escribira un enlace as.
<a href="miHfichero7 ip">?escarga miHfichero7 ip</a>
*i pinc amos un enlace de este tipo nuestro navegador descargar el !ic ero, aciendo la pregunta tpica de EOu queremos acer con el arc ivo. Abrirlo o guardarlo en discoE. Podemos ver un ejemplo de enlace a arc ivo con su consiguiente ventana de descarga de un arc ivo.
%onse o& "o colocar en )nternet arc ivos ejecutables directamente sino arc ivos comprimidos. Por dos razones:
8. 9.
,l arc ivo ocupar menos, con lo que ser ms rpida su trans!erencia. Al preguntar al usuario lo que desea acer con el !ic ero le o!rece la opcin de abrirlo ( guardarlo en disco. "osotros generalmente desearemos que el usuario lo guarde en disco ( no lo ejecute asta que lo tenga en su disco duro. *i se decido a abrirlo en vez de guardarlo simplemente lo pondr en marc a ( cuando lo pare no se quedar guardado en su sistema. *i los arc ivos estn comprimidos obligaremos al usuario a descomprimirlos en su disco duro antes de ponerlos en marc a, con lo que nos aseguramos que el usuario lo guarde en su ordenador antes de ejecutarlo.
:i !ueremos enla-ar )acia otro tipo de arc)ivo como un PD4 o un mundo @1ML .1ealidad virtual para )nternet/ lo seguimos aciendo de la misma manera. ,l navegador, si reconoce el tipo de arc ivo, es el responsable de abrirlo utilizando el conector adecuado para ello. As, si por ejemplo enlazamos con un P35 pondr el programa Acrobat 1eader en !uncionamiento para mostrar los contenidos. *i enlazamos con un mundo +1%& pondr en marc a el plugFin que el usuario tenga instalado para ver los mundos virtuales .0osmo Pla(er por ejemplo/. ,ste sera un ejemplo de enlace a un documento P35.
<a href="miHdoc"mento7pdf">?escarga el #?3</a>
Artculo por

30
-.5. Atributo no+ollo@ en los enlaces

El atributo rel/nofollow, de los enlaces, sir e para "ue los buscadores no contin-en reastreando a partir de esos enlaces. 3ejemos aqu una peque2a rese2a sobre un atributo que se est convirtiendo en esencial en los enlaces ( que no abamos comentado en nuestro manual de #$%&, aunque s abamos visto algo en nuestro manual de posicionamiento en buscadores. "o!ollow es un atributo de los lin>s #$%& .etiqueta ?A@/, que sirve para de!inir o marcar el comportamiento de los buscadores cuando rastrean nuestra pgina web en busca de contenidos para inde'arlos. Por de!ecto, cuando un buscador visita una pgina web va recorriendo todos sus enlaces ( va inde'ando su contenido en su base de datos de pginas. ,sto es algo que acen automtica ( peridicamente. ;curre tanto con los enlaces internos a otras pginas de nuestro sitio como con los enlaces e'ternos a otras pginas web. &os motores que recorren las webs de enlace a enlace, se llaman ara2as. A ora bien, nosotros podemos, a travs del atributo relQEno!ollowE, decirle a un buscador que no contin-e inde'ando los contenidos de la pgina a la que lleva un enlace en particular. &o aramos as:
<a href="A5)H?E)HE,)A*E" rel="nofollo8">TEIT-H?E)HE,)A*E</a>
-.5.1. ?n .oco de historia sobre no+ollo@

Para completar estas notas abra que comentar que el atributo !ue creado por iniciativa de Coogle ( =logger en 977M, como una idea para detener el spam de enlaces en sitios web que permiten a los usuarios la participacin. <na prctica com-n de las personas que pretenden promocionar una pgina web es realizar comentarios o participaciones en pginas web, en las que insertan enlaces a sus propios sitios. ,sto se conoce como spam de enlaces, o con el trmino de spamde'ing. 0on el atributo relQEno!olowE se pretenden mitigar los e!ectos de ese tipo de spam en los sitios como !oros, blogs, o cualquier pgina que permita la interaccin con la comunidad de visitantes. Algunas pginas como la 4i>ipedia lo utilizan en todos los enlaces e'ternos. Actualmente el atributo renQno!ollow est bajo patente, aunque esta est liberada de ro(alties, lo que quiere decir que se puede utilizar sin limitacin ( sin tener que pagar nada.
-.5.%. C"mo inter.retan los buscadores el 4o+ollo@

,l atributo es tenido en cuenta no slo por el motor de inde'acin .ara2a/ del buscador Coogle, sino tambin por otras ara2as de buscadores tan importantes como Ia ooX o %*". Aunque a( que decir que cada buscador ace un uso particular del atributo. #abra que aclarar que los buscadores a menudo siguen el enlace que se a marcado como no!ollow, visitando aquella web que se aba enlazado. &o que ocurre realmente es que no tienen en cuenta el lin> para asignarle ran>ing o directamente no lo inde'an.
-.5.'. !romoci"n de @ebs ) no+ollo@

*obra decir que este atributo resulta bastante potente a la ora de trabajar con la promocin de una pgina web, puesto que altera directamente el comportamiento de los buscadores al rastrear las pginas, enlace a enlace. As pues, los *,;, promocionadores de pginas o personas que trabajan en el posicionamiento en buscadores, lo tienen mu( en cuenta en sus tcnicas para su trabajo del da a da. ,'isten diversas tcnicas que utilizan este atributo para realizar promocin de webs, como la que e'plicamos en el artculo Arriesgada pero e'celente tcnica *,; usando relQno!ollow, pero el uso ms importante es el que se a comentado (a en este artculo: ponerlo a los enlaces e'ternos para no trans!erir ran>ing o posicionamiento desde nuestra web a otras webs e'ternas.

31
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ;tra tcnica relacionada con no!ollow, pero ms segura, para que no se inde'e parte del contenido de nuestra pgina, es el uso del arc ivo robots.t't, que (a emos comentado anteriormente en 3esarrollo4eb.com.
Artculo por
Parte !:
Im"enes# $ormatos "r$icos e o%timizacin

5eremos todo lo 6ue los creadores de webs deben conocer sobre las im4genes# no s.lo c.mo incluir im4genes en las p4ginas# sino tambi7n 6u7 8ormatos gr48icos son adecuados en cada caso % c.mo podemos optimizar las im4genes para reducir el tiempo de carga de las webs.
5.1. &m/genes en #$ML

)emos cmo colocar una imagen en una pgina web $ algunos atributos bsicos para asignarle estilos a las imgenes en HTML. *in duda uno de los aspectos ms vistosos ( atractivos de las pginas web es el gra!ismo. &a introduccin en nuestro te'to de imgenes puede a(udarnos a e'plicar ms !cilmente nuestra in!ormacin ( darle un aire muc o ms esttico. ,l abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distraccin para el navegante, quien tendr ms di!icultad en encontrar la in!ormacin necesaria. ,l uso de imgenes tambin tiene que ser realizado con cuidado porque aumentan el tiempo de carga de la pgina, lo que puede ser de un e!ecto ne!asto si nuestro visitante no tiene una buena cone'in o si es un poco impaciente. Por ello es recomendable siempre optimizar las imgenes para )nternet, aciendo que su tama2o en b(tes sea lo mnimo posible, para !acilitar la descarga, pero sin que ello comprometa muc o su calidad. ,n este capitulo no e'plicaremos como crear ni tratar las imgenes, -nicamente diremos que para ello se utilizan aplicaciones como Paint * op Pro, P otos op o Cimp. $ampoco e'plicaremos las particularidades de cada tipo de arc ivo: C)5, :PC o P"C ( la !orma de optimizar nuestras imgenes. <n capitulo posterior al respecto ser dedicado a este menester: 5ormatos gr!icos para pginas web.

32
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &as imgenes son almacenadas en !orma de arc ivos, principalmente C)5 .para dibujos/ o :PC .para !otos/. ,stos arc ivos los podemos obtener desde diversas vas, como por ejemplo nuestra cmara digital, aunque tambin pueden ser creados por nosotros mismos con alg-n editor gr!ico o pueden ser descargados gratuitamente en sitios web especializados. As pues, en estos primeros captulos nos limitaremos a e'plicar como insertar ( alinear debidamente en nuestra pgina una imagen (a creada. &a etiqueta que utilizaremos para insertar una imagen es ?img@ .image/. ,sta etiqueta no posee su cierre correspondiente ( en ella emos de especi!icar obligatoriamente el paradero de nuestro arc ivo gr!ico mediante el atributo src .source/. &a sinta'is queda entonces de la siguiente !orma:
<img src="camino hacia el archi&o">
Para e'presar el camino, lo aremos de la misma !orma que vimos para los enlaces. &as reglas siguen siendo las mismas, lo -nico que cambia es que, en lugar de una pgina destino, el destino es un arc ivo gr!ico. Aparte de este atributo, indispensable obviamente para la visualizacin de la imagen, la etiqueta ?img@ nos propone otra serie de atributos de ma(or o menor utilidad, que listamos a continuacin:
5.1.1. Atributo alt

3entro de las comillas de este atributo colocaremos una brevsima descripcin de la imagen. ,sta etiqueta no es indispensable pero presenta varias utilidades. Primeramente, durante el proceso de carga de la pgina, cuando la imagen no a sido todava cargada, el navegador mostrara esta descripcin, con lo que el navegante se puede acer una idea de lo que va en ese lugar. ,sto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red con una opcin del navegador que desactiva el muestreo de imgenes, con lo que tales personas podrn siempre saber de qu se trata el gr!ico ( eventualmente cambiar a modo con imgenes para visualizarla. Adems, determinadas aplicaciones para discapacitados o tel!onos vocales que no muestran imgenes o!recen la posibilidad de leerlas por lo que nunca esta de ms pensar en estos colectivos. ,n general podemos considerar como aconsejable el uso de este atributo salvo para imgenes de poca importancia ( absolutamente indispensable si la imagen en cuestin sirve de enlace.
5.1.%. Atributos height ) @idth

3e!inen la altura ( anc ura respectivamente de la imagen en p'eles. $odos los arc ivos gr!icos poseen unas dimensiones de anc o ( alto. ,stas dimensiones pueden obtenerse a partir del propio dise2ador gra!ico o bien aciendo clic con el botn derec o sobre la imagen vista por el navegador para luego elegir propiedades sobre el men- que se despliega. ,l ec o de e'plicitar en nuestro cdigo las dimensiones de nuestras imgenes a(uda al navegador a con!eccionar la pgina de la !orma que nosotros deseamos antes incluso de que las imgenes a(an sido descargadas. As, si las dimensiones de las imgenes an sido proporcionadas, durante el proceso de carga, el navegador reservara el espacio correspondiente a cada imagen creando una maquetacin correcta. ,l usuario podr comenzar a leer tranquilamente el te'to sin que este se mueva de un lado a otro cada vez que una imagen se cargue. Adems de esta utilidad, el alterar los valores de estos dos atributos, es una !orma inmediata de redimensionar nuestra imagen. ,ste tipo de utilidad no es aconsejable dado que, si lo que pretendemos es aumentar el tama2o, la perdida de calidad de la imagen ser mu( sensible. )nversamente, si deseamos disminuir su tama2o, estaremos usando un arc ivo ms grande de lo necesario para la imagen que estamos mostrando con lo que aumentamos el tiempo de descarga de nuestro documento innecesariamente. ,s importante acer incapi en este punto (a que muc os debutantes tienen esa mala costumbre de crear gr!icos

33
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com peque2os redimensionando la imagen por medio de estos atributos a partir de arc ivos de tama2o descomunal. #a( que pensar que el tama2o de una imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que resulta ser apro'imadamente 6 veces in!erior.
5.1.'. Atributo border

3e!inen el tama2o en p'eles del cuadro que rodea la imagen. 3e esta !orma podemos recuadrar nuestra imagen si lo deseamos. ,s particularmente -til cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. ,n dic o caso tendremos que especi!icar borderQE7E.
5.1.-. Atributos vs.ace ) hs.ace

*irven para indicar el espacio libre, en pi'eles, que tiene que colocarse entre la imagen ( los otros elementos que la rodean, como te'to, otras imgenes, etc.
5.1.5. Atributo lo@src

0on este atributo podemos indicar un arc ivo de la imagen de baja resolucin. 0uando el navegador detecta que la imagen tiene este atributo primero descarga ( muestra la imagen de baja resolucin .que ocupa mu( poco ( que se trans!iere mu( rpido/. Posteriormente descarga ( muestra la imagen de resolucin adecuada .se2alada con el atributo src, que se supone que ocupar ms ( ser ms lenta de trans!erir/. ,ste atributo est en desuso, aunque supone una ventaja considerable para que la descarga inicial de la web se realice ms rpido ( que un visitante pueda ver una muestra de la imagen mientras se descarga la imagen real.
Truco& 'tili-ar imagenes como enlaces "i que decir tiene que una imagen, lo mismo que un te'to, puede servir de enlace. +ista la estructura de los enlaces podemos mu( !cilmente adivinar el tipo de cdigo necesario: <a href="archi&o7html"><img src="imagen7gif"></a>
5.1.>. 12em.lo .r/ctico

1esultar obvio para los lectores acer a ora una pgina que contenga una imagen varias veces repetida pero con distintos atributos. <na de las veces que salga debe mostrarse con su tama2o originar ( con un borde de K pi'eles. ,n otra ocasin la imagen aparecer sin borde, con su misma altura ( con una anc ura superior a la original $ambin mostraremos la imagen sin borde, con su misma anc ura ( con una altura superior a la original Por -ltimo, mostraremos la imagen con una altura ( anc ura ma(ores que las originales, pero proporcionalmente igual que antes. +amos a utilizar esta imagen para acer el ejercicio:
&as dimensiones originales de la imagen son 9J'98, as que este sera el cdigo !uente:
<img src="img17gif" 8idth="%J" height="%1" alt="Tama>o original" border="$"> <br> <br> <img src="img17gif" 8idth=":J" height="%1" alt="Achatada" border="4"> <br>

34

<br> <img src="img17gif" 8idth="%J" height="K1" alt="Alargada" border="4"> <br> <br> <img src="img17gif" 8idth="K:" height="+%" alt="?oble grande" border="4">
*e puede ver el ejemplo en una pgina aparte.

/ota& A lo largo de los pr'imos artculos veremos muc as otras cosas sobre imgenes, pero si lo deseas, tambin puedes acceder a un vdeo donde se trata lo visto anteriormente ( muc as otras cosas adicionales sobre las imgenes ( la creacin de webs: +ideotutorial #$%&: imgenes.
Artculo por
Rubn Alvarez
5.%. Alineaci"n de im/genes con #$ML

Explica la manera de alinear la imagen dentro de la pgina% centrarla, colocarla a la derec&a, a la iz"uierda, etc. +imos en su momento el atributo align que nos permita alinear el te'to a derec a, izquierda o centro de nuestra pgina. 3ijimos que este atributo no era e'clusivo de la etiqueta ?p@ sino que poda ser encontrado en otro tipo de etiquetas. Pues bien, ?img@ resulta ser una de esas etiquetas que aceptan este atributo aunque en este caso el !uncionamiento resulta ser di!erente. Para alinear una imagen orizontalmente podemos acerlo de la misma !orma que el te'to, es decir, utilizando el atributo align dentro de una etiqueta ?p@ o ?div@. ,n este caso, lo que incluiremos dentro de esa etiqueta ser la imagen en lugar del te'to: ,ste cdigo mostrar la imagen en el centro:
<di& align="center"><img src="logo7gif"></di&>
Ouedara as:
*in embargo, (a emos dic o que la etiqueta ?img@ puede aceptar el atributo align. ,n este caso, la utilidad que le damos di!iere de la anterior. ,l ec o de utilizar el atributo align dentro de la etiqueta ?img@ nos permite, en el caso de darle los valores le!t o rig t, justi!icar la imagen del lado que deseamos a la vez que rellenamos con te'to el lado opuesto. 3e esta !orma embebemos nuestras imgenes dentro del te'to de una manera sencilla. Aqu podis ver el tipo de cdigo a crear para obtener dic o e!ecto:
<p> <img src="imagen7gif" align="right">Texto tan extenso como !"eramos !"e c"brir la parte i !"ierda de la imagen7 .igo poniendo texto para !"e se &ea el efecto, @la bla bla bla bla bla bla777

35
</p>
Ouedara as:
1e9to tan e9tenso como 6ueramos 6ue cubrir4 la parte iz6uierda de la imagen. )igo poniendo te9to para 6ue se >ea el e8ecto# 'la bla bla bla bla bla bla...
<p> <img src="imagen7gif" align="left">Texto tan extenso como !"eramos !"e c"brir la parte derecha de la imagen7 .igo poniendo texto para !"e se &ea el efecto, @la bla bla bla bla bla bla777 </p>
Ouedara as:
1e9to tan e9tenso como 6ueramos 6ue cubrir4 la parte iz6uierda de la imagen. )igo poniendo te9to para 6ue se >ea el e8ecto# 'la bla bla bla bla bla bla...
*i en alg-n momento desesemos dejar de rellenar ese espacio lateral, podemos pasar a una zona libre introduciendo un salto de lnea ?br@ dentro del cual a2adiremos un atributo: clear As, etiquetas del tipo:
<br clear="left"> .altara &erticalmente hasta encontrar el lateral i !"ierdo libre7 <br clear="right"> .altara &erticalmente hasta encontrar el lateral derecho libre7 <br clear="all">
*altar verticalmente asta encontrar ambos laterales libres. ,jemplo de clear:
1e9to tan e9tenso como 6ueramos 6ue cubrir4 la parte iz6uierda. Esto est4 deba3o de la imagen.
,'isten otro tipo de valores que puede adoptar el atributo align dentro de la etiqueta ?img@. ,stos son relativos a la alineacin vertical de la imagen. *upongamos que escribimos una lnea al lado de nuestra imagen. ,sta lnea puede quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede que en una misma lnea tengamos varias imgenes de alturas di!erentes que pueden ser alineadas de distintas !orms. ,stos valores adicionales del atributo align son: top Ajusta la imagen a la parte ms alta de la lnea. ,sto quiere decir que, si a( una imagen ms alta, ambas imgenes presentaran el borde superior a la misma altura. bottom Ajusta el bajo de la imagen al te'to. Absbottom 0olocara el borde in!erior de la imagen a nivel del elemento ms bajo de la lnea. middle

36
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com #ace coincidir la base de la lnea de te'to con el medio vertical de la imagen. absmiddle Ajusta la imagen al medio absoluto de la lnea. ,stas e'plicaciones, que pueden resultar un poco complicadas, pueden ser ms !cilmente asimiladas a partir con un poco de practica. "os queda e'plicar como introducir debajo de la imagen un pie de !oto o e'plicacin. Para ello tendremos que ver antes de nada las tablas, en el pr'imos captulos...
Artculo por
Rubn Alvarez
5.'. 0ormatos gr/+icos .ara ./ginas @eb

0resenta los formatos grficos utilizados en las pginas web, el 123 , el 401 $ 051. Hace &incapi# en los dos primeros, resumiendo sus caracter(sticas $ ense.ando a optimizar los fic&eros. ,l componente gr!ico de las pginas web tiene muc a importancia, es el que ace que estas sean vistosas ( el que nos permite aplicar nuestra creatividad para acer del dise2o de sitios una tarea agradable. ,s tambin una erramienta para acercar los sitios al mundo donde vivimos, si embargo, es tambin el causante de errores graves en las pginas ( acer de estas, en algunos casos, un martirio para el visitante. &as nociones bsicas para el uso de arc ivos gr!icos son sencillas, conocerlas, aunque sea ligeramente, nos a(udar a crear sitios agradables ( rpidos. "o cometer errores en el uso de las imgenes es !undamental, aunque no seas un dise2ador ( las imgenes que utilices sean !eas, utilzalas bien ( as estars aciendo ms agradable la visita a tus pginas.
5.'.1. $i.os de archivos

,n )nternet se utilizan principalmente dos tipos de arc ivos gr!icos C)5 ( :PC, pensados especialmente para optimizar el tama2o que ocupan en disco, (a que los arc ivos peque2os se transmiten ms rpidamente por la 1ed. ,l !ormato de arc ivo C)5 se usa para las imgenes que tengan dibujos, mientras que el !ormato :PC se usa para las !otogra!as. &os dos comprimen las imgenes para guardarlas. &a !orma de comprimir la imagen que utiliza cada !ormato es lo que los ace ideales para unos u otros propsitos. Adicionalmente, se puede usar un tercer !ormato gr!ico en las pginas web, el P"C. ,ste !ormato no tiene tanta aceptacin como el C)5 o :PC por varias razones, entre las que destacan el desconocimiento del !ormato por parte de los desarrolladores, que las erramientas abituales para tratar gr!icos .como por ejemplo P otos op/ generalmente no lo soportaban ( que los navegadores antiguos tambin tienen problemas para visualizarlas. *in embargo, el !ormato se comporta mu( bien en cuanto a compresin ( calidad del gr!ico conseguido, por lo que resulta mu( -til en in!inidad de casos. $odos estos problemas an pasado ( (a slo )nternet ,'plorer L tiene algunos !allos cuando trata con P"C, pero la aceptacin actual es ms que su!iciente para incorporarlo a nuestras posibilidades reales de trabajo con !ormatos ( optimizacin de arc ivos. A continuacin se puede ver una tabla comparativa de las principales caractersticas de los !ormatos gr!icos para crear pginas web:

37
5.'.%. 0ormato G&0

A parte de ser un arc ivo ideal para las imgenes que estn dibujadas tiene muc as otras caractersticas que son importantes ( -tiles. %ompresi0n: ,s mu( buena para dibujos, como (a emos dic o. )ncluso puede ser interesante si la imagen es mu( peque2a, aunque sea una !oto. <n logotipo es un Transparencia: es una utilidad para de!inir ciertas partes del dibujo como ejemplo claro de transparentes. 3e este modo podemos colocar las imgenes sobre distintos imagen C)5 !ondos sin que se vea el cuadrado donde est inscrito el dibujo, viendose en cambio la silueta del dibujo en cuestin. Para crear un gi! transparente debemos utilizar un programa de dise2o gr!ico, con el podemos indicar qu colores del dibujo queremos que sean transparentes. Parte de esta Ceneralmente, de!inimos la transparencia cuando vamos a guardar el gr!ico. imagen es %olores: 0on este !ormato gr!ico podemos utilizar paletas, conjuntos, de 9ML transparente colores o menos. ,ste es un detalle mu( importante, puesto que cuantos menos colores utilicemos en la imagen, por lo general, menos ocupar el arc ivo. ,n ocasiones, aunque utilicemos menos colores en un gr!ico, este no pierde muc o en calidad, llegando a ser inapreciable a la vista. ,n algunos programas podemos modi!icar la cantidad de colores al guardar el arc ivo, en otros lo acemos mientras creamos el gr!ico.
K9 colores 8L colores J colores )magen tomada con distintas paletas de colores. *e puede apreciar como con pocos colores se ve bien el gr!ico ( como pierde un poco a medida que le restamos colores.

38
5.'.'. 0ormato A!G

+eamos a ora cuales son las caractersticas !undamentales del !ormato :PC: %ompresi0n: $al como emos dic o anteriormente, su algoritmo de compresin ace ideal este !ormato para guardar !otogra!as. Adems, con :PC podemos de!inir la calidad de la imagen, con calidad baja el !ic ero ocupar menos, ( viceversa. Transparencia: ,ste !ormato no tiene posibilidad de crear reas transparentes. *i deseamos colocar una imagen con un rea que parezca transparente procederemos as: con nuestro programa de dise2o )ntento de gr!ico aremos que el !ondo de la imagen sea el mismo transparencia en que el de la pgina donde queremos colocarla. ,n :PC. Pulsar para muc os casos los !ondos de la imagen ( la pgina ampliar parecern el mismo. %olores: :PC trabaja siempre con 8L millones de colores, ideal para !otogra!as. Bptimi-ar fic)eros Para que las imgenes ocupen lo menos posible ( se trans!ieran rpidamente por la 1ed debemos aprender a optimizar los !ic eros gr!icos. Para ello debemos acer lo siguiente: Para los arc)ivos 2I4: 1educiremos el n-mero de colores de nuestra paleta. ,sto se ace con nuestro editor gr!ico, en muc os casos podremos acerlo al guardar el arc ivo.
<na !otogra!a con !ormato :PC
C)5 9ML colores F 87,J Y=
C)5 K9 colores F M,M Y=
C)5 6 colores F 9 Y= Para los arc)ivos CP2: Ajustaremos la calidad del arc ivo cuando lo estemos guardando. ,ste !ormato nos permite bajar muc o la calidad de la imagen sin que esta pierda muc o en su aspecto visual.
:PC calidad 7 K Y=

39
:PC calidad 97 M,G Y=
:PC calidad M7 87 Y=
,s imprescindible disponer para optimizar la imagen de una erramienta buena que nos permita con!igurar estas caractersticas de la imagen con libertad ( !cilmente. P otos op M.M o L es un programa bastante recomendable, pues incorpora una opcin que se llama ECuardar para el 4ebE con la que podemos de!inir los colores del gi!, calidad del :PC ( otras opciones en varias muestras a la vez. As con todas las opciones con!igurables, viendo los resultados a la vez que el tama2o del arc ivo podemos optimizar la imagen de una manera precisa con los resultados que deseamos. $ambin e'isten en el mercado otros programas que nos permiten optimizar estas imgenes de manera sorprendente. <na vez emos creado la imagen la pasamos por estos programas ( nos comprimen aun ms el arc ivo, acindolo rpido de trans!erir (, por tanto, ms optimo P otos op es una erramienta e'celente para optimizar !ic eros. +iendo varias copias para )nternet. Al ser estas utilidades tan especializadas los resultados podemos elegir la ms adecuada. suelen ser mejores que con los programas de edicin gr!ica. ( emplos de optimi-adores gr"ficos& F 4ebCrap ics ;ptimizer F Pro:PC, C)5 )mantion D con versiones Bnline& F C)5 4izard
/ota& *i te interesa re!orzar todos los conceptos tratados en este artculo ( ver cmo optimizamos nosotros imgenes para la web, te recomendamos ver el +deo sobre 5ormatos gr!icos para pginas web.
Artculo por
5.-. Ma.as de im/genes con #$ML

Explicamos detalladamente el proceso para crear mapas de imgenes, osea, imgenes "ue tienes arios enlaces asociados en distintas reas. ,n captulos anteriores emos podido adentrarnos en el elemento bsico de navegacin del web: ,l enlace iperte'to.

40
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com #emos visto que estos enlaces son palabras, te'tos o imgenes que, al pinc ar sobre ellos, nos envan a otras pginas o zonas. &os mapas de imgenes es un nuevo planteamiento de navegacin que incorpora una serie de enlaces dentro de una misma imagen. ,stos enlaces son de!inidos por !iguras geomtricas ( !uncionan e'actamente del mismo modo que los otros enlaces. Podis ver el !uncionamiento de uno en este enlace. ,n un principio, estos mapas no eran directamente reconocidos por los navegadores ( recurran a tecnologas de lado del servidor para ser visualizados. #o( en da pueden ser implementados por medio de cdigo #$%& tal ( como veremos en este capitulo. Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. $ambin puede ser mu( prctico en mapas geogr!icos donde cada ciudad, provincia o punto cualquiera representa un enlace a una pgina. ,n cualquier caso, el uso de estos mapas a de estar sistemticamente acompa2ado de un te'to e'plicativo que d a conocer al usuario la posibilidad de acer clic sobre los distintos puntos de la imagen. 5rases como E#az clic sobre tal icono para acceder a tal in!ormacinE resultan mu( indicativas a la ora de acer intuitiva la navegacin por los mapas de imgenes. Por otro lado, no esta de ms introducir esa misma e'plicacin en el atributo alt de la imagen. As pues, un mapa de imagen esta compuesto de dos partes: &a imagen propiamente dic a que estar situada como de costumbre dentro de la etiqueta ?bod(@ de nuestro documento #$%&. <n cdigo, situado en el interior de la etiqueta ?map@, que delimitara por medio de lneas geomtricas imaginarias cada una de las reas de los enlaces presentados en la imagen.
&as lneas geomtricas que delimitan los enlaces, es decir, las reas de los enlaces, an de ser de!inidas por medio de coordenadas. 0ada imagen es de!inida por unas dimensiones de anc o .B/ ( alto .I/ ( cada punto de la imagen puede ser de!inido por tanto diciendo a que altura .'/ ( anc ura .(/ nos encontramos. 3e este modo, la esquina superior izquierda corresponde a la posicin 7,7 ( la esquina in!erior derec a corresponde a las coordenadas B,I. *i deseamos saber qu coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de dise2o gra!ico como P otos op o Paint * op Pro. &a mejor !orma de e'plicar el !uncionamiento de este tipo de mapas es a partir de un ejemplo prctico. *upongamos que tenemos una imagen con un mapa como esta:
Pulsa en los crculos para acceder a las secciones!
3entro de ella queremos introducir un enlace a cada uno de los elementos que la componen. Para ello, de!iniremos nuestros enlaces como zonas circulares de peque2o tama2o que sern distribuidas a lo largo ( anc o de la imagen. +eamos a continuacin el cdigo que utilizaremos:
<table border=4 8idth=+K4><tr><td align="center"> <map name="mapa1"> <area alt="#"lsa para &er la pgina de mis amigos" shape="*B5*)E" coords="++,$:,%L" href="2"> <area alt="#"lsa para &er mi no&ia" shape="*B5*)E" coords="1+4,$K,$1" href="2"> <area alt="#"lsa para conocer a mi 3amilia" shape="circle" coords="%$L,$M,$4" href="2"> <area alt="#"lsa para conocer mi traba1o" shape="*B5*)E" coords="$$:,$:,$1" href="2"> </map> <img src="images/html/mapa17gif" 8idth="$J4" height="M%" alt="0apa de imgenes7 #"lsa en cada "na de los c(rc"los7" border="4" "semap="2mapa1"> <br>

41

#"lsa en los c(rc"los para acceder a las secciones< </td></tr></table> /ota& &os re! de las reas van a T ,ste es un ejemplo parcial de utilizacin de los mapas, !altara colocar los re! con valores reales ( no con la T. 0ada uno de los enlaces de las reas Fatributo re! de la etiqueta ?area@F deberan llevar a una pgina web. ,l ejemplo quedara completo si creasemos todas las pginas donde enlazar las reas ( colocasemos los re! dirigidos acia dic as pginas. 0omo no emos ec o las pginas EdestinoE emos colocado enlaces que no llevan a ning-n sitio, que, como puedes ver, se indica con el caracter ETE.
Podis observar, tal ( como emos e'plicado antes, que nuestro mapa consta de dos partes principales: la imagen ( la etiqueta ?map@ que de!ine las reas de cada enlace. 0ada rea se indica con una etiqueta ?area@, que tiene los siguientes atributos: alt Para indicar un te'to que se mostrar cuando situemos el ratn en el rea. s)ape )ndica el tipo de rea. coords &as coordenadas que de!inen el rea. *ern un grupo de valores numricos distintos dependiendo del tipo de rea .s ape/ que estemos de!iniendo. )ref Para indicar el destino del enlace correspondiente al rea. ,n este caso emos utilizado unas reas circulares .s apeQE0)10&,E/, que se de!inen indicando el centro del crculo Funa coordenada .B,I/ ( el radio, que es un n-mero entero que se corresponde con el n-mero de pi'els desde el centro asta el borde del crculo.
5.-.1. $i.os de /reas3 sha.e distintas

,'isten tres tipos de reas distintas, su!icientes para acer casi cualquier tipo de !igura. ,n el dibujo que acompa2a estas lneas se puede ver una representacin de las reas, que detallamos a continuacin. s)apeEF1(%TF 0rea un rea rectangular. Para de!inirla se utilizan las coordenadas de los puntos de la esquina superior izquierda ( la esquina in!erior derec a. $al como estn nombradas dic as coordenadas en nuestro dibujo, el rea tendra la siguiente etiqueta:
<area shape="5E*T" coords="I1,N1,I%,N%" href="2">
s)apeEF%I1%L(F 0rea un rea circular, que se indica con la coordenada del centro del crculo ( el radio. A la vista de nuestro dibujo, la etiqueta de un rea circular tendra esta !orma:
<area shape="*B5*)E" coords="I1,N1,5" href="2">
s)apeEFPBLDF ,ste tipo de rea, poligonal, es la ms compleja de todas. <n polgono queda de!inido indicando todos sus puntos, pero atencin, los tenemos que indicar en orden, siguiendo el camino marcado por el permetro del polgono. A la vista del dibujo ( los nombres que emos dado a los puntos del polgono, la etiqueta ?area@ quedara de esta !orma.
<area shape="#-)N" coords=" I1,N1, I%,N%, I$,N$, I+,N+" href="2">

42

Artculo por
Rubn Alvarez
Parte &:
Tablas en HTML
,as tablas 8ueron mu% importantes en una 7poca para ma6uetar p4ginas web. 0o% lo adecuado es utilizarlas s.lo para presentar in8ormaci.n tabulada# es decir# colocada en una re3illa de 8ilas % columnas. En los siguientes artculos aprenderemos todo sobre las tablas en 012,.
>.1. $ablas en #$ML

)emos lo "ue son las tablas, para "ue sir en $ en "u# casos podemos utilizarlas. )emos la tabla ms simple posible. 'na tabla en un con unto de celdas organi-adas dentro de las cuales podemos alo ar distintos contenidos5 #$%& dispone de una gran variedad de etiquetas para crear tablas, de las cuales veremos una introduccin en este artculo. ,n un principio nos podra parecer que las tablas son raramente -tiles ( que pueden ser utilizadas principalmente para listar datos como agendas, resultados ( otros datos de una !orma organizada. "ada ms lejos de la realidad. #o(, gran parte de los dise2adores de pginas basan su maquetacin en este tipo de artilugios. ,n e!ecto, una tabla nos permite organizar ( distribuir los espacios de la manera ms adecuada. "os puede a(udar a generar te'to en columnas como los peridicos, pre!ijar los tama2os ocupados por distintas secciones de la pgina o poner de una manera sencilla un pie de !oto a una imagen.
Actuali-ado& ,stamos en 9788 ( ablar de las tablas como solucin para maquetacin a pasado a la istoria. &as webs de primera ( segunda generacin utilizaban este recurso intensivamente para maquetar contenidos en pginas web, adems de otros como los p'eles transparentes para conseguir e!ectos como mrgenes o espacios en blanco. *in embargo, las webs actuales, o tercera generacin, an acabado con todas esas tcnicas que no acan ms que ensuciar el cdigo !uente de las pginas web, mezclando presentacin ( contenido. Actualmente toda la maquetacin de una pgina se organiza con 0**, lo que nos da un ma(or control de todos los elementos de la pgina ( la posibilidad de separar todos los estilos para de!inir el aspecto de una web en un !ic ero aparte del #$%&. Por ello, en el momento actual las tablas se utilizan muc o menos que en el pasado ( realmente la recomendacin es usarlas solo en los casos en los que necesitemos incluir en una pgina in!ormacin tabulada, es decir, dispuesta en !ilas ( columnas. $odo uso basado en tablas para procurar colocar elementos en determinadas posiciones de la pgina sera incorrecto en las tcnicas actuales de dise2o de pginas web.
0omo veremos a continuacin, e'isten diversas etiquetas que se deben utilizar en una !orma determinada para la creacin de tablas. Por ello, puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, con un poco de prctica podremos crear tablas con absoluta soltura. *i deseamos mostrar datos de una manera sencilla de leer, dispuestos en !ilas ( columnas, tarde o temprano observaremos que las tablas son la mejor solucin ( apreciaremos las posibilidades nos o!recen.

43
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Para empezar, nada ms sencillo que por el principio: las tablas son de!inidas por las etiquetas ?table@ ( ?Atable@. 3entro de estas dos etiquetas colocaremos todas las otras etiquetas, te'tos e imgenes que darn !orma ( contenido a la tabla. &as tablas son descritas por lneas de izquierda a derec a. 0ada una de estas lneas es de!inida por otra etiqueta ( su cierre: ?tr@ ( ?Atr@ Asimismo, dentro de cada lnea, abr di!erentes celdas. 0ada una de estas celdas ser de!inida por otro par de etiquetas: ?td@ ( ?Atd@. 3entro de estas etiquetas ser donde coloquemos nuestro contenido. Aqu tenis un ejemplo de estructura de tabla:
<table> <tr> <td>*elda 1, linea 1</td> <td> *elda %, linea 1</td> </tr> <tr> <td> *elda 1, linea %</td> <td> *elda %, linea %</td> </tr> </table>
,l resultado:
"elda D# linea "elda 2# linea D D "elda D# linea "elda 2# linea 2 2
/ota& #asta aqu emos visto todas las etiquetas que necesitamos conocer para crear tablas. ,'isten otras etiquetas, pero lo que podemos conseguir con ellas se puede conseguir tambin usando las que emos visto. Por poner un ejemplo, se2alamos la etiqueta ?t @, que sirve para crear una celda cu(o contenido est !ormatedo como un ttulo o cabecera de la tabla. ,n la prctica, lo que ace es poner en negrita ( centrado el contenido de esa celda, lo que se puede conseguir aplicando las correspondientes etiquetas dentro de la celda. As: <td align="center"><b>contenido de la celda</b></td> .
A partir de esta idea simple ( sencilla, las tablas adquieren otra magnitud cuando les incorporamos toda una batera de atributos aplicados sobre cada tipo de etiquetas que las componen. A lo largo de los siguientes captulos nos adentraremos en el estudio de estos atributos de manera a proporcionaros los -tiles indispensables para una buena puesta en pgina. Podemos continuar las e'plicaciones de tablas en los artculos: F Atributos para !ilas ( celdas F Atributos de la tabla ( conclusin F =ordes de tabla en #$%& 6 Adicionalmente, queremos destacar la e'istencia de un vdeo que trata sobre varios de los temas e'plicados en este ( los pr'imos artculos: +ideotutorial sobre las tablas en #$%&.
Artculo por
Rubn Alvarez

44
>.%. $ablas en #$ML. Atributos .ara +ilas ) celdas

*ontinuamos con las tablas. )emos los atributos "ue podemos colocar en las filas $ las celdas. #emos visto en el capitulo anterior que las tablas estn compuestas de lneas que, a su vez, contienen celdas. &as celdas son delimitadas por las etiquetas ?td@ o por las etiquetas ?t @ .si queremos te'to en negrita ( centrado/ ( constitu(en un entorno independiente del resto del documento. ,sto quiere decir que: Podemos usar prcticamente cualquier tipo de etiqueta dentro de la etiqueta ?td@ para, de esta !orma, dar !orma a su contenido. &as etiquetas situadas en el interior de la celda no modi!ican el resto del documento. &as etiquetas de !uera de la celda no son tenidas en cuenta por sta.
As pues, podemos especi!icar el !ormato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda ?td@ o bien, en algunos casos, dentro de la etiqueta ?tr@, si deseamos que el atributo sea valido para toda la lnea. &a !orma ms -til ( actual de dar !orma a las celdas es a partir de las ojas de estilo en cascada que (a tendris la oportunidad de abordar ms adelante. +eamos a continuacin algunos atributos -tiles para la construccin de nuestras tablas. ,mpecemos viendo atributos que nos permiten modi!icar una celda en concreto o toda una lnea:
align valign
bgcolor bordercolo De8ine el color del borde. r
(usti8ica el te9to de la celda del mismo modo 6ue si 8uese el de un p4rra8o. &odemos elegir si 6ueremos 6ue el te9to aparezca arriba (top)# en el centro (middle) o aba3o (bottom) de la celda. Da color a la celda o lnea elegida.
;tros atributos que pueden ser -nicamente asignados a una celda ( no al conjunto de celdas de una lnea son:
bacBground -os permite colocar un 8ondo para la celda a partir de un enlace a una imagen. height De8ine la altura de la celda en pi9els o porcenta3e. @idth De8ine la anchura de la celda en pi9els o porcenta3e. cols.an E9pande una celda horizontalmente. ro@s.an E9pande una celda >erticalmente.
/ota& ,l atributo eig t no !unciona en todos los navegadores, adems, su uso no est mu( e'tendido. &as celdas por lo general tienen el alto que ncesitan para que quepa todo el contenido que se le a(a insertado, es decir, crecen lo su!iciente para que quepa lo que emos colocado dentro. ,l atributo widt si que !unciona en todos los navegadores ( lo tendris que utilizar constantemente. *i le asignamos un anc o a la celda, el anc o ser respetado ( si dic a celda tiene muc o te'to o cualquier otro contenido, la celda crecer acia abajo todo lo necesario para que quepa lo que emos colocado. <n matiz al -ltimo pra!o. *e trata de que si de!inimos una celda de un anc o 877 por ejemplo, ( colocamos en la celda un contenido como una imagen que mida ms de 877 pi'eles, la celda crecer en orizontal todo lo necesario para que la imagen quepa. *i el elemento, aunque ms anc o, !uera divisible .como un te'to/ el anc o sera respetado ( el te'to crecera acia abajo o lo que es lo mismo, en altura, como se2albamos en el anterior prra!o.
,stos -ltimos cuatro atributos descritos son de gran utilidad. 0oncretamente, eig t ( widt nos a(udan a de!inir las

45
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com dimensiones de nuestras celdas de una !orma absoluta .en pi'els o puntos de pantalla/ o de una !orma relativa, es decir por porcentajes re!eridos al tama2o total de la tabla. Podis leer un articulo interesante a propsito de estas dos modalidades de dise2o en nuestro manual de usabilidad. A titulo de ejemplo:
<td 8idth="J4">
3ar una anc ura de J7 pi'els a la celda. *in embargo,

<td 8idth="J49">
3ar una anc ura a la celda del J7H de la anc ura de la tabla. #a( que tener en cuenta que, de!inidas las dimensiones de las celdas, el navegador va a acer lo que buenamente pueda para satis!acer al programador. ,sto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. 0oncretamente, si el te'to presenta una palabra e'cesivamente larga, puede que la anc ura de la celda se vea aumentada para mantener la palabra en la misma lnea. Por otra parte, si el te'to resulta mu( largo, la celda aumentara su altura para poder mostrar todo su contenido. Anlogamente, si por ejemplo de!inimos dos anc uras distintas a celdas de una misma columna, el navegador no sabr a cual acer caso. ,s por ello que resulta conveniente tener bien claro desde un principio como es la tabla que queremos dise2ar. "o esta de ms si la predise2amos en papel si la complejidad es importante. ,l #$%& resulta en general !cil pero las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a comprenderlas debidamente. &os atributos rowspan ( colspan son tambin utilizados !recuentemente. Cracias a ellos es posible e'pandir celdas !usionando stas con sus vecinas. ,l valor que pueden tomar estas etiquetas es numrico. ,l n-mero representa la cantidad de celdas !usionadas. As,
<td colspan="%">
5usionara la celda en cuestin con su vecina derec a.
Esta celda tiene un colspanBL2L "elda normal

3el mismo modo,
<td ro8span="%">
?tra celda
"elda Esta celda tiene rowspanBL2L# -ormal por eso tiene 8usionada la ?tra celda celda de aba3o. normal
,'pandir la celda acia abajo !usionndose con la celda in!erior. ,l resto de los atributos presentados presentan una utilidad ( uso bastante obvios. &os dejamos a vuestra propia investigacin. Podemos continuar las e'plicaciones de tablas en los artculos: F Atributos de la tabla ( conclusin
Artculo por
Rubn Alvarez
>.'. $ablas en #$ML. Atributos de la tabla ) conclusi"n

*onocemos los atributos principales "ue le podemos asignar a la tabla de modo general. !dems emos

46
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com arios ejemplos prcticos de construccin de tablas. Adems de los atributos espec!icos de cada celda o lnea, las tablas pueden ser adicionalmente !ormateadas a partir de los atributos que nos o!rece la propia etiqueta ?table@. #e aqu aquellos que pueden parecernos en un principio importantes:
align
:linea horizontalmente la tabla con respecto a su entorno. bacBgroun -os permite colocar un 8ondo para la tabla a partir de d un enlace a una imagen. bgcolor Da color de 8ondo a la tabla. border De8ine el n\mero de pi9els del borde principal. bordercol De8ine el color del borde. or cell.addin De8ine# en pi9els# el espacio entre los bordes de la g celda % el contenido de la misma. cells.acin De8ine el espacio entre los bordes (en pi9els). g height De8ine la altura de la tabla en pi9els o porcenta3e. @idth De8ine la anchura de la tabla en pi9els o porcenta3e.
&os atributos que de!inen las dimensiones, eig t ( widt , !uncionan de una manera anloga a la de las celdas tal ( como emos visto en el capitulo anterior. 0ontrariamente, el atributo align no nos permite justi!icar el te'to de cada una de las celdas que componen la tabla, sino ms bien, justi!icar la propia tabla con respecto a su entorno. +amos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derec a ( a la izquierda.
12em.lo de tabla centrada

,sta tabla est centrada ,ste sera un te'to cualquiera colocado al lado de una tabla centrada .alingQEcenterE/. *olo tiene una celda. Para que se vea el e!ecto de alineado ,sta tabla est alineada a la derec a
12em.lo de tabla alineada a a la tabla debemos colocar un te'to .alingQErig tE/. *olo tiene una celda. al lado ( el te'to rodear la tabla, la derecha
igual que ocurra con las imgenes alineadas a un lado. ,sta tabla est alineada a la izquierda Para que se vea el e!ecto de alineado 12em.lo de tabla alineada a .alingQEle!tE/. *olo tiene una celda. a la tabla debemos colocar un te'to al lado ( el te'to rodear la tabla, la iz,uierda igual que ocurra con las imgenes alineadas a un lado. &os atributos cellpading ( cellspacing nos a(udaran a dar a nuestra tabla un aspecto ms esttico. ,n un principio puede parecernos un poco con!uso su uso pero un poco de practica ser su!iciente para acerse con ellos. ,n la siguiente imagen podemos ver gr!icamente el signi!icado de estos atributos.

47
Podis comprobar vosotros mismos que los atributos de!inidos para una celda tienen prioridad con respecto a los de!inidos para una tabla. Podemos de!inir, por ejemplo, una tabla con color de !ondo rojo ( una de las celdas de color de !ondo verde ( se ver toda la tabla de color rojo menos la celda verde. 3el mismo modo, podemos de!inir un color azul para los bordes de la tabla ( acer que una celda particular sea mostrada con un borde rojo. .Aunque esto no !uncionar en todos los navegadores debido a que algunos no reconocen el atributo bordercolor.
1abla de color El atributo bgcolor de la ro3o de 8ondo tabla est4 en ro3o. "elda normal Esta celda est4 en >erde. tiene el atributo bgcolor en color >erde
>.'.1. $ablas anidadas

%u( -til tambin es el uso de tablas anidadas. 3e la misma !orma que podamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. As, podemos incluir una tabla dentro de la celda de otra. ,l modo de !uncionamiento sigue siendo el mismo aunque la situacin puede complicarse si el n-mero de tablas embebidas dentro de otras es elevado.
%onse o& Pginas como 3esarrollo4eb.com ( muc as otras .&a ma(ora de las pginas avanzadas/ que basan su dise2o en tablas, realizan anidaciones de tablas constantemente para meter unos elementos de la pgina dentro de otros. *e pueden anidar tablas sin lmite, sin embargo, en el caso de "etscape 6 a( que tener cuidado con el n-mero de tablas que anidamos, porque a medida que metemos una tabla dentro de otra ( otra dentro de esta ( otra ms, aumentando el grado de anidacin sucesivamente... podemos encontrar problemas en su visualizacin ( puede que la pgina tarde un poco de tiempo ms en mostrarse en pantalla.
+amos a ver un cdigo de anidacin de tablas. +eamos primero el resultado ( luego el cdigo, as conseguiremos entenderlo mejor.
"elda de la tabla principal 1abla anidada# celda 1abla anidada# celda D 2 1abla anidada# celda 1abla anidada# celda ! 4
,ste sera el cdigo:

<table cellspacing="14" cellpadding="14" border="$"> <tr> <td align="center"> *elda de la tabla principal </td>

48

<td align="center"> <table cellspacing="%" <tr> <td>Tabla anidada, <td>Tabla anidada, </tr> <tr> <td>Tabla anidada, <td>Tabla anidada, </tr> </table> </td> </tr> </table>
cellpadding="%" border="1"> celda 1</td> celda %</td> celda $</td> celda +</td>
>.'.%. 12em.los .r/cticos

#asta aqu la in!ormacin que pretendamos transmitiros sobre las tablas en #$%&. *era importante a ora realizar alg-n ejemplo de realizacin de una tabla un poco compleja. Por ejemplo la siguiente:
Animales en .eligro de e(tinci"n -ombre 'allena ?so &ardo ,ince 1igre "abezas &re>isi.n 2ADA &re>isi.n 2A2A *AAA EA DA !AA 4AAA A 2DA DEAA
*e puede ver esta tabla en otra ventana, donde tambin podremos e'aminar su cdigo !uente. ;tro ejemplo de tabla con el que podemos practicar:
Climas de Amrica del Sur &arte de arriba 5enezuela &arte de aba3o de :rgentina de :m7rica del :m7rica del )ur. "hile )ur. &ases como: "olombia &ases como: Ecuador Urugua% 'os6ue tropical# clima de "limas martimos con &er\ &aragua% sabana# clima martimo con >eranos secos# con in>iernos in>iernos secos. secos# climas 8rios# clima de estepa# clima des7rtico.
$ambin la podemos ver en una ventana a parte para e'traer su cdigo !uente.
>.'.'. Ma,uetar con tablas

,n #$%& tradicional se utilizan las tablas, aparte de mostrar in!ormacin tabulada como emos visto en este artculo, para maquetar pginas web. 0on las tablas podemos generar una serie de espacios donde podemos mostrar contenidos estructurados en columnas ( !ilas, como la maquetacin de una revista o un portal. &a maquetacin por tablas la comentamos en un taller de #$%&. ,s mu( recomendable su lectura para acerse una idea del proceso de creacin de pginas medianamente avanzadas ( con in!ormacin bien estructurada.
Artculo por
Rubn Alvarez

49
>.-. Cordes de tabla en #$ML Mostramos algunos atributos de table, lidos en HTML 6, para definir el borde de las tablas% especificar bordes de arios tipos, externos e internos. 0omo (a vimos en nuestro manual de #$%&, en los captulos sobre trabajo con tablas, que se puede asignar un borde a las tablas. Para ello utilizbamos el atributo border, pero en #$%& 6 e'iste otros atributos para de!inir cmo queremos que sean los bordes de las tablas.
>.-.1. Cordes e(ternos de las tablas

+eamos el atributo que podemos usar para de!inir distintos tipos de borde e'terno en una tabla. ,l atributo en concreto para de!inir el tipo de borde e'terno se llama 51A%, ( se utiliza en la misma etiqueta $A=&,. *us valores posibles son los siguientes:
frame = void | above | below | hsides | lhs | rhs | vsides | box | border
Paso a describir cada uno de los distintos valores posibles, que a!ectan slo al borde e'terno de la tabla, quedando los bordes de las celdas inalterados: void: "ing-n borde e'terno above: *lo aparece el borde superior belo#: *lo el borde in!erior de la tabla )sides:*e mostrar slo el borde de arriba ( abajo. vsides: *lo los bordes de los lados izquierdo ( derec o l)s: *e mostrar tan solo el borde izquierdo r)s: *e mostrar solamente el borde derec o box: &os 6 bordes border: $ambin se mostrarn los 6 bordes
+eamos un par de ejemplos de uso del atributo 51A%, en tablas: $abla sin bordes e'ternos .!rameQEvoidE/
D 4 G
2 E C
! * F
$abla con borde e'terno arriba ( abajo .!rameQE sidesE/
D 4 G
2 E C
! * F
>.-.%. Cordes internos de las tablas

$ambin podemos de!inir el aspecto de los bordes internos de las tablas con #$%& 6. ,l atributo que debemos utilizar para especi!icar qu bordes internos deben mostrarse es 1<&,*, que tambin se utiliza en la etiqueta $A=&,. 0omo bordes internos nos re!erimos a los bordes de las celdas de la tabla, puesto que cuando se de!ine un borde en una

50
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com tabla no slo tiene borde la parte e'terna de la tabla, sino tambin cada una de sus casillas. &os distintos valores que puede llevar el atributo 1<&,* para de!inir los bordes internos son los siguientes:
rules = none | groups | rows | cols | all
0u(a e'plicacin podemos ver a continuacin: none: "o se coloca ning-n borde interno groups: *lo se mostrarn bordes n los grupos de columnas o !ilas. .veremos ms adelante como agrupar columnas o !ilas ro#s: *lo aparecern bordes entre !ilas. cols: &os bordes internos slo aparecern para separar columnas all: *e mostrarn todos los bordes internos
A ora mostramos un par de ejemplos del atributo rules: *in ning-n borde interno .rulesQEnoneE/
D2 4E GC
! * F
0on borde interno para separar !ilas .rulesQErowsE/
D 2 4 E G C
Artculo por
! * F
>.5. Agru.ar +ilas o columnas de tablas con #$ML En HTML 6.7 podemos agrupar filas de una tabla, o columnas. +ir e para especificar estilos espec(ficos a esas filas o columnas. 0on #$%& 6 e'isten dos etiquetas que nos permiten agrupar !ilas o columnas de una tabla, para crear agrupaciones a las que se les puede de!inir un estilo de una sola vez, ( no !ila a !ila o celda a celda. ,stas etiquetas son las siguientes:
<T@-?N>C Para agrupar conjuntos de !ilas. <*-);5-A#> : Para agrupar conjuntos de columnas.
Ambas etiquetas tienen soporte a partir de #$%& 6, por lo tanto estn disponibles en todos los navegadores modernos ms com-nmente utilizados.
>.5.1. Agru.ar +ilas con D$C8DEF

#acer grupos de !ilas nos sirve para especi!icar estilos a determinadas !ilas de la tabla, de una sola vez. ,l modo de uso es el siguiente:

51

<table cellspacing="+" cellpadding="+" border="%"> <tr> <td>1</td> <td>%</td> <td>$</td> </tr> <tbod' align="center" bgcolor="2ffJJ44" &align="top"> <tr> <td>+</td> <td> Esta es "na celda <br> K </td> <td>:</td> </tr> <tr> <td>M</td> <td>J</td> <td>L</td> </tr> </tbod'> </table>
0omo se puede ver, se tiene una tabla de K !ilas. *e a marcado un grupo de dos !ilas con $=;3I, justamente las dos -ltimas. Para esas !ilas emos de!inido, mediante los atributos de la etiqueta $=;3I, un centrado, un color de !ondo ( una alineacin vertical superior. &os atributos que podramos utilizar con la etiqueta $=;3I son un grupo reducido de los que podramos asignar a etiquetas $1 o $3: align, bgcolor ( valing, class, id, adems de manejadores de eventos. Podemos ver cmo se mostrara esta tabla:
D 2 4 Esta es una celda E C
! *
3e manera similar, se pueden asignar atributos de ojas de estilo en cascada, utilizando el atributo #$%& st(le, como se puede ver a continuacin:
<table cellspacing="%" cellpadding="%" border="%"> <tbod' st'le="fontOsi eC1K49P"> <tr> <td>1</td> <td>%</td> <td>$</td> </tr> <tr> <td>+</td> <td>K</td> <td>:</td> </tr> </tbod'> <tr> <td>M</td> <td>J</td> <td>L</td> </tr> </table>
Aunque a( que decir que el grupo de atributos de ojas de estilo que son interpretados, cuando los colocamos en $=;3I, es bastante reducido. )nternet ,'plorer da mejor variedad de atributos aceptados.

52
>.5.%. Agru.ar columnas con DC8LGR8?!F

+eamos a ora cmo se pueden agrupar varias !ilas con la etiqueta ?0;&C1;<P@. ,l objetivo es bsicamente el mismo que el de agrupar columnas, es decir, de!inir de una sola vez estilos espec!icos para un determinado conjunto de columnas de una tabla. ,l uso de la etiqueta, no obstante, es un poco di!erente.
<table cellspacing="%" cellpadding="%" border="%"> <colgro"p span=% 8idth="+4"> </colgro"p> <tr> <td>1</td> <td>%</td> <td>$</td> </tr> <tr> <td>+</td> <td>K</td> <td>:</td> </tr> <tr> <td>M</td> <td>J</td> <td>L</td> </tr> </table>
0omo se puede ver, 0;&C1;<P se utiliza despus de abrir la tabla ( antes de empezar a meter los contenidos de !ilas ( celdas. ,l atributo span indica el n-mero de columnas que se desean agrupar, empezando por la primera. ,n nuestro ejemplo se an agrupado las dos primeras columnas. &os otros atributos que podemos colocar en 0;&C1;<P son los siguientes: align, id, class, st(le, valign, widt ( manejadores de eventos :avascript. Aunque )nternet ,'plorer acepta otros atributos como bgcolor. ,l ejemplo de colgroup se muestra a continuacin:
D 4 G
2 E C
! * F
Adems, tambin podemos de!inir estilos 0** para las agrupaciones de columnas, con el atributo st(le. Aunque igual que antes, no todos los atributos de ojas de estilo son tenidos en cuenta. *iendo que, en general, )nternet ,'plorer interpreta un ma(or n-mero de atributos 0**. 0uando queremos de!inir estilos para cada una de las columnas de la tabla, de manera que toda columna tenga sus estilos propios, tambin utilizamos 0;&C1;<P. ,n este caso no se debe utilizar el atributo span, sino que se debe de agregar la etiqueta ?0;&@, una por cada columna a la que pretendemos asignar estilos. 3e esta manera:
<table cellspacing="%" cellpadding="%" border="%"> <colgro"p> <col> <col 8idth=144> <col st'le="8idthC %44pxP"> </colgro"p> <tr> <td>1</td> <td>%</td> <td>$</td> </tr> <tr> <td>+</td> <td>K</td> <td>:</td> </tr> <tr>

53

<td>M</td> <td>J</td> <td>L</td> </tr> </table>
,n nuestra tabla, que tena tres columnas, emos colocado la etiqueta ?0;&C1;<P@ ( dentro de esta, tres etiquetas ?0;&@, cada una con sus estilos propios. ,n el primer 0;&, como se puede ver, no a( ning-n atributo. ,so quiere decir que no esto( asignando ning-n estilo a la primera columna de la tabla. ,l segundo 0;& a de!inido una anc ura de 877 pi'els. ,l tercer 0;&, tambin emos de!inido una anc ura, pero esta vez con 0** mediante el atributo st(le. &os atributos 0** que acepta esta etiqueta tambin son bastante reducidos en 5ire!o', aunque )nternet ,'plorer acepta bastantes ms. Para terminar, mostramos la tabla del -ltimo ejemplo:
D2 4E GC
Artculo por
! * F
Parte ':
Formularios en HTML
El traba3o con 8ormularios es uno de los principales puntos 6ue debemos aprender en 012,. 0acen posible muchas de las utilidades cla>e de una web# como el contacto de los creadores de las p4ginas con los >isitantes# as como ciertos ni>eles de interacci.n b4sica % a>anzada con el usuario.
G.1. 0ormularios #$ML

Empezamos la explicacin de la creacin de formularios con el lenguaje HTML. #asta a ora emos visto la !orma en la que el #$%& gestiona ( muestra la in!ormacin, esencialmente mediante te'to, imgenes ( enlaces. "os queda por ver de qu !orma podemos intercambiar in!ormacin con nuestro visitante. 3esde

54
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante el 4eb: 0omprar un articulo, rellenar una encuesta, enviar un comentario al autor... #emos visto anteriormente que podamos, mediante los enlaces a direcciones de email, contactar directamente con un correo electrnico. *in embargo, esta opcin puede resultar en algunos casos poco verstil, si lo que deseamos es que el navegante nos enve una in!ormacin bien precisa ( adems requiere que el visitante tenga instalado en su ordenador alg-n correo electrnico en un programa como ;utloo> ,'press. ,s por ello que el #$%& propone otra solucin muc o ms amplia: &os !ormularios. &os !ormularios son esas !amosas cajas de te'to ( botones que podemos encontrar en muc as pginas web. *on mu( utilizados para realizar b-squedas o bien para introducir datos personales por ejemplo en sitios de comercio electrnico. &os datos que el usuario introduce en estos campos son enviados al correo electrnico del administrador del !ormulario o bien a un programa que se encarga de procesarlo automticamente.
G.1.1. Hu se .uede hacer con un +ormulario

<sando #$%& podemos -nicamente enviar el contenido del !ormulario a un correo electrnico, es decir, construir un !ormulario con diversos campos (, a la ora pulsar el botn de enviar, generar una ventana de redaccin de un email con los datos que el usuario a(a escrito en cada uno de esos campos. A menudo desearemos acer cosas ms complejas con los !ormularios, como que se enve automticamente el correo a un email sin necesidad que el contenido pase por ning-n programa de email. Para ello tendremos que procesar el !ormulario mediante un programa. &a cosa puede resultar un poco ms compleja, (a que tendremos que emplear otros lenguajes ms so!isticados que el propio #$%&. ,n este caso, la solucin ms sencilla es utilizar los programs predise2ados que nos o!recen un gran n-mero de servidores de alojamiento ( que nos permiten almacenar ( procesar los datos en !orma de arc ivos u otros !ormatos. *i vuestras pginas estn alojadas en un servidor que no os propone este tipo de ventajas, siempre podis recurrir a servidores de terceros que o!recen este u otro tipo de servicios gratuitos para webs. Por supuesto, e'iste otra alternativa que es la de aprender lenguajes como A*P o P#P que nos permitirn, entre otras cosas, el tratamiento de !ormularios. As pues, en resumen, con #$%& podremos construir los !ormularios, con diversos tipos de campos, como cajas de te'to, botones de radio, cajas de seleccin, men-s desplegables, etc. *in embargo, debe quedar claro que desde #$%& no se puede enviar directamente el correo, sino que se generar un email en el ordenador del visitante, que ste tendr que enviar EmanualmenteE por medio de su programa de correo. *i queremos que el !ormulario se enve automticamente o se procese en el servidor para generar otro tipo de respuesta, necesitaremos lenguajes de programacin. ,n este %anual de #$%& nos limitaremos a e'plicar la creacin de !ormularios ( os proponemos buscar otras !ormas de proceso de los mismos a travs de otros artculos en 3esarrollo4eb.com.
G.1.%. C"mo hacer un +ormulario en #$ML

&os !ormularios son de!inidos por medio de las etiquetas ?!orm@ ( ?A!orm@. ,ntre estas dos etiquetas colocaremos todos los campos ( botones que componen el !ormulario. 3entro de esta etiqueta ?!orm@ debemos especi!icar algunos atributos: action 3e!ine el tipo de accin a llevar a cabo con el !ormulario. 0omo (a emos dic o, e'isten dos posibilidades: ,l !ormulario es enviado a una direccin de correo electrnico ,l !ormulario es enviado a un programa o script que procesa su contenido
,n el primer caso, el contenido del !ormulario es enviado a la direccin de correo electrnico especi!icada por medio de una sinta'is de este tipo:
<form action="mailtoCdireccionDcorreo7com" 777>
*i lo que queremos es que el !ormulario sea procesado por un programa, emos de especi!icar la direccin del arc ivo que contiene dic o programa. &a etiqueta quedara en este caso de la siguiente !orma:
<form action="direcci/n del archi&o" 777>

55
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &a !orma en la que se e'presa la localizacin del arc ivo que contiene el programa es la misma que la vista para los enlaces. met)od ,ste atributo se encarga de especi!icar la !orma en la que el !ormulario es enviado. &os dos valores posibles que puede tomar esta atributo son post ( get. A e!ectos prcticos (, salvo que se os diga lo contrario, daremos siempre el valor post. enctype *e utiliza para indicar la !orma en la que viajar la in!ormacin que se mande por el !ormulario. ,n el caso ms corriente, enviar el !ormulario por correo electrnico, el valor de este atributo debe de ser Ete'tAplainE. As conseguimos que se enve el contenido del !ormulario como te'to plano dentro del email. *i queremos que el !ormulario se procese automticamente por un programa, generalmente no utilizaremos este atributo, de modo que tome su valor por de!ecto, es decir, no incluiremos enct(pe dentro de la etiqueta ?!orm@ ( emplo de eti!ueta *form+ completa As, para el caso ms abitual Fel envo del !ormulario por correoF la etiqueta de creacin del !ormulario tendr el siguiente aspecto:
<form action="mailtoCdireccionDcorreo7com Qo nombre del archi&o de procesoR" method="post" enct'pe="text/plain">
,ntre esta etiqueta ( su cierre colocaremos el resto de etiquetas que darn !orma a nuestro !ormulario, las cuales sern vistas en captulos siguientes.
1eferencia& Mandar formulario por correo electr0nico &os !ormularios se utilizan abitualmente para implementar un tipo de contacto con el navegante, que consiste en que ste pueda mandarnos sus comentarios por correo electrnico a nuestro buzn. Para este tipo de utilizacin de los !ormularios emos publicado ace tiempo en 3esarrollo4eb.com un artculo que puede resultar mu( interesante para los que deseen un re!erencia e'tremadamente rpida para construir un !ormulario que enve los datos por correo electrnico al desarrollador de la pgina. ,l artculo en cuestin se llama contacto con el navegante.
Para continuar, vamos a ver cmo insertar cada uno de los campos posibles en un !ormulario #$%&, comenzando por los campos de te'to.
1eferencia& *i deseas la !ormacin en vdeo, puedes ver este videotutorial sobre !ormularios, publicado en 3esarrollo4eb.com.
Artculo por
Rubn Alvarez
G.%. 1lementos de 0ormularios. Cam.os de te(to

)emos detenidamente los distintos elementos de formulario "ue sir en para introducir texto. ,l lenguaje #$%& nos propone una gran diversidad de alternativas a la ora de crear nuestros !ormularios, es decir, una gran variedad de elementos para di!erentes propsitos. ,stas van desde la clsica caja de te'to, asta la lista de opciones en un men- desplegable, pasando por las cajas de validacin, etc. ,n el artculo anterior del %anual de #$%& (a vimos cmo iniciar nuestro !ormulario con la etiqueta ?!orm@ ( los distintos atributos que tenemos que utilizar para con!igurar su !uncionamiento. ,n el presente artculo veremos las etiquetas que tenemos que utilizar para crear campos de te'to, que pueden ser de dos

56
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com tipos. +eamos en qu consiste cada una de estas modalidades ( como podemos implementarlas en nuestro !ormulario.
G.%.1. 1ti,ueta &4!?$ .ara te(to corto

&as cajas de te'to son colocadas por medio de la etiqueta ?input@. 3entro de esta etiqueta emos de especi!icar el valor de dos atributos: type ( name. &a etiqueta tendr la siguiente !orma:
<inp"t t'pe="text" name="nombre">
3e este modo e'presamos nuestro deseo de crear una caja de te'to cu(o contenido ser llamado EnombreE .por ejemplo, en el caso de la etiqueta anterior, pero podemos poner distintos nombres a cada uno de los campos de te'to que abrn en los !ormularios/. ,l aspecto de este tipo de cajas es de sobra conocido, aqu lo podis ver:
,l nombre del elemento del !ormulario es de gran importancia para poder identi!icarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo t(pe, (a que, como veremos, e'isten otras modalidades de elementos de !ormulario que usan esta misma etiqueta )"P<$. ,l empleo de estas cajas esta !undamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta. +eremos ms adelante que e'iste otra !orma de tomar te'tos ms largos a partir de otra etiqueta. Adems de estos dos atributos, esenciales para el correcto !uncionamiento de nuestra etiqueta, e'isten otra serie de atributos que pueden resultarnos de utilidad pero que no son imprescindibles: si-e 3e!ine el tama2o de la caja de te'to, en n-mero de caracteres visibles. *i al escribir el usuario llega al !inal de la caja, el te'to que escriba a continuacin tambin cabr dentro del campo pero ir des!ilando, a medida que se escribe, aciendo desaparecer la parte de te'to que queda a la izquierda. maxlengt) )ndica el tama2o m'imo del te'to, en n-mero de caracteres, que puede ser escrito en el campo. ,n caso que el campo de te'to tenga de!inido el atributo ma'lengt , el navegador no permitir escribir ms caracteres en ese campo que los que a(amos indicado.
/ota& ,s importante no con!undir el atributo ma'lengt con el atributo size. %ientras size de!ine el tama2o visible de la caja de te'to, ma'lengt indica el tama2o m'imo real del te'to que se puede escribir. Podemos tener una caja de te'to con un tama2o aparente .size/ que es menor que el tama2o m'imo .ma'lengt /. &o que ocurrir en este caso es que, al escribir, si sobrepasamos el espacio marcado por size, el te'to ira des!ilando dentro de la caja asta que lleguemos a su tama2o m'imo de!inido por ma'lengt , momento en el cual nos ser imposible continuar escribiendo.
value ,n algunos casos puede resultarnos interesante asignar un valor de!inido al campo en cuestin. ,sto puede a(udar al usuario a rellenar ms rpidamente el !ormulario o darle alguna idea sobre la naturaleza de datos que se requieren. ,ste valor inicial del campo puede ser e'presado mediante el atributo value. +eamos su e!ecto con un ejemplo sencillo:
<inp"t t'pe="text" name="nombre" &al"e="#erico #alotes">
Cenera un campo de este estilo:

Perico Palotes
+eremos posteriormente que este atributo puede resultar bastante relevante en determinadas situaciones.
/ota& estamos obligados a utili-ar la eti!ueta *form+

57
Aunque esperamos que a(a quedado claro a medida que se lee en estos captulos sobre !ormularios, emos querido remarcarlo para que quede mu( claro: 0uando queremos utilizar, en cualquer situacin elementos de !ormulario, debemos escribirlos siempre entre las etiquetas ?!orm@ ( ?A!orm@. 3e lo contrario, los elementos se vern per!ectamente en ,'plorer pero no en "etscape. .Actualizado: en estos momentos la ma(ora de los navegadores pueden interpretar bien los campos de te'to sin que estn en una etiqueta 5;1%, sin embargo, la etiqueta 5;1% sigue siendo imprescindible, porque indica qu se desea acer con los campos de te'to, como el action a realizar, ( engloba qu elementos pertenecen a qu !ormularios/ 3ic o de otra !orma, en "etscape no se visualizan los elementos de !ormulario a no ser que esten colocados entre las correspondientes etiquetas de inicio ( !in de !ormulario. ,s por ello que para mostrar un campo de te'to no vale con poner la etiqueta ?input@, sino que abr que ponerla dentro de un !ormulario. As: <form> <inp"t t'pe="text" name="nombre" &al"e="#erico #alotes"> </form>
G.%.%. 1ti,ueta &4!?$6 modalidad de te(to oculto

#a( determinados casos en los que podemos desear esconder el te'to escrito en el campo )"P<$, por medio asteriscos, de manera que aporte una cierta con!idencialidad. ,ste tipo de campos son anlogos a los de te'to, con una sola di!erencia: remplazamos el atributo t(peQEte'tE por t(peQEpasswordE:
<inp"t t'pe="pass8ord" name="nombre">
,n este caso, podis comprobar que, al escribir dentro del campo, en lugar de te'to veris asteriscos. ,stos campos son ideales para la introduccin de datos con!idenciales, principalmente cdigos de acceso o claves. *e ve en !uncionamiento a continuacin.
G.%.'. 1ti,ueta $1I$AR1A .ara te(to largo

*i deseamos poner a la disposicin de usuario un campo de te'to donde pueda escribir cmodamente sobre un espacio compuesto de varias lneas, emos de invocar una nueva etiqueta: ?te'tarea@ ( su cierre correspondiente. ,ste tipo de campos son prcticos cuando el contenido a enviar no es un nombre, tel!ono, edad o cualquier otro dato breve, sino ms bien, un comentario, opinin, etc. en los que e'iste la posibilidad que el visitante desee rellenar varias lneas. 3entro de la etiqueta te'tarea deberemos indicar, como para el caso visto anteriormente, el atributo name para asociar el contenido a un nombre que ser asemejado a una variable en los programs de proceso. Adems, podemos de!inir las dimensiones del campo a partir de los atributos siguientes: ro#s 3e!ine el n-mero de lneas del campo de te'to. cols 3e!ine el n-mero de columnas del campo de te'to. &a etiqueta queda por tanto de esta !orma:
<textarea name="comentario" ro8s="14" cols="+4"></textarea>
,l resultado es el siguiente:

58
Asimismo, es posible prede!inir el contenido del campo. Para ello, no usaremos el atributo value, sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle. +emoslo:
<textarea name="comentario" ro8s="14" cols="+4">Escribe t" comentario7777</textarea>
3ar como resultado:
Escribe tu comentario....
0omo se podr imaginar, los campos de te'to son de vital importancia para los !ormularios, pero no son los -nicos tipos de elementos que podemos colocar dentro de stos. ,n el siguiente artculo veremos otros tipos de elementos para !ormularios.
Artculo por
Rubn Alvarez
G.'. 8tros elementos de +ormulario

Explicamos la sintaxis $ el funcionamiento de las cajas $ listas de seleccin, casillas de erificacin $ botones de radio. ,n el %anual de #$%& de 3esarrollo4eb.com (a emos publicado artculos sobre la creacin de !ormularios ( sobre los campos de te'to en todas sus modalidades. *eguramente a(amos percibido que los te'tos son un manera mu( practica de acernos llegar la in!ormacin del navegante. "o obstante, en muc os casos, permitir al usuario que escriba cualquier te'to permite demasiada libertad ( puede que la in!ormacin que ste escriba no sea la que nosotros estamos necesitando. Por otra parte, para determinados casos, los te'tos libres son di!cilmente adaptables a programs que puedan procesarlos debidamente. ,s por ello que, en determinados casos, puede resultar ms e!ectivo proponer una eleccin al navegante a partir del planteamiento de una serie de opciones disponibles ( de!inidas por nosotros. Por ejemplo, pensemos que queremos que el usuario indique su pas de residencia. ,n ese caso podramos o!recer una lista de pases para que seleccione el que sea. ,ste mismo caso se puede aplicar a gran variedad de in!ormaciones, como el tipo de tarjeta de crdito para un pago, la puntuacin que da a un recurso, si quiere recibir o no un boletn de

59
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com novedades, etc... ,ste tipo de opciones prede!inidas por nosotros pueden ser e'presadas por medio de di!erentes campos de !ormulario. +eamos a continuacin cuales son:
G.'.1. Listas de o.ciones

&as listas de opciones son ese tipo de men-s desplegables que nos permiten elegir una .o varias/ de las m-ltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta ?select@, con su respectivo cierre: 0omo para los casos (a vistos, dentro de esta etiqueta de!iniremos su nombre por medio del atributo name. 0ada opcin ser incluida en una lnea precedida de la etiqueta ?option@. Podemos ver, a partir de estas directivas, la !orma ms tpica ( sencilla de esta etiqueta:
<select name="estacion"> <option>#rima&era</option> <option>Serano</option> <option>-to>o</option> <option>Bn&ierno</option> </select>
,l resultado es:
Primavera
,sta estructura puede verse modi!icada principalmente a partir de otros dos atributos: si-e )ndica el n-mero de valores mostrados a la vez en la lista. &o tpico es que no se inclu(a ning-n valor en el atributo size, en ese caso tendremos un campo de opciones desplegable, pero si indicamos size aparecer un campo donde veremos las opciones de!inidas por size ( el resto podrn ser vistos por medio de la barra lateral de desplazamiento. multiple Permite la seleccin de ms varios elementos de la lista. &a eleccin de ms de un elemento se ace como con el e'plorador de 4indows, a partir de las teclas ctrl o ma(-sculas .la !lec a acia arriba, tambin llamada s i!t/. ,ste atributo se e'presa sin valor alguno, es decir, no se utiliza con el igual: simplemente se pone para conseguir el e!ecto, o no se pone si queremos una lista desplegable com-n.
%onse o& :i es posible. no uses multiple "o recomendamos especialmente la puesta en practica de esta opcin (a que el manejo de las teclas ctrl o s i!t para elegir varias opciones puede ser desconocido para el navegante. ,videntemente, siempre cabe la posibilidad de e'plicarle como !unciona aunque no dejara de ser una complicacin para ms para el visitante.
+eamos cual es el e!ecto producido por estos dos atributos cambiando la lnea:
<select name="estacion">
por:
<select name="estacion" si e="$" m"ltiple>
&a lista quedara de esta !orma:

Primavera Verano Otoo Invierno
&a etiqueta *option+ puede asimismo ser matizada por medio de otros atributos selected 3el mismo modo que multiple, este atributo no toma ning-n valor sino que simplemente indica que la opcin que lo

60
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com presenta esta elegida por de!ecto. As, si cambiamos la lnea del cdigo anterior:
<option>-to>o</option>
por:
<option selected>-to>o</option>
,l resultado ser:
Otoo
value 3e!ine el valor de la opcin que ser enviado al programa o correo electrnico si el usuario elige esa opcin. ,ste atributo puede resultar mu( -til si el !ormulario es enviado a un programa para su procesamiento, puesto que a cada opcin se le puede asociar un n-mero o letra, lo cual es ms !cilmente manipulable que una palabra o te'to. podramos as escribir lneas del tipo:
<option &al"e="1">#rima&era</option>
3e este modo, si el usuario elige primavera, lo que le llegara al programa .o correo/ es una variable llamada estacion que tendr com valor 8. ,n el correo electrnico recibiramos: estacionQ8
G.'.%. Cotones de radio

,'iste otra alternativa para plantear una eleccin, en este caso, obligamos al internauta a elegir -nicamente una de las opciones que se le proponen. &a etiqueta empleada en este caso es ?input@ en la cual tendremos el atributo t(pe a de tomar el valor radio. +eamos un ejemplo:
<inp"t <br> <inp"t <br> <inp"t <br> <inp"t t'pe="radio" name="estacion" &al"e="1">#rima&era t'pe="radio" name="estacion" &al"e="%">Serano t'pe="radio" name="estacion" &al"e="$">-to>o t'pe="radio" name="estacion" &al"e="+">Bn&ierno
/ota& #a( que !ijarse que la etiqueta ?input t(peQEradioE@ slo coloca la casilla pinc able en la pgina. &os te'tos que aparecen al lado, as como los saltos de lnea los colocamos con el correspondiente te'to en el cdigo de la pgina ( las etiquetas #$%& que necesitemos.
,l resultado es el siguiente: Primavera +erano ;to2o )nvierno 0omo puede verse, a cada una de las opciones se le atribu(e una etiqueta input dentro de la cual asignamos el mismo nombre .name/ para todas las opciones ( un valor .value/ distinto. *i el usuario elige supuestamente ;to2o, recibiremos en nuestro correo una lnea tal que esta: estacionQK 0abe se2alar que es posible preseleccionar por de!ecto una de las opciones. ,sto puede ser conseguido por medio del atributo c)ecked:
<inp"t t'pe="radio" name="estacion" &al"e="%" chec6ed>Serano

61
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com +eamos el e!ecto: Primavera +erano ;to2o )nvierno
G.'.'. Ca2as de validaci"n

,ste tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestin. &a sinta'is utilizada es mu( similar a las vistas anteriormente:
<inp"t t'pe="chec6box" name="paella">0e g"sta la paella
,l e!ecto: %e gusta la paella &a -nica di!erencia !undamental es el valor adoptado por el atributo t(pe. 3el mismo modo que para los botones de radio, podemos activar la caja por medio del atributo c)ecked. ,l tipo de in!ormacin que llegara a nuestro correo .o al programa/ ser del tipo: paellaQon .u o!! dependiendo si a sido activada o no/
Artculo por
Rubn Alvarez
G.-. 1nvo6 borrado ) dem/s en +ormularios #$ML

Ense.amos la manera de colocar botones de en (o $ borrado en formularios HTML. Tambi#n conocemos los campos in isibles $ los botones normales. !dems, &acemos un ejemplo prctico. *iguiendo con la e'plicacin de todo lo relativo a !ormularios que estamos o!reciendo en el %anual de #$%&, a llegado el momento de e'plicar cmo podemos acer un botn para provocar el envo del !ormulario, entre otras cosas. 0omo podremos imaginarnos, en !ormularios no solamente abr elementos o campos donde solicitar in!ormacin del usuario, sino tambin abr que implementar otra serie de !unciones. 0oncretamente, an de permitirnos su envo mediante un botn. $ambin puede resultar prctico poder proponer un botn de borrado o bien acompa2ar el !ormulario de datos ocultos que puedan a(udarnos en su procesamiento. ,n este capitulo, para terminar la saga de !ormularios, daremos a conocer los medios de instalar todas estas !unciones ( acabaremos mostrando un ejemplo de !ormulario completo.
G.-.1. bot"n de envo de +ormulario Jbot"n de submitK

Para dar por !inalizado el proceso de relleno del !ormulario ( acerlo llegar a su gestor, el navegante a de enviarlo por medio de un botn previsto a tal e!ecto. &a construccin de dic o botn no reviste ninguna di!icultad una vez !amiliarizados con las etiquetas )"P<$ (a vistas:
<inp"t t'pe="s"bmit" &al"e="En&iar">
0on este cdigo generamos un botn como este:

Enviar
0omo puede verse, tan solo emos de especi!icar que se trata de un botn de envo .t(peQEsubmitE/ ( emos de de!inir

62
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com el mensaje que queremos que aparezca escrito en el botn por medio del atributo value. ,ste tipo de campos )"P<$, para envo de !ormularios, a menudo se conocen simplemente como Ebotones de submitE.
/ota& Al enviar el !ormulario se crear un mensaje con tu programa de correo, que se debe enviar con ese propio programa de correo, para que llegue al destinatario. ,ste es el comportamiento tpico de los !ormularios que se programan con #$%&, que requiere que el usuario tenga un programa de correo instalado ( con!igurado para que !uncione. <na duda tpica es cmo realizar el !ormulario para que se enve directamente desde la pgina web, sin que el usuario deba tener un programa de correo, sino que se pulse el botn de enviar ( se genere ( enve el mensaje automticamente. Para ello es necesario realizar algo de programacin, aparte del propio !ormulario en #$%&, en un lenguaje avanzado, que sea del lado del servidor, como P#P, A*P... ,n 3esarrollo4eb.com tienes todo lo que necesitas para aprender a conseguir el envo automtico de correos, con e'plicaciones detalladas para obtener los resultados por varias vas. $e recomendamos leer el manual ,nvo de !ormularios avanzado.
G.-.%. bot"n de borrado Jbot"n de resetK

,ste botn nos permitir borrar el !ormulario por completo, en el caso de que el usuario desee re acerlo desde el principio. *u estructura sintctica es anloga a la anterior:
<inp"t t'pe="reset" &al"e="@orrar">
A di!erencia del botn de envo, indispensable en cualquier !ormulario, el botn de borrado resulta meramente optativo ( no es utilizado !recuentemente. #a( que tener cuidado de no ponerlo mu( cerca del botn de envo ( de distinguir claramente el uno del otro, para que ning-n usuario borre el contenido del !ormulario que acaba de rellenar por error.
G.-.'. Datos ocultos Jcam.os hiddenK

,n algunos casos, aparte de los propios datos rellenados por el usuario, puede resultar prctico enviar datos de!inidos por nosotros mismos que a(uden al programa en su procesamiento del !ormulario. ,ste tipo de datos, que no se muestran en la pgina pero si pueden ser detectados solicitando el cdigo !uente, no son !recuentemente utilizados por pginas construidas en #$%&, son ms bien usados por pginas que emplean tecnologas de servidor. "o os asustis, veremos ms adelante qu quiere decir esto. $an solo queremos dar constancia de su e'istencia ( de su modo creacin. #e aqu un ejemplo:
<inp"t t'pe=hidden name="sitio" &al"e="8887desarrollo8eb7com">
,sta etiqueta, incluida dentro de nuestro !ormulario, enviara un dato adicional al correo o programa encargado de la gestin del !ormulario. podramos, a partir de este dato, dar a conocer al programa el origen del !ormulario o alg-n tipo de accin a llevar a cabo .una redireccin por ejemplo/.
G.-.-. Cotones normales

3entro de los !ormularios tambin podemos colocar botones normales, pulsables como cualquier otro botn. )gual que ocurre con los campos idden, estos botones por si solos no tienen muc a utilidad pero podremos necesitarlos para realizar acciones en el !uturo. *u sinta'is es la siguiente.
<inp"t t'pe=b"tton &al"e="Texto escrito en el bot/n">
Ouedara de esta manera:

Texto escrito en el botn
,l uso ms !recuente de un botn es en la programacin en el cliente. <tilizando lenguajes como :avascript podemos de!inir acciones a tomar cuando un visitante pulse el botn de una pgina web.
G.-.5. 12em.lo de +ormulario

0on este captulo !inalizamos el tema de !ormularios. Pasemos a ora a ejempli!icar todo lo aprendido a partir de la

63
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com creacin de un !ormulario que consulta el grado de satis!accin de los usuarios de una lnea de autobuses !icticia. ,l !ormulario est construido para que enve los datos por correo electrnico a un buzn determinado. +emos el !ormulario en esta pgina. +osotros tratar de construirlo para ver si abis entendido bien los temas sobre !ormularios. "ombre ,mail
@
Poblacin *e'o #ombre %ujer 5recuencia de los viajes

Varias veces al dia
0omentarios sobre su satis!accin personal
3eseo recibir noti!icacin de las novedades en las lneas de autobuses.

Enviar formulario
Borrar todo
,l !ormulario se puede ver tambin en una pgina a parte. 1ecordad que podis ver el cdigo !uente de cualquier pgina web utilizando los men-s de vuestro navegador, as podris revisar el cdigo que emos utilizado para construir el !ormulario. A continuacin tambin mostraremos el cdigo !uente de este !ormulario, que es importante que todos le ec emos un vistazo, aunque sea rpidamente.
<form action="mailtoCcolaboraDdesarrollo8eb7com" method="post" enct'pe="text/plain"> ,ombre <inp"t t'pe="text" name="nombre" si e="$4" maxlength="144"> <br> Email <inp"t t'pe="text" name="email" si e="%K" maxlength="144" &al"e="D"> <br> #oblaci/n <inp"t t'pe="text" name="poblacion" si e="%4" maxlength=":4"> <br> .exo <br> <inp"t t'pe="radio" name="sexo" &al"e="Saron" chec6ed> Hombre <br> <inp"t t'pe="radio" name="sexo" &al"e="Hembra"> 0"1er <br>

64

<br> 3rec"encia de los &ia1es <br> <select name=""tili acion"> <option &al"e="1">Sarias &eces al dia <option &al"e="%">Ana &e al dia <option &al"e="$">Sarias &eces a la semana <option &al"e="+">&arias &eces al mes </select> <br> <br> *omentarios sobre s" satisfacci/n personal <br> <textarea cols="$4" ro8s="M" name="comentarios"></textarea> <br> <br> <inp"t t'pe="chec6box" name="recibirHinfo" chec6ed> ?eseo recibir notificaci/n de las no&edades en las l(neas de a"tob"ses7 <br> <br> <inp"t t'pe="s"bmit" &al"e="En&iar form"lario"> <br> <br> <inp"t t'pe="5eset" &al"e="@orrar todo"> </form>
Para acabar, vamos a ver lo que recibiran por correo electrnico en la empresa de autobuses cuando un usuario cualquiera rellenase este !ormulario ( pulsase sobre el botn de envio. nombreQ5ederico %ijo *ilvestre emailQ!edeWterrami'.com poblacionQAstorga, &en se'oQ+aron utilizacionQ9 comentariosQ"o creo que sea una buena linea. Poner ms autobuses. recibirDin!oQon
1eferencias& #emos publicado un taller de #$%& con un !ormulario para valorar la pgina web. %u( sencillo ( prctico. Puede ser interesante para a!ianzar estos conocimientos: $aller con !ormularios. Adems, tambin te recomendamos ver el videotutorial sobre !ormularios #$%&, donde repasamos todo lo visto asta el momento sobre la creacin de !ormularios en pginas web.
Artculo por
Rubn Alvarez
G.5. 1ti,uetas 0&1LDS1$ ) L1G14D de +ormularios

Las eti"uetas de HTML 32EL'+ET $ LE1E5' sir en para crear blo"ues de elementos dentro de formularios. ,n el %anual de #$%& de 3esarrollo4eb.com (a emos visto varios artculos para la creacin de !ormularios en #$%&. Pero nos quedaba por ver un par de etiquetas, que no siendo imprescindibles para la realizacin de !ormularios, s nos pueden a(udar a estructurarlos, mejorando la inter!az de usuario de nuestras pginas. &os atributos 5),&3*,$ ( &,C,"3 se utilizan en conjunto ( sirven respectivamente para de!inir ( etiquetar grupos lgicos de elementos de !ormularios. 1ealmente no a!ectan a la operativa del !ormulario, pero sirven para agrupar elementos en di!erentes reas, de modo que se clari!ique la entrada de datos del usuario. Al !ormar varios grupos de

65
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com elementos se puede crear una estructura muc o ms !cil de asimilar por el usuario, sobre todo si se trata de !ormularios que tengan muc os elementos.
G.5.1. 1ti,ueta 0&1LDS1$

&a etiqueta 5),&3*,$ sirve para agrupar los elementos. *e utiliza con su respectiva etiqueta de cierre ( lo que ace es crear un recuadro que rodea a los elementos de !ormulario colocados dentro de ella. Por ejemplo, se podra usar de esta manera:
<fieldset> Elemento de form"larioC <inp"t t'pe="text" name="elemento1"> <br> -tro elementoC <inp"t t'pe="text" name="otro"> </fieldset>
*implemente crear un cuadrado que agrupar los dos elementos del !ormulario incluidos dentro del 5),&3*,$. Podemos ver el resultado en una pgina aparte.
G.5.%. 1ti,ueta L1G14D

&,C,"3 sirve para nombrar o etiquetar un grupo creado con 5),&3*,$. A2ade simplemente una nota aclaratoria sobre qu tipo de in!ormacin se est agrupando en el recuadro. $ampoco sirve para nada en especial, de no ser porque queda bonita ( porque puede servir para a(udar al usuario ( mejorar la inter!az ( la claridad de los !ormularios. &a etiqueta &,C,"3 se coloca despus de la etiqueta 5),&3*,$. $iene su propia etiqueta de cierre. ,ntre ?&,C,"3@ ( ?A&,C,"3@ colocamos el te'to con el que queremos marcar el recuadro de!inido con 5),&3*,$. A la etiqueta &,C,"3 se le puede poner el atributo align para indicar el lugar donde debe aparecer la le(enda. Por ejemplo podramos indicar alignQrig tpara que apareciera en la parte de la derec a, en lugar de la izquierda, que es donde aparece por de!ecto. +eamos a ora un ejemplo sencillo de utilizacin de las etiquetas 5),&3*,$ ( &,C,"3 en conjunto.
<form> <fieldset> <legend align="right">?atos personales</legend> ,ombreC <inp"t t'pe="text" name="nombre"> <br> EdadC <inp"t t'pe="text" name="edad" si e="%"> <br> ?irecci/nC <inp"t t'pe="text" name="direccion"> </fieldset> <br> <fieldset> <legend align="right">?atos de t" ordenador</legend> 0odelo de ordenadorC <inp"t t'pe="text" name="modelo"> <br> .istema !"e te da el problemaC <select> <option &al"e=cp">*#A <option &al"e=impresora>Bmpresora </select> </fieldset> <br> <fieldset> <legend align="right">?escripci/n del problema</legend> <textarea cols="KK" ro8s="J" name="descripcion"></textarea> </fieldset> </form>
,l ejemplo en marc a tendra este aspecto. Podremos comprobar como aparecen tres bloques en el !ormulario, producidos por tres etiquetas 5),&3*,$, con varios campos de !ormulario incluidos en cada una. Adems, cada uno de los 5),&3*,$ tienen dentro un &,C,"3 que sirve

66
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com para nombrar con una le(enda cada uno de los tres bloques.
G.5.'. 1ti,ueta LAC1L

Aunque no !orma parte del objetivo de este artculo, queremos nombrar tambin otra etiqueta llamada &A=,& que s tiene una utilidad especial en la creacin de !ormularios, adems de la esttica. *irve para poner te'to al lado de los elementos de !ormulario ( que tal te'to est asociado al propio elemento. ,se te'to, que pondremos con el tag &A=,&, se asocia a un elemento concreto con el atributo 5;1, colocando como valor del atributo el identi!icador del campo que se est asociando.
<label for="edad">Edad</label> <inp"t t'pe="text" name="edad" id="edad">
0omo vemos, emos creado un &A=,& ( emos colocado en el atributo 5;1 el nombre del campo de !ormulario que estamos asociando a ese te'to. ,l resultado es que el te'to colocado dentro de &A=,& es un elemento interactivo, al que podemos acer clic ( sera como si icisemos clic en el propio campo asociado al &A=,&. Para acabar, comentamos que estas etiquetas se allan relatadas en otro artculo de 3esarrollo4eb.com, con e'plicaciones escritas por otro autor, que podran complementar ( ampliar la presente in!ormacin. *i te interesa, accede al artculo &as nuevas etiquetas de #$%& 6.7 .9/.
Artculo por
Parte (:
Frames o marcos en HTML

,os 8rames en 012,# o marcos si pre8erimos el t7rmino en espa$ol# son una manera de mantener 8i3as algunas partes de la p4gina# mientras se na>ega por las otras. <ueron en el pasado un componente habitual de las p4ginas aun6ue ho% en da se han 6uedado en desuso por di>ersas razones. 5eremos tambi7n un caso especial de 8rames# 6ue se crea con la eti6ueta /< :2E# 6ue es importante conocer por6ue s se usa bastante actualmente.
:.1. 0rames en #$ML

2ntroducin a los frames, un poco de &istoria $ sus utilidades. <na de las ms modernas caractersticas de #$%& son los !rames, que se a2adieron, tanto en "etscape "avigator como

67
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com en )nternet ,'plorer, a partir de sus versines 9.7. &os !rames Fque signi!ican en castellano marcosF son una manera de partir la pgina en distintos espacios independientes los unos de los otros, de modo que en cada espacio se coloca una pgina distinta que se codi!ica en un !ic ero #$%& distinto. Al principio se crearon como etiquetas propietarias del navegador "etscape ( rpidamente la potencia del recurso izo que el uso de !rames se e'tendiera por toda la web. Poco tardara )nternet ,'plorer en incluirlos, para que no se le escapase una novedad tan popular de su competidor. 5inalmente, como respuesta a la popularidad entre los desarrolladores de los !rames, el estndar #$%& 6.7 inclu( estas etiquetas dentro de las permitidas. &os !rames, como decamos, nos permiten partir la ventana del navegador en di!erentes reas. 0ada una de estas reas son independientes ( an de ser codi!icadas con arc ivos #$%& tambin independientes. 0omo resultado, cada !rame o marco contiene las propiedades espec!icas que le indiquemos en el cdigo #$%& a presentar en ese espacio. As mismo, ( dado que cada marco es independiente, tendrn sus propias barras de desplazamiento, orizontales ( verticales, por separado. ,'isten en la web muc as pginas que contienen !rames ( seguro que todos emos tenido la ocasin de conocer algunas. *e suelen utilizar para colocar en una parte de la ventana una barra de navegacin, que generalmente se encuentra !ija ( permite el acceso a cualquier zona de la pgina web. <na de las principales ventajas de la programacin con !rames viene derivada de la independencia de los distintos !rames, pues podemos navegar por los contenidos de nuestro web con la barra de navegacin siempre visible, ( sin que se tenga que recargar en cada una de las pginas que vamos visitando. <n ejemplo de las reas que se pueden construir en una construccin de !rames se puede ver en las imgenes siguientes.
Para el que no a(a tenido oportunidad de conocer los !rames ( su !uncionamiento, o!recemos uno de los ejemplos del tema de !rames que simula la pgina de una carnicera. Para las personas que desean aprender sobre !rames os indicamos leer los siguientes artculos del %anual de #$%& ( el videotutorial sobre el desarrollo con !rames.
Artculo por
:.%. 0rames 1(.licaci"n b/sica

Explicamos los detalles generales $ los ms bsicos sobre la creacin de frames. Eti"uetas 38!ME+ET 9 38!ME. &as pginas web que estn ec as con !rames se componen de una declaracin de los marcos ( tantas pginas en !ormato #$%& corriente como distintas divisiones emos de!inido. &a declaracin o de!inicin de !rames es la -nica pgina que realmente debemos aprender, puesto que las pginas que se van a visualizar en cada uno de los cuadros son !ic eros #$%& de los que venimos aprendiendo anteriormente en este manual. 3ic a de!inicin est compuesta por etiquetas ?51A%,*,$@ ( ?51A%,@, con las que se indicamos la disposicin de todos los cuadros. &a etiqueta ?51A%,*,$@ indica las particiones de la ventana del navegador ( la etiqueta ?51A%,@ indica cada uno de los cuadros donde colocaremos una pgina independiente.

68
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &as particiones que se pueden acer con un ?51A%,*,$@ son en !ilas o columnas. Por ejemplo, podramos indicar que deseamos acer una divisin de la pgina en dos !ilas, o dos columnas, tres !ilas, etc. Para indicar tanto la !orma de partir la ventana Fen !ilas o columnasF como el n-mero de particiones que pretendemos acer, se a de utilizar el atributo 0;&* o 1;4*. ,l primero sirve para indicar una particin en columnas ( el segundo para una particin en !ilas.
/ota& ,s importante indicar que no se puede acer una particin en !ilas ( columnas a la vez, sino que debemos escoger en partir la ventana en una de las dos disposiciones. %s adelante indicaremos cmo partir la ventana tanto en !ilas como en columnas, que se ace con la anidacin de !rames.
,n el atributo 0;&* o 1;4* Fslo podemos elegir uno de los dosF colocamos entre comillas el n-mero de particiones que deseamos realizar, indicando de paso el tama2o que va a asignarse a cada una. <n valor tpico de estos atributos sera el siguiente: colsEF?3G.H3GF )ndica que se deben colocar dos columnas, la de la izquierda tendra un 97H del espacio total de la ventana ( la de la derec a un J7H. ro#sEF;IG.83G.?IGF As indicamos que deseamos tres !ilas, la de arriba con un 8MH del espacio total, la del medio con un espacio correspondiente al L7H del total ( la de abajo con un 9MH. ,n total suman el 877H del espacio de la ventana. Adems del porcentaje para indicar el espacio de cada una de las casillas, tambin podemos indicarlo en pi'eles. 3e esta manera. colsEF?33.833F Para indicar que la columna de la izquierda debe tener 977 pi'els de anc o ( la de la derec a L77. ,sto est bien si nuestra ventana tiene J77 pi'els de anc o, pero esto no tiene porque ser as en todos los monitores de los usuarios, por lo que este modo de e'presar los marcos es importante que se indique de la siguiente manera. colsEF?33.JF As indicamos que la primera columna a de medir 977 pi'els ( que el resto del espacio disponible Fque ser ma(or o menor dependiendo de la de!inicin de la pantalla del usuarioF se le asignar a segunda columna. ,n la prctica podemos mezclar todos estos mtodos para de!inir los marcos de la manera que deseemos, con pocentaje, con pi'els o con el comodn .Z/. "o importa cmo se de!inan, la -nica recomendacin es que uno de los valores que indiquemos sea un asterisco, para que el rea correspondiente a dic o asterisco o comodn sea ms o menos grande dependiendo del espacio que tenga la ventana de nuestro navegador. ;tros mtodos de de!inir !ilas ( columnas, atendiendo a este consejo, seran los siguientes: ro#sEF;33.J.;?GF 3e!inimos tres !ilas, la primera con 877 pi'els de anc o, la segunda con el espacio que sobre de las otras dos, ( la tercera con un 89H del espacio total. colsEF;3G.I3G.;?3.JF ,stamos indicando cuatro columnas. &a primera del 87H del espacio de la ventana, la segunda con la mitad justa de la ventana, la tercera con un espacio de 897 pi'els ( la -ltima con la cantidad de espacio que sobre al asignar espacio a las dems particiones. <na vez emos indicado el n-mero de !ilas o columnas ( el espacio reservado a cada una con la etiqueta ?51A%,*,$@, debemos especi!icar con la etiqueta ?51A%,@ la procedencia de cada uno de los !rames en los que emos partido la ventana. Para ello, disponemos del atributo *10, que se a de de!inir para cada una de las !ilas o columnas. 3e esta manera.
<35A0E src="marco17html">
As queda indicado que el !rame que estamos de!iniendo debe mostrar la pgina marco8. tml en su interior. #asta a ora emos visto bastante in!ormacin terica, la su!iciente para saber construir nuestras propias estructuras de !rames, pero seguro que para aclarar las cosas vendr bien acer alguna prctica. As que en el pr'imo artculo

69
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com pasaremos a la creacin de !rames en pginas web.
Artculo por
:.'. 0rames Creaci"n de una estructura sim.le

Ejemplo de la creacin de un frame simple para ilustrar lo aprendido &asta a&ora. Para ilustrar todo lo que venimos e'plicando podemos ver el ejemplo sobre cmo se creara la de!inicin de !rames de la imagen que podemos ver a continuacin.
<html> <head> <title>?efinici/n de 3rames</title> </head> <frameset ro8s="1K9,T,MK"> <frame src="pagina17html"> <frame src="pagina%7html"> <frame src="pagina$7html"> </frameset> </html>
*e puede ver esta particin de !rames en una pgina a parte. Adems tenemos algunas consideraciones que acer para terminar de comprender este ejemplo: ,l ttulo de la de!inicin de !rames es el que ereda toda la pgina web, por ello, no es buena idea titular como Ede!inicin de !ramesE por ejemplo, (a que entonces toda nuestra pgina se titulara as ( seguramente no sea mu( descriptivo. *i estuvisemos aciendo una pgina para la carnicera pepe sera mejor titular a la de!inicin de !rames algo como E0arnicera Pepe, las mejores carnes en %adridE. &a pgina que de!ine los !rames no tiene bod(. #$%& puede arrojarnos un error si lo incluimos. &as pginas Epagina8. tmlE, Epagina9. tmlE( EpaginaK. tmlE an de escribirse en arc ivos independientes con el nombre indicado. ,n este ejemplo, dic as pginas deberan encontrarse en el mismo directorio que la declaracin de !rames. *i especi!icamos una ruta para acceder al arc ivo podemos colocarlo en el directorio que deseemos. &os colores de cada uno de los !rames los emos colocado con el atributo bgcolor colocado en la etiqueta ?=;3I@ de cada una de las pginas que se muestran en los marcos.
Artculo por
:.-. 0rames ?na ./gina en cada marco

)emos cmo ser(an las distintas pginas independientes "ue componen un sitio creado con frames.

70
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &as pginas que mostraremos en cada marco son documentos #$%& iguales a los que venimos creando anteriormente. Podemos colocar cualquier elemento #$%& de los estudiados en este manual, como etiquetas de prra!o, imgenes, colores de !ondo, etc. 0ada documento, como (a emos indicado, se escribe por separado en su propio arc ivo #$%&. Para el ejemplo del captulo anterior podemos de!inir los arc ivos #$%& de la siguiente manera. pagina;5)tml ,s la pgina que contiene el titular de la web. *implemente se trata de una etiqueta ?#8@ de titular. &a pgina tiene su propio ttulo, con la etiqueta ?$)$&,@, que no se podr visualizar por ning-n sitio a no ser que se muestre esta pgina sin los !rames, (a que las pginas dentro de los marcos eredan el ttulo de la de!inicin de los !rames.
<html> <head> <title>Tit"lo *arnicer(a #epe</title> </head>
?bod( bgcolorQET3,007GE@ ? 8 alignQcenter@0arnicera P,P,?A 8@ ?Abod(@ ?A tml@ pagina?5)tml ,s la pgina que se presentar en el rea principal de la de!inicin de !rames, es decir, la pgina que tiene ms espacio para visualizarse ( donde pondremos los contenidos de la web. ,n este caso muestra un mensaje de bienvenida a la web, que ar las veces de portada.
<html> <head> <title>#ortada de *arnicer(a #E#E</title> </head>
?bod( bgcolorQET05KG80E te'tQET!!!!!!E@ ? 8 alignQEcenterE@=ienvenidos a nuestra web?A 8@ ?br@ ?br@ &a carnicera P,P,, con ms de 877 a2os de e'periencia, es la mejor !uente de carnes de vacuno ( cerdo de la comunidad. ?br@ ?br@ $anto en invierno como en verano puede encontrar nuestras o!ertas de temporada de primera calidad. ?Abod(@ ?A tml@ pagina75)tml ,n esta pgina se mostrar la barra de navegacin por los contenidos del sitio. 0ontiene enlaces que deberan actualizar el contenido del rea principal de la declaracin de !rames, para mostrar los distintos contenidos del sitio, por ejemplo, la portada, los productos, la pgina de contacto, etc.
<html> <head> <title>@arra de na&egaci/n de carnicer(a #E#E</title> </head>
?bod( bgcolorQETA0RL7,E lin>QE!!!!ccE vlin>QE!!!!ccE@ ?div alignQEcenterE@ ?b@ ?a re!QEpagina9. tmlE@Portada?Aa@ [ ?a re!QEproductos. tmlE@Productos?Aa@ [ ?a re!QEcontacto. tmlE@0ontacto?Aa@ ?Ab@ ?Adiv@

71
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ?Abod(@ ?A tml@ Podemos ver cmo queda la pgina de !rames con estos contenidos, que simulan la pgina de una carnicera.
Artculo por
:.5. 0rames Dirigir los enlaces

Explicacin sobre cmo dirigir el enlace al frame "ue deseemos "ue actualice, "ue no tiene por"ue ser el mismo donde est situado. &a -nica particularidad destacable en el ejemplo del captulo anterior, ( en el manejo de !rames en general, se trata de que cada uno de los enlaces !ue colocamos en las p"ginas actuali-an el frame donde est" colocado este enlace . Por ejemplo, si tenemos enlaces en la parte in!erior de la ventana, en el espacio correspondiente al tercer marco, actualizarn los contenidos del tercer !rame, que es donde estn situados los enlaces. ,ste e!ecto que comentamos se puede observar en el ejemplo de la pgina de la carnicera, tal como quedara al incluir los cdigos de las distintas pginas. &o lgico es que al pulsar sobre un enlace de la barra de navegacin actualicemos el !rame principal, que es donde abamos planeado colocar los contenidos, en lugar del !rame donde colocamos la barra de navegacin, que debera mantenerse !ija. Para conseguir este e!ecto debemos acer un par de cosas: 8. Darle un nombre al frame !ue deseamos actuali-ar 3ic o nombre se indica en la etiqueta ?51A%,@ de la de!inicin de !rames. Para ello utilizamos el atributo name, igualado al nombre que le queremos dar a dic o marco. 9. Dirigir los enlaces )acia ese frame Para ello debemos colocar en el atributo target de los enlaces Fetiqueta ?A@F el nombre del !rame que deseamos actualizar al pulsar el enlace. 3espus de darle un nombre al !rame principal, nuestra declaracin de !rames quedara de la siguiente manera.
<frameset ro8s="1K9,T,MK"> <frame src="pagina17html"> <frame src="pagina%7html" name="principal"> <frame src="pagina$7html"> </frameset>
Adems, deberamos colocar el atributo target a los enlaces, tal como sigue.
<a href="pagina%7html" target="principal">#ortada</a> U <a href="prod"ctos7html" target="principal">#rod"ctos</a> U <a href="contacto7html" target="principal">*ontacto</a>
<na vez realizados este par de cambios podemos ver como los enlaces de la barra de navegacin s actualizan la pgina que deben.
:.5.1. <alores .ara el atributo target

0omo emos visto, con el atributo target de la etiqueta ?A@ podemos indicar el nombre del !rame que deseamos que actualice ese enlace. *in embargo, no es este el -nico valor que podemos aplicarle al atributo. $enemos algunos valores adicionales que podemos asignar a cualquier enlace en general. Kblank Para acer que ese enlace se abra en una ventana a parte. "uestros ejemplos en este manual se suelen abrir en una ventana a parte, colocando este valor en el target de los enlaces que llevan a los ejemplos. Kself

72
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com *e actualiza el !rame donde est situado el enlace. ,s el valor por de!ecto. Kparent ,l enlace se actualiza sobre su padre o sobre la ventana que estamos trabajando, si es que no a( un padre. Ktop &a pgina se carga a pantalla completa, es decir, eliminando todos los !rames que pudiera aber. ,ste atributo es mu( importante porque si colocamos en nuestra pgina con !rames un enlace a una pgina e'terna, se abrira en uno de los !rames ( se mantendran visibles otros !rames de la pgina, aciendo un e!ecto que suele ser poco agradable, porque parece que estn evitando que nos escapemos. &a sinta'is de uno de estos valores de atributos colocados en un enlace sera la siguiente.
<A href="httpC//8887g"iarte7com" target="Htop">Acceder a g"iarte7com</A>
Artculo por
:.>. 0rames Anidar +rames

Explicamos como se crean estructuras con frames ms complejas% anidacin de frames. Para crear estructuras de marcos en las que se mezclen las !ilas ( las columnas debemos anidar etiquetas ?51A%,*,$@. ,mpezando por la particin de !rames ms general, debemos colocar dentro las particiones de !rames ms peque2as. &a manera de indicar esto se puede ver !cilmente con un ejemplo.
&os pasos para de!inir la anidacin se pueden encontrar a la derec a. &os distintos !rames vienen numerados con el orden en el que se escriben en el cdigo. ,n la imagen se puede ver el resultado !inal acompa2ada de la representacin sobre la manera de de!inirlos. ,n primer lugar de!inimos una estructura de !rames en dos columnas ( dentro de la primera columna colocamos otra parcicin de !rames en dos !ilas. ,l cdigo necesario es el siguiente.
<frameset cols="%44,T"> <frameset ro8s="1M4,T"> <frame src="pagina17html"> <frame src="pagina%7html"> </frameset> <frame src="pagina$7html"> </frameset>
Podemos ver el ejemplo en una pgina a parte.

/ota& emos colocado un margen en cada una de las lneas de esta de!inicin de !rames para conseguir un cdigo ms entendible visualmente. ,stos mrgenes no son en absoluto necesarios, simplemente nos sirven para ver en qu nivel de anidacin nos encontramos.
,l ejemplo anterior se puede complicar un poco ms si incluimos ms particiones. +amos a ver algo un poco ms

73
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com complicado para practicar ms con las anidaciones de !rames.
&os pasos para de!inir la anidacin se pueden encontrar a la derec a. &os distintos !rames vienen numerados con el orden en el que se escriben en el cdigo. ,n la imagen se observa que el primer !rameset a de!inir se compone de dos !ilas. Posteriormente, dentro de la segunda !ila del primer !rameset, tenemos otra particin en dos columnas, dentro de las que colocamos un tercer nivel de !rameset con una de!incin en !ilas en los dos casos. ,l cdigo se puede ver a continuacin.
<frameset ro8s=":4,T"> <frame src="pagina17html"> <frameset cols="%44,T"> <frameset ro8s="T,1K4"> <frame src="pagina%7html"> <frame src="pagina$7html"> </frameset> <frameset ro8s="T,:4"> <frame src="pagina+7html"> <frame src="paginaK7html"> </frameset> </frameset> </frameset>
Podemos ver el ejemplo en una pgina a parte. #asta aqu emos visto la parte ms bsica de la creacin de !rames. ,n los siguientes captulos podremos aprender a con!igurar los marcos para variar su apariencia (, entre otras cosas, eliminar las barras que separan cada uno de los distintos !rames.
Artculo por
:.G. 0rames Atributos avanzados

Lista de atributos de las eti"uetas frameset $ frame con las "ue podemos configurar la apariencia $ caracter(sticas de los marcos. Aparte de la creacin de los marcos propiamente dic a, e'isten muc os atributos con los que con!igurar su apariencia. Para ello, tanto la etiqueta ?!rameset@ como ?!rame@ admiten diversos atributos que permiten especi!icar la !orma de elementos como los bordes de los !rames, el margen, la e'istencia o no de barras de desplazamiento, etc.
:.G.1. Atributos .ara la eti,ueta D+ramesetF

Ia emos conocido el atributo cols ( rows, que sirven para indicar si la distribucin en marcos se ar orizontalmente o verticalmente. *lo se puede utilizar uno de ellos ( se iguala a las dimensiones de cada uno de las divisiones,

74
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com separadas por comas. borderEFn$mero de pixelsF Permite especi!icar de manera global para todo el !rameset el n-mero de pi'els que a de tener el borde de los !rames. bordercolorEF6rrggbbF 0on este atributo podemos modi!icar el color del borde de los !rames, tambin de manera global a todo el !rameset. frameborderEFyesLnoL3F *irve para mostrar o no el borde del !rame. *us posibles valores son E(esE .para que se vean los bordes/ ( EnoE o E7E .para que no se vean/. ,n la prctica elimina el borde, pero permanece una lnea de separacin de los !rames. framespacingEFn$mero de pixelsF Para determinar la anc ura de la lnea de separacin de los !rames. *e puede utilizar en )nternet ,'plorer ( junto con el atributo !rameborderQE7E sirve para eliminar los bordes de los marcos.
:.G.%. Atributos .ara la eti,ueta D+rameF

Para esta etiqueta emos se2alado en captulos anteriores los atributos src, que sirve para indicar el arc ivo que contiene el marco ( name, para darle un nombre al marco ( luego dirigir los enlaces acia el. +eamos a ora otros atributos disponibles. margin#idt)EFn$mero de pixelsF 3e!ine el n-mero de pi'els que tiene el margen del !rame donde se indica. ,ste margen se aplica a la pgina que pretendemos ver en ese marco, de modo que si colocamos 7, los contenidos del pgina en ese marco estarn pegados por completo al borde del margen ( si indicamos un valor de 87, los contenidos de la pgina estaran separados del borde 87 pi'els. margin)eig)tEFn$mero de pixelsF &o mismo que el anterior atributo, pero para el margen vertical. scrollingEFyesLnoLautoF *irve para indicar si queremos que a(a barras de desplazamiento en los distintos marcos. *i indicamos E(esE siempre saldrn las barras, si indicamos EnoE no saldrn nunca ( si colocamos EautoE saldrn slo si son necesarias. Auto es el valor por de!ecto.
%onse o& a( que tener cuidado si eliminamos los bordes de los !rames, puesto que la pgina web puede tener dimensiones distintas dependiendo de la de!inicin de pantalla del visitante. *i el espacio de la ventana se ve reducido, podra verse reducido el espacio para el !rame ( puede que no quepan los elementos que antes si que caban ( si emos eliminado las barras de desplazamiento puede que el visitante no pueda ver todo el contenido del marco. ,ste mismo consejo se puede aplicar al redimensionamiento de !rames, que veremos en el siguiente atributo. *i acemos que los marcos no sean redimensionables probablemente tengamos una declaracin de !rames demasiado rgida, que puede verse mal en alg-n tipo de pantalla.
noresi-e ,ste atributo no tiene valores, simplemente se pone o no se pone. ,n caso de que est presente indica que el !rame no se puede redimensionar. 0omo emos podido ver, al colocar el ratn sobre el borde de los marcos sale un cursor que nos se2ala que podemos mover dic o borde ( redimensionar as los !rames. Por de!ecto, si no colocamos nada, los marcos si se pueden redimensionar. frameborderEFyesLnoL3F ,ste atributo permite controlar la aparicin de los bordes de los !rames. 0on este atributo igualado a E7E o EnoE los bordes se eliminan. *in embargo, quedan los !eos mrgenes en el borde. Por lo que emos podido comprobar !unciona mejor en "etscape que en )nternet ,'plorer. 3e todos modos, tenemos una nota un poco ms adelante para e'plicar los !rames sin bordes.
/ota& los atributos de !rames no !uncionan siempre bien en todos los navegadores. ,s recomendable que agamos un test sobre lo que

75
estamos dise2ando en varios navegadores para comprobar que nuestros !rames se ven bien en todas las plata!ormas.
bordercolorEF6rrggbbF Permite especicicar el color del borde del marco.

1eferencia& $enemos un taller de #$%& en el que e'plicamos como realizar un !rame sin bordes que se vea bien en los navegadores ms abituales.
Artculo por
:.:. <enta2as e inconvenientes del uso de +rames

)eamos una serie de cosas buenas $ malas deri adas del uso de marcos o frames a la &ora de dise.ar $ utilizar un sitio web. ,l dise2o con !rames es un asunto bastante controvertido, (a que distintos dise2adores tendrn unas u otras opiniones.
1eferencia& *i deseas saber qu son los !rames ( cmo crearlos consulta los captulos de 5rames de nuestro manual de #$%&.
,n mi caso, pienso que es pre!erible no utilizarlos, aunque eso depende del tipo de sitio web que ests constru(endo, (a que en algunos casos s que sera mu( adecuado su uso. +o( a colocar unas ventajas e inconvenientes del uso de marcos .!rames/. *iempre es a mi entender, otros pueden tener otras opiniones.
:.:.1. <enta2as de usar +rames

&a navegacin de la pgina ser ms rpida. Aunque la primera carga de la pgina sera igual, en sucesivas impresiones de pginas (a tendremos algunos marcos guardados , que no tendran que volverse a descargar. 0rear pginas del sitio sera ms rpido. 0omo no tenemos que incluir partes de cdigo como la barra de navegacin, ttulo, etc. crear nuevas pginas sera un proceso muc o ms rpido. Partes de la pgina .como la barra de navegacin/ se mantienen !ijas ( eso puede ser bueno, para que el usuario no las pierda nunca de vista. ,stas mismas partes visibles constantemente, si contienen enlaces, pueden servir mu( bien para mejorar la navegacin por el sitio. %antienen una identidad del sitio donde se navega, pues los elementos !ijos conservan la imagen siempre visible.
:.:.%. &nconvenientes de usar +rames

Ouitan espacio en la pantalla. ,l espacio ocupado por los !rames !ijos se pierde a la ora de acer pginas nuevas, porque (a est utilizado. ,n de!iniciones de pantalla peque2a o dispositivos como Palms, este problema se ace ms patente. 5uerzan al visitante a entrar por la declaracin de !rames. *i no lo acen as, slo se vera una pgina interior sin los recudros. ,stos recuadros podran ser insu!icientes para una buena navegacin por los contenidos ( podran no conservar una buena imagen corporativa.

76
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &a promocin de la pgina sera, en principio, ms limitada. ,sto es debido a que slo se debera promocionar la portada, pues si se promocionan pginas interiores, podra darse en caso de que los visitantes entrasen por ellas en lugar de por la portada, creandose el problema descrito en el punto anterior. A muc a gente les disgustan pues no se sienten libres en la navegacin, pues entienden que esas partes !ijas estn limitando su movilidad por la web. ,ste e!ecto se ace ms patente si la pgina con !rames tiene enlaces a otras pginas web !uera del sitio (, al pulsar un enlace, se muestra la pgina nueva con los marcos de la pgina que tiene !rames. Algunos navegadores no los soportan. ,sto no es mu( abitual, pero si estamos aciendo una pgina que queramos que sea totalmente accesible deberamos considerarlo importante. &os boo>mar>s o !avoritos no !uncionan correctamente en muc os casos. *i queremos incluir un !avorito a una pgina de un !rame que no sea la portada podemos encontrar problemas. Puede que el botn de atrs del navegador no se comporte como deseamos. *i quieres actualizar ms de un !rame con la pulsacin de un enlace debers utilizar :avascript. Adems los scripts se pueden complicar bastante cuando se tienen que comunicar varios !rames entre si.
:.:.'. Conclusi"n
,l trabajo con !rames puede ser ms o menos indicado dependiendo de las caractersticas de la pgina a desarrollar, es tu tarea saber si en tu caso debes utilizarlos o no.
Artculo por
:.=. 1ti,ueta &+rame

Explicamos detenidamente la eti"ueta 238!ME de HTML $ todos sus atributos, con alg-n ejemplo de uso. &os !rames .!rame en ingls signi!ica marco/ son unas erramientas que an tenido una istoria dilatada en el desarrollo de pginas web con #$%&. 3e ser una etiqueta no estndar a pasado a ser soportada por todos los navegadores ( !ormar parte de las especi!icaciones de #$%&. Por otra parte, el !rame siempre a sido una utilidad para acer pginas web de uso, cuando menos, controvertido, puesto que tiene ciertas desventajas que muc as veces son ms importantes que la indudable practicidad. ,n cualquier caso, en 3esarrollo4eb.com (a emos ablado su!iciente sobre la etiqueta 5rame ( emos tratado ampliamente sus ventajas e inconvenientes. ,n este artculo vamos a ablar de una etiqueta E ermanaE que es a da de o( muc o ms usada, porque resulta ms -til ( menos problemtica que los propios !rames. *e trata de i!rame, un tag incluido en las especi!icaciones de #$%& 6.7.
/ota& i!rame viene de inline !rame, pero en castellano a veces se les llama !rames !lotantes
1e!erencias sobre la etiqueta !rame: 5rames en #$%& +entajas e inconvenientes del uso de !rames 5rames F ,'plicacin bsica 0ontrol de !rames en :avascript 5rames sin bordes 5rames F Atributos avanzados Actualizar dos !rames con un solo enlace 0rear variables o !unciones globales a todos los !rames

77
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 5rames F <na pgina en cada marco ... ,n concreto i!rame sirve para crear un espacio dentro de la pgina donde se puede incrustar otra web. ,s un cuadrado cu(as dimensiones debe especi!icar el desarrollador en la propia etiqueta i!rame, que tiene asociada una pgina web que se carga en dic o espacio. ,sa pgina web tendr sus propios contenidos ( estilos, independientes del conte'to donde se est mostrando. Adems ser per!ectamente !uncional: si tiene enlaces se mostrarn en ese mismo espacio ( si tiene scripts o aplicaciones dentro se ejecutarn tambin de manera autnoma en el espacio reservado al i!rame.
:.=.1. 12em.los de uso de i+rame

)!rame se utiliza en muc os conte'tos. 3entro de un i!rame podemos mostrar contenidos de otras pginas, como si estuvieran en la nuestra, por lo que sirven para ejemplos como: 0digos de banner, que se invocan por medio de un i!rame pidiendo los datos del banner generalmente a un servidor de banners que puede estar en otra red. +isualizar contenidos de terceros, como bloques de noticias o novedades que o!recen en otras webs. )nter!aces de usuario, en el que ciertas actividades se realizan de !orma autnoma ( el procesamiento est en otra pgina web.
:.=.%. ?so de i+rame +rente a +rame

Actualmente la etiqueta i!rame se utiliza ms a menudo que la etiqueta !rame, porque no da tantos problemas como esta. &a di!erencia principal est basada en que la etiqueta i!rame no necesita una declaracin de los espacios de los !rames o !rameset, porque se incrusta en el cdigo #$%& de la pgina. ,l i!rame, por tanto, no provoca problemas de navegacin, como los que ocurren con los !rames normales si no se entra correctamente a travs del !rameset. $ambin, (a que no e'iste el !rameset en los i!rame, no adolece de los problemas del uso de !rames, sobretodo a la ora en que la pgina es inde'ada en los motores de b-squeda. Por decirlo de alguna manera, trabajar con i!rame o !rames !lotantes es tan sencillo como acer una tabla, que se codi!ica dentro de la maqueta #$%&, con su espacio reservado dentro de la pgina. As, la -nica di!erencia con respecto a una tabla es que el contenido del i!rame se e'trae de otra pgina web.
:.=.'. Construcci"n de la eti,ueta i+rame

0omo decimos, el i!rame se coloca directamente en el cdigo #$%&, en el lugar donde queremos que aparezca. *e colocara con un cdigo como este:
<iframe src="paginaHf"ente7html" 8idth=%L4 height=%K4>Texto para c"ando el na&egador no conoce la eti!"eta iframe</iframe>
0omo se ve, los atributos principales de i!rame son la pgina web que se va a mostrar en el espacio ( el anc o ( alto del recuadro que reservemos para el !rame !lotante. 0omo se puede ver, la etiqueta i!rame tiene su correspondiente etiqueta de cierre. $odo el te'to que coloquemos entre la etiqueta de inicio ( la de cierre es te'to alternativo, que slo se mostrar en caso que el navegador del visitante no acepte la etiqueta i!rame.
:.=.-. $odos los atributos de i+rame

,stos seran los atributos disponibles para la etiqueta i!rame: src& Para indicar la pgina web que se mostrar en el espacio del !rame !lotante. #idt)& Para de!inir la anc ura del recuadro del i!rame )eig)t& Para de!inir la altura del i!rame

78
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com name& Para especi!icar el nombre del !rame, que podemos utilizar luego para re!erirnos a l con el target de los lin>s, o mediante javascript. id& Para indicar el identi!icador del i!rame, ( poder re!erirnos a l desde javascript. frameborder& para de!inir si queremos o no que a(a un borde en el !rame. &os valores posibles son 7 [ 8. !rameborderQ7 indicara que no queremos borde ( !rameborderQ8 que s. scrolling& indica si se quiere que aparezcan barras de desplazamiento para ver los contenidos del i!rame completo, en el caso que no aparezcan en el espacio reservado para el i!rame. &os valores posibles son: (es [ no [ auto. ,l valor E(esE es para que aparezcan siempre las barras de desplazamiento o barras de scroll, EnoE sirve para que no aparezcan nunca ( EautoE es para que aparezcan slo cuando son necesarias .es el valor por de!ecto/ margin#idt)& Para de!inir el margen a izquierda ( derec ar que debe tener la pgina que va dentro del i!rame, con respecto al borde. ,ste margen va en pi'els, pero prevalecer el margen que pueda tener asignada la pgina web que mostremos en el !rame !lotante. margin)eig)t& lo mismo que marginwidt , pero en este caso para el tama2o del margen por la parte de arriba ( abajo. margin& para especi!icar alineacin del !rame, igual que se especi!ica para las imgenes. style y class& los atributos para de!inir el aspecto del i!rame por medio de ojas de estilo css. Para acabar, aqu vemos otro ejemplo de i!rame con unos cuantos atributos ms:
<iframe name=miframeflotante src="colabora7htm" 8idth=+44 height=KK4 frameborder="4" scrolling='es margin8idth=% marginheight=+ align=left>T" na&egador no soporta frames<<</iframe>
Artculo por
Parte ):
Lo nuevo en HTML *+
El est4ndar 012, 4.A tra3o consigo di>ersas eti6uetas 6ue implementan nue>os elementos 012,# 6ue podemos incorporar en p4ginas web.
=.1. Las nuevas eti,uetas de #$ML -.;

En este art(culo eremos estas nue as eti"uetas del estandar HTML 6.7.

79
=.1.1. &ntroducci"n
0uando )nternet empezaba su imparable escalada, la versin del estndar #$%& que circulaba era la 9.7, el cul siguen soportando los navegadores ms actuales. Pero las erramientas de que se dispona no o!recan un control preciso de los documentos. Pero como por aquel entonces el objetivo de )nternet estaba !undamentalmente orientado al mbito acadmico ( no al de dise2o, no se le dio demasiada importancia a la cuestin de lanzar una versin mejorada del estndar asta que "etscape, que por aquel entonces era la empresa lder en el sector, tom la iniciativa de incluir nuevas etiquetas pensadas para mejorar el aspecto visual de las pginas web. Por este motivo el ),$5 .)nternet ,ngineering $as> 5orce/ www.iet!.cnri.reston.va.us, o lo que es lo mismo, Crupo de $rabajo en )ngeniera de )nternet, comenz a elaborar nuevos estndares, los cuales dieron como !ruto el #$%& K.7, que result ser demasiado grande para las in!raestructuras que aba en ese momento, lo cual di!icult su aceptacin. As pues, una serie de compa2as .entre las que estaban "etscape, *un %icros(stems o %icroso!t, entre otras/, se unieron para crear lo que o( se denomina 4K0 .o lo que es lo mismo, 0onsorcio para la 4orld 4ide 4eb/, que !ue !undado en octubre de 8.GG6 para conducir a la 4orld 4ide 4eb a su m'imo potencial, desarrollando protocolos de uso com-n, para normalizar el uso de la web en todo el mundo. ,l compromiso del 4K0 de encaminar a la 4eb a su m'imo potencial inclu(e promover un alto grado de accesibilidad para las personas con discapacidades. ,l grupo de trabajo permanente 4eb Accessibilit( )nitiative .4A), )niciativa para la Accesibilidad de la 1ed/, en coordinacin con organizaciones alrededor de todo el mundo, persigue la accesibilidad de la 4eb a travs de cinco reas de trabajo principales: $ecnologa, directrices, erramientas, !ormacin, di!usin, e investigacin ( desarrollo. 3e esta iniciativa naci el borrador de #$%& K.9 ( en su versin de!initiva se introdujeron cambios esenciales para las posibilidades que empezaban a o!recer los navegadores, estas inclusiones !ueron las tablas, los applets, etc. ,n julio de 8.GGR nace el borrador del #$%& 6.7 ( !inalmente se aprueba en diciembre de 8.GGR este estndar inclua como mejoras los marcos .!rames/, las ojas de estilo ( la inclusin de scripts en pginas web, entre otras cosas.
Artculo por
Christian Santaluca
=.%. Las nuevas eti,uetas de #$ML -.; J1K

)eamos una serie de eti"uetas para formatear el texto de las pginas HTML, con una bre e descripcin de cada una de ellas. ,ntre el estndar del #$%& K.9 al 6.7 se introdujeron oc o nuevas etiquetas de las cuales daremos una breve e'plicacin.
=.%.1. DHF... DLHF

&as etiquetas ?O@ ( ?AO@ act-an de !orma mu( parecida a ?=&;0YO<;$,@ pero con la particularidad de que a2ade un sangrado en prra!os ms peque2os ( sin necesidad de romper el prra!o. *eg-n el 4K0, la etiqueta ?=&;0YO<;$,@ es para a2adir sangrados largos ( ?O@, para sangrados ms peque2os, sin necesidad de romper el prra!o.
/ota& ,n el #$%& 6.7 es imprescindible poner la etiqueta de apertura ( la de clausura ?O@.... ?AO@.

80
=.%.%. DACR84EMF... DLACR84EMF

&as etiquetas ?A01;"I%@... ?AA01;"I%@, indican que a( un acrnimo en el te'to. <n acrnimo es un peque2o te'to que a(uda a e'plicar la estructura del te'to una !rase.
=.%.'. D&4SF... DL&4SF ) DD1LF... DLD1LF

<tilice ? )"*@...?A)"*@ para marcar las partes de un documento que se an agregado desde la versin pasada del documento. ?3,&@... ?A 3,&@ marca de manera similar un te'to de un documento que se a suprimido desde la versin anterior.
=.%.-. DC8LGR8?!F... DLC8LGR8?!F

*e utiliza para tener un mejor control sobre un el !ormato de las tablas especi!icando las caractersticas que comparten como: anc ura, altura ( alineacin. 0ada tabla debe tener por lo menos un ?0;&C1;<P@V sin especi!icar ninguna caracterstica de ? 0;&C1;<P @. #$%& 6.7 asume que una tabla contiene un solo grupo de columnas ( que este contiene todas las columnas de una tabla. Por ejemplo, esto nos servira para crear una tabla con una celda en la que puede incluirse una descripcin ( despus seguido de c ec> bo'es para seleccionar las opciones deseadas. 0digo: <TA@)E>
TA@)E> <*-);5-A# span="14" 8idth="$4"> <*-);5-A# span="1" 8idth="4T"> <THEA?> <T5>777 </
3e esta !orma, ?0;&C1;<P@ proporciona un !ormato ms agradable a los c ec> bo'es sin necesidad de especi!icar, propiedades identicas para cada !ila. &a etiqueta de inicio ? 0;&C1;<P @, requiere otra de cierre. 0on el que obtenemos: .en "estcape slo se ver la tabla, no el botn/.
Artculo por
Christian Santaluca
=.'. Las nuevas eti,uetas de #$ML -.; J%K

Explicacin de las nue as eti"uetas de HTML 6.7 para uso en formularios. ,stamos aciendo un repaso de las nuevas etiquetas disponibles en el #$%& 6.7. ,sta in!ormacin !orma parte de una serie de artculos que comenz en &as nuevas etiquetas de #$%& 6.7 ( se dio continuidad en el la segunda entrega, bajo el ttulo &as nuevas etiquetas de #$%& 6.7 .8/. ,n el presente te'to vamos a ablaros sobre las etiquetas del #$%& 6.7 relacionadas con la creacin de !ormularios, que muc as veces son desconocidas, pero no por ello dejan de ser interesantes. ,l paseo por esta nueva serie de etiquetas del #$%& viene de la mano de &uciano %oreno ( con revisin en 9788 de %iguel Angel Alvarez.
=.'.1. D0&1LDS1$F... DL0&1LDS1$F

#asta a ora, no disponamos de ninguna manera de agrupar visualmente varios controles, si no ec bamos mano de elementos que no son del !ormulario, como tablas o capas .divisiones o elementos 3)+, como pre!ieras llamarles/. A ora, si encerramos una parte de un !ormulario dentro de la etiqueta 5),&3*,$, se mostrara un rectngulo alrededor de los campos englobados por dic a etiqueta. Adems, podemos indicar un ttulo en el rectngulo creado por 5),&3*,$ ( para ello utilizamos la etiqueta &,C,"3, que admite el parmetro alignQEle!t A center A rig t A top A bottomE, lo que nos permite alinear el ttulo orizontal ( verticalmente.

81
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Para aclarar el aspecto de la agrupacin de campos con 5),&3*,$ podemos ver el siguiente e!ecto obtenido al agrupar un par de elementos de !ormulario. 3atos personales "ombre: ,dad:
/ota& &a -nica pega es que deberemos introducir el conjunto en una celda de tabla o una capa 3)+ o cualquier otro tipo de contenedor. A ese contenedor podemos asignarle un anc o determinado, (a que si no lo acemos as, el recuadro abarcara todo el anc o de pantalla disponible. ;tra posibilidad es aplicar estilos 0** sobre la etiqueta 5),&3*,$, en el caso que sepamos usar las #ojas de ,stilo en 0ascada.
( emplo&
<form action="2" method="post" enct'pe="text/plain" name="miform"> <table 8idth="%44"> <tr> <td> <fieldset> <legend align="left"><font color="red">*a1a de texto</font></legend> pon t" nombreC <inp"t t'pe="text" si e="1K"> </fieldset> </td> </tr> <table> </form> 1eferencia& Para los interesados, cabe se2alar que en 3esarrollo4eb.com e'iste un artculo que e'plica estas etiquetas desde otro punto de vista ( con las palabras de otro autor, que se puede leer en el lin> ,tiquetas 5),&3*,$ ( &,C,"3 de !ormularios.
=.'.%. DLAC1LF... DLLAC1LF

#asta no ace muc o los te'tos que ponemos al lado de los campos de !ormulario no estaban asociados a dic os campos. ,s decir, el te'to que colocamos al lado de un elemento de !ormulario, para especi!icar qu debe escribir el usuario en el campo, no tiene ninguna relacion real con el propio elemento de !ormulario. Por ejemplo, si tenemos un cdigo como este:
?irecci/nC <inp"t t'pe="text" name="direccion">
,l te'to E3ireccinE no est asociado para nada con el campo )"P<$. Por ello, al pulsar sobre el te'to E3ireccinE no ocurre nada. ,sto es as tambin con otros campos de !ormulario, como las cajas de c ec>bo' o botones de radio.
<inp"t t'pe="chec6box" name="interesado"> Esto' interesado
*i pulsamos sobre el te'to que a( al lado del campo de con!irmacin E,sto( interesadoE, \no sucede nadaX Pero a ora, con la utilizacin de la etiqueta &A=,& podemos conseguir que, aciendo clic en el te'to E,sto( interesadoE, el control c ec>bo' cambie de estado. ( emplo&
<form action="2" method="post" enct'pe="text/plain" name=""n e1emplo ms"> <label> <inp"t t'pe="chec6box" name="email"> 5ecibir email </label> </form>
,se ejemplo de &A=,& es per!ectamente vlido ( asocia el te'to E1ecibir emailE al campo c ec>bo' de !ormulario, de manera que si pulsamos sobre E1ecibir emailE cambiar el estado del campo c ec>bo' asociado. *in embargo, en la etiqueta &A=,& podemos utilizar un atributo llamado 5;1, que sirve para indicar e'plcitamente a qu campo de !ormulario se est asociando ese te'to. Para ello colocamos como valor del atributo 5;1 el identi!icador del campo que estamos asociando a ese &A=,&. ,sto nos permite una ma(or versatilidad a la ora de componer el #$%& de nuestra

82
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com pgina. +eamos el siguiente ejemplo:
<form> <label for="hombre">Hombre</label> <inp"t t'pe="radio" name="sexo" id="hombre" &al"e="hombre"> <br> <label for="m"1er">0"1er</label> <inp"t t'pe="radio" name="sexo" id="m"1er" &al"e="m"1er"> </form>
*i ponemos este ejemplo en marc a, veremos que pulsando en el te'to E#ombreE se activa el botn de radio E ombreE. 3el mismo modo, si pulsamos sobre el te'to E%ujerE se activar la opcin del radio button EmujerE. Podemos ver ese peque2o cdigo en marc a a continuacin: #ombre %ujer
=.'.'. DC?$$84F... DLC?$$84F

A partir de la implementacin de los estndares #$%& 6.7 contamos con varias etiquetas nuevas para construir !ormularios, siendo =<$$;" una de ellas, bastante -til por cierto. &a pega es que las versiones de 6 de "estcape se lanzaron antes de estas implementaciones, por lo que estas nuevas etiquetas slo se pueden visualizar correctamente con )nternet ,'plorer 6 ( superiores. =<$$;" se encuentra ampliamente soportada en la actualidad. ,sta etiqueta proporciona un mtodo -nico para la implementacin de cualquier tipo de botn de !ormulario. *us principales atributos son: t(peQEtipoE, que puede tomar los (a conocidos valores submit .por de!ecto/, reset ( button. nameQEnombreE, que asigna un nombre identi!icador -nico al botn. valueQEte'toE, que de!ine el te'to que va a aparecer en el botn.
&a principal ventaja que aporta estas etiquetas es que a ora vamos a poder introducir dentro de ellas cualquier elemento de #$%&, como imgenes ( tablas. Podemos ver un ejemplo a continuacin.
<form action="2" method="post" enct'pe="text/plain" name="miform"> <b"tton name="botonH1" t'pe="b"tton"> <table 8idth="14" cellspacing="4" cellpadding="%" border="1"> <tr> <td>"no</td> <td>dos</td> </tr> <tr> <td>tres</td> <td>c"atro</td> </tr> </table> </b"tton> </form> 1eferencia& *i deseas aprender algo ms sobre la etiqueta =<$$;" te recomendamos leer el artculo =otones #$%& con la etiqueta =<$$;".
Artculo por
Luciano Moreno

83
Parte 1+:
,onido en HTML
5eremos di>ersos modos de colocar un sonido de 8ondo en p4ginas web % los tipos de archi>o sonoro 6ue son adecuados para p4ginas web.
1;.1. Sonido en #$ML &6 introducci"n

Este es el primer cap(tulo de un manul de el sonido en la web. ,n su corta pero rpida vida, las pginas web an pasado a ser no (a unos meros documentos te'tuales a los que se puede acceder por )nternet, sino unas verdaderas presentaciones multimedia, que combinan te'tos con imgenes, sonidos, videos ( elementos de realidad virtual. *i el primer paso que se dio !ue a2adir imgenes a las pginas web, tanto estticas como dinmicas C)5 animados/, el siguiente paso consisti en introducir sonidos en las mismas, consiguiendo con ellos el apelativo de multimedia. I nos re!eriremos en lo sucesivo cuando ablemos de sonido tanto a sonido sintetizado como a verdaderas grabaciones de audio, de calidad mu( elevada. A ora bien, aunque los navegadores an sido capaces de interpretar los !ic eros de sonido adecuados desde ace (a algunas versiones, es cierto que la aplicacin de sonidos a las pginas web a estado limitada desde siempre por el anc o de banda necesario en las cone'iones a )nternet para poder descargar de !orma adecuada dic os !ic eros, debido al tama2o e'cesivo de los mismos. ;tra de las limitaciones importantes que encontramos a la ora de incluir !ic eros de sonido en nuestras pginas es la di!erentes implementacin que acen de ellos los navegadores web ms usados. ,n e!ecto, no slo deberemos usar etiquetas #$%& distintas para )nternet ,'plorer que para "etscape "avigator, sino que a veces la !orma misma de interpretar el sonido puede di!erir de uno a otro navegador. Por -ltimo, a( que destacar que a la ora de incluir !ic eros de audio en nuestras pginas debemos ser conscientes que muc os de los !ormatos usados, sobre todo en grabaciones de calidad, precisan un plugin o programa especial para su reproduccin en el navegador cliente. I si es cierto que actualmente a( ciertos plugins se an trans!ormado casi en un estndar en )nternet .como el de 1eal Audio o el de %PK/, a( otros posibles que no es normal tener instalados, por lo que si incluimos !ic eros de esos tipos obligaremos al usuario a tener que instalarlos, cosa a la que suele ser reacio.
Artculo por
Luciano Moreno
1;.%. Sonido en #$ML &&6 caractersticas del sonido digital

*onceptos bsicos del sonido digital. +amos a estudiar algunos de los conceptos bsicos del sonido digital, aunque sin entrar en demasiadas consideraciones tcnicas. Para aquellos que deseen ms in!ormacin, e'isten multitud de sitios web que estudian espec!icamente el

84
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com sonido digital ( el ardware necesario para su captura ( reproduccin. ,l sonido tiene una naturaleza ondulante, es decir, se propaga en !orma de ondas analgicas desde el objeto que lo produce. &as caractersticas propias de cualquier sonido .desde el producido por un automvil asta una bella cancin/, sus di!erentes tonos ( notas dependen precisamente de las propiedades !sicas de las ondas que lo !orman. Para poder viajar desde el emisor al receptor, las ondas de sonido precisan de un medio !sico de soporte, (a sea el aire de la atms!era, al agua, etc. $anto es as que en el espacio e'terior, donde no a( medio !sico soporte, no se pueden transmitir sonidos. *i representamos en un gr!ico un sonido complejo, obtendremos la siguiente !igura:
,n la que podemos apreciar los di!erentes valores de onda que va tomando el sonido. $odos sabemos que los equipos in!ormticos no trabajan con datos analgicos, sino que lo acen con datos digitales, !ormados por estados binarios. Por lo tanto, para representar un sonido, desde el punto de vista in!ormtico, es preciso capturarlo en una naturaleza binaria, para lo que se ace un muestreo del mismo, tomando determinados valores de las ondas ( representando dic os valores en !ormato digital. ,n cada captura obtendremos un punto de la gr!ica anterior.
Pero, N0untas muestras deberemos tomarP. ,ste es el verdadero meollo de la cuestin, (a que cuantas ms muestras tomemos, ms !iel ser el sonido capturado respecto al original, con lo que tendr ms calidad. Para medir el n-mero de capturas utilizamos la !recuencia del muestreo. 0omo un #erzio es un ciclo por segundo, la !recuencia de una captura en #erzios representa el n-mero de capturas que realizamos en un segundo. As, una !recuencia de muestreo de 97 Y#z .97 Yilo #erzios Q 97777 #erzios/ realizar 97777 capturas de puntos cada segundo. ,l odo umano es captar de captar la asombrosa cantidad de 66777 sonidos por segundo, es decir, 66 Y#z. Por lo tanto, para que un sonido digital tenga su!iciente calidad deber estar basado en una !recuencia similar a sta. ,n general, el valor estndar de captura de sonidos de calidad es de 66,8 Y z .calidad 03/, aunque a( capturadoras de sonido pro!esionales que llegan asta los 877 Y z, con objeto de obtener un ma(or n-mero de puntos sobre la muestra, consiguiendo una calidad m'ima. ;tro concepto del que abris odo ablar en torno al sonido digital es el n-mero de bits de una tarjeta de sonido. ,l origen de esta magnitud es que, a la ora de capturar el sonido, no slo es importante el n-mero de muestreos tomados, sino tambin la cantidad de in!ormacin capturada en cada uno de esos muestreos. <na vez capturado el sonido, para su posterior reproduccin en un equipo in!ormtico es necesario mandar una serie de impulsos o posiciones a los altavoces para que creen el sonido a partir de ellos. N0moP. =ien, produciendo a partir de esas posiciones movimientos de las membranas de los altavoces, movimientos que trans!orman de nuevo el sonido digital en analgico, estado en el que es capaz de viajar por el aire ( producir los estmulos necesarios en nuestros tmpanos, con lo que somos capaces de percibir el sonido original. 0uantas ms posiciones de in!ormacin se enven a los altavoces, mejor calidad tendr el sonido reproducido.

85
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 0on estas bases, se de!ine el n-mero de bits de un sonido digital como el n-mero de impulsos de in!ormacin .posiciones/ que se envan a los altavoces para su trans!ormacin en ondas analgicas. &as tarjetas de sonido actuales trabajan normalmente con J bits de in!ormacin, con los que se pueden obtener 9JQ9ML posiciones .ceros ( unos binarios/, aunque a( algunas de ma(or calidad que son capaces de trabajar con capturas de 8L bits, que originan 98L Q LMMKL posiciones de in!ormacin. 0omo dato de re!erencia, los 03s actuales estn basados en sonido grabado a 66 Y z ( con un tama2o de muestra de 8L bits. ,stas medidas se conocen con el nombre de sonido de calidad 03. Por -ltimo, una vez que el sonido digital llega a nuestros odos, impactan contra los tmpanos, verdaderas membranas especializadas que vuelven a trans!ormar las ondas analgicas en impulsos elctricos, que viajan asta nuestro cerebro, donde son interpretados ( producen las sensaciones auditivas que todos conocemos. <na e'cepcin al sonido anteriormente descrito, que podemos denominar Ede datos de sonidoE, es el sonido sintetizado, en el que no se realiza ninguna captura de ondas sonoras reales, sino que es sonido totalmente digital, generado directamente en el equipo in!ormtico por en reproductor digital conocido con el nombre de %)3) .%usic )nstrument 3igital )nter!ace/. 0uando se desea reproducir una nota musical concreta, se enva un comando %)3) al c ip sintetizador, que se encarga de traducir ese comando en una vibracin especial que produce la nota. %ediante este sistema es posible crear melodas bastante aceptables, aunque nunca tendrn la calidad ni riqueza de una onda sonora natural capturada.
Artculo por
Luciano Moreno
1;.'. Sonido en #$ML J&&&K

*ules son los fic&eros "ue podemos ejecutar desde el na egador $ cuales desde un programa espec(fico.
1;.'.1. 0ormatos de sonido

A la ora de incluir !ic eros de sonido en nuestras pginas web debemos distinguir entre los que pueden ser directamente ejecutados por el navegador ( aquellos que deben ser abiertos por un programa propio, que deber tener el usuario instalado en su equipo para poder reproducir el !ic ero. 3e !orma general, podemos incluir en la web los siguietes tipos de !ic eros de audio. WA@ .4ave !orm Audio 5ile !ormat/: !ormato tpico de la casa 4indows, de elevada calidad, usado en las grabaciones de 03s, que trabaja a 66 Y z ( a 8L bits. 0onsta bsicamente de tres bloques: el de identi!icacin, el que especi!ica los parmetros del !ormato ( el que contiene las muestras. *u principal inconveniente es el elevado peso de los !ic eros, por lo que su uso queda limitado en )nternet a la reproduccin de ruidos o !rases cortas. &a e'tensin de estos !ic eros es .wav. ,s soportado por )nternet ,'plorer ( "etscape 6'. A' .Audio 5ile !ormat/: !ormato creado por la casa Apple para plata!ormas %A0, cu(os !ic eros se guardan con la e'tensin .au MIDI !ormato de tabla de ondas, que no guardan el sonido a reproducir, sino un cdigo que nuestra tarjeta de sonido tendr que interpretar. Por ello, este tipo de !ic eros no puede almacenar sonidos reales, como voces o m-sica rela grabadaV slo puede contener sonidos almacenables en tablas de ondas. 0omo contarpartida, los !ic eros %)3), que se guardan con e'tensin .mid, son de peque2o tama2o, lo que los ace idneos para la web. ,s soportado por )nternet ,'plorer ( "etscape 6'. MP7 .%P,C 8 &a(er K/: desarrollado por el %P,C .%oving Picture ,'pert Croup/, obtiene una alta compresin del sonido ( una mu( buena calidad basndose en la eliminacin de los componentes del sonido que no estn entre 97 z ( 8L Y .los que puede oir el ser umano normal/. $iene en cuenta el sonido envolvente .surround/ ( la e'tensin multiling]e, ( guarda los !ic eros con la e'tensin .mpK, ( permite

86
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com con!igurar el nivel de compresin, consiguindose calidades similares a las del !ormato 4A+, pero con asta 87 veces menos tama2o de !ic ero. ,s soportado directamente slo por )nternet ,'plorer M.M ( superiores. MBD especie de mezcla entre el !ormato %)3) ( el !ormato 4A+, (a que por un lado almacena el sonido en !orma de instrucciones para la tarjeta de sonido, pero por otro puede almacenar tambin sonidos de dintrumentos musicales digitalizados, pudiendo ser interpretados por cualquier tarjeta de sonido de J bits. "o es un !ormato estndar de 4indows, por lo que su uso es ms indicado para sistemas %ac, Amiga o &inu'. &a e'tensin de los !ic eros es .mod MNLa# 4ormat de calidad similar al !ormato 4A+, es original de las mquinas "eBt, ( guarda sus !ic eros con la e'tensin .au 1eal Audio de calidad media, aunque permite !ic eros mu( comprimidos, que guarda con e'tensin .rmp o .ra. Para su reproduccin ace !alta tener instalado el plugin 1eal Audio.
A la ora de trabajar con estos !ormatos de sonido, deberemos tener en cuenta las limitaciones en su uso, (a que muc os de ellos no pueden ser reproducidos ms que en sistemas operativos concretos, ( a-n as, con plugins o programas espec!icos. ,n busca de la compatibilidad, si usamos 4indows como sistema operativo conviene usar para !ic eros musicales a reproducir directamente en el navegador los !ormatos 4A+ ( %)3), que son los ms compatibles. ,n cambio, si lo que deseamos es poder brindar a nuestros visitantes la opcin de navegar con m-sica ejecutable desde un programa e'terno, lo mejor es usar !ic eros en !ormato %PK, (a que en la actualidad la ma(ora de los navegantes tienen instalado en su equipo alg-n programa reproductor adecuado, pudiendo valer desde so!tware incluido en 4indows, como 4indows %edia Pla(er, asta aplicaciones esternas, como 4inamp. ,n este caso, bsata colocar un enlace normal en nuestras pginas, apuntando al !ic ero de sonido. 0omo ejemplo, si queremos enlazar en nuestra pgina un !ic ero %PK, bastara con escribir:
<a href="sonidos/mp$7mp$" target="Hblan6"> #incha a!"( para oir la m=sica7 </a>
Oue nos da: Pinc a aqu para oir la m-sica 0on esto, al pinc ar el usuario el enlace, se lanzar la aplicacin que tenga asociada con el tipo de !ic ero %PK, que depender de la con!iguracin interna de cada navegador ( usuario. <n caso especial es "etscape L'. 0asi no admite directamente ning-n tipo de !ormato de sonido incrustado en la pgina, al no venir con!iguradas por de!ecto las aplicaciones o plugins necesarios. I en el caso de !ic eros enlazados, "estscape L' suele lanzar su propio reproductor, que suele ser de la casa A;&, precisando para la ejecucin una serie de pasos para darse de alta en esa compa2ia como usuario del so!tware.
1;.'.%. Resumiendo
cada usuario tendr con!igurada su mquina de !orma particular, soliendo prevalecer el -ltimo so!tware de sonido instalado, (a que estos programas suelen adue2arse de ciertos tipos de !ic eros para su ejecucin automtica. ,ntre las apliaciones posibles de ejecucin de !ic eros de audio, bien de !orma directa o en !orma de plugina para los navegadores, destacan 4indos %edia Pla(er, 1eal Pla(er, 4inamp, Ouic> time, etc.
Artculo por
Luciano Moreno
1;.-. Sonido en #$ML J&<K

En este cap(tulo eremos la manera de incluir los arc&i os de m-sica en el HTML.

87
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,n este artculo vamos a seguir tratando temas relacionados con el sonido en pginas web, viendo la etiqueta =C*;<"3 .sonido de !ondo/ ( ,%=,3 .propietaria del antiguo navegador "etscape para embeber distintos contenidos multimedia/. +eremos algunos ejemplos de ambas !ormas de a2adir un sonido, (a sea m-sica o cualquier otro tipo de sample en una pgina web. Antes de empezar, permitirme recordar que estas cosas se tienen que utilizar con cuidado, porque no a todo el mundo le gusta que las pginas web emitan sonidos durante su visita ( tampoco todos los tipos de pginas son adecuadas para tener una banda sonora.
1;.-.1. &ncluir sonidos en la @eb

<na vez elegidos nuestros !ic eros de sonido, es ora de incluirlos en nuestra pgina web. &gicamente, para que un !ic ero de audio pueda ser reproducido por un navegador es necesario que su mquina tenga incluida una tarjeta de sonido ( un par de altavoces. ,'isten diversas !ormas de incluir un !ic ero de audio en una pgina, !ormas que dependen del tipo de !ic ero ( del navegador usado, ( podemos usar di!erentes etiquetas para cada una de ellas.
1;.-.%. CGS8?4D
&a etiqueta bgsound incorpora sonidos de !ondo en una pgina web, sonidos que se ejecutan automticamente al cargarse la pgina. ,s una etiqueta propietaria de %icroso!t, por lo que slo es interpretada por )nternet ,'plorer, admitiendo los !ormatos de audio %)3 ( 4A+, aunque generalmente tambin acepta A< ( %PK, en versiones actuales del nevagador o mediante plugins de uso general. *u sinta'is general, con sus atributos ms importantes, es del tipo:
<bgso"nd src="r"taHfichero" loop="l" balance="b" &ol"me="&"></bgso"nd>
3onde: srcEFrutaKfic)eroF !ija la ruta en la que se encuentra el !ic ero de audio a reproducir. &a ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una <1& completa que localice el !ic ero en )nternet. loopEFlF determina el n-mero de veces .l/ que se debe ejecutar el !ic ero de audio. *i le damos el valor in!inite, el !ic ero se reproducir inde!inidamente. balanceEFbF determina el balance del sonido entre los dos altavoces del equipo, es decir, la potencia o intensidad con que se oir en cada uno de ellos .derec o e izquierdo/. *us valores pueden estar entre F87,777 ( S87,777, correspondiendo el valor 7 a un balance equilibrado entre los dos altavoces. volumeEFvF !ija el volumen al que se oir el sonido, ( sus valores pueden variar entre F87,777 .mnimo/ ( 7 .m'imo/. "o es soportado por los equipos %A0.
( emplo&
<bgso"nd src="77/sonidos/8a&78a&" balance=4 &ol"me=4></bgso"nd>
&a etiqueta bgsound admite muc as ms propiedades .disabled, dela(, id, class, controls, etc./. Asmismo, esta etiqueta es accesible en )nternet ,'plorer mediante cdigo :ava*cript, pudiendo modi!icar en tiempo real sus propiedades balance, loop, src, ( volume, aunque sta -ltima slo es accesible en plata!ormas P0. Para una in!ormacin completa sobre todas las propiedades ( !uncionalidades de este etiqueta podis visitar la pgina correspondiente de %icroso!t: ttp:AAmsdn.microso!t.comAlibrar(Ade!ault.aspPurlQAwor>s opAaut orAd tmlAre!erenceAobjectsAbgsound.asp
1;.-.'. 1MC1D
"estcape "avigator implement la etiqueta embed para incorporar !ic eros de audio. ,s sta una etiqueta de caracter general, que se usa para la inclusin en las pginas web de todos aquellos arc ivos ajenos al navegador ( que necesitan por lo tanto la ejecucin de alg-n plugin para su interpretacin.

88
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Paradjicamente, )nternet ,'plorer asumi despus el uso de esta etiqueta para la inclusin de !ic eros de audio, para llegar a interpretarla mejor ( ampliarla con ms atributos ( propiedades, de tal !orma que la ejecucin de sonidos con embed es actualmente ms cmoda con este navegador, al incorporar la suite de %icroso!t sus propios plugins para la interpretacin de los di!erentes !ormatos de audio. ,n cambio, si usamos "etscape "avigator nos encontraremos en muc os casos con un !allo en la reproduccin o con un engorroso mensaje de necesidad de alg-n plugin especial .sobre todo en las versiones L'/, lo que nos obligar a visitar la pgina de "etscape para su descarga e instalacin, que muc as veces no ser e!ectiva. *ea como sea, a( que indicar que esta etiqueta nos va a incluir en la pgina web un objeto especial, una especie de consola de mando, denominada 0rescendo, que consta de tres botones, similares al de cualquier reproductor de audio: un botn Pla(, para comenzar la reproduccin .si no est establecida a automtica/, un botn Pause, para detenerla momentneamente ( un botn *top, para detenerla de!initivamente .puesta a cero/. ,sta consola es di!erente seg-n el navegador usadoV en el caso de )nternet ,'plorer se muestra la tpica consola de 4indows %edia, cu(o tama2o podemos con!igurar, mientras que en "etscape se muestra una consola propia, de tama2o !ijo de!inido. &a sinta'is general de la etiqueta embed es del tipo:
<embed atrib"to1="&alor1" atrib"to%="&alor%"777atrib"to,="&alor,"></embed>
I en el caso que nos ocupa, de la inclusin de !ic eros de audio, los atributos podemos dividirlos en dos tipos: ;5 Atributos referentes al sonido& srcEFrutaKfic)eroF, que !ija la ruta en la que se encuentra el !ic ero de audio a reproducir. &a ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una <1& completa que localice le !ic ero en )nternet. loopEFl,true,falseF, que determina el n-mero de veces que se debe ejecutar el !ic ero de audio. &os valores admitidos son l .n-mero entero de veces/, true .in!initas veces/ ( !alse .slo una vez/. *lo es reconocida por "etscape "avigator. playcountEFnF, que de!ine el n-mero de veces .n/ que se debe ejecutar en !ic ero de audio en el caso de )nternet ,'plorer. typeEFtipoKfic)eroF, atributo importante, que declara el tipo de !ic ero de audio que estamos usando, con lo que el navegador web puede ejecutar el programa o plugin adecuado para la reproduccin del !ic ero. Puede ser audioAmidi, audioAwav, etc. autostartEFtrue,falseF, que determina si el !ic ero de audio debe empezar a reproducirse por s slo al cargarse la pgina o si por el contrario ser preciso la actuacin del usuario .o de cdigo de script/ para que comience la audicin. pluginspageEF'1LF, que establece, en caso de ser necesario un plugin especial para reproducir el !ic ero, la pgina web donde se puede descragar el mismo. *lo se activa en el caso de que el navegador no sea capaz de reproducir el !ic ero por s mismo, ( es soportada tan slo por "etscape "avigator. nameEFnombreF, que asigna un nombre identi!icador .debe ser -nico en la pgina/ a una etiqueta embed determinada, con objeto de ser accedida luego por lenguajes de script. volumeEFvF, que determina el volumen de reproduccin del sonido, ( que puede variar entre 7 ( 877. ,s slo soportada por "etscape "avigator, que en la consola muestra el valor establecido en su indicador de volumen, siendo su valor por de!ecto M7. ,n en caso de )nternet ,'plorer, el valor del volumen por de!ecto es M7 en plata!ormas P0, ( RM en %A0, siendo necesario actuar sobre el control de volumen de la consola para modi!icarlo.
?5 Atributos referentes a la consola& )iddenEFtrue,falseF, que establece si la consola va a ser visible .!alse/ o no .true/. ,s ste un aspecto polmico, (a que si ocultamos la consola obligamos al usuario a oir nuestro !ic ero, sin posibilidad de detenerlo ni de modi!icar el volumen, ( si la mostramos estaremos incrustando en la pantalla un objeto que muc as veces nos romper el esquema de dise2o de nuestra pgina. Oueda determinar su uso en cada caso concreto. #idt)EF#F, que determina el anc o visible de la consola, en pi'els. eig tQE E, que determina el alto visible de la consola, en pi'els. ,stos atributos son tambin mu( importantes, caso de que a(amos establecido iddenQ E!alseE, (a que de su valor va a depender la correcta visulazacin de la consola. ,n el caso de )nternet
89

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,'plorer, que muestra un logo de 4indows %edia sobre los controles, el tama2o mnimo aceptable debe ser de 867'877 pi'els, (a que si no la consola saldr de!ormada en e'ceso o recortada. I en el caso de "etscape "avigator, deberemos asignar unos valores de 86M'L7 pi'els, que es lo que ocupa la consolaV si ponemos un tama2o menor, la consola ser recortada, perdiendo !uncionalidades, ( si asignamos un tama2o ma(or, aparecern espacios grises alrededor de la consola, a!eando el aspecto de la pgina. *i no especi!icamos estos atributos ( tampoco idden, nos aparecern en la pgina tan slo los mandos de la consola, sin logotipos a2adidos .)nternet ,'plorer/ o la consola recortada ."etscape "avigator/. alignEFtop,bottom,center,baseline,left,rig)t, texttop,middle,absmiddle,absbotomF, anlogo al de la etiqueta )%C, de!ine la alineacin orizontal o vertical de la consola respecto de los elementos de la pgina. )spaceEF)sF, que establece la separacin orizontal, vspaceQEvsE, que establece la separacin vertical, en pi'els, entre la consola ( los elementos de la pgina que la redean. Anloga a sus equivelentes de la etiqueta )%C.
,stos son los atributos principales, aunque podemos encontrar re!erencias de otros admitidos, aunque no suelen ser operativos en la realidad, (a que no suelen !uncionar de !orma correcta o son espec!icos de "estcape .como toda la serie de atributos que con!iguran los controles de la consola. ( emplo sin consola&
<embed src="77/sonidos/mid7mid" hidden="tr"e" t'pe="a"dio/midi" a"tostart="tr"e"></embed>
( emplo con consola&

<embed src="77/sonidos/mid7mid" hidden="false" t'pe="a"dio/midi" a"tostart="false" 8idth="1K4" height="144"></embed>
Artculo por
Luciano Moreno
1;.5. Sonido en #$ML J<K

En este cap(tulo eremos el potencil de la eti"ueta :;4E*T.
1;.5.1. La eti,ueta 8CA1C$

0on objeto de normalizar la inclusin de !ic eros no nativos en los navegadores web se decidi sustituir las di!erentes etiquetas que realizaban este papel .APP&,$, =C*;<"3, ,%=,3, etc./, ( que no pertenecan a los estndares web, por una etiqueta general, que !uera capaz de incrustar en el navegador todo tipo de !ic eros. &a etiqueta elegida en el estndar #$%& 6.7 !u ;=:,0$, a la que se dot de su!icientes atributos ( !le'ibilidad para poder realizar correctamente su trabajo. 3ebido a esto, la propuesta a sido usar la etiqueta object tambin para incluir !ic eros de audio de todo tipo en las pginas web. A ora bien, la aceptacin e implementacin que la misma a tenido vara seg-n el navegador en particular, as como en !uncin del objeto a incrustar. 3e este !orma, )nternet ,'plorer a realizado su propia implementacin de la etiqueta object, inclu(endo en ella re!erencias a !iltros ( componentes ActiveB espec!icos para los !ic eros de audio. Por su lado, los navegadores "etscape no soportan correctamente este etiqueta para !ic eros de este tipo. 1estringindonos a )nternet ,'plorer, la polmica sigue, (a que en di!erentes manuales nos encontraremos di!erentes !ormas de incrustar sonidos mediante object, unas que !uncionan bien, ( otras que no. NPorqu sucede estoP. Io creo que porque %icroso!t a ido usando la etiqueta object para implementar todo un grn conjunto de componentes propios, que adems an ido adaptndose a las di!erentes versiones de )nternet ,'plorer. 0omo regla general, vlida no slo para incrustar !ic eros de sonido, sino tambin para otros tipos, la etiqueta object va a de!inir un objeto o componente e'terno encargado de la reproduccin del !ic ero, que en el caso de )nternet ,'plorer suele ser alg-n tipo de control ActiveB. %ediante object se instancia el objeto, se declara su <1& ( sus principales propiedades generales, ( mediante un conjunto de etiquetas especiales, PA1A%, se le van pasando los valores que

90
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com necesita para su correcto !uncionamiento o para su con!iguracin deseada. &a sinta'is general de la etiqueta object, para el caso de !ic eros de sonido, es del tipo:
<ob1ect atrib"to1="&alor1" atrib"to%="&alor%" 777 atrib"to,="&alor,"> <param name="nombre" &al"e="&alor"> <param name="nombre" &al"e="&alor"> 777 </ob1ect>
&os principales atributos de object, en re!erencia a !ic eros de audio, son: classidEFidentificadorKob etoF, que !ija la <1& del objeto o componentee'terno necesario para reproducir el !ic ero de audio, ( la implementacin 0&*)3 de los controles ActiveB necesarios. typeEFtipoKfic)eroF, atributo importante, que declara el tipo de !ic ero de audio que estamos usando. #idt)EF#F, que determina el anc o visible de la consola, en pi'els. )eig)tEF)F, que determina el alto visible de la consola, en pi'els. alignEFtop,bottom,center,baseline,left,rig)t ,texttop,middle,absmiddle,absbotomF, anlogo al de la etiqueta )%C, de!ine la alineacin orizontal o vertical de la consola respecto de los elementos de la pgina. )spaceEF)sF, que establece la separacin orizontal, vspaceQEvsE, que establece la separacin vertical, en pi'els, entre la consola ( los elementos de la pgina que la redean. Anloga a sus equivelentes de la etiqueta )%C. autostartEFtrue,falseF, que determina si el !ic ero de audio debe empezar a reproducirse por s slo al cargarse la pgina o si por el contrario ser preciso la actuacin del usuario .o de cdigo de script/ para que comience la audicin. standbyEFmensa eF, que presenta en pantalla un mensaje al usuario mientras el !ic ero se carga. ,n cuanto a los elementos param, los ms importantes son: param nameEF4ile/ameF valueEFrutaKfic)eroF, determina la ruta o <1& del !ic ero de audio a reproducir. "o es necesario utilizar slo !ic eros 4A+ o %)3, pudiendo reproducirse tambin !ic eros %PK o 1eal Audio. ,l reproductor del primero lo inclu(e ,'plorer en Active%ovie .componente de 4indows %edia/. param nameEFautostartF valueEFtrue,falseF, indica al navegador si se debe empezar a reproducir el sonido automticamente al cargar la pgina o si por el contrario ser preciso que el usuario pulse el botn Pla( para ello.
"o son estos todos los atributos ( parmetros posibles. ,s ms, en cuanto nos metemos en componentes %icroso!t, podemos encontrarnos multitud de con!iguraciones posibles, que nos van a permitir !ijar muc os aspectos de los mismos. 3ejo a cada uno la posibilidad de pro!undizar en el estudio de aquellos componentes ( propiedades que necesite, pero sabiendo que con los elementos vistos arriba tenemos ms que su!iciente para presentar un !ic ero de audio en nuestra pgina web. x( emplo&
<ob1ect classid="*).B?C4KKJL3A1O*$K:O11*EO@341O44AA44KKKLKA" 8idth="1K4" height="1MK" t'pe="a"dio/midi"> <param name="3ile,ame" &al"e="77/sonidos/xfiles7mid"> <param name="a"tostart" &al"e="tr"e"> </ob1ect>>
Oue podis ver !uncionando en esta ventana .slo )nternet ,'plorer/.
1;.5.%. La eti,ueta A
*i asta a ora emos visto cmo podemos incluir en nuestras pginas sonidos de !ondo o inicializados por el usuario mediante interaccin con la consola 0rescendo, vamos a ver a ora cmo podemos implementar audio mediante el uso de una de las etiquetas ms polivalentes en #$%&: la etiqueta A.

91
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,!ectivamente, los enlaces son la base del iperte'to, base a su vez de la web, ( dentro de sus m-ltiples usos podemos considerar el enlace a !ic eros de audio. ,l !ic ero enlazado puede ser interpretado directamente por el navegador .porque sea de reproduccin directa o se tenga instalado el plugin adecuado/ o puede ser ejecutado por un programa independiente que se abra automticamente .4inamp, 1eal Audio, etc./, siendo este el caso ms com-n. *i el usuario no dispone del programa o plugin adecuado, se le abrir una ventana de descarga del !ic ero, con lo que podr guardarlo asta disponer de la aplicacin necesaria para su reproduccin. &a sinta'is general en este caso ser del tipo:
<a href="r"taHfichero">0ensa1e</a>
( emplo de fic)ero MID&

<a href="77/sonidos/8atermar67mid">0=sica para t(</a>
Oue podemos ver en !uncionamiento en esta ventana. ( emplo de fic)ero MP7&

<a href="77/sonidos/mp$7mp$">0adonna</a>
Oue tenemos en esta otra ventana.

Artculo por
Luciano Moreno
Parte 11:
-tros asuntos im%ortantes . el $uturo del HTML

:cabamos el manual con esta \ltima parte en la 6ue trataremos algunos asuntos de >ital importancia a la hora de hacer p4ginas web pro8esionales. :dem4s >eremos el 8uturo del 012,# 6ue >endr4 con la especi8icaci.n de 012, E.
11.1. Doct).e #$ML

<u# es el 'oct$pe en los documentos HTML $ =HTML. )emos distintos tipos de 'oct$pe disponibles.

92
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3entro del marco de nuestro manual de #$%& ( en lneas generales, podemos decir que el 3;0$IP, es una declaracin del estndar usado al construir un documento #$%& o B#$%&. *in embargo, para ser un poco ms estrictos, debemos aclarar que el 3oct(pe es propio de documentos B%& ( *C%&, ( por tanto los lenguajes #$%& o B#$%& son unos simples erederos de algo que (a se vena utilizando. ,l estndar que se utiliza en un documento se de!ine utilizando un 3$3, que son las siglas de 3e!inition $(pe 3ocument, ( es una declaracin en un metalenguaje para de!inir otro lenguaje. 3ic o de otra manera, el 3$3 marca las reglas para la de!inicin de lenguajes como el #$%& ( en el 3oct(pe estamos indicando simplemente qu 3$3 se tiene que utilizar para interpretar el documento #$%& que estamos codi!icando.
/ota& Podemos conocer ms lo que es un 3$3 en el artculo 3$3 ( B%& *c ema, de la introduccin a B%& publicada en 3esarrollo4eb.com.
As, en resumen, podramos decir que los documentos #$%& o B#$%& estn escritos en un lenguaje ( con el 3oct(pe especi!icamos este lenguaje ( la versin del mismo. &os navegadores leern esta declaracin de doct(pe e interpretarn la pgina atendiendo a las reglas de!inidas en ese lenguaje.
/ota& Para los navegadores es importante conocer el doct(pe de la pgina web, porque de ese modo pueden mostrar la pgina web con la versin e'acta del lenguaje #$%& o B#$%& con la que !ue construida. *i no tienen una declaracin de doct(pe, interpretarn la pgina en lo que se llama Equir>s modeE, un modo que procura ma'imizar la compatibilidad de la pgina con versiones anteriores del lenguaje #$%&. Para ms in!ormacin sobre este en!oque de la e'plicacin del doct(pe os recomendamos leer el artculo sobre la declaracin doct(pe en documentos #$%&.
3e modo que la utilizacin de la etiqueta es necesaria si deseamos cumplir un estndar de #$%& o B#$%&, para especi!icar qu versin o lenguaje utilizamos ( que el browser renderice la pgina con!orme a dic o estndar. ,l 3;0$IP, tiene una !orma como sigue:
<<?-*TN#E html #A@)B* "O//V$*//?T? IHT0) 174 Transitional//E," "httpC//88878$7org/T5/xhtml1/?T?/xhtml1Otransitional7dtd">
,l doct(pe debe incluirse en la primera lnea del cdigo #$%& de la pgina. Por e'plicar de alguna manera esta etiqueta, que suena un poco a c ino, dice que es un 3;0$IP, de un documento #$%& ( nos da dos datos adicionales. 0on el te'to EFAA4K0AA3$3 B#$%& 8.7 $ransitionalAA,"E indicamos que este documento se tiene que validar con la especi!icacin de B#$%& 8.7 ( que el tipo de documento es $ransitional. Por otra parte, ttp:AAwww.wK.orgA$1A' tml8A3$3A' tml8Ftransitional.dtd es la <1& del 3$3 que sirve para validar el cigo #$%& de la pgina. ,l tipo de documento, que abamos se2alado como $ransitional en el doct(pe e'presado antes, quiere decir el documento utiliza un abanico ms amplio de etiquetas #$%& ( atributos, incluso algunos que puedan aberse quedado obsoletos. #a( otros dos tipos de documentos. Por un lado tenemos strict, que indica que el cdigo es #$%& o B#$%& estricto, sin incluir atributos ( etiquetas en des uso. ,l otro tipo de documento que !alta es el !rameset, que se utiliza cuando estamos realizando una declaracin de !rames o !rameset. As que, dependiendo de nuestra pgina ( el cdigo que utilicemos, tendremos que declarar uno u otro doct(pe. ,'isten diversos 3oct(pe que abarcan una gran gama de posibilidades, con!igurando distintas versiones de #$%& o B#$%& ( distintos tipos de documento, strict, transitional o !rameset. ,ste artculo de desarrollo web .com se completa a ora con una lista de algunos de estos doct(pe ms utilizados en la actualidad: Doctype OHTML ;53 strict
<<?-*TN#E html #A@)B* "O//V$*//?T? IHT0) 174 .trict//E," "httpC//88878$7org/T5/xhtml1/?T?/xhtml1Ostrict7dtd">
Doctype OHTML ;53 transitional

<<?-*TN#E html #A@)B* "O//V$*//?T? IHT0) 174 Transitional//E,"

93

"httpC//88878$7org/T5/xhtml1/?T?/xhtml1Otransitional7dtd">
Doctype OHTML ;53 frameset

<<?-*TN#E html #A@)B* "O//V$*//?T? IHT0) 174 3rameset//E," "httpC//88878$7org/T5/xhtml1/?T?/xhtml1Oframeset7dtd">
Doctype HTML P53; strict

<<?-*TN#E HT0) #A@)B* "O//V$*//?T? HT0) +741//E," "httpC//88878$7org/T5/html+/strict7dtd">
Doctype HTML P53; transitional

<<?-*TN#E HT0) #A@)B* "O//V$*//?T? HT0) +741 Transitional//E," "httpC//88878$7org/T5/html+/loose7dtd">
Doctype HTML P53; frameset

<<?-*TN#E HT0) #A@)B* "O//V$*//?T? HT0) +741 3rameset//E," "httpC//88878$7org/T5/html+/frameset7dtd">
Artculo por
11.%. Auego de caracteres6 charset6 del documento #$ML

*mo $ por "u# debemos especificar el juego de caracteres, tambi#n conocido como c&arset, en los documentos HTML. #$%& es un lenguaje para modelar pginas web que se utiliza en la 1ed Clobal ( por tanto, debe permitir crear documentos escritos en varios idiomas. =ien sabemos que cada idioma tiene determinados caracteres, que !orman las palabras, ( algunos de ellos pueden ser asta espec!icos de una lengua en concreto, como por ejemplo la letra ,2e E2E del espa2ol o la ce cedilla E^E del cataln, portugus etc. Pero no solo estn las letras de cada al!abeto, sino tambin algunos signos como el dlar o euro, que tambin deben poderse representar en una pgina web. ,n el mundo in!ormtico en general los arc ivos de te'to pueden escribirse con varios juegos de caracteres distintos. ,sto es algo que la ma(ora de las personas no tiene ninguna necesidad de saber, por lo que, cuando guardamos un arc ivo de te'to en un programa como el =loc de "otas, nadie nos pregunta qu juego de caracteres estamos utilizando o queremos usar. ,'isten diversos juegos de caracteres, que tienen un conjunto ma(or o menor de letras ( smbolos, dependiendo para lo que !ueron dise2ados. Ouizs alguien a(a odo ablar, o visto nombrar por alguna parte, el juego de caracteres <$5FJ, que es uno de los ms comunes, o el )*;FJJMGF8, que es el predeterminado en la ma(ora de los editores de te'to plano, en 4indows. ,s decir, aunque no lo sepamos, cuando se guarda un arc ivo de te'to en el ordenador, se codi!ica utilizando un juego de caracteres determinado. 0omo (a podemos acernos una idea, el juego de caracteres no es ms que un conjunto de letras ( smbolos utilizados en la escritura ( a ora (a sabes que cualquier !ic ero in!ormtico que contiene te'to plano .arc ivos .t't o . tml por ejemplo/ est codi!icado con un juego de caracteres. A la ora de crear pginas web en #$%& debemos tener en cuenta esto porque, dependiendo del juego de caracteres utilizado, tendremos disponibles unos u otros smbolos a la ora de redactar los te'tos de una pgina web. ,n este artculo, que escribimos para completar el %anual de #$%& de 3esarrollo4eb.com, pretendemos o!recerte todas las claves sobre la eleccin ( de!inicin de los juegos de caracteres en tu pgina web, de manera que no tengas nunca el tpico problema de no verse correctamente los acentos, letras como la 2 u otros smbolos como los ma(ores ( menores que.
11.%.1. &n+ormar sobre el 2uego de caracteres con la eti,ueta M1$A C#ARS1$

,n un documento #$%& tenemos la posibilidad de in!ormar sobre qu juego de caracteres estamos utilizando. Aunque,

94
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com en caso que no lo agamos, los navegadores intentarn detectarlo automticamente. 0laro est que, si nosotros mismos indicamos qu juego de caracteres usamos, ser muc o mejor porque el navegador no tendr que deducirlo por su cuenta ( nos a orraremos posibles errores de interpretacin. Para in!ormar en el cdigo !uente #$%& del conjunto de caracteres que utilizamos se dispone de una etiqueta %,$A, que se coloca en la cabecera del documento .en el #,A3/. ,sa etiqueta tiene esta sinta'is.
<meta httpOe!"i&="*ontentOT'pe" content="text/htmlP charset=B.-OJJKLO1">
0omo vemos, dentro de esta etiqueta se est in!ormando el Ec arsetE .set o conjunto de caracteres/ utilizado, que en este caso sera E)*;FJJMGF8E. *i estamos trabajando con <$5FJ podramos utilizar esta %,$A para in!ormar sobre ello:
<meta httpOe!"i&="*ontentOT'pe" content="text/htmlP charset="tfOJ"> /ota& ,n #$%& indicar el juego de caracteres es meramente opcional, pero en B#$%& siempre se debe se2alar en el documento bsico. B#$%& utiliza por de!ecto el juego de caracteres <$5FJ ( si lo indicamos en la etiqueta %,$A, debemos tener en cuenta el cierre de esa etiqueta, utilizando un cdigo como este: <meta httpOe!"i&="*ontentOT'pe" content="text/htmlP charset="tfOJ" /> o bien: <meta httpOe!"i&="*ontentOT'pe" content="text/htmlP charset="tfOJ"></meta>
11.%.%. Hu charset escoger ) c"mo guardar el documento .ara ello

&os lectores de este artculo, que entiendo escriben sus pginas web con contenidos en ,spa2ol, generalmente se decantarn entre dos posibles c arset. <no es el <$5FJ ( otro es el )*;FJJMGF8, que son adecuados justamente por contener los caracteres tpicos de espa2ol ( de otra serie de idiomas occidentales. 0ualquiera de estas dos opciones es bastante com-n ( nos o!recer todo lo que podamos necesitar. &a eleccin por tanto es un poco indi!erente cuando estamos trabajando en #$%& ( quizs dependa un poco ms del programa que usemos para editar el cdigo !uente de nuestras pginas o de nuestro sistema operativo. ,n 4indows, la ma(ora de los programas guardan los arc ivos de te'to bajo el juego de caracteres )*;FJJMGF8, por ello, lo ms seguro es que estemos utilizando ese c arset aunque ni siquiera lo sepamos. %uc os programas, como el =loc de "otas, no nos preguntan siquiera el juego de caracteres que queremos utilizar para guardar el arc ivo, pero a( otros editores ms avanzados que s permiten escoger el c arset deseado. 3ependiendo del programa se puede decidir ese juego de caracteres de diversas maneras. %uc os de ellos tienen cuadros de dilogo en la opcin ECuardar comoE que inclu(en un men- para marcar el c arset que queremos utilizar ( otros se pueden con!igurar en las opciones de programa, para con!igurar el juego de caracteres predeterminado a utilizar cuando guardamos los arc ivos. #a( incluso programas que son su!icientemente inteligentes para que, a vista del cdigo #$%& ( el c arset que emos de!inido en el mismo en la etiqueta %,$A, guarden por ellos mismos el arc ivo con la codi!icacin correcta. Por ejemplo, si vemos el cdigo !uente de 3esarrollo4eb.com veremos que nosotros emos escogido el )*;FJJMGF8, pues la ma(ora de los que editamos cdigo !uente del sitio trabajamos en 4indows tradicionalmente ( los arc ivos estn con el juego de caracteres predeterminado de la ma(ora de los programas 4indows. ;tra manera de ver el juego de caracteres de una pgina es utilizando el navegador 5ire!o' en la opcin del men- E+er A 0odi!icacin de caracteresE.
11.%.'. ?tilizar caracteres ,ue no est/n en nuestro 2uego de caracteres

*i lo deseamos, en #$%& tambin podemos colocar en el te'to de nuestra pgina web un carcter que no se encuentre disponible en el juego de caracteres que estamos utilizando. Para ello se utilizan los caracteres especiales o entidades especiales del #$%& , que no son ms que unos cdigos especiales para escribir caracteres que no estn dentro del al!abeto ingls, como los acentos, 2, ^, etc. e incluso smbolos como U, o @. Podemos encontrar en 3esarrollo4eb.com una e'plicacin ms detallada de los caracteres especiales, as como una lista de los disponibles en #$%&
/ota& ,stara bien comentar que estamos obligados a utilizar siempre los caracteres especiales cuando queramos colocar en el te'to los

95
ma(ores ( menores que .E@E o E?E/, para no con!undirlos con las aperturas ( cierres de etiquetas.
11.%.-. Conclusi"n sobre los 2uegos de caracteres JcharsetK en #$ML

0on estas notas espero que tendrs su!iciente in!ormacin como para no dejar la eleccin del juego de caracteres a la mera suerte o con!iguracin de tus programas (, lo que es ms importante, que los tengas en cuenta cuando generes cdigo #$%& para in!ormar siempre tu c arset ( que no a(a problemas de interpretacin de tu pgina web. 0on esto espero que se solucionen tambin todas las dudas de las personas que e'perimentan problemas puntuales en sus pginas web, cuando algunos caracteres no se muestran correctamente. &a ma(ora de las veces, como emos dic o, esos se soluciona simplemente especi!icando el juego de caracteres en el cdigo !uente del #$%&, en la etiqueta %,$A para especi!icar el c arset.
Artculo por
11.'. 1ti,ueta M1$A robots

Explicacin de la eti"ueta MET! robots $ diferentes posibilidades de configuracin. %ediante las di!erentes etiquetas %,$A que podemos colocar en un sitio web disponemos de una variedad amplia de metain!ormaciones para comunicar a cualquier sistema que lea nuestra pgina web. ,n este artculo vamos a presentar una etiqueta interesante para de!inir cmo se tienen que comportar los motores de b-squeda a la ora de visitar nuestra pgina ( mostrarla entre los resultados de b-squedas realizados en el buscador. *e trata la etiqueta meta de robots. &a etiqueta %,$A de 1obots sirve para personalizar el comportamiento de robots de inde'acin, tipo Coogle, a la ora de procesar nuestra pgina web. 0ada una de las pginas de nuestro sitio puede tener una declaracin de la etiqueta meta de robots distinta, con lo que podemos incluso de!inir de manera independiente cmo deseamos que se trate cada una de las pginas que componen el web. ,n 3esarrollo4eb.com emos publicado anteriormente in!ormaciones acerca de distintas etiquetas %,$A en artculos dispersos. Adems, tenemos un Cenerador de ,tiquetas %eta que tambin puede resultar de inters para los lectores.
11.'.1. 1ti,ueta R8C8$S de M1$A $ags

0omo emos dic o, la etiqueta robots, dentro de las posibles etiquetas con %etain!ormaciones acerca de un documento web, sirve para llevar un control e' austivo de lo que puede o no puede acer un robot de inde'acin cuando visita nuestro sitio web. &os comportamientos ms tpicos que podemos de!inir son permitir o no inde'ar una pgina ( seguir o no sus enlaces.
/ota& 0onviene recordar que tambin se puede de!inir el comportamiento de los robots de b-squeda con nuestro sitio, a la ora por ejemplo de permitir o no inde'ar las distintas pginas, mediante el arc ivo robots.t't.
A ora veamos cmo se de!ine esta etiqueta %,$A de robots.

<0ETA name="robots" content=",-B,?EI">
0omo se puede ver, se de!ine el etiqueta %,$A ( se acompa2a de dos atributos esenciales: /ame: que para la etiqueta %,$A que controla los comportamientos en motores de inde'acin el valor es ErobotsE. %ontent: se indica las directivas que queremos que apliquen los motores de inde'acin cuando visitan la pgina.

96
11.'.%. <alores .osibles de la eti,ueta M1$A R8C8$S

,n el atributo 0ontent de la etiqueta meta debemos colocar las directrices que deseemos para buscadores, tantas como deseemos, separadas por comas. &as distintas directrices a aplicar son las siguientes: I/D(O , /BI/D(O *irve para indicar si se desea o no permitir la inde'acin de la pgina por los motores de b-squeda. 4BLLBW , /B4BLLBW 0on esta directriz se indica si se debe o no permitir a los motores de b-squeda recorrer o seguir recorriendo la web a travs de los enlaces que encuentre en el cuerpo del documento. A1%HI@( , /BA1%HI@( ,sto permite decir si deseamos o no que el motor de b-squeda arc ive el contenido del sitio web en su cac interna. 0omo abremos podido ver, buscadores como Coogle tienen una cac ( podemos ver las pginas web tal como las tiene cac eadas el buscador. Para ello, en los resultados de las b-squedas aparece un enlace que pone cac . *i decimos que no arc ive la pgina, no debera mostrar ese enlace de cac . ,sto en realidad, seg-n Coogle, no evita que se guarde en cac la pgina, sino que no permite verla a los usuarios del buscador ( por lo tanto no muestra el enlace. :/IPP(T , /B:/IPP(T ,sta directriz en principio no resulta mu( -til, al menos a primera vista. *irve para que el motor de b-squeda no muestre ninguna descripcin de un sitio, slo su ttulo. *i utilizas ";*")PP,$ automticamente de!ines un ";A10#)+,, por lo que la pgina tampoco se mostrar en cac . BDP , /BBDP *irve para decirle al buscador que debe, o no, mostrar el ttulo ( descripcin de la pgina iguales a los que se encuentra en el ;pen 3irector( Project. ,n algunos casos, algunos buscadores muestran como ttulo ( descripcin de una web los que se an publicado en el ;3P .,"&A0, A ttp:AAwww.dmoz.orgA/. DDI1 , /BDDI1 ,s bsicamente lo mismo que ;3P A ";;3P, con la di!erencia que es para que no se pueda, o si, mostrar la descripcin ( ttulo que aparece en el directorio de Ia oo. 0uando no e'iste esta etiqueta los buscadores interpretan las condiciones ms !avorables para ellos, es decir, que pueden acer todo lo que suelen acer con otras pginas a la nuestra, como inde'arla, seguir sus enlaces, arc ivarla, etc.
11.'.'. 12em.los de eti,uetas M1$A R8C8$S

A la ora de utilizar la %,$A 1;=;$* bsicamente lo que podemos acer es restringir las posibilidades de los motores de b-squeda, puesto que las posibilidades por de!ecto son las menos restrictivas. ,sto quiere decir que una etiqueta como la siguiente es irrelevante, porque el buscador siempre va a inde'ar la pgina ( seguir sus enlaces de manera predeterminada:
<0ETA name="robots" content="B,?EI,3-))-V">
Podemos de!inir entonces casos ms restrictivos como estos:

<0ETA name="robots" content="B,?EI,,-3-))-V">
Para indicar que se desea que se inde'e la pgina, pero no se sigan los enlaces. 3ada que la opcin )"3,B es la que se sobreentiende por de!ecto, esta etiqueta tendra el mismo valor que la siguiente:
<0ETA name="robots" content=",-3-))-V">
Para indicar que no queremos que se sigan los enlaces de la pgina.

<0ETA name="robots" content=",-B,?EI,,-3-))-V">
Para indicar que no queremos que se inde'e la pgina ni se sigan los enlaces que pueda contener.
<0ETA name="robots" content=",-A5*HBSE">
&o -nico que indicamos es que no se muestre el enlace para ver la pgina en la cac del buscador.
<0ETA name="robots" content=",-B,?EI,,-3-))-V,,-A5*HBSE,,--?#,,-.,B##ET">
0on esta restrictiva etiqueta !orzamos para que no se inde'e la pgina, no se sigan los enlaces, no se muestre el lin> de

97
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com cac , no se muestre el ttulo ( descipcin del ;pen 3irector( Project ( slo se muestre el ttulo de la pgina en los resultados de las b-squedas.
Artculo por
11.-. 1l +uturo del desarrollo @eb3 #$ML 5

HTML > es una tecnolog(a creada para modernizar la web $ el desarrollo de aplicaciones web, online $ offline, "ue aun tiene bastante camino por recorrer para ser una realidad. ,n el momento de escribir este artculo, la especi!icacin de #$%& M est todava en !ase de borrador, no obstante, en algunos navegadores, recientemente se estn poniendo en marc a, de !orma e'perimental, algunas de las caractersticas que traer consigo este nuevo estndar. Paralelamente, van surgiendo nuevas in!ormaciones ( re!erencias que e'plican qu es #$%& M, lo que ace que nos sintamos cada vez ms impacientes por conocer bien las nuevas particularidades del lenguaje ( sobre todo, por comenzarlas a aplicar en nuestros desarrollos. ,ste artculo de 3esarrollo4eb.com pretender o!recer algunas pistas para conocer el camino que actualmente est recorriendo el lenguaje de marcacin para convertirse en una realidad, a la vez que e'plicar un poco cules son las novedades ms importantes que estn por venir.
11.-.1. !or ,u se crea #$ML 5

&os que nos dedicamos a acer pginas web sabemos que un sitio web es como un puzzle de tecnologas que operan entre si. Para acer una pgina, en principio, se necesita simplemente #$%&, pero esta a!irmacin o( tiene poco que ver con la realidad ( las necesidades de los desarrolladores para crear una rica e'periencia de usuario. ,s que o( pocos sitios web se basan -nicamente en #$%&. Ouien ms quien menos utiliza 0** para de!inir el aspecto de la pgina, alg-n tipo de script del lado del cliente, en :avascript, vdeos en diversos !ormatos o 5las para realizar alguna animacin o interaccin con el usuario. Para poder bene!iciarse e integrar todas estas tecnologas, e'isten multitud de etiquetas que se an ido creando al paso, seg-n se iban necesitando, ( las cuales no an pasado por el !iltro de los normalizadores de tecnologas como el 4K0. Por tanto, ms de 87 a2os despus que se publicase la -ltima especi!icacin del #$%&, resulta primordial para el !uturo de la web la creacin de un nuevo estndar que recoja ( solucione de alguna manera, las necesidades de los desarrolladores que se an ido creando a lo largo de todo este tiempo.
11.-.%. 1s+uerzos en diversas vertientes .ara la creaci"n de #$ML 5

*in duda (a ace tiempo que se necesitaba esta nueva especi!icacin, que o( todava est en !ase de borrador ( podramos preguntarnos Npor qu a pasado tanto tiempo sin publicarse esta nueva versin del lenguajeP &a respuesta es que #$%& M se a convertido en un pro(ecto mu( ambicioso, donde a( muc as personas, empresas e instituciones que tienen muc o que opinar. ,s de vital importancia, por tanto, coordinar a todos los implicados para crear un -nico !rente com-n, que asegure esta vez un 'ito de la tecnologa como un estndar. ,n principio, los encargados de regular los estndares de )nternet son los integrantes del 4K0, que an estado trabajando durante bastante tiempo en otros lenguajes como B%&. "o se puede decir que a(an dejado de lado #$%&, pero de alguna manera estaban creando otros estndares ms rgidos que sustitu(esen al lenguaje. Ante esta !alta de inters en #$%& ( las necesidades reales de los desarrolladores de webs por parte del 4K0, se cre en 9776 una comunidad de personas interesadas en mejorar ( modernizar el lenguaje de marcacin. ,ste nuevo grupo, llamado WHATW2 .4eb #(perte't Application $ec nolog( 4or>ing Croup/, se cre a raz de una con!erencia del 4K0 con personas integrantes de los equipos de desarrollo de Apple, la 5undacin %ozilla ( ;pera, a la que se an ido agregando personal de %icroso!t ( otras empresas implicadas en el mundo web. ,l 4#A$4C, que !unciona de manera independiente del 4K0, tiene como objetivo principal trabajar en la nueva

98
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com especi!icacin del #$%& M ( a ellos debemos muc as de los avances que estn por llegar con relacin al lenguaje. ,s una organizacin abierta, donde cualquiera puede participar libre gratuitamente. 3e ec o, seg-n comentan en su web, estn realmente interesados en las opiniones e intereses de las personas que trabajan con el desarrollo web, para crear unas especi!icaciones que respondan a las necesidades reales de los pro!esionales de )nternet.
11.-.'. 1nlaces relacionados

Para la documentacin de los lectores, publicamos los enlaces a los borradores de especi!icaciones del #$%& M ( las organizaciones que trabajan en ellos: 4K0 #$%& 4or>ing Croup: ttp:AAwww.wK.orgA tmlA 4#A$4C ttp:AAwww.w atwg.org _ltima versin publicada del borrador de #$%& M ttp:AAwww.wK.orgA$1A tmlMA =orrador del #$%& M por la 4#A$4C ttp:AAwww.w atwg.orgAspecsAwebFappsAcurrentFwor>AmultipageA
11.-.-. Conclusi"n
#emos podido comprobar que e'isten numerosos es!uerzos para la creacin de las nuevas especi!icaciones del #$%& M, llevados a cabo por distintas organizaciones, independientes, pero que trabajan en un !rente com-n. ,n el siguiente artculo veremos qu es #$%& M, cundo estar listo ( cules son las principales novedades que traer.
Artculo por
11.5. Hu es #$ML 5
)eremos "u# es HTML >, su pre isin de tiempo para con ertirse en una especificacin recomendada $ las no edades ms significati as "ue proporcionar. ,n el artculo anterior publicado en 3esarrollo4eb.com, E,l !uturo del desarrollo web: #$%& ME e'plicamos las razones por las que es verdaderamente importante esta nueva versin del lenguaje de marcacin #$%& ( vimos quines son los que estn llevando a cabo su especi!icacin. A ora convendra e'plicar qu es e'actamente #$%& M, (a que no es simplemente una nueva versin del lenguaje de marcacin #$%&, sino una agrupacin de diversas especi!icaciones concernientes a el desarrollo web. ,s decir, #$%& M no se limita slo a crear nuevas etiquetas, atributos ( eliminar aquellas marcas que estn en desuso o se utilizan inadecuadamente, sino que va muc o ms all. As pues, #$%& M es una nueva versin de diversas especi!icaciones, entre las que se encuentran: #$%& 6 B#$%& 8 0** "ivel 9 3;% "ivel 9 .3;% Q 3ocument ;bjetc %odel/
A la par, #$%& M pretende proporcionar una plata!orma con la que desarrollar aplicaciones web ms parecidas a las aplicaciones de escritorio, donde su ejecucin dentro de un navegador no implique !alta de recursos o !acilidades para resolver las necesidades reales de los desarrolladores. Para ello se estn creando unas AP)s que permitan trabajar con cualquiera de los elementos de la pgina ( realizar acciones que asta o( era necesario realizar por medio de

99
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com tecnologas accesorias. ,stas AP), que tendrn que ser implementadas por los distintos navegadores del mercado, se estn documentando con minuciosidad, para que todos los =rowsers, creados por cualquier compa2a las soporten tal cual se an dise2ado. ,sto se ace con la intencin que no ocurra lo que viene sucediendo en el pasado, que cada navegador ace la guerra por su parte ( los que acaban pagndolo son los desarrolladores ( a la postre los usuarios, que tienen muc as posibilidades de acceder a webs que no son compatibles con su navegador pre!erido.
11.5.1. Cu/ndo estar/ listo #$ML 5

*eg-n in!orman en la pgina de la organizacin 4#A$4C, #$%& M se prev est listo como especi!icacin de implementacin recomendada en el 9789. NOuiere esto decir que vamos a tener que esperar asta 9789 para aprovec ar las ventajas de #$%& MP realmente no es justamente as, puesto que algunos navegadores (a implementan muc as de las caractersticas del moderno lenguaje. 1esulta que #$%& M est !ormado por muc os mdulos distintos, cu(o grado de especi!icacin est en niveles dispares. Por tanto, muc as de las caractersticas de #$%& M estn (a listas para ser implementadas, en un punto de desarrollo que se encuentra cercano al que !inalmente ser presentado. ;tras muc as caractersticas estn todava simplemente en el tintero, a modo de ideas o borradores iniciales. 3e ec o, las versiones ms nuevas de casi todos los navegadores, incluido el polmico )nternet ,'plorer J, implementan algunas de las caractersticas de #$%& M. 0laro que, para que una web se vea bien en todos los sistemas, a( que utilizar slo aquellas partes que !uncionan en todos los navegadores, por lo que a da de o(, pocas son las utilidades realmente disponibles del lenguaje, si queremos acer un sitio web compatible. "o obstante, en el peor de los casos, podemos empezar a usar a nivel e'perimental estas caractersticas, aunque slo sea para !rotarnos las manos en espera de incorporarlas realmente en nuestras prcticas de desarrollo abituales.
11.5.%. Cu/les son las novedades de #$ML 5

#$%& M inclu(e novedades signi!icativas en diversos mbitos. 0omo decamos, no slo se trata de incorporar nuevas etiquetas o eliminar otras, sino que supone mejoras en reas que asta a ora quedaban !uera del lenguaje ( para las que se necesitaba utilizar otras tecnologas. (structura del cuerpo: &a ma(ora de las webs tienen un !ormato com-n, !ormado por elementos como cabecera, pie, navegadores, etc. #$%& M permite agrupar todas estas partes de una web en nuevas etiquetas que representarn cada uno de las partes tpicas de una pgina. (ti!uetas para contenido especQfico: #asta a ora se utilizaba una -nica etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones 5las o vdeo. A ora se utilizarn etiquetas espec!icas para cada tipo de contenido en particular, como audio, vdeo, etc. %anvas: es un nuevo componente que permitir dibujar, por medio de las !unciones de un AP), en la pgina todo tipo de !ormas, que podrn estar animadas ( responder a interaccin del usuario. ,s algo as como las posibilidades que nos o!rece 5las , pero dentro de la especi!icacin del #$%& ( sin la necesidad de tener instalado ning-n plugin. Puedes conocer ms sobre este nuevo elemento en el manual de canvas que estamos creando en 3esarrollo4eb.com Bases de datos locales: el navegador permitir el uso de una base de datos local, con la que se podr trabajar en una pgina web por medio del cliente ( a travs de un AP). ,s algo as como las 0oo>ies, pero pensadas para almacenar grandes cantidades de in!ormacin, lo que permitir la creacin de aplicaciones web que !uncionen sin necesidad de estar conectados a )nternet. Web Workers: son procesos que requieren bastante tiempo de procesamiento por parte del navegador, pero que se podrn realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la pgina. Para ello se dispondr tambin de un AP) para el trabajo con los 4eb 4or>ers. Aplicaciones #eb Bffline: ,'istir otro AP) para el trabajo con aplicaciones web, que se podrn desarrollar de modo que !uncionen tambin en local ( sin estar conectados a )nternet. 2eolocali-aci0n: &as pginas web se podrn localizar geogr!icamente por medio de un AP) que permita la Ceolocalizacin.

100
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com /uevas APIs para interfa- de usuario: temas tan utilizados como el Edrag U dropE .arrastrar ( soltar/ en las inter!aces de usuario de los programas convencionales, sern incorporadas al #$%& M por medio de un AP). 4in de las eti!uetas de presentaci0n: todas las etiquetas que tienen que ver con la presentacin del documento, es decir, que modi!ican estilos de la pgina, sern eliminadas. &a responsabilidad de de!inir el aspecto de una web correr a cargo -nicamente de 0**.
0omo se puede ver, e'istirn varios AP) con los que podremos trabajar para el desarrollo de todo tipo de aplicaciones complejas, que !uncionarn online ( o!!line. Ouizs se entienda mejor por qu #$%& M es un pro(ecto tan ambicioso ( que est llevando tanto tiempo para ser elaborado.
Artculo por
11.>. 4uevos elementos de +ormularios en #$ML5

*onociendo algunos de los nue os elementos con los "ue podemos contar en los formularios web a partir de HTML>. 3urante los -ltimos meses #$%& M est en boca de todos. *e a generando gran e'pectativa alrededor de un sin n-mero de tecnologas que nos trae el nuevo lenguaje de la web, no solo por parte de los desarrolladores, sino tambin de usuarios, debido a que las nuevas especi!icaciones del #$%& mejoran sensiblemente la e'periencia de la navegacin. 0on #$%&M se pretende !acilitar el desarrollo aplicaciones web, las cuales siguen unos parmetros de compatibilidad, tanto usuarios de ordenadores de escritorio, como para los que usan o navegan a travs desde un dispositivo mvil. ,n este artculo vamos a tratar una de esas utilidades que tienen como objetivo mejorar las capacidades de las aplicaciones web. *e trata de los nuevos elementos para !ormularios #$%&. &os !ormularios en #$%&M se e'tienden para dar respuesta a diversas necesidades que se aban detectado en el pasado ( en concreto con la llegada de los dispositivos de movilidad. *martp ones, tablets, etc. ganan cada da ms a!icionados, debido a su practicidad ( portabilidad. #o( estos dispositivos tienen gran potencia, a nivel de ardware ( so!tware, ( ante estos nuevos avances la web deba responder con algunas erramientas para mejorar la usabilidad, en este caso de los !ormularios #$%& clsicos. 0on las nuevas especi!icaciones del lenguaje de la web, se va mejorando en gran medida la e'periencia de navegacin e interaccin del usuarios. 0on el uso de dispositivos mviles tctiles, no se cuenta con un teclado !sico, por eso las aplicaciones ( sistemas operativos implementan lo que se llama el teclado virtual, que le permita al usuario realizar la entrada de te'to de una !orma similar a la que se utiliza en los ordenadores de escritorio. A lo largo de este articulo ( algunos otros que vendrn a !uturo, estaremos ablando ( viendo de primera mano todas las bondades con las que cuentan los !ormularios web. ,n algunos casos se trata de elementos nuevos para los !ormularios, en otros casos simplemente se re!orman elementos e'istentes para o!recer alguna ventaja. ,n general al desarrollador le caen como anillo al dedo, pues permiten a orrarse diversos trabajos que tenamos que realizar con algunas tecnologas au'iliares como javascipt.
/ota& 0on toda esta evolucin del lenguaje de la web, se ace un poco mas !cil la escritura de aplicaciones web, pues recordemos que con #$%&M no solo se crean nuevas etiquetas, sino que tambin a( una evolucin de tecnologas au'iliares como el mismo lenguaje del cliente :avascript, adems del 3;%, ( una mu( importante nueva versin del popular 0**. $odos stos contribu(en a una nueva !orma de concebir a la web tanto para los que desarrollamos, como para los que e'ploran la web.
11.>.1. Los nuevos elementos o eti,uetas con las ,ue .odemos contar en un +ormulario #$ML5
,n esta seccin veremos cules son los cinco nuevos elementos que podemos integrar dentro de cualquier !ormulario

101
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com web. 0on estos nuevos elementos obtenemos ma(or interactividad en nuestras aplicaciones web, realizando tareas que normalmente se llevaban a cabo con a(uda de cdigos :avascript un tanto complejos. A ora, con las nuevas especi!icaciones de #$%&M, es posible realizar las mismas tareas, con la inmensa ventaja de usar etiquetas nativas, que generan campos destinados a algunos trabajos en particular, evitndonos usar elementos clsicos a los que asignar !uncionalidades con programacin. 3ebemos aclarar que algunos elementos, de los que se an incorporados en las nuevas especi!icaciones de #$%&M, pueden parecer mu( poco practicos. ,n ocasiones puede que se di!cil encontrarle una utilidad dentro de nuestras aplicaciones web, sin embargo, mencionaremos los cinco nuevos elementos aunque no va(amos a trabajar con todos en esta serie de artculos sobre los !ormularios ( sus nuevas erramientas ( elementos.
/ota& &a potencia de estos nuevos elementos radica en su uso simpli!icado. Algunos oncliso disponen de nuevas AP) de programacin :avascript, que se integran mu( !cilmente en cualquier entorno de desarrollo que utilice tecnologa #$%&M.
&os nuevos elementos son los siguientes: meter progress detalist >e(gen output
11.>.%. Algunos detalles sobre los cinco nuevos elementos de los +ormularios
0omo emos podido ver anteriormente son cinco nuevas etiquetas, con las que podemos contar en los !ormularios web. A continuacin vamos a acer mencin de cada una, adems de los posibles usos que podemos dar en nuestras aplicaciones web, con el propsito de que todos ustedes se agan una idea sobre lo que podemos lograr con estas nuevas etiquetas. (ti!ueta M(T(1& ,sta nueva etiqueta se usa para representar escalas de medidas conocidas, de a su nombre: %eter, el cual tiene relacin directa con medida. *e puede emplear para representar escalas de medicin conocidas como longitud, masa, peso, entre otras. (ti!ueta P1B21(::& 0on esta etiqueta no a( que acer ma(or e'plicacin, pues como su nombre lo indica, se usa para crear barras de progreso. Podemos emplearlas o usarlas en procesos de larga duracin, como la descarga de arc ivos, para indicar a cualquier usuario de nuestra aplicacin el progreso de la operacin que se est realizando. (lemento DATALI:T& ,s una e'tensin que sirve para crear campos de autocompletado. *irve para especi!icar una lista de datos u opciones que se pueden utilizar para sugerir el autocompletado de elementos como )"P<$. Por tanto, para utilizar un 3A$A&)*$, tenemos que combinar ese elemento con otros elementos de !ormulario al que le colocamos atributos nuevos para asociar el 3A$A&)*$ para acer el autocompletado. (ti!ueta <(D2(/& <sada para generar pares de claves, clave p-blica ( privada. Al enviar el !ormulario al servidor por cualquiera de los mtodos #$$P, en el cliente se guarda una clave privada la clave p-blica se empaqueta ( se enva al servidor. (ti!ueta o elemento B'TP'T& %uestra el resultado de un clculo matemtico, su uso bsico puede ser tan bsico como el de mostrar una simple suma de dos n-meros. 3e momento, dejamos por aqu este listado de nuevos elementos de !ormulario, citando a los lectores a un pr'imo articulo, donde veremos el uso de algunos de estos nuevos elementos.
Artculo por
Dairo Galeano

102
11.G. Las me2oras de los elementos &4!?$ de #$ML5

,na bre e descripcin de las nue as caracter(sticas presentes en los elementos de formulario 250,T en HTML>. 0uando uno abla de !ormularios, se re!iere tambin a la interaccin entre los usuarios ( una aplicacin web, basada en la introduccin de datos de entrada. ,n muc as ocasiones, la entrada de datos puede convertirse en una tarea tediosa para los desarrolladores, quienes tienen que buscar que mtodos son los mejores para introducir datos de una manera intuitiva ( validarlos por medio de la programacin. ,s !recuente ver, en aplicaciones web medianamente bien realizadas, rutinas de validacin de datos que permiten al usuario rellenar los !ormularios con la in!ormacin correcta. ,l trabajo para la validacin de los datos generalmente se realiza con un lenguaje del lado del cliente como :avascript, aunque algunos pre!ieren lenguajes de servidor para validar datos.
/ota& "o siempre es recomendable validar los datos en el servidor, por el abuso de transacciones #$$P que pueden producirse. Por ello, el mejor mtodo para la validacin es :ava*cript en el lado del cliente, o una mezcla entre ambas arquitecturas, cliente ( servidor. &amentable a( quienes no reconocen las bondades del lenguaje de programacin del lado del cliente estndar, :avascript, aunque esto poco a poco va pasando a la istoria ( a ora ms con el #$%&M.
Cracias a #$%&M los desarrolladores emos ganado unas importantes erramientas para validar datos en un !ormulario, de una !orma ms !cil, con menos rutinas de cdigo. )ncluso en algunos casos no es necesario siquiera acer nada de :ava*cript, pues e'isten mecanismos para veri!icar la correccin de los datos, con solo un poco de #$%&.
11.G.1. Doce ti.os nuevos de &4!?$ .ara me2orar el traba2o con +ormularios
Para los que en alg-n momento sintieron que los )"P<$ disponibles en los !ormularios clsicos se quedaban cortos, #$%&M tiene la respuesta. A decir verdad, muc os abremos podido pensar eso en alguna ocasin, sobre todo cuando emos tratado de desarrollar aplicaciones dirigidas a dispositivos mviles. #$%&M est pensado para ser usado en m-ltiples entornos, ( por tal razn se an credo doce nuevos tipos de )"P<$.
/ota& Aunque pueda parecer que no tiene demasiada importancia la creacin de todos estos tipos de )"P<$ nuevos, podemos decir que es un gran paso adelante. Aun ms a ora, que se pueden desarrollar aplicaciones nativas para dispositivos, con a(uda de algunos !ramewor> como $itanium o P onegap, del que publicaremos un manual en 3esarrolloweb.com mu( pronto. )ncluso, como e'ploraremos tambin en este sitio, con #$%&M vamos a poder crear aplicaciones nativas en 4indows J. 0omo puede verse con el nuevo lenguaje de la web se nos abren nuevos orizontes ( todas estas nuevas implementaciones sern mu( utilizadas en todos esos nuevos entornos de aplicaciones.
A continuacin mencionamos cada uno de los doce nuevos )"P<$ que estn presentes en la quinta especi!icacin del lenguaje #$%&, con una breve e'plicacin de cada uno. I/P'T tel& ,ste tipo de input viene predispuesto con un !ormato para escribir n-meros tele!nicos. ,n realidad no ace ninguna validacin, pero s se puede implementar una con la nueva AP) de validacin de :ava*cript. I/P'T number pre formateado& *irve para escribir solo n-meros. ,n algunos navegadores, cuando se ejecuta el evento on*ubmit no se ace el envo en caso que el campo number est lleno de caracteres que no sean numricos. I/P'T searc)& Adems de proporcionar un campo de entrada, se le agrega un icono de b-squeda para distinguirlo de un campo de navegacin. I/P'T color& ,ste input nos brinda una paleta de colores donde el usuario puede escoger un color de !orma dinmica. ,s lo que

103
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com llamamos un colorpic>er, con la particularidad que nos lo o!rece el propio navegador. I/P'T range& Proporciona un control que se desliza, cambiando automticamente el valor del campo. I/P'T '1L& ,ste tipo de entrada viene con un !ormato para <1& absoluta. I/P'T email& $iene la capacidad de aceptar -nicamente direcciones de correo electrnico. Adems, se pueden enviar varios email separados por comas, si tiene especi!icado el atributo multiple. I/P'T datetime& Para obtener !ec a del conjunto de la zona oraria <$0. I/P'T date& Para introducir una !ec a que no aga parte de del conjunto orario. I/P'T mont)& Para introducir meses del a2o. I/P'T #eek& ;!rece una utilidad para escribir ( captar in!ormacin de semanas. I/P'T time& ;btiene in!ormacin con oras, minutos ( segundos. Tipo datetimeNlocal& 1ecibe la ora local del dispositivo.
11.G.%. M/s all/ de los nuevos &4!?$3 nuevos atributos

0on todos los nuevos tipos )"P<$ se logra un gran avance con respecto a los !ormularios clsicos de la web. Algunas de las ventajas pueden ser observables en dispositivos touc .con pantallas tctiles/.
/ota& *i quieres ver los nuevos )"P<$ !uncionando en navegadores de escritorio, recomendamos usar la -ltima versin de Coogle 0 rome .la versin 8K en adelante debera !uncionar/. 5ire!o' tambin puede servir, puesto que se actualiza bastante rpido.
*i bien los nuevos )"P<$ son revolucionarios, tambin e'isten varias ventajas que nos traen diversos nuevos atributos, venidos tambin a raz de la evolucin de los !ormularios de #$%&M. 0on esos atributos nuevos podemos acer cosas realmente interesantes sin ma(ores problemas. ,n este artculo vamos a realizar un ejemplo con dos de ellos. Atributo place)older& *in duda abrs visto en muc as ocasiones un e!ecto e!ecto sobre los campos )"P<$, en pginas como $witter, donde a( un te'to que indica la in!ormacin que el usuario debe ingresar. Al situar el !oco encima del campo, ese te'to desaparece para que el usuario escriba lo que desee. Pues bien, ese e!ecto se consigue con el atributo place older de una manera inmediata. Podemos ponerlo en prctica con un cdigo como el siguiente.
<inp"t t'pe="text" placeholder="Bngrese el nombre">
*olo a( asignar al atributo place older el te'to que deseamos que aparezca en el )"P<$, ( una vez se situe el !oco en el campo de te'to, simplemente desaparece. Atributo autofocus& ,l e!ecto logrado mediante el atributo auto!ocus es igual al de las pginas de b-squeda como Coogle, donde al cargar la pagina el !oco de la aplicacin (a se encuentra en un )"P<$. *u uso sera tan simple como este.
<inp"t t'pe="search" st'le="borderOcolorC21%cKa1" a"tofoc"s>
Para ma(or claridad os dejamos un ejemplo bsico con estos atributos asignados a campos )"P<$.
<<?-*TN#E html> <html lang="es">

104

<head> <title>#r"eba1</title> <st'le> inp"tW borderOradi"sCMpxP borderOcolorC 2cfcP X </st'le> </head> <bod'> <inp"t t'pe="text" placeholder="Bngrese el nombre"> <inp"t t'pe="search" st'le="borderOcolorC21%cKa1" a"tofoc"s> </bod'> </html>
,n !uturos artculos usaremos ms utilidades de los !ormularios #$%&M.

Artculo por
Dairo Galeano
11.:. 1ti,uetas nuevas de #$ML5

*ules son las eti"uetas nue as del lenguaje HTML>, con una bre e descripcin sobre su utilidad $ clasificacin. &a nueva versin del lenguaje #$%& trae consigo muc as novedades. 0omo vimos en el artculo Ou es #$%&M, el nuevo estndar est compuesto de diversas tecnologas de lo ms variado, para suplir todas las necesidades de la 4eb actual ( de los nuevos dispositivos de movilidad. ,n esa lnea comprensin de lo que es #$%&M, cabe destacar que e'isten varios lenguajes que estn siendo actualizados con el nuevo estndar, como #$%&, 0** o :avascript. *i tuvisemos una pila de asuntos que representasen cada una de estas novedades, la del propio lenguaje #$%& sera la menor, seguida de 0** ( luego de :avascript. *in embargo, a( varias cosas que debemos conocer sobre el lenguaje de etiquetado en esta nueva versin, que estn cambiando enormemente la manera en la que se conciben ( desarrollan los sitios web actuales.
11.:.1. 4ovedades en #$ML de #$ML5

Ia dentro del lenguaje #$%& espec!icamente, las novedades que nos trae en su versin M son una serie de etiquetas -tiles en la web actual, algo bien sencillo de aprender ( de aplicar a los sitios web, as como el propio lenguaje de marcacin es tambin sencillo de asimilar. &as podemos clasi!icar en dos partes: ,tiquetas que nos traen soporte a nuevas !uncionalidades: es decir, aquellas que nos sirven para e'tender el #$%&, dando soporte a asuntos como el vdeo o el sonido, lienzos donde dise2ar dibujos, etc. ,tiquetas que componen la web semntica: algunas etiquetas que realmente no proponen nuevas !uncionalidades, sino que sirven para componer sitios indicando qu son los bloques de cdigo de una web, en lugar de cmo se deben representar.
/ota& Podramos de!inir otras clasi!icaciones o incluso subgrupos en cada uno de los anteriores items, pero de momento est bien para aclarar cules son las novedades clave que trae #$%&M.
3entro de cada grupo tenemos multitud de nuevas etiquetas que comentaremos brevemente a continuacin.
11.:.%. 1lementos ,ue dan so.orte a nuevas +uncionalidades

,'isten numerosas novedades dentro del #$%&M que se an representado por etiquetas o elementos de diversa ndole.

105
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Algunas etiquetas son realmente nuevas ( otras como ,%=,3 (a e'istan ( se an incorporado al estndar. ,tiquetas para %ultimedia: Algunos elementos nuevos servirn para integrar contenido multimedia, pues sabemos que cada da esos nuevos tipos de in!ormacin estn ms presentes en la 4eb. A<3);: Para insertar sonido dentro de una web. +)3,;: Para insertar clips de vdeo. ,%=,3: Para embeber contenido e'terno de otro tipo, como el trado de diversos plugins que se comercializan actualmente o se comercializarn en el !uturo. *;<10,: Permite especi!icar varias !uentes di!erentes cuando se insertan elementos en A<3); ( +)3,;. $1A0Y: Permite especi!icar varias pistas de sonido o vdeo para los elementos A<3); ( +)3,;.
/ota& ,n 3esarrollo4eb.com e'isten diversos talleres de #$%&M que e'plican diversos usos de las etiquetas A<3); ( +)3,;, que podemos leer si nos pasamos por el $aller de #$%&M.
/uevos elementos de formulario& ,n el caso del #$%&M ( los !ormularios tenemos que destacar que no solamente se an creado nuevas etiquetas, sino que se a a2adido soporte a las e'istentes anteriormente. 3e momento estas son las nuevas etiquetas que nos o!rece. %,$,1: Para trabajar con medidas ( escalas. P1;C1,**: )mplementa barras de progreso. 3A$A&)*$: ,'tensin para crear campos con !uncionalidad de autocompletar. Y,IC,": Cenera claves p-blica ( privada para encriptacin. ;<$P<$: 1ealizar ( mostrar clculos matemticos.
/ota& Para ver descripciones ms detalladas sobre este asunto recomendamos la lectura del artculo "uevos elementos de !ormularios en #$%&M.
Pero ablando de novedades en !ormularios, no debemos dejar de remarcar que #$%&M tambin trae diversos nuevos usos de )"P<$, que nos sirven para especi!icar qu tipo de in!ormacin concreta queremos introducir en ellos. ,llo proporciona utilidad especial a esos campos )"P<$, pensando tambin en los dispositivos mviles ( la !orma con la que tratan dic os campos. $odo eso se e'plica con detalle en el artculo &as mejoras de los elementos )"P<$ de #$%&M. Dibu os completos en HTMLI. lien-o de %A/@A:& &uego tenemos una utilidad nueva que merece la pena verla por separado, puesto que nos va a trans!ormar la manera con la que se e'perimentar la web. *e trata de un lienzo en donde se puede dibujar cualquier cosa e incluso acer animacin compleja. 0A"+A*: <na etiqueta que genera un lienzo en la pgina donde realizar cualquier tipo de dise2o, soporta dibujo de todo tipo de !ormas, degradados, imgenes, etc.
/ota& &a etiqueta 0A"+A* del #$%& simplemente delimita un rea de la pgina donde se puede dibujar, pero para realizar esos dibujos se tiene que utilizar el lenguaje :avascript, a travs del AP) de 0anvas. Para aprender a dise2ar en un 0A"+A* os recomendamos la lectura del %anual del ,lemento 0anvas del #$%&M.
11.:.'. 1lementos .ara la @eb sem/ntica

0omo decamos, la segunda clasi!icacin de las nuevas etiquetas del #$%&M est relacionada con lo que se llama la Eweb semnticaE. +amos a dedicar otros artculos a estudiar en pro!undidad esta web semntica ( por qu es importante utilizarla (a mismo en nuestros pro(ectos, pero de momento veamos a continuacin una lista de elementos que an sido agregados al #$%& para especi!icar qu son ( no cmo se deben mostrar en la pgina. :ecciones dentro de una p"gina& Algunas de las nuevas etiquetas nos sirven para decir qu secciones contiene una pgina.

106
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com A1$)0&,: ,speci!ica un artculo, es decir, una unidad de contenido. *,0$);": ,s una seccin dentro de un documento. #,A3,1: &a cabecera de una pgina. 5;;$,1: ,l pie de pgina o in!ormaciones que !ormen el pie de una seccin. A*)3,: ,s una parte de la web que muestra contenido accesorio, generalmente colocado en un panel lateral. "A+: con el que colocar el navegador principal de una pgina web.
Btros tipos de informaciones& #a( otras muc as etiquetas que nos sirven para de!inir qu es el contenido que se escribe dentro. =3): 3e!ine una parte del te'to que debe ser entendido aparte de la lnea de contenido que se est escibiendo. %,"<: una lista de opciones que !ormen parte de un men-. 0;%%A"3: <no de los elementos o botones de un mende opciones. 3,$A)&*: 3etalles o in!ormacin suplementaria que se puede ver u ocultar por el usuario. *<%%A1I: ,ncabezamiento para detalles especi!icados en 3,$A)&*. 5)C<1,: es un contenido que ilustre el artculo, como !otos, diagramas, ilustraciones, etc. 5)C0AP$);": ,l pie o e'plicacin de un 5)C<1,. #C1;<P: <n grupo de encabezamientos, -til cuando se tiene diversos bloques de encabezamientos del mismo nivel #8, #9... %A1Y: <n te'to o in!ormacin que es remarcable. $)%,: Para escribir una !ec a, una ora o ambas. 4=1: 3e!ine un posible salto de lnea.
,n el pr'imo artculo veremos unas e'plicaciones ms conceptuales acerca de las etiquetas semnticas ( cmo stas deben cambiar el modo en el que se entiende la composicin de una pgina web.
Artculo por

107

Manual HTML Actualizado

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual HTML Actualizado

Transféré par

Droits d'auteur :

Formats disponibles

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Autores del manual

edactor de DesarrolloWeb.com http://www.desarrolloweb.com (2! captulos)

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.1. !r"logo al manual de #$ML

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

1.%. &ntroducci"n al #$ML

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

1.'. Sinta(is del #$ML

,l resultado sera: #ola, estamos en el prra!o 8 A ora emos cambiado de prra!o

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.'.1. !artes de un documento #$ML

1.'.%. Las ma)*sculas o min*sculas son indi+erentes al escribir eti,uetas

1.-. $u .rimera ./gina

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Formatos bsicos con HTML

%.1. 0ormato de ./rra+os en #$ML

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

que dara: $e'to alineado al centro Para ustificar a la derec)a:

%.1.1. 12em.lo .r/ctico3

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

*e ver de esta manera en la pgina:

*e ver de esta manera en la pgina:

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

%.%. 0ormateando el te(to

;btenemos este resultado: Texto en negrita

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

%.%.-. Subndices ) su.randices

Aqu tenis un ejemplo:

,l resultado: &a 8K00K#60l";* es un eterociclo alergeno enriquecido

%.%.5. Anidar eti,uetas

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

%.'. Color6 tama7o ) ti.o de letra

%.'.1. Atributo +ace

!aceQE0omic *ans %*,arial,verdanaE

debemos colocar las comillas para limitarlo. ,n caso de no tener comillas

!aceQ0omic *ans %*,arial,verdana

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

%.'.%. Atributo size

Oue se visualizara as en una pgina web.

,ste te'to es ms grande

%.'.'. Atributo color

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1eal White @ellow

%.-. Los colores ) #$ML

ABA DBD 2B2 !B!

4B4 EBE *B* GBG

CBC FBF :BDA 'BDD

"BD2 DBD! EBD4 <BDE

Para conseguir un color, mezclaremos valores de esta manera:

Manual de HTML: http://www.desarrolloweb.com/manuales/21/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

%.-.%. 8tros colores

%.-.'. Colores com.atibles en todos los sistemas

Miguel Angel Alvarez

1.'.%. Las ma)sculas o minsculas son indi+erentes al escribir eti,uetas

!aceQE0omic ans %,arial,verdanaE

!aceQ0omic ans %,arial,verdana

4B4 EBE B GBG

=rujula e2rula montada en una escbula ;reja esenta minutejos