You are on page 1of 31

Universidad Nacional JOSE MARIA ARGUEDAS

OFICINA DE
PROYECCIN SOCIAL
INGENIERIA AGROINDUSTRIAL
UNAJMA

Desarrollo e Implementacin
de Paginas Web
Informacin y Descargas:

www.cpia.edu.pe
informes@cpia.edu.pe

Andahuaylas, APURIMAC - PERU

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

ACERCADELCURSO

JUSTIFICACION
ConlacapacitacindeDesarrollodePaginasWeb,yelusoadecuadodelasTICs,losalumnos
y docentes, estn en la capacidad de poder hacer uso de la tecnologa para la Difusin y
estrategiasdemercadeo,desuproduccinypublicacindesusproductosyserviciosfinales,
generandoconello,unavisinmsampliadenuevosmercados.

OBJETIVOS
1.1. BrindarmtodosyTcnicasdedesarrolloWeb,desdeelmodomasbsico.
1.2. Aprenderausar:comandosHTML,CSSySCRIPTeneldesarrollodeunaPaginaWeb.
1.3. AplicardiversosconceptosdeDiseoWeb,usosdePlantillasLibres.
1.4. ProveerdeconceptosbsicosdeAlojamientos/HostingLibresyPrivados.
1.5. UsodeRedesSociales.

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

HTML(TheHyperTextMarkupLanguage)
HTMLesunlenguajesencillopensadoparapresentarinformacinenlaWWW.HTML
(HyperTextMarkupLanguaje),comosunombreindicaesunlenguajedemarcasparala
creacindehipertextos.Porhipertextoentenderemostextoconunapresentacin
agradable,coninclusindeelementosmultimedia(grficos,video,audio)yconla
presenciadehiperenlacesquepermitenrelacionarotrasfuentesdeinformacinen
documentoshipertextos.Esellenguajeutilizadopararepresentardocumentosenla
WWW(WorldWideWeb).
Comosehadichoesunlenguajedemarcasyaqueenellasinstruccionessontrozosde
textoresaltadosconvenientementequedefinirnlaestructuralgicadeldocumento.Por
tantoundocumentoHTMLconstardetextoqueserelcontenidoylainformacindel
documentoydeinstruccionesHTMLqueresaltarnestecontenidoyledarnunformato
fcilyagradabledeleeryconlaposibilidadderelacionardocumentosyfuentesde
informacinmediantehiperenlaces.
LasmarcasdellenguajeHTMLespecifican:

Laestructuralgicadeldocumento:
o Cabeceras,tiposytamaosdelasfuentes.
o Prrafosdetexto.
o Centrado.
o Enumeracionesolistas.
o Formularios.
o Tablas.
Distintosestilosquedefineneltexto:
o Negrita.
o Cursiva.
o Diferentesefectos:(direccionesdecorreo,citastextuales,etc).
Inclusindehipertextosparaaccederaotrosdocumentosrelacionados
Inclusindeimgenesyficherosmultimedia.

EnellenguajeHTMLsedefinenlasetiquetasbsicasylasestructurasdedatosqueforman
ellenguaje.Elusodelasetiquetas(tags).Funcionandelasiguientemanera:<XXX>(Este
eseliniciodeunaetiqueta)[textoentreetiquetas]</XXX>(Esteeselcierredeuna
etiqueta).Lasletrasdelaetiquetapuedenestarenmaysculasominsculas,
indiferentemente.Porclaridad,seusarnenestemanualslamentelasmaysculas.Lo
quehayaentreambasetiquetasestarinfluenciadaporellas.Porejemplo,todoel
documentoHTMLdebeestarentrelasetiquetas<HTML>y</HTML>:
<HTML>[Todoeldocumento]</HTML>
Eldocumentoensestdivididoendoszonasprincipales:
Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Elencabezamiento,comprendidoentrelasetiquetas<HEAD>y</HEAD>
Elcuerpo,comprendidoentrelasetiquetas<BODY>y</BODY>
Dentrodelencabezamientohayinformacindeldocumento,quenoseveenlapantalla
principal,principalmenteelttulodeldocumento,comprendidoentrelasetiquetas
<TITLE>y</TITLE>.Elttulodebeserbreveydescriptivodesucontenido,puesserloque
veanlosdemscuandoaadannuestrapginaasubookmark(oagendadedirecciones).
Dentrodelcuerpoesttodoloquequeremosqueaparezcaenlapantallaprincipal(texto,
imgenes,etc.).Enlatablasemuestranmsetiquetasysussignificados.Acontinuacin
sepresentaunejemplo:
<HTML>

<HEAD>
<TITLE>MipaginadelWeb1</TITLE>
</HEAD>

<BODY>
<H1><CENTER>MiPrimerapagina</CENTER></H1>
<HR>
HolaMundo.
<P>
Ejemplodeprrafo.
</BODY>

</HTML>

ETIQUETA

SIGNIFICADO

<HTML>...</HTML>

Delimitadocumentohtml

<HEAD>...</HEAD>

Delimitaencabezado

<TITLE>...</TITLE>

Ttulodelencabezado

<BODY>...</BODY>

Delimitacuerpodeltexto

<P>

Findeparrafoconlneaenblanco

<BR>

Findeparrafosinlneaenblanco

<BR><P>

Secuenciaparavariaslneasenblanco

&nbsp;

Espacioenblanco

<H1>...</H1>

Tamaodeletrasparattulos(H1,...,H6)

<CENTER>...</CENTER>

Centrartexto

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

<HR>

Lneahorizontal

<B>...</B>

Textoennegrita

<I>...</I>

Textoenletraitlica oCursiva.

<PRE>...</PRE>

Textopreformateado(courier+verbatim)

<TT>...</TT>

SimilaraPREperoconcaracterestypewriter

<BLOCKQUOTE>...</BLOCKQUOTE> Destacacitatextual
<SUP>...</SUP>

ndicesuperior

<SUB>...</SUB>

Subndice

<UL>...</UL>

Delimitalistadetems(sepermitenanidamientos)

<LI>

Comienzodetemenlalista

<OL>...</OL>

SimilaraULperoenumeralostems

<DL>...</DL>

Listadedefiniciones

<DT>

Itemaserdefinido

<DD>

Definicindeltem

<!....>

Delimitacindecomentariosnovisibles

Algunasetiquetasnoestandarizadas:

<BLINK>ESTETEXTOPARPADEA</BLINK>
<HRWIDTH=75%>
<HRWIDTH=300>
<HRWIDTH=50%ALIGN=LEFT>
<HRWIDTH=35%ALIGN=RIGHT>
<HRSIZE=20>
<HRNOSHADE>
<FONTSIZE=5>Textoentamao5</FONT>
<FONTSIZE=6>Textoentamao6</FONT>
<FONTSIZE=1>Textoalgomenor</FONT>
<FONTSIZE=+1>Textoalgomayor</FONT>
<FONTSIZE=+2>Textoanmayor</FONT>
<BASEFONTSIZE=5>

Listas
Sepuedendeclararlistasdetems:
<UL>
<LI>Mamferos
<LI>Peces
<UL>

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

<LI>Sardina
<LI>Bacalao
</UL>
<LI>Aves
</UL>

Quedaraelsiguienteresultado:

Mamferos
Peces
o Sardina
o Bacalao
Aves

Laslistasordenadas(OrderedLists)sirvenparapresentarcosasenunordendeterminado.
Suestructuraesmuysimilaralaanterior.Ladiferenciaestribaenqueenelresultado
aparecerautomticamenteunnmerocorrelativoparacadacosa.
<OL>
<LI>Primeracosa
<LI>Segundacosa
<LI>Terceracosa
<LI>Etc.
</OL>

Elresultadoes:
1.Primeracosa
2.Segundacosa
3.Terceracosa
4.Etc.
Aligualquelaslistasdesordenadas,tambinsepuedenanidarlaslistasordenadas.El
tercertipoloformanlaslistasdedefinicin.Comosunombreindica,sonapropiadaspara
glosarios(odefinicionesdetrminos).Todalalistadebeirenglobadaentrelasetiquetas
<DL>y</DL>.Yadiferenciadelasdosquehemosvisto,cadarenglndelalistatienedos
partes:1)elnombredelacosaadefinir,queseconsigueconlaetiqueta<DT>(definition
term)y2)ladefinicindedichacosa,queseconsigueconlaetiqueta<DD>(definition
definition).
<DL>
<DT>Unacosaadefinir
<DD>Ladefinicindeestacosa
<DT>Otracosaadefinir
<DD>Ladefinicindeestaotracosa
</DL>

Suresultadoes:
Unacosaadefinir
Ladefinicindeestacosa
Otracosaadefinir
Ladefinicindeestaotracosa

Ejemplo
Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

