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 aanzados.
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
&araede'(). Especialista en usabillidad %
dise$o centrado en el usuario.
(* captulos)
Dairo Galeano
Desarrollador independiente
(2 captulos)
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.
1
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 eco 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 dico 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
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, objetios $ dems conocimientos donde sentar
las bases del manual.
HTML es el lenguae 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 arcivo #$%& .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 mucas !acilidades que nos
permiten aumentar nuestra productividad. "o obstante, es aconsejable en un principio utilizar una erramienta lo ms
3
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 arcivo donde est contenido el cdigo #$%& en !orma de te'to. ,stos arcivos 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
%onseo& <tiliza siempre la misma e'tensin en tus arcivos #$%&. ,so evitar que te con!undas al escribir los nombres de tus
arcivos 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.
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
Aora emos cambiado de prra!o
4
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,...
?Aead@
?bod(@
,tiquetas ( contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: $e'to e imgenes
?Abod(@
?Atml@
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.
1.-. $u .rimera ./gina
)amos a er cmo se &ace una pgina mu$ sencilla en HTML, "ue sira 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@
?Aead@
?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(@
5
?Atml@
Aora guarda ese arcivo con e'tensin .tml o .tm en tu disco duro. Para ello accedemos al men- Arcivo (
seleccionamos la opcin Cuardar como. ,n la ventana elegimos el directorio donde deseamos guardarlo ( colocaremos
su nombre, por ejemplo miDpagina.tml
%onseo& <tiliza nombres en tus arcivos que tengan algunas normas bsicas para aorrarte 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 arcivos 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 eco 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 0rome, 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 arcivo .tml o .tm, podemos visualizar el resultado de nuestra labor
abriendo dica 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 Arcivo ( 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 arcivo 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 arcivo buscado.
/ota& $ambin puedes abrir el arcivo si accedes al directorio donde lo guardaste. ,n l podrs encontrar tu arcivo #$%& ( 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 arcivo 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 Iaoo.
6
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 aora acis clic> con el botn dereco 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 arcivo .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
arcivos 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 men-
de +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 arcivos 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 arcivo con el que estamos trabajando ( que el =loc> de "otas nos aga
caso cuando le indicamos que grabe el arcivo con otra e'tensin que no sea .t't
7
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 siren 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 dereca
especi!icando dica 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:
8
$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 dereca
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 dereca
<n salto de lnea triple
8 prra!o alineado a la izquierda
9
"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 marca.
%.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@ ( ?A8@
.o cualquier otro encabezado/ se colocar en un prra!o independiente.
Podemos ver cmo se presentan algunos encabezados a continuacin.
<h1>Encabeado 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">Encabeado 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@
?Aead@
?bod(@
?8@,ncabezado de nivel 8?A8@
?K@,ncabezado de nivel K?AK@
?M@,ncabezado de nivel M?AM@
?L@,ncabezado de nivel L?AL@
?Abod(@
?Atml@
10
*e puede ver el ejercicio en una pgina aparte.
%onseo& "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.
%.%. 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 ( muco 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 aora. %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
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 muca 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
8K
00
K
#
6
0l";* 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
%onseo& 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.
9. A los navegadores les cuesta muco 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.
$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
%.'. Color6 tama7o ) ti.o de letra
+eguimos aprendiendo eti"uetas "ue nos siren 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 dico 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 sie=+>Este texto es ms grande</font>
,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 mucos 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>
,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/
%.-. Los colores ) #$ML
En este reportaje tratamos de acercarte todos los detalles relatios 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 4B4 CBC "BD2
DBD EBE FBF DBD!
2B2 *B* :BDA EBD4
!B! GBG 'BDD <BDE
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

$abla de color
%.-.%. 8tros colores
4aran2a 900:;;;
<erde tur,uesa 9''==>>
Azul oscuro 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 arcivos 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 Miguel Angel Alvarez
%.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 mucas 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.
%onseo: 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 dico !ondo. *i el visitante no puede ver el !ondo por cualquier cuestin .Por ejemplo tener desabilitada 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 aora 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.
%.>. 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 J HgtI K
HampI H H6uotI L
%.>.%. Caracteres es.eciales del #$ML %.;
H:acuteI M H:gra>eI N
HEacuteI O HEgra>eI P
H/acuteI Q H/gra>eI R
H?acuteI S H?gra>eI T
HUacuteI V HUgra>eI W
HaacuteI 4 Hagra>eI X
HeacuteI 7 Hegra>eI Y
HiacuteI Higra>eI Z
HoacuteI . Hogra>eI [
HuacuteI \ Hugra>eI ]
H:umlI ^ H:circI _
HEumlI ` HEcircI a
H/umlI b H/circI c
H?umlI d H?circI e
HUumlI f HUcircI g
HaumlI h HacircI i
HeumlI j HecircI k
HiumlI l HicircI m
HoumlI n HocircI o
HuumlI p HucircI q
H:tildeI r HaringI s
H-tildeI t H:ringI u
H?tildeI v H"cedilI w
HatildeI x HccedilI y
HntildeI $ H@acuteI z
HotildeI { H%acuteI |
H?slashI } H%umlI ~
HoslashI H10?-I
HE10I HthornI
HethI H:EligI
HszligI HaeligI
19
%aracteres especiales del HTML 75?
H8racD4I HnbspI
H8racD2I Hie9clI
H8rac!4I HpoundI
Hcop%I + H%enI
HregI HsectI
Hord8I HcurrenI
Hsup2I Hbr>barI
Hsup!I Hla6uoI
HsupDI HnotI
HmacrI Hsh%I
HmicroI HordmI
HparaI HacuteI
HmiddotI HumlI
HdegI HplusmnI
HcedilI Hra6uoI
Hi6uestI
%.>.'. 8tros caracteres es.eciales
HtimesI HcentI
Hdi>ideI HeuroI
HD4GI HDE!I
HD4CI HD!GI
HD4AI HD!DI
HD!EI 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.
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 aora, 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 muco 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
Pases del mundo
Argentina
Per-
0ile
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 muco 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
,lemento 8
,lemento 9
,lemento K
,lemento 6
'.%. 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 ( aora 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
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 dica 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
9. ,lemento 9
;rdenamos por letras
a. ,lemento a
b. ,lemento b
;rdenamos por numeros romanos empezando por el 87
'. ,lemento '
'i. ,lemento 'i
'.'. 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 desplaamiento
<dl>
<dd>.eg"ndo ni&el de desplaamiento
24
<dl>
<dd>Tercer ni&el de desplaamiento
</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. =ariloce
<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 #$%&.
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 arcivo #$%& 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 arcivos, 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 arcivos #$%& 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 arcivos 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 arcivo.
26
,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 !iceros.
1eferencia& Para complementar las e'plicaciones sobre los enlaces #$%& recomendamos ver el videotutorial sobre enlaces.
-.%. 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 dico, 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 .arcivos/ 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 arcivo ( 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.
27
-.'. 1nlaces locales
Enlaces HTML con otras pginas del mismo sitio web.
0omo emos dico, 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 mucos casos no nos valdr con
especi!icar el nombre del arcivo, sino que tendremos que especi!icar adems el directorio en el que nuestro
arcivo.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 arcivo, 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 arcivo (
separndolos por el smbolo barra EAE. Al !inal obviamente, escribimos el arcivo.
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 arcivo destino.
6. *i la pgina se encuentra en otro directorio no incluido ni inclu(ente del arcivo 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 arcivo.
(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.
-.-. 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 pincarlos 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
%onseo& 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 dico, 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 arcivo de otro tipo.
*i queremos enlazar con un arcivo miD!icero.zip que se encuentra en el mismo directorio que la pgina se escribira
un enlace as.
<a href="miHfichero7ip">?escarga miHfichero7ip</a>
*i pincamos un enlace de este tipo nuestro navegador descargar el !icero, aciendo la pregunta tpica de EOu
queremos acer con el arcivo. Abrirlo o guardarlo en discoE.
Podemos ver un ejemplo de enlace a arcivo con su consiguiente ventana de descarga de un arcivo.
%onseo& "o colocar en )nternet arcivos ejecutables directamente sino arcivos comprimidos. Por dos razones:
8. ,l arcivo ocupar menos, con lo que ser ms rpida su trans!erencia.
9. Al preguntar al usuario lo que desea acer con el !icero 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 marca ( cuando lo pare no se quedar guardado en su sistema. *i los
arcivos estn comprimidos obligaremos al usuario a descomprimirlos en su disco duro antes de ponerlos en marca, 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 arcivo, 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 marca 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>
30
-.5. Atributo no+ollo@ en los enlaces
El atributo rel/nofollow, de los enlaces, sire 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.
Aora 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 IaooX 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
;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 arcivo robots.t't, que (a emos comentado anteriormente en 3esarrollo4eb.com.
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 muco 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 muco 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, Potosop o Cimp. $ampoco e'plicaremos las particularidades de cada tipo de
arcivo: 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
&as imgenes son almacenadas en !orma de arcivos, principalmente C)5 .para dibujos/ o :PC .para !otos/. ,stos
arcivos 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 arcivo 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 arcivo 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 ( ancura respectivamente de la imagen en p'eles.
$odos los arcivos gr!icos poseen unas dimensiones de anco ( alto. ,stas dimensiones pueden obtenerse a partir del
propio dise2ador gra!ico o bien aciendo clic con el botn dereco sobre la imagen vista por el navegador para luego
elegir propiedades sobre el men- que se despliega.
,l eco 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 arcivo
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 mucos debutantes tienen esa mala costumbre de crear gr!icos
33
peque2os redimensionando la imagen por medio de estos atributos a partir de arcivos 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 dico 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 arcivo 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 aora 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 ancura superior a la original
$ambin mostraremos la imagen sin borde, con su misma ancura ( con una altura superior a la original
Por -ltimo, mostraremos la imagen con una altura ( ancura 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 mucas otras cosas sobre imgenes, pero si lo deseas, tambin puedes acceder a un
vdeo donde se trata lo visto anteriormente ( mucas otras cosas adicionales sobre las imgenes ( la creacin de webs: +ideotutorial
#$%&: imgenes.
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 dereca, 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 dico que la etiqueta ?img@ puede aceptar el atributo align. ,n este caso, la utilidad que le
damos di!iere de la anterior.
,l eco de utilizar el atributo align dentro de la etiqueta ?img@ nos permite, en el caso de darle los valores le!t o rigt,
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 dico 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:
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:
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
#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...
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 muca 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 arcivos 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 arcivos gr!icos C)5 ( :PC, pensados especialmente para optimizar
el tama2o que ocupan en disco, (a que los arcivos peque2os se transmiten ms rpidamente por la 1ed.
,l !ormato de arcivo 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 Potosop/ 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 arcivos.
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 arcivo ideal para las imgenes que estn dibujadas tiene mucas otras
caractersticas que son importantes ( -tiles.
%ompresi0n: ,s mu( buena para dibujos, como (a emos dico. )ncluso puede ser interesante si la
imagen es mu( peque2a, aunque sea una !oto.
Transparencia: es una utilidad para de!inir ciertas partes del dibujo como
transparentes. 3e este modo podemos colocar las imgenes sobre distintos
!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.
Ceneralmente, de!inimos la transparencia cuando vamos a guardar el gr!ico.
%olores: 0on este !ormato gr!ico podemos utilizar paletas, conjuntos, de 9ML
colores o menos. ,ste es un detalle mu( importante, puesto que cuantos menos
colores utilicemos en la imagen, por lo general, menos ocupar el arcivo. ,n ocasiones, aunque utilicemos menos
colores en un gr!ico, este no pierde muco en calidad, llegando a ser inapreciable a la vista.
,n algunos programas podemos modi!icar la cantidad de colores al guardar el arcivo, 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
<n logotipo es un
ejemplo claro de
imagen C)5
Parte de esta
imagen es
transparente
5.'.'. 0ormato A!G
+eamos aora cuales son las caractersticas !undamentales del !ormato :PC:
%ompresi0n: $al como emos dico 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 !icero
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
gr!ico aremos que el !ondo de la imagen sea el mismo
que el de la pgina donde queremos colocarla. ,n
mucos casos los !ondos de la imagen ( la pgina
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 !iceros 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
mucos casos podremos acerlo al guardar el arcivo.
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 arcivo cuando lo estemos guardando. ,ste !ormato nos permite
bajar muco la calidad de la imagen sin que esta pierda muco en su aspecto visual.
:PC
calidad 7
K Y=
39
<na !otogra!a con !ormato :PC
)ntento de
transparencia en
:PC. Pulsar para
ampliar
: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. Potosop 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 arcivo 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 arcivo, acindolo rpido de trans!erir (, por tanto, ms optimo
para )nternet. Al ser estas utilidades tan especializadas los resultados
suelen ser mejores que con los programas de edicin gr!ica.
(emplos de optimi-adores gr"ficos&
F 4ebCrapics ;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.
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
Potosop es una erramienta e'celente para
optimizar !iceros. +iendo varias copias
podemos elegir la ms adecuada.
#emos visto que estos enlaces son palabras, te'tos o imgenes que, al pincar 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 dica 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 anco .B/ ( alto .I/ ( cada punto de la imagen puede ser de!inido
por tanto diciendo a que altura .'/ ( ancura .(/ nos encontramos. 3e este modo, la
esquina superior izquierda corresponde a la posicin 7,7 ( la esquina in!erior
dereca 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 Potosop 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 ( anco 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 dicas pginas. 0omo no emos eco 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
.sape/ que estemos de!iniendo.
)ref
Para indicar el destino del enlace correspondiente al rea.
,n este caso emos utilizado unas reas circulares .sapeQE0)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 dereca. $al como estn
nombradas dicas 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
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 siren $ en "u# casos podemos utilizarlas. )emos la tabla ms
simple posible.
'na tabla en un conunto de celdas organi-adas dentro de las cuales podemos aloar 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 !icero aparte del #$%&.
Por ello, en el momento actual las tablas se utilizan muco 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
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 dereca. 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
D
"elda 2# linea
D
"elda D# linea
2
"elda 2# linea
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 #$%&.
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 (usti8ica el te9to de la celda del mismo modo 6ue si
8uese el de un p4rra8o.
valign &odemos elegir si 6ueremos 6ue el te9to aparezca
arriba (top)# en el centro (middle) o aba3o (bottom) de
la celda.
bgcolor Da color a la celda o lnea elegida.
bordercolo
r
De8ine el color del borde.
;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 eigt 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 anco a la celda,
el anco ser respetado ( si dica celda tiene muco 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 anco 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 anco, !uera divisible .como un te'to/ el anco 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, eigt ( widt nos a(udan a de!inir las
45
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 ancura de J7 pi'els a la celda. *in embargo,
<td 8idth="J49">
3ar una ancura a la celda del J7H de la ancura 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 ancura 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 ancuras 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 dereca.
Esta celda tiene un colspanBL2L
"elda normal ?tra celda
3el mismo modo,
<td ro8span="%">
Esta celda tiene rowspanBL2L#
por eso tiene 8usionada la
celda de aba3o.
"elda
-ormal
?tra celda
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
>.'. $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
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
d
-os permite colocar un 8ondo para la tabla a partir de
un enlace a una imagen.
bgcolor Da color de 8ondo a la tabla.
border De8ine el n\mero de pi9els del borde principal.
bordercol
or
De8ine el color del borde.
cell.addin
g
De8ine# en pi9els# el espacio entre los bordes de la
celda % el contenido de la misma.
cells.acin
g
De8ine el espacio entre los bordes (en pi9els).
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, eigt ( 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 dereca ( a la izquierda.
12em.lo de tabla centrada
,sta tabla est centrada
.alingQEcenterE/. *olo tiene una celda.
,ste sera un te'to cualquiera colocado al lado de una tabla centrada
12em.lo de tabla alineada a
la derecha
Para que se vea el e!ecto de alineado
a la tabla debemos colocar un te'to
al lado ( el te'to rodear la tabla,
igual que ocurra con las imgenes alineadas a un lado.
12em.lo de tabla alineada a
la iz,uierda
Para que se vea el e!ecto de alineado
a la tabla debemos colocar un te'to
al lado ( el te'to rodear la tabla,
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
,sta tabla est alineada a la dereca
.alingQErigtE/. *olo tiene una celda.
,sta tabla est alineada a la izquierda
.alingQEle!tE/. *olo tiene una celda.
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
ro3o de 8ondo
El atributo bgcolor de la
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.
%onseo& Pginas como 3esarrollo4eb.com ( mucas 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
D
2
!
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="%" cellpadding="%" border="1">
<tr>
<td>Tabla anidada, celda 1</td>
<td>Tabla anidada, celda %</td>
</tr>
<tr>
<td>Tabla anidada, celda $</td>
<td>Tabla anidada, celda +</td>
</tr>
</table>
</td>
</tr>
</table>
>.'.%. 12em.los .r/cticos
#asta aqu la in!ormacin que pretendamos transmitiros sobre las tablas en #$%&. *era importante aora realizar
alg-n ejemplo de realizacin de una tabla un poco compleja. Por ejemplo la siguiente:
Animales en .eligro de e(tinci"n
-ombre "abezas &re>isi.n 2ADA &re>isi.n 2A2A
'allena *AAA 4AAA DEAA
?so &ardo EA
A
,ince DA
1igre !AA 2DA
*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
de :m7rica del
)ur. &ases como:
&arte de aba3o de
:m7rica del )ur.
&ases como:
'os6ue tropical# clima de
sabana# clima martimo con
in>iernos secos.
"limas martimos con
>eranos secos# con in>iernos
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.
49
5enezuela
"olombia
Ecuador
&er\
:rgentina
"hile
Urugua%
&aragua%
>.-. 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 ( dereco
l)s: *e mostrar tan solo el borde izquierdo
r)s: *e mostrar solamente el borde dereco
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 2 !
4 E *
G C F
$abla con borde e'terno arriba ( abajo .!rameQEsidesE/
D 2 !
4 E *
G 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
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
Aora mostramos un par de ejemplos del atributo rules:
*in ning-n borde interno .rulesQEnoneE/
D 2 !
4 E *
G C F
0on borde interno para separar !ilas .rulesQErowsE/
D 2 !
4 E *
G C F
>.5. Agru.ar +ilas o columnas de tablas con #$ML -
En HTML 6.7 podemos agrupar filas de una tabla, o columnas. +ire 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
*
G C F
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="fontOsieC1K49P">
<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 aora 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.
<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 2 !
4 E *
G 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:
<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 ancura de 877 pi'els. ,l tercer 0;&, tambin emos
de!inido una ancura, 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:
D 2 !
4 E *
G C 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 aora 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
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 muco
ms amplia: &os !ormularios.
&os !ormularios son esas !amosas cajas de te'to ( botones que podemos encontrar en mucas 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 arcivos 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 dico, 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 arcivo
que contiene dico programa. &a etiqueta quedara en este caso de la siguiente !orma:
<form action="direcci/n del archi&o" 777>
55
&a !orma en la que se e'presa la localizacin del arcivo 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.
G.%. 1lementos de 0ormularios. Cam.os de te(to
)emos detenidamente los distintos elementos de formulario "ue siren 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
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:

+eremos posteriormente que este atributo puede resultar bastante relevante en determinadas situaciones.
/ota& estamos obligados a utili-ar la eti!ueta *form+
57
Per i co Pal ot es
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/
3ico 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:

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.
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 mucos 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
Escr i be t u coment ar i o. . . .
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:

,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 !leca acia arriba, tambin llamada si!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.
%onseo& :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 si!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" sie="$" m"ltiple>
&a lista quedara de esta !orma:

&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
Primavera
Primavera
Verano
Otoo
Invierno
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:

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 t'pe="radio" name="estacion" &al"e="1">#rima&era
<br>
<inp"t t'pe="radio" name="estacion" &al"e="%">Serano
<br>
<inp"t t'pe="radio" name="estacion" &al"e="$">-to>o
<br>
<inp"t t'pe="radio" name="estacion" &al"e="+">Bn&ierno
/ota& #a( que !ijarse que la etiqueta ?input t(peQEradioE@ slo coloca la casilla pincable 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
Otoo
+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/
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 inisibles $ 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 dico 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:

0omo puede verse, tan solo emos de especi!icar que se trata de un botn de envo .t(peQEsubmitE/ ( emos de de!inir
62
Enviar
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 reacerlo 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 muca 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:

,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 aora a ejempli!icar todo lo aprendido a partir de la
63
Texto escrito en el botn
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

0omentarios sobre su satis!accin personal

3eseo recibir noti!icacin de las novedades en las lneas de autobuses.

,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 ecemos un
vistazo, aunque sea rpidamente.
<form action="mailtoCcolaboraDdesarrollo8eb7com" method="post" enct'pe="text/plain">
,ombre <inp"t t'pe="text" name="nombre" sie="$4" maxlength="144">
<br>
Email <inp"t t'pe="text" name="email" sie="%K" maxlength="144" &al"e="D">
<br>
#oblaci/n <inp"t t'pe="text" name="poblacion" sie="%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
Enviar formulario
Borrar todo
@
Varias veces al dia
<br>
3rec"encia de los &ia1es
<br>
<select name=""tiliacion">
<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.
G.5. 1ti,uetas 0&1LDS1$ ) L1G14D de +ormularios
Las eti"uetas de HTML 32EL'+ET $ LE1E5' siren 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
elementos se puede crear una estructura muco ms !cil de asimilar por el usuario, sobre todo si se trata de !ormularios
que tengan mucos 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 alignQrigt para que apareciera en la parte de la dereca, en lugar de la izquierda, que es
donde aparece por de!ecto.
+eamos aora 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" sie="%">
<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 marca 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
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/.
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
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 !icero #$%& 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 arcivos #$%& 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 mucas 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.
:.%. 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 ecas 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
!iceros #$%& de los que venimos aprendiendo anteriormente en este manual.
3ica 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
&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
dereca 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 anco ( la de la dereca L77. ,sto est bien si
nuestra ventana tiene J77 pi'els de anco, 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 dico 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 anco, 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 aora 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
pasaremos a la creacin de !rames en pginas web.
:.'. 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 arcivos independientes con
el nombre indicado. ,n este ejemplo, dicas pginas deberan encontrarse en el mismo directorio que la
declaracin de !rames. *i especi!icamos una ruta para acceder al arcivo 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.
:.-. 0rames ?na ./gina en cada marco
)emos cmo ser(an las distintas pginas independientes "ue componen un sitio creado con frames.
70
&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 arcivo #$%&. Para el ejemplo del
captulo anterior podemos de!inir los arcivos #$%& 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,?A8@
?Abod(@
?Atml@
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?A8@
?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(@
?Atml@
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
?Abod(@
?Atml@
Podemos ver cmo queda la pgina de !rames con estos contenidos, que simulan la pgina de una carnicera.
:.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
3ico 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 dico 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="pagina%7html" name="principal">
</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
*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>
:.>. 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 dereca.
&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">
</frameset>
</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
complicado para practicar ms con las anidaciones de !rames.

&os pasos para de!inir la anidacin se pueden encontrar a la dereca.
&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">
<frameset cols="%44,T">
<frameset ro8s="T,1K4">
</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.
:.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 dica, e'isten mucos 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
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 ancura 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 arcivo que contiene
el marco ( name, para darle un nombre al marco ( luego dirigir los enlaces acia el. +eamos aora 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.
%onseo& 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 dico 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.
:.:. <enta2as e inconvenientes del uso de +rames
)eamos una serie de cosas buenas $ malas deriadas 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 muco 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
&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 muca 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 mucos 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.
:.=. 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 mucas 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 EermanaE que es a da de
o( muco 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
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 dico 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 mucos 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 anco ( 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 ancura del recuadro del i!rame
)eig)t& Para de!inir la altura del i!rame
78
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 ( derecar 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>
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 nueas 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 bree descripcin de
cada una de ellas.
,ntre el estndar del #$%& K.9 al 6.7 se introdujeron oco 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: ancura, 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 cec> bo'es para seleccionar las opciones deseadas.
0digo: <TA@)E> <*-);5-A# span="14" 8idth="$4"> <*-);5-A# span="1" 8idth="4T"> <THEA?> <T5>777 </
TA@)E>
3e esta !orma, ?0;&C1;<P@ proporciona un !ormato ms agradable a los cec> 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 nueas 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 mucas 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 aora, no disponamos de ninguna manera de agrupar visualmente varios controles, si no ecbamos mano de
elementos que no son del !ormulario, como tablas o capas .divisiones o elementos 3)+, como pre!ieras llamarles/.
Aora, si encerramos una parte de un !ormulario dentro de la etiqueta 5),&3*,$, se mostrara un rectngulo alrededor
de los campos englobados por dica 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 rigt A top A bottomE, lo que nos permite alinear el ttulo orizontal (
verticalmente.
81
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 anco determinado, (a que si no lo acemos as, el recuadro abarcara todo el anco 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" sie="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 muco los te'tos que ponemos al lado de los campos de !ormulario no estaban asociados a dicos
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 cec>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 aora,
con la utilizacin de la etiqueta &A=,& podemos conseguir que, aciendo clic en el te'to E,sto( interesadoE, el control
cec>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 cec>bo' de !ormulario, de
manera que si pulsamos sobre E1ecibir emailE cambiar el estado del campo cec>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
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 marca, veremos que pulsando en el te'to E#ombreE se activa el botn de radio EombreE.
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 marca 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 aora 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.
Aora bien, aunque los navegadores an sido capaces de interpretar los !iceros 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
anco de banda necesario en las cone'iones a )nternet para poder descargar de !orma adecuada dicos !iceros, debido
al tama2o e'cesivo de los mismos.
;tra de las limitaciones importantes que encontramos a la ora de incluir !iceros 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 !iceros de audio en nuestras pginas debemos ser conscientes que
mucos 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 !iceros de esos tipos obligaremos al usuario a tener que instalarlos, cosa a la que suele ser reacio.
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
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 dicos 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 Yz .calidad 03/, aunque a( capturadoras de
sonido pro!esionales que llegan asta los 877 Yz, 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
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 Yz ( 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 cip
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.
1;.'. Sonido en #$ML J&&&K
*ules son los fic&eros "ue podemos ejecutar desde el naegador $ cuales desde un programa espec(fico.
1;.'.1. 0ormatos de sonido
A la ora de incluir !iceros 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 !icero.
3e !orma general, podemos incluir en la web los siguietes tipos de !iceros 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 Yz ( 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 !iceros, por lo que su uso queda limitado en )nternet a la reproduccin de ruidos o !rases
cortas. &a e'tensin de estos !iceros 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 !iceros 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 !iceros no puede almacenar sonidos reales, como voces o
m-sica rela grabadaV slo puede contener sonidos almacenables en tablas de ondas. 0omo contarpartida, los
!iceros %)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 !iceros con la e'tensin .mpK, ( permite
86
con!igurar el nivel de compresin, consiguindose calidades similares a las del !ormato 4A+, pero con asta
87 veces menos tama2o de !icero. ,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 !iceros es .mod
MNLa# 4ormat de calidad similar al !ormato 4A+, es original de las mquinas "eBt, ( guarda sus !iceros
con la e'tensin .au
1eal Audio de calidad media, aunque permite !iceros 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 mucos
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 !iceros 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 !iceros 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 !icero de sonido.
0omo ejemplo, si queremos enlazar en nuestra pgina un !icero %PK, bastara con escribir:
<a href="sonidos/mp$7mp$" target="Hblan6"> #incha a!"( para oir la m=sica7 </a>
Oue nos da:
Pinca aqu para oir la m-sica
0on esto, al pincar el usuario el enlace, se lanzar la aplicacin que tenga asociada con el tipo de !icero %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 !iceros 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 !iceros para su ejecucin automtica. ,ntre las
apliaciones posibles de ejecucin de !iceros 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.
1;.-. Sonido en #$ML J&<K
En este cap(tulo eremos la manera de incluir los arc&ios de m-sica en el HTML.
87
,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 !iceros de sonido, es ora de incluirlos en nuestra pgina web. &gicamente, para que un
!icero 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 !icero de audio en una pgina, !ormas que dependen del tipo de !icero ( 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 !icero 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 !icero en )nternet.
loopEFlF determina el n-mero de veces .l/ que se debe ejecutar el !icero de audio. *i le damos el valor
in!inite, el !icero 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 .dereco 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 mucas 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>sopAautorAdtmlAre!erenceAobjectsAbgsound.asp
1;.-.'. 1MC1D
"estcape "avigator implement la etiqueta embed para incorporar !iceros de audio. ,s sta una etiqueta de caracter
general, que se usa para la inclusin en las pginas web de todos aquellos arcivos ajenos al navegador ( que necesitan
por lo tanto la ejecucin de alg-n plugin para su interpretacin.
88
Paradjicamente, )nternet ,'plorer asumi despus el uso de esta etiqueta para la inclusin de !iceros 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
mucos 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 mucas
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 !iceros 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 !icero 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 !icero en )nternet.
loopEFl,true,falseF, que determina el n-mero de veces que se debe ejecutar el !icero 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 !icero de audio en el caso de
)nternet ,'plorer.
typeEFtipoKfic)eroF, atributo importante, que declara el tipo de !icero de audio que estamos usando, con lo
que el navegador web puede ejecutar el programa o plugin adecuado para la reproduccin del !icero. Puede
ser audioAmidi, audioAwav, etc.
autostartEFtrue,falseF, que determina si el !icero 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 !icero, 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 !icero 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 !icero, sin posibilidad de
detenerlo ni de modi!icar el volumen, ( si la mostramos estaremos incrustando en la pantalla un objeto que
mucas veces nos romper el esquema de dise2o de nuestra pgina. Oueda determinar su uso en cada caso
concreto.
#idt)EF#F, que determina el anco visible de la consola, en pi'els. eigtQEE, 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
,'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>
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 !iceros 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 !iceros. &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 !iceros de
audio de todo tipo en las pginas web.
Aora 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 !iceros de audio. Por su
lado, los navegadores "etscape no soportan correctamente este etiqueta para !iceros 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 !iceros 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 !icero, 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
necesita para su correcto !uncionamiento o para su con!iguracin deseada.
&a sinta'is general de la etiqueta object, para el caso de !iceros 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 !iceros de audio, son:
classidEFidentificadorKobetoF, que !ija la <1& del objeto o componentee'terno necesario para reproducir el
!icero de audio, ( la implementacin 0&*)3 de los controles ActiveB necesarios.
typeEFtipoKfic)eroF, atributo importante, que declara el tipo de !icero de audio que estamos usando.
#idt)EF#F, que determina el anco 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 !icero 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.
standbyEFmensaeF, que presenta en pantalla un mensaje al usuario mientras el !icero se carga.
,n cuanto a los elementos param, los ms importantes son:
param nameEF4ile/ameF valueEFrutaKfic)eroF, determina la ruta o <1& del !icero de audio a reproducir.
"o es necesario utilizar slo !iceros 4A+ o %)3, pudiendo reproducirse tambin !iceros %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 mucos 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 !icero 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 aora 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 aora cmo podemos implementar audio mediante el uso
de una de las etiquetas ms polivalentes en #$%&: la etiqueta A.
91
,!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 !iceros de audio. ,l !icero 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 !icero, 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.
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
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. 3ico 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%& *cema, 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 dico 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 cino, 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 desuso. ,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 aora 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">
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 arcivos 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
arcivo 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 arcivo 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 ( aora (a sabes que cualquier !icero in!ormtico que contiene te'to plano .arcivos .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
en caso que no lo agamos, los navegadores intentarn detectarlo automticamente. 0laro est que, si nosotros mismos
indicamos qu juego de caracteres usamos, ser muco mejor porque el navegador no tendr que deducirlo por su
cuenta ( nos aorraremos 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 EcarsetE .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 carset. <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 arcivos de te'to bajo el juego de caracteres )*;FJJMGF8, por ello, lo ms seguro es que estemos
utilizando ese carset aunque ni siquiera lo sepamos.
%ucos programas, como el =loc de "otas, no nos preguntan siquiera el juego de caracteres que queremos utilizar para
guardar el arcivo, pero a( otros editores ms avanzados que s permiten escoger el carset deseado. 3ependiendo del
programa se puede decidir ese juego de caracteres de diversas maneras. %ucos de ellos tienen cuadros de dilogo en la
opcin ECuardar comoE que inclu(en un men- para marcar el carset 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 arcivos. #a( incluso programas que son su!icientemente inteligentes para que, a vista del cdigo
#$%& ( el carset que emos de!inido en el mismo en la etiqueta %,$A, guarden por ellos mismos el arcivo 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 arcivos
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 carset ( 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 dico,
esos se soluciona simplemente especi!icando el juego de caracteres en el cdigo !uente del #$%&, en la etiqueta %,$A
para especi!icar el carset.
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 dico, 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 arcivo robots.t't.
Aora 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 arcive 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 caceadas el buscador. Para ello, en los resultados de las b-squedas aparece un enlace que pone cac. *i decimos
que no arcive 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 Iaoo.
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, arcivarla, 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
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.
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 marca, 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( mucas personas, empresas e instituciones
que tienen muco 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 $ecnolog( 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
especi!icacin del #$%& M ( a ellos debemos mucas de los avances que estn por llegar con relacin al lenguaje. ,s
una organizacin abierta, donde cualquiera puede participar libre gratuitamente. 3e eco, 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.orgAtmlA
4#A$4C
ttp:AAwww.watwg.org
_ltima versin publicada del borrador de #$%& M
ttp:AAwww.wK.orgA$1AtmlMA
=orrador del #$%& M por la 4#A$4C
ttp:AAwww.watwg.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.
11.5. Hu es #$ML 5
)eremos "u# es HTML >, su preisin de tiempo para conertirse en una especificacin recomendada $ las
noedades ms significatias "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.
Aora 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 muco 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
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 mucas 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 aprovecar
las ventajas de #$%& MP realmente no es justamente as, puesto que algunos navegadores (a implementan mucas de
las caractersticas del moderno lenguaje.
1esulta que #$%& M est !ormado por mucos mdulos distintos, cu(o grado de especi!icacin est en niveles
dispares. Por tanto, mucas 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 mucas caractersticas estn todava
simplemente en el tintero, a modo de ideas o borradores iniciales.
3e eco, 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 aora 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 aora se utilizaba una -nica etiqueta para incorporar diversos
tipos de contenido enriquecido, como animaciones 5las o vdeo. Aora 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
/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.
11.>. 4uevos elementos de +ormularios en #$ML5
*onociendo algunos de los nueos 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. *martpones, 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 aorrarse 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
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. Aora, 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 arcivos, 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 bree descripcin de las nueas 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 mucas 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 ( aora 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, mucos 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 aora, que se pueden desarrollar aplicaciones nativas para dispositivos, con a(uda de algunos
!ramewor> como $itanium o Ponegap, 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
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 !eca del conjunto de la zona oraria <$0.
I/P'T date&
Para introducir una !eca 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
0rome .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 mucas 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 placeolder 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 placeolder 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 nueas del lenguaje HTML>, con una bree descripcin sobre su utilidad $
clasificacin.
&a nueva versin del lenguaje #$%& trae consigo mucas 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
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 dicos campos. $odo eso se e'plica con detalle en el artculo &as mejoras de los elementos )"P<$ de
#$%&M.
Dibuos 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
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 mucas 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 men- de 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 !eca, 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.
107

Manual HTML Actualizado

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual HTML Actualizado

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

También podría gustarte