Controles Iniciales HTML

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


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


3/26

:C&$o se 7ace %na p'ina )e*;C%ando los dise


4/26

Estas caracter6sticas son las %e $arcaron el dise


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


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


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/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


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


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"


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"


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


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'


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


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


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


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


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


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,


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=


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.


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.


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.


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


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


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

Controles Iniciales HTML

Documents

Transcript of Controles Iniciales HTML