<HTML>
<HEAD>
<TITLE>MipaginadelWeb2</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Misaficiones</H1>
</CENTER>
<HR>
Sinunordenparticular,mis<B>aficiones</B>sonlassiguientes:
<UL>
<LI>Elcine
<LI>Eldeporte
<UL>
<LI>Natacin
<LI>Baloncesto
</UL>
<LI>Lamsica
</UL>
Lamsicaquemasmegustaes<I>(enordendepreferencia):</I>
<OL>
<LI>ElHuaylas
<LI>ElHuayno
<LI>Lamsicaandina
</OL>
</BODY>
</HTML>

Enlacesconotraspginas
LacaractersticaquemshainfluidoenelespectacularxitodelWeb(oteladearaa)ha
sido,aparteladesucarctermultimedia,laposibilidaddeunirlosdistintosdocumentos
repartidosportodoelmundopormediodeenlaceshipertexto.Engeneral,losenlaces
tienenlasiguienteestructura:
<AHREF=xxx>yyy</A>

dondexxxeseldestinodelenlace(Obsrveselascomillas).yyyeseltextoindicativoenla
pantalladelenlace(conuncolorespecialygeneralmentesubrayado).Vamosadistinguir
cuatrotiposdeenlaces:

1.Enlacesdentrodelamismapgina
2.Enlacesconotrapginanuestra
3.Enlacesconunapginafueradenuestrosistema
4.Enlacesconunadireccindeemail
Aveces,enelcasodedocumentos(opginas)muyextensos,nospuedeinteresardarun
saltodesdeunaposicinaotradeterminada.Enestecaso,loqueanteshemosllamado
XXX,esdecir,eldestinodelenlace,enestecasoelsitiodentrodelapginaadonde

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

queremossaltar,sesustituyepor#marca(lapalabramarcapuedesercualquierpalabra
quequeramos).LoquehemosllamadoantesYYYeslapalabra(opalabras)que
aparecernenlapantallaencolor(enformadehipertexto).Suestructuraes,entonces:
<AHREF=#marca>YYY</A>

Yenelsitioexactoadondequeremossaltar,debemosponerlasiguienteetiqueta:
<ANAME=marca></A>

Puedeserquetengamosunasolapgina.Perolomsfrecuenteesquetengamosvarias
pginas,unainicial(oprincipal)yotrasconectadasaella,einclusoentreellasmismas.
Supongamosquequeremosenlazarconlapginacreadaenelejemploanterior,quela
hemosllamadomipag2.html.Enestecaso,simplementesustituimosloquehemos
llamadoxxx(eldestinodelenlace)porelnombredelfichero:

<AHREF=mipag2.html>EjemplodelCaptulo2</A>

Siqueremosquevayaaunsitioconcretodeotrapginanuestraenvezdeiralprincipio
delapgina,adondevapordefecto,enesesitiotenemosquecolocarunamarca,y
completarelenlaceconlareferenciaaesamarca.Loveremosconelsiguienteejemplo:
Quieroponerunenlacedesdeaqualcaptulo4,peroaunsitioconcreto,dondehe
puestolamarca<ANAME=alinear''></A>.Entonceslaetiquetatienequeser:<A
HREF=cap4.html#alinear''>Capitulo4</A>.Sicap4.htmlestenundirectoriocaps'',
sera<AHREF=caps/cap4.html#alinear''>.
Siqueremosenlazarconunapginaqueestfueradenuestrosistema(esdecir,queest
enunservidordistintoalquesoportanuestrapgina),esnecesarioconocersudireccin
completa,oURL(UniformResourceLocator).ElURLpodraser,ademsdeladireccinde
unapginadelWeb,unadireccindeftp,gopher,etc.Unavezconocidaladireccin(o
URL),locolocamosenvezdeloquehemosllamadoanteriormentexxx(eldestinodel
enlace).SiqueremosenlazarconlapginadeGoogle(cuyoURLes:http://www.google.com/),
laetiquetasera:
<AHREF=http://www.google.com/>PginainicialdeBsquedaconGoogle</A>

Paraenlacesadireccionesemail,sustituimosloquesehallamadoantesxxx(eldestino
delenlace)pormailto:seguidodeladireccindeemail.Laestructuradelaetiquetaes:
<AHREF=mailto:direccindeemail>Textodelenlace</A>

Ejemplo
<HTML>
<HEAD>
<TITLE>MipaginadelWeb3</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Mispaginasfavoritas</H1>

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

</CENTER>
<HR>
Estassonmispaginasfavoritas:
<P><AHREF=http://home.netscape.com>Netscape</A>
<BR><AHREF=http://www.microsoft.com>Microsoft</A>
<BR><AHREF=http://www.yahoo.com>Yahoo!</A>
</BODY>
</HTML>

Caracteresespeciales
Existenalgunaslimitacionesparaescribireltexto.Unadeellasesdebidoaquelas
etiquetasseformancomouncomandoescritoentrelossmbolos<''y>''.Portanto,si
sequisieranescribirestoscaracterescomopartenormaldeltexto,daraestolugarauna
ambigedad,yaqueelprogramanavegadorpodrainterpretarloscomoelcomienzoo
finaldeunaetiqueta,envezdeuncarctermsdeltexto.Pararesolveresteproblema,
existenunoscdigosparapoderescribirestoscaracteresyotrosrelacionadosconlas
etiquetas.
&lt;para<(lessthan,menorque)
&gt;para>(greaterthan,mayorque)
&amp;para&(ampersand)
&quot;para(doublequotation)
&aacute;parala
&eacute;parala
&iacute;parala
&oacute;parala
&uacute;parala
&Aacute;parala
&Eacute;parala
&Iacute;parala
&Oacute;parala
&Uacute;parala
&ntilde;parala
&Ntilde;parala
&uuml;parala
&Uuml;parala
&#191;para
&#161;para

Todoesto,quecomoseveesmuylaborioso,puedeparecerintilyaquesiescribimos
nuestrotextosinhacerningncasodeestasconvenciones,escribiendolasletras
acentuadasydemssignosdirectamente,esmuyposiblequeelresultadoloveamos
correctamenteennuestronavegador,peronuncapodremosestarsegurosquelesocurra
lomismoatodoslosqueaccedananuestraspginasconotrosnavegadoresdistintos.En
laprctica,elproblemanoestangrave,pueslosprogramaseditoresdeHTMLsuelen
tenerlaposibilidaddeescribirloscdigosautomticamente.Inclusosiseescribeenun

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

procesadordetextosdeformamanual,sepuedeescribireltextoenunaprimeraetapade
formanormalyluegoaplicarlealgndelosprogramasquehacenlaconversinadecuada.

Fondos
Sepuedecambiarelfondodedosmanerasdistintas:1)Conuncoloruniformey2)Con
unaimagen.Losfondosconuncoloruniformeseconsiguenaadiendoelcomando
BGCOLORalaetiqueta<BODY>(situadaalprincipiodeldocumento),delasiguiente
manera:
<BODYBGCOLOR=#XXYYZZ>
Donde:

XXesunnmeroindicativodelacantidaddecolorrojo
YYesunnmeroindicativodelacantidaddecolorverde
ZZesunnmeroindicativodelacantidaddecolorazul

Estosnmerosestnennumeracinhexadecimal.Estanumeracinsecaracterizapor
tener16dgitos(enlugardelosdiezdelanumeracindecimalhabitual).Estosdgitosson:
0123456789ABCDEF

Esdecir,queennuestrocaso,elnmeromenoresel00yelmayorelFF.As,porejemplo,
elcolorrojoesel#FF0000,porquetieneelmximoderojoycerodelosotrodoscolores.
Loscoloresprimariosson:
#FF0000Rojo
#00FF00Verde
#0000FFAzul

Otroscoloresson:
#FFFFFFBlanco
#000000Negro
#FFFF00Amarillo

Parahaceruncolormsoscuro,hayquereducirelnmerodesucomponente,dejando
losotrosdosinvariables.As,elrojo#FF0000sepuedehacermsoscurocon#AA0000,o
anmsoscurocon#550000.Parahacerqueuncolortengauntonomssuave(ms
pastel),sedebenvariarlosotrosdoscoloreshacindolosmsclaros(nmeromsalto),
enunacantidadigual.As,podemosconvertirelrojoenrosacon#FF7070.

Coloresdeltextoydelosenlaces
Sinosevariasenloscoloreshabitualesdeltextoydelosenlaces(negroyazul,
respectivamente),podraocurrirquesulecturacontraunfondooscurofuesemuy
dificultosa,oinclusoimposible,sielfondofueseprecisamentenegrooazul.Paraevitar
esto,sepuedenescogerloscoloresdeltextoydelosenlaces,aadiendoalaetiqueta(si
sedesea)lossiguientescomandos:
TEXTcolordeltexto
LINKcolordelosenlaces
VLINKcolordelosenlacesvisitados

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

