M a n u a l de H TM L

HTML es el lenguaj e ut ilizado com o base para crear las páginas web. En est e m anual explicam os
en profundidad cóm o ut ilizarlo, desde lo m ás básico a los t em as m ás avanzados.

Pr ólogo a l m a n u a l de H TM L

Bie n ve n idos a l m a n ua l de H TM L de D e sa r r olloW e b. A t ravés de t odos est os capít ulos vam os

a descubrir el lenguaj e ut ilizado para la creación de páginas web: el H ype r Te x t M a r k up
La ngua ge , m ás conocido com o H TM L.

Puede que en un principio, el hecho de hablar de un lenguaj e inform át ico pare los pies a m ás de
uno. No os asust éis, el HTML no dej a de ser m ás que una form a un t ant o peculiar de dar form at o
a los t ext os e im ágenes que pret endem os ver por m edio de un navegador.

Ant es de ent rar en m at eria, lo cual harem os de una form a direct a y pract ica, os r e com e nda m os
fe r vor osa m e n t e la le ct u r a pr e via de n u e st r o m a n ua l Pu blica r e n I n t e r ne t . A part ir de est a
guía, aprenderéis los concept os m ás básicos necesarios para creación de un sit io web. Tam bién os
perm it irá acceder a est e m anual con unos conocim ient os de base sobre HTML im prescindibles y os
dej ara bien claro lo que su conocim ient o aport a con respect o al sim ple uso de edit ores de HTML.

El público al que va enfocado est e m anual es a t odos aquellos que, con conocim ient os m ínim os de
inform át ica, desean hacer m undialm ent e público un m ensaj e, una idea o una inform ación usando
para ello el m edio m ás práct ico, económ ico y act ual: I nt ernet .

Lo que necesit áis com o base para llevar a buen t érm ino el aprendizaj e ( apart e de leer el m anual
Publicar en I nt ernet ) es:

•
•
Saber escribir con un t eclado

•
Saber m anej ar un rat ón
Tener ganas de aprender

Lo que obt endréis después de haber pasado por est os capít ulos:

•
•
Capacidad para crear y publicar vuest ro propio sit io web con un m ínim o de calidad
Conocim ient os de t odo t ipo sobre las t ecnologías y herram ient as em pleadas en el ám bit o

•
de la Red
Posiblem ent e una afición que puede convert irse en pasión y t erm inar, en algunos casos,
siendo un vicio o un oficio.

Os recordam os que est am os a vuest ra ent era disposición para resolveros t odo t ipo de dudas
referent es a est e m anual. Cont act arnos es t an fácil com o pinchar sobre el m ail del aut or del
art iculo ( sit uado al pie de la página) .

Tam bién podéis form ular vuest ras cuest iones y, esperam os que en un fut uro ayudar a ot ros
com pañeros, en el foro sobre HTML o bien en la list a de correo de DesarrolloWeb.

Pasem os pues sin m ás preám bulos a ver de qué se t rat a el HTML...

I n t r oducción a l H TM L
H TM L e s e l le n gua j e con e l qu e se e scr ibe n la s pá gin a s w e b. Las páginas web pueden ser
vist as por el usuario m ediant e un t ipo de aplicación llam ada navegador. Podem os decir por lo
t ant o que el HTML es el lenguaj e usado por los navegadores para m ost rar las páginas webs al
usuario, siendo hoy en día la int erface m ás ext endida en la red.

Est e lenguaj e nos perm it e aglut inar t ext os, sonidos e im ágenes y com binarlos a nuest ro gust o.
Adem ás, y es aquí donde reside su vent aj a con respect o a libros o revist as, el HTML nos perm it e
la int roducción de referencias a ot ras páginas por m edio de los enlaces hipert ext o.

El HTML se creó en un principio con obj et ivos divulgat ivos. No se pensó que la web llegara a ser
un área de ocio con caráct er m ult im edia, de m odo que, el HTML se creó sin dar respuest a a t odos
los posibles usos que se le iba a dar y a t odos los colect ivos de gent e que lo ut ilizarían en un
fut uro. Sin em bargo, pese a est a deficient e planificación, si que se han ido incorporando
m odificaciones con el t iem po, est os son los est ándares del HTML. Num erosos est ándares se han
present ado ya. El HTML 4.01 es el últ im o est ándar a sept iem bre de 2001.

Est a evolución t an anárquica del HTML ha supuest o t oda una seria de inconvenient es y
deficiencias que han debido ser superados con la int roducción de ot ras t ecnologías accesorias
capaces de organizar, opt im izar y aut om at izar el funcionam ient o de las webs. Ej em plos que
pueden sonaros son las CSS, JavaScript u ot ros. Verem os m ás adelant e en qué consist en algunas
de ellas.

Ot ros de los problem ás que han acom pañado al HTML es la diversidad de navegadores present es
en el m ercado los cuales no son capaces de int erpret ar un m ism o código de una m anera unificada.
Est o obliga al webm ást er a, una vez creada su página, com probar que est a puede ser leída
sat isfact oriam ent e por t odos los navegadores, o al m enos, los m ás ut ilizados.

Adem ás del navegador necesario para ver los result ados de nuest ro t rabaj o, necesit am os
evident em ent e ot ra herram ient a capaz de crear la página en si. Un archivo HTML ( una página) no
es m ás que un t ext o. Es por ello que para program ar en HTML necesit am os un edit or de t ext os.

Es recom endable usar el Bloc de not as que viene con windows, u ot ro edit or de t ext os sencillo.
Hay que t ener cuidado con algunos edit ores m ás com plej os com o Wordpad o Microsoft Word, pues
colocan su propio código especial al guardar las páginas y HTML es ú n ica m e nt e t e x t o pla n o,
con lo que podrem os t ener problem as.

Exist en ot ro t ipo de edit ores específicos para la creación de páginas web los cuales ofrecen
m uchas facilidades que nos perm it en aum ent ar nuest ra product ividad. No obst ant e, es
aconsej able en un principio ut ilizar una herram ient a lo m ás sencilla posible para poder prest ar la
m áxim a at ención a nuest ro código y fam iliarizarnos lo ant es posible con él. Siem pre t endrem os
t iem po m ás delant e de pasarnos a edit ores m ás versát iles con la consiguient e ganancia de
t iem po.

Para t ener m ás claro t odo el t em a de edit ores y los t ipos que exist en, visit a los art ículos:

•
•
Edit ores de HTML.

•
Bloc de not as.
Tam bién puedes acceder a descripciones edit ores m ás com plej os que el Block de Not as,
pero m ás pot ent es com o Hom esit e o Ult raEdit .

Es im port ant e t ener claro t odo ello puest o que en función de vuest ros obj et ivos puede que, m ás
que aprender HTML, result e m ás int eresant e aprender el uso de una aplicación para la creación de
páginas.

Así pues, una página es un archivo donde est á cont enido el código HTML en form a de t ext o. Est os
archivos t ienen ext ensión .ht m l o .ht m ( es indiferent e cuál ut ilizar) . De m odo que cuando
program em os en HTML lo harem os con un edit or de t ext os y guardarem os nuest ros t rabaj os con
ext ensión .ht m l, por ej em plo m ipá[Link] m l

Con se j o: Ut iliza siem pr e la m ism a ext ensión en t us ar chivos HTML. Eso evit ará que t e
confundas al escribir los nom bres de t us ar chivos unas v eces con .ht m y ot ras con .ht m l. Si
t rabaj as con un equipo en un proyect o t odavía m ás im port ant e que os pongáis t odos de
acuerdo en la ext ensión.

Sin t a x is de l H TM L

El HTML es un lenguaj e que basa su sint axis en un elem ent o de base al que llam am os et iquet a. La
et iquet a present a frecuent em ent e dos part es:

Una a pe r t u r a de form a general < et iquet a>

Un cie r r e de t ipo < / et iquet a>

Todo lo incluido en el int erior de esa et iquet a sufrirá las m odificaciones que caract erizan a est a
et iquet a. Así por ej em plo:

Las et iquet as < b> y < / b> definen un t ext o en negrit a. Si en nuest ro docum ent o HTML
escribim os una frase con el siguient e código:

< b> Est o est a en negrit a< / b>

El result ado Será:

Est o e st a e n n e gr it a

Las et iquet as < p> y < / p> definen un párrafo. Si en nuest ro docum ent o HTML
escribiéram os:

< p> Hola, est am os en el párrafo 1< / p>

< p> Ahora hem os cam biado de párrafo< / p>

El result ado sería:

Hola, est am os en el párrafo 1

Ahora hem os cam biado de párrafo

Pa r t e s de u n docu m e n t o H TM L

Adem ás de t odo est o, un docu m e n t o H TM L h a de e st a r de lim it a do por la e t iqu e t a < h t m l>

y < / h t m l> . Dent ro de est e docum ent o, podem os asim ism o dist inguir dos part es principales:

El e nca be za do, de lim it a do por < h e a d> y < / he a d> donde colocarem os et iquet as de índole
inform at ivo com o por ej em plo el t it ulo de nuest ra página.

El cue r po, fla nque a do por la s e t ique t a s < body> y < / body> , que será donde colocarem os
nuest ro t ext o e im ágenes delim it ados a su vez por ot ras et iquet as com o las que hem os vist o.
El result ado es un docum ent o con la siguient e est ruct ura:

< ht m l>

< head>
Et iquet as y cont enidos del encabezado
Dat os que no aparecen en nuest ra página pero que son im port ant es para cat alogarla: Tit ulo,
palabras clave,...
< / head>

< body>
Et iquet as y cont enidos del cuerpo
Part e del docum ent o que será m ost rada por el navegador: Text o e im ágenes
< / body>

< / ht m l>

La s m a yú scu la s o m in ú scu la s son indife r e n t e s a l e scr ibir e t ique t a s

A not ar que las et iquet as pueden ser escrit as con cualquier t ipo de com binación de m ayúsculas y
m inúsculas. < ht m l> , < HTML> o < Ht Ml> son la m ism a et iquet a. Result a sin em bargo aconsej able
acost um brarse a escribirlas en m inúscula ya que ot ras t ecnologías que pueden convivir con
nuest ro HTML ( XML por ej em plo) no son t an perm isivas y nunca viene m al coger buenas
cost um bres desde el principio para evit ar fallos t riviales en un fut uro.

Tu pr im e r a pá gin a

Podem os ya con est os conocim ient os, y alguno que ot ro m ás, crear nuest ra prim era página. Para
ello, abre t u edit or de t ext os y copia y pega el siguient e t ext o en un nuevo docum ent o.

< ht m l>

< head>
< t it le> Cocina Para Todos< / t it le>
< / head>

< body>
< p> < b> Bienvenido,< / b> < / p>
< p> Est ás en la página < b> Com ida para Todos< / b> .< / p>
< p> Aquí aprenderás recet as fáciles y deliciosas.< / p>
< / body>

< / ht m l>

Ahora guarda ese archivo con ext ensión .ht m l o .ht m en t u disco duro. Para ello accedem os al
m enú Archivo y seleccionam os la opción Guardar com o. En la vent ana elegim os el direct orio
donde deseam os guardarlo y colocarem os su nom bre, por ej em plo m i_pagina.ht m l

Con se j o: Ut iliza nom bres en t us ar chivos que t engan algunas nor m as básicas para ahor rart e disgust os y lios.

Nuest ro consej o es que no ut ilices acent os ni espacios ni ot ros caract er es r aros. Tam bién t e ayudará escribir
siem pr e las let ras en m inúsculas.

Est o no quiere decir que debes hacer nom br es de ar chivos cort os, es m ej or hacer los descript ivos para que t e
aclar en lo que hay dent ro. Algún caract er com o el guión " - " o el guión baj o " _" t e puede ayudar a separar las
palabras. Por ej em plo quienes_som [Link] m l
Con el docum ent o HTML creado, podem os ver el result ado obt enido a part ir de un navegador. Es
convenient e, llegado a est e punt o, hacer hincapié en el hecho de que no t odos los navegadores
son idént icos. Desgraciadam ent e, los result ados de nuest ro código pueden cam biar de uno a ot ro
por lo que result a aconsej able visualizar la página en varios. Generalm ent e se usan I nt ernet
Explorer y Net scape com o referencias ya que son los m ás ext endidos.

A decir verdad, en el m om ent o que est as líneas son escrit as, I nt ernet Explorer acapara la inm ensa
m ayoría de usuarios ( 90% m ás o m enos) y Net scape est a relegado a un segundo plano. Est o no
quiere decir que lo debem os dej ar t ot alm ent e de lado ya que el 10% de visit as que puede
proporcionarnos puede result ar m uy im port ant e para nosot ros. Por ot ra part e, parece que se ha
hecho publica la int ención de Net scape de desviar un poco su t em át ica de negocios hacia ot ros
derrot eros y abandonar est a llam ada " lucha de navegadores" en la cual est aba recibiendo la peor
part e.

Pues bien, volviendo al t em a, una vez creado el archivo .ht m l o .ht m , podem os visualizar el
result ado de nuest ra labor abriendo dicha página con un navegador. Para hacerlo, la form a result a
diferent e dependiendo del navegador:

Si est am os em pleando el Explorer, hem os de ir al barra de m enú, elegir Archivo y seleccionar

Abrir. Una vent ana se abrirá. Pulsam os sobre el bot ón Exam inar y accederem os a una vent ana a
part ir de la cual podrem os m overnos por el int erior de nuest ro disco duro hast a dar con el archivo
que deseam os abrir.

La cosa no result a m ás difícil para Net scape. En est e caso, nos dirigim os t am bién a la barra de
m enú principal y elegim os File y a cont inuación Open File. La m ism a vent ana de búsqueda nos
perm it irá escudriñar el cont enido de nuest ro PC hast a dar con el archivo buscado.

N ot a : Tam bién puedes abr ir el archivo si accedes al direct orio donde lo guardast e. En él podrás encont rar t u
archivo HTML y verás que t iene com o icono el logot ipo de Net scape o el de I nt ernet Ex plorer. Para abrirlo
sim plem ent e hacem os un doble click sobr e él.

Una vez abiert o el archivo podréis ver vuest ra prim era página web. Algo sencillit a pero por algo se
em pieza. Ya veréis com o en poco t iem po serem os capaces de m ej orar sensiblem ent e.

Fij aos en la part e superior izquierda de la vent ana del navegador. Podréis com probar la presencia
del t ext o delim it ado por la et iquet a < t it le> . Est a es una de las funciones de est a et iquet a, cuyo
principal com et ido es el de servir de referencia en los m ot ores de búsqueda com o Alt avist a o
Yahoo.
Por ot ro lado, los elem ent os que colocam os ent re la et iquet a < body> y < / body> se pueden ver
en el espacio reservado para el cuerpo de la página.

Se puede ver la página del ej em plo en funcionam ient o aquí.

Si ahora hacéis click con el bot ón derecho sobre la página y elegís Ver código fuent e ( o View page
source) veréis com o en una vent ana accesoria aparece el código de nuest ra página. Est e recurso
es de ext rem ada im port ancia ya que nos perm it e ver el t ipo de t écnicas em pleadas por ot ros para
la confección de sus páginas.

Con t odo est o asim ilado ya est am os en condiciones de adent rarnos un poco m ás en la descripción
de algunas de las et iquet as m ás em pleadas del HTML.

Posible pr oble m a : Al ut ilizar el Block de Not as en Windows en ocasiones, aunque le digam os que es un
archivo .ht m l, el docum ent o se guarda com o si fuera un t ext o y no una página w eb. Lo que est á pasando es
que el Block de Not as t iene pr edet erm inado guardar sus archivos con ext ensión .t xt y en realidad lo que est á
guardando en el disco duro es m i_pagina.ht m l.t x t

Para conseguir t ener el cont rol de las ex t ensiones en el block de not as y en Window s en general podem os
acceder a MI - PC y en el m enú de Ver seleccionáis " Opciones de carpet a" . En la vent ana que sale pulsam os en
la solapa " Ver" y nos perm it e deseleccionar una caj a de selección que pone algo com o " Ocult ar ex t ensiones
para los t ipos de archivos conocidos" . ( Así se hace en Win98, puede var iar un poco en ot ras versiones de
Windows.)

Con ello conseguirem os que se vea siem pr e la ext ensión del archivo con el que est am os t rabaj ando y que el
Block de Not as nos haga caso cuando le indicam os que grabe el ar chivo con ot ra ext ensión que no sea .t xt

for m a t o de pá r r a fos e n H TM L

En los capít ulos ant eriores hem os present ado a t it ulo de ej em plo algunas et iquet as que perm it en
dar form at o a nuest ro t ext o. En est e capit ulo verem os con m ás det alle las m ás am pliam ent e
ut ilizadas y ej em plificarem os algunas de ellas post eriorm ent e.

Form at ear un t ext o pasa por t areas t an evident es com o definir los párrafos, j ust ificarlos,
int roducir viñet as, num eraciones o bien poner en negrit a, it álica...

Hem os vist o que para definir los párrafos nos servim os de la et iquet a < p> que int roduce un salt o
y dej a una línea en blanco ant es de cont inuar con el rest o del docum ent o.
Podem os t am bién usar la et iquet a < br> , de la cual no exist e su cierre correspondient e ( < / br> ) ,
para realizar un sim ple ret orno de carro con lo que no dej am os una línea en blanco sino que solo
cam biam os de línea.

N ot a : Exist en ot ras et iquet as que no t ienen su correspondient e de cierr e, com o < im g> para las im ágenes, las
verem os m ás adelant e. Est o ocurre porque un salt o de línea o una im agen no em piezan y acaban m ás
adelant e sino que sólo t ienen presencia en un lugar punt ual.

Podéis com probar que cam biar de línea en nuest ro docum ent o HTML sin int roducir alguna de est as
u ot ras et iquet as no im plica en absolut o un cam bio de línea en la página visualizada. En realidad
el navegador int roducirá el t ext o y no cam biara de línea a no ser que est a llegue a su fin o bien lo
especifiquem os con la et iquet a correspondient e.

Los párrafos delim it ados por et iquet as < p> pueden ser fácilm ent e j ust ificados a la izquierda,
cent ro o derecha especificando dicha j ust ificación en el int erior de la et iquet a por m edio de un
at ribut o align. Un at ribut o no es m ás que un parám et ro incluido en el int erior de la et iquet a que
ayuda a definir el funcionam ient o de la et iquet a de una form a m ás personal. Verem os a lo largo
de est e m anual cant idad de at ribut os m uy út iles para t odo t ipo de et iquet as.

Así, si deseásem os int roducir un t e x t o a lin e a do a la izqu ie r da escribiríam os:

< p align= " left " > Text o alineado a la izquierda< / p>

El result ado seria:

Text o alineado a la izquierda

Para una j ust ifica ción a l ce n t r o:

< p align= " cent er" > Text o alineado al cent ro< / p>

que daría:

Text o alineado al cent ro

Para j u st ifica r a la de r e ch a :

< p align= " right " > Text o alineado a la derecha< / p>

cuyo efect o seria:

Text o alineado a la derecha

Com o veis, en cada caso el at ribut o align t om a det erm inados valores que son escrit os ent re
com illas. En algunas ocasiones necesit am os especificar algunos at ribut os para el correct o
funcionam ient o de la et iquet a. En ot ros casos, el propio navegador t om a un valor definido por
defect o. Para el caso de align, el valor por defect o es left .

