Post on 07-Jul-2018
8/18/2019 Controles Iniciales HTML
1/26
DAI5501-DISEÑO DE APLICACIONES PARAINTERNET
DAI5501-DISEÑO DE APLICACIONES PARAINTERNET
Experiencia 1- Controles Iniciales de T!L " proceso de #or$%larios
8/18/2019 Controles Iniciales HTML
2/26
Introd%cci&n al len'%a(e T!L
• El )orld )ide )e* +))), es %n siste$a %e contiene %nacantidad de in.or$aci&n casi in/nita Pero esta in.or$aci&nde*e estar ordenada de al'%na .or$a de $anera %e seaposi*le encontrar lo %e se *%sca
• La %nidad *sica donde est al$acenada esta in.or$aci&n
son las p'inas )e* Estas p'inas se caracteri2an porcontener texto3 i$'enes3 ani$aciones e incl%so sonido "4ideo
• na de las caracter6sticas $s i$portantes de las p'inas)e* es %e son 7ipertexto Esto %iere decir %e las p'inas
no son ele$entos aislados3 sino %e estn %nidas a otras$ediante los lin8s o enlaces 7ipertexto 9racias a estosenlaces el na4e'ante de internet p%ede p%lsar so*re %n texto+texto al %e lla$are$os de a7ora en adelante acti4o, de%na p'ina para na4e'ar 7asta otra p'ina
8/18/2019 Controles Iniciales HTML
3/26
:C&$o se 7ace %na p'ina )e*;C%ando los dise
8/18/2019 Controles Iniciales HTML
4/26
Estas caracter6sticas son las %e $arcaron el dise
8/18/2019 Controles Iniciales HTML
5/26
• na de las caracter6sticas de este len'%a(e $si$portantes para el pro'ra$ador es %e no es necesarionin'Bn pro'ra$a especial para crear %na p'ina )e*
• 9racias a ello se 7a conse'%ido %e se p%edan crear
p'inas con c%al%ier co$p%tador " siste$a operati4o Elc&di'o T!L3 co$o 7e$os adelantado en el prra.oanterior3 no es $s %e texto " por tanto lo Bnico necesariopara escri*irlo es %n editor de texto co$o el %eaco$pa
8/18/2019 Controles Iniciales HTML
6/26
na 4e2 7e$os escrito el c&di'o de*ere$os '%ardar el
arc7i4o +con .or$ato de texto, con la extensi&n 7t$lLos si'%ientes son no$*res 4lidos de arc7i4os %econten'an c&di'o T!L= index7t$l3 index7t$3principal7t$l3PRINCIPAL7t$3 etcATENCIFN= El )orld )ide )e* es %n siste$a %e di.erencia
las $a"Bsc%las de las $inBsc%las Es %n error co$Bn lla$ar a%n arc7i4o index7t$l " l%e'o re.erirse a >l co$o Index7t$lA%n%e en n%estro co$p%tador p%ede .%ncionar al p%*licarlose'%ra$ente no lo 7ar Por esta ra2&n es %na nor$a 'eneral%sar sie$pre $inBsc%las para los no$*res de los arc7i4os
7t$l
8/18/2019 Controles Iniciales HTML
7/26
Todos estos editores T!L tipos p%eden serde 'ran a"%da " tienen s%s 4enta(as eincon4enientes3 pero la experiencia
de$%estra %e conocer el len'%a(e T!Lo.rece *astantes 4enta(as=• Sere$os capaces de apro4ec7ar todas las
caracter6sticas de este len'%a(e3 incl%so las $s n%e4as• No dependere$os de la disponi*ilidad de %na
7erra$ienta concreta para poder crear p'inas ?e*Con %n si$ple editor de textos ser s%/ciente
Al'%nas ra2ones para %sar T!L
8/18/2019 Controles Iniciales HTML
8/26
• Las &rdenes de este len'%a(e estarn.or$adas por %nos co$andoslla$ados eti%etas %e p%eden tenero *ien la si'%iente estr%ct%ra=Gno$*reHeti%etaO *ien esta otra=
Gno$*reHeti%eta TextoGJno$*reHeti%eta
Las *ases de T!L
8/18/2019 Controles Iniciales HTML
9/26
• Co$o 4e$os3 la pri$era estr%ct%ra est.or$ada por %na Bnica instr%cci&n " la
se'%nda por dos= %na %e $arca el iniciode la eti%eta " otra %e $arca el /nal3con texto entre a$*as
• Por e(e$plo3 para indicarle al na4e'ador
%e %ere$os %e pinte %na l6nea7ori2ontal de*e$os escri*ir=
G7r
• As6 de sencillo Co$o 4e$os3 el no$*re dela eti%eta 4a deli$itado por los s6$*olos$enor %e +G, " $a"or %e+,3 todas lasinstr%cciones de T!L de*en ir encerradas
entre estos dos s6$*olos
8/18/2019 Controles Iniciales HTML
10/26
Partes de %n doc%$ento T!LEn primer lugar deberemos especificar que el archivo de texto que estamos
escribiendo es un documento HTML, para ello usamos las instrucciones de
inicio y fin de la etiqueta al principio y al final de la página respectivamente!html"
#$digo de la pagina
!%html"
El c&di'o de la p'ina esta .or$ado a s% 4e2 por dos 'randes*lo%es3 la cabecera y el cuerpoLa ca*ecera de la p'ina est deli$itada por las instr%cciones deinicio " /n de la eti%eta 7ead Estas instr%cciones de*en estar dentro de la eti%eta T!L de lasi'%iente $anera=!html"
!head"
elementos de cabecera
!%head"
!%html"
8/18/2019 Controles Iniciales HTML
11/26
En la ca*ecera de la p'ina se introd%ce todaa%ella in.or$aci&n %e a.ectar a toda la p'inaEn %n principio esta in.or$aci&n se li$itar al t6t%loEste t6t%lo se indicar con la eti%eta title %sando la
si'%iente sintaxis=!html"
!head"
!title" titulo de la pagina !%title"
!%head"!%html"
8/18/2019 Controles Iniciales HTML
12/26
• El c%erpo es el si'%iente 'ran *lo%e den%estro doc%$ento T!L3 >ste %edardeli$itado por la eti%eta *od"
• En s% interior introd%cire$os todosa%ellos ele$entos de los %e %ere$os%e conste n%estra p'ina co$o p%edenser testo3 i$'enes3 ta*las3 etc
• Conociendo la eti%eta *od" pode$osa$pliar el e(e$plo anterior para %eincl%"a texto
• Las $a"Bsc%las o $inBsc%las son
8/18/2019 Controles Iniciales HTML
13/26
G7t$lG7ead
Gtitle tit%lo de la pa'ina GJtitle
GJ7eadG*od"
texto %e se %iere $ostrar directa$enteGJ*od"GJ7t$lnotar que las etiquetas pueden ser escritas con cualquier tipo de
combinaci$n de may&sculas y min&sculas'
!html",!HTML" o !HtmL" son la misma etiqueta'
(esulta sin embargo aconse)able acostumbrarse a escribirlas en
min&scula ya que otras tecnolog*as que pueden convivir con nuestroHTML +ML por e)emplo- no son tan permisivas'
8/18/2019 Controles Iniciales HTML
14/26
• Co$o e(e$plo tene$os
• Con el doc%$ento T!L creado3 pode$os 4er el res%ltadoo*tenido a partir de %n na4e'ador Es con4eniente3 lle'adoa este p%nto3 7acer 7incapi> en el 7ec7o de %e no todoslos na4e'adores son id>nticos
• Des'raciada$ente3 los res%ltados de n%estro c&di'op%eden ca$*iar de %no a otro por lo %e res%ltaaconse(a*le 4is%ali2ar la p'ina en 4arios
• P%ede re4isar el listado asociado de eti%etas paraco$ple$entar este p%nto
8/18/2019 Controles Iniciales HTML
15/26
• asta a7ora 7e$os 4isto la .or$a en la %e el T!L'estiona " $%estra la in.or$aci&n3 esencial$ente $ediantetexto3 i$'enes " enlaces
• Nos %eda por 4er de %> .or$a pode$os interca$*iarin.or$aci&n con n%estro 4isitante Desde l%e'o3 este n%e4oaspecto res%lta pri$ordial para 'ran cantidad de acciones%e se p%eden lle4ar a ca*o $ediante el )e*= Co$prar %nartic%lo3 rellenar %na enc%esta3 etc
• T!L propone %na sol%ci&n a$plia= Los .or$%lariosLos .or$%larios son ca(as de texto " *otones %e pode$osencontrar en $%c7as p'inas ?e*• Son $%" %tili2ados para reali2ar *Bs%edas o *ien para
introd%cir datos• sando T!L pode$os Bnica$ente en4iar el .or$%lario Si
%ere$os procesar el .or$%lario $ediante %n pro'ra$a la
sit%aci&n p%ede res%ltar %n poco $s co$ple(a "a %etendre$os %e e$plear otros len'%a(es
#or$%larios T!L
8/18/2019 Controles Iniciales HTML
16/26
• Los .or$%larios son de/nidos por $edio de laseti%etas G.or$ " GJ.or$
• Entre estas dos eti%etas colocare$os todos losca$pos " *otones %e co$ponen el .or$%lario
• Dentro de esta eti%eta G.or$de*e$osespeci/car al'%nos atri*%tos= . Action . !et7od . Na$e
G.or$ na$eK.or$En4iaM
$et7odKpostM actionKin'reso7t$lM
8/18/2019 Controles Iniciales HTML
17/26
• Ca$pos de texto• El T!L nos propone %na 'ran di4ersidad
de alternati4as a la 7ora de crear n%estros
.or$%larios• Estas 4an desde la clsica ca(a de texto
7asta la lista de opciones pasando por lasca(as de 4alidaci&n
• Ginp%t t"peKtextM na$eKtxtNo$*erMJ
Ele$entos de #or$%larios
8/18/2019 Controles Iniciales HTML
18/26
• Cajas de texto.
• Co$o res%$en recordare$os %e parainsertar este tipo de control en %na p'ina
)e* se %sa la eti%etaINPUT
+esta $is$aeti%eta ser la %tili2ada para insertar la$a"or6a de controles,3 con TYPEKtext Esdecir=
Controles de in'reso dein.or$aci&n
8/18/2019 Controles Iniciales HTML
19/26
• MAXLENGTH: Con este atri*%to li$ita$os el nB$ero$xi$o de caracteres %e p%eden ser escritos en%na ca(a de texto El 4alor de este atri*%to p%edeser $a"or o $enor %e el especi/cado en SIE3 "%e es total$ente independiente Si es $a"or
c%ando lle'%e$os al /nal de la ca(a de texto losn%e4os caracteres %e inserte$os irn despla2ando7acia la i2%ierda a los pri$eros3 %e de(arn deestar a la 4ista +OO3 esto no %iere decir %e sean*orrados,
8/18/2019 Controles Iniciales HTML
20/26
• VALUE: Sir4e para especi/car %n texto%e de*e aparecer por de.ecto en la ca(a
de texto3 antes de %e el %s%ario escri*anada Este texto s%ele ser3 en 'eneral3 o*ien instr%cciones o *ien la resp%esta $spro*a*le Qea$os %n e(e$plo %e il%stra
estos dos casos=
8/18/2019 Controles Iniciales HTML
21/26
• En ocasiones p%ede ser con4eniente pedir al
%s%ario al'Bn tipo de in.or$aci&n con/dencialco$o p%ede ser %na cla4e de acceso o password
• El len'%a(e T!L per$ite %tili2ar3 en estos casos3%na ca(a de texto $odi/cada en la %e al escri*ir
se $ostrarn Bnica$ente asteriscos Para ellode*e$os %sar TYPE="password" en laeti%eta INPT
Cajas de texto para claves.
8/18/2019 Controles Iniciales HTML
22/26
• Estos controles reciben también el nombre de botones de radio, como
traducción directa de su denominación inglesa radio buttons y porque en
general los navegadores suelen darles una forma circular.
• Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT , pero esta vez el valor del atributo TPE será radio:
• Este tipo de controles tiene dos estados o posiciones: seleccionado (!" o
no seleccionado (##", estando inicialmente todos en la posición ##.
$ambién es posible especificar que un botón determinado esté seleccionado
inicialmente insertando el atributo CECED en la etiqueta INPT de lasiguiente manera:
Botones de elección.
8/18/2019 Controles Iniciales HTML
23/26
• Las ca(as de selecci&n '%ardan ciertos parecidos
con los *otones de radio3 pero ade$s per$itirnseleccionar 4arias opciones en %na lista• Al i'%al %e dic7os *otones tienen dos posiciones3
seleccionados o no seleccionados3 estando en estaBlti$a posici&n inicial$ente3 a no ser %e 7a"a$os
%sado el atri*%to CECED• Cada ca(a de selecci&n es independiente del resto3
" por tanto el 4alor del atri*%to NA!E de*e serdi.erente en cada %na
• Para insertar %na ca(a de selecci&n de*e$os %sarde n%e4o la eti%eta INPT3 pero esta 4e2con TYPE="checkbo" Qea$os %n e(e$plo de %sode este tipo de controles=
Cajas de selección.
8/18/2019 Controles Iniciales HTML
24/26
• Este control reci*e el no$*re de *ot&n de*orrado o *ot&n de reseteado +rese! b!!o# , Lacreaci&n de este control es $%" sencilla Den%e4o %sare$os la eti%eta INPUT 3 esta 4e2
con TYPE="rese!"=
Botón de borrado
8/18/2019 Controles Iniciales HTML
25/26
• Para co$pletar la colecci&n de *otones delos .or$%larios3 nos encontra$os con laposi*ilidad de insertar %n *ot&n 'en>rico3
es decir3 %e no tiene nin'%na .%nci&nde/nida3 sino la %e nosotros %era$osdarle Para insertar %n *ot&n 'en>rico%sare$os la eti%eta INPT
con TYPE="b!!o#"=
Botón genrico
8/18/2019 Controles Iniciales HTML
26/26
• Los ca$pos oc%ltos son %n tipo de control %eBnica$ente sir4e para incl%ir in.or$aci&nadicional entre los datos del .or$%lario
• Este tipo de control es in4isi*le3 " por tanto elna4e'ador no $%estra nin'Bn tipo de 'r/copara ad4ertir de s% existencia
• :Para %> sir4e entonces %n control oc%lto; En'eneral3 los ca$pos oc%ltos se %san para en4iar
in.or$aci&n espec6/ca al pro'ra$a del ser4idor)e* %e procesar los datos en4iados
Ca"pos ocultos