ALINKcolordelosenlacesactivos(elqueadquierenenelmomentodeserpulsados)

Loscdigosdeloscoloressonlosmismosquelosquesehanvistoanteriormente.La
etiqueta,contodassusposibilidades,sera:
<BODYBGCOLOR=#XXYYZZTEXT=#XXYYZZLINK=#XXYYZZVLINK=#XXYYZZ
ALINK=#XXYYZZ>

Algunasetiquetasnoestandarizadas
<BLINK>ESTETEXTOPARPADEA</BLINK>
<HRWIDTH=75%>
<HRWIDTH=300>
<HRWIDTH=50%ALIGN=LEFT>
<HRWIDTH=35%ALIGN=RIGHT>
<HRSIZE=20>
<HRNOSHADE>
<FONTSIZE=5>Textoentamao5</FONT>
<FONTSIZE=6>Textoentamao6</FONT>
<FONTSIZE=1>Textoalgomenor</FONT>
<FONTSIZE=+1>Textoalgomayor</FONT>
<FONTSIZE=+2>Textoanmayor</FONT>
<BASEFONTSIZE=5>

Imgenes
LaetiquetaquenossirveparaincluirimgenesennuestraspginasdelWebesmuy
similaraladeenlacesaotraspginas.Lanicadiferenciaesque,enlugardeindicaral
programanavegadorelnombreylalocalizacindeundocumentodetextoHTMLpara
quelocargue,seleindicaelnombreylalocalizacindeunficheroquecontieneuna
imagen.Laestructuradelaetiquetaes:
<IMGSRC=imagen.gif>

ConelcomandoIMGSRC(imagesource,fuentedelaimagen)seindicaquesequiere
cargarunaimagenllamadaimagen.gif(oelnombrequetenga).Dentrodelaetiquetase
puedenaadirotroscomandos,talcomoALT
<IMGSRC=imagen.gifALT=descripcin>

ConelcomandoALTseintroduceunadescripcin(unapalabraounafrasebreve)
indicativadelaimagen.Aligualqueunapginaconlaquequeremosenlazarpuedeestar
fueradenuestrosistema,(encuyocasohabaqueindicarsuURLodireccincompleta),
podemoscargarunaimagenquenoestennuestrosistemasiguiendoelmismomtodo,
esdecir,indicarenlaetiquetaelURLcompletodelaimagen.Aunqueestonoesmuy
aconsejable,puesalargarainnecesariamenteeltiempodecargadenuestrapgina.
Sepuedeescogerlaposicindelttuloasociadoalaimagenconrespectoalaimagen
misma.Sepuedeponerarriba,enmediooabajodelladodelaimagen.Paraelloseaade
elcomandoALIGNalaetiqueta,delasiguientemanera:

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

<IMGSRC=isla.gifALIGN=TOP>Titularalineadoarriba
<IMGSRC=isla.gifALIGN=MIDDLE>Titularalineadoenmedio
<IMGSRC=isla.gifALIGN=BOTTOM>Titularalineadoabajo

Otraposibilidadmuyinteresanteesladeutilizarunaimagencomoenlaceaotrapgina.
Paraestoscasosseutilizangeneralmenteimgenespequeas(iconos),aunquesepuede
usarcualquiertipodeimagen.Laestructurageneraldeunenlacees:
<AHREF=xxx>yyy</A>

dondexxxeraeldestinodelenlaceeyyyeltextodelenlace.Enestecasosustituimosxxx
porelnombredelficherodelapginaalaquequeremosacceder.Yenlugardeyyy
ponemoslaetiquetacompletadelaimagen(quequedaasenglobadadentrodela
etiquetadelenlace).Comoejemplovamosautilizarlaimagen(hombre.gif)paraacceder
alejemploenmipag2.html:
<AHREF=mipag2.html><IMGSRC=hombre.gif></A>

Sinelrectnguloquerodeaalafigura(default):
<AHREF=mipag2.html><IMGSRC=hombre.gifBORDER=0></A>

Supongamosquequeremosenlazarconlaimagenisla.gifpormediodeestaotraimagen:
(casa.gif):
<AHREF=isla.gif><IMGSRC=casa.gif></A>

Supongamosquequeremosenlazarconlaimagenisla.gifpormediodeltextounparaso
tropical'':
<AHREF=isla.gif>unparasotropical</A>

Ejemplo
<HTML>
<HEAD>
<TITLE>MipaginadelWeb4</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>MipaginadelWeb</H1>
</CENTER>
<HR>
EstaesmipaginadelWeb.Noesmuyextensa,perotienetodoslos
elementosbasicos.Esperoqueosguste.Pocoapocoleireanadiendo
mascosasinteresantes.
<P><AHREF=mipag2.html><IMGSRC=hombre.gif></A>Misaficiones
<P><AHREF=mipag3.html><IMGSRC=casa.gif></A>Mispaginasfavoritas
<CENTER>
<H3>Unlugaridealparamisvacaciones</H3>
<IMGSRC=isla.gifALT=isla>
</CENTER>
</BODY>
</HTML>

Imgenescomofondo

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Elfondodeunapginapuedesertambinunaimagen,yaseaenformatoGIFoJPEG.Esta
imagenserepiteportodalapgina,deunamaneraanlogaaltapizdeWindows.La
estructuradelaetiquetaes:
<BODYBACKGROUND=imagen.gif>

obien:
<BODYBACKGROUND=imagen.jpg>