N ot a : Los at ribut os t ienen sus valor es indicados ent r e com illas ( " ) , pero si no los indicam os ent r e com illas
t am bién funcionará en la m ay oría de los casos. Sin em bargo, es aconsej able que pongam os siem pre las
com illas para acost um brarnos a ut ilizarlas, por dar hom ogeneidad a nuest ros códigos y para evit ar errores
fut uros en sist em as m ás quisquillosos.
El at ribut o align no es exclusivo de la et iquet a < p> . Ot ras et iquet as m uy com unes, que verem os
m ás adelant e, ent re las cuales se int roducen t ext o o im ágenes, suelen hacer uso de est e at ribut o
de una form a habit ual.

I m aginem os un t ext o relat ivam ent e largo donde t odos los párrafos est án alineados a la izquierda
( por ej em plo) . Una form a de sim plificar nuest ro código y de evit ar int roducir cont inuam ent e el
at ribut o align sobre cada una de nuest ras et iquet as es ut ilizando la et iquet a < div> .

Est a et iquet a por si sola no sirve para nada. Tiene que est ar acom pañada del at ribut o align y lo
que nos perm it e es alinear cualquier elem ent o ( párrafo o im agen) de la m anera que nosot ros
deseem os.

Así, el código:

< p align= " left "> Parrafo1< / p>

< p align= " left "> Parrafo3< / p>
< p align= " left "> Parrafo2< / p>

es equivalent e a:

< div align= " left " >

< p> Parrafo1< / p>
< p> Parrafo2< / p>
< p> Parrafo3< / p>
< / div>

Com o hem os vist o, la et iquet a < div> m arca divisiones en las que definim os un m ism o t ipo de
alineado.

Ej e m plo pr á ct ico:

Para pract icar un poco lo que acabam os de ver vam os a proponer un ej ercicio que podéis resolver
en vuest ros ordenadores. Sim plem ent e querem os const ruir una página que t enga, por est e orden:

2 Párrafos cent rados

3 Párrafos alineados a la derecha
Un salt o de línea t riple
1 párrafo alineado a la izquierda

No vam os a escribir en est a ocasión el código fuent e del ej ercicio. Podem os verlo en
funcionam ient o en nuest ro navegador y en la vent ana podem os obt ener el código fuent e
seleccionando en el m enú Ver la opción Código fuent e.

Ver el ej ercicio en m archa.

Enca be za dos

Exist en ot ras et iquet as para definir párrafos especiales, form at eados com o t ít ulos. Son los
encabezados o Header en inglés. Com o decim os, son et iquet as que form at ean el t ext o com o un
t it ular, para lo cual asignan un t am año m ayor de let ra y colocan el t ext o en negrit a.

Hay varios t ipos de encabezados, que se diferencian en el t am año de la let ra que ut ilizan. La
et iquet a en concret o es la < h1> , para los encabezados m ás grandes, < h2> para los de segundo
nivel y así hast a < h6> que es el encabezado m ás pequeño.
Los encabezados im plican t am bién una separación en párrafos, así que t odo lo que escribam os
dent ro de < h1> y < / h1> ( o cualquier ot ro encabezado) se colocará en un párrafo independient e.

Podem os ver cóm o se present an algunos encabezados a cont inuación.

< h1> Encabezado de nivel 1< / h1>

Se verá de est a m anera en la página:

En ca be za do de n ive l 1
Los encabezados, com o ot ras et iquet as de HTML, soport an el at ribut o align. Vem os un ej em plo de
encabezado de nivel 2 alineado al cent ro.

< h2 align= " cent er" > Encabezado de nivel 2< / h2>

Se verá de est a m anera en la página:

En ca be za do de n ive l 2
Ot ro ej ercicio int eresant e es const ruir una página web que cont enga t odos los encabezados
posibles. Se puede ver a cont inuación.

< ht m l>

< head>
< t it le> Todos los encabezados< / t it le>
< / head>

< body>

< h1> Encabezado de nivel 1< / h1>

< h2> Encabezado de nivel 2< / h2>
< h3> Encabezado de nivel 3< / h3>
< h4> Encabezado de nivel 4< / h4>
< h5> Encabezado de nivel 5< / h5>
< h6> Encabezado de nivel 6< / h6>

< / body>

< / ht m l>

Se puede ver el ej ercicio en una página apart e.

Con se j o: No debem os ut ilizar las et iquet as de encabezado para form at ear el t ext o, es decir , si querem os
colocar un t ipo de let ra m ás grande y en negrit a debem os ut ilizar las et iquet as que exist en para ello ( que
verem os en seguida) . Los encabezados son para colocar t it ulares en páginas web y es el navegador el
responsable de form at ear el t ext o de m anera que parezca un t it ular . Cada navegador, pues, puede for m at ear
el t ext o a su gust o con t al de que parezca un t it ular.

for m a t e a n do e l t e x t o

Adem ás de t odo lo relat ivo a la organización de los párrafos, uno de los aspect os prim ordiales del
form at eo de un t ext o es el de la propia let ra. Result a m uy com ún y práct ico present ar t ext o
resalt ado en negrit a, it álica y ot ros. Paralelam ent e el uso de índices, subíndices result a vit al para
la publicación de t ext os cient &iaacut e; ficos. Todo est o y m ucho m ás es posible por m edio del
HTML a part ir de m ult it ud de et iquet as ent re las cuales vam os a dest acar algunas.

N e gr it a

Podem os escribir t ext o en negrit a incluyéndolo dent ro de las et iquet as < b> y < / b> ( bold) . Est a
m ism a t area es desem peñada por < st rong> y < / st rong> siendo am bas equivalent es. Nosot ros
nos inclinam os por la prim eras por sim ple razon de esfuerzo.

Escribiendo un código de est e t ipo:

< b> Text o en negrit a< / b>

Obt enem os est e result ado:

Te x t o e n ne gr it a

N ot a : ¿Qué diferencia hay ent re < b> y < st r ong> ?

Aunque las dos et iquet as hacen el m ism o efect o, t ienen una peculiaridad que las hace dist int as. La et iquet a
< b> indica negrit a, m ient ras que la et iquet a < st rong> indica que se debe escribir resalt ado. El HTML lo
int erpret an los navegadores según su cr it erio, es por eso que las páginas se pueden v er de dist int a m anera en
unos browsers y en ot ros. La et iquet a < H1> quier e decir " encabezado de nivel 1" , es el navegador el
responsable de form at ear el t ext o de m anera que parezca un encabezado de prim er niv el. En la práct ica los
encabezados de I nt ernet Explorer y Net scape son m uy par ecidos ( t am año de let ra grande y en negrit a) , pero
ot ro navegador podría colocar los encabezados con subray ado si le pareciese opor t uno.

La diferencia ent re < b> y < st rong> se podr á ent ender ahora. Mient ras que < b> significa sim plem ent e negrit a
y t odos los nav egadores la int erpret arán com o negr it a, < st rong> es una et iquet a que significa que se t iene
que resalt ar fuert em ent e el t ext o y cada navegador es el r esponsable de resalt ar lo com o desee. En la práct ica
< st rong> coloca el t ex t o en negrilla, pero podría ser que un navegador decidiese r esalt ar colocando negrilla,
subrayado y color roj o en el t ext o.

I t á lica

Tam bién en est e caso exist en dos posibilidades, una cort a: < i> e < / i> ( it alic) y ot ra un poco m ás
larga: < em > y < / em > . En est e m anual, y en la m ayoría de las páginas que veréis por ahí, os
encont raréis con la prim era form a sin duda m ás sencilla a escribir y a acordarse.

He aquí un ej em plo de t ext o en it álica:

< i> Text o en it álica< / i>

Que da el siguient e efect o:

Text o en it álica

Su br a ya do

El HTML nos propone t am bién para el subrayado el par de et iquet as: < u> y < / u> ( underlined) .
Sin em bargo, el uso de subrayados ha de ser aplicado con m ucha precaución dado que los enlaces
hipert ext o van, a no ser que se indique lo cont rario, subrayados con lo que podem os confundir al
lect or y apart arlo del verdadero int erés de nuest ro t ext o.

Su bín dice s y su pr a índice s

Est e t ipo de form at o result a de ext rem ada ut ilidad para t ext os cient íficos. Las et iquet as
em pleadas son:

< sup> y < / sup> para los supraíndices

< sub> y < / sub> para los subíndices

Aquí t enéis un ej em plo:

La < sup> 13< / sup> CC< sub> 3< / sub> H< sub> 4< / sub> ClNOS es un het erociclo alergeno
enriquecido

El result ado:
13
La CC3 H4 ClNOS es un het erociclo alergeno enriquecido

An ida r e t iqu e t a s

Todas est as et iquet as y por supuest o el rest o de las vist as y que verem os m ás adelant e pueden
ser anidadas unas dent ro de ot ras de m anera a conseguir result ados diferent es. Así, podem os sin
ningún problem a crear t ext o en negrit a e it álica em bebiendo una et iquet a dent ro de la ot ra:

< b> Est o sólo est á en negrit a < i> y est o en negrit a e it álica< / i> < / b>

Est o nos daria:

Est o sólo e st á a e n ne gr it a y e st o e n n e gr it a e it á lica

Con se j o: Cuando anides et iquet as HTML hazlo correct am ent e. Nos refer im os a que si abres et iquet as dent ro
de ot ra m ás pr incipal, ant es de cerrar la et iquet a pr incipal cierr es las et iquet as que hay as abiert o dent ro de
ella.

Debem os ev it ar códigos com o el siguient e:

< b> Est o est á en negrit a e < i> it álica< / b> < / i>

En favor de códigos con et iquet as correct am ent e anidadas:

< b> Est o est á en negrit a e < i> it álica< / i> < / b>

Est o es m uy aconsej able, aunque los navegadores ent iendan bien las et iquet as m al anidadas, por dos
razones:

1. Sist em as com o XML no son t an perm isivos con est os errores y puede que en el fut uro nuest ras
páginas no funcionen corr ecam ent e.
2. A los nav egadores les cuest a m ucho t iem po de procesam ient o resolver est e t ipo de errores, incluso
m ás que const ruir la propia página y debem os evit arles que sufran por una m ala codificación.

Color , t a m a ñ o y t ipo de le t r a

A pesar de que por razones de hom ogeneidad y sencillez de codigo est e t ipo de form at os son
cont rolados act ualm ent e por hoj as de est ilo en cascada ( de las cuales ya t endrem os t iem po de
hablar) , exist e una form a clásica y direct a de definir color t am año y t ipo de let ra de un t ext o
det erm inado.

Est o se hace a part ir de la et iquet a < font > y su cierre correspondient e. Dent ro de est a et iquet a
deberem os especificar los at ribut os correspondient es a cada uno de est os parám et ros que
deseam os definir. A cont inuación os com ent am os los at ribut os principales de est a et iquet a:

At r ibu t o fa ce
Define el t ipo de let ra. Est e at ribut o es int erpret ado por versiones de Net scape a part ir de la 3 y
de MSI E 3 o superiores. Ot ros navegadores las ignoran com plet am ent e y m uest ran el t ext o con la
fuent e que ut ilizan.

Hay que t ener cuidado con est e at ribut o ya que cada usuario, dependiendo de la plat aform a que
ut ilice, puede no disponer de los m ism os t ipos de let ra que nosot ros con lo que, si nosot ros
elegim os un t ipo del que no dispone, el navegador se verá forzado a m ost rar el t ext o con la fuent e
que ut iliza por defect o ( suele ser Tim es New Rom an) . Para evit ar est o, dent ro del at ribut o suelen
seleccionarse varios t ipos de let ra separados por com as. En est e caso el navegador com probará
que dispone del prim er t ipo enum erado y si no es así, pasará al segundo y así sucesivam ent e
hast a encont rar un t ipo que posea o bien acabar la list a y poner la fuent e por defect o. Veam os un
ej em plo.

< font face= " Com ic Sans MS,arial,verdana" > Est e t ext o t iene ot ra t ipografía< / font >

Que se visualizaría así en una página web.

Este texto tiene otra tipografía

N ot a : Aquí t enem os un ej em plo de at r ibut o cuyo valor debe est ar lim it ado por com illas ( " ) . Habíam os dicho
que las com illas eran opcionales en los at ribut os, sin em bargo est o no es así siem pr e. Si el valor del at ribut o
cont iene espacios, com o es el caso de:

face= " Com ic Sans MS,arial,verdana"

debem os colocar las com illas para lim it ar lo. En caso de no t ener com illas

face= Com ic Sans MS,arial,v er dana

se ent ender ía que face= Com ic, pero no se t endría en cuent a t odo lo que sigue, porque HTML no lo asociar ía al
valor del at ribut o. En est e caso HTML pensar ía que las siguient es palabras ( después del espacio) son ot ros
at ribut os, pero com o no los conoce com o at ribut os sim plem ent e los desest im ará.

At r ibu t o size

Define el t am año de la let ra. Est e t am año puede ser absolut o o relat ivo.

Si hablam os en t érm inos absolut os, exist en 7 niveles de t am año dist int os num erados de 1 a 7 por
orden crecient e. Elegirem os por t ant o un valor size= " 1" para la let ra m ás pequeña o size= " 7"
para la m ás grande.

< font size= 4> Est e t ext o es m ás grande< / font >

Que se visualizaría así en una página web.

Est e t ext o es m ás grande

Podem os asim ism o m odificar el t am año de nuest ra let ra con respect o al del t ext o m ost rado
precedent em ent e definiendo el núm ero de niveles que querem os subir o baj ar en est a escala de
t am años por m edio de un signo + o - . De est e m odo, si definim os nuest ro at ribut o com o
size= " + 1" lo que querem os decir es que aum ent am os de un nivel el t am año de la let ra. Si
est abam os escribiendo previam ent e en 3, pasarem os aut om át icam ent e a 4.
Los t am años reales que verem os en pant alla dependerán de la definición y del t am año de fuent e
elegido por el usuario en el navegador. Est e t am año de fuent e puede ser definido en el Explorer
yendo al m enu superior, Ver/ Tam año de la fuent e. En Net scape elegirem os View/ Text Size. Est a
flexibilidad puede en m ás de una ocasión result arnos em barazosa ya que en m uchos casos
desearem os que el t am año del t ext o perm anezca const ant e para que ést e quepa en un
det erm inado espacio. Verem os en su m om ent o que est a prefij ación del t am año puede ser llevada
a cabo por las hoj as de est ilo en cascada.

At r ibu t o color

El color del t ext o puede ser definido m ediant e el at ribut o color. Cada color es a su vez definido por
un núm ero hexadecim al que est a com puest o a su vez de t res part es. Cada una de est as part es
represent a la cont ribución del roj o, verde y azul al color en cuest ión.

Podéis ent ender cóm o funciona est a num eración y cuáles son los colores que result an m ás
com pat ibles a part ir de est e art ículo: Los colores y HTML.

Por ot ra part e, es posible definir de una m anera inm ediat a algunos de los colores m ás
frecuent em ent e usados para los que se ha creado un nom bre m ás m em ot écnico:

N om br e Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lim e
Maroon
Navy
Olive
Purple
Red
Silver
Teal
Whit e
Yellow

< font color= " red" > Est e t ext o est á en roj o< / font >

Que se visualizaría así en una página web.

Est e t ext o est á en roj o

Con t odo est o est am os ya en disposicion de crear un t ext o form at eado de una form a realm ent e
elaborada.

Pongam os pues en pract ica t odo lo que hem os aprendido en est os capit ulos haciendo un ej ercicio
consist ent e en una página que t enga las siguient es caract eríst icas:

•
•
Un t it ular con encabezado de nivel 1, en it álica y color verde oliva.
Un segundo t it ular con encabezado de nivel 2, t am bién de color verde oliva.
 • Todo el t ext o de la página deberá present arse con una fuent e dist int a de la fuent e por
defect o. Por ej em plo " Com ic Sans MS" y en caso de que ést a no est é en el sist em a que se
coloque la fuent e " Arial" .

Se puede ver una posible solución del ej ercicio en est e enlace. ( Ver el código fuent e de la página
para ver cóm o lo hem os resuelt o)

At r ibu t os pa r a pá gin a s

Las páginas HTML pueden const ruirse con variedad de at ribut os que le pueden dar un aspect o a la
página m uy personalizado. Podem os definir at ribut os com o el color de fondo, el color del t ext o o
de los enlaces. Est os at ribut os se definen en la et iquet a < body> y, com o decíam os son generales
a t oda la página.

Lo m ej or para explicar su funcionam ient o es verlos uno por uno.

At r ibu t os pa r a fondos

bgcolor : especificam os un color de fondo para la página. En el capít ulo ant erior y en el t aller de
los colores y HTML hem os aprendido a const ruir cualquier color, con su nom bre o su valor RGB. El
color de fondo que podem os asignar con bgcolor es un color plano, es decir el m ism o para t oda la
superficie del navegador.

ba ck gr ou nd: sirve para indicar la colocación de una im agen com o fondo de la página. La im agen
se coloca haciendo un m osaico, es decir, se repit e m uchas veces hast a ocupar t odo el espacio del
fondo de la página. En capít ulos m ás adelant e verem os com o se insert an im ágenes con HTML y
los t ipos de im ágenes que se pueden ut ilizar.

Ej e m plo de fondo

Vam os a colocar est a im agen com o fondo en la página.

La im agen se llam a fondo.j pg y suponem os que se encuent ra en el m ism o direct orio que la
página. En est e caso se colocaría la siguient e et iquet a < body>

< body background= " fondo.j pg" >

Se puede ver el efect o de colocar ese fondo en una página a part e.

Con se j o: siem pre que coloquem os una im agen de fondo, debem os poner t am bién un color de fondo cercano
al color de la im agen.

Est o se debe a que, al colocar una im agen de fondo, el t ex t o de la página debem os colocarlo en un color que
cont rast e suficient em ent e con dicho fondo. Si el v isit ant e no puede ver el fondo por cualquier cuest ión ( Por
ej em plo t ener deshabilit ada la carga de im ágenes) puede que el t ext o no cont rast e lo suficient e con el color de
fondo por defect o de la web.

Creo que lo m ej or será poner un ej em plo. Si la im agen de fondo es oscura, t endrem os que poner un t ext o
claro para que se pueda leer. Si el visit ant e que accede a la página no v e la im agen de fondo, le saldrá el
fondo por defect o, que gener alm ent e es blanco, de m odo que al t ener un t ex t o con color claro sobre un fondo
blanco, nos pasará que no podrem os leer el t ext o convenient em ent e.

Ocurre parecido cuando se est á cargando la página. Si t odavía no ha llegado a nuest ro sist em a la im agen de
 fondo, se v erá el fondo que hayam os seleccionado con bgcolor y es int eresant e que sea parecido al color de la
im agen para que se pueda leer el t ext o m ient ras se carga la im agen de fondo.

Color de l t e x t o

t e x t : est e at ribut o sirve para asignar el color del t ext o de la página. Por defect o es el negro.

Adem ás del color del t ext o, t enem os t res at ribut os para asignar el color de los enlaces de la
página. Ya debem os saber que los enlaces deben diferenciarse del rest o del t ext o de la página
para que los usuarios puedan ident ificarlos fácilm ent e. Para ello suelen aparecer subrayados y con
un color m ás vivo que el t ext o. Los t res at ribut os son los siguient es:

lin k : el color de los enlaces que no han sido visit ados. ( por defect o es azul clarit o)

vlin k : el color de los enlaces visit andos. La " v" viene j ust am ent e de la palabra visit ado. Es el color
que t endrán los enlaces que ya hem os visit ado. Por defect o su color es m orado. Est e color debería
ser un poco m enos vivo que el color de los enlaces norm ales.

a lin k : es el color de los enlaces act ivos. Un enlace est á act ivo en el preciso inst ant e que se pulsa.
A veces es difícil darse cuent a cuando un enlace est á act ivo porque en el m om ent o en el que se
act iva es porque lo est am os pulsando y en ese caso el navegador abandonará la página
rápidam ent e y no podrem os ver el enlace act ivo m ás que por unos inst ant es m ínim os.

Ej e m plo de color de l t e x t o

Vam os a ver una página donde el color de fondo sea negro, y los colores del t ext o y los enlaces
sean claros. Pondrem os el color de t ext o balnco y los enlaces am arillos, m ás resalt ados los que no
est én visit ados y m enos resalt ados lo que ya est án visit ados. Para ello escribiríam os la et iquet a
body así:

< body bgcolor= " # 000000" t ext = " # ffffff" link= " # ffff33" alink= " # ffffcc" alink= " ffff00" >

El efect o se puede ver en una página a part e.

M á r ge n e s

Con ot ros at ribut os de la et iquet a < body> se pueden asignan espacios de m argen en las páginas,
lo que es m uy út il para elim inar los m árgenes en blanco que aparecen a los lados, arriba y debaj o
de la página. Est os at ribut os son dist int os para I nt ernet Explorer y para Net scape Navigat or, por
lo que debem os ut ilizarlos t odos si querem os que t odos los navegadores los int erpret en
perfect am ent e.

le ft m a r gin: para indicar el m argen a los lados de la página. Válido para iexplorer.

t opm a r gin: para indicar el m argen arriba y debaj o de la página. Para iexplorer.

m a r ginw idt h : la cont rapart ida de left m argin para Net scape. ( Margen a los lados)

m a r ginh e igh t : igual que t opm argin, pero para Net scape. ( Margen arriba y abaj o)

Tenem os un art ículo sobre la ut ilización de est os at ribut os para hacer diseños avanzados con
t ablas en dist int as definiciones de pant alla, que puede ser int eresant e de leer.

Un ej em plo de página sin m argen es la propia página de [Link] , que est ás visit ando
act ualm ent e. ( Por lo m enos a la hora de escribir est e art ículo) Adem ás, vam os a ver ot ra página
sin m árgenes, por si alguien necesit a ver el ej em plo en est as líneas.

< body t opm argin= 0 left m argin= 0 m arginheight = 0 m arginwidt h= 0 bgcolor= " ffffff">
< t able widt h= 100% bgcolor= ff6666> < t r> < t d>
< h1> Hola am igos< / h1>
< br>
< br>
Gracias por visit arm e!
< / t d> < / t r> < / t able>
< / body>

Est a página t iene el fondo blanco y dent ro una t abla con el fondo roj o. En la página podrem os ver
que la t abla ocupa el espacio en la página sin dej ar sit io para ningún t ipo de m argen. Puede verse
el ej em plo en una página a part e.

List a s I

Las posibilidades que nos ofrece el HTML en cuest ión de t rat am ient o de t ext o son realm ent e
not ables. No se lim it an a lo vist o hast a ahora, sino que van m ás lej os t odavía. Varios ej em plos de
ello son las list as, que sirven para enum erar y definir elem ent os, los t ext os preform at eados y las
cabeceras o t ít ulos.

Las list as son ut ilizadas para cit ar, num erar y definir obj et os. Tam bién son ut ilizadas
corrient em ent e para desplazar el com ienzo de línea hacia la derecha.

Podem os dist inguir t res t ipos de list as:

•
•
List as desordenadas

•
List as ordenadas
List as de definición

Las verem os det enidam ent e una a una.

List a s de sor de n a da s

Son delim it adas por las et iquet as < ul> y < / ul> ( unordered list ) . Cada uno de los elem ent os de la
list a es cit ado por m edio de una et iquet a < li> ( sin cierre, aunque no hay inconvenient e en
colocarlo) . La cosa queda así:

< p> Países del m undo< / p>

< ul>
< li> Argent ina
< li> Perú
< li> Chile
< / ul>

El result ado:

Países del m undo

•
•
Argent ina

•
Perú
Chile
Podem os definir el t ipo de viñet a em pleada para cada elem ent o. Para ello debem os especificarlo
por m edio del at ribut o t ype incluido dent ro de la et iquet a de apert ura < ul> , si querem os que el
est ilo sea válido para t oda la list a,o dent ro le la et iquet a < li> si querem os hacerlo específico de un
solo elem ent o. La sint axis es del siguient e t ipo:

< ul t ype= " t ipo de viñet a" >

donde t ipo de viñet a puede ser uno de los siguient es:

circle
disc
square

N ot a : En algunos navegadores no funciona la opción de cam biar el t ipo de viñet a a m ost rar y por m ucho que
nos em peñem os, siem pre saldrá el redondel negro.

En caso de que no funcione siem pre podem os const ruir la list a a m ano con la viñet a que queram os ut ilizando
las t ablas de HTML. Verem os m ás adelant e cóm o t rabaj ar con t ablas.

Vam os a ver un ej em plo de list a con un cuadrado en lugar de un redondel, y en el últ im o

elem ent o colocarem os un círculo. Para ello vam os a colocar el at ribut o t ype en la et iquet a < ul> ,
con lo que afect ará a t odos los elem ent os de la list a.

< ul t ype= " square" >

< li> Elem ent o 1
< li> Elem ent o 2
< li> Elem ent o 3
< li t ype= " circle" > Elem ent o 4
< / ul>

Que t iene com o result ado

ƒ Elem ent o 1
ƒ Elem ent o 2
ƒ Elem ent o 3
o Elem ent o 4

List a s I I

Cont inuam os est udiando las list as de HTML, con las que crear est ruct uras at ract ivas para
present ar la inform ación.

List a s or de na da s

En est e caso usarem os las et iquet as < ol> ( ordered list ) y su cierre. Cada elem ent o sera
igualm ent e precedido de su et iquet a < li> .

Pongam os un ej em plo:

< p> Reglas de com port am ient o en el t rabaj o< / p>

< ol>
< li> El j efe siem pre t iene la razón
< li> En caso de duda aplicar regla 1
< / ol>
El result ado es:

Reglas de com port am ient o en el t rabaj o

1. El j efe siem pre t iene la razón

2. En caso de duda aplicar regla 1

Del m ism o m odo que para las list as desordenadas, las list as ordenadas ofrecen la posibilidad de
m odificar el est ilo. En concret o nos es posible especificar el t ipo de num eración em pleado
eligiendo ent re núm eros ( 1, 2, 3...) , let ras ( a, b, c...) y sus m ayúsculas ( A, B, C,...) y núm eros
rom anos en sus versiones m ayúsculas ( I , I I , I I I ,...) y m inúsculas ( i, ii, iii,...) .

Para realizar dicha selección hem os de ut ilizar, com o para el caso precedent e, el at ribut o t ype, el
cual será sit uado dent ro de la et iquet a < ol> . Los valores que puede t om ar el at ribut o en est e caso
son:

1 Para ordenar por núm eros

a Por let ras del alfabet o
A Por let ras m ayúsculas del alfabet o
i Ordenación por núm eros rom anos en m inúsculas
I Ordenación por núm eros rom anos en m ayúsculas

N ot a : Recordam os que en algunos navegadores no funciona la opción de cam biar el t ipo de viñet a a m ost rar

Puede que en algún caso deseem os com enzar nuest ra enum eración por un núm ero o let ra que no
t iene por qué ser necesariam ent e el prim ero de t odos. Para solvent ar est a sit uación, podem os
ut ilizar un segundo at ribut o, st art , que t endra com o valor un núm ero. Est e núm ero, que por
defect o es 1, corresponde al valor a part ir del cual com enzam os a definir nuest ra list a. Para el
caso de las let ras o los núm eros rom anos, el navegador se encarga de hacer la t raducción del
núm ero a la let ra correspondient e.

Os proponem os un ej em plo usando est e t ipo de at ribut os:

< p> Ordenam os por num eros< / p>

< ol t ype= " 1" >
< li> Elem ent o 1
< li> Elem ent o 2
< / ol>

< p> Ordenam os por let ras< / p>

< ol t ype= " a" >
< li> Elem ent o a
< li> Elem ent o b
< / ol>

< p> Ordenam os por núm eros rom anos em pezando por el 10< / p>

< ol t ype= " i" st art = " 10" >

< li> Elem ent o x
< li> Elem ent o xi
< / ol>

El result ado:
Ordenam os por núm eros

1. Elem ent o 1
2. Elem ent o 2

Ordenam os por let ras

a. Elem ent o a
b. Elem ent o b

Ordenam os por num eros rom anos em pezando por el 10

x. Elem ent o x
xi. Elem ent o xi

List a s I I I

Term inam os el t em a de list as est udiando las list as de definición. Verem os t am bién la anidación de
list as.

List a s de de finición

Cada elem ent o es present ado j unt o con su definición. La et iquet a principal es < dl> y < / dl>
( definit ion list ) . La et iquet as del elem ent o y su definición son < dt > ( definit ion t erm ) y < dd>
( definit ion definit ion) respect ivam ent e.

Aquí os proponem os un código que podrá aclarar est e sist em a:

< p> Diccionario de la Real Academ ia< / p>

< dl>
< dt > Bruj ula
< dd> Señórula m ont ada en una escóbula
< dt > Orej a
< dd> Sesent a m inut ej os
< / dl>

El efect o producido:

Diccionario de la Real Academ ia

Bruj ula
Señórula m ont ada en una escóbula
Orej a
Sesent a m inut ej os
Fij aos en que cada línea < dd> est a desplazada hacia la izquierda. Est e t ipo de et iquet as son
usadas a m enudo con el propósit o de crear t ext os m ás o m enos desplazados hacia la izquierda.

El código:

< dl>
< dd> Prim er nivel de desplazam ient o
< dl>
< dd> Segundo nivel de desplazam ient o
< dl>
 < dd> Tercer nivel de desplazam ient o
< / dl>
< / dl>
< / dl>

El result ado:

Prim er nivel de desplazam ient o

Segundo nivel de desplazam ient o
Tercer nivel de desplazam ient o

An ida ndo list a s

Nada nos im pide ut ilizar t odas est as et iquet as de form a anidada com o hem os vist o en ot ros casos.
De est a form a, podem os conseguir list as m ixt as com o por ej em plo:

< p> Ciudades del m undo< / p>

< ul>
< li> Argent ina
< ol>
< li> Buenos Aires
< li> Bariloche
< / ol>
< li> Uruguay
< ol>
< li> Mont evideo
< li> Punt a del Est e
< / ol>
< / ul>

De est a form a cream os una list a com o est a:

Ciudades del m undo

• Argent ina
1. Buenos Aires

•
2. Bariloche
Uruguay
1. Mont evideo
2. Punt a del Est e

Ca r a ct e r e s e spe cia le s

Una página web se ha de ver en paises dist int os, que usan conj unt os de caract eres dist int os. El
lenguaj e HTML nos ofrece un m ecanism o por el que podem os est ar seguros que una serie de
caract eres raros se van a ver bien en t odos los ordenadores del m undo, independient em ent e de
su j uego de caract eres.

Est e conj unt o son los caract eres especiales. Cuando querem os poner uno de est os caract eres en
una página, debem os sust it uirlo por su códico.

Por ej em plo, la "á " ( a m inúscula acent uada) se escribe "& a a cu t e ;" de m odo que la palabra
página se escribiría en una página HTML de est e m odo: p&aam p; aacut e; gina
Ca r a ct e r e s e spe cia le s bá sicos

En realidad est os caract eres se usan en HTML para no confundir un principio o final de et iquet a,
unas com illas o un & con su correspondient e caract er.

&lt ; < &gt ; >

&am p; & &quot ; "

Ca r a ct e r e s e spe cia le s de l H TM L 2 .0

&Aacut e; Á &Agrave; À
&Eacut e; É &Egrave; È
&I acut e; Í &I grave; Ì
&Oacut e; Ó &Ograve; Ò
&Uacut e; Ú &Ugrave; Ù
&aacut e; á &agrave; à
&eacut e; é &egrave; è
&iacut e; í &igrave; ì
&oacut e; ó &ograve; ò
&uacut e; ú &ugrave; ù
&Aum l; Ä &Acirc; Â
&Eum l; Ë &Ecirc; Ê
&I um l; Ï &I circ; Î
&Oum l; Ö &Ocirc; Ô
&Uum l; Ü &Ucirc; Û
&aum l; ä &acirc; â
&eum l; ë &ecirc; ê
&ium l; ï &icirc; î
&oum l; ö &ocirc; ô
&uum l; ü &ucirc; û
&At ilde; Ã &aring; å
&Nt ilde; Ñ &Aring; Å
&Ot ilde; Õ &Ccedil; Ç
&at ilde; ã &ccedil; ç
&nt ilde; ñ &Yacut e; Ý
&ot ilde; õ &yacut e; ý
&Oslash; Ø &yum l; ÿ
&oslash; ø &THORN; Þ
&ETH; Ð &t horn; þ
&et h; ð &AElig; Æ
&szlig; ß &aelig; æ
Ca r a ct e r e s e spe cia le s de l H TM L 3 .2

&frac14; ¼ &nbsp;
&frac12; ½ &iexcl; ¡
&frac34; ¾ &pound; £
&copy; © &yen; ¥
&reg; ® &sect ; §
&ordf; ª &curren; ¤
&sup2; ² &brvbar; ¦
&sup3; ³ &laquo; «
&sup1; ¹ &not ; ¬
&m acr; ¯ &shy;
&m icro; µ &ordm ; º
&para; ¶ &acut e; ´
&m iddot ; · &um l; ¨
&deg; ° &plusm n; ±
&cedil; ¸ &raquo; »
&iquest ; ¿

Ot r os ca r a ct e r e s e spe cia le s

&t im es; × &cent ; ¢

&divide; ÷ &euro; €
&# 147; “ &# 153; ™
&# 148; ” &# 137; ‰
&# 140; Œ &# 131; ƒ
&# 135; ‡ &# 134; †

En la ce s e n H TM L

Hast a aquí, hem os podido ver que una página web es un archivo HTML en el que podem os incluir,
ent re ot ras cosas, t ext os form at eados a nuest ro gust o e im ágenes ( las verem os enseguida) . Del
m ism o m odo, un sit io web podrá ser considerado com o el conj unt o de archivos, principalm ent e
páginas HTML e im ágenes, que const it uyen el cont enido al que el navegant e t iene acceso.

Sin em bargo, no podríam os hablar de navegant e o de navegación si est os archivos HTML no

est uviesen debidam ent e conect ados ent re ellos y con el ext erior de nuest ro sit io por m edio de
enlaces hipert ext o. En efect o, el at ract ivo original del HTLM radica en la posible puest a en relación
de los cont enidos de los archivos int roduciendo referencias baj o form a de enlaces que perm it an un
acceso rápido a la inform ación deseada. De poco serviría en la red t ener páginas aisladas a las
que la gent e no puede acceder y desde las que la gent e no puede salt ar a ot ras.

Un enlace puede ser fácilm ent e det ect ado en una página. Bast a con deslizar el punt ero del rat ón
sobre las im ágenes o el t ext o y ver com o cam bia de su form a original t ransform ándose por regla
general en una m ano con un dedo señalador. Adicionalm ent e, est os enlaces suelen ir, en el caso
de los t ext os, coloreados y subrayados para que el usuario no t enga dificult ad en reconocerlos. Si
no especificam os lo cont rario ( ya t endrem os ocasión de explicar com o) , est os enlaces t ext o
est arán subrayados y coloreados en azul. En el caso de las im ágenes que sirvan de enlace,
verem os que est án delim it adas por un m arco azul por defect o.

Para colocar un enlace, nos servirem os de las et iquet as < a> y < / a> . Dent ro de la et iquet a de
apert ura deberem os especificar asim ism o el dest ino del enlace. Est e dest ino será int roducido baj o
form a de at ribut o, el cual lleva por nom bre href.

La sint axis general de un enlace es por t ant o de la form a:

< a href= " dest ino" > cont enido< / a>

Siendo el cont enido un t ext o o una im agen. Es la part e de la página que se colocará act iva y
donde deberem os pulsar para acceder al enlace.

Por su part e, dest ino será una página, un correo elect rónico o un archivo.

En función del dest ino los enlaces son clásicam ent e agrupados del siguient e m odo:

•
•
En la ce s in t e r n os: los que se dirigen a ot ras part es dent ro de la m ism a página.

•
En la ce s loca le s: los que se dirigen a ot ras páginas del m ism o sit io web.

•
En la ce s r e m ot os: los dirigidos hacia páginas de ot ros sit ios web.
Enla ce s con dir e ccione s de cor r e o: para crear un m ensaj e de correo dirigido a una

•
dirección.
En la ce s con a r ch ivos: para que los usuarios puedan hacer download de ficheros.

En la ce s in t e r n os

Son los enlaces que apunt an a un lugar diferent e dent ro de la m ism a página. Est e t ipo de enlaces
son esencialm ent e ut ilizados en páginas donde el acceso a los cont enidos puede verse dificult ado
debido al gran t am año de la m ism a. Mediant e est os enlaces podem os ofrecer al visit ant e la
posibilidad de acceder rápidam ent e al principio o final de la página o bien a diferent es párrafos o
secciones.

Para crear un enlace de est e t ipo es necesario, apart e del enlace de origen propiam ent e dicho, un
segundo enlace que será colocado en el dest ino. Veam os m ás claram ent e com o funcionan est os
enlaces con un ej em plo sencillo:

Supongam os que querem os crear un enlace que apunt e al final de la Enlace con final de est e
página. Lo prim ero será colocar nuest ro enlace origen. Lo pondrem os aquí docum ent o, para que
probéis su funcionam ient o:
m ism o y lo escribirem os del siguient e m odo:
I r abaj o
< a href= " # abaj o" > I r abaj o< / a>

Com o podéis ver, el cont enido del enlace es el t exto " I r abaj o" y el dest ino, abaj o, es un punt o de
la m ism a página que t odavía no hem os definido. Oj o al sím bolo # ; es él quien especifica al
navegador que el enlace apunt a a una sección en part icular.

En segundo lugar, hay que generar un enlace en el dest ino. Est e enlace llevara por nom bre abaj o
para poder dist inguirlo de los ot ros posibles enlaces realizados dent ro de la m ism a página. En est e
caso, la et iquet a que escribirem os será ést a:
< a nam e= " abaj o" > < / a>

A decir verdad, est os enlaces, aunque út iles, no son los m ás ext endidos de cuant os hay. La
t endencia general es la de crear páginas ( archivos) independient es con t am años m ás reducidos
enlazados ent re ellos por enlaces locales ( los verem os enseguida) . De est a form a evit am os el
exceso de t iem po de carga de un archivo y la int roducción de exceso de inform ación que pueda
desviar la at ención del usuario.

Una aplicación corrient e de est os enlaces consist e en poner un pequeño índice al principio de
nuest ro docum ent o donde int roducim os enlaces origen a las diferent es secciones. Paralelam ent e,
al final de cada sección int roducim os un enlace que apunt a al índice de m anera que podam os
guiar al navegant e en la búsqueda de la inform ación út il para él.

En la ce s loca le s

Com o hem os dicho, un sit io web est a const it uido de páginas int erconexas. En el capit ulo ant erior
hem os vist o com o enlazar dist int as secciones dent ro de una m ism a página. Nos queda pues
est udiar la m anera de relacionar los dist int os docum ent os HTML que com ponen nuest ro sit io web.

Para crear est e t ipo de enlaces, hem os de crear una et iquet a de la siguient e form a:

< a href= " [Link] m l"> cont enido< / a>

Por regla general, para una m ej or organización, los sit ios suelen est ar ordenados por direct orios.
Est os direct orios suelen cont ener diferent es secciones de la página, im ágenes, sonidos...Es por
ello que en m uchos casos no nos valdrá con especificar el nom bre del archivo, sino que t endrem os
que especificar adem ás el direct orio en el que nuest ro [Link] m l est a aloj ado.

Si habéis t rabaj ado con MS- DOS no t endréis ningún problem a para com prender el m odo de
funcionam ient o. Tan solo hay que t ener cuidado en usar la barra " / " en lugar de la cont rabarra
" \ ".

Para aquellos que no saben com o m ost rar un cam ino de un archivo, aquí van una serie de
indicaciones que os ayudaran a com prender la form a de expresarlos. No result a difícil en absolut o
y con un poco de pract ica lo haréis práct icam ent e sin pensar.

1. Hay que sit uarse m ent alm ent e en el direct orio en el que se encuent ra la página con el
enlace.
2. Si la página dest ino est a en un direct orio incluido dent ro del direct orio en el que nos
encont ram os, hem os de m arcar el cam ino enum erando cada uno de los direct orios por los
que pasam os hast a llegar al archivo y separándolos por el sím bolo barra " / " . Al final
obviam ent e, escribim os el archivo.
3. Si la página dest ino se encuent ra en un direct orio que incluye el de la página con el enlace,
hem os de escribir dos punt os y una barra " ../ " t ant as veces com o niveles subam os en la
arborescencia hast a dar con el direct orio donde est a em plazado el archivo dest ino.
4. Si la página se encuent ra en ot ro direct orio no incluido ni incluyent e del archivo origen,
t endrem os que subir com o en la regla 3 por m edio de " .." hast a encont rar un direct orio
que englobe el direct orio que cont iene a la página dest ino. A cont inuación harem os com o
en la regla 2. Escribirem os t odos los direct orios por los que pasam os hast a llegar al
archivo.
 Ej e m plo:

Para clar ificar est e punt o podem os hacer un ej em plo a par t ir de la est ruct ura de
direct orios de la im agen.

Para hacer un enlace desde [Link] m l hacia [Link] m l:

< a href= " seccion1/ paginas/ y [Link] m l" > cont enido< / a>

Para hacer un enlace desde [Link] m l hacia [Link] m l:

< a href= " ../ seccion1/ paginas/ [Link] m l" > cont enido< / a>

Para hacer un enlace desde [Link] m l hacia [Link] m l:

< a href= " ../ ../ seccion2/ [Link] m l" > cont enido< / a>

Los enlaces locales pueden a su vez apunt ar ya no a la página en general sino m ás precisam ent e
a una sección concret a. Est e t ipo de enlaces result an ser un híbrido de int erno y local. La sint axis
es de est e t ipo:

< a href= " [Link] m l# seccion" > cont enido< / a>

Com o para los enlaces int ernos, en est e caso hem os de m arcar la sección con ot ro enlace del t ipo:

< a nam e= " seccion" > < / a>

Com o ej em plo, he aquí un enlace que apunt a al capit ulo ant erior al final de la página.

En la ce s e x t e r n os, de cor r e o y h a cia a r ch ivos.

Para acabar con los enlaces vam os a ver los últ im os 3 t ipos de enlaces que habíam os señalado.

En la ce s r e m ot os

Son los enlaces que se dirigen hacia páginas que se encuent ran fuera de nuest ro sit io web, es
decir, cualquier ot ro docum ent o que no form a part e de nuest ro sit io.

Est e t ipo de enlaces es m uy com ún y no represent a ninguna dificult ad. Sim plem ent e colocam os
en el at ribut o HREF de nuest ra et iquet a < A> la URL o dirección de la página con la que querem os
enlazar. Será algo parecido a est o.

< a href= " ht t p: / / [Link] [Link] " > ir a guiart [Link] < / a>

Sólo cabe dest acar que t odos las direcciones web ( URLs) em piezan por h t t p:/ / . Est o indica que el
prot ocolo por el que se accede es HTTP, el ut ilizado en la web. No debem os olvidarnos de
colocarlas, porque si no los enlaces serán t rat ados com o enlaces locales a nuest ro sit io.

Ot ra cosa int eresant e es que no t enem os que enlazar con una página web con el prot ocolo HTTP
necesariam ent e. Tam bién podem os acceder a recursos a t ravés de ot ros prot ocolos com o el FTP.
En t al caso, las direcciones de los recursos no com enzarán por ht t p: / / sino por ft p: / / .

En la ce s a dir e ccion e s de cor r e o

Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo m ensaj e de
correo elect rónico dirigido a una dirección de m ail det erm inada. Est os enlaces son m uy habit uales
en las páginas web y result an la m anera m ás rápida de ofrecer al visit ant e una vía para el
cont act o con el propiet ario de la página.

Para colocar un enlace dirigido hacia una dirección de correo colocam os m a ilt o: en el at ribut o
href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace.

< a href= " m ailt o: eugim @[Link] " > eugim @[Link] < / a>

Est e enlace se puede ver en funcionam ient o aquí: eugim @[Link]

Con se j o: Cuando coloques enlaces a direcciones de corr eo procura indicar en el cont enido del enlace ( lo que
hay ent re < A> y < / A> ) la dir ección de correo a la que se debe escr ibir . Est o es porque si un usuario no t iene
configurado un program a de correo en su or denador no podrá enviar m ensaj es, pero por lo m enos podrá
copiar la dirección de m ail y escribir el correo a t ravés de ot ro ordenador o un sist em a w eb- m ail.

Adem ás de la dirección de correo del dest inat ario, t am bién podem os colocar en el enlace el asunt o
del m ensaj e. Est o se consigue colocando después de la dirección de correo un int errogant e, la
palabra subj ect , un signo igual ( = ) y el asunt o en concret o.

< a href= " m alit o: eugim @[Link] ?subj ect = cont act o a t rav és de la pagina" > eugim @[Link] < / a>

Podem os colocar ot ros at ribut os del m ensaj e con una sint axis parecida. En est e caso indicam os
t am bién que el correo debe ir con copia a colabora@[Link] .

< a href= " m ailt o: eugim @[Link] ?subj ect = cont act o a t rav és de la
pagina&cc= colabora@desarrollow [Link] " > eugim @[Link] < / a>

N ot a : El visit ant e de la página necesit ará t ener configurada una cuent a de correo elect r ónico en su sist em a
para enviar los m ensaj es. Lógicam ent e, si no t iene servicio de correo en el ordenador no se podrán env iar los
m ensaj es y est e sist em a de cont act o con el visit ant e no funcionará.

Tenem os un ar t ículo en desar rolloweb que habla sobre el cont act o con el navegant e.

En la ce s con a r ch ivos

Est e no es un t ipo de enlace propiam ent e dicho, pero lo señalam os aquí porque son un t ipo de
enlaces m uy habit ual y que present a alguna com plicación para el usuario novat o.

El m ecanism o es el m ism o que hem os conocido en los enlaces locales y los enlaces rem ot os, con
la única part icularidad de que en vez de est ar dirigidos hacia una página web est á dirigido hacia
un archivo de ot ro t ipo.

Si querem os enlazar con un archivo m i_fichero.zip que se encuent ra en el m ism o direct orio que la
página se escribiría un enlace así.

< a href= " m i_fichero.zip" > Descarga m i_fichero.zip< / a>

Si pincham os un enlace de est e t ipo nuest ro navegador descargará el fichero, haciendo la

pregunt a t ípica de " Qué querem os hacer con el archivo. Abrirlo o guardarlo en disco" .
Podem os ver un ej em plo de enlace a archivo con su consiguient e vent ana de descarga de un
archivo.

Con se j o: No colocar en I nt er net ar chivos ej ecut ables direct am ent e sino archivos com prim idos. Por dos
razones:

1. El archivo ocupará m enos, con lo que será m ás rápida su t ransferencia.

2. Al pregunt ar al usuar io lo que desea hacer con el fichero le ofrece la opción de abrir lo y guardarlo en
disco. Nosot ros generalm ent e desearem os que el usuario lo guarde en disco y no lo ej ecut e hast a
que lo t enga en su disco dur o. Si se decido a abrirlo en vez de guardarlo sim plem ent e lo pondrá en
m archa y cuando lo pare no se quedará guardado en su sist em a. Si los ar chivos est án com prim idos
obligar em os al usuar io a descom prim ir los en su disco duro ant es de poner los en m ar cha, con lo que
nos aseguram os que el usuario lo guarde en su ordenador ant es de ej ecut arlo.

Si que r e m os e n la za r h a cia ot r o t ipo de a r ch ivo com o u n PD F o un m un do VRM L ( Realidad

virt ual para I nt ernet ) lo seguim os haciendo de la m ism a m anera. El navegador, si reconoce el t ipo
de archivo, es el responsable de abrirlo ut ilizando el conect or adecuado para ello. Así, si por
ej em plo enlazam os con un PDF pondrá el program a Acrobat Reader en funcionam ient o para
m ost rar los cont enidos. Si enlazam os con un m undo VRML pondrá en m archa el plug- in que el
usuario t enga inst alado para ver los m undos virt uales ( Cosm o Player por ej em plo) .

Est e sería un ej em plo de enlace a un docum ent o PDF.

< a href= " m i_docum ent [Link]"> Descarga el PDF< / a>

I m á ge n e s e n H TM L

Sin duda uno de los aspect os m ás vist osos y at ract ivos de las páginas web es el grafism o. La
int roducción en nuest ro t ext o de im ágenes puede ayudarnos a explicar m ás fácilm ent e nuest ra
inform ación y darle un aire m ucho m ás est ét ico. El abuso no obst ant e puede conducirnos a una
sobrecarga que se t raduce en una dist racción para el navegant e, quien t endrá m ás dificult ad en
encont rar la inform ación necesaria, y un m ayor t iem po de carga de la página lo que puede ser de
un efect o nefast o si nuest ro visit ant e no t iene una buena conexión o si es un poco im pacient e.

En est e capit ulo no explicarem os com o crear ni t rat ar las im ágenes, únicam ent e direm os que para
ello se ut ilizan aplicaciones com o Paint Shop Pro, Phot oshop o Corel Draw. Tam poco explicarem os
las part icularidades de cada t ipo de archivo GI F o JPG y la form a de opt im izar nuest ras im ágenes.
Un capit ulo post erior al respect o será dedicado a est e m enest er: Form at os gráficos para páginas
web.

Las im ágenes son alm acenadas en form a de archivos, principalm ent e GI F ( para dibuj os) o JPG
( para fot os) . Est os archivos pueden ser creados por nosot ros m ism os o pueden ser descargados
grat uit am ent e en sit ios web especializados. En desarrolloweb cont am os con la m ayor base de
dat os de gifs anim ados e im ágenes de t odo t ipo en cast ellano, que nos provee el sit io
int ernacional GOgraph.

Así pues, en est os prim eros capít ulos nos lim it arem os a explicar com o insert ar y alinear
debidam ent e en nuest ra página una im agen ya creada.

La et iquet a que ut ilizarem os para insert ar una im agen es < im g> ( im age) . Est a et iquet a no posee
su cierre correspondient e y en ella hem os de especificar obligat oriam ent e el paradero de nuest ro
archivo grafico m ediant e el at ribut o src ( source) .
La sint axis queda ent onces de la siguient e form a:

< im g src= " cam ino hacia el archivo" >

Para expresar el cam ino, lo harem os de la m ism a form a que vim os para los enlaces. Las reglas
siguen siendo las m ism ás, lo único que cam bia es que, en lugar de una página dest ino, el dest ino
es un archivo grafico.

Apart e de est e at ribut o, indispensable obviam ent e para la visualización de la im agen, la et iquet a
< im g> nos propone ot ra serie de at ribut os de m ayor o m enor ut ilidad:

At r ibu t o a lt

Dent ro de las com illas de est e at ribut o colocarem os una brevísim a descripción de la im agen. Est a
et iquet a no es indispensable pero present a varias ut ilidades.

Prim eram ent e, durant e el proceso de carga de la página, cuando la im agen no ha sido t odavía
cargada, el navegador m ost rara est a descripción, con lo que el navegant e se puede hacer una
idea de lo que va en ese lugar.

Est o no es t an t rivial si t enem os en cuent a que algunos usuarios navegan por la red con una
opción del navegador que desact iva el m uest reo de im ágenes, con lo que t ales personas podrán
siem pre saber de qué se t rat a el grafico y event ualm ent e cam biar a m odo con im ágenes para
visualizarla.

Adem ás, det erm inadas aplicaciones para discapacit ados o t eléfonos vocales que no m uest ran
im ágenes ofrecen la posibilidad de leerlas por lo que nunca est a de m ás pensar en est os
colect ivos.

En general podem os considerar com o aconsej able el uso de est e at ribut o salvo para im ágenes de
poca im port ancia y absolut am ent e indispensable si la im agen en cuest ión sirve de enlace.

At r ibu t os h e igh t y w idt h

Definen la alt ura y anchura respect ivam ent e de la im agen en pixels.

Todos los archivos gráficos poseen unas dim ensiones de ancho y alt o. Est as dim ensiones pueden
obt enerse a part ir del propio diseñador grafico o bien haciendo clic con el bot ón derecho sobre la
im agen vist a por el navegador para luego elegir propiedades sobre el m enú que se despliega.

El hecho de explicit ar en nuest ro código las dim ensiones de nuest ras im ágenes ayuda al
navegador a confeccionar la página de la form a que nosot ros deseam os ant es incluso de que las
im ágenes hayan sido descargadas.

Así, si las dim ensiones de las im ágenes han sido proporcionadas, durant e el proceso de carga, el
navegador reservara el espacio correspondient e a cada im agen creando una m aquet ación
correct a. El usuario podrá com enzar a leer t ranquilam ent e el t ext o sin que est e se m ueva de un
lado a ot ro cada vez que una im agen se cargue.

Adem ás de est a ut ilidad, el alt erar los valores de est os dos at ribut os, es una form a inm ediat a de
redim ensionar nuest ra im agen. Est e t ipo de ut ilidad no es aconsej able dado que, si lo que
pret endem os es aum ent ar el t am año, la perdida de calidad de la im agen será m uy sensible.
I nversam ent e, si deseam os dism inuir su t am año, est arem os usando un archivo m ás grande de lo
necesario para la im agen que est am os m ost rando con lo que aum ent am os el t iem po de descarga
de nuest ro docum ent o innecesariam ent e.
Es im port ant e hacer hincapié en est e punt o ya que m uchos debut ant es t ienen esa m ala
cost um bre de crear gráficos pequeños redim ensionando la im agen por m edio de est os at ribut os a
part ir de archivos de t am año descom unal. Hay que pensar que el t am año de una im agen con unas
dim ensiones de la m it ad no se reduce a la m it ad, sino que result a ser aproxim adam ent e 4 veces
inferior.

At r ibut o bor de r

Definen el t am año en pixels del cuadro que rodea la im agen.

De est a form a podem os recuadrar nuest ra im agen si lo deseam os. Es part icularm ent e út il cuando
deseam os elim inar el borde que aparece cuando la im agen sirve de enlace. En dicho caso
t endrem os que especificar border= " 0" .

At r ibut os vspa ce y hspa ce

Sirven para indicar el espacio libre, en pixeles, que t iene que colocarse ent re la im agen y los ot ros
elem ent os que la rodean, com o t ext o, ot ras im ágenes, et c.

At r ibu t o low sr c

Con est e at ribut o podem os indicar un archivo de la im agen de baj a resolución. Cuando el
navegador det ect a que la im agen t iene est e at ribut o prim ero descarga y m uest ra la im agen de
baj a resolución ( que ocupa m uy poco y que se t ransfiere m uy rápido) . Post eriorm ent e descarga y
m uest ra la im agen de resolución adecuada ( señalada con el at ribut o src, que se supone que
ocupará m ás y será m ás lent a de t ransferir) .

Est e at ribut o est á en desuso, aunque supone una vent aj a considerable para que la descarga inicial
de la web se realice m ás rápido y que un visit ant e pueda ver una m uest ra de la im agen m ient ras
se descarga la im agen real.

Tr u co: Ut iliza r im a ge n e s com o e n la ce s

Ni que decir t iene que una im agen, lo m ism o que un t ex t o, puede serv ir de enlace. Vist a la est ruct ura de los
enlaces podem os m uy fácilm ent e adivinar el t ipo de código necesar io:

< a href= " [Link] m l" > < im g src= " im [Link]" > < / a>

Ej e m plo pr á ct ico

Result ará obvio para los lect ores hacer ahora una página que cont enga una im agen varias veces
repet ida pero con dist int os at ribut os.

• Una de las veces que salga debe m ost rarse con su t am año originar y con un borde de 3

•
pixeles.
En ot ra ocasión la im agen aparecerá sin borde, con su m ism a alt ura y con una anchura

•
superior a la original
Tam bién m ost rarem os la im agen sin borde, con su m ism a anchura y con una alt ura

•
superior a la original
Por últ im o, m ost rarem os la im agen con una alt ura y anchura m ayores que las originales,
pero proporcionalm ent e igual que ant es.

Vam os a ut ilizar est a im agen para hacer el ej ercicio:

Las dim ensiones originales de la im agen son 28x21, así que est e sería el código fuent e:

< im g src= " im [Link]" w idt h= " 28" height = " 21" alt = " Tam año original" bor der= " 3" >
< br>
< br>
< im g src= " im [Link]" w idt h= " 68" height = " 21" alt = " Achat ada" border= " 0" >
< br>
< br>
< im g src= " im [Link]" w idt h= " 28" height = " 51" alt = " Alargada" border= " 0" >
< br>
< br>
< im g src= " im [Link]" w idt h= " 56" height = " 42" alt = " Doble grande" border = " 0" >

Se puede ver el ej em plo en una página apart e.

Alin e a ción de im á ge n e s con H TM L

Vim os en su m om ent o el at ribut o align que nos perm it ía alinear el t ext o a derecha, izquierda o
cent ro de nuest ra página. Dij im os que est e at ribut o no era exclusivo de la et iquet a < p> sino que
podía ser encont rado en ot ro t ipo de et iquet as.

Pues bien, < im g> result a ser una de esas et iquet as que acept an est e at ribut o aunque en est e
caso el funcionam ient o result a ser diferent e.

Para alinear una im agen horizont alm ent e podem os hacerlo de la m ism a form a que el t ext o, es
decir, ut ilizando el at ribut o align dent ro de una et iquet a < p> o < div> . En est e caso, lo que
incluirem os dent ro de esa et iquet a será la im agen en lugar del t ext o:

Est e código m ost rará la im agen en el cent ro:

< div align= " cent er" > < im g src= " [Link]" > < / div>

Quedaría así:

Sin em bargo, ya hem os dicho que la et iquet a < im g> puede acept ar el at ribut o align. En est e
caso, la ut ilidad que le dam os difiere de la ant erior.

El hecho de ut ilizar el at ribut o align dent ro de la et iquet a < im g> nos perm it e, en el caso de darle
los valores left o right , j ust ificar la im agen del lado que deseam os a la vez que rellenam os con
t ext o el lado opuest o. De est a form a em bebem os nuest ras im ágenes dent ro del t ext o de una
m anera sencilla.

Aquí podéis ver el t ipo de código a crear para obt ener dicho efect o:

< p>
< im g src= " im [Link]" align= " right " > Text o t an ext enso com o queram os que cubrirá la part e
izquierda de la im agen. Sigo poniendo t ext o para que se vea el efect o, Bla bla bla bla bla bla bla...
< / p>
 Quedaría así:

Text o t an ext enso

com o queram os que
cubrirá la part e
izquierda de la
im agen. Sigo poniendo
t ext o para que se vea el efect o, Bla bla bla
bla bla bla bla...

< p>
< im g src= " im [Link]" align= " left " > Text o t an ext enso com o queram os que cubrirá la part e
derecha de la im agen. Sigo poniendo t ext o para que se vea el efect o, Bla bla bla bla bla bla bla...
< / p>

Quedaría así:

Text o t an ext enso

com o queram os que
cubrirá la part e
izquierda de la
im agen. Sigo poniendo
t ext o para que se vea el efect o, Bla bla bla
bla bla bla bla...

Si en algún m om ent o deseásem os dej ar de rellenar ese espacio lat eral, podem os pasar a una
zona libre int roduciendo un salt o de línea < br> dent ro del cual añadirem os un at ribut o: clear

Así, et iquet as del t ipo:

< br clear= " left " >

Salt ara vert icalm ent e hast a encont rar el lat eral izquierdo libre.
< br clear= " right " >
Salt ara vert icalm ent e hast a encont rar el lat eral derecho libre.
< br clear= " all" >
Salt ará vert icalm ent e hast a encont rar am bos lat erales libres.

Ej em plo de clear:

Text o t an ext enso

com o queram os que
cubrirá la part e
izquierda.
Est o est á debaj o de la im agen.

Exist en ot ro t ipo de valores que puede adopt ar el at ribut o align dent ro de la et iquet a < im g> .
Est os son relat ivos a la alineación vert ical de la im agen.
Supongam os que escribim os una línea al lado de nuest ra im agen. Est a línea puede quedar por
ej em plo arriba, abaj o o al m edio de la im agen. Asim ism o, puede que en una m ism a línea
t engam os varias im ágenes de alt uras diferent es que pueden ser alineadas de dist int as form ás.
Est os valores adicionales del at ribut o align son:

t op
Aj ust a la im agen a la part e m ás alt a de la línea. Est o quiere decir que, si hay una im agen m ás
alt a, am bas im ágenes present aran el borde superior a la m ism a alt ura.
bot t om
Aj ust a el baj o de la im agen al t ext o.

Absbot t om
Colocara el borde inferior de la im agen a nivel del elem ent o m ás baj o de la línea.

m iddle
Hace coincidir la base de la línea de t ext o con el m edio vert ical de la im agen.

a bsm iddle
Aj ust a la im agen al m edio absolut o de la línea.

Est as explicaciones, que pueden result ar un poco com plicadas, pueden ser m ás fácilm ent e
asim iladas a part ir con un poco de pract ica.

Nos queda explicar com o int roducir debaj o de la im agen un pie de fot o o explicación. Para ello
t endrem os que ver ant es de nada las t ablas, en el próxim os capít ulos...

For m á t os gr á ficos pa r a pá gin a s w e b

El com ponent e gráfico de las páginas web t iene m ucha im port ancia, es el que hace que est as sean
vist osas y el que nos perm it e aplicar nuest ra creat ividad para hacer del diseño de sit ios una t area
agradable. Es t am bién una herram ient a para acercar los sit ios al m undo donde vivim os, si
em bargo, es t am bién el causant e de errores graves en las páginas y hacer de est as, en algunos
casos, un m art irio para el visit ant e.

Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas, aunque sea
ligeram ent e, nos ayudará a crear sit ios agradables y rápidos. No com et er errores en el uso de las
im ágenes es fundam ent al, aunque no seas un diseñador y las im ágenes que ut ilices sean feas,
ut ilízalas bien y así est arás haciendo m ás agradable la visit a a t us páginas.

Tipos de a r ch ivos

En I nt ernet se ut ilizan principalm ent e dos t ipos de archivos gráficos GI F y JPG, pensados
especialm ent e para opt im izar el t am año que ocupan en disco, ya que los archivos pequeños se
t ransm it en m ás rápidam ent e por la Red.

El form at o de archivo GI F se usa para las im ágenes que t engan dibuj os, m ient ras que el form at o
JPG se usa para las fot ografías. Los dos com prim en las im ágenes para guardarlas. La form a de
com prim ir la im agen que ut iliza cada form at o es lo que los hace ideales para unos u ot ros
propósit os.

Adicionalm ent e, se puede usar un t ercer form at o gráfico en las páginas web, el PNG. Est e form at o
no t iene t ant a acept ación com o el GI F o JPG por varias razones, ent re las que dest acan el
desconocim ient o del form at o por part e de los desarrolladores, que las herram ient as habit uales
para t rat ar gráficos ( com o por ej em plo Phot oshop) generalm ent e no lo soport an y que los
navegadores ant iguos t am bién t ienen problem as para visualizarlas. Sin em bargo, el form at o se
com port a m uy bien en cuant o a com presión y calidad del gráfico conseguido, por lo que result aría
út il si se llega a ext ender su uso.

GI F
A part e de ser un archivo ideal para las im ágenes que est én dibuj adas t iene
m uchas ot ras caract eríst icas que son im port ant es y út iles.

Com pr e sión : Es m uy buena para dibuj os, com o ya hem os dicho. I ncluso puede
ser int eresant e si la im agen es m uy pequeña, aunque sea una fot o. Un logot ipo es un
ej em plo claro de
im agen GI F
Tr a n spa r e n cia : es una ut ilidad para definir ciert as part es del dibuj o com o
t ransparent es. De est e m odo podem os colocar las im ágenes sobre dist int os fondos
sin que se vea el cuadrado donde est á inscrit o la el dibuj o, viendose en cam bio la
siluet a del dibuj o en cuest ión.
Para crear un gif t ransparent e debem os ut ilizar un program a de diseño gráfico, con
el podem os indicar qué colores del dibuj o querem os que sean t ransparent es. Part e de est a
Generalm ent e, definim os la t ransparencia cuando vam os a guardar el gráfico. im agen es
Color e s: Con est e form at o gráfico podem os ut ilizar palet as, conj unt os, de 256 t ranspar ent e
colores o m enos. Est e es un det alle m uy im port ant e, puest o que cuant os m enos
colores ut ilicem os en la im agen, por lo general, m enos ocupará el archivo. En ocasiones, aunque
ut ilicem os m enos colores en un gráfico, est e no pierde m ucho en calidad, llegando a ser
inapreciable a la vist a.
En algunos program as podem os m odificar la cant idad de colores al guardar el archivo, en ot ros lo
hacem os m ient ras cream os el gráfico.

32 colores 16 colores 8 colores

I m agen t om ada con dist int as palet as de colores. Se puede apreciar com o con pocos colores se ve bien el gráfico y com o
pierde un poco a m edida que le rest am os colores.

JPG

Veam os ahora cuales son las caract eríst icas fundam ent ales del
form at o JPG:

Com pr e sión : Tal com o hem os dicho ant eriorm ent e, su

algorit m o de com presión hace ideal est e form at o para guardar
fot ografías. Adem ás, con JPG podem os definir la calidad de la
im agen, con calidad baj a el fichero ocupará m enos, y viceversa.

Tr a n spa r e n cia : Est e form at o no t iene posibilidad de crear

áreas t ransparent es. Si deseam os colocar una im agen con un Una fot ografía con form at o JPG
área que parezca t ransparent e procederem os así: con nuest ro
program a de diseño gráfico harem os que el fondo de la im agen sea el m ism o que
I nt ent o de
el de la página donde querem os colocarla. En m uchos casos los fondos de la t ranspar encia en
im agen y la página parecerán el m ism o. JPG. Pulsar para
Color e s: JPG t rabaj a siem pre con 16 m illones de colores, ideal para fot ografías. am pliar

Opt im iza r fich e r os

Para que las im ágenes ocupen lo m enos posible y se t ransfieran rápidam ent e por la Red debem os
aprender a opt im izar los ficheros gráficos. Para ello debem os hacer lo siguient e:
Pa r a los a r ch ivos GI F: Reducirem os el núm ero de colores de nuest ra palet a. Est o se hace con
nuest ro edit or gráfico, en m uchos casos podrem os hacerlo al guardar el archivo.

GI F 256 colores - 10,8 KB

GI F 32 color es - 5,5 KB

GI F 4 colores - 2 KB

Pa r a los a r ch ivos JPG: Aj ust arem os la calidad del archivo cuando lo est em os guardando. Est e
form at o nos perm it e baj ar m ucho la calidad de la im agen sin que est a pierda m ucho en su
aspect o visual.

JPG
calidad 0
3 KB

JPG
calidad 20
5,9 KB

JPG
calidad 50
10 KB
Es im prescindible disponer para opt im izar la im agen de una
herram ient a buena que nos perm it a configurar est as
caract eríst icas de la im agen con libert ad y fácilm ent e.
Phot oshop 5.5 o 6 es un program a bast ant e recom endable,
pues incorpora una opción que se llam a " Guardar para el
Web" con la que podem os definir los colores del gif, calidad
del JPG y ot ras opciones en varias m uest ras a la vez. Así
con t odas las opciones configurables, viendo los result ados
a la vez que el t am año del archivo podem os opt im izar la
im agen de una m anera precisa con los result ados que
deseam os.

Phot oshop es una herram ient a excelent e para

Tam bién exist en en el m ercado ot ros program as que nos
opt im izar ficheros. Viendo var ias copias
perm it en opt im izar est as im ágenes de m anera podem os elegir la m ás adecuada.
sorprendent e. Una vez hem os creado la im agen la pasam os
por est os program as y nos com prim en aun m ás el archivo, haciéndolo rápido de t ransferir y, por
t ant o, m ás opt im o para I nt ernet . Al ser est as ut ilidades t an especializadas los result ados suelen
ser m ej ores que con los program as de edición gráfica.

Ej e m plos de opt im iza dor e s gr á ficos:

- WebGraphics Opt im izer
- ProJPG, GI F I m ant ion
Y con ve r sion e s On lin e :
- JPG - GI F Crunchers
- GI F Wizard

Ta bla s e n H TM L

Una t a bla e n u n con j u n t o de ce lda s or ga niza da s de nt r o de la s cu a le s pode m os a loj a r

dist in t os con t e n idos.

En un principio nos podría parecer que las t ablas son raram ent e út iles y que pueden ser ut ilizadas
principalm ent e para list ar dat os com o agendas, result ados y ot ros dat os de una form a organizada.
Nada m ás lej os de la realidad.

Hoy, gran part e de los diseñadores de páginas basan su m aquet ación en est e t ipo de art ilugios.
En efect o, una t abla nos perm it e organizar y dist ribuir los espacios de la m anera m ás opt im a. Nos
puede ayudar a generar t ext o en colum nas com o los periódicos, prefij ar los t am años ocupados por
dist int as secciones de la página o poner de una m anera sencilla un pie de fot o a una im agen.

Puede que en un principio nos result e un poco com plicado t rabaj ar con est as est ruct uras pero, si
deseam os crear una página de calidad, t arde o t em prano t endrem os que vérnoslas con ellas y nos
darem os cuent a de las posibilidades nos ofrecen.

Para em pezar, nada m ás sencillo que por el principio: las t ablas son definidas por las et iquet as
< t able> y < / t able> .

Dent ro de est as dos et iquet as colocarem os t odas las ot ras et iquet as, t ext os e im ágenes que darán
form a y cont enido a la t abla.

Las t ablas son descrit as por líneas de izquierda a derecha. Cada una de est as líneas es definida
por ot ra et iquet a y su cierre: < t r> y < / t r>

Asim ism o, dent ro de cada línea, habrá diferent es celdas. Cada una de est as celdas será definida
por ot ro par de et iquet as: < t d> y < / t d> . Dent ro de est as et iquet as será donde coloquem os
nuest ro cont enido.
Aquí t enéis un ej em plo de est ruct ura de t abla:

< t able>
< t r>
< t d> Celda 1, linea 1< / t d>
< t d> Celda 2, linea 1< / t d>
< / t r>
< t r>
< t d> Celda 1, linea 2< / t d>
< t d> Celda 2, linea 2< / t d>
< / t r>
< / t able>

El result ado:

Celda 1, linea 1 Celda 2, linea 1

Celda 1, linea 2 Celda 2, linea 2

N ot a : Hast a aquí hem os vist o t odas las et iquet as que necesit am os conocer para crear t ablas. Ex ist en ot ras
et iquet as, pero lo que podem os conseguir con éllas se puede conseguir t am bién usando las que hem os vist o.

Por poner un ej em plo, señalam os la et iquet a < t h> , que sirve para crear una celda cuyo cont enido est é
form at edo com o un t ít ulo o cabecera de la t abla. En la práct ica, lo que hace es poner en negrit a y cent r ado el
cont enido de esa celda, lo que se puede conseguir aplicando las correspondient es et iquet as dent ro de la celda.
Así:
< t d align= " cent er" > < b> cont enido de la celda< / b> < / t d> .

A part ir de est a idea sim ple y sencilla, las t ablas adquieren ot ra m agnit ud cuando les
incorporam os t oda una bat ería de at ribut os aplicados sobre cada t ipo de et iquet as que las
com ponen. A lo largo de los siguient es capít ulos nos adent rarem os en el est udio de est os
at ribut os de m anera a proporcionaros los út iles indispensables para una buena puest a en página.

Ta bla s e n H TM L. At r ibu t os pa r a fila s y ce lda s.

Hem os vist o en el capit ulo ant erior que las t ablas est án com puest as de líneas que, a su vez,
cont ienen celdas. Las celdas son delim it adas por las et iquet as < t d> o por las et iquet as < t h> ( si
querem os t ext o en negrit a y cent rado) y const it uyen un ent orno independient e del rest o del
docum ent o. Est o quiere decir que:

• Podem os usar práct icam ent e cualquier t ipo de et iquet a dent ro de la et iquet a < t d> para, de

•
est a form a, dar form a a su cont enido.

•
Las et iquet as sit uadas en el int erior de la celda no m odifican el rest o del docum ent o.
Las et iquet as de fuera de la celda no son t enidas en cuent a por ést a.

Así pues, podem os especificar el form at o de nuest ras celdas a part ir de et iquet as int roducidas en
su int erior o m ediant e at ribut os colocados dent ro de la et iquet a de celda < t d> o bien, en algunos
casos, dent ro de la et iquet a < t r> , si deseam os que el at ribut o sea valido para t oda la línea. La
form a m ás út il y act ual de dar form a a las celdas es a part ir de las hoj as de est ilo en cascada que
ya t endréis la oport unidad de abordar m ás adelant e.

Veam os a cont inuación algunos at ribut os út iles para la const rucción de nuest ras t ablas.
Em pecem os viendo at ribut os que nos perm it en m odificar una celda en concret o o t oda una línea:

a lign Just ifica el t ext o de la celda del m ism o m odo que si

 fuese el de un párrafo.
va lign Podem os elegir si querem os que el t ext o aparezca
arriba ( t op) , en el cent ro ( m iddle) o abaj o ( bot t om )
de la celda.
bgcolor Da color a la celda o línea elegida.
bor de r color Define el color del borde.

Ot ros at ribut os que pueden ser únicam ent e asignados a una celda y no al conj unt o de celdas de
una línea son:

ba ck gr ou nd Nos perm it e colocar un fondo para la celda a part ir

de un enlace a una im agen.
h e igh t Define la alt ura de la celda en pixels o porcent aj e.
w idt h Define la anchura de la celda en pixels o porcent aj e.
colspa n Expande una celda horizont alm ent e.
r ow spa n Expande una celda vert icalm ent e.

N ot a : El at r ibut o height no funciona en t odos los navegadores, adem ás, su uso no est á m uy ex t endido. Las
celdas por lo general t ienen el alt o que ncesit an para que quepa t odo el cont enido que se le haya inser t ado, es
decir, cr ecen lo suficient e para que quepa lo que hem os colocado dent ro.

El at r ibut o widt h si que funciona en t odos los navegadores y lo t endréis que ut ilizar const ant em ent e. Si le
asignam os un ancho a la celda, el ancho ser á respet ado y si dicha celda t iene m ucho t ext o o cualquier ot ro
cont enido, la celda cr ecerá hacia abaj o t odo lo necesar io para que quepa lo que hem os colocado.

Un m at iz al últ im o párafo. Se t rat a de que si definim os una celda de un ancho 100 por ej em plo, y colocam os
en la celda un cont enido com o una im agen que m ida m ás de 100 pixeles, la celda cr ecerá en horizont al t odo
lo necesario para que la im agen quepa. Si el elem ent o, aunque m ás ancho, fuera divisible ( com o un t ex t o) el
ancho sería respet ado y el t ext o crecería hacia abaj o o lo que es lo m ism o, en alt ura, com o señalábam os en el
ant er ior párrafo.

Est os últ im os cuat ro at ribut os descrit os son de gran ut ilidad. Concret am ent e, height y widt h nos
ayudan a definir las dim ensiones de nuest ras celdas de una form a absolut a ( en pixels o punt os de
pant alla) o de una form a relat iva, es decir por porcent aj es referidos al t am año t ot al de la t abla.
Podéis leer un art iculo int eresant e a propósit o de est as dos m odalidades de diseño en nuest ro
m anual de usabilidad.

A t it ulo de ej em plo:

< t d widt h= " 80">

Dará una anchura de 80 pixels a la celda. Sin em bargo,

< t d widt h= " 80% " >

Dará una anchura a la celda del 80% de la anchura de la t abla.

Hay que t ener en cuent a que, definidas las dim ensiones de las celdas, el navegador va a hacer lo
que buenam ent e pueda para sat isfacer al program ador. Est o quiere decir que puede que en
algunas ocasiones el result ado que obt engam os no sea el esperado. Concret am ent e, si el t ext o
present a una palabra excesivam ent e larga, puede que la anchura de la celda se vea aum ent ada
para m ant ener la palabra en la m ism a línea. Por ot ra part e, si el t ext o result a m uy largo, la celda
aum ent ara su alt ura para poder m ost rar t odo su cont enido.

Análogam ent e, si por ej em plo definim os dos anchuras dist int as a celdas de una m ism a colum na,
el navegador no sabrá a cual hacer caso. Es por ello que result a convenient e t ener bien claro
desde un principio com o es la t abla que querem os diseñar. No est a de m ás si la prediseñam os en
papel si la com plej idad es im port ant e. El HTML result a en general fácil pero las t ablas pueden
convert irse en un verdadero quebradero de cabeza si no llegam os a com prenderlas debidam ent e.

Los at ribut os rowspan y colspan son t am bién ut ilizados frecuent em ent e. Gracias a ellos es posible
expandir celdas fusionando ést as con sus vecinas. El valor que pueden t om ar est as et iquet as es
num érico. El núm ero represent a la cant idad de celdas fusionadas.

Así,
< t d colspan= " 2" >
Fusionara la celda en cuest ión con su vecina derecha.

Est a celda t iene un colspan= " 2"

Celda norm al Ot ra celda

Del m ism o m odo,

< t d rowspan= " 2">

Celda
Est a celda t iene rowspan= " 2",
Norm al
por eso t iene fusionada la
celda de abaj o. Ot ra celda
norm al

Expandirá la celda hacia abaj o fusionándose con la celda inferior.

El rest o de los at ribut os present ados present an una ut ilidad y uso bast ant e obvios. Los dej am os a
vuest ra propia invest igación.

Ta bla s e n H TM L. At r ibu t os de la t a bla y con clu sión .

Adem ás de los at ribut os específicos de cada celda o línea, las t ablas pueden ser adicionalm ent e
form at eadas a part ir de los at ribut os que nos ofrece la propia et iquet a < t able> . He aquí aquellos
que pueden parecernos en un principio im port ant es:

a lign Alinea horizont alm ent e la t abla con respect o a su

ent orno.
ba ck gr ou nd Nos perm it e colocar un fondo para la t abla a part ir
de un enlace a una im agen.
bgcolor Da color de fondo a la t abla.
bor de r Define el núm ero de pixels del borde principal.
bor de r color Define el color del borde.
ce llpa dding Define, en pixels, el espacio ent re los bordes de la
celda y el cont enido de la m ism a.
ce llspa cing Define el espacio ent re los bordes ( en pixels) .
h e igh t Define la alt ura de la t abla en pixels o porcent aj e.
w idt h Define la anchura de la t abla en pixels o porcent aj e.

Los at ribut os que definen las dim ensiones, height y widt h, funcionan de una m anera análoga a la
de las celdas t al y com o hem os vist o en el capit ulo ant erior. Cont rariam ent e, el at ribut o align no
nos perm it e j ust ificar el t ext o de cada una de las celdas que com ponen la t abla, sino m ás bien,
j ust ificar la propia t abla con respect o a su ent orno.

Vam os a poner t res ej em plos de alineado de t ablas, cent radas, alineadas a la derecha y a la
izquierda.

Est a t abla est á cent rada

( aling= " cent er " ) . Solo t iene una celda.
Ej e m plo de t a bla ce n t r a da Est e ser ía un t ext o cualquier a colocado al lado de una t abla
cent rada

Para que se vea el efect o

Est a t abla est á alineada a la derecha
de alineado a la t abla
( aling= " right " ) . Solo t iene una celda.
debem os colocar un
Ej e m plo de t a bla a lin e a da a la de r e cha t ext o al lado y el t ext o rodear á la t abla, igual que ocurría con las
im ágenes alineadas a un lado.

Para que se vea el efect o

Est a t abla est á alineada a la izquierda
de alineado a la t abla
( aling= " left " ) . Solo t iene una celda.
Ej e m plo de t a bla a lin e a da a la izqu ie r da debem os colocar un
t ext o al lado y el t ext o rodear á la t abla, igual que ocurría con las
im ágenes alineadas a un lado.

Los at ribut os cellpading y cellspacing nos ayudaran a dar a nuest ra t abla un aspect o m ás est ét ico.
En un principio puede parecernos un poco confuso su uso pero un poco de pract ica será suficient e
para hacerse con ellos.

En la siguient e im agen podem os ver gráficam ent e el significado de est os at ribut os.

Podéis com probar vosot ros m ism os que los at ribut os definidos para una celda t ienen prioridad con
respect o a los definidos para una t abla. Podem os definir, por ej em plo, una t abla con color de
fondo roj o y una de las celdas de color de fondo verde y se verá t oda la t abla de color roj o m enos
la celda verde. Del m ism o m odo, podem os definir un color azul para los bordes de la t abla y hacer
que una celda part icular sea m ost rada con un borde roj o. ( Aunque est o no funcionará en t odos los
navegadores debido a que algunos no reconocen el at ribut o bordercolor.

Tabla de color El at ribut o bgcolor de la

roj o de fondo t abla est á en roj o.
Est a celda est á en verde.
Celda norm al t iene el at ribut o bgcolor en
color verde

Ta bla s a n ida da s

Muy út il t am bién es el uso de t ablas anidadas. De la m ism a form a que podíam os incluir list as
dent ro de ot ras list as, las t ablas pueden ser incluidas dent ro de ot ras. Así, podem os incluir una
t abla dent ro de la celda de ot ra. El m odo de funcionam ient o sigue siendo el m ism o aunque la
sit uación puede com plicarse si el núm ero de t ablas em bebidas dent ro de ot ras es elevado.
 Con se j o: Páginas com o [Link] y m uchas ot ras ( La m ayoría de las páginas avanzadas) que basan
su diseño en t ablas, realizan anidaciones de t ablas const ant em ent e para m et er unos elem ent os de la página
dent ro de ot ros. Se pueden anidar t ablas sin lím it e, sin em bargo, en el caso de Net scape 4 hay que t ener
cuidado con el núm ero de t ablas que anidam os, porque a m edida que m et em os una t abla dent ro de ot r a y
ot ra dent ro de est a y ot ra m ás, aum ent ando el grado de anidación sucesivam ent e... podem os encont rar
problem as en su visualización y puede que la página t arde un poco de t iem po m ás en m ost rarse en pant alla.

Vam os a ver un código de anidación de t ablas. Veam os prim ero el result ado y luego el código, así
conseguirem os ent enderlo m ej or.

Tabla anidada, celda 1 Tabla anidada, celda 2

Celda de la t abla principal
Tabla anidada, celda 3 Tabla anidada, celda 4

Est e sería el código:

< t able cellspacing= " 10" cellpadding= " 10" border= " 3" >
< t r>
< t d align= " cent er" >
Celda de la t abla principal
< / t d>
< t d align= " cent er" >
< t able cellspacing= " 2" cellpadding= " 2" border= " 1" >
< t r>
< t d> Tabla anidada, celda 1< / t d>
< t d> Tabla anidada, celda 2< / t d>
< / t r>
< t r>
< t d> Tabla anidada, celda 3< / t d>
< t d> Tabla anidada, celda 4< / t d>
< / t r>
< / t able>
< / t d>
< / t r>
< / t able>

Ej e m plos pr á ct icos

Hast a aquí la inform ación que pret endíam os t ransm it iros sobre las t ablas en HTML. Sería
im port ant e ahora realizar algún ej em plo de realización de una t abla un poco com plej a. Por
ej em plo la siguient e:

An im a le s e n pe ligr o de e x t in ción
Nom bre Cabezas Previsión 2010 Previsión 2020
Ballena 6000 4000 1500
Oso Pardo 50
0
Lince 10
Tigre 300 210
Se puede ver est a t abla en ot ra vent ana, donde t am bién podrem os exam inar su código fuent e.

Ot ro ej em plo de t abla con el que podem os pract icar:

Clim a s de Am é r ica de l Su r

Part e de arriba Venezuela Part e de abaj o Argent ina

de Am érica del de Am érica del
Colom bia Chile
Sur. Países Sur. Países
com o: Ecuador com o: Uruguay
Perú Paraguay

Clim as m arít im os con

Bosque t ropical, clim a de veranos secos, con
sabana, clim a m arít im o inviernos secos, clim as
con inviernos secos. frios, clim a de est epa,
clim a desért ico.

Tam bién la podem os ver en una vent ana a part e para ext raer su código fuent e.

For m u la r ios H TM L

Hast a ahora hem os vist o la form a en la que el HTML gest iona y m uest ra la inform ación,
esencialm ent e m ediant e t ext o, im ágenes y enlaces. Nos queda por ver de qué form a podem os
int ercam biar inform ación con nuest ro visit ant e. Desde luego, est e nuevo aspect o result a
prim ordial para gran cant idad de acciones que se pueden llevar a cabo m ediant e el Web: Com prar
un art iculo, rellenar una encuest a, enviar un com ent ario al aut or...

Hem os vist o ant eriorm ent e que podíam os, m ediant e los enlaces, cont act ar direct am ent e con un
correo elect rónico. Sin em bargo, est a opción puede result ar en algunos casos poco versát il si lo
que deseam os es que el navegant e nos envíe una inform ación bien precisa. Es por ello que el
HTML propone ot ra solución m ucho m ás am plia: Los form ularios.

Los form ularios son esas fam osas caj as de t ext o y bot ones que podem os encont rar en m uchas
páginas web. Son m uy ut ilizados para realizar búsquedas o bien para int roducir dat os personales
por ej em plo en sit ios de com ercio elect rónico. Los dat os que el usuario int roduce en est os cam pos
son enviados al correo elect rónico del adm inist rador del form ulario o bien a un program a que se
encarga de procesarlo aut om át icam ent e.

Usando HTML podem os únicam ent e enviar el form ulario a un correo elect rónico. Si querem os
procesar el form ulario m ediant e un program a la cosa puede result ar un poco m ás com plej a ya que
t endrem os que em plear ot ros lenguaj es m ás sofist icados. En est e caso, la solución m ás sencilla es
ut ilizar los program ás prediseñados que nos proponen un gran núm ero de servidores de
aloj am ient o y que nos perm it en alm acenar y procesar los dat os en form a de archivos u ot ros
form at os. Si vuest ras páginas est án aloj adas en un servidor que no os propone est e t ipo de
vent aj as, siem pre podéis recurrir a servidores de t erceros que ofrecen est e u ot ro t ipo de servicios
grat uit os para webs. Por supuest o, exist e ot ra alt ernat iva que es la de aprender lenguaj es com o
ASP o PHP que nos perm it irán, ent re ot ras cosas, el t rat am ient o de form ularios.

Los form ularios son definidos por m edio de las et iquet as < form > y < / form > . Ent re est as dos
et iquet as colocarem os t odos los cam pos y bot ones que com ponen el form ulario. Dent ro de est a
et iquet a < form > debem os especificar algunos at ribut os:
a ct ion

Define el t ipo de acción a llevar a cabo con el form ulario. Com o ya hem os dicho, exist en dos
posibilidades:

•
•
El form ulario es enviado a una dirección de correo elect rónico
El form ulario es enviado a un program a o script que procesa su cont enido

En el prim er caso, el cont enido del form ulario es enviado a la dirección de correo elect rónico
especificada por m edio de una sint axis de est e t ipo:

< form act ion= " m ailt o: direccion@[Link] " ...>

Si lo que querem os es que el form ulario sea procesado por un program a, hem os de especificar la
dirección del archivo que cont iene dicho program a. La et iquet a quedaría en est e caso de la
siguient e form a:

< form act ion= " dirección del archivo" ...>

La form a en la que se expresa la localización del archivo que cont iene el program a es la m ism a
que la vist a para los enlaces.

m e t hod

Est e at ribut o se encarga de especificar la form a en la que el form ulario es enviado. Los dos
valores posibles que puede t om ar est a at ribut o son post y get . A efect os práct icos y, salvo que se
os diga lo cont rario, darem os siem pre el valor post .

e n ct ype

Se ut iliza para indicar la form a en la que viaj ará la inform ación que se m ande por el form ulario.
En el caso m ás corrient e, enviar el form ulario por correo elect rónico, el valor de est e at ribut o debe
de ser " t ext / plain" . Así conseguim os que se envíe el cont enido del form ulario com o t ext o plano
dent ro del em ail.

Si querem os que el form ulario se procese aut om át icam ent e por un program a, generalm ent e no
ut ilizarem os est e at ribut o, de m odo que t om e su valor por defect o, es decir, no incluirem os
enct ype dent ro de la et iquet a < form >

Ej e m plo de e t iqu e t a < for m > com ple t a

Así, para el caso m ás habit ual - el envío del form ulario por correo- la et iquet a de creación del
form ulario t endrá el siguient e aspect o:

< form act ion= " m ailt o: direccion@[Link] ( o nom bre del archivo de proceso) " m et hod= " post "
enct ype= " t ext / plain" >

Ent re est a et iquet a y su cierre colocarem os el rest o de et iquet as que darán form a a nuest ro
form ulario, las cuales serán vist as en capít ulos siguient es.

Re fe r e n cia : M a n da r for m u la r io por cor r e o e le ct r ón ico

Los form ularios se ut ilizan habit ualm ent e para im plem ent ar un t ipo de cont act o con el navegant e, que
 consist e en que ést e pueda m andar nos sus com ent ar ios por correo elect rónico a nuest r o buzón.

Para est e t ipo de ut ilización de los for m ularios hem os publicado hace t iem po en [Link] un art ículo
que puede result ar m uy int er esant e para los que deseen un referencia ex t rem adam ent e rápida para const r uir
un form ular io que envíe los dat os por correo elect rónico al desarrollador de la página.

El art ículo en cuest ión se llam a cont act o con el nav egant e.

Ele m e n t os de For m u la r ios. Ca m pos de t e x t o

El HTML nos propone una gran diversidad de alt ernat ivas a la hora de crear nuest ros form ularios.
Est as van desde la clásica caj a de t ext o hast a la list a de opciones pasando por las caj as de
validación.

Veam os en qué consist e cada una de est as m odalidades y com o podem os im plem ent arlas en
nuest ro form ulario.

Te x t o cor t o

Las caj as de t ext o son colocadas por m edio de la et iquet a < input > . Dent ro de est a et iquet a
hem os de especificar el valor de dos at ribut os: t ype y na m e .

La et iquet a es de la siguient e form a:

< input t ype= " t ext " nam e= " nom bre" >

De est e m odo expresam os nuest ro deseo de crear una caj a de t ext o cuyo cont enido será llam ado
nom bre ( por ej em plo) . El aspect o de est e t ipo de caj as es de sobra conocido, aquí lo podéis ver:

El nom bre del elem ent o del form ulario es de gran im port ancia para poder ident ificarlo en nuest ro
program a de procesam ient o o en el m ail recibido. Por ot ra part e, es im port ant e indicar el at ribut o
t ype, ya que, com o verem os, exist en ot ras m odalidades de form ulario que usan est a m ism a
et iquet a.

El em pleo de est as caj as est a fundam ent alm ent e dest inado a la t om a de dat os breves: palabras o
conj unt os de palabras de longit ud relat ivam ent e cort a. Verem os m ás adelant e que exist e ot ra
form a de t om ar t ext os m ás largos a part ir de ot ra et iquet a.

Adem ás de est os dos at ribut os, esenciales para el correct o funcionam ient o de nuest ra et iquet a,
exist en ot ra serie de at ribut os que pueden result arnos de ut ilidad pero que no son
im prescindibles:

size
Define el t am año de la caj a en núm ero de caract eres. Si al escribir el usuario llega al final de la
caj a, el t ext o ira desfilando a m edida que se escribe haciendo desaparecer la part e de t ext o que
queda a la izquierda.

m a x le ngt h
I ndica el t am año m áxim o del t ext o que puede ser t om ado por el form ulario. Es im port ant e no
confundirlo con el at ribut o size. Mient ras el prim ero define el t am año aparent e de la caj a de t ext o,
m axlengt h indica el t am año m áxim o real del t ext o que se puede escribir. Podem os t ener una caj a
de t ext o con un t am año aparent e ( size) que es m enor que el t am año m áxim o ( m axlengt h) . Lo
que ocurrirá en est e caso es que, al escribir, el t ext o ira desfilando dent ro de la caj a hast a que
lleguem os a su t am año m áxim o definido por m axlengt h, m om ent o en el cual nos será im posible
cont inuar escribiendo.

va lu e
En algunos casos puede result arnos int eresant e asignar un valor definido al cam po en cuest ión.
Est o puede ayudar al usuario a rellenar m ás rápidam ent e el form ulario o darle alguna idea sobre
la nat uraleza de dat os que se requieren. Est e valor inicial del cam po puede ser expresado
m ediant e el at ribut o value. Veam os su efect o con un ej em plo sencillo:

< input t ype= " t ext " nam e= " nom bre" value= " Perico Palot es" >

Genera un cam po de est e t ipo:

Perico Palote

N ot a : e st a m os obliga dos a u t iliza r la e t iqu e t a < for m >

Aunque de lo que se lee en est os capít ulos sobre form ularios se puede ent ender bien est o, hem os querido
rem arcarlo par a que quede m uy claro: Cuando querem os ut ilizar en cualquer sit uación elem ent os de
form ular io debem os escribirlos siem pre ent r e las et iquet as < form > y < / form > . De lo cont rario, los elem ent os
se verán perfect am ent e en Explorer pero no en Net scape.

Dicho de ot ra form a, en Net scape no se visualizan los elem ent os de form ulario a no ser que est en colocados
ent r e las correspondient es et iquet as de inicio y fin de form ular io.

Es por ello que para m ost rar un cam po de t ext o no vale con poner la et iquet a < input > , sino que habrá que
ponerla dent ro de un form ulario. Así:

< form >

< input t ype= " t ext " nam e= " nom bre" value= " Per ico Palot es" >
< / form >

Verem os post eriorm ent e que est e at ribut o puede result ar relevant e en det erm inadas sit uaciones.

Te x t o ocu lt o

Podem os esconder el t ext o escrit o por m edio ast eriscos de m anera a aport ar una ciert a
confidencialidad. Est e t ipo de cam pos son análogos a los de t ext o con una sola diferencia:
rem plazam os el at ribut o t ype= "t ext " por t ype= " password" :

< input t ype= " password" nam e= " nom bre" >

En est e caso, podéis com probar que al escribir dent ro del cam po en lugar de t ext o veréis
ast eriscos.

Est os cam pos son ideales para la int roducción de dat os confidenciales, principalm ent e códigos de
acceso. Se ve en funcionam ient o a cont inuación.

Te x t o la r go
Si deseam os poner a la disposición de usuario un cam po de t ext o donde pueda escribir
cóm odam ent e sobre un espacio com puest o de varias líneas, hem os de invocar una nueva
et iquet a: < t ext area> y su cierre correspondient e.

Est e t ipo de cam pos son práct icos cuando el cont enido a enviar no es un nom bre t eléfono o
cualquier ot ro dat o breve, sino m ás bien, un com ent ario, opinión, et c.

Dent ro de la et iquet a t ext area deberem os indicar, com o para el caso vist o ant eriorm ent e, el
at ribut o nam e para asociar el cont enido a un nom bre que será asem ej ado a una variable en los
program ás de proceso. Adem ás, podem os definir las dim ensiones del cam po a part ir de los
at ribut os siguient es:

r ow s
Define el núm ero de líneas del cam po de t ext o.

cols
Define el núm ero de colum nas del cam po de t ext o.

La et iquet a queda por t ant o de est a form a:

< t ext area nam e= " com ent ario" rows= " 10" cols= " 40" > < / t ext area>

El result ado es el siguient e:

Asim ism o, es posible predefinir el cont enido del cam po. Para ello, no usarem os el at ribut o value
sino que escribirem os dent ro de la et iquet a el cont enido que deseam os at ribuirle. Veám oslo:

< t ext area nam e= " com ent ario" rows= " 10" cols= "40" > Escribe t u com ent ario....< / t ext area>

Dará com o result ado:

Escribe tu comentario....
Ot r os e le m e n t os de for m u la r io

Efect ivam ent e, los t ext os son un m anera m uy pract ica de hacernos llegar la inform ación del
navegant e. No obst ant e, en m uchos casos, los t ext os son difícilm ent e adapt ables a program ás
que puedan procesarlos debidam ent e o bien, puede que su cont enido no se aj ust e al t ipo de
inform ación que requerim os. Es por ello que, en det erm inados casos, puede result ar m ás efect ivo
proponer una elección al navegant e a part ir del plant eam ient o de una serie de opciones.

Est e es el caso de, por ej em plo, ofrecer una list a de países, el t ipo de t arj et a de crédit o para un
pago,...

Est e t ipo de opciones pueden ser expresadas de diferent es form ás. Veam os a cont inuación cuales
son:

List a s de opcione s

Las list as de opciones son ese t ipo de m enús desplegables que nos perm it en elegir una ( o varias)
de las m últ iples opciones que nos proponen. Para const ruirlas em plearem os una et iquet a con su
respect ivo cierre: < select >

Com o para los casos ya vist os, dent ro de est a et iquet a definirem os su nom bre por m edio del
at ribut o nam e. Cada opción será incluida en una línea precedida de la et iquet a < opt ion> .

Podem os ver, a part ir de est as direct ivas, la form a m ás t ípica y sencilla de est a et iquet a:

< select nam e= " est acion" >

< opt ion> Prim avera< / opt ion>
< opt ion> Verano< / opt ion>
< opt ion> Ot oño< / opt ion>
< opt ion> I nvierno< / opt ion>
< / select >

El result ado es:

Primavera

Est a est ruct ura puede verse m odificada principalm ent e a part ir de ot ros dos at ribut os:

size
I ndica el núm ero de valores m ostrados de la list a. El rest o pueden ser vist os por m edio de la
barra lat eral de desplazam ient o.

m u lt iple
Perm it e la selección de m ás varios elem ent os de la list a. La elección de m ás de un elem ent o se
hace com o con el explorador de Windows, a part ir de las t eclas ct rl o shift . Est e at ribut o se
expresa sin valor alguno, es decir, no se ut iliza con el igual: sim plem ent e se pone para conseguir
el efect o, o no se pone si querem os una list a desplegable com ún.

Con se j o: Si e s posible , n o u se s m u lt iple

No recom endam os especialm ent e la puest a en pract ica de est a opción ya que el m anej o de las t eclas ct rl o
shift para elegir varias opciones puede ser desconocido par a el nav egant e. Evident em ent e, siem pre cabe la
posibilidad de explicar le com o funciona aunque no dej ara de ser una com plicación par a m ás para el visit ant e.
Veam os cual es el efect o producido por est os dos at ribut os cam biando la línea:
< select nam e= " est acion" >

por:
< select nam e= " est acion" size= " 3" m ult iple>

La list a quedara de est a form a:

Primavera
Verano
Otoño

La et iquet a < opt ion> puede asim ism o ser m at izada por m edio de ot r os a t r ibu t os

se le ct e d
Del m ism o m odo que m ult iple, est e at ribut o no t om a ningún valor sino que sim plem ent e indica
que la opción que lo present a est a elegida por defect o.

Así, si cam biam os la línea del código ant erior:

< opt ion> Ot oño< / opt ion>

por:
< opt ion select ed> Ot oño< / opt ion>

El result ado será:

Otoño

va lu e
Define el valor de la opción que será enviado al program a o correo elect rónico si el usuario elige
esa opción. Est e at ribut o puede result ar m uy út il si el form ulario es enviado a un program a puest o
que a cada opción se le puede asociar un núm ero o let ra, lo cual es m ás fácilm ent e m anipulable
que una palabra o t ext o. podríam os así escribir líneas del t ipo:

< opt ion value= " 1" > Prim avera< / opt ion>

De est e m odo, si el usuario elige prim avera, lo que le llegara al program a ( o correo) es una
variable llam ada est acion que t endrá com valor 1. En el correo elect rónico recibiríam os:

est acion= 1

Bot on e s de r a dio

Exist e ot ra alt ernat iva para plant ear una elección, en est e caso, obligam os al int ernaut a a elegir
únicam ent e una de las opciones que se le proponen.

La et iquet a em pleada en est e caso es < input > en la cual t endrem os el at ribut o t ype ha de t om ar
el valor radio. Veam os un ej em plo:

< input t ype= " radio" nam e= " est acion" value= " 1" > Prim avera
< br>
< input t ype= " radio" nam e= " est acion" value= " 2" > Verano
< br>
< input t ype= " radio" nam e= " est acion" value= " 3" > Ot oño
< br>
< input t ype= " radio" nam e= " est acion" value= " 4" > I nvierno

N ot a : Hay que fij arse que la et iquet a < input t ype= " radio" > sólo coloca la casilla pinchable en la página. Los
t ext os que aparecen al lado, así com o los salt os de línea los colocam os con el correspondient e t ext o en el
código de la página y las et iquet as HTML que necesit em os.

El result ado es el siguient e:

Prim avera

Verano

Ot oño

I nvierno

Com o puede verse, a cada una de las opciones se le at ribuye una et iquet a input dent ro de la cual
asignam os el m ism o nom bre ( nam e) para t odas las opciones y un valor ( value) dist int o. Si el
usuario elige supuest am ent e Ot oño, recibirem os en nuest ro correo una línea t al que est a:

est acion= 3

Cabe señalar que es posible preseleccionar por defect o una de las opciones. Est o puede ser
conseguido por m edio del at ribut o che ck e d:

< input t ype= " radio" nam e= " est acion" value= " 2" checked> Verano

Veam os el efect o:

Prim avera

Verano

Ot oño

I nvierno

Ca j a s de va lida ción

Est e t ipo de elem ent os pueden ser act ivados o desact ivados por el visit ant e por un sim ple clic
sobre la caj a en cuest ión. La sint axis ut ilizada es m uy sim ilar a las vist as ant eriorm ent e:

< input t ype= " checkbox" nam e= " paella" > Me gust a la paella

El efect o:

Me gust a la paella

La única diferencia fundam ent al es el valor adopt ado por el at ribut o t ype.

Del m ism o m odo que para los bot ones de radio, podem os act ivar la caj a por m edio del at ribut o
ch e ck e d.
El t ipo de inform ación que llegara a nuest ro correo ( o al program a) será del t ipo:

paella= on ( u off dependiendo si ha sido act ivada o no)

En vio, bor r a do y de m á s e n for m u la r ios H TM L

Los form ularios han de dar plaza no solam ent e a la inform ación a t om ar del usuario sino t am bién
a ot ra serie de funciones. Concret am ent e, han de perm it irnos su envío m ediant e un bot ón.
Tam bién puede result ar práct ico poder proponer un bot ón de borrado o bien acom pañarlo de
dat os ocult os que puedan ayudarnos en su procesam ient o.

En est e capit ulo, para t erm inar la saga de form ularios, darem os a conocer los m edios de inst alar
t odas est as funciones.

bot ón de e n vío

Para dar por finalizado el proceso de relleno del form ulario y hacerlo llegar a su gest or, el
navegant e ha de validarlo por m edio de un bot ón previst o a t al efect o. La const rucción de dicho
bot ón no revist e ninguna dificult ad una vez fam iliarizados con las et iquet as input ya vist as:

< input t ype= " subm it " value= " Enviar" >

Con est e código generam os un bot ón com o est e:

Enviar

Com o puede verse, t an solo hem os de especificar que se t rat a de un bot ón de envío
( t ype= " subm it " ) y hem os de definir el m ensaj e del bot ón por m edio del at ribut o value.

bot ón de bor r a do

Est e bot ón nos perm it irá borrar el form ulario por com plet o en el caso de que el usuario desee
rehacerlo desde el principio. Su est ruct ura sint áct ica es análoga a la ant erior:

< input t ype= " reset " value= " Borrar" >

A diferencia del bot ón de envío, indispensable en cualquier form ulario, el bot ón de borrado result a
m eram ent e opt at ivo y no es ut ilizado frecuent em ent e. Hay que t ener cuidado de no ponerlo m uy
cerca del bot ón de envío y de dist inguir claram ent e el uno del ot ro.

D a t os ocu lt os

En algunos casos, apart e de los propios dat os enviados por el usuario, puede result ar práct ico
enviar dat os definidos por nosot ros m ism os que ayuden al program a en su procesam ient o del
form ulario. Est e t ipo de dat os, que no se m uest ran en la página pero si pueden ser det ect ados
solicit ando el código fuent e, no son frecuent em ent e ut ilizados por páginas const ruidas en HTML,
son m ás bien usados por páginas que em plean t ecnologías de servidor. No os asust éis, verem os
m ás adelant e qué quiere decir est o. Tan solo querem os dar const ancia de su exist encia y de su
m odo creación. He aquí un ej em plo:

< input t ype= hidden nam e= " sit io" value= " [Link] " >
Est a et iquet a, incluida dent ro de nuest ro form ulario, enviara un dat o adicional al correo o
program a encargado de la gest ión del form ulario. podríam os, a part ir de est e dat o, dar a conocer
al program a el origen del form ulario o algún t ipo de acción a llevar a cabo ( una redirección por
ej em plo) .

Bot one s nor m a le s

Dent ro de los form ularios t am bién podem os colocar bot ones norm ales, pulsables com o cualquier
ot ro bot ón. I gual que ocurre con los cam pos hidden, est os bot ones por si solos no t ienen m ucha
ut ilidad pero podrem os necesit arlos para realizar acciones en el fut uro. Su sint axis es la siguient e.

< input t ype= but t on value= " Text o escrit o en el bot ón" >

Quedaría de est a m anera:

El uso m ás frecuent e de un bot ón es en la program ación en el client e. Ut ilizando lenguaj es com o

Javascript podem os definir acciones a t om ar cuando un visit ant e pulse el bot ón de una página
web.

Ej e m plo de for m u la r io

Con est e capit ulo finalizam os nuest ro t em a de form ularios. Pasem os ahora a ej em plificar t odo lo
aprendido a part ir de la creación de un form ulario que consult a el grado de sat isfacción de los
usuarios de una línea de aut obuses fict icia. El form ulario est á const ruido para que envíe los dat os
por correo elect rónico a un buzón det erm inado.

Vem os el form ulario en est a página. Vosot ros t rat ar de const ruirlo para ver si habéis ent endido
bien los t em as sobre form ularios.

Nom bre
@
Em ail

Población
Sexo

Hom bre

Muj er

Frecuencia de los viaj es

Varias veces al dia

Com ent arios sobre su sat isfacción personal

Deseo recibir not ificación de las novedades en las líneas de aut obuses.
 Enviar formulario

Borrar todo

El form ulario se puede ver t am bién en una página a part e. Recordad que podéis ver el código
fuent e de cualquier página web ut ilizando los m enús de vuest ro navegador, así podréis revisar el
código que hem os ut ilizado para const ruir el form ulario.

A cont inuación t am bién m ost rarem os el código fuent e de est e form ulario, que es im port ant e que
t odos le echem os un vist azo, aunque sea rápidam ent e.

< form act ion= " m ailt o: colabora@[Link] " m et hod= " post " enct ype= " t ext / plain" >
Nom br e < input t ype= " t ext " nam e= " nom bre" size= " 30" m axlengt h= " 100" >
< br>
Em ail < input t ype= " t ext " nam e= " em ail" size= " 25" m ax lengt h= " 100" value= " @" >
< br>
Población < input t ype= " t ext " nam e= " poblacion" size= " 20" m axlengt h= " 60" >
< br>
Sexo
< br>
< input t ype= " r adio" nam e= " sexo" value= " Varon" checked> Hom bre
< br>
< input t ype= " r adio" nam e= " sexo" value= " Hem bra" > Muj er
< br>
< br>
Frecuencia de los viaj es
< br>
< select nam e= " ut ilizacion" >
< opt ion value= " 1" > Var ias veces al dia
< opt ion value= " 2" > Una v ez al dia
< opt ion value= " 3" > Var ias veces a la sem ana
< opt ion value= " 4" > var ias veces al m es
< / select >
< br>
< br>
Com ent ar ios sobre su sat isfacción per sonal
< br>
< t ex t area cols= " 30" rows= " 7" nam e= " com ent arios" > < / t ex t area>
< br>
< br>
< input t ype= " checkbox" nam e= " r ecibir_info" checked>
Deseo recibir not ificación de las novedades en las líneas de aut obuses.
< br>
< br>
< input t ype= " subm it " value= " Enviar form ular io" >
< br>
< br>
< input t ype= " Reset " value= " Borrar t odo" >
< / form >

Para acabar, vam os a ver lo que recibirían por correo elect rónico en la em presa de aut obuses
cuando un usuario cualquiera rellenase est e form ulario y pulsase sobre el bot ón de envio.

nom bre= Federico Mij o Silvest re

em ail= fede@t erram [Link]
poblacion= Ast orga, León
sexo= Varon
ut ilizacion= 2
 com ent arios= No creo que sea una buena linea. Poner m ás aut obuses.
recibir_info= on

Re fe r e n cia : Ta lle r con for m u la r ios

Hem os publicado un t aller de HTML con un form ulario para valorar la página web. Muy sencillo y práct ico.
Puede ser int er esant e para afianzar est os conocim ient os. Ent rar

M a pa s de im á ge n e s con H TM L

En capít ulos ant eriores hem os podido adent rarnos en el elem ent o básico de navegación del web:
El enlace hipert ext o. Hem os vist o que est os enlaces son palabras, t ext os o im ágenes que, al
pinchar sobre ellos, nos envían a ot ras páginas o zonas.

Los m apas de im ágenes es un nuevo plant eam ient o de navegación que incorpora una serie de
enlaces dent ro de una m ism a im agen. Est os enlaces son definidos por figuras geom ét ricas y
funcionan exact am ent e del m ism o m odo que los ot ros enlaces. Podéis ver el funcionam ient o de
uno en est e enlace.

En un principio, est os m apas no eran direct am ent e reconocidos por los navegadores y recurrían a
t ecnologías de lado del servidor para ser visualizados. Hoy en día pueden ser im plem ent ados por
m edio de código HTML t al y com o verem os en est e capit ulo.

Podem os ut ilizar est os m apas, por ej em plo, en port adas donde dam os a conocer cada una de las
secciones del sit io por m edio de una im agen. Tam bién puede ser m uy práct ico en m apas
geográficos donde cada ciudad, provincia o punt o cualquiera represent a un enlace a una página.

En cualquier caso, el uso de est os m apas ha de est ar sist em át icam ent e acom pañado de un t ext o
explicat ivo que dé a conocer al usuario la posibilidad de hacer clic sobre los dist int os punt os de la
im agen. Frases com o " Haz clic sobre t al icono para acceder a t al inform ación" result an m uy
indicat ivas a la hora de hacer int uit iva la navegación por los m apas de im ágenes. Por ot ro lado, no
est a de m ás int roducir esa m ism a explicación en el at ribut o alt de la im agen.

Así pues, un m apa de im agen est a com puest o de dos part es:

• La im agen propiam ent e dicha que est ará sit uada com o de cost um bre dent ro de la et iquet a

•
< body> de nuest ro docum ent o HTML.
Un código, sit uado en el int erior de la et iquet a < m ap> , que delim it ara por m edio de líneas
geom ét ricas im aginarias cada una de las áreas de los enlaces present ados en la im agen.

Las líneas geom ét ricas que delim it an los enlaces, es decir, las áreas de los enlaces, han de ser
definidas por m edio de coordenadas. Cada im agen es definida por unas dim ensiones de ancho ( X)
y alt o ( Y) y cada punt o de la im agen puede ser definido por t ant o diciendo a que alt ura ( x) y
anchura ( y) nos encont ram os. De est e m odo, la esquina superior izquierda corresponde a la
posición 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseam os saber
qué coordenadas corresponden a un punt o concret o de nuest ra im agen, lo m ej or es ut ilizar un
program a de diseño grafico com o Phot oshop o Paint Shop Pro.
La m ej or form a de explicar el funcionam ient o de est e t ipo de m apas es a part ir de un ej em plo
práct ico. Supongam os que t enem os una im agen con un m apa com o est a:

Pulsa en los círculos para acceder a las secciones!

Dent ro de ella querem os int roducir un enlace a cada uno de los elem ent os que la com ponen. Para
ello, definirem os nuest ros enlaces com o zonas circulares de pequeño t am año que serán
dist ribuidas a lo largo y ancho de la im agen.

Veam os a cont inuación el código que ut ilizarem os:

< t able border = 0 widt h= 450> < t r> < t d align= " cent er" >
< m ap nam e= " m apa1" >
< area alt = " Pulsa para ver la página de m is am igos" shape= " CI RCLE" coords= " 44,36,29" href= " # " >
< area alt = " Pulsa para ver m i novia" shape= " CI RCLE" coor ds= " 140,35,31" href= " # " >
< area alt = " Pulsa para conocer a m i Fam ilia" shape= " circle" coords= " 239,37,30" href= " # " >
< area alt = " Pulsa para conocer m i t rabaj o" shape= " CI RCLE" coords= " 336,36,31" href= " # " >
< / m ap>
< im g src= " im ages/ ht m l/ m [Link]" w idt h= " 380" height = " 72" alt = " Mapa de im ágenes. Pulsa en cada una de los círculos."
border= " 0" usem ap= " # m apa1" >
< br>
Pulsa en los cír culos para acceder a las secciones!
< / t d> < / t r> < / t able>

N ot a : Los h r e f de la s á r e a s va n a #
Est e es un ej em plo par cial de ut ilización de los m apas, falt aría colocar los href con valores reales y no con la
# . Cada uno de los enlaces de las ár eas - at r ibut o href de la et iquet a < ar ea> - deber ían llevar a una página
web. El ej em plo quedaría com plet o si cr easem os t odas las páginas donde enlazar las ár eas y colocasem os los
href dir igidos hacia dichas páginas. Com o no hem os hecho las páginas " dest ino" hem os colocado enlaces que
no llevan a ningún sit io, que, com o puedes ver, se indica con el caract er " # " .

Podéis observar, t al y com o hem os explicado ant es, que nuest ro m apa const a de dos part es
principales: la im agen y la et iquet a < m ap> que define las áreas de cada enlace.

Cada área se indica con una et iquet a < area> , que t iene los siguient es at ribut os:

a lt
Para indicar un t ext o que se m ost rará cuando sit uem os el rat ón en el área.

sh a pe
I ndica el t ipo de área.

coor ds
Las coordenadas que definen el área. Serán un grupo de valores num éricos dist int os dependiendo
del t ipo de área ( shape) que est em os definiendo.

href
Para indicar el dest ino del enlace correspondient e al área.

En est e caso hem os ut ilizado unas áreas circulares ( shape= " CI RCLE" ) , que se definen indicando el
cent ro del círculo - una coordenada ( X,Y) y el radio, que es un núm ero ent ero que se corresponde
con el núm ero de pixels desde el cent ro hast a el borde del círculo.

Tipos de á r e a s: sh a pe dist in t a s.
 Exist en t res t ipos de áreas dist int as, suficient es para hacer casi
cualquier t ipo de figura. En el dibuj o que acom paña est as líneas se
puede ver una represent ación de las áreas, que det allam os a
cont inuación.

sh a pe = " RECT"

Crea un área rect angular. Para definirla se ut ilizan las coordenadas

de los punt os de la esquina superior izquierda y la esquina inferior
derecha. Tal com o est án nom bradas dichas coordenadas en nuest ro
dibuj o, el área t endría la siguient e et iquet a:

< area shape= " RECT" coords= " X1,Y1,X2,Y2" href= " # " >

sh a pe = " CI RCLE"

Crea un área circular, que se indica con la coordenada del cent ro

del círculo y el radio. A la vist a de nuest ro dibuj o, la et iquet a de un
área circular t endría est a form a:

< area shape= " CI RCLE" coords= " X1,Y1,R" href= " # " >

sh a pe = " POLY"

Est e t ipo de área, poligonal, es la m ás com plej a de t odas. Un polígono queda definido indicando
t odos sus punt os, pero at ención, los t enem os que indicar en orden, siguiendo el cam ino m arcado
por el perím et ro del polígono. A la vist a del dibuj o y los nom bres que hem os dado a los punt os del
polígono, la et iquet a < area> quedaría de est a form a.

< area shape= " POLY" coords= " X1,Y1, X2,Y2, X3,Y3, X4,Y4" href= " # " >

Fr a m e s e n H TM L

Una de las m ás m odernas caract eríst icas de HTML son los fram es, que se añadieron, t ant o en
Net scape Navigat or com o en I nt ernet Explorer, a part ir de sus versiónes 2.0. Los fram es - que
significan en cast ellano m arcos- son una m anera de part ir la página en dist int os espacios
independient es los unos de los ot ros, de m odo que en cada espacio se coloca una página dist int a
que se codifica en un fichero HTML dist int o.

Al principio se crearon com o et iquet as propiet arias del navegador Net scape y rápidam ent e la
pot encia del recurso hizo que el uso de fram es se ext endiera por t oda la web. Poco t ardaría
I nt ernet Explorer en incluirlos, para que no se le escapase una novedad t an popular de su
com pet idor. Finalm ent e, com o respuest a a la popularidad ent re los desarrolladores de los fram es,
el est ándar HTML 4.0 incluyó est as et iquet as dent ro de las perm it idas.

Los fram es, com o decíam os, nos perm it en part ir la vent ana del navegador en diferent es áreas.
Cada una de est as áreas son independient es y han de ser codificadas con archivos HTML t am bién
independient es. Com o result ado, cada fram e o m arco cont iene las propiedades específicas que le
indiquem os en el código HTML a present ar en ese espacio. Así m ism o, y dado que cada m arco es
independient e, t endrán sus propias barras de desplazam ient o, horizont ales y vert icales, por
separado.

Exist en en la web m uchas páginas que cont ienen fram es y seguro que t odos hem os t enido la
ocasión de conocer algunas. Se suelen ut ilizar para colocar en una part e de la vent ana una barra
de navegación, que generalm ent e se encuent ra fij a y perm it e el acceso a cualquier zona de la
página web. Una de las principales vent aj as de la program ación con fram es viene derivada de la
independencia de los dist int os fram es, pues podem os navegar por los cont enidos de nuest ro web
con la barra de navegación siem pre visible, y sin que se t enga que recargar en cada una de las
páginas que vam os visit ando.

Un ej em plo de las áreas que se pueden const ruir en una const rucción de fram es se puede ver en
las im ágenes siguient es.

Para el que no haya t enido oport unidad de conocer los fram es y su funcionam ient o, ofrecem os un
enlace a una página cualquiera de I nt ernet que los ut iliza. Adem ás, podem os ver uno de los
ej em plos del t em a de fram es que sim ula la página de una carnicería.

Fr a m e s - Ex plica ción bá sica

Las páginas web que est án hechas con fram es se com ponen de una declaración de los m arcos y
t ant as páginas en form at o HTML corrient e com o dist int as divisiones hem os definido. La
declaración o definición de fram es es la única página que realm ent e debem os aprender, puest o
que las páginas que se van a visualizar en cada uno de los cuadros son ficheros HTML de los que
venim os aprendiendo ant eriorm ent e en est e m anual.

Dicha definición est á com puest a por et iquet as < FRAMESET> y < FRAME> , con las que se
indicam os la disposición de t odos los cuadros. La et iquet a < FRAMESET> indica las part iciones de
la vent ana del navegador y la et iquet a < FRAME> indica cada uno de los cuadros donde
colocarem os una página independient e.

Las part iciones que se pueden hacer con un < FRAMESET> son en filas o colum nas. Por ej em plo,
podríam os indicar que deseam os hacer una división de la página en dos filas, o dos colum nas, t res
filas, et c. Para indicar t ant o la form a de part ir la vent ana - en filas o colum nas- com o el núm ero de
part iciones que pret endem os hacer, se ha de ut ilizar el at ribut o COLS o ROWS. El prim ero sirve
para indicar una part ición en colum nas y el segundo para una part ición en filas.

N ot a : Es im port ant e indicar que no se puede hacer una part ición en filas y colum nas a la vez, sino que
debem os escoger en par t ir la vent ana en una de las dos disposiciones. Más adelant e indicarem os cóm o part ir
la vent ana t ant o en filas com o en colum nas, que se hace con la anidación de fram es.

En el at ribut o COLS o ROWS - sólo podem os elegir uno de los dos- colocam os ent re com illas el
núm ero de part iciones que deseam os realizar, indicando de paso el t am año que va a asignarse a
cada una. Un valor t ípico de est os at ribut os sería el siguient e:

cols= " 2 0 % ,8 0 % "

I ndica que se deben colocar dos colum nas, la de la izquierda t endría un 20% del espacio t ot al de
la vent ana y la de la derecha un 80% .

r ow s= " 1 5 % ,6 0 % ,2 5 % "
Así indicam os que deseam os t res filas, la de arriba con un 15% del espacio t ot al, la del m edio con
un espacio correspondient e al 60% del t ot al y la de abaj o con un 25% . En t ot al sum an el 100%
del espacio de la vent ana.

Adem ás del porcent aj e para indicar el espacio de cada una de las casillas, t am bién podem os
indicarlo en pixeles. De est a m anera.

cols= " 2 0 0 ,6 0 0 "

Para indicar que la colum na de la izquierda debe t ener 200 pixels de ancho y la de la derecha 600.
Est o est á bien si nuest ra vent ana t iene 800 pixels de ancho, pero est o no t iene porque ser así en
t odos los m onit ores de los usuarios, por lo que est e m odo de expresar los m arcos es im port ant e
que se indique de la siguient e m anera.

cols= " 2 0 0 ,* "

Así indicam os que la prim era colum na ha de m edir 200 pixels y que el rest o del espacio disponible
- que será m ayor o m enor dependiendo de la definición de la pant alla del usuario- se le asignará a
segunda colum na.

En la práct ica podem os m ezclar t odos est os m ét odos para definir los m arcos de la m anera que
deseem os, con pocent aj e, con pixels o con el com odín ( * ) . No im port a cóm o se definan, la única
recom endación es que uno de los valores que indiquem os sea un ast erisco, para que el área
correspondient e a dicho ast erisco o com odín sea m ás o m enos grande dependiendo del espacio
que t enga la vent ana de nuest ro navegador. Ot ros m ét odos de definir filas y colum nas,
at endiendo a est e consej o, serían los siguient es:

r ow s= " 1 0 0 ,* ,1 2 % "
Definim os t res filas, la prim era con 100 pixels de ancho, la segunda con el espacio que sobre de
las ot ras dos, y la t ercera con un 12% del espacio t ot al.

cols= " 1 0 % ,5 0 % ,1 2 0 ,* "

Est am os indicando cuat ro colum nas. La prim era del 10% del espacio de la vent ana, la segunda
con la m it ad j ust a de la vent ana, la t ercera con un espacio de 120 pixels y la últ im a con la
cant idad de espacio que sobre al asignar espacio a las dem ás part iciones.

Una vez hem os indicado el núm ero de filas o colum nas y el espacio reservado a cada una con la
et iquet a < FRAMESET> , debem os especificar con la et iquet a < FRAME> la procedencia de cada uno
de los fram es en los que hem os part ido la vent ana.

Para ello, disponem os del at ribut o SRC, que se ha de definir para cada una de las filas o
colum nas. De est a m anera.

< FRAME src= " m [Link] m l" >

Así queda indicado que el fram e que est am os definiendo debe m ost rar la página m [Link] m l en
su int erior.

Fr a m e s - Cr e a ción de u n a e st r u ct u r a sim ple

Para ilust rar t odo lo que venim os explicando podem os ver el ej em plo sobre cóm o se crearía la
definición de fram es de la im agen que podem os ver a cont inuación.
< ht m l>
< head>
< t it le> Definición de Fram es< / t it le>
< / head>
< fram eset rows= " 15% ,* ,75" >
< fram e src= " [Link] m l" >
< fram e src= " [Link] m l" >
< fram e src= " [Link] m l" >
< / fram eset >
< / ht m l>

Se puede ver est a part ición de fram es en una página a part e.

Adem ás t enem os algunas consideraciones que hacer para t erm inar de com prender est e ej em plo:

• El t ít ulo de la definición de fram es es el que hereda t oda la página web, por ello, no es
buena idea t it ular com o " definición de fram es" por ej em plo, ya que ent onces t oda nuest ra
página se t it ularía así y seguram ent e no sea m uy descript ivo. Si est uviésem os haciendo
una página para la carnicería pepe sería m ej or t it ular a la definición de fram es algo com o

•
" Carnicería Pepe, las m ej ores carnes en Madrid" .
La página que define los fram es no t iene body. HTML puede arroj arnos un error si lo

•
incluim os.
Las páginas " [Link] m l" , " [Link] m l" y " [Link] m l" han de escribirse en archivos
independient es con el nom bre indicado. En est e ej em plo, dichas páginas deberían
encont rarse en el m ism o direct orio que la declaración de fram es. Si especificam os una rut a

•
para acceder al archivo podem os colocarlo en el direct orio que deseem os.
Los colores de cada uno de los fram es los hem os colocado con el at ribut o bgcolor colocado
en la et iquet a < BODY> de cada una de las páginas que se m uest ran en los m arcos.

Fr a m e s - Un a pá gin a e n ca da m a r co

Las páginas que m ost rarem os en cada m arco son docum ent os HTML iguales a los que venim os
creando ant eriorm ent e. Podem os colocar cualquier elem ent o HTML de los est udiados en est e
m anual, com o et iquet as de párrafo, im ágenes, colores de fondo, et c.

Cada docum ent o, com o ya hem os indicado, se escribe por separado en su propio archivo HTML.
Para el ej em plo del capít ulo ant erior podem os definir los archivos HTML de la siguient e m anera.

pa gina 1 .h t m l
Es la página que cont iene el t it ular de la web. Sim plem ent e se t rat a de una et iquet a < H1> de
t it ular. La página t iene su propio t ít ulo, con la et iquet a < TI TLE> , que no se podrá visualizar por
ningún sit io a no ser que se m uest re est a página sin los fram es, ya que las páginas dent ro de los
m arcos heredan el t ít ulo de la definición de los fram es.
< ht m l>
< head>
< t it le> Tit ulo Carnicería Pepe< / t it le>
< / head>

< body bgcolor= " # DECC09" >

< h1 align= cent er> Carnicería PEPE< / h1>
< / body>
< / ht m l>

pa gina 2 .h t m l
Es la página que se present ará en el área principal de la definición de fram es, es decir, la página
que t iene m ás espacio para visualizarse y donde pondrem os los cont enidos de la web. En est e
caso m uest ra un m ensaj e de bienvenida a la web, que hará las veces de port ada.

< ht m l>
< head>
< t it le> Port ada de Carnicería PEPE< / t it le>
< / head>

< body bgcolor= " # CF391C" t ext = "# ffffff" >

< h1 align= " cent er" > Bienvenidos a nuest ra web< / h1>
< br>
< br>
La carnicería PEPE, con m ás de 100 años de experiencia, es la m ej or fuent e de carnes de vacuno
y cerdo de la com unidad.
< br>
< br>
Tant o en invierno com o en verano puede encont rar nuest ras ofert as de t em porada de prim era
calidad.
< / body>
< / ht m l>

pa gina 3 .h t m l
En est a página se m ost rará la barra de navegación por los cont enidos del sit io. Cont iene enlaces
que deberían act ualizar el cont enido del área principal de la declaración de fram es, para m ost rar
los dist int os cont enidos del sit io, por ej em plo, la port ada, los product os, la página de cont act o,
et c.

< ht m l>
< head>
< t it le> Barra de navegación de carnicería PEPE< / t it le>
< / head>

< body bgcolor= " # AC760E" link= " ffffcc" vlink= " ffffcc">
< div align= " cent er" >
< b>
< a href= " [Link] m l" > Port ada< / a> |
< a href= " product [Link] m l" > Product os< / a> |
< a href= " cont act [Link] m l" > Cont act o< / a>
< / b>
< / div>
< / body>
< / ht m l>
Podem os ver cóm o queda la página de fram es con est os cont enidos, que sim ulan la página de una
carnicería.

Fr a m e s - D ir igir los e n la ce s

La única part icularidad dest acable en el ej em plo del capít ulo ant erior, y en el m anej o de fram es
en general, se t rat a de que ca da un o de los e n la ce s que coloca m os e n la s pá gina s
a ct ua liza n e l fr a m e don de e st á coloca do e st e e n la ce. Por ej em plo, si t enem os enlaces en la
part e inferior de la vent ana, en el espacio correspondient e al t ercer m arco, act ualizarán los
cont enidos del t ercer fram e, que es donde est án sit uados los enlaces.

Est e efect o que com ent am os se puede observar en el ej em plo de la página de la carnicería, t al
com o quedaría al incluir los códigos de las dist int as páginas.

Lo lógico es que al pulsar sobre un enlace de la barra de navegación act ualicem os el fram e
principal, que es donde habíam os planeado colocar los cont enidos, en lugar del fram e donde
colocam os la barra de navegación, que debería m ant enerse fij a. Para conseguir est e efect o
debem os hacer un par de cosas:

1. D a r le u n nom br e a l fr a m e qu e de se a m os a ct ua liza r
Dicho nom bre se indica en la et iquet a < FRAME> de la definición de fram es. Para ello
ut ilizam os el at ribut o nam e, igualado al nom bre que le querem os dar a dicho m arco.
2. D ir igir los e n la ce s ha cia e se fr a m e
Para ello debem os colocar en el at ribut o t arget de los enlaces - et iquet a < A> - el nom bre
del fram e que deseam os act ualizar al pulsar el enlace.

Después de darle un nom bre al fram e principal, nuest ra declaración de fram es quedaría de la
siguient e m anera.

< fram eset rows= " 15% ,* ,75" >

< fram e src= " [Link] m l" >
< fram e src= " [Link] m l" nam e= " principal" >
< fram e src= " [Link] m l" >
< / fram eset >

Adem ás, deberíam os colocar el at ribut o t arget a los enlaces, t al com o sigue.

< a href= " [Link] m l" t arget = " principal" > Port ada< / a> |
< a href= " product [Link] m l" t arget = " principal" > Product os< / a> |
< a href= " cont act [Link] m l" t arget = " principal" > Cont act o< / a>

Una vez realizados est e par de cam bios podem os ver com o los enlaces de la barra de navegación
sí act ualizan la página que deben.

Va lor e s pa r a e l a t r ibu t o t a r ge t

Com o hem os vist o, con el at ribut o t arget de la et iquet a < A> podem os indicar el nom bre del fram e
que deseam os que act ualice ese enlace. Sin em bargo, no es est e el único valor que podem os
aplicarle al at ribut o. Tenem os algunos valores adicionales que podem os asignar a cualquier enlace
en general.

_ bla n k
Para hacer que ese enlace se abra en una vent ana a part e. Nuest ros ej em plos en est e m anual se
suelen abrir en una vent ana a part e, colocando est e valor en el t arget de los enlaces que llevan a
los ej em plos.

_ se lf
Se act ualiza el fram e donde est á sit uado el enlace. Es el valor por defect o.

_ pa r e n t
El enlace se act ualiza sobre su padre o sobre la vent ana que est am os t rabaj ando, si es que no hay
un padre.

_ t op
La página se carga a pant alla com plet a, es decir, elim inando t odos los fram es que pudiera haber.
Est e at ribut o es m uy im port ant e porque si colocam os en nuest ra página con fram es un enlace a
una página ext erna, se abriría en uno de los fram es y se m ant endrían visibles ot ros fram es de la
página, haciendo un efect o que suele ser poco agradable, porque parece que est án evit ando que
nos escapem os.

La sint axis de uno de est os valores de at ribut os colocados en un enlace sería la siguient e.

< A href= " ht t p: / / [Link] [Link] " t arget = " _t op" > Acceder a guiart [Link] < / A>

Fr a m e s - An ida r fr a m e s

Para crear est ruct uras de m arcos en las que se m ezclen las filas y las colum nas debem os anidar
et iquet as < FRAMESET> . Em pezando por la part ición de fram es m ás general, debem os colocar
dent ro las part iciones de fram es m ás pequeñas. La m anera de indicar est o se puede ver
fácilm ent e con un ej em plo.

Los pasos para definir la anidación se pueden encont rar a la derecha.

Los dist int os fr am es vienen num erados con el orden
en el que se escriben en el código.

En la im agen se puede ver el result ado final acom pañada de la represent ación sobre la m anera de
definirlos. En prim er lugar definim os una est ruct ura de fram es en dos colum nas y dent ro de la
prim era colum na colocam os ot ra parcición de fram es en dos filas. El código necesario es el
siguient e.

< fram eset cols= " 200,* " >

< fram eset rows= " 170,* " >
< fram e src= " [Link] m l" >
< fram e src= " [Link] m l" >
< / fram eset >
< fram e src= " [Link] m l" >
< / fram eset >

Podem os ver el ej em plo en una página a part e.

 N ot a : hem os colocado un m argen en cada una de las líneas de est a definición de fram es para conseguir un
código m ás ent endible visualm ent e. Est os m árgenes no son en absolut o necesar ios, sim plem ent e nos sirv en
para ver en qué niv el de anidación nos encont ram os.

El ej em plo ant erior se puede com plicar un poco m ás si incluim os m ás part iciones. Vam os a ver
algo un poco m ás com plicado para pract icar m ás con las anidaciones de fram es.

Los pasos para definir la anidación se pueden encont rar a la derecha.

Los dist int os fr am es vienen num erados con el orden
en el que se escriben en el código.

En la im agen se observa que el prim er fram eset a definir se com pone de dos filas. Post eriorm ent e,
dent ro de la segunda fila del prim er fram eset , t enem os ot ra part ición en dos colum nas, dent ro de
las que colocam os un t ercer nivel de fram eset con una definción en filas en los dos casos. El
código se puede ver a cont inuación.

< fram eset rows= " 60,* " >

< fram e src= " [Link] m l" >
< fram eset cols= " 200,* " >
< fram eset rows= " * ,150" >
< fram e src= " [Link] m l" >
< fram e src= " [Link] m l" >
< / fram eset >
< fram eset rows= " * ,60" >
< fram e src= " [Link] m l" >
< fram e src= " [Link] m l" >
< / fram eset >
< / fram eset >
< / fram eset >

Podem os ver el ej em plo en una página a part e.

Hast a aquí hem os vist o la part e m ás básica de la creación de fram es. En los siguient es capít ulos
podrem os aprender a configurar los m arcos para variar su apariencia y, ent re ot ras cosas,
elim inar las barras que separan cada uno de los dist int os fram es.

Fr a m e s - At r ibu t os a va n za dos

Apart e de la creación de los m arcos propiam ent e dicha, exist en m uchos at ribut os con los que
configurar su apariencia. Para ello, t ant o la et iquet a < fram eset > com o < fram e> adm it en diversos
at ribut os que perm it en especificar la form a de elem ent os com o los bordes de los fram es, el
m argen, la exist encia o no de barras de desplazam ient o, et c.

At r ibu t os pa r a la e t iqu e t a < fr a m e se t >

Ya hem os conocido el at ribut o cols y rows, que sirven para indicar si la dist ribución en m arcos se
hará horizont alm ent e o vert icalm ent e. Sólo se puede ut ilizar uno de ellos y se iguala a las
dim ensiones de cada uno de las divisiones, separadas por com as.

bor de r = " nú m e r o de pix e ls"

Perm it e especificar de m anera global para t odo el fram eset el núm ero de pixels que ha de t ener el
borde de los fram es.

bor de r color = " # r r ggbb"

Con est e at ribut o podem os m odificar el color del borde de los fram es, t am bién de m anera global a
t odo el fram eset .

fr a m e bor de r = " ye s| no| 0 "

Sirve para m ost rar o no el borde del fram e. Sus posibles valores son " yes" ( para que se vean los
bordes) y " no" o " 0" ( para que no se vean) . En la práct ica elim ina el borde, pero perm anece una
línea de separación de los fram es.

fr a m e spa cin g= " n úm e r o de pix e ls"

Para det erm inar la anchura de la línea de separación de los fram es. Se puede ut ilizar en I nt ernet
Explorer y j unt o con el at ribut o fram eborder= " 0" sirve para elim inar los bordes de los m arcos.

At r ibu t os pa r a la e t iqu e t a < fr a m e >

Para est a et iquet a hem os señalado en capít ulos ant eriores los at ribut os src, que sirve para indicar
el archivo que cont iene el m arco y nam e, para darle un nom bre al m arco y luego dirigir los
enlaces hacia el. Veam os ahora ot ros at ribut os disponibles.

m a r ginw idt h= " núm e r o de pix e ls"

Define el núm ero de pixels que t iene el m argen del fram e donde se indica. Est e m argen se aplica
a la página que pret endem os ver en ese m arco, de m odo que si colocam os 0, los cont enidos del
página en ese m arco est arán pegados por com plet o al borde del m argen y si indicam os un valor
de 10, los cont enidos de la página est arían separados del borde 10 pixels.

m a r ginh e igh t = " n úm e r o de pix e ls"

Lo m ism o que el ant erior at ribut o, pero para el m argen vert ical.

scr olling= " ye s| n o| a u t o"

Sirve para indicar si querem os que haya barras de desplazam ient o en los dist int os m arcos. Si
indicam os " yes" siem pre saldrán las barras, si indicam os " no" no saldrán nunca y si colocam os
" aut o" saldrán sólo si son necesarias. Aut o es el valor por defect o.

Con se j o: hay que t ener cuidado si elim inam os los bordes de los fram es, puest o que la página w eb puede
t ener dim ensiones dist int as dependiendo de la definición de pant alla del visit ant e. Si el espacio de la v ent ana
se ve reducido, podría verse r educido el espacio para el fram e y puede que no quepan los elem ent os que
ant es si que cabían y si hem os elim inado las barras de desplazam ient o puede que el visit ant e no pueda ver
t odo el cont enido del m arco.

Est e m ism o consej o se puede aplicar al redim ensionam ient o de fram es, que verem os en el siguient e at ribut o.
Si hacem os que los m arcos no sean redim ensionables probablem ent e t engam os una declaración de fram es
dem asiado r ígida, que puede verse m al en algún t ipo de pant alla.

n or e size
Est e at ribut o no t iene valores, sim plem ent e se pone o no se pone. En caso de que est é present e
indica que el fram e no se puede redim ensionar. Com o hem os podido ver, al colocar el rat ón sobre
el borde de los m arcos sale un cursor que nos señala que podem os m over dicho borde y
redim ensionar así los fram es. Por defect o, si no colocam os nada, los m arcos si se pueden
redim ensionar.

fr a m e bor de r = " ye s| no| 0 "

Est e at ribut o perm it e cont rolar la aparición de los bordes de los fram es. Con est e at ribut o
igualado a " 0" o " no" los bordes se elim inan. Sin em bargo, quedan los feos m árgenes en el borde.
Por lo que hem os podido com probar funciona m ej or en Net scape que en I nt ernet Explorer. De
t odos m odos, t enem os una not a un poco m ás adelant e para explicar los fram es sin bordes.

N ot a : los at r ibut os de fram es no funcionan siem pr e bien en t odos los nav egadores. Es r ecom endable que
hagam os un t est sobr e lo que est am os diseñando en varios navegadores para com probar que nuest ros fram es
se ven bien en t odas las plat aform as.

bor de r color = " # r r ggbb"

Perm it e especicicar el color del borde del m arco.

Re fe r e n cia : Tenem os un t aller de HTML en el que explicam os com o realizar un fram e sin bordes que se vea
bien en los nav egadores m ás habit uales.

Ve nt a j a s e inconve nie nt e s de l u so de fr a m e s

El diseño con fram es es un asunt o bast ant e controvert ido, ya que dist int os diseñadores t endrán
unas u ot ras opiniones.
Re fe r e n cia : Si deseas saber qué son los fram es y cóm o crearlos consult a los capít ulos de Fram es de nuest ro
m anual de HTML.

En m i caso, pienso que es preferible no ut ilizarlos, aunque eso depende del t ipo de sit io web que
est és const ruyendo, ya que en algunos casos sí que sería m uy adecuado su uso.

Voy a colocar unas vent aj as e inconvenient es del uso de m arcos ( fram es) . Siem pre es a m i
ent ender, ot ros pueden t ener ot ras opiniones.

Ve n t a j a s de u sa r fr a m e s

• La navegación de la página será m ás rápida. Aunque la prim era carga de la página sería
igual, en sucesivas im presiones de páginas ya t endrem os algunos m arcos guardados , que

•
no t endrían que volverse a descargar.
Crear páginas del sit io sería m ás rápido. Com o no t enem os que incluir part es de código
com o la barra de navegación, t ít ulo, et c. crear nuevas páginas sería un proceso m ucho

•
m ás rápido.
Part es de la página ( com o la barra de navegación) se m ant ienen fij as y eso puede ser

•
bueno, para que el usuario no las pierda nunca de vist a.
Est as m ism as part es visibles const ant em ent e, si cont ienen enlaces, pueden servir m uy

•
bien para m ej orar la navegación por el sit io.
Mant ienen una ident idad del sit io donde se navega, pues los elem ent os fij os conservan la
im agen siem pre visible.

I n conve n ie n t e s de usa r fr a m e s

• Quit an espacio en la pant alla. El espacio ocupado por los fram es fij os se pierde a la hora de
hacer páginas nuevas, porque ya est á ut ilizado. En definiciones de pant alla pequeña o

•
disposit ivos com o Palm s, est e problem a se hace m ás pat ent e.
Fuerzan al visit ant e a ent rar por la declaración de fram es. Si no lo hacen así, sólo se vería
una página int erior sin los recudros. Est os recuadros podrían ser insuficient es para una
 buena navegación por los cont enidos y podrían no conservar una buena im agen

•
corporat iva.
La prom oción de la página sería, en principio, m ás lim it ada. Est o es debido a que sólo se
debería prom ocionar la port ada, pues si se prom ocionan páginas int eriores, podría darse
en caso de que los visit ant es ent rasen por ellas en lugar de por la port ada, creandose el

•
problem a descrit o en el punt o ant erior.
A m ucha gent e les disgust an pues no se sient en libres en la navegación, pues ent ienden
que esas part es fij as est án lim it ando su m ovilidad por la web. Est e efect o se hace m ás
pat ent e si la página con fram es t iene enlaces a ot ras páginas web fuera del sit io y, al
pulsar un enlace, se m uest ra la página nueva con los m arcos de la página que t iene

•
fram es.
Algunos navegadores no los soport an. Est o no es m uy habit ual, pero si est am os haciendo
una página que queram os que sea t ot alm ent e accesible deberíam os considerarlo

•
im port ant e.
Los bookm arks o favorit os no funcionan correct am ent e en m uchos casos. Si querem os
incluir un favorit o a una página de un fram e que no sea la port ada podem os encont rar

•
problem as.

•
Puede que el bot ón de at rás del navegador no se com port e com o deseam os.
Si quieres act ualizar m ás de un fram e con la pulsación de un enlace deberás ut ilizar
Javascript . Adem ás los script s se pueden com plicar bast ant e cuando se t ienen que
com unicar varios fram es ent re si.

Con clu sión

El t rabaj o con fram es puede ser m ás o m enos indicado dependiendo de las caract eríst icas de la
página a desarrollar, es t u t area saber si en t u caso debes ut ilizarlos o no.

La s n u e va s e t iqu e t a s de H TM L 4 .0

I nt roducción. Cuando I nt ernet em pezaba su im parable escalada, la versión del est ándar HTML que
circulaba era la 2.0, el cuál siguen soport ando los navegadores m ás act uales. Pero las
herram ient as de que se disponía no ofrecían un cont rol preciso de los docum ent os.

Pero com o por aquel ent onces el obj et ivo de I nt ernet est aba fundam ent alm ent e orient ado al
ám bit o académ ico y no al de diseño, no se le dio dem asiada im port ancia a la cuest ión de lanzar
una versión m ej orada del est ándar hast a que Net scape, que por aquel ent onces era la em presa
líder en el sect or, t om ó la iniciat iva de incluir nuevas et iquet as pensadas para m ej orar el aspect o
visual de las páginas web.

Por est e m ot ivo el I ETF ( I nt ernet Engineering Task Force) [Link] [Link] [Link], o lo que es
lo m ism o, Grupo de Trabaj o en I ngeniería de I nt ernet , com enzó a elaborar nuevos est ándares, los
cuales dieron com o frut o el HTML 3.0, que result ó ser dem asiado grande para las infraest ruct uras
que había en ese m om ent o, lo cual dificult ó su acept ación.

Así pues, una serie de com pañías ( ent re las que est aban Net scape, Sun Microsyst em s o Microsoft ,
ent re ot ras) , se unieron para crear lo que hoy se denom ina W3C ( o lo que es lo m ism o, Consorcio
para la World Wide Web) , que fue fundado en oct ubre de 1.994 para conducir a la World Wide
Web a su m áxim o pot encial, desarrollando prot ocolos de uso com ún, para norm alizar el uso de la
web en t odo el m undo.

El com prom iso del W3C de encam inar a la Web a su m áxim o pot encial incluye prom over un alt o
grado de accesibilidad para las personas con discapacidades. El grupo de t rabaj o perm anent e Web
Accessibilit y I nit iat ive ( WAI , I niciat iva para la Accesibilidad de la Red) , en coordinación con
organizaciones alrededor de t odo el m undo, persigue la accesibilidad de la Web a t ravés de cinco
áreas de t rabaj o principales: Tecnología, direct rices, herram ient as, form ación, difusión, e
invest igación y desarrollo.

De est a iniciat iva nació el borrador de HTML 3.2 y en su versión definit iva se int roduj eron cam bios
esenciales para las posibilidades que em pezaban a ofrecer los navegadores, est as inclusiones
fueron las t ablas, los applet s, et c.

En j ulio de 1.997 nace el borrador del HTML 4.0 y finalm ent e se aprueba en diciem bre de 1.997
est e est ándar incluía com o m ej oras los m arcos ( fram es) , las hoj as de est ilo y la inclusión de
script s en páginas web, ent re ot ras cosas.

La s n u e va s e t iqu e t a s de H TM L 4 .0 ( 1 )

Ent re el est ándar del HTML 3.2 al 4.0 se int roduj eron ocho nuevas et iquet as de las cuales
darem os una breve explicación.

< Q> ... < / Q>

Las et iquet as < Q> y < / Q> act úan de form a m uy parecida a < BLOCKQUOTE> pero con la
part icularidad de que añade un sangrado en párrafos m ás pequeños y sin necesidad de rom per el
párrafo.

Según el W3C, la et iquet a < BLOCKQUOTE> es para añadir sangrados largos y < Q> , para
sangrados m ás pequeños, sin necesidad de rom per el párrafo.

Not a: En el HTML 4.0 es im pr escindible poner la et iquet a de apert ura y la de clausura < Q> .... < / Q> .

< ACRON YM > ... < / ACRON YM >

Las et iquet as < ACRONYM> ... < / ACRONYM> , indican que hay un acrónim o en el t ext o. Un
acrónim o es un pequeño t ext o que ayuda a explicar la est ruct ura del t ext o una frase.

< I N S> ... < / I N S> y < D EL> ... < / D EL>

Ut ilice < I NS> ...< / I NS> para m arcar las part es de un docum ent o que se han agregado desde la
versión pasada del docum ent o. < DEL> ... < / DEL> m arca de m anera sim ilar un t ext o de un
docum ent o que se ha suprim ido desde la versión ant erior.

< COLGROUP> ... < / COLGROUP>

Se ut iliza para t ener un m ej or cont rol sobre un el form at o de las t ablas especificando las
caract eríst icas que com part en com o: anchura, alt ura y alineación.
Cada t abla debe t ener por lo m enos un < COLGROUP> ; sin especificar ninguna caract eríst ica de <
COLGROUP > . HTML 4.0 asum e que una t abla cont iene un solo grupo de colum nas y que est e
cont iene t odas las colum nas de una t abla.
Por ej em plo, est o nos serviría para crear una t abla con una celda en la que puede incluirse una
descripción y después seguido de check boxes para seleccionar las opciones deseadas.

Código: < TABLE> < COLGROUP span= " 10" widt h= " 30" > < COLGROUP span= " 1" w idt h= " 0* " > < THEAD> < TR> ... < /
TABLE>

De est a form a, < COLGROUP> proporciona un form at o m ás agradable a los check boxes sin
necesidad de especificar, propiedades ident icas para cada fila.
La et iquet a de inicio < COLGROUP > , requiere ot ra de cierre.
Con el que obt enem os: ( en Nest cape sólo se verá la t abla, no el bot ón) .

La s n u e va s e t iqu e t a s de H TM L 4 .0 ( 2 )

< FI ELD SET> ... < / FI ELD SET>

Hast a ahora, no disponíam os de ninguna m anera de agrupar visualm ent e varios cont roles, si no
echábam os m ano de elem ent os que no son del form ulario, com o t ablas o im agenes.
Ahora, si encerram os una part e de un form ulario dent ro de la et iquet a FI ELDSET se m ost rara un
rect ángulo alrededor de los m ism os. Adem ás, podem os indicar un t ít ulo por m edio de la et iquet a
LEGEND, que adm it e el parám et ro align= " left / cent er / right / t op / bot t om " , lo que nos perm it e
alinear el t ít ulo horizont al y vert icalm ent e. La única pega es que deberem os int roducir el conj unt o
en una celda de t abla con un ancho det erm inado, ya que si no lo hacem os así el recuadro
abarcara t odo el ancho de pant alla disponible.

Ej e m plo.- ( Sólo para I . Explorer)

< form act ion= " cgi- bin/ cont [Link]" m et hod= "post " enct ype= " t ext / plain" nam e= " m ifor m " >
< t able widt h= " 200" >
< t r>
< t d>
< fieldset >
< legend align= " left " > < font color= " red" > Caj a de t ex t o< / font > < / legend>
pon t u nom bre:
< input t ype= " t ext " size= " 15" >
< / fieldset >
< / t d>
< / t r>
< t able>
< / form >

< LABEL> ... < / LABEL>

Hast a no hace m ucho los cam pos de ent rada no est aban asociados a ellos m ism os. Por ej em plo; a
la hora de pulsar sobre un cam po de confirm ación, ¡ no sucedía nada! Pero ahora, sí lo pulsam os
el cont rol cam biará de est ado.

Ej e m plo:

< form act ion= " cgi- bin/ m icont [Link]" m et hod= " post " enct ype= " t ext / plain" nam e= " un ej em plo m ás" >
< label>
< input t ype= " checkbox" nam e= " em ail" >
Le deseam os un feliz año nuevo
< / label>
< / form >

< BUTTON > ... < / BUTTON >

A part ir de la im plem ent ación de los est ándares HTML 4.0 cont am os con varias et iquet as nuevas
para const ruir form ularios, siendo BUTTON una de ellas, bast ant e út il por ciert o. La pega es que
las versiones de 4 de Nest cape se lanzaron ant es de est as im plem ent aciones, por lo que est as
nuevas et iquet as sólo se pueden visualizar correct am ent e con I nt ernet Explorer 4 y superiores.
Est a et iquet a proporciona un m ét odo único para la im plem ent ación de cualquier t ipo de bot ón de
form ulario. Sus principales at ribut os son:

• t ype= " t ipo " , que puede t om ar los ya conocidos valores subm it ( por defect o) , reset y
but t on.
 •
•
nam e= " nom bre " , que asigna un nom bre ident ificador único al bot ón.
value= " t ext o " , que define el t ext o que va a aparecer en el bot ón.

La principal vent aj a que aport a est as et iquet as es que ahora vam os a poder int roducir dent ro de
ellas cualquier elem ent o de HTML, com o im agenes y t ablas.

Ej e m plos.

< form act ion= " cgi- bin/ cont [Link]" m et hod= "post " enct ype= " t ext / plain" nam e= " m ifor m " >

< but t on nam e= " bot on_1" t y pe= " but t on" >
< t able widt h= " 10" cellspacing= " 0" cellpadding= " 2" border= " 1" >
< t r>
< t d> uno< / t d>
< t d> dos< / t d>
< / t r>
< t r>
< t d> t r es< / t d>
< t d> cuat ro< / t d>
< / t r>
< / t able>
< / but t on>
< / form >

Son ido e n H TM L I , in t r odu cción

En su cort a pero rápida vida, las páginas web han pasado a ser no ya unos m eros docum ent os
t ext uales a los que se puede acceder por I nt ernet , sino unas verdaderas present aciones
m ult im edia, que com binan t ext os con im ágenes, sonidos, videos y elem ent os de realidad virt ual.

Si el prim er paso que se dio fue añadir im ágenes a las páginas web, t ant o est át icas com o
dinám icas GI F anim ados) , el siguient e paso consist ió en int roducir sonidos en las m ism as,
consiguiendo con ellos el apelat ivo de “ m ult im edia” . Y nos referirem os en lo sucesivo cuando
hablem os de sonido t ant o a sonido sint et izado com o a verdaderas grabaciones de audio, de
calidad m uy elevada.

Ahora bien, aunque los navegadores han sido capaces de int erpret ar los ficheros de sonido
adecuados desde hace ya algunas versiones, es ciert o que la aplicación de sonidos a las páginas
web ha est ado lim it ada desde siem pre por el ancho de banda necesario en las conexiones a
I nt ernet para poder descargar de form a adecuada dichos ficheros, debido al t am año “ excesivo” de
los m ism os.

Ot ra de las lim it aciones im port ant es que encont ram os a la hora de incluir ficheros de sonido en
nuest ras páginas es la diferent es im plem ent ación que hacen de ellos los navegadores web m ás
usados. En efect o, no sólo deberem os usar et iquet as HTML dist int as para I nt ernet Explorer que
para Net scape Navigat or, sino que a veces la form a m ism a de int erpret ar el sonido puede diferir
de uno a ot ro navegador.

Por últ im o, hay que dest acar que a la hora de incluir ficheros de audio en nuest ras páginas
debem os ser conscient es que m uchos de los form at os usados, sobre t odo en grabaciones de
calidad, precisan un plugin o program a especial para su reproducción en el navegador client e. Y si
es ciert o que act ualm ent e hay ciert os plugins se han t ransform ado casi en un est ándar en
I nt ernet ( com o el de Real Audio o el de MP3) , hay ot ros posibles que no es norm al t ener
inst alados, por lo que si incluim os ficheros de esos t ipos obligarem os al usuario a t ener que
inst alarlos, cosa a la que suele ser reacio.
Son ido e n H TM L I I , ca r a ct e r íst ica s de l son ido digit a l

Vam os a est udiar algunos de los concept os básicos del sonido digit al, aunque sin ent rar en
dem asiadas consideraciones t écnicas. Para aquellos que deseen m ás inform ación, exist en m ult it ud
de sit ios web que est udian específicam ent e el sonido digit al y el hardware necesario para su
capt ura y reproducción.

El sonido t iene una nat uraleza ondulant e, es decir, se propaga en form a de ondas analógicas
desde el obj et o que lo produce. Las caract eríst icas propias de cualquier sonido ( desde el
producido por un aut om óvil hast a una bella canción) , sus diferent es t onos y not as dependen
precisam ent e de las propiedades físicas de las ondas que lo form an.

Para poder viaj ar desde el em isor al recept or, las ondas de sonido precisan de un m edio físico de
soport e, ya sea el aire de la at m ósfera, al agua, et c. Tant o es así que en el espacio ext erior,
donde no hay m edio físico soport e, no se pueden t ransm it ir sonidos.

Si represent am os en un gráfico un sonido com plej o, obt endrem os la siguient e figura:

En la que podem os apreciar los diferent es valores de onda que va t om ando el sonido.

Todos sabem os que los equipos inform át icos no t rabaj an con dat os analógicos, sino que lo hacen
con dat os digit ales, form ados por est ados binarios. Por lo t ant o, para represent ar un sonido,
desde el punt o de vist a inform át ico, es preciso capt urarlo en una nat uraleza binaria, para lo que
se hace un m u e st r e o del m ism o, t om ando det erm inados valores de las ondas y represent ando
dichos valores en form at o digit al. En cada capt ura obt endrem os un punt o de la gráfica ant erior.

Pero, ¿Cuánt as m uest ras deberem os t om ar?. Est e es el verdadero m eollo de la cuest ión, ya que
cuant as m ás m uest ras t om em os, m ás fiel será el sonido capt urado respect o al original, con lo que
t endrá m ás calidad.

Para m edir el núm ero de capt uras ut ilizam os la frecuencia del m uest reo. Com o un Herzio es un
ciclo por segundo, la frecuencia de una capt ura en Herzios represent a el núm ero de capt uras que
realizam os en un segundo. Así, una frecuencia de m uest reo de 20 KHz ( 20 Kilo Herzios = 20000
Herzios) realizará 20000 capt uras de punt os cada segundo.

El oído hum ano es capt ar de capt ar la asom brosa cant idad de 44000 sonidos por segundo, es
decir, 44 KHz. Por lo t ant o, para que un sonido digit al t enga suficient e calidad deberá est ar
basado en una frecuencia sim ilar a ést a. En general, el valor est ándar de capt ura de sonidos de
calidad es de 44,1 Khz ( calidad CD) , aunque hay capt uradoras de sonido profesionales que llegan
hast a los 100 Khz, con obj et o de obt ener un m ayor núm ero de punt os sobre la m uest ra,
consiguiendo una calidad m áxim a.

Ot ro concept o del que habréis oído hablar en t orno al sonido digit al es el núm ero de bit s de una
t arj et a de sonido. El origen de est a m agnit ud es que, a la hora de capt urar el sonido, no sólo es
im port ant e el núm ero de m uest reos t om ados, sino t am bién la cant idad de inform ación capt urada
en cada uno de esos m uest reos.

Una vez capt urado el sonido, para su post erior reproducción en un equipo inform át ico es
necesario m andar una serie de im pulsos o posiciones a los alt avoces para que creen el sonido a
part ir de ellos. ¿Cóm o?. Bien, produciendo a part ir de esas posiciones m ovim ient os de las
m em branas de los alt avoces, m ovim ient os que t ransform an de nuevo el sonido digit al en
analógico, est ado en el que es capaz de viaj ar por el aire y producir los est ím ulos necesarios en
nuest ros t ím panos, con lo que som os capaces de percibir el sonido “ original” . Cuant as m ás
posiciones de inform ación se envíen a los alt avoces, m ej or calidad t endrá el sonido reproducido.

Con est as bases, se define el núm ero de bit s de un sonido digit al com o el núm ero de im pulsos de
inform ación ( posiciones) que se envían a los alt avoces para su t ransform ación en ondas
analógicas.

Las t arj et as de sonido act uales t rabaj an norm alm ent e con 8 bit s de inform ación, con los que se
pueden obt ener 28= 256 posiciones ( ceros y unos binarios) , aunque hay algunas de m ayor calidad
que son capaces de t rabaj ar con capt uras de 16 bit s, que originan 216 = 65536 posiciones de
inform ación.

Com o dat o de referencia, los CDs act uales est án basados en sonido grabado a 44 Khz y con un
t am año de m uest ra de 16 bit s. Est as m edidas se conocen con el nom bre de sonido de calidad CD.

Por últ im o, una vez que el sonido digit al llega a nuest ros oídos, im pact an cont ra los t ím panos,
verdaderas m em branas especializadas que vuelven a t ransform ar las ondas analógicas en
im pulsos eléct ricos, que viaj an hast a nuest ro cerebro, donde son int erpret ados y producen las
sensaciones audit ivas que t odos conocem os.

Una excepción al sonido ant eriorm ent e descrit o, que podem os denom inar " de dat os de sonido" , es
el sonido sint et izado, en el que no se realiza ninguna capt ura de ondas sonoras reales, sino que es
sonido t ot alm ent e digit al, generado direct am ent e en el equipo inform át ico por en reproduct or
digit al conocido con el nom bre de MI DI ( Music I nst rum ent Digit al I nt erface) . Cuando se desea
reproducir una not a m usical concret a, se envía un com ando MI DI al chip sint et izador, que se
encarga de t raducir ese com ando en una vibración especial que produce la not a. Mediant e est e
sist em a es posible crear m elodías bast ant e acept ables, aunque nunca t endrán la calidad ni riqueza
de una onda sonora nat ural capt urada.

Sonido e n H TM L ( I I I )

For m a t os de son ido

A la hora de incluir ficheros de sonido en nuest ras páginas web debem os dist inguir ent re los que
pueden ser direct am ent e ej ecut ados por el navegador y aquellos que deben ser abiert os por un
program a propio, que deberá t ener el usuario inst alado en su equipo para poder reproducir el
fichero.

De form a general, podem os incluir en la web los siguiet es t ipos de ficheros de audio.
 • W AV ( Wave form Audio File form at ) : form at o t ípico de la casa Windows, de elevada
calidad, usado en las grabaciones de CDs, que t rabaj a a 44 Khz y a 16 bit s. Const a
básicam ent e de t res bloques: el de ident ificación, el que especifica los parám et ros del
form at o y el que cont iene las m uest ras. Su principal inconvenient e es el elevado peso de
los ficheros, por lo que su uso queda lim it ado en I nt ernet a la reproducción de ruidos o
frases cort as. La ext ensión de est os ficheros es .wav. Es soport ado por I nt ernet Explorer y
Net scape 4x.

• AU ( Audio File form at ) : form at o creado por la casa Apple para plat aform as MAC, cuyos
ficheros se guardan con la ext ensión .au

• M I D I form at o de t abla de ondas, que no guardan el sonido a reproducir, sino un código

que nuest ra t arj et a de sonido t endrá que int erpret ar. Por ello, est e t ipo de ficheros no
puede alm acenar sonidos reales, com o voces o m úsica rela grabada; sólo puede cont ener
sonidos alm acenables en t ablas de ondas. Com o cont arpart ida, los ficheros MI DI , que se
guardan con ext ensión .m id, son de pequeño t am año, lo que los hace idóneos para la web.
Es soport ado por I nt ernet Explorer y Net scape 4x.

• M P3 ( MPEG 1 Layer 3) : desarrollado por el MPEG ( Moving Pict ure Expert Group) , obt iene
una alt a com presión del sonido y una m uy buena calidad basándose en la elim inación de
los com ponent es del sonido que no est én ent re 20 hz y 16 Kh ( los que puede oir el ser
hum ano norm al) . Tiene en cuent a el sonido envolvent e ( surround) y la ext ensión
m ult ilingüe, y guarda los ficheros con la ext ensión .m p3, y perm it e configurar el nivel de
com presión, consiguiéndose calidades sim ilares a las del form at o WAVE pero con hast a 10
veces m enos t am año de fichero. Es soport ado direct am ent e sólo por I nt ernet Explorer 5.5
y superiores.

• M OD especie de m ezcla ent re el form at o MI DI y el form at o WAV, ya que por un lado

alm acena el sonido en form a de inst rucciones para la t arj et a de sonido, pero por ot ro
puede alm acenar t am bién sonidos de dint rum ent os m usicales digit alizados, pudiendo ser
int erpret ados por cualquier t arj et a de sonido de 8 bit s. No es un form at o est ándar de
Windows, por lo que su uso es m ás indicado para sist em as Mac, Am iga o Linux. La
ext ensión de los ficheros es .m od

• µ - La w For m a t de calidad sim ilar al form at o WAV, es original de las m áquinas NeXt , y
guarda sus ficheros con la ext ensión .au

• Re a l Au dio de calidad m edia, aunque perm it e ficheros m uy com prim idos, que guarda con
ext ensión .rm p o .ra. Para su reproducción hace falt a t ener inst alado el plugin Real Audio.

A la hora de t rabaj ar con est os form at os de sonido, deberem os t ener en cuent a las lim it aciones en
su uso, ya que m uchos de ellos no pueden ser reproducidos m ás que en sist em as operat ivos
concret os, y aún así, con plugins o program as específicos.

En busca de la com pat ibilidad, si usam os Windows com o sist em a operat ivo conviene usar para
ficheros m usicales a reproducir direct am ent e en el navegador los form at os WAV y MI DI , que son
los m ás com pat ibles.

En cam bio, si lo que deseam os es poder brindar a nuest ros visit ant es la opción de navegar con
m úsica ej ecut able desde un program a ext erno, lo m ej or es usar ficheros en form at o MP3, ya que
en la act ualidad la m ayoría de los navegant es t ienen inst alado en su equipo algún program a
reproduct or adecuado, pudiendo valer desde soft ware incluido en Windows, com o Windows Media
Player, hast a aplicaciones est ernas, com o Winam p. En est e caso, bsat a colocar un enlace norm al
en nuest ras páginas, apunt ando al fichero de sonido.
Com o ej em plo, si querem os enlazar en nuest ra página un fichero MP3, bast aría con escribir:

< a href= " sonidos/ m p3.m p3" t arget = " _blank" > Pincha aquí para oir la m úsica. < / a>

Que nos da:

Pincha aquí para oir la m úsica

Con est o, al pinchar el usuario el enlace, se lanzará la aplicación que t enga asociada con el t ipo de
fichero MP3, que dependerá de la configuración int erna de cada navegador y usuario.

Un caso especial es Net scape 6x. Casi no adm it e direct am ent e ningún t ipo de form at o de sonido
incrust ado en la página, al no venir configuradas por defect o las aplicaciones o plugins necesarios.
Y en el caso de ficheros enlazados, Nest scape 6x suele lanzar su propio reproduct or, que suele ser
de la casa AOL, precisando para la ej ecución una serie de pasos para darse de alt a en esa
com pañia com o usuario del soft ware.

Resum iendo: cada usuario t endrá configurada su m áquina de form a part icular, soliendo
prevalecer el últ im o soft ware de sonido inst alado, ya que est os program as suelen adueñarse de
ciert os t ipos de ficheros para su ej ecución aut om át ica. Ent re las apliaciones posibles de ej ecución
de ficheros de audio, bien de form a direct a o en form a de plugina para los navegadores, dest acan
Windos Media Player, Real Player, Winam p, Quick t im e, et c.

Son ido e n H TM L ( I V)

I n clu ir sonidos e n la w e b.

Una vez elegidos nuest ros ficheros de sonido, es hora de incluirlos en nuest ra página web.
Lógicam ent e, para que un fichero de audio pueda ser reproducido por un navegador es necesario
que su m áquina t enga incluida una t arj et a de sonido y un par de alt avoces.

Exist en diversas form as de incluir un fichero de audio en una página, form as que dependen del
t ipo de fichero y del navegador usado, y podem os usar diferent es et iquet as para cada una de
ellas.

BGSOUN D

La et iquet a bgsound incorpora sonidos de fondo en una página web, sonidos que se ej ecut an
aut om át icam ent e al cargarse la página. Es una et iquet a propiet aria de Microsoft , por lo que sólo
es int erpret ada por I nt ernet Explorer, adm it iendo los form at os de audio MI D y WAV, aunque
generalm ent e t am bién acept a AU y MP3, en versiones act uales del nevagador o m ediant e plugins
de uso general.

Su sint axis general, con sus at ribut os m ás im port ant es, es del t ipo:

< bgsound src= " rut a_fichero" loop= " l" balance= " b" volum e= " v" > < / bgsound>

Donde:

• sr c= " r ut a _ fiche r o" fij a la rut a en la que se encuent ra el fichero de audio a reproducir. La
rut a puede ser relat iva a nuest ro sist em a de carpet as local, absolut a respect o el sist em a
de carpet as del servidor web o una URL com plet a que localice el fichero en I nt ernet .
 • loop= " l" det erm ina el núm ero de veces ( l) que se debe ej ecut ar el fichero de audio. Si le
dam os el valor infinit e, el fichero se reproducirá indefinidam ent e.

• ba la n ce = " b" det erm ina el balance del sonido ent re los dos alt avoces del equipo, es decir,
la pot encia o int ensidad con que se oirá en cada uno de ellos ( derecho e izquierdo) . Sus
valores pueden est ar ent re - 10,000 y + 10,000, correspondiendo el valor 0 a un balance
equilibrado ent re los dos alt avoces.

• volu m e = " v" fij a el volum en al que se oirá el sonido, y sus valores pueden variar ent re -
10,000 ( m ínim o) y 0 ( m áxim o) . No es soport ado por los equipos MAC.

Ej e m plo:

< bgsound src= " ../ sonidos/ w [Link]" balance= 0 volum e= 0> < / bgsound>

Que podéis ver funcionando en est a vent ana ( sólo I nt ernet Explorer) .

La et iquet a bgsound adm it e m uchas m ás propiedades ( disabled, delay, id, class, cont rols, et c.) .
Asím ism o, est a et iquet a es accesible en I nt ernet Explorer m ediant e código JavaScript , pudiendo
m odificar en t iem po real sus propiedades balance, loop, src, y volum e, aunque ést a últ im a sólo es
accesible en plat aform as PC. Para una inform ación com plet a sobre t odas las propiedades y
funcionalidades de est e et iquet a podéis visit ar la página correspondient e de Microsoft :

ht t p: / / m sdn.m icrosoft .com / library/ default .asp?url= / workshop/ aut hor/ dht m l/ reference/ obj ect s/ bg
[Link]

EM BED

Nest cape Navigat or im plem ent ó la et iquet a em bed para incorporar ficheros de audio. Es ést a una
et iquet a de caract er general, que se usa para la inclusión en las páginas web de t odos aquellos
archivos aj enos al navegador y que necesit an por lo t ant o la ej ecución de algún plugin para su
int erpret ación.

Paradój icam ent e, I nt ernet Explorer asum ió después el uso de est a et iquet a para la inclusión de
ficheros de audio, para llegar a int erpret arla m ej or y am pliarla con m ás at ribut os y propiedades,
de t al form a que la ej ecución de sonidos con em bed es act ualm ent e m ás cóm oda con est e
navegador, al incorporar la suit e de Microsoft sus propios plugins para la int erpret ación de los
diferent es form at os de audio. En cam bio, si usam os Net scape Navigat or nos encont rarem os en
m uchos casos con un fallo en la reproducción o con un engorroso m ensaj e de necesidad de algún
plugin especial ( sobre t odo en las versiones 6x) , lo que nos obligará a visit ar la página de
Net scape para su descarga e inst alación, que m uchas veces no será efect iva.

Sea com o sea, hay que indicar que est a et iquet a nos va a incluir en la página web un obj et o
especial, una especie de consola de m ando, denom inada Crescendo, que const a de t res bot ones,
sim ilares al de cualquier reproduct or de audio: un bot ón Play, para com enzar la reproducción ( si
no est á est ablecida a aut om át ica) , un bot ón Pause, para det enerla m om ent áneam ent e y un bot ón
St op, para det enerla definit ivam ent e ( puest a a cero) . Est a consola es diferent e según el
navegador usado; en el caso de I nt ernet Explorer se m uest ra la t ípica consola de Windows Media,
cuyo t am año podem os configurar, m ient ras que en Net scape se m uest ra una consola propia, de
t am año fij o definido.

La sint axis general de la et iquet a em bed es del t ipo:

< em bed at r ibut o1= " valor1" at ribut o2= " valor2" ...at ribut oN= " valorN" > < / em bed>

Y en el caso que nos ocupa, de la inclusión de ficheros de audio, los at ribut os podem os dividirlos
en dos t ipos:

1 . At r ibu t os r e fe r e n t e s a l son ido:

• sr c= " r ut a _ fiche r o" , que fij a la rut a en la que se encuent ra el fichero de audio a
reproducir. La rut a puede ser relat iva a nuest ro sist em a de carpet as local, absolut a
respect o el sist em a de carpet as del servidor web o una URL com plet a que localice le fichero
en I nt ernet .

• loop= " l/ t r u e / fa lse " , que det erm ina el núm ero de veces que se debe ej ecut ar el fichero
de audio. Los valores adm it idos son l ( núm ero ent ero de veces) , t rue ( infinit as veces) y
false ( sólo una vez) . Sólo es reconocida por Net scape Navigat or.

• pla ycou n t = " n " , que define el núm ero de veces ( n) que se debe ej ecut ar en fichero de
audio en el caso de I nt ernet Explorer.

• t ype = " t ipo_ fiche r o" , at ribut o im port ant e, que declara el t ipo de fichero de audio que
est am os usando, con lo que el navegador web puede ej ecut ar el program a o plugin
adecuado para la reproducción del fichero. Puede ser audio/ m idi, audio/ wav, et c.

• a u t ost a r t = " t r u e / fa lse " , que det erm ina si el fichero de audio debe em pezar a
reproducirse por sí sólo al cargarse la página o si por el contrario será preciso la act uación
del usuario ( o de código de script ) para que com ience la audición.

• plu gin spa ge = " URL" , que est ablece, en caso de ser necesario un plugin especial para
reproducir el fichero, la página web donde se puede descragar el m ism o. Sólo se act iva en
el caso de que el navegador no sea capaz de reproducir el fichero por sí m ism o, y es
soport ada t an sólo por Net scape Navigat or.

• n a m e = " n om br e " , que asigna un nom bre ident ificador ( debe ser único en la página) a
una et iquet a em bed det erm inada, con obj et o de ser accedida luego por lenguaj es de script .

• volu m e = " v" , que det erm ina el volum en de reproducción del sonido, y que puede variar
ent re 0 y 100. Es sólo soport ada por Net scape Navigat or, que en la consola m uest ra el
valor est ablecido en su indicador de volum en, siendo su valor por defect o 50. En en caso
de I nt ernet Explorer, el valor del volum en por defect o es 50 en plat aform as PC, y 75 en
MAC, siendo necesario act uar sobre el cont rol de volum en de la consola para m odificarlo.

2 . At r ibu t os r e fe r e n t e s a la consola :

• h idde n = " t r u e / fa lse " , que est ablece si la consola va a ser visible ( false) o no ( t rue) . Es
ést e un aspect o polém ico, ya que si ocult am os la consola obligam os al usuario a oir
nuest ro fichero, sin posibilidad de det enerlo ni de m odificar el volum en, y si la m ost ram os
est arem os incrust ando en la pant alla un obj et o que m uchas veces nos rom perá el esquem a
de diseño de nuest ra página. Queda det erm inar su uso en cada caso concret o.

• w idt h = " w " , que det erm ina el ancho visible de la consola, en pixels. height = " h" , que
det erm ina el alt o visible de la consola, en pixels. Est os at ribut os son t am bién m uy
im port ant es, caso de que hayam os est ablecido hidden= " false" , ya que de su valor va a
depender la correct a visulazación de la consola. En el caso de I nt ernet Explorer, que
m uest ra un logo de Windows Media sobre los cont roles, el t am año m ínim o acept able debe
ser de 140x100 pixels, ya que si no la consola saldrá deform ada en exceso o recort ada. Y
en el caso de Net scape Navigat or, deberem os asignar unos valores de 145x60 pixels, que
es lo que ocupa la consola; si ponem os un t am año m enor, la consola será recort ada,
perdiendo funcionalidades, y si asignam os un t am año m ayor, aparecerán espacios grises
 alrededor de la consola, afeando el aspecto de la página. Si no especificam os est os
at ribut os y t am poco hidden, nos aparecerán en la página t an sólo los m andos de la
consola, sin logot ipos añadidos ( I nt ernet Explorer) o la consola recort ada ( Net scape
Navigat or) .

• a lign= " t op/ bot t om / ce n t e r / ba se lin e / le ft / r igh t /

t e x t t op/ m iddle / a bsm iddle / a bsbot om " , análogo al de la et iquet a I MG, define
la alineación horizont al o vert ical de la consola respect o de los elem ent os de la página.

• h spa ce = " hs" , que est ablece la separación horizont al, vspace= " vs" , que est ablece la
separación vert ical, en pixels, ent re la consola y los elem ent os de la página que la redean.
Análoga a sus equivelent es de la et iquet a I MG.

Est os son los at ribut os principales, aunque podem os encont rar referencias de ot ros adm it idos,
aunque no suelen ser operat ivos en la realidad, ya que no suelen funcionar de form a correct a o
son específicos de Nest cape ( com o t oda la serie de at ribut os que configuran los cont roles de la
consola.

Ej e m plo sin con sola :

< em bed src= " ../ sonidos/ m id.m id" hidden= " t rue" t ype= " audio/ m idi" aut ost art = " t rue" > < / em bed>

Que podem os ver en funcionam ient o en est a vent ana.

Ej e m plo con con sola :

< em bed src= " ../ sonidos/ m id.m id" hidden= " false" t ype= " audio/ m idi" aut ost art = " false" widt h= " 150"
height = " 100" > < / em bed>

Que t enem os visible ( y audible) en est a ot ra vent ana.

Son ido e n H TM L ( V)

La e t iqu e t a OBJECT.

Con obj et o de norm alizar la inclusión de ficheros no nat ivos en los navegadores web se decidió
sust it uir las diferent es et iquet as que realizaban est e papel ( APPLET, BGSOUND, EMBED, et c.) , y
que no pert enecían a los est ándares web, por una et iquet a general, que fuera capaz de incrust ar
en el navegador t odo t ipo de ficheros. La et iquet a elegida en el est ándar HTML 4.0 fué OBJECT, a
la que se dot ó de suficient es at ribut os y flexibilidad para poder realizar correct am ent e su t rabaj o.
Debido a est o, la propuest a ha sido usar la et iquet a obj ect t am bién para incluir ficheros de audio
de t odo t ipo en las páginas web.

Ahora bien, la acept ación e im plem ent ación que la m ism a a t enido varía según el navegador en
part icular, así com o en función del obj et o a incrust ar. De est e form a, I nt ernet Explorer a realizado
su propia im plem ent ación de la et iquet a obj ect , incluyendo en ella referencias a filt ros y
com ponent es Act iveX específicos para los ficheros de audio. Por su lado, los navegadores
Net scape no soport an correct am ent e est e et iquet a para ficheros de est e t ipo.

Rest ringiéndonos a I nt ernet Explorer, la polém ica sigue, ya que en diferent es m anuales nos
encont rarem os diferent es form as de incrust ar sonidos m ediant e obj ect , unas que funcionan bien,
y ot ras que no. ¿Porqué sucede est o?. Yo creo que porque Microsoft ha ido usando la et iquet a
obj ect para im plem ent ar t odo un grán conj unt o de com ponent es propios, que adem ás han ido
adapt ándose a las diferent es versiones de I nt ernet Explorer.
Com o regla general, válida no sólo para incrust ar ficheros de sonido, sino t am bién para ot ros
t ipos, la et iquet a obj ect va a definir un obj et o o com ponent e ext erno encargado de la
reproducción del fichero, que en el caso de I nt ernet Explorer suele ser algún t ipo de cont rol
Act iveX. Mediant e obj ect se inst ancia el obj et o, se declara su URL y sus principales propiedades
generales, y m ediant e un conj unt o de et iquet as especiales, PARAM, se le van pasando los valores
que necesit a para su correct o funcionam ient o o para su configuración deseada.

La sint axis general de la et iquet a obj ect , para el caso de ficheros de sonido, es del t ipo:

< obj ect at ribut o1= " valor1" at ribut o2= " valor 2" ... at ribut oN= " valorN" >
< param nam e= " nom br e" value= " valor" >
< param nam e= " nom br e" value= " valor" >
...
< / obj ect >

Los principales at ribut os de obj ect , en referencia a ficheros de audio, son:

• cla ssid= " ide n t ifica dor _ obj e t o" , que fij a la URL del obj et o o com ponent eext erno
necesario para reproducir el fichero de audio, y la im plem ent ación CLSI D de los cont roles
Act iveX necesarios.

• t ype = " t ipo_ fiche r o" , at ribut o im port ant e, que declara el t ipo de fichero de audio que
est am os usando.

• w idt h = " w " , que det erm ina el ancho visible de la consola, en pixels.

• h e igh t = " h" , que det erm ina el alt o visible de la consola, en pixels.

• a lign= " t op/ bot t om / ce n t e r / ba se lin e / le ft / r igh t

/ t e x t t op/ m iddle / a bsm iddle / a bsbot om " , análogo al de la et iquet a I MG, define la
alineación horizont al o vert ical de la consola respect o de los elem ent os de la página.

• h spa ce = " hs" , que est ablece la separación horizont al, vspace= " vs" , que est ablece la
separación vert ical, en pixels, ent re la consola y los elem ent os de la página que la redean.
Análoga a sus equivelent es de la et iquet a I MG.

• a u t ost a r t = " t r u e / fa lse " , que det erm ina si el fichero de audio debe em pezar a
reproducirse por sí sólo al cargarse la página o si por el contrario será preciso la act uación
del usuario ( o de código de script ) para que com ience la audición.

• st a ndby= " m e n sa j e " , que present a en pant alla un m ensaj e al usuario m ient ras el fichero
se carga.

En cuant o a los elem ent os param , los m ás im port ant es son:

• pa r a m na m e = " File N a m e " va lue = " r u t a _ fich e r o" , det erm ina la rut a o URL del fichero
de audio a reproducir. No es necesario ut ilizar sólo ficheros WAV o MI D, pudiendo
reproducirse t am bién ficheros MP3 o Real Audio. El reproduct or del prim ero lo incluye
Explorer en Act iveMovie ( com ponent e de Windows Media) .

• pa r a m na m e = " a u t ost a r t " va lue = " t r ue / fa lse " , indica al navegador si se debe em pezar
a reproducir el sonido aut om át icam ent e al cargar la página o si por el cont rario será
preciso que el usuario pulse el bot ón Play para ello.

No son est os t odos los at ribut os y parám et ros posibles. Es m ás, en cuant o nos m et em os en
com ponent es Microsoft , podem os encont rarnos m ult it ud de configuraciones posibles, que nos van
a perm it ir fij ar m uchos aspect os de los m ism os. Dej o a cada uno la posibilidad de profundizar en
el est udio de aquellos com ponent es y propiedades que necesit e, pero sabiendo que con los
elem ent os vist os arriba t enem os m ás que suficient e para present ar un fichero de audio en nuest ra
página web.

x Ej e m plo:

< obj ect classid= " CLSI D: 05589FA1- C356- 11CE- BF01- 00AA0055595A" widt h= " 150" height = " 175" t ype= " audio/ m idi" >

< param nam e= " FileNam e" value= " ../ sonidos/ xfiles.m id" >
< param nam e= " aut ost ar t " v alue= " t r ue" >
< / obj ect > >

Que podéis ver funcionando en est a vent ana ( sólo I nt ernet Explorer) .

La e t iqu e t a A.

Si hast a ahora hem os vist o cóm o podem os incluir en nuest ras páginas sonidos de fondo o
inicializados por el usuario m ediant e int eracción con la consola Crescendo, vam os a ver ahora
cóm o podem os im plem ent ar audio m ediant e el uso de una de las et iquet as m ás polivalent es en
HTML: la et iquet a A.

Efect ivam ent e, los enlaces son la base del hipert ext o, base a su vez de la web, y dent ro de sus
m últ iples usos podem os considerar el enlace a ficheros de audio. El fichero enlazado puede ser
int erpret ado direct am ent e por el navegador ( porque sea de reproducción direct a o se t enga
inst alado el plugin adecuado) o puede ser ej ecut ado por un program a independient e que se abra
aut om át icam ent e ( Winam p, Real Audio, et c.) , siendo est e el caso m ás com ún. Si el usuario no
dispone del program a o plugin adecuado, se le abrirá una vent ana de descarga del fichero, con lo
que podrá guardarlo hast a disponer de la aplicación necesaria para su reproducción.

La sint axis general en est e caso será del t ipo:

< a href= " rut a_fichero" > Mensaj e< / a>

Ej e m plo de fiche r o M I D :

< a href= " ../ sonidos/ wat er m ark.m id" > Música para t í< / a>

Que podem os ver en funcionam ient o en est a vent ana.

Ej e m plo de fiche r o M P3 :

< a href= " ../ sonidos/ m p3.m p3" > Madonna< / a>

Que t enem os en est a ot ra vent ana.