MANUAL DE HTML

Introduccin
El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcas de hipertexto), es un lenguaje inorm!tico dise"ado para
estructurar textos y presentarlos en orma de hipertexto, #ue es el ormato est!ndar de las p!ginas $e%& 'ara reali(ar tu p!gina )e%
necesitas en principio un editor de textos para escri%ir los *cheros #ue la compondr!n&
+implemente usando el ,-TE'./ de )indo$s puedes reali(ar tus p!ginas )e%, ya #ue una p!gina )e% es simplemente un texto al #ue se le
a"aden dierentes eti#uetas con el o%jeto de indicar dierentes propiedades&
/e cual#uier manera existen editores espec0*cos para reali(ar p!ginas )e%& /ichos editores permiten por medio de men1s e iconos incluir
eti#uetas de HTML sin necesidad de teclearlas&
Es decir, para poner un texto en cursi2a en una p!gina )e% de%er0amos escri%ir la instruccin3
<i>Texto</i>
En un editor de HTML, simplemente marcar0amos el texto con el ratn y pulsar0amos el icono de cursi2a, el editor de encargar0a de
poner autom!ticamente las eti#uetas <i> y </i> &
+in em%argo, en Manual4HTML&com te aconsejamos #ue uses el 5loc de ,otas& Tendr!s a%soluto control so%re tu cdigo y sa%r!s encontrar
mucho m!s !cilmente los errores #ue, todos, cometemos de 2e( en cuando&
6uando escri%as tu p!gina )e% te recomendamos #ue todos los links, nom%res de gra*cos, etc&&& los consignes en letra min1scula ya #ue la
mayoria de los ser2idores )e% distinguen entre may1sculas y min1sculas& Es decir, las eti#uetas3
<img src="dibujo.gi">
<img src="Dibujo.!i">
Hacen reerencia a *cheros distintos, aun#ue en tu disco duro (si usas )indo$s) har!n reerencia al mismo *chero, ya #ue )indo$s no
distingue entre may1sculas y min1sculas& .s0 #ue procura escri%ir correctamente estos nom%res&
5!sicamente, el HTML consta de una serie de rdenes o eti#uetas, #ue indican al na2egador #ue estemos utili(ando, la orma de representar
los elementos (texto, gr!*cos, etc&&&) #ue contenga el documento& En este manual nos reeriremos a estas rdenes con la pala%ra 7eti#ueta7&
Las eti#uetas de HTML pueden ser de dos tipos, cerradas o a%iertas&
Las eti#uetas cerradas son a#uellas #ue tienen una pala%ra cla2e #ue indica el principio de la eti#ueta y otra #ue indica el *nal& Entre la
eti#ueta inicial y la *nal se pueden encontrar otras eti#uetas&
Las eti#uetas a%iertas constan de una sola pala%ra cla2e& 'ara dierenciar las eti#uetas del resto del texto del documento se encierran entre los
s0m%olos 8 y 9& Las eti#uetas cerradas incluyen el car!cter : antes de la pala%ra cla2e para indicar el *nal de la misma& ;na eti#ueta puede
contener 7par!metros7& Estos par!metros se indican a continuacin de la pala%ra cla2e de la eti#ueta&
Ejemplos 3
eti#ueta cerrada
<c"nt"r> Mi p!gina )e% </c"nt"r>
eti#ueta a%ierta
<#r>
manual4html&com:imprimi%le<=&html
eti#ueta con par!metros
<bod$ bgco%or="&''''''"> </bod$>
Los *cheros #ue contienen documentos HTML suelen tener la extensin &html o &htm& En este manual se han *jado los siguientes criterios
a la hora de escri%ir la sintaxis de las eti#uetas de HTML3
>?) Las eti#uetas se indican en letra min1scula y en negrilla& @?) Los par!metros de las eti#uetas se indican en letra min1scula y negrilla& A?) El
resto de elementos se indican en letra normal& <?) Las pala%ras a resaltar en el texto se indican en cursi2a y negrilla&
Estructur( b)sic(
;n documento escrito en HTML contendr0a %!sicamente las siguientes eti#uetas3
<#tm%> Bndica el inicio del documento& <#"(d> Bnicio de la ca%ecera& <tit%"> Bnicio del t0tulo del documento& </tit%"> Cinal del t0tulo
del documento& </#"(d> Cinal de la ca%ecera del documento& <bod$> Bnicio del cuerpo del documento& </bod$> Cinal del cuerpo del
documento& </#tm%> Cinal del documento&
El documento se hallar! situado en alg1n ordenador al #ue se pueda acceder a tra2es de Bnternet& 'ara indicar la situacin del documento en
Bnternet se utili(a la ;DL (;niorm Desource Locator)& La ;DL es el camino #ue ha de seguir nuestro na2egador a tra2es de Bnternet para
acceder a un determinado recurso, %ien sea una p!gina )e%, un *chero, un grupo de noticias, etc&
Es decir, lo #ue el na2egador de p!ginas )e% hace es acceder a un *chero situado en un ordenador #ue est! conectado a la red Bnternet& La
estructura de una ;DL para una p!gina )e% suele ser del tipo http3::dominio:directorio:*chero& El dominio indica el nom%re del ordenador al
#ue accedemos, el directorio es el nom%re del directorio de ese ordenador y *chero el nom%re del *chero #ue contiene la p!gina )e% escrita
en HTML& 'or ejemplo3
http3::$$$&manual4html&com:directorio:index&hml
/onde &&&&
http3:: es el indicador de pagina )e% $$$&manual4html&com es el /ominio (nom%re) del ordenador :directorio: es el /irectorio dentro del
ordenador index&html es el Cichero #ue contiene la p!gina )e%
*(b"c"r(
La eti#ueta <#"(d></#"(d> delimita la ca%ecera del documento& /entro de la ca%ecera es importante de*nir el t0tulo de la p!gina por medio
de la eti#ueta <tit%"></tit%">& Este t0tulo ser! el #ue apare(ca en la %arra de nuestro na2egador de p!ginas )e%&
Ejemplo 3
<tit%">'!gina del Manual de HTML</tit%">
/entro de la ca%ecera de nuestro documento podemos incluir otras eti#uetas adicionales& La eti#ueta <m"t(> indica al na2egador de Bnternet
las pala%ras cla2e y contenido de nuestra p!gina )e%& Ejemplos 3
<m"t( n(m"="+(gin( d" ,os"" cont"nt="Mi -(gin( -"rson(%. Music( $ +"%icu%(s">
<m"t( n(m"="/"$0ords" cont"nt=",os". music(. -"%icu%(s. %in/s. "s-(1(">
Esta inormacin es 1til para los %uscadores, la primera l0nea orece a los %uscadores una descripcin so%re la p!gina& En cam%io la segunda
l0nea indica las pala%ras cla2e de la p!gina& -tro uso de la eti#ueta <m"t(> es la de indicar documentos con 7reresco autom!tico7& +i se indica
una ;DL se sustituir! el documento por el indicado una 2e( transcurridos el n1mero de segundos especi*cados& +i no se incluye ninguna ;DL se
2ol2er! a cargar en el na2egador el documento en uso transcurridos los segundos indicados& Esto es 1til para p!ginas #ue cam%ian de
contenido con mucha recuencia o para redireccionar a la persona #ue 2isita nuestra p!gina )e% a una nue2a direccin donde se encuentra una
2ersin actuali(ada de nuestra p!gina )e%& Ejemplo 3
<m"t( #tt-2"3ui4="r"r"s#" cont"nt="567U8L=#tt-9//000.microsot.com">
Transcurridos >E segundos se acceder! a la p!gina )e% de Microsot&
La eti#ueta <b(s"> indica la locali(acin de los *cheros, gr!*cos, sonidos, etc&&& a los #ue se hace reerencia en nuestra p!gina )e%& +i no
se incluye esta eti#ueta el na2egador entiende #ue dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra p!gina
)e%&
Ejemplo 3
<b(s" #r"="#tt-9//000.m(nu(%2#tm%.com//m(nu(%/">
*u"r-o
La eti#ueta <bod$></bod$> indica el inicio y *nal de nuestra p!gina )e%& +er! entre el inicio y el *nal de esta eti#ueta donde pongamos los
contenidos de nuestra p!gina, textos, gr!*cos, enlaces, etc&&&& Esta eti#ueta tiene una serie de par!metros opcionales #ue nos permiten indicar
la 7apariencia7 glo%al del documento3
b(c/ground="nombr" d" :c#"ro gr):co"
Bndica el nom%re de un *chero gr!*co #ue ser2ir! como 7ondo7 de nuestra p!gina& +i la imagen no rellena todo el ondo del documento, esta
ser! reproducida tantas 2eces como sea necesario&
bgco%or="cdigo d" co%or"
Bndica un color para el ondo de nuestro documento& +e ignora si se ha usado el par!metro %ackground&
t";t="cdigo d" co%or"
Bndica un color para el texto #ue incluyamos en nuestro documento& 'or deecto es negro&
%in/="cdigo d" co%or"
Bndica el color de los textos #ue dan acceso a un Hiperenlace& 'or deecto es a(ul&
4%in/="cdigo d" co%or"
Bndica el color de los textos #ue dan acceso a un Hiperenlace #ue ya hemos 2isitado con nuestro na2egador& 'or deecto es purpura&
El cdigo de color es un numero compuesto por tres pares de ciras hexadecimales #ue indican la proporcin de los colores 7primarios7, rojo,
2erde y a(ul& El codigo de color se antecede del s0m%olo F&
Ejemplos3
FGGGGGG 4 ,egro
FCCGGGG 4 Dojo
FGGCCGG 4 Herde
FGGGGCC 4 .(ul
FCCCCCC 4 5lanco
El primer par de ciras indican la proporcin de color Dojo, el segundo par de ciras la proporcin de color Herde y las dos 1ltimas la proporcin
de color .(ul& 6ada par de ciras hexadecimales nos permiten un rango de G a @EE& 6om%inando las proporciones de cada color primario
o%tendremos dierentes colores&
,u"go d" c(r(ct"r"s HTML
Todos los na2egadores de p!ginas )e% actuales soportan todos los caracteres gr!*cos del la especi*cacin ISO 8859-1 ,
#ue permiten escri%ir textos en la mayor0a de los paises occidentales&
/e cual#uier orma y como muchos sistemas tienen distintos juegos de caracteres .+6BB, se han de*nido dos ormas de
representar caracteres especiales usando solamente el cdigo .+6BB de I %its& 'ara hacer reerencia a estos caracteres se
les asigna un cdigo numrico o un nom%re de 7entidad 7& .si mismo hay caracteres #ue se utili(an para las eti#uetas de
HTML, por ejemplo 8 y 9 & Estos caracteres pueden ser representados por un cdigo numrico o una entidad cuando
deseemos #ue apare(can en el documento 7tal cual7& Las entidades comien(an por el s0m%olo & (ampersand) y terminan
con el s0m%olo ; (punto y coma)&
. continuacin 2eamos una ta%la con las principales entidades 3
*(r(ct"
r
*digo Entid(
d
*(r(ct"r *digo Entid(
d
J KFAAL 44 7 KFA<L 44
F KFAEL 44 M KFA=L 44
N KFAIL 44 K KFAOL 44
P KFAQL 44 ( KF<GL 44
) KF<>L 44 R KF<@L 44
S KF<AL 44 , KF<<L 44
4 KF<EL 44 & KF<=L 44
: KF<IL 44 3 KFEOL 44
L KFEQL 44 8 KF=GL 44
T KF=>L 44 9 KF=@L 44
U KF=AL 44 V KF=<L 44
W KFQ>L 44 KFQ@L 44
X KFQAL 44 Y KFQ<L 44
Z KFQEL 44 [ KFQ=L 44
\ KF>@AL 44 ] KF>@<L 44
^ KF>@EL 44 _ KF>@=L 44
KF>=GL n%sp ` KF>=>L iexcl
a KF>=@L cent b KF>=AL pound
c KF>=<L curren d KF>=EL yen
e KF>==L %r2%ar f KF>=IL sect
g KF>=OL uml h KF>=QL copy
i KF>IGL ord j KF>I>L la#uo
k KF>I@L not KF>IAL shy
l KF>I<L reg m KF>IEL macr
n KF>I=L deg o KF>IIL plusmn
p KF>IOL sup@ q KF>IQL supA
r KF>OGL acute s KF>O>L micro
t KF>O@L para u KF>OAL middot
v KF>O<L cedil w KF>OEL sup>
? KF>O=L ordm x KF>OIL ra#uo
y KF>OOL rac>< z KF>OQL rac>@
{ KF>QGL racA< | KF>Q>L i#uest
} KF>Q@L .gra2e ~ KF>QAL .acute
KF>Q<L .circ KF>QEL .tilde
KF>Q=L .uml KF>QIL .ring
KF>QOL .Elig KF>QQL 6cedil
KF@GGL Egra2e KF@G>L Eacute
KF@G@L Ecirc KF@GAL Euml
KF@G<L Bgra2e KF@GEL Bacute
KF@G=L Bcirc KF@GIL Buml
KF@GOL ETH KF@GQL ,tilde
KF@>GL -gra2e KF@>>L -acute
KF@>@L -circ KF@>AL -tilde
KF@><L -uml KF@>EL times
KF@>=L -slash KF@>IL ;gra2e
KF@>OL ;acute KF@>QL ;circ
KF@@GL ;uml KF@@>L acute
KF@@@L TH-D, KF@@AL s(lig
KF@@<L agra2e ! KF@@EL aacute
KF@@=L acirc KF@@IL atilde
KF@@OL auml KF@@QL aring
KF@AGL aelig KF@A>L ccedil
KF@A@L egra2e KF@AAL eacute
KF@A<L ecirc KF@AEL euml
KF@A=L igra2e 0 KF@AIL iacute
KF@AOL icirc KF@AQL iuml
KF@<GL eth " KF@<>L ntilde
KF@<@L ogra2e KF@<AL oacute
- KF@<<L ocirc KF@<EL otilde
KF@<=L ouml KF@<IL di2ide
KF@<OL oslash KF@<QL ugra2e
1 KF@EGL uacute KF@E>L ucirc
KF@E@L uuml KF@EAL yacute
KF@E<L thorn KF@EEL yuml
'or lo tanto la pala%ra pgina la podr0amos escri%ir como3
p gina
p &aacute; gina
p &#225; gina
Es por ello #ue si deseamos #ue cual#uier 2isor de p!ginas )e% pueda 2isuali(ar las letras acentuadas de nuestro
documento de%emos utili(ar sus correspondientes entidades o cdigos para representarlas&
Es-(cios $ <(%tos d" Lin"(
En HTML slo se reconoce un espacio entre pala%ra y pala%ra, el resto de los espacios seran ignorados por el na2egador&
Ejemplo Se ver como
Esto es


una frase

Esto es una frase
.s0 mismo, tampoco se respetan las ta%ulaciones, retornos de carro etc&&& 'ara ello existen una serie de eti#uetas #ue indican estos codigos& La
eti#ueta <-r"></-r">o%liga al na2egador a 2isuali(ar el texto tal y como ha sido escrito, respetando ta%ulaciones, espacios, retornos de carro,
etc&&
Ejemplo Se ver como
<pre>
Este texto ha sido
preformateado .
</pre>
Este texto ha sido
preformateado .
'ara indicar un salto de linea se utili(a la eti#ueta <br> y para un cam%io de parrao (deja una linea en %lanco en medio) se utili(a la
eti#ueta <->&
Ejemplo Se ver como
Este texto tiene<br>saltos de linea y <p> de prrafo.
Este texto tiene
saltos de linea y
de prrafo.
La eti#ueta 8p9 puede usarse tam%ien como eti#ueta 7cerrada7 8p98:p9 indicando de esta manera los atri%utos de un parrao en concreto&
6uando se usa de esta manera tiene el parametro align #ue indica al na2egador la orma de 7justi*car7 el parrao& Los 2alores posi%les de este
parametro son left, right y center , estando a1n en estudio el 2alor justify (muchos na2egadores lo aceptan)&
Ejemplo Se ver como
<p align="right">Este es un ejemplo de un prrafo de texto alineado a la derecha.</p>
Este es un ejemplo de prrafo de texto alineado a la derecha
<p align="center">Este es un ejemplo de prrafo de texto centrado.</p>
Este es un ejemplo de prrafo de texto centrado
La eti#ueta <#r> muestra una linea hori(ontal de tama"o determina%le& Tiene los siguientes par!metros opcionales 3 alignT7posicion7 .linea la
linea a la i(#uierda (let), a la derecha (right) o la centra (center)& noshade ,o muestra som%ra, e2itando el eecto en tres dimensiones& si(e T
numero Bndica el grosor de la l0nea en pixels& $idth T num : N Bndica el ancho de la linea en tanto por ciento en uncin del ancho de la 2entana
del na2egador& Tam%ien se puede especi*car un n1mero #ue indicar0a el ancho de la l0nea en pixels&

je!pl" 3
<hr align="center" size="20" width="50%">
La eti#ueta <#r> sin ningun par!metro mostrar0a una linea hori(ontal #ue ocuparia todo el ancho de la p!gina&
*(b"c"r(s
En un documento de HTML se pueden indicar seis tipos de ca%eceras (tama"os de letra) por medio de las eti#uetas
<#5><#=><#>><#?><#6> y <#@>. todas con su respecti2a eti#ueta de cierre& El texto #ue escri%amos entre el inicio y el *n de la eti#ueta
ser! el aectado por las ca%eceras& La ca%ecera <#5> ser! la #ue muestre el texto en mayor tama"o&
Los textos marcados como 7ca%eceras7 pro2ocan autom!ticamente un retorno de carro sin necesidad de incluir la eti#ueta <br> & 'or ejemplo 3
Atributos d"% t";to
'ara indicar atri%utos del texto (negrilla, su%rayado, etc&&&) tenemos 2arias eti#uetas& .lgunas de ellas no son reconocidas por determinados
na2egadores de Bnternet, es por ello #ue segun el na2egador #ue este 2d& utili(ando, 2er! el resultado correctamente o no&
.tri%uto Eti#ueta Ejemplo
,egrita 8%98:%9 8%9 Texto de prue%a 8:%9
6ursi2a 8i98:i9 8i9 Texto de prue%a 8:i9
Teletype 8tt98:tt9 8tt9 Texto de prue%a 8:tt9
+u%rayado 8u98:u9 8u9 Texto de prue%a 8:u9
Tachado 8s98:s9 8s9 Texto de prue%a 8:s9
'arpadeo 8%link98:%link9 8%lnk9 Texto de prue%a 8:%link9
+uperindice 8sup98:sup9 8sup9 Texto de prue%a 8:sup9
+u%indice 8su%98:su%9 8su%9 Texto de prue%a 8:su%9
6entrado 8center98:center9 8center9 Texto de prue%a 8:center9
'or otro lado la eti#ueta <ont></ont> nos permite 2ariar el tama"o, el color, y el tipo de letra de un texto determinado& ;tili(a para ello los
par!metros si(e , %gcolor y ace &
siA"="4(%or"
/a al texto un tama"o en puntos determinado& si(e T S : 4 2alor /a al texto un tama"o tantas 2eces superior (S) o inerior (4) como indi#ue el
2alor&
co%or="codigo d" co%or"
Escri%e el texto en el color cuyo codigo se especi*ca&
(c"="nombr" d" ont"
Escri%e el texto en el tipo de letra especi*cado& +i este tipo de letra no existe en el ordenador #ue 7lee7 la pagina se usara el ont
predeterminado del na2egador&
Ejemplo
<ont siA"="B=" co%or="&''CCCC" (c"="Ari(%" > Texto de prue%a </ont>
Existen otras eti#uetas #ue reali(an las mismas operaciones #ue las antes 2istas en los atri%utos del texto&
Ejemplo
<ont siA"="S@7 co%or=7FCCGGGG7 (c"=7.rial7> Texto de prue%a </ont>
'ara incluir comentarios en la p!gina )e% se utili(a la eti#ueta 8J44 449&
Ejemplo 3
8J44 Esto es un comentario so%re mi pagina )e% 449
Los comentarios no seran mostrados por el na2egador y son 1itiles para reali(ar anotaciones en el documento HTML #ue nos indi#uen lo #ue
estamos haciendo en una determinada parte del documento& .simismo 2eremos m!s adelante #ue la eti#ueta de comentario nos ser! de
utilidad para incluir codigo a2a+cript en nuestra p!gina )e%&
List(s
Existen tres tipos de listas, numeradas, sin numerar y de de*nicin&
Las listas numeradas representar!n los elementos de la lista numerando cada uno de ellos segun el lugar #ue ocupan en la lista& 'ara este tipo
de lista se utili(a la eti#ueta <o%></o%> & 6ada uno de los elementos de la lista ir! precedido de la eti#ueta<%i> & La eti#ueta <o%> puede
lle2ar los siguientes par!metros 3
st(rt="num7
Bndica #ue n1mero ser! el primero de la lista& +i no se indica se entiende #ue empe(ar! por el n1mero >&
t$-"="tipo7
Bndica el tipo de numeracin utili(ada& +i no se indica se entiende #ue ser! una lista ordenada numricamente&
Los tipos posi%les son 3
5 T ,umricamente& (>,@,A,<,&&& etc&)
( T Letras min1sculas& (a,%,c,d,&&& etc&)
A T Letras may1sculas& (.,5,6,/,&&& etc&)
i T ,umeros romanos en min1sculas& (i&ii,iii,i2,2,&&& etc&)
I T ,1meros romanos en may1sculas& (B,BB,BBB,BH,H,&&& etc&)
Ejemplo Desultado
<o%>
<%i> Espa"a <
/%i>
<%i> Crancia <
/%i>
<%i> Btalia </%i
>
<%i> 'ortugal
</%i>
</o%>
>& Espa"a
@& Crancia
A& Btalia
<& 'ortugal
<o%
t$-"=".7>
<%i> Espa"a <
%i>
<%i> Crancia <
%i>
<%i> Btalia <%i
>
<%i> 'ortugal
<%i>
</o%>
.& Espa"a
5& Crancia
6& Btalia
/& 'ortugal
Las listas sin numerar representan los elementos de la lista con un 7topo7 o marca #ue antecede a cada uno de ellos&
+e utili(a la eti#ueta <u%></u%> para delimitar la lista, y <%i> para indicar cada uno de los elementos&
La eti#ueta <u%> puede contener el par!metro t$-" #ue indica la orma del 7topo7 o marca #ue antecede a cada elemento de la lista& Los
2alores de t$-" pueden ser dis/, circ%" o s3u(r" , con lo #ue el topo o marca puede ser un disco, un circulo o un cuadrado&
Ejemplo Desultado
<u%
t$-"="disk7>
<%i> Espa"a </%
i>
<%i> Crancia </%
i>
<%i> Btalia </%i>
<%i> 'ortugal </
%i>
</u%>
Espa"a
Crancia
Btalia
'ortugal
<u%
t$-"="s#uare7
>
Espa"a
<%i> Espa"a </%
i>
<%i> Crancia </%
i>
<%i> Btalia </%i>
<%i> 'ortugal </
%i>
</u%>
Crancia
Btalia
'ortugal
Las listas de de*nicin muestran los elementos tipo /iccionario, o sea, trmino y de*nicin& +e utili(a para ellas la eti#ueta <d%></d%> & El
elemento marcado como trmino se antecede de la eti#ueta <dt> , el marcado como de*nicin se antecede de la eti#ueta <dd> &
Ejemplo Desultado
<d%>
<dt> ))) </dt>
<dd> .%re2iatura de )orld )ide
)e% </dd>
<dt> CT' </dt>
<dd> .%re2iatura de Cile Transer
'rotocol</dd>
<dt> BD6 </dt>
<dd> .%re2iatura de Bnternet Delay
6hat</dd>
</d%>
)))
.%re2iatura de )orld )ide
)e%
CT'
.%re2iatura de Cile Transer
'rotocol
BD6
.%re2iatura de Bnternet Delay
6hat
Existen otros dos tipos de listas menos comunes& Las listas de Men1 o /irectorio se comportan igual #ue las listas sin numerar&
La lista de Men1 utili(a la eti#ueta <m"nu></m"nu> y los elementos se anteceden de<%i> El resultado es una lista sin numerar mas
7compacta7 es decir, con menos espacio interlineal entre los elementos&
La lista de /irectorio utili(a la eti#ueta <dir></dir> y los elementos se anteceden de<%i> & Los elementos tienen un limite de @G caracteres&
Todas las listas se pueden 7anidar7, es decir incluir una lista dentro de otra, con lo #ue se consigue una estructura tipo 7indice de materias7&
Ejemplo
Desultado
<u%
t$-"="disk7>
<%i> 5uscadore
s
<u%>
<%i> ahoo </%i
>
<%i> -le </%i>
<%i> Lycos </%i
>
</u%>
</%i>
<%i> Links
<u%>
<%i> Microsot
</%i>
<%i> B5M </%i>
</u%>
</%i>
</u%>
5uscadores
ahoo
-le
Lycos
Links
Microso
t
B5M
Im)g"n"s
Hasta el momento hemos 2isto como se puede escri%ir texto en una p!gina )e%, as0 como sus posi%les ormatos&

'ara incluir una imagen en nuestra p!gina )e% utili(aremos la eti#ueta <img>&
Hay tres ormatos de im!genes #ue todos los na2egadores modernos reconocen& +on las im!genes GIF , JPG y PNG &
6ual#uier otro tipo de *chero gr!*co o de imagen (5M', '6, 6/D, etc&&&) no ser! mostrado por el na2egador, a no ser #ue disponga de un
programa externo #ue permita su 2isuali(acin&
La eti#ueta 8img> tiene 2arios par!metros3
src=7imagen7 Bndica el nom%re del *chero gr!*co a mostrar&
(%t=7Texto7 Mostrara el texto indicado en el caso de #ue el na2egador utili(ado para 2er la p!gina no sea capa( de 2isuali(ar la imagen&
%o0src=7imagen7 Muestra una segunda imagen 7superpuesta7 so%re la primera una 2e( se carga la p!gina& Este parametro no es reconocido
por la totalidad de los na2egadores ya #ue esta en estudio su aplicacion, asi #ue en la mayoria de los casos sera ignorado mostrandose solo la
primera imagen ( src )& En ,etscape muestra la imagen indicada por %o0src en primer lugar, y posteriormente muestra la imagen indicada
por src & +i las imagenes son iguales pero tienen distinta 7resolucion7 se conseguir! un eecto tipo 7Cade7& +i las imagenes son de distinto
tama"o la imagen indicada en src se redimensionara al tama"o indicado por la imagen indicada en %o0src
(%ign="to- / midd%" / bottom" Bndica como se alinear! el texto #ue siga a la imagen& top alinea el texto con la parte superior de la
imagen, middle con la parte central, y %ottom con la parte inerior&
bord"r="t(m(1o" Bndica el tama"o del 7%orde7 de la imagen& . toda imagen se le asigna un %orde #ue ser! 2isi%le cuando la imagen orme
parte de un Hyperenlace&
#"ig#t="t(m(1o" Bndica el alto de la imagen en puntos o en porcentaje& +e usa para 2ariar el tama"o de la imagen original&
0idt#="t(m(1o" Bndica el ancho de la imagen en puntos o en porcentaje& +e usa para 2ariar el tama"o de la imagen original&
#s-(c"="m(rg"n" Bndica el numero de espacios hori(ontales, en puntos, #ue separar!n la imagen del texto #ue la siga y la anteceda&
4s-(c"="m(rg"n" Bndica el n1mero de puntos 2erticales #ue separaran la imagen del texto #ue le siga y la anteceda&
ism(- / us"m(- Bndica #ue la imagen es un M.'.& Heremos estos parametros m!s adelante en este manual&
Ej"m-%o
<" 4"rD(
como
<img src="c(ution.gi" (%t="*uid(do
EE" >
<i "% n(4"g(dor no -udi"s"
4isu(%iA(r "% gr):co.....
La imagen a mostrar puede encontrase en el mismo lugar (;DL) #ue la pagina )e%& +i este no uera el caso, el nom%re de la imagen ha de
contener la ;DL donde se encuentre la imagen&
Ejemplo
<img src="http://www.microsoft.com/iexplorer.gif"
Heamos 2arios ejemplos 7jugando7 con los tama"os de la imagen, as0 como compro%ando la alineacin de los textos&
!Decuerde #ue en uncin del na2egador #ue 2d& utili(e pueden 2erse o no los eectos de cada parametro)&
Ejemplo "e #er$% como
<img src="c%&tio'.gif"
wi(th=")**"
<img src="c%&tio'.gif"
height="+*"
<img src="c%&tio'.gif"
%lig'="top" ,te'cio' ---
,te'cio' ---
<img src="c%&tio'.gif"
%lig'="mi((le",te'cio' ---
,te'cio' ---
<img src="c%&tio'.gif"
%lig'=".ottom" ,te'cio' ---
,te'cio' ---
/e'g% e' c&e't% <img
src="c%&tio'.gif"
hsp%ce="+*" est%
i'(ic%ci0'.
/e'g% e' c&e't% est%
i'(ic%cio'
/e'g% e' c&e't% <img
src="c%&tio'.gif"
#sp%ce="1*" est%
i'(ic%ci0'.
/e'g% e' c&e't% est%
i'(ic%cio'.
En%(c"s
La caracter0stica principal de una p!gina )e% es #ue podemos incluir Hiperenlaces& ;n Hiperenlace es un elemento de la p!gina #ue hace #ue
el na2egador acceda a otro recurso, otra p!gina )e%, un archi2o, etc&&&
'ara incluir un Hyperenlace se utili(a la eti#ueta <(></(> & El texto o imagen #ue se encuentre dentro de los l0mites de esta eti#ueta ser!
sensi%le, esto #uiere decir #ue si pulsamos con el raton so%re l, se real(ar! la uncion de hiperenlace indicada por la eti#ueta <(></(> &
+i el Hiperenlace est! indicado por un texto, este aparecer! su%rayado y en distinto color, si se trata de una imagen, esta aparecer! con un
%orde rode!ndola& Esta eti#ueta tiene el par!metro #r" #ue indica el lugar a donde nos lle2ar! el Hiperenlace si lo pulsamos&
Ejemplo +e 2er0a como
<( #r"=7http3::$$$&microsot&com:7 > 'ulse para ir a la p!gina
de Microsot </(>
'ulse para ir a la p!gina de
Microsot
+i situamos el ratn encima de la rase y pulsamos, el na2egador acceder! a la p!gina )e% indicada por el par!metro #r" , es decir, acceder!
a la p!gina situada enhttp#$$%%%&!icr"s"ft&c"!$
Lo mismo podr0amos hacer con un gr!*co&
Ejemplo +e 2er0a como
'ara %uscar en Bnternet 3
<(
#r"=7http3::$$$&yahoo&com:
7 >
<img src=7yahoo&gi7 ></(>
'ara %uscar en
Bnternet 3
'ulsando so%re la imagen se acceder0a a la pagina situada en http#$$%%%&yah""&c"!$&
;n Hiperenlace tam%in puede lle2arnos a una (ona de nuestra p!gina& 'ara ello de%emos marcar en nuestra pagina las dierentes secciones en
las #ue se di2ide& Lo haremos con el parametro n(m" &
Ejemplo3
<(
n(m"=7seccion>7 ><
/(>
Esta instruccin marca el inicio de una seccin dentro de nuestra p!gina& La seccion se llamar! secci"n1 & 'ara hacer un enlace a esta seccin
dentro de nuestra p!gina lo har0amos de la siguiente orma 3
<( #r"=7Fseccion>7>'rimera
'arte</(>
- tam%in 3
<(
#r"="http3::$$$&mipagina&dom:mipagina&htmFseccion>">'rimer
a 'arte </(>
;n Hiperenlace puede hacerse a cual#uier tipo de *chero& 6on las eti#uetas anteriores hemos 2isto como hacer enlaces a p!ginas )e% o
secciones dentro de una p!gina $e%, pero podr0amos hacer un Hiperenlace a un grupo de noticias, o a otro ser2icio de Bnternet&
Ejemplo3
<( #r"="ne$s3::ne$s&actualidad&es:7>,oticias de
actualidad </(>
.simismo podemos hacer #ue el Hiperenlace de como resultado el en20o de un correo electrnico a una direccin de correo determinada&
Ejemplo3
<( #r"="mailto3usuarioVemail&dom7> En20ame tus
sugerencias </(>
Tam%in podemos reali(ar un Hiperenlace a un *chero cual#uiera& En este caso el na2egador intentar! 7ejecutar7 el *chero, y si no puede
hacerlo nos preguntar! si deseamos gra%arlo en nuestro ordenador& Esta es una orma sencilla de permitir a los 2isitantes de nuestra p!gina
copiar *cheros a su ordenador&
<( #r"="m(nu(%.Ai-">'ulsa a#ui para lle2arte una copia
del manual& </(>
T(b%(s
Las ta%las nos permiten representar cual#uier elemento de nuestra p!gina (texto, listas, im!genes, etc&&&) en dierentes *las y columnas
separadas entre si& Es una herramienta muy 1til para 7ordenar7 contenidos de distintas partes de nuestra p!gina&
La ta%la se de*ne mediante la eti#ueta <t(b%"></t(b%">. Los par!metros opcionales de esta eti#ueta son 3
bord"r="num". Bndica el ancho del %orde de la ta%la en puntos&
c"%%s-(cing="num" Bndica el espacio en puntos #ue separa las celdas #ue estan dentro de la ta%la&
c"%%-(dding="num" Bndica el espacio en puntos #ue separa el %orde de cada celda y el contenido de esta&
0idt#="num" F Bndica la anchura de la ta%la en puntos o en porcentaje en uncin del ancho de la 2entana del na2egador& +i no se indica
este par!metro, el ancho se adecuar! al tama"o de los contenidos de las celdas&
#"ig#t="num" F Bndica la altura de la ta%la en puntos o en porcentaje en uncin del alto de la 2entana del na2egador& +i no se indica este
par!metro, la altura se adecuar! a la altura de los contenidos de las celdas&
bgco%or="codigo d" co%or" Especi*ca el color de ondo de toda la Ta%la&
'ara de*nir las celdas #ue componen la ta%la se utili(an las eti#uetas <td> y <t#> &<td> indica una celda normal, y <t#> indica una celda de
7ca%ecera7, es decir, el contenido ser! resaltado en negrita y en un tama"o ligeramente superior al normal& Los par!metros opcionales de
am%as eti#uetas son3
(%ign="%"t / c"nt"r / rig#t / justi$" Bndica como se de%e alinear el contenido de la celda, a la i(#uierda (let), a la derecha (right), centrado
(center) o justi*cado (justiy)&
4(%ign="to- / midd%" / bottom" Bndica la alineacin 2ertical del contenido de la celda, en la parte superior (top), en la inerior (%ottom), o en
el centro (middle)&
ro0s-(n="num" Bndica el n1mero de *las #ue ocupar! la celda& 'or deecto ocupa una sola *la&
co%s-(n="num" Bndica el n1mero de columnas #ue ocupar! la celda& 'or deecto ocupa una sola columna&
0idt#="num" F Bndica la anchura de la columna en puntos o en porcentaje en uncin del ancho de la 2entana del na2egador& +i no se
indica este par!metro, el ancho se adecuar! al tama"o de los contenidos& Este par!metro solo unciona en los na2egadores modernos&
bgco%or="codigo d" co%or" Especi*ca el color de ondo del elemento de la Ta%la& 'ara indicar #ue aca%a una *la de celdas se utili(a la
eti#ueta 8tr9 & . continuacin mostraremos un ejemplo de una ta%la #ue contiene solo texto& 6omo se indic anteriormente el contenido de las
celtas puede ser cual#uier elemento de HTML, un texto, una imagen, un Hiperenlace, una Lista, etc&&&
Ej"m-%o
<t(b%" bord"r="?" c"%%s-(cing="?"
c"%%-(dding="?" 0idt#="GCF">
<tr>
<t# (%ign="c"nt"r"> Husc(dor"s</t#>
<t# (%ign="c"nt"r" co%s-(n="="> Itros
Lin/s</t#>
</tr>
<tr>
<td (%ign="%"t">J(#oo</td>
<td (%ign="%"t">Microsot</td>
<td (%ign="%"t">IHM</td>
</tr>
<tr>
<td (%ign="%"t">Inos""/</td>
<td (%ign="%"t">A--%"</td>
<td (%ign="%"t">Digit(%</td>
</tr>
</t(b%">
<" 4"rD(
como9
Husc(dor"s Itros Lin/s
ahoo Microsot B5M
Bnoseek .pple /igital
Las eti#uetas <td> y <t#> son cerradas seg1n el estandar de HTML, es decir #ue un elemento de ta%la <td> de%eria cerrarse con un </td> ,
sin em%argo los na2egadores asumen #ue un elemento de la ta%la, #ueda automaticamente 7cerrado7 cuando se 7a%re7 el siguiente&
M(-(s
;n Mapa es una imagen #ue permite reali(ar dierentes Hiperenlaces en uncin de la 7(ona7 de la imagen #ue se pulse& Las eti#uetas para
crear mapas son<m(-></m(-> y <(r"(> &
La eti#ueta <m(-> identi*ca al mapa y tiene el par!metro n(m" para indicar el nom%re del mapa&
La eti#ueta <(r"(> de*ne las areas sensi%les de la imagen& Tiene los siguientes par!metros o%ligatorios3
s#(-"=7tipo7 Bndica el tipo de area a de*nir&
coords = 7coordenadas7 Bndica las coordenadas de la *gura indicada con shape&
#r" = 7;DL7 Bndica la direccin a la #ue se accede si se pulsa en la (ona delimitada por el area indicada&
Los tipos de area pueden ser los siguientes3
r"ct ~rea rectangular& +e de%en especi*car las coordenadas de la es#uina superior i(#uierda y las de la es#uina inerior derecha&
-o%$ 'ol0gono& +e de%en especi*car las coordenadas de todos los 2rtices del pol0gono& El na2egador se encarga de 7cerrar7 la *gura&
circ%" 60rculo& +e de%e especi*car en primer lugar las coordenadas del centro del c0rculo y a continuacin el 2alor del radio (en puntos)&
+i dos !reas se superponen, se ejecutar! la #ue se encuentre en primer lugar en la de*nicin del mapa& Es importante de*nir una 1ltima !rea
#ue a%ar#ue la totalidad del gr!*co para direccionar a una ;DL 7por deecto7, con el o%jeto de contemplar el caso de #ue no se pulse so%re un
area de*nida&
Heamos un ejemplo completo&
<m(- n(m"=7casa7>
<(r"(
s#(-"=7poly7 coords=7@,=@,EI,=@,@O,>7 #r"=7tejad
o&htm7 >
<(r(
s#(-"=7rect7 coords=7@>,>G>,AE,>AO7 #r"=7puerta
&htm7 >
<(r"(
s#(-"=7rect7 coords=7@,=<,EI,>AO7 #r"=7casa&htm
7 >
<(r"(
s#(-"=7circle7 coords=7OG,I=,@>7 #r"=7ar%ol&htm7
>
<(r"(
s#(-"=7rect7 coords= 7IO,QO,OE,>AO7 #r"=7tronco&
htm7 >
<(r"(
s#(-"=7rect7 coords=7G,G,Q=,>AO7 #r"=7di%ujo&htm
7 >
</m(->

'ara acti2ar el mapa de%emos indicar la imagen a mostrar, indicando #ue dicha imagen es tratada por un mapa& 'ara ello escri%ir0amos la
siguiente eti#ueta3
<img src = 7gra*co&gi7 us"m(-
= 7Fcasa7 >
6omo podemos o%ser2ar, el proceso mas la%orioso es el de determinar las coordenadas& Existen programas como 2,P/3I" #ue permiten
reali(ar este proceso de una manera sencilla, simplemente de*niendo las (onas con el raton& El programa M.'THB+ permite a%rir una imagen
tipo &BC y marcar las (onas sensi%les& Este programa creara un *chero con extension .m(- #ue contendra en su interior las coordenadas de
cada area& 6on esta inormacin nos sera mucho mas acil escri%ir
'ormu%(rios
Los ormularios nos permiten dentro de una p!gina )e% solicitar inormacin al 2isitante y procesarla&
En un ormulario podremos solicitar dierentes datos (campos) cada uno de los cuales #uedar! asociado a una 2aria%le& ;na 2e( se hayan
introducido los 2alores en los campos, el contenido de stos ser! en2iado a la direccin (;DL) donde tengamos el programa #ue pueda procesar
las 2aria%les&
'ara poder reali(ar este 1ltimo paso de procesar las 2aria%les necesitaremos reali(ar un programa externo en algun lenguaje de programacin
como 'H', .+', 'EDL, 6SS o Hisual 5asic& . este programa externo se le suele llamar 4GI (6ommon ate$ay Bnterace)& La creacin de este
tipo de programas ser0a tema de otro manual dierente, por lo #ue a#u0 2eremos como se pueden en2iar las 2aria%les a nuestra direccin de
correo electrnico&
La declaracin del ormulario se pone entre las eti#uetas <orm></orm> & En el interior de la declaracin se indican los elementos (2aria%les)
de entrada& La eti#ueta <orm>tiene los par!metros (ction y m"t#od &
(ction=7programa7 Bndica el programa #ue 2a a 7tratar7 a las 2aria%les #ue se en20en con el ormulario& En nuestro caso en2iaremos las
2aria%les por correo electrnico, con lo #ue el 7programa7 ser! "m(i%to9 dir"ccionKd"Kcorr"o" &
m"t#od="post : get7 Bndica el mtodo seg1n el #ue se transeriran las 2aria%les& '-+T produce la modi*cacin del documento de destino
(como en el caso de en2iar por correo las 2aria%les)& ET no produce cam%ios en el documento destino (como en el caso de una consulta a una
%ase de datos, p&ej& una p!gina de %1s#ueda en Bnternet)&
*(m-os d" Entr(d(
'ara la introduccin de las 2aria%les se utili(a la eti#ueta 8input9 & Esta eti#ueta tiene el par!metro type #ue indica el tipo de 2aria%le a
introducir y name #ue indica el nom%re #ue se le dar! al campo& 6ada tipo de 2aria%le tiene sus propios par!metros&
t$-"="t";t"
n(m"="c(m-o" Bndica #ue el campo a introducir ser! un texto& +us par!metros son3
m(;%"ng#t="num"ro" ,umero m!ximo de caracteres a introducir en el campo&
siA"="num"ro" Tama"o en caracteres #ue se mostrar! en pantalla&
4(%u"="t";to" Halor inicial del campo& ,ormalmente sera 7 7, o sea, 2acio&
t$-"="-(ss0ord"
n(m"="c(m-o"
Bndica #ue el campo sera una pala%ra de paso& Mostrar! asteriscos (R) en lugar de las letras escritas& +us par!metros opcionales son los mismos
#ue para text&
t$-"="c#"c/bo;"
n(m"="c(m-o"
El campo se elegir! marcando una casilla& +e permite marcar 2arias casillas& Los 2alores de las casillas ser!n indicados por3
4(%u"="4(%or"
c#"c/"d La casilla aparecera marcada por deecto&
t$-"="r(dio"
n(m"="c(m-o"
El campo se elegir! marcando una casilla& +lo permite marcar una sola de las casillas& Los 2alores de las casillas seran indicados por3
4(%u"="4(%or"
t$-"="im(g""
n(m"="c(m-o"
El campo contendr! el 2alor de las coordenadas del punto de la imagen pinchado& /e%e indicarse la imagen con el par!metro3
src=":c#"ro d" im(g"n".
t$-"="#idd"n"
n(m"="c(m-o"
El usuario no puede modi*car su 2alor, ya #ue el campo no es 2isi%le se manda siempre con el 2alor indicado por el par!metro 3
4(%u"="4(%or"
t$-"="submit"
Depresenta un %otn& .l pulsar este %otn la inormacin de todos los campos se en20a al programa indicado en 8orm9 &Tiene el par!metro
2alueT7texto7 #ue indica el texto #ue aparecer! en el %oton&
t$-"="r"s"t" Depresenta un %otn& .l pulsar este %otn se %orra el contenido de todos los campos& El par!metro 2alue T 7texto7 indica el
texto #ue aparecer! en el %otn&
*(m-os d" <"%"ccion
Este tipo de campos despliegan una lista de opciones, entre las #ue de%emos escoger una o 2arias& +e utili(a para ellos la eti#ueta 8select9
8:select9 & +us par!metros son3
n(m"="c(m-o Nombr" d"% c(m-o."
siA"="num" ,1mero de opciones 2isi%les& +i se indica > se presenta como un men1 desplega%le, se se indica mas de uno se presenta como
una lista con %arra de despla(amiento&
mu%ti-%" 'ermite selecionar mas de un 2alor para el campo&
Las dierentes opciones de la lista se indican con la eti#ueta <o-tion> & Esta eti#ueta puede incluir el parametro s"%"ct"d para indicar cual es
la opcion por deecto& En caso de #ue no se especi*#ue, se tomara por deecto la primera opcin de la lista&
Lr"(s d" t";to.
Depresenta un campo de texto de m1ltiples lineas& ,ormalmente se utili(a para #ue se incluyan en el comentarios& La eti#ueta usada
es <t";t(r"(> </t";t(r"(> , y sus par!metros 3
n(m"="c(m-o Nombr" d"% c(m-o."
co%s="num. NMm"ro d" co%umn(s d" t";to 4isib%"s."
ro0s="num. NMm"ro d" :%(s d" t";to 4isib%"s. "
0r(-="4irtu(% / -#$sic(%" usti*ca el texto autom!ticamente en el interior de la caja& La opcin -#$sic(% en20a las l0neas de texto separadas
en l0neas 0sicas& La opcin 4irtu(%en2ia todo el texto seguido&
Heamos a continuacin un ejemplo de ormulario utili(ando todas las ormas de introduccin de datos&
<orm (ction="m(i%to9usu(rioN"m(i%.dom"
m"t#od="-ost">
Tu Nombr"9 <in-ut t$-"="t";t" n(m"="nombr""
siA"=">C">
Tu *%(4"9 <in-ut t$-"="-(ss0ord" n(m"="c%(4""
siA"="G">
<->
Arc#i4os ( En4i(r9
<in-ut t$-"="c#"c/bo;" n(m"="(rc#i4o"
4(%u"="M(nu(%">M(nu(% d" Htm%
<in-ut t$-"="c#"c/bo;" n(m"="(rc#i4o"
4(%u"="M(-t#is">+rogr(m( M(-t#is
<in-ut t$-"="c#"c/bo;" n(m"="(rc#i4o"
4(%u"="H"%-">Arc#i4o d" A$ud(
<->
Tu Ed(d 9
<in-ut t$-"="r(dio" n(m"=""d(d" 4(%u"="2=C"> M"nos d"
=C (1os
<in-ut t$-"="r(dio" n(m"=""d(d" 4(%u"="=C2?C"> Entr"
=C $ ?C (1os
<in-ut t$-"="r(dio" n(m"=""d(d" 4(%u"="B?C"> M(s d"
?C (1os
<->
<in-ut t$-"="#idd"n" n(m"="%ug(r" 4(%u"="-)gin(
-"rson(%">
*omo "ncontr(st" mi -)gin( 9
<s"%"ct n(m"="dond"">
<o-tion> D" c(su(%id(d</o-tion>
<o-tion> +or "% busc(dor I%"</o-tion>
<o-tion> +or "% busc(dor J(#oo</o-tion>
<o-tion> M" %( com"nt(ron</o-tion>
</s"%"ct>
<->
Tus *om"nt(rios9
<br>
<t";t(r"( n(m"="com"nt(rio" ro0s="6" co%s="?C"
0r(-="4irtu(%"></t";t(r"(>
<->
<in-ut t$-"="submit" 4(%u"="En4i(r">
<in-ut t$-"="r"s"t" 4(%u"="Horr(r">
</orm>
.hora 2eamos el eecto producido en la p!gina )e% 3
Tu ,om%re3 Tu 6la2e3
.rchi2os a En2iar3 Manual de Html 'rograma Mapthis .rchi2o de .yuda
Tu Edad 3 Menos de @G a"os Entre @G y <G a"os Mas de <G a"os
6omo encontraste mi p!gina 3

Tus 6omentarios3
Enviar

Borrar
+i rellenas este C-DM y pulsas so%re el %otn n'iar , (estando conectado a Bnternet), se generar! un mensaje de correo a la direccion de
correo usuari"(e!ail&d"!& +i pulsas el %oton )"rrar se %orraran los datos #ue hayas introducido en el Cormulario&
El texto #ue se reci%ir0a por correo electrnico ser0a parecido a este3
nom%reT'edroS'ere( Kcla2eT>@A<E=IO Karchi2oTManual Karchi2oTMapthis KedadT@G4<G KlugarTpaginaSpersonal
KdondeT'orSelS%uscadorS-le KcomentarioNQ<T EsperoS#ueSmeSmandesSlosNG/NG.*cherosSantesSdelSmartesNG/NG.NG/NG.+
aludos&NG/NG.
'odemos o%ser2ar #ue en el correo se separan las 2aria%les con el s0m%olo K , los espacios se sustituyen por el signo S y se representan los
codigos de retorno de carro y a2ance de linea del campo de texto con los caracteres *+, y *+- respecti2amente&
+i en 2e( de en2iar estas 2aria%les por correo electrnico, uesen en2iadas a un programa (6B), este programa podr0a tratarlas y dar como
respuesta una nue2a p!gina )e%&
'ara en2iar un ormulario por e4mail sin importar el na2egador utili(ado se ha de utili(ar un programa externo #ue reali(e este proceso&
Truco EEE
+e puede utili(ar un Cormulario como 7lan(ador7 de links, es decir, por medio de una lista desplega%le permitir al usuario escoger un Link y
acceder a el& 'ara ello se utili(a el parametro 7-n6lick7& Ejemplo 3
8orm9
8select nameT7list79
8option selected 2alueT7http3::$$$&manualdehtml&com7 9 Manual
de HTML
8option 2alueT7http3::$$$&microsot&com79 Microsot
8option 2alueT7http3::$$$&i%m&com7 9 B%m
8option 2alueT7http3::$$$&no2ell&com7 9 ,o2ell
8option 2alueT7http3::$$$&hp&com7 9 He$lett 'ackard
8option 2alueT7http3::$$$&ujitsu&com7 9 Cujitsu
8option 2alueT7http3::$$$&Acom&com7 9 A6om
8:select9
8input typeT7%utton7 2alueT7Br a&&&7
on6lickT
7top&location&hreTthis&orm&list&optionsWthis&orm&list&selectedBndexX&2
alue79
8:orm9
Este seria el eecto producido 3


'ara en2iar un ormulario por e4mail sin importar el na2egador utili(ado se ha de utili(ar un programa externo #ue reali(e este proceso&
A--%"t
La eti#ueta <(--%"t></(--%"t> indica la ejecucin de un programa (applet) externo escrito en lenguaje J,5, &
a2a es un lenguaje creado por +un Microsystems #ue permite reali(ar operaciones multimedia sin incorporar nue2as eti#uetas HTML& Los
applets son muy 2ariados, y cada uno de ellos reali(a una tarea distinta& Hay applets para hacer #ue el texto se mue2a dentro de la hoja, se
contraiga y expanda, etc&&&&
Esta eti#ueta tiene los siguientes par!metros 3
cod"b(s"=";DL7 /ireccion donde se encuentra el applet a2a ( 'or ejemplohttp#$$%%%&!anual-ht!l&c"!$ja'a )& +i el .pplet se encuentra en el
mismo lugar #ue la pagina )e% este parametro no es necesario&
cod"="programa7 Bndica el nom%re del programa (applet) a2a a ejecutar&
0idt#="num&7
#"ig#t="num&7 Bndican el espacio (ancho y alto) en puntos en el #ue el programa reali(ar! su uncin&
/entro de la eti#ueta <(--%"t> se incluye la eti#ueta <-(r(m> #ue en20a al programa a2a los par!metros necesarios para su
uncionamiento& Esta eti#ueta suele tener como m0nimo los par!metros 3
n(m"="campo7 ,om%re de la 2aria%le a en2iar&
4(%u"="2alor7 Halor de la 2aria%le a en2iar&
Heamos un ejemplo en el #ue se ejecuta un programa a2a #ue permite #ue un texto se despla(e de un lado a otro de una (ona de la pantalla3
<(--%"t cod"b(s"= 7http3::$$$&manual4
html&com:ja2a7 cod"= 7Lauschrit&class70idt#="AEG7 #"ig#t="@E7>
<-(r(m n(m"="%g&color7 4(%u"=7G,@EE,G7>
<-(r(m n(m"="message7 4(%u"=7RR5ien2enido a mi pagina )E5 4 Manual de
HTMLRR7>
</(--%"t>
M(r3u""
La eti#ueta <m(r3u""></m(r3u""> crea una mar#uesina con un texto en su interior #ue se despla(a& Cunciona 1nicamente con Ms4Explorer&
+us par!metros son los siguientes3
(%ign="top : middle : %ottom7 Bndica si el texto del interior de la mar#uesina se alinea en la (ona alta (top), en la %aja (%ottom) o en el centro
(middle) de la misma&
bgco%or=7codigo de color7 Bndica el color del ondo de la mar#uesina&
dir"ction="let : right7 Bndica hacia #ue lugar se despla(a el texto, hacia la i(#uierda (let) o hacia la derecha (right)
#"ig#t="num7 o N Bndica la altura de la mar#uesina en puntos o porcentaje en uncin de la 2entana del na2egador&
0idt#="num7 o N Bndica la anchura de la mar#uesina en puntos o porcentaje en uncin de la 2entana del na2egador&
%oo-="num : in*nite7 Bndica el numero de 2eces #ue se despla(ar! el texto por la mar#uesina& +i se indica in*nite, se despla(ar!
inde*nidamente&
scro%%d"%($="num&7 Bndica el n1mero de milisegundos #ue tarda en reescri%irse el texto por la mar#uesina, a mayor n1mero mas lentamente
se despla(ar! el texto&
Heamos un ejemplo de esta eti#ueta 3
<m(r3u"" bgco%or=7FCCCCCC7 0idt#="EGN7 scro%%d"%($="G7> 5ien2enido a mi
pagina personal en Bnternet&
</m(r3u"">
<onidos
,uestra p!gina )e% puede tener un sonido #ue se acti2e al entrar en la p!gina& Esta caracter0stica de Ms Explorer utili(a la
eti#ueta <bgsound> y tiene los siguientes par!metros 3
src=7*chero7 Bndica el nom%re del *chero #ue contiene el sonido (&$a$, &mid)&
%oo-="num : in*nite7 Bndica el n1mero de 2eces #ue se reproducir! el sonido& +i se indica in*nite, el sonido se reproducir! de orma cont0nua
hasta #ue a%andonemos la p!gina&
;n ejemplo de esta eti#ueta ser0a 3
'ara utili(ar esta uncion en ,etscape se utili(a la eti#ueta <"mb"d> & Esta eti#ueta se utili(a realmente para 7incrustar7 un o%jeto en nuestra
pagina )e%& /icho o%jeto puede ser un *chero de sonido, un 2ideo, un gra*co 5M', etc&&& Tiene los siguientes par!metros 3
src=7*chero7 Bndica el nom%re del *chero #ue contiene el sonido (&$a$, &mid) o el 2ideo (&a2i)&
(utost(rt="true7 Bncluirlo si deseamos #ue la reproduccion se inicie inmediatamente&
%oo-="true7 Bncluirlo si deseamos #ue la reproduccion no se detenga& (al terminar, 2uel2e a comen(ar automaticamente)&
4o%um"="numero7 Holumen al #ue se reproducen los *cheros de sonido&
0idt#="numero7
#"ig#t="numero7 .nchura y .ltura de la representacion del o%jeto& (+i es un sonido no es necesario este par!metro)&
contro%s="smallconsole7 Hisuali(a una serie de controles #ue nos permiten iniciar la reproduccion del *chero, asi como reali(ar una pausa o
detenerlo&
;n ejemplo de esta eti#ueta ser0a 3
<"mb"d src=7yesterday&mid7 %oo-="true7 (utost(rt="true7
4o%um"="EG7 0idt#="EG7#"ig#t=">E7 contro%s="smallconsole7>
'r(m"s
Las rames es una tcnica para su%di2idir la pantalla del na2egador en dierentes 2entanas&
6ada una de estas 2entanas se podr! manipular por separado, permitindonos mostrar en cada una de ellas una p!gina )e% dierente&
Esto es muy util para, por ejemplo, mostrar permanentemente en una 2entana los dierentes contenidos de nuestra p!gina, y en otra 2entana
mostrar el contenido seleccionado&
'ara de*nir las dierentes su%2entanas o rames se utili(an las eti#uetas <r(m"s"t> </r(m"s"t> y <r(m"> &
La eti#ueta <r(m"s"t> indica como se 2a a di2idir la 2entana principal& 'ueden incluirse 2arias eti#uetas <r(m"s"t> anidadas con el
o%jeto de su%di2idir una su%di2isin& Los par!metros de <r(m"s"t> son ro$s y cols en uncin de si la di2isin de la pantalla se reali(a por
*las (ro$s) o columnas (cols)&
Los par!metros ro$s y cols se acompa"an de un grupo de n1meros #ue indican en puntos o en porcentaje el tama"o de cada una de las
su%2entanas& En caso de utili(ar ro$s los tama"os de las su%2entanas se entienden indicados de arri%a a a%ajo, es decir, el primer 2alor ser! el
asignado a la 2entana superior, el segundo a la 2entana inmediatamente inerior, etc&&& En el caso de cols los tama"os se aplican de i(#uierda a
derecha&
<r(ms"s"t
ro0s=7@EN,EGN,@EN7>
6rea tres su%2entanas hori(ontales, la primera ocupar!
un @GN de la 2entana principal, la segunda un EGN y la
tercera un @EN&
<r(m"s"t co%s=7>@G,R,>GG7> 6rea tres su%2entanas 2erticales, la primera y la
tercera tendr!n un 7ancho7 *jo de >@G y >GG puntos
respecti2amente& La segunda ocupar! el resto de la
2entana principal (R)&
<r(m"s"t
co%s=7>EN,R7><r(m"s"t
ro0s="@GN,R7>
En este caso 7anidamos7 dos directi2as& La primera
di2ide la 2entana principal en dos su%2entanas
2erticales, la primera ocupa un >EN de la 2entana
principal y la segunda el resto& La segunda directi2a
2uel2e a su%di2idir la primera su%2entana creada
anteriormente, pero esta 2e( en dos su%2entanas
hori(ontales, la superior ocupar! un @GN de la
su%2entana, y la inerior el resto&
La eti#ueta <r(m"> indica las propiedades de cada su%2entana& Es necesario indicar una eti#ueta <r(m"> para cada su%2entana creada&
Los par!metros de<r(m"> son 3
n(m"="nombr"" Bndica el nom%re por el #ue nos reeriremos a esa su%2entana&
src="U8L" La 2entana mostrar! en principio el contenido del documento HTML #ue se indi#ue&
m(rgin0idt#="num". Bndica el margen i(#uierdo y derecho de la su%2entana en puntos&
m(rgin#"ig#t="num" Bndica el margen superior e inerior de la su%2entana en puntos&
scro%%ing = "$"s / no / (uto" Bndica si se aplica una %arra de despla(amiento a la su%2entana en el caso de #ue la p!gina #ue se cargue en
ella no #uepa en los l0mites de la su%2entana& El 2alor 7 yes 7 muestra siempre la %arra de despla(amiento, 7 no 7 no la muestra nunca (la (ona
de la p!gina #ue no #uepa en la su%2entana no la 2eremos), y 7 auto 7 la muestra solo en caso de #ue sea necesario para poder 2er la p!gina&
nor"siA" +i se indica este par!metro, el usuario no podr! 7redimensionar7 las su%2entanas con el na2egador& ;n usuario #ue este 2iendo una
pagina con rames puede redimensionarlas seleccionando un %orde de la su%2entana con el cursor y despla(!ndolo&
bord"r="num"& Bndica el 7%orde7 #ue separara esta rame de la siguiente& +i se indica cero (G) no se mostrara %orde entre las rames,
consiguiendo un eecto muy elegante, siempre y cuando el 7ondo7 de todas las rames sea el mismo, o sean colores solidos&
Los na2egadores #ue no soportan la caracter0stica de su%2entanas, no mostrar!n nada de lo indicado con estas eti#uetas& Es por ello #ue existe
una eti#ueta llamada<nor(m"s> </nor(m"s> & Todo los indicado entre esta eti#ueta ser! lo #ue muestren los na2egadores sin capacidad
para 2isuali(ar Crames& Los na2egadores #ue soporten Crames o%2iaran las eti#uetas incluidas entre <nor(m"s></nor(m"s> &
+i su na2egador puede 2isuali(ar Crames tendr! en estos momentos la pantalla di2idida en dos (onas independientes, en la i(#uierda 2er! el
0ndice de materias de este manual, y en la derecha estar! 2iendo la seccin del manual #ue haya selecionado& En otro caso simplemente 2er!
la seccin del manual&
La de*nicin de las Crames de%e ir antes de la de*nicin del cuerpo de documento (<bod$> )&
Heamos un ejemplo completo de Crames con comentarios 3
8html9
8head9
8title9 'agina con Crames 8:title9
8:head9
8rameset colsT7>EN,R7 9
8J44 6reo dos su%2entanas 2erticales, la de la i(#uierad ocupa un >EN de la pantalla, la de la derecha el resto& 449
8rameset ro$s T 7AEN,R7 9
8J44 6reo dos su%2entanas hori(ontales dentro de la su%2entana i(#uierda& 449
8rame nameT7upd7 srcT7update&htm7 scrollingT7auto7 9 8J44 Llamo a la su%2entana hori(ontal superior i(#uierda con el nom%re 7upd7 y
muestro el documento update&htm 449
8rame nameT7menu7 srcT7menu>&htm7 scrollingT7auto7 9 8J44 Llamo a la su%2entana hori(ontal inerior i(#uierda con el nom%re 7menu7 y
muestro el documento menu>&htm 449
8:rameset9 8J44 6ierro la de*nicion de las su%2entanas hori(ontales de la 2entana de la i(#uierda 449
8rame name T 7home7 src T 7home&htm7 scrolling T 7auto7 9 8J44 Llamo a la su%2entana 2ertical derecha con el nom%re 7home7 y muestro el
documento home&htm 449
8norames9
8J44 Bndico las rdenes para a#uellos na2egadores #ue no soporten Crames 449
8%ody9
+; na2egador ,- M;E+TD. CD.ME+& 'ulse 8a hreT7home&htm79 .;B 8:a9 para ir a la p!gina sin Crames& 8:%ody9
8:norames9
8:rameset9
8J44 6ierro la de*nicin de las su%2entanas 2erticales 449
8:html9

.l usar Crames, nos encontramos con un pro%lema& 6uando #ueramos mostrar una p!gina )e% de%emos indicarle al na2egador en #ue
su%2entana #ueremos #ue se muestre& 'or deecto se mostrar! en la 2entana donde se encuentre el enlace& 'ara poder escoger la su%2entana
de destino del Hiperenlace se a"ade un nue2o par!metro a la eti#ueta 8a hreT7enlace&html79 8:a9 & Este par!metro se llama target y puede
tener los siguientes 2alores 3
t(rg"t ="nombr"K4"nt(n(" Muestra el Hiperenlace en la 2entana cuyo nom%re se indica&
t(rg"t="Kb%(n/" .%re una nue2a copia del na2egador y muestra el Hiperenlace en ella& (+i usamos ,etscape esto pro2oca #ue tengamos
uncionando dos copias del programa)&
t(rg"t="Ks"%" +e muestra el Hiperenlace en la su%2entana acti2a&
t(rg"t="K-(r"nt" El Hyperenlace se muestra en el 8rameset9 de*nido anteriormente al actual& +i no hay ning1n 8rameset9 anterior se
muestra a pantalla completa suprimiendo todas las su%2entanas de la pantalla&
t(rg"t="Kto-" +uprime todas las su%2entanas de la pantalla y muestra el Hiperenlace a pantalla completa&
<(
#r"= 7http3::$$$&microsot&com:7t(rg"t=7Z
%lank7>
Muestra la pagina de Microsot en una nue2a copia
del 2isor
<(
#r"=7http3::$$$&i%m&com:7 t(rg"t=7home7
>
Muestra la pagina de B%m en la su%2entanna
llamada 7home7
<(
#r"="http3::$$$&yahoo&com:7 t(rg"t=7Ztop
7>
Muestra la pagina del %uscador ahoo a pantalla
completa
<cri-ts
;n +cript es un programa escrito en un lenguaje distinto al HTML #ue se puede incluir en una p!gina )e% 7tal cual7&
'ara incluir estos programas en una p!gina )e% se utili(a la eti#ueta <scri-t> </scri-t> &
Esta eti#ueta tiene el par!metro %(ngu(g" para indicar el lenguaje de programacin utili(ado para el +cript& El cdigo del programa de%e
7ocultarse7 con las eti#uetas de comentario de HTML <E22 22> con el o%jeto de #ue no sean mostradas por los na2egadores #ue no reconocen la
eti#ueta <scri-t> &
Los scripts m!s usados suelen estar escritos en lenguaje a2a+cript
La inclusin de un +cript en una p!gina )e% se har0a de la siguiente orma 3
<scri-t %(ngu(g"=7a2a+cript7 > < E22 instrucciones del
programa &&&&&& 22> </scri-t>