Sepuedenaadirtambinaestaetiquetatodosloscomandosparacambiarloscolores
deltextoydelosenlaces,vistosanteriormente.Estoesimprescindibleavecespara
conseguirqueeltextosealegible,encontrasteconelfondo.
Hayquepreverlaposibilidaddequequienaccedaanuestrapginahayadeshabilitadola
cargaautomticadeimgenes,encuyocasotampococargaralaimagenquesirvecomo
fondoysloveraelfondoestndardecolorgris.Estopodrasermuyperjudicialsihemos
escogidounoscoloresparaeltextoylosenlacesquenocontrastanbienconesefondo
gris.Lasolucinaesteproblemaesponerdentrodelaetiqueta<BODY>losdoscomandos
BACKGROUNDyBGCOLOR(enesteorden),teniendocuidadadoenescogeruncolor
uniformedefondoparecidoaldelaimagen.
Porejemplo,supongamosquequeremosponercomofondolaimagennubes.jpg.
Escogemosentoncesuncolordefondoazulclaro,(p.ej.#CCFFFF).Laetiquetaquedara
as:
<BODYBACKGROUND=nubes.jpgBGCOLOR=#CCFFFF>

Estotienelaventajaadicionaldeque,inclusoaunquenosedeshabilitelacarga
automticadeimgenes,alcargarlapgina,loprimeroqueseveesesefondodecolor
uniforme,queluegoesreemplazadoporeldelaimagen.
Tericamente,cualquierimagenpuedeservircomofondo,perounassonmsapropiadas
queotras.Adems,podemosquerercrearunfondonosotrosmismos,ocapturarlode
otraspginas.
EnWebStore(http://www.wmaestro.com/webmaestro/index.html)encontrarsuna
colecindefondos,preparadosparasercapturados.

Alineacinydimensionadodeimgenes
Sepermitealinearunaimagenalaizquierdaoaladerechadelapginayhacerqueel
textolarodeecompletamente,consiguindoseasunaaparienciasimilaraladeuna
revista.EstoseconsigueconlasextensionesdelaetiquetaALIGN,(queyasevi
anteriormenteconloscomandosTOP,MIDDLEyBOTTOM).Peroentoncesslosehaca
referenciaalttulodelaimagen,esdecir,auntextoexplicativo,peromenorqueunalnea
completa,puesencasoderebasarla,eltextosaltaalaparteinferiordelaimagen,
dejandounhuecoenblanco,conloquesuutilidadesmuylimitada.Esteinconveniente

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

quedasolventadoconloscomandosdeNetscapeRIGHT(derecha)yLEFT(izquierda).La
imagendoom.gif'',alineadaaladerecha,seobtieneconlaetiqueta:
<IMGSRC=doom.gifALIGN=RIGHT>

ylaimagendoom2.gif'',alineadaalaizquierda,seobtieneconlaetiqueta:
<IMGSRC=doom2.gifALIGN=LEFT>

Sisequiereinterrumpirelprocesoderellenadodeltextoalosladosdelaimagen,para
quesaltehastadebajodeella,esdecir,dejarunespacioenblancoparcialmente,se
puedenemplearlassiguientesextensionesdelaetiquetaBR:
<BRCLEAR=LEFT>Buscaelprimermargenlibre(clear)alaizquierda.
<BRCLEAR=RIGHT>Buscaelprimermargenlibrealaderecha.
<BRCLEAR=ALL>Buscaelprimermargenlibreaamboslados.

Unejemploparaaclararesto:
<IMGSRC=isla.gifALIGN=LEFT>Estetextoestaaunladodelaimagen.
<BR>Estetambienestaaunladodelaimagen,enlalineasiguiente.
<BRCLEAR=LEFT>Esteotrotexto,encambio,habuscadoelprimermargen
librealaizquierda.

Queresulta
figfigfigEstetextoestaaunladodelaimagen.
figfigfigEstetambienestaaunladodelaimagen,enlalineasiguiente.
Esteotrotexto,encambio,habuscadoelprimermargenlibrealaizquierda.

LosprogramasnavegadorescuandocarganundocumentoHTMLyencuentranuna
etiquetadeunaimagen,interrumpenelprocesodecargaysolicitanalservidorquele
envedichaimagen,quedandoalaesperahastaquesecompleteelenvo,repitindose
esteprocesoconcadaunadelasimgenes.Estoesespecialmentemolestocuando,como
ocurrefrecuentemente,enlacabeceradelapginaseencuentraunaimagengrande,ya
queduranteuntiemporelativamentelargonosevernadaenlapantalla.Paraevitareste
inconvenienteexistenunasextensionesdelaetiquetadelaimagen<IMGSRC=imagen.gif>
quesirvenparaindicaralnavegadorculessonsusdimensionesenpixels.Enestecaso,el
navegadoractadeunaformamsfavorable,yaqueentonces,comoconocelas
dimensionesdelasimgeneslesreservaunespacioenlapantallayvacolocandoeltexto
deformaapropiada,sinningunainterrupcin,alavezquevarellenandoesosespacios
reservadosalasimgenes.EstoscomandossonWIDTH(ancho)yHEIGHT(alto).Por
ejemplo,paralaimagenisla.gif:
<IMGSRC=isla.gifWIDTH=120HEIGHT=94>

Esconvenientehacerestocontodaslasimgenes,inclusoconlasmspequeas(iconos,
botones,etc),paraquenohayaningunainterrupcinenelprocesodecargadel
documento.
Sepuedentambin,sisequiere,dimensionarlasimgenesconunosvaloresdistintosalos
querealmentetienen,variandoeltamao,laanchuraolaaltura.Estoesmuy
conveniente,porejemploparaponerenlapginaunthumbnail(reproduccinen
pequeodeunaimagen),quehacedeenlacealaimagenensuverdaderotamao.De

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

estamaneranorecargamosdemasiadounapgina,yelusuarioserquiendecidaqu
imgenesdeseacargar.

Tablas
Vamosaverordenadamente(defuerahaciadentro)lasetiquetasnecesariaspara
confeccionarlastablas.
Laetiquetageneral,queenglobaatodaslasdemses<TABLE>y</TABLE>.Esdecir:
<TABLE>
[restodelasetiquetas]
</TABLE>

Conestosepresentaranlosdatostabulados,perofaltaralacaractersticaquehacems
atractivasalastablas,yesqueestosdatosvayandentrodeunoscajetinesformadospor
unborde.ParaestotenemosqueaadirelatributoBORDERalaetiqueta,esdecir:
<TABLEBORDER>
[restodelasetiquetas]
</TABLE>

Enelsiguientenivel,dentrodelaanterior,estnlasetiquetasparaformarcadafila(row)
delatabla,queson<TR>y</TR>.Hayquerepetirlastantasvecescomofilasqueremos
quetengalatabla.Esdecir,paraunatablacondosfilas,sera:
<TR>
[etiquetasdelasdistintasceldasdelaprimerafila]
</TR>
<TR>
[etiquetasdelasdistintasceldasdelasegundafila]
</TR>

Enelltimonivel(dentrodelasanteriores)estnlasetiquetasdecadacelda,queson
<TD>y</TD>,queenglobanelcontenidodecadaceldaconcreta(texto,imgenes,etc.).
Hayquerepetirlatantasvecescomoceldasqueremosquehayaenesafila.
Veamosunejemplodeunatablacondosfilas.Cadafilavaatenertresceldas.Dentrode
cadaceldavamosaponeruntextoindicativodelaposicindedichacelda:
<TABLEBORDER>
<TR>
<TD>fila1celda1</TD><TD>fila1celda2</TD><TD>fila1celda3</TD>
</TR>
<TR>
<TD>fila2celda1</TD><TD>fila2celda2</TD><TD>fila2celda3</TD>
</TR>
</TABLE>

Queresulta:
Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

fila1celda1fila1celda2fila1celda3
fila2celda1fila2celda2fila2celda3

Enesteejemplohemospuestodosfilasconigualnmerodeceldas.Qupasasiese
nmeroesdistinto?Elnavegadorformaelnmerodefilasycolumnasquehagafalta,
dejandoespaciosenblancoenlasfilasquetenganmenosceldas.Sepuedeaadirun
titular(caption)alatabla,esdeciruntextosituadoencimadelatablaqueindicacules
sucontenido.Seconsigueconlaetiqueta<CAPTION>y</CAPTION>.
ElatributoBORDERponepordefectounbordedeespesorigualalaunidad.Perose
puedehacerqueestebordeseatangruesocomoqueramos,poniendo:
<TABLEBORDER=nmerodeseado>

Ademsdelasceldasquecontienendatosnormales,podemosponer,sinosconviene,
celdasdecabecera(header),quesedistinguenporestareltextodedichasceldasen
negritaycentrado.Estoseconsigueconlaetiqueta<TH>y</TH>(envezdelanormal
<TD>y</TD>).Alejemploanterior,sepuedeaadirunafiladeestasceldasdecabecera,
antesdelasotrasdosqueyaexistan:
<TR>
<TH>Columna1</TH><TH>Columna2</TH><TH>Columna3</TH>
</TR>

Sepuedencolocarenelsitioquesequiera,aunquelonormalesquevayanenlosbordes,
encabezandolascolumnasolasfilas.
Hastaahora,entodoslosejemplossehapuestountextonormaldentrodelasdistintas
celdas.Perosepuedeponerenellascualquierotroelementodelosquevanenun
documentoHTML,comoimgenes,enlaces,etc.Nohaymsqueponerdentrodela
etiquetadelaceldalaetiquetacorrespondienteaunaimagen,unenlace,etc.Ejemplo
conunaimagen:
<TABLEBORDER=2>
<TR><TD><IMGSRC=babe.gif></TD></TR>
</TABLE>

Ejemploconunenlace:
<TABLEBORDER=2>
<TR><TD><AHREF=index.html>Pginaprincipal</A></TD></TR>
</TABLE>

Normalmente,elcontenidodeunaceldaestalineadoalaizquierda.Perosepuede
cambiarestoaadiendodentrodelaetiquetadelaceldalossiguientesatributos:
<TDALIGN=CENTER>Alcentro</TD>
<TDALIGN=RIGHT>Aladerecha</TD>
<THALIGN=LEFT>Cabeceraalaizquierda</TH>

Elalineamientopordefectoenelsentidoverticalesenelmedio.Tambinsepuede
cambiar,aadiendodentrodelaetiquetadelaceldalossiguientesatributos:
<TDVALIGN=TOP>Arriba</TD>
<TDVALIGN=BOTTOM>Abajo</TD>

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Elnavegadorseencarganormalmentededimensionareltamaototaldelatablade
acuerdoconelnmerodefilas,decolumnas,porelcontenidodelasceldas,espesorde
losbordes,etc..
Avecesnospuedeconvenirforzarleparaquelatablatengaunasdimensionestotales
mayoresquelasquelecorresponden,tantoenanchuracomoenlongitud.Estose
consigueaadiendodentrodelaetiquetadelatablalosatributosWIDTHyHEIGHTiguala
unporcentajedeladimensindelapantalla,oaunacifraqueequivalealnmerode
pixels.Porejemplo,paraelancho
<TABLEWIDTH=60%>

olaaltura
<TABLEHEIGHT=200>

Avecespuedeinteresarnosqueunaceldaseextiendasobreotrasvarias.Estoseconsigue
aadindodentrodelaetiquetadelaceldalosatributosCOLSPAN=nmeropara
extendersesobreunnmerodeterminadodecolumnas,oROWSPAN=nmeropara
extenderseverticalmentesobreunnmerodeterminadodefilas.Porejemplo,enla
primeratabladeestaseccinvamosaaadirunafilaconunasolacelda,queabarcaados
columnas:
<TR><TDCOLSPAN=2>Celdasobre2columnas</TD><TR>

O,enlamismatabla,vamosaaadirunaceldaenlaprimerafila.peroqueabarque
tambinalasiguiente:
<TDROWSPAN=2>Celdajuntoa2filas</TD>

Podemosconseguirquelastablastenganuncolordefondo,siguiendounprocedimiento
totalmenteanlogoalempleadoparaqueunapginatengauncolordefondouniforme.
ParaellodebemosutilizarelatributoBGCOLOR=#XXYYZZ''.Sepuedeconseguir:
1.
Quelatotalidaddelatablatengauncolordefondo.Paraello,colocamosel
atributodentrodelaetiquetaTABLE.Porejemplo,vamosahacerquelatabla
tengaunfondoverde(#00FF00):
<TABLEBORDERBGCOLOR=#00FF00>
<TR><TD>fila1celda1</TD><TD>fila1celda2</TD></TR>
<TR><TD>fila2celda1</TD><TD>fila2celda2</TD></TR>
</TABLE>

2.
Quesolamenteunaceldadeterminadatengauncolordefondo.Paraello,
colocamoselatributodentrodelaetiquetadelaceldacorrespondiente.Por
ejemplo,vamosahacerqueslolacelda1delafila1tengauncolorverde:
<TABLEBORDER>
<TR><TDBGCOLOR=#00FF00>fila1celda1</TD><TD>fila1celda2</TD></TR>
<TR><TD>fila2celda1</TD><TD>fila2celda2</TD></TR>
</TABLE>

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

3.
Quelageneralidaddelasceldastengauncolor,peroquealgunaceldatengauno
particular.ElatributodelcolorgeneralsecolocaenlaetiquetaTABLE,yeldel
colorparticularenlaetiquetadelaceldaencuestin(unacombinacindelosdos
casosanteriores).porejemplo,vamosahacerquelageneralidaddelatablaseade
colorrojo(#FF0000),peroquelacelda1delafila1seadecolorverde(#00FF00):
<TABLEBORDERBGCOLOR=#FF0000>
<TR><TDBGCOLOR=#00FF00>fila1celda1</TD><TD>fila1celda2</TD></TR>
<TR><TD>fila2celda1</TD><TD>fila2celda2</TD></TR>
</TABLE>

ElExplorerdeMicrosoftsoportalacolocacindeimgenesdefondoenelinteriordelas
tablas,deunamaneraanlogaacomosehaceenunapgina.Paraellodebemosutilizar
elatributoBACKGROUND=imagen.gif''oBACKGROUND=imagen.jpg''.Siseutiliza
dentrodelaetiqueta<TABLE>laimagenencuestinsemultiplicardetrsdetodaslas
celdas.Porejemplo,siponemos:
<TABLEBORDERBACKGROUND=nubes.jpg>

(ConelNetscapenoseverningunaimagendefondo,sloconelExplorer).Si,porel
contrario,sloseponeesteatributodentrodelaetiquetadeunaceldaconcreta(<TD>o
<TH>),entonceslaimagendefondoseversloenesacelda.
Pordefecto,laseparacinentrelasdistintasceldasdeunatablaesdedospixels.Perose
puedevariarestoconelatributoCELLSPACING,queseponedentrodelaetiquetaTABLE.
Porejemplo,paraobtenerunaseparacinde20pixelsentreceldasponemos:
<TABLEBORDERCELLSPACING=20>

Pordefecto,laseparacinentreelbordeyelcontenidodentrodelasceldasesdeun
pixel.SepuedecambiarestoconelatributoCELLPADDING,queseponedentrodela
etiquetaTABLE.Porejemplo,paraobtenerunaseparacinde20pixelsentreelcontenido
ylosbordes,dentrodecadacelda:
<TABLEBORDERCELLPADDING=20>

SepuedecombinaresteatributoconCELLSPACING.Porejemplo,unatablaconbordesde
5deespesor,separacinentreceldasde15yseparacindelcontenidoconrespectoalos
bordesdelasceldasde20,loobtendramoscon:
<TABLEBORDER=5CELLSPACING=15CELLPADDING=20>

Ejemplo
Apartirdelejemploanteriorvamosacrearunatabladedosfilas,conunaceldacadauna.
Laprimera,comocabecera,coneltextoUnlugaridealparamisvacaciones'',yla
segundaconlaimagenisla.gif.Ademsvamosaalargaraloancholatablaal75%dela
pantalla.Paraellosustituimos:

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

<H3>Unlugaridealparamisvacaciones</H3>
<IMGSRC=isla.gifALT=isla>

Porlosiguiente:
<P><TABLEBORDER=5WIDTH=75%>
<TR><TH>Unlugaridealparamisvacaciones</TH></TR>
<TR><TD><IMGSRC=isla.gifALT=isla></TD></TR>
</TABLE>

Formularios
Lamanerageneralparaqueloslectoresdenuestrapginasepuedancomunicarcon
nosotrosespormediodeunenlaceanuestradireccindeemail,conloquerecibiramos
unemailconvencional.Peropuedeserqueloquenecesitemosseasolamenteuna
respuestaconcretaaunasopcionesquepresentaremosnosotrosmismos,oun
comentariodelusuario,paraloquelesuministraremosunespacioendondeintroducirlo.
Sepuedehacertodoesto,ademsdeotrascosas,utilizandolosformularios,conlosque
sepuedenconfeccionarpginasquecontenganloselementosnecesariosparaello,tal
comobotonesderadio,listasdeseleccin,cajetinesdeintroduccindetextoydecontrol,
etc.,comovamosaver.
Losformulariospermitenquelosdemsnosenvenlainformacindirectamentea
nosotrosobienanuestroservidor,endondehemosinstaladounprogramaqueprocese
estainformacin.Porejemplo,vamosasuponerquequeremoscrearunalistadecorreo.
Losusuariospuedenintroducirsusnombresydireccionesdeemailypulsarunbotnde
envo.Esosdatoslospodemosrecibirenbruto''ennuestrocorreo,conlosque
confeccionaramosmanualmentedichalistadecorreo,sinnecesitarningnprograma
paraello.Esteprocesoeselquevamosacomentarenestaseccin.
Laotraposibilidad,delaquenicamentesevaahacerestamencin,esquehubiramos
instaladoennuestroservidorunprogramaespecialparaprocesaresosdatosyaadirlosa
lalistadecorreo,yqueinclusopudieradevolverautomticamentealusuarioalgntipo
deinformacin.Paraconseguiresto,losformulariosnecesitanejecutarprogramaso
scriptspormediodelCGI(CommonGatewayInterface).ElCGIpermitealosformularios
serprocesadosporprogramasescritosencualquierlenguaje,aunquelosmsusadosen
InternetsonelPerlyelC.
Eltipodeformularioquesedescribeacontinuacinpodrserutilizadoporlamayorade
losnavegadores,porloqueesconvenientesuministraralfinaldelformulario,comouna
alternativaparaestoscasos,unenlacedeemailordinario.

Estructuradeunformulario
Laestructurageneraldeunformularioes:

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

1.Etiquetadeinicio:
<FORMACTION=mailto:direccin_de_emailMETHOD=POST
ENCTYPE=TEXT/PLAIN>

2.Cuerpodelformulario,conlosdistintoselementosparapoderintroducirlosdatos.
3.Botonesdeenvoydeborrado.
4.Etiquetadecierre</FORM>.

Etiquetadeinicio
ElatributoACTIONindicalaaccinquesedebeefectuaryqueesquelosdatossean
enviadosporemailaladireccinindicada.(SihiciramosusodelCGI,seraprecisamente
aqudondeindicaramossulocalizacinenelservidor,quehabitualmenteeseldirectorio
cgibin,paraqueproceselosdatos).
ElatributoMETHOD=POSTindicaquelosdatosseaninmediatamenteenviadosporcorreo
aladireccindeemail,nadamspulsarelusuarioelbotndeenvo.
ConelatributoENCTYPE=TEXT/PLAIN''seconsiguequelasrespuestaslasrecibamos
comounficherodetexto,perfectamentelegibleysincodificar.

Elementosparaintroducirlosdatos
Losvamosadividirentresclases:
1.Introduccinpormediodetexto
2.Introduccinpormediodemens
3.Introduccinpormediodebotones
Laintroduccindelosdatosseconsiguepormediodelaetiqueta:
<INPUTTYPE=xxxNAME=yyyVALUE=zzz>

Endonde:
xxxeslapalabraqueindicaeltipodeintroduccin.
yyyeselnombrequeleasignamosnosotrosalavariable
deintroduccindeldato.
zzzeslapalabraasociadaaunelemento.

Todoesto,quedemomentoparecemuyconfuso,seaclararalirviendolosdistintos
casos.

Introduccinpormediodetexto(unalnea)
Enestecasoesxxx=text,esdecir,INPUTTYPE=text''.ElatributoVALUEnoprocedeen
estecaso.

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Vamosaponerunejemplo:solicitamoselapellidodelusuario.
<FORMACTION=mailto:direccin_de_emailMETHOD=POSTENCTYPE=TEXT/PLAIN>
Escribetuapellido:
<BR><INPUTTYPE=textNAME=Apellido>
</FORM>

Sielusuariointroducesuapellido,p.ej.Ruiz,ypulsaelbotndeenvo(queveremosms
adelante),recibiremosunemailsuyoconelsiguientetexto:
Apellido=Ruiz

Lalongituddeesteformularioespordefectode20caracteres.Sepuedevariarincluyendo
enlaetiquetaelatributoSIZE=nmero''.Porotraparte,seacualsealalongituddel
formulario,sinoseindicanada,elusuariopuedeintroducirelnmerodecaracteresque
quiera.Sepuedelimitaresto,incluyendoenlaetiquetaelatributo
MAXLENGTH=nmero''.Paraelejemploanterior:
<INPUTTYPE=textNAME=ApellidoSIZE=10MAXLENGTH=12>

Tambinsepuedehacerqueeltextointroducidonoseareconocible,esdecirquetodos
loscaracteresserepresentenporasteriscos.BastaconcambiarenlaetiquetaINPUT
TYPE=text''porINPUTTYPE=password''.
<INPUTTYPE=passwordNAME=ApellidoSIZE=10MAXLENGTH=12>

Introduccinpormediodetexto(mltipleslneas)
Cuandoeltextoaintroducirpuedealcanzarunagranlongitud,porejemploun
comentario,esconvenienteutilizarunformulariodetextodemltipleslneas.Estose
consigueconlaetiquetadeinicio:
<TEXTAREANAME=yyyROWS=nmeroCOLS=nmero>

(endondenoseutilizaINPUTTYPEydondeROWSrepresentaelnmerodefilas,yCOLSel
decolumnas).yladecierre:
</TEXTAREA>

Ejemplo:unformulariosolicitandoloscomentariosdelusuario:
<FORMACTION=mailto:direccin_de_emailMETHOD=POSTENCTYPE=TEXT/PLAIN>

Introducetuscomentarios:
<BR><TEXTAREANAME=ComentariosROWS=6COLS=40>
</TEXTAREA>
</FORM>

Unavezqueelusuariohayaescritosuscomentariosdentrodelformulario,yhayapulsado
elbotndeenvo,recibiremosunemailsuyoconelsiguientetexto:
Comentarios=Blablabla...

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Introduccinpormediodemens
Siqueremosqueelusuario,envezdeintroduciruntexto,comohemosvistoenloscasos
anteriores,escojaentrevariasopcionesquelepresentamosnosotros,haremosusodeun
formularioenformademen.Seconsigueconlaetiquetadeinicio<SELECTNAME=yyy>y
ladecierre</SELECT>.Lasdistintasopcionesaescogerseconsiguenconlaetiqueta
<OPTION>.
Ejemplo:Pedimosalusuarioqueelijasucolorpreferido:
<FORMACTION=mailto:direccin_de_emailMETHOD=POSTENCTYPE=TEXT/PLAIN>
Culestucolorpreferido?
<BR><SELECTNAME=ColorPreferido>
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT>
</FORM>

Sielusuariohaescogido,p.ej.Azulyhapulsadoelbotndeenvo,recibiremosunemail
suyoconeltexto:
ColorPreferido=Azul

Enelejemploanterior,sloesvisibleenelformulariounaopcin.Siqueremosquesean
visiblesmltiplesopcionesalavez,aadimosenlaetiquetalosatributosMULTIPLE
SIZE=nmero'',dondeespecificamoselnmerodeopcionesvisibles.
<SELECTNAME=ColorPreferidoMULTIPLESIZE=2>

Formulariodeconfirmacin(checkbox)
Siqueremosqueelusuarioconfirmeunaopcindeterminada,podemoshacerusodeun
formulariodeconfirmacin,ocheckbox,queseconsigueconlaetiqueta:
<INPUTTYPE=checkboxNAME=yyy>

Ejemplo:Solicitamosalusuarioqueconfirmesuinclusinenunalistadecorreo:
<FORMACTION=mailto:direccin_de_emailMETHOD=POSTENCTYPE=TEXT/PLAIN>
<INPUTTYPE=checkboxNAME=Lista>
S,deseoserincluidoenlalistadecorreo.
</FORM>

Sielusuariomarcaesteformularioypulsaelbotndeenvo,recibiremosunemailsuyo
coneltexto:Lista=On.

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Siqueremosqueelformularioaparezcainicialmentecomomarcado(elusuariono
necesitarhacerlo),bastaconaadirelatributoCHECKEDdentrodelaetiqueta.Enel
ejemploanteriorsisustituimoslaetiquetaequivalentepor:
<INPUTTYPE=checkboxNAME=ListaCHECKED>

Botonesderadio
Cuandoqueremosqueelusuarioelijaunanicaopcinentrevarias,podemoshaceuso
delosbotonesderadio,queseconsiguenconlaetiqueta:
<INPUTTYPE=radioNAME=yyyVALUE=zzz>

Dondeyyyeselnombrequeleponemosalavariablequesetratadeelegir,yzzzesel
nombredecadaunadelasopcionesenconcreto.
Ejemplo:solicitamosalusuarioquedefinaculessusistemaoperativopreferido:
<FORMACTION=mailto:direccin_de_emailMETHOD=POSTENCTYPE=TEXT/PLAIN>
Culestusistemaoperativopreferido?
<BR>
<INPUTTYPE=radioNAME=SistemaOperativoVALUE=PCCHECKED>PC
<INPUTTYPE=radioNAME=SistemaOperativoVALUE=Mac>Mac
<INPUTTYPE=radioNAME=SistemaOperativoVALUE=Unix>Unix
</FORM>

ObsrveseelatributoopcionalCHECKEDquesehaaadidoenlaprimeraetiqueta.Esa
serlaopcinqueaparecemarcadapordefecto.Obsrvesetambinquenoesposible
escogermsdeunaopcin.
SielusuariohaescogidolaopcinPCypulsaelbotndeenvo,recibiremosunemailsuyo
coneltexto:SistemaOperativo=PC.

Botonesdeenvoydeborrado
Hastaahora,entodoslosejemplosquehemosvisto,faltabaunelementoesencialen
cualquierformulario,yeselbotndeenvodelosdatos,queseconsigueconlaetiqueta:
<INPUTTYPE=submitVALUE=zzz>

Endondezzzeseltextoquequeremosqueaparezcaenelbotn.
Vamosaaadirloalprimerejemplo,enelquesesolicitabaelapellidodelusuario:
<FORMACTION=mailto:direccin_de_emailMETHOD=POSTENCTYPE=TEXT/PLAIN>
Escribetuapellido:
<BR><INPUTTYPE=textNAME=Apellido>
<P><INPUTTYPE=submitVALUE=Enviardatos>

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

</FORM>

Otrobotninteresanteeseldeborradodelosdatosintroducidos,muyconvenienteenun
formularioconmuchoselementos.Esmuysimilaraldeenvo,puesseconsigueconla
etiqueta:
<INPUTTYPE=resetVALUE=zzz>

Endondezzzeseltextoquequeremosqueaparezcaenelbotn.
Aadimosalejemploanteriorlaetiqueta:
<P><INPUTTYPE=resetVALUE=Borrardatos>

Consideracionesfinales
Hastaahorahemosvistounoaunolosdiferenteselementosquesepuedenutilizar.Pero
nohayningninconvenienteenusar,dentrodelmismoformulario,distintostiposde
introduccindedatos.Alpulsarelusuarioelbotndeenvorecibiramosenemailsuyo
conlasdistintasparejasNAME=VALUEdecadaelemento,encadenadasconelsmbolo&.
Porejemplo,conesteformulario,condoselementosdistintos:
Escribetuapellido:

Culestucolorpreferido?

recibiramosunemailconeltexto(p.ej.):
Apellido=Ruiz
ColorPreferido=Azul.

Ejemplo
Partiendodelejemploanterior,vamosaaadirleunlibrodevisitas''.Paraello,aadimos
losiguiente,entrelasetiquetas<HR>y</BODY>situadasalfinal,losiguiente:
<P><CENTER>
<H2>Librodevisitas</H2>
<P><FORMACTION=mailto:farocena@lander.esMETHOD=POST
ENCTYPE=TEXT/PLAIN>
Tunombre:
<BR><INPUTTYPE=textNAME=Nombre>
<P>Escribetuscomentarios:
<BR><TEXTAREANAME=ComentariosROWS=6COLS=40>
</TEXTAREA>
<P><INPUTTYPE=submitVALUE=Enviardatos>
<INPUTTYPE=resetVALUE=Borrardatos>
</FORM>
<P>
<HR>

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Frames
Frames(eningls,marcosocuadros)esunprocedimientodellenguajeHTMLparadividir
lapantallaendiferenteszonas,oventanas,quepuedenactuarindependientementeunas
deotras,comosisetratarandepginasdiferentes,puesinclusocadaunadeellaspueden
tenersuspropiasbarrasdeslizadoras.Unadesuscaractersticasmsimportantesesque
pulsandounenlacesituadoenunframe,sepuedecargarenotroframeunapgina
determinada.Estoseutilizafrecuentementeparatenerunframeestrechoenlaparte
lateral(osuperior)conunndicedelcontenidoenformadediferentesenlaces,que,alser
pulsadoscarganenlaventanaprincipallasdistintaspginas.Deestamanerasefacilitala
navegacinentrelaspginas,puesaunquesevayapasandodeunasaotras,siempre
estaralavistaelndicedelconjunto.

Documentodedefinicindelosframes
LoprimeroquetenemosquehacerescrearundocumentoHTMLenelquedefiniremos
cuntaszonasvaahaber,qudistribucinytamaovanatener,yculvaserelcontenido
decadaunadeellas.Enelejemploquevamosadesarrollar,lapginavaatenerdos
framesdistribuidosencolumnas(esdecir,unoalladodelotro,envezdeunoencimadel
otro,loqueseraunadistribucinenfilas).
Conrespectoaltamao,haremosqueelprimero(eldelizquierda)ocupeel20%delancho
delapantalla,yelotro,el80%restante.Yconrespectoalcontenido,elframedela
izquierdavaacontenerundocumentoHTMLquevaaservirdendicedeloqueveamos
enelotro(yquevamosallamarmipagind.html),yeldeladerechaotrodocumentoHTML
quevaaservirdepginadepresentacin(alquellamaremosmipagpre.html).
TodoloanteriorsereflejaenelsiguientedocumentoHTML:
<HTML>
<HEAD>
<TITLE>Mipaginaconframes</TITLE>
</HEAD>
<FRAMESETCOLS=20%,80%>
<FRAMESRC=mipagind.html>
<FRAMESRC=mipagpre.htmlNAME=principal>
</FRAMESET>
</HTML>

Obsrvesequeesundocumentoparecidoalosqueconocamoshastaahora.Ladiferencia
estenqueenvezdeutilizarlaetiquetaBODY,quesirvenormalmenteparadelimitarlo
quesevaaverenlapantalla,sehaceusodelaetiquetaFRAMESET(definirlosframes).En
estecaso,conlaetiqueta<FRAMESETCOLS=20%,80%>sedefinequevaahaberdosframes
yquevanairencolumnas.Sihubiramosqueridoquefueranenfilas,habramospuesto
ROWS(filas,eningls).Tambinsedefineelespacioenanchuraquevanaocuparcada

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

unodeellosenlapantalla.Sehapuestocomoporcentajesdeltotal,perosepodra
tambinhaberpuestounacifraabsoluta,querepresentaraelnmerodepixelsaocupar.
Elcontenidodecadaframeseespecificmediante:
<FRAMESRC=mipagind.html>
<FRAMESRC=mipagpre.htmlNAME=principal>

Conestosedefinequeelcontenidodelprimerframe(eldelaizquierda)seael
documentoHTMLmipagind.htmlyeldelsegundo(eldeladerecha)seaeldocumento
HTMLmipagpre.html.
ObsrvesequeenlaetiquetadelsegundosehaincluidoelatributoNAME=principal'',
peronoasenelprimero.Elmotivoesquesenecesitadarunnombrealsegundoframe,
pues,comoveremosacontinuacin,eneldocumentodelprimerframevaahaberunos
enlacesquevanairdirigidoshacial.Enestecasoslotenemosdosframes,peropodra
haberms,yesnecesariodistinguirlosunosdeotros.Yelprimerononecesitanombre,
puesnovaahaberenlacesenelsegundodirigidoshacial.

Documentodelframedelaizquierda
Vaatenerunfondoamarillo,yvaacontenerdosenlacesdirigidosalframedeladerecha.
Adems,comomuestradequesepuedeaadircualquiercosaenunframe,vamosa
incluirestelogoanimado(glogoan2.gif):
<HTML>
<HEAD>
<TITLE>Indice</TITLE>
</HEAD>
<BODYBGCOLOR=#FFBB00>
<P><AHREF=mipagpre.htmlTARGET=principal>Presentacin</A>
<P><AHREF=mipag13.htmlTARGET=principal>Mipgina</A>
<P><IMGSRC=glogoan2.gif>
</BODY>
</HTML>

Dentrodelasetiquetasdelosenlacespodemosobservaralgonuevo,yeselatributo
TARGET(eningls:objetivo,blanco),quesirveparahacerquealseractivadoelenlaceno
secargueenelpropioframe,sinoenotro,precisamenteenelquehayamosllamadocon
esenombreeneldocumentodedefinicindelosframes.
Ennuestrocaso,lehemosdadoelnombredeprincipal''alframedeladerecha,yespor
tantoahdondesevanacargarlosdocumentosHTML.Guardamosestedocumentoconel
nombredemipagind.html.Adems,capturamoslaimagenglogoan2.gif,ylaguardamos
juntoconeldocumento.

Documentodelframedeladerecha
Vaatenerunfondonegro,yvaacontenerslamenteuntexto.

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

<HTML>
<HEAD>
<TITLE>Presentacion</TITLE>
</HEAD>
<BODYBGCOLOR=#000000TEXT=#0000FF>
<CENTER>
<FONTSIZE=+3><STRONG>
<P>ESTAESLAVERSION
<BR><FONTCOLOR=#FF0000>CONFRAMES</FONT>
<BR>DEMIPAGINA
</STRONG>
</FONT>
</CENTER>
</BODY>
</HTML>

Guardamosestedocumentoconelnombredemipagpre.html

Alternativaparalosnavegadoresquenosoportanframes
Quocurriraconlosnavegadoresquenosoportanlosframes?Aldesconocerlas
etiquetasFRAMESETyFRAMEdeldocumentodedefinicin,nopodraejecutarloyno
podracargarlapgina.Paraestoscasosestprevistalaetiqueta<NOFRAMES>y
</NOFRAMES>.Seaadenalfinaldeldocumentodedefinicindelosframes,ysepone
entreambasloquequeremosqueveanlosqueaccedenconunnavegadorquenosoporta
frames.PuedeinclusoserelcdigoHTMLdeunapginacompleta(loquenormalmente
vaentrelasetiquetas<BODY>y</BODY>).
Ennuestrocaso,vamosaponerunmensajeadvirtiendodeestacircunstancia,ydirigiendo
alusuario,conunenlacenormal,hacialapginamipag13.html:
<NOFRAMES>
Estasutilizandounnavegadorquenosoportaframes.
<P>Pulsaparavisitarmi<AHREF=mipag13.html>pgina</A>.
</NOFRAMES>

Loincluimosdentrodeldocumentodedefinicindelosframes,quehemosvistoantes,y
quequedadeestamanera:
<HTML>
<HEAD>
<TITLE>Mipaginaconframes</TITLE>
</HEAD>
<FRAMESETCOLS=20%,80%>
<FRAMESRC=mipagind.html>
<FRAMESRC=mipagpre.htmlNAME=principal>
</FRAMESET>
<NOFRAMES>
Estasutilizandounnavegadorquenosoportaframes.
<P>Pulsaparavisitarmi<AHREF=mipag13.html>pgina</A>.
</NOFRAMES>
</HTML>

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Atributosdelaetiqueta<FRAMESET>
LaetiquetaFRAMESET,comohemosvistoenelejemplo,eslaquedefineladistribucin,el
nmeroytamaodelosframes.Tienedosatributos:COLS(columnas)yROWS(filas):
<FRAMESETCOLS=xx,yy,zz,..>
<FRAMESETROWS=xx,yy,zz,..>

Defineladistribucindelosframesencolumnasoenfilas,segnseuseunouotro
atributo.Defineelnmerodeframesquehabr,pues,porejemplo:
<FRAMESETCOLS=xx,yy>(habrdosframesencolumnas)
<FRAMESETCOLS=xx,yy,zz>(habrtresframesencolumnas)

Defineeltamaodelosframes,segnelvalorquedemosaxx,yy,zz....Estevalorse
puedeexpresaren:

Unporcentajedelanchodelpantalla(paralascolumnas),odelaltodelapantalla
(paralasfilas).As,porejemplo:
<FRAMESETCOLS=%20,%80>

(Lacolumnadelaizquierdaocuparel20%delanchodelapantalla,yladela
derechael80%restante)
<FRAMESETROWS=%10,%70,%20>

(Lafilasuperiorocuparel10%delaltodelapantalla,ladelmedioel70%,yla
inferiorel20%)

Unnmeroabsolutoquerepresentaelnmerodepixelsqueocuparcadaframea
loanchooaloalto(segnseanfilasocolumnas).As,porejemplo:
<FRAMESETCOLS=40,600>

(Lacolumnadelaizquierdatendr40pixelsdeanchoyladeladerecha600).Pero
espeligrosoutilizarslovaloresabsolutos,pueseltamaodelapantallavarade
unusuarioaotro.Sisevaausaralgnvalorabsolutoparaunframe,esmejor
mezclarloconalgunorelativo,comolosquevamosaveracontinuacin,paraque
seajusteeltotalalapantalladelusuario

Unvalorrelativoqueseconsigueponiendounasterisco(*),envezdeunnmero.
Estoseinterpretacomoqueeseframedebetenerelespaciorestante.Por
ejemplo:
<FRAMESETROWS=100,*,100>

(Habrtresfilas,lasuperiorylainferiordeunaalturafijade100pixels,yladel
medioobtendrelespaciorestante).Sihaymsdeunframeconasterisco,ese
espaciorestantesedividirporigualentreellos.Sihayunnmeroantesdel

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

asterisco,eseframeobtieneesacantidadmsdeespaciorelativo.As2*,*''dara
dosterciosparaelprimerframeyuntercioparaelotro.

Framessinbordes
Sisedeseaquenohayaunbordedeseparacinentrelosframes,sedebenincluirel
atributoFRAMEBORDER=0dentrodelaetiquetaFRAMESET.Notodaslasversionesdelos
navegadoresloimplementan.
Paraquetambindesaparezcanloshuecosdeseparacinentreframeshayqueaadir
otrosdosatributos(elprimeroesparaelExploreryelsegundoparaelNetscape):
FRAMESPACING=0yBORDER=0.conloquelaetiquetacompletaquedara:
<FRAMESETFRAMEBORDER=0FRAMESPACING=0BORDER=0COLS=xx,yy>

Atributosdelaetiqueta<FRAME>
Estaetiquetadefinelascararactersticasdeunframeconcreto,nodelconjuntodelos
frames,comoeraelcasoconlaetiqueta<FRAMESET>>Puedetenerlossiguientes
posiblesatributos,quevandentrodelaetiqueta<FRAME>:

SRC=direccin''.EstadireccinpuedeserladeundocumentoHTML(talcomo
hemosutilizadoenelejemplo),ocualquierotrorecursodelWeb(oURL).Coneste
atributoseindicaloquesecargarinicialmenteenelframe.Sinoseleponeeste
atributoalaetiqueta<FRAME>,entoncesdichoframeaparecerinicialmente
vaco,aunquetendrlasdimensionesasignadas.
NAME=nombre_de_la_ventana''.Esteatributoseusaparaasignarunnombrea
unframe.Deestamanerasepodrdarenelblanco''(eningls,target)enesta
pgina,desdeunenlacesituadoenotrapgina.Esdecir,quepulsandoenotra
pginaunenlace,secargarprecisamenteensta,talcomohemosvistoenel
ejemplo.ElatributoNAMEesopcional.Pordefecto,todaslasventanascarecende
nombre.Losnombresqueseescojandebencomenzarporuncarcter
alfanumrico(unaletraounnmero,peronootrotipodesmbolo)
MARGINWIDTH=nmero''.Seutilizaesteatributocuandosequierecontrolarla
elanchodelosmrgenesdentrodeunframe.Elnmeroquesepongarepresenta
lospixelsdelosmrgenes.Esteatributoesopcional.
MARGINHEIGHT=nmero''.Igualqueelanterior,peroreferidoalosmrgenesen
altura.
SCROLLING=yes|no|auto''.Esteatributoseutilizaparadecidirsielframetendr
onounabarradeslizadora.Siseescojeyes''tendrsiempreunabarra
deslizadora.Siseescogeno''nolatendrnunca,ysiseescojeauto'',serel
navegadorquiendecidasilatendrono.Esteatributoesopcional.Suvalorpor
defectoesauto''.

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

NORESIZE.Aesteatributonoseleasignaunvalornumrico,comoalosdems.Es
unindicadorparaquelaventananosepuedaredimensionar(eningls,resize)
porpartedelusuario.Sepuedecomprobarenelejemploconframesquesise
colocaelcursordelratnentrelosdosframes,alpulsarloyarrastrarloenun
sentidouotro,varanlasdimensionesprefijadasdelosframes.Esteatributo
impidequeocurraestoenunframe.Esunatributoopcional.Pordefecto,todos
losframessonredimensionables.
FRAMEBORDER=no''.Esteatributoeliminaelbordeenunframe,perosisequiere
queseeliminecompletamente,tambinhayqueponrseloalframecontiguo.Si
sequiereeliminarlosbordesdetodoslosframes,sedebecolocarenlaetiqueta
FRAMESET,comohemosvistoanteriormente.

ElatributoTARGET
Enelejemplohemosvistoque,comoqueramosquelosenlacessituadosenelframedela
izquierdasurtieranefectonoenlmismo,sinoenotroframe,tenamosqueponerdentro
decadaenlaceelatributoTARGET=principal'',siendoprincipal''elnombreque
habamosdadoalsegundoframe,eneldocumentodedefinicindeframes.Esdecir,
hemosutilizadoesteatributodeestamanera:
TARGET=nombre_dado_a_otro_frame.

Estosnombres,quelosescogemosnosotros,puedensercualquiera,peroconlacondicin
queelprimercarcterseaalfanumrico(letraonmero).
Perohayunosnombresreservados(esdecir,quenosepuedenusarparadenominaraun
frame),quehacenqueesteatributoefecteunasfuncionesespeciales.Paraquecumplan
sucometido,esimprescindibleescribirestaspalabrasreservadas(blank,selfytop)en
minsculas:

TARGET=_blank''.Hacequeseabraunanuevacopiadelnavegador,yelenlace
activadosecargaenella,apantallacompleta.Esdecir,tendramosdoscopiasdel
navegador(Netscape,Explorer,etc.)funcionandoalavez.
TARGET=_self''.Hacequeelenlacesecargueenelpropioframe.
TARGET=_top''.Hacequeelenlacesecargueapantallacompleta,suprimiendo
todoslosframes,perosinquesecargueunanuevacopiadelnavegador.Estees
particularmentetil.Unerrormuycomnesolvidarsedeponeresteatributoen
losenlacesqueestnenunframe,conloqueresultaquealseractivados,la
pginallamadasecargadentrodelpropioframe,locualesmuymolestosiesa
pginaperteneceaotrositiodelWeb,yanmsgravesiesapginatieneasuvez
frames.Esteinconvenienteseevitaponiendoesteatributodentrodelasetiquetas
delosenlaces.

Ing. Arturo Daz Pulido

Universidad Nacional JOSE MARIA ARGUEDAS

Framesanidadosdentrodeotrosframes
Hastaahorahemoscontempladoslolaposibilidaddetenerunadistribucindelos
framesbienenfilasobienencolumnas,(dependiendoqueseutiliceelatributoROWSo
COLSenlaetiquetaFRAMESET),peronoambosalavez.Sepuedenobtenerdistribuciones
mscomplejasanidandofilasdentrodeunacolumna,oalainversa,columnasdentrode
unafila.Supongamosquequeremoslasiguientedistribucin:

Unframeestrechoenhorizontalenlapartesuperior,deladoaladodelapantalla
(altura,el15%),
Otroframeestrechoenverticalenlaparteizquierda,debajodelanterior(anchura,
el20%),
Unterceroocupandoelrestodelapantalla.

Vemosque,enrealidad,estoequivalealasiguientedistribucin:
Dosfilas.Lasuperiorocupael15%ylainferiorelresto.Lafilainferiorestasuvez
divididaendoscolumnas.Laprimera(ladelaizquierda)ocupael20%ylaotra,elresto.
Eldocumentodedefinicindelasdosfilas(olvidmonosdemomentoqueladeabajo
estsubdividida),sera:
<HTML>
<HEAD>
<TITLE>Paginacondosfilas</TITLE>
</HEAD>
<FRAMESETROWS=15%,*>
<FRAMESRC=documento_fila_superior>
<FRAMESRC=documento_fila_inferior>
</FRAMESET>
</HTML>

Comolafilainferior,enrealidad,sondoscolumnas(conunadistribucindel20%yresto),
sustituimos(anidando)laetiqueta
<FRAMESRC=documento_fila_inferior>,por:
<FRAMESETCOLS=20%,*>
<FRAMESRC=documento_columna_izqda>
<FRAMESRC=documento_columna_dcha>
</FRAMESET>

Conloquequedaeldocumentodefinitvoas:
<HTML>
<HEAD>
<TITLE>Paginaconfilasuperiorydoscolumnasinferiores</TITLE>
</HEAD>
<FRAMESETROWS=15%,*>
<FRAMESRC=documento_fila_superior>
<FRAMESETCOLS=20%,*>
<FRAMESRC=documento_columna_izqda>
<FRAMESRC=documento_columna_dcha>
</FRAMESET>
</FRAMESET>
</HTML>

Ing. Arturo Daz Pulido