Programación Web HTML5.ppt

7/23/2019 Programación Web HTML5.ppt

http://slidepdf.com/reader/full/programacion-web-html5ppt 1/97

ProgramaciónWeb

Programación Web,Cliente/Servidor, Servidor Web,HTTP, HTML, Etiquetas, CSS,

Java Scrit, HTML!"

Ing. Ramón A. Aray L.



Contenido:Contenido:

#"$ Programación Cliente/Servidor"

##"$ HTTP"

###"$ Lengua%e de Marcado / HTML"#&"$ Etiquetas HTML"

&"$ Javascrit / CSS 'Cascading St(le

S)eet*"



I.- Programación

Cliente/Servidor.



La Evolución de la ProgramaciónLa Evolución de la Programación

WebWebPara transmitir in+ormación se requiere un medio detransmisión"no de los modos de comunicación que utili-an lascomutadoras es conectarse a #nternet 'WWW*"

La convención est.ndar ara esta comunicación es elHTTP 'H(er Tet Trans+er Protocol*"La in+ormación en #nternet o WWW est. guardada en+orma de documentos generalmente como páginas web"Est.n almacenadas en una ubicación central

denominada el servidor , ara que m0ltiles usuarios'clientes 1eb* accesen ( comartan la in+ormación"Las ventanas de acceso a las .ginas 1eb se denominanavegador 1eb o '1eb bro1ser*"



La Evolución de la ProgramaciónLa Evolución de la Programación

WebWeb

Hasta la d2cada del 34, no era osible comartirin+ormación remota a trav2s de comutadoras"

El conceto de internet surge en los EE"" En5637 ara roósitos de de+ensa"

im !erner" Lee desarrolló un rograma a iniciosde los 64, que tenia la caacidad de acceder ain+ormación remota, ero solo arc)ivos de teto"

8 +inales de 5667, se desarrolló un navegador queroorcionaba acceso a teto, gr.+icos ( animaciones a

trav2s de las comutadoras"Se desarrolló un lengua%e de rogramación aramane%ar la in+ormación gr.+ica ( teto conocido comoHTML 'H(er Tet Mar9u Language*"



Programación WebProgramación Web

Cliente/Servidor Cliente/Servidor

I#

Cliente

Inter$a% de

Protocolo

Inter$a% de

Protocolo

Servidor

&ato"

RE&




Cliente/Servidor Cliente/Servidor Cliente:Cliente: 8ct0a como un reresentante del usuario enviando laetición al servidor" Tambi2n act0a como un agente recetorrecibiendo la resuesta del servidor" El cliente roorciona unainter+a- ara que los usuarios ingresen los valores solicitados,establece el enlace de comunicación con el servidor, recibe laresuesta del servidor sobre la consulta solicitada ( la resenta deregreso a los usuarios"Servidor:Servidor: Es un rograma que resonde la consulta del cliente"Toma los detalles solicitados or el usuario en la base de datos"

&ato":&ato": La trans+erencia de datos del servidor al cliente sedenomina resuesta" La resuesta del servidor generalmente est.

en +orma de teto que reresenta alg0n lengua%e de marcado'Mar9u Language*"

Protocolo:Protocolo: n con%unto de convenciones seguidas ara unae+ectiva comunicación eer$to$eer entre el cliente ( el servidor, (se logra a trav2s de HTTP"




Cliente/Servidor Cliente/Servidor

8lgunas de las +uncionalidades de un servidor se muestrana continuación:

&ato" Seguro"

Concurrencia

Protección Autenticación

Autori%ación

Privacidad

Servidor



II.- 'P.



'P'P

La rimera versión de HTTP la 4"6, +ue desarrolladaen 5663"

Ten;a la caacidad de transmitir datos sólo en +ormade teto"

M.s tarde, una versión me%orada la 5"4, od;atransmitir in+ormación de teto ( gr.+icos en el +ormatoM#ME 'Multiurose #nternet Mail Etension* Etensiónde Correo #nternet Multiroósito"

En HTTP, la in+ormación es enviada ( recibida en

+orma de solicitud/resuesta"El m2todo de solicitud generalmente contiene el<L 'ni+orm <esource Locator* Locali-ador ni+ormede <ecursos, que roorciona la dirección destino"



'P'P

Tambi2n inclu(e mensa%es como M#ME, que inclu(emodi+icadores de solicitud, teto del cliente ( elcontenido necesario ara conectarse a un servidor"

La comunicación HTTP emie-a asando la

solicitud or medio de un agente usuario 'ser 8gent=8>* o navegador, al servidor origen destino '?riginServer =?>*

La comunicación entre un agente usuario ( elservidor origen se da a trav2s de la cadena de solicitud (la cadena de resuesta"

La solicitud se origina del agente usuario '8* ( laresuesta del servidor origen '?*"



'P'P

Cadena de comunicación HTTP:

Agente

#"uario Servidor (rigen

)

Cadena de Solicitud

Cadena de Re"*ue"ta



'P'P

Sin embargo, en una situación r.ctica, uede eistirm.s de un intermediario, tales como 8, @, C en unacadena de Solictud/<esuesta"Los rinciales comonentes de estas cadenas inclu(en:

#n agente Pro+y:#n agente Pro+y: 8ct0a como un agente autori-adoara recibir el <L en la +orma normal, modi+icando unaorción del mensa%e ( redireccionando el mensa%emodi+icado al servidor solicitado or el usuario"#n ,ateay:#n ,ateay: <ecibe la in+ormación solicitada or el

usuario ( la convierte en un determinado rotocolorelacionado al servidor"#n unnel:#n unnel: 8ct0a como una coneión al asar lain+ormación solicitada or el usuario de un enlaceintermediario a otro"



'P'P

Elementos intermedios en la comunicación HTTP:

Agente

#"uario Servidor (rigen

)

Cadena de Solicitud

Cadena de Re"*ue"ta

))

A C!



III.- Lenguae de arcado /

'L.



Lenguae de arcadoLenguae de arcado

8 +inales del 34, C)arles Aold+arb desarrolló unconceto de lengua%e de marcado generali-ado queermit;a etiquetas, roorcionando as; un m2todo arareresentar los contenidos de teto"

En la d2cada de los B4, se desarrollaron lasrimeras alicaciones del lengua%e de marcadogenerali-ado"

Se usaban ara intercambiar documentos entreautores ( editores"

no de los usos m.s imortantes +ue ladocumentación de ro(ectos ara roósitos dede+ensa"



Lenguae de arcadoLenguae de arcado

Entretanto, el lengua%e de marcado generali-ado eraacetado como una eseci+icación est.ndar denominadaSAML 'Standard Aenerali-ed Mar9u Language*"El auge surge cuando Tim @erners Lee alicó SAML a la

WWW ara ublicar contenido"El marcado se re+iere a las etiquetas 'Tags* esecialesque se inclu(en en el teto solicitado or el usuario, arareali-ar oeraciones eseciales"n código de marcado es identi+icado 0nicamente en un

asa%e de teto or sus eseci+icaciones ( restricciones"SAML es un meta lengua%e que uede usarse arade+inir lengua%es de marcado estructurales"



'L'L

El HTML +u2 desarrollado ara ermitir que losdocumentos WWW inclu(an teto, im.genes, tablas,)ierenlaces ( arc)ivos animados"

Los documentos 1eb est.n resentes en el servidor

como arc)ivos HTML"El HTML es una etensión del SAML, se uede usarara roorcionar el esquema ara ordenar el contenido1eb ( mostrar caracter;sticas animadas"

n arc)ivo HTML tendr. etensión ")tm o ")tml"

ado que el navegador 1eb lee el arc)ivo HTML ormedio de etiquetas HTML esec;+icas, la .gina 1ebmostrada como salida uede variar de un navegador aotro navegador"



'L'L

@ene+icios del HTML:Se ueden comartir grandes cantidades de datos a

trav2s del mundo"

El HTML es b.sicamente +ormato 8SC##, or lo quela osibilidad de corrución de los datos or la red esmuc)o menor"

ado que es un lengua%e de marcado, es +.cil aradesarrollar ( simle de comrender"

El HTML es +.cil de arender (a que tiene uncon%unto de etiquetas"



Conce*to" "obre 'LConce*to" "obre 'L

Todos los arc)ivos HTML aarecen en +orma de simlesarc)ivos de teto con im.genes, sonidos o videos"El con%unto de .ginas HTML relacionadas se uedenenla-ar unas con otras usando hiperenlaces"

Los )ierenlaces ueden ser teto o imagen"El usuario uede )acer clic en los )ierenlaces aracargar una nueva .gina en el navegador"Cualquier código HTML comrende dos comonentes:etiquetas ( atributos"

Mientras que las etiquetas ermiten que el teto HTMLlleve a cabo un determinado roceso como +ormatear oenlaces, los atributos controlan la resentación ( asecto'loo9 and +eel* de los tetos"



Crear P0gina" 'LCrear P0gina" 'L

Los dos comonentes rinciales que a(udan aldesarrollo de .ginas HTML, son:

Editore" de 'LEditore" de 'L

1avegadore" Web1avegadore" Web

Los editores de HTML son rogramas que a(udan alos usuarios a construir .ginas HTML a trav2s decódigo de marcado"

Los navegadores 1eb son rogramas que a(udan a

los usuarios a visuali-ar ( validar las .ginas HTML"



Editore" 'L y 1avegadore"Editore" 'L y 1avegadore"

WebWeb

&ocumento 'L

Editore" 'L 1avegadore" WE!

!a"e

e+to o Color

W2SIW2,

3W4at 2ou See

I" W4at 2ou ,et5

1avegadore" de

e+to

1avegadore"

,r0$ico"



I).- Eti6ueta" 'L.



Elemento" 'LElemento" 'L

Etiquetas"Las etiquetas HTML deciden la naturale-a del

+ormato que se va a alicar a los documentos HTML"Las etiquetas tienen un con%unto de atributos

osibles que deciden la etensión ( el estilo del+ormato que se va a alicar"Las etiquetas HTML son simles ( +.ciles de usar"

8arecen entre corc)etes angulares 'D*"Cada etiqueta abierta D8LA?, generalmente es

cerrada or su contraarte de cierre D/8LA?"Tambi2n odemos tener etiquetas anidadas,

D8A8D<?C8 #n+ormación D/<?C8D/8A8



Elemento" 'LElemento" 'L

Atributo".

Cada etiqueta tiene un con%unto de atributososibles asociados a 2sta"

Los atributos se utili-an ara mane%ar

requerimientos de +ormatos"El +ormato de teto uede incluir elementos como

alineación, anc)o, tamaFo, etc"Los atributos se agregan colocando nombredeatributo G

“value”, dentro de las etiquetas HTML" E%emlo:

DH5 8L#AG=CETE<>Encabe-ado centradoD/H5

EtiquetaEtiqueta 8tributo 8tributo&alor &alor

Teto 8+ectadoTeto 8+ectado



Programar la" Eti6ueta"Programar la" Eti6ueta"

78&(C2PE9La etiqueta DI?CTPEK roorciona a los navegadores '(servicios de validación* la versión del HTML con la que coincide eldocumento"Las eseci+icaciones del HTML "4 ( !"4 sugieren el uso de esta

etiqueta no emare%ada, ( or lo tanto, debemos usarla en todosnuestros documentos"E%emlo de uso:

78&(C2PE 'L P#!LIC ;-W<C//&& 'L <.= >inal// E1?

ota: Las etiquetas emare%adas encierran alg0n teto entre ellos, lasetiquetas no emare%adas, no requieren una etiqueta de cierre"

7'LLa etiqueta HTML eseci+ica que el documento es un documentoHTML"T2cnicamente, esta etiqueta es una rede+inición cuando laetiqueta DI?CTPE est. resente"




7'EA&

La in+ormación acerca del documento se eseci+icaen la etiqueta DHE8"

La in+ormación uede re+erirse al t;tulo del

documento, scrits utili-ados, de+iniciones de estilos (otras descriciones del documento"o todos los navegadores requieren esta etiqueta,

ero la ma(or;a de los navegadores eseranencontrar alguna in+ormación disonible acerca del

documento en la etiqueta DHE8"La etiqueta DHE8 tambi2n uede contener otrasetiquetas que tienen in+ormación ara los motores deb0squeda ( rogramas de indeado"




7ILE

Esta etiqueta contiene el t;tulo del documento que esrequerido or las eseci+icaciones "4 ( !"4 de HTML"El t;tulo no es visible en la ventana del navegador,

aunque uede encontrarse en la barra de t;tulo delnavegador"En esta etiqueta, se inclu(e una breve descrición delcontenido del documento"

7!(&2La etiqueta D@? cubre todas las etiquetas,atributos e in+ormación que van a aarecer en elnavegador del visitante"



Eem*lo del u"o de la" Eti6ueta"Eem*lo del u"o de la" Eti6ueta"

Estructura de un ocumento HTML 'P.gina Web*Estructura de un ocumento HTML 'P.gina Web*

DI?CTPE HTML P@L#C>$//WC//T HTML "4 Ninal//E>DHTMLDHE8

DT#TLEEl T;tulo de la P.gina va aqu;"

D/T#TLED/HE8D@?

Todas las etiquetas, atributos e in+ormación en el cuero deldocumento van aqu;"D/@?D/HTML



(tra" Eti6ueta" 31ivel Car0cter5(tra" Eti6ueta" 31ivel Car0cter5

Eti6ueta" de Encabe%ado.DH5 es el m.s grande de los encabe-ados, ( DH3 el m.s equeFo"

7'@Encabe%ado @7/'@7'=Encabe%ado =7/'=

7'<Encabe%ado <7/'<7'Encabe%ado 7/'

7'BEncabe%ado B7/'B7'Encabe%ado 7/'

Eti6ueta" de P0rra$o".DPn .rra+o comleto va %usto aqu;D/PDP 8L#AG=CETE<>El .rra+o de la in+ormación centrado aqu;D/P



(tra" Eti6ueta"(tra" Eti6ueta"

>ormato de P0rra$o E$ecto

7A&&RESStili-ado ara in+ormación de dirección ( contacto" 8arece en cursiva"

7!L(CD#(E

tili-ado ara +ormatear entre una comilla"

Aeneralmente aarece indentado en ambos lados (tiene menos esacio entre l;neas que un .rra+oregular" =8lica Sangr;a>"

7PRE

E+ectivo ara +ormatear el teto o in+ormación similar"Aeneralmente en un tio de letra +i%o, con amlioesacio entre alabras ( l;neas"




Etiquetas de Salto de L;neaDPHola Hola Hola D@<Hola Hola Hola HolaD@<Hola Hola Hola Hola HolaD@<Hola Hola Hola Hola Hola Hola Hola D/P

Etiqueta de Normato a ivel Car.cter DPEste es el comien-o del siguiente .rra+oD/PDPD@ Este es el +inal del .rra+o, se utili-a el atributo

negrita de la +uenteD/@D/P




Eti6ueta de Car0cter E$ecto

7! A*lica 1egrita.

7!LI1DReali%a *ar*adeo de te+toF con"iderado muy anti*ro$e"ional.1o $unciona en Internet E+*lorer *ero en 1et"ca*e "G.

7CIE Indica cita" o re$erencia".

7C(&E ue"tra código de *rogramaF "imilar a la eti6ueta 7PRE.

7E A*lica Hn$a"i"F generalmente mo"trado como cur"iva.

7I A*lica Cur"iva.

7SF 7SRIDE A*lica a*ariencia de tac4ado al te+to.

7SR(1,A*lica Hn$a"i" m0" $uerteF generalmente mo"trado como

negrita.7S#! Pre"enta el te+to como "ubGndice.

7S#P Pre"enta el te+to como "u*erGndice.

7 A*lica un ti*o de letra de anc4o $io. 306uina de E"cribir5

7# A*lica "ubrayado.




Etiquetas de Listas" L# 'List #tem* O Lista o ?rdenada 'nordered List*:DLDL# Productos C)ua Melo C"8" D/L#DL# Servicios Marca Aada S"8" D/L#D/L

O Lista ?rdenada '?rdered List*:D?LDL# Caramelitos C)ua Melo D/L#DL# Laca Aada !4ml" D/L#D/?L



(tra" Eti6ueta" 3Li"ta"5(tra" Eti6ueta" 3Li"ta"5

Atributo &e"cri*ción

StartEste atributo ermite iniciar la lista ordenada seg0n convenga aldiseFador de la .gina 1eb" Eem*lo: 7(L Start

y*e

3(L5

Por de+ecto las listas ordenadas se ordenan con la numeracióncom0n ( se iniciali-an en 5" Con este atributo uedes cambiar la

manera de ordenar la lista" T(e uede tomar los siguientesvalores en este tio de listas: '5* numeración or de+ecto, '#*umeración romana Ma(0scula, 'i* umeración romanamin0scula, '8* Letras ma(0sculas" Eem*lo: 7(L y*eI

y*e

3#L5

Con este atributo odremos cambiar el s;mbolo que recede aeste tio de listas" T(e uede tomar los siguientes valores en

este tio de listas: '@ullet* Por e+ecto , 'Circle* , 'Square*



(tra" Eti6ueta" 3Li"ta"5(tra" Eti6ueta" 3Li"ta"5

Li"ta" de &e$inición:

Este tio de listas se designan con la etiqueta DL 'e+inition List*"Cada item de la lista ira recedido de la etiqueta DT 'e+initionTerm* ( su corresondiente de+inición ira recedida or la etiqueta

D 'e+inition e+inition*"E%emlo:7&L

7&Introducción Resultado:

7&&!reve introducción al lenguae

7&La Primera P0gina7&&Como 4acer la *rimera *0gina

7&E"cribir te+to

7&&Em*ie%a a dar $ormato al te+to

7/&L




SGmbolo" E"*eciale"SGmbolo" E"*eciale"Car0cter Re$erencia de Entidad

; J6uotK

J Jam*K

7 JltK

JgtK

Jtime"K

/ JdivideK

M Jal*4aK

N JbetaK

O JgammaK

JdeltaK

Q Je*"ilonK

J%etaK

JetaK

T Jt4etaK

U JiotaK

Car0cter Re$erencia de Entidad

V Ja**aK

X JlambdaK

Y JmuK

Z JunK

[ J+iK

\ JomicronK

] J*iK

^ Jr4oK

_ J"igmaK

` JtauK

J*4iK

Jc4iK

J*"iK

JomegaK

Jco*yK



Eti6ueta" y Atributo" de la"Eti6ueta" y Atributo" de la"

>uente" de Caractere">uente" de Caractere"Eti6ueta/Atributo &e"cri*ción

7>(1 Coloca las caracter;sticas de la letra ara el teto"

SIfE;9?Eseci+ica el tamaFo relativo en una escala de 5 a " Tres'* es untamaFo normal or de+ecto" Tambi2n odemos eseci+icar el tamaFo

relativo usando Q o $, o or e%emlo Q7"

C(L(R;9?Eseci+ica el color de letra en R<<AA@@ o nombres de color" Estecolor se alica solo al teto encerrado entre las etiquetas DN?T"

>ACE;9?Eseci+ica las resentaciones del tio como una lista de osiblesresentaciones, en el orden de la re+erencia, searado or comas"

7!ASE>(1 8%usta el tamaFo redeterminado del teto" 'El tamaFo or de+ectoes "*

DN?T N8CEG=Tec)nical, Courier e1, Times e1 <oman> S#EG=Q> Miraesto c)icoID/N?T




Etiqueta de <egla Hori-ontal

DH<

Atributo de la Regla E$ecto

SIfE;n? E"*eci$ica el tamao de la regla

WI&';n? E"*eci$ica el anc4o de la regla

WI&';nh?E"*eci$ica el anc4o de la regla 3longitud5Fmedido como un *orcentae de anc4o del

documento

ALI,1;LE>? E"*eci$ica alineación a la i%6uierda

ALI,1;RI,'? E"*eci$ica alineación a la derec4a

ALI,1;CE1ER? E"*eci$ica alineación al centro

1(S'A&E E"*eci$ica 6ue la regla no tiene "ombra



Elemento" ,r0$ico"Elemento" ,r0$ico"

Colore" de >ondoColore" de >ondo

DHTML

D@? @AC?L?<G=R444444> TETG=RNNNNNN>

@ienvenidos a Web ProgrammingIII

D/@?D/HTML

R3Roo5 ,3)erde5 !3A%ul5

44 44 44

33 33 33

66 66 66

CC CC CC

NN NN NN



Elemento" ,r0$ico"Elemento" ,r0$ico"

E"tablecer Colore" de e+toE"tablecer Colore" de e+toDHTMLD@? TETG=R444444>Web ProgrammingID/@?

D/HTML

Atributo &e"cri*ción

E;9?Establece el color ara todo el teto del documento con un nombre decolor o un valor R<<AA@@"

ALI1D;9?Establece el color ara enlaces activos, con un nombre de color o un

valor R<<AA@@"

)LI1D;9?Establece un color ara enlaces que el visitante )a seguido reci2n, conun nombre de color o un valor R<<AA@@ 'cu.n recientes, deende delas con+iguraciones del navegador*"

LI1D;9?Establece el color ara los enlaces no visitados con un nombre de coloro un valor R<<AA@@"



Eem*lo"Eem*lo"

DHTMLD@? TETG=RNN4444> L#UG=R6633>&L#UG=R44NN> 8L#UG=R444444>Este es un simle teto que no contiene enlace"D@<D@<

Da )re+G=)tt://111"mocoso+t"com> Este es un enlace novisitadoD/aD@<D@<

Da )re+G=)tt://111"(outube"com> Este es un enlacevisitadoD/aD@<

D/@?D/HTML

http://www.mocosoft.com/

http://www.youtube.com/

http://www.youtube.com/

http://www.mocosoft.com/



'i*erenlace"'i*erenlace"

Los )ierenlaces 'tambi2n llamados =anc)ors> anclas* sonteto o im.genes que act0an como ruta a otros documentosHTML, im.genes, alets, e+ectos multimedia, o lugaresesec;+icos dentro del documento HTML" Se comonen de lassiguientes tres '* artes:

5" na etiqueta ancla D8 que marca el teto o imagen comoenlace"

7" n atributo H<ENG=K>, que se coloca dentro de la etiquetaancla de aertura"

" na dirección 'el <L* que indica a los navegadores a dondeenla-ar

Si el <L del atributo H<EN de la etiqueta D8 no emie-acon un rotocolo, el navegador asume que el enlace es a undocumento en el mismo )ost" Estos tios de <Ls se denominan<Ls relativos"




Por e%emlo, considere una .gina)tt://111"cisco"com/certi+(/test")tml cargada del sitio1eb de C#SC?"

La .gina tendr. un )ierenlace como

D8 H<ENG="/age7")tml>Esto se traduce como)tt://111"cisco"com/certi+(/age7")tml?T8: "/ se traduce como el directorio actual"

Enla-ar a documentos en la misma careta"D8 H<ENG=Curso7")tml> El teto del enlace va

aqu;D/8

http://www.cisco.com/certify/test.html

http://www.cisco.com/certify/test.html




Enla-ar a un documento en una careta di+erente"Para crear un enlace de Main+rame")tml, ubicados

en di+erentes caretas, se debe incluir un <L quecontiene dos ie-as de in+ormación"

n nombre de careta, que eseci+ica la careta en el servidor"n nombre ( etensión de arc)ivo, que eseci+ica el arc)ivoeacto ara mostrar el enlace"

Puede verse como:D8 H<ENG="/Products/Main+rame")tmlMain+rame

serversD/8




Enla-ar a documentos de la Web"D8 H<ENG=)tt://111"(outube"com/)rc+")tml>Prueba de

enlacesD/8

Enla-ar a una ubicación esec;+ica de un documento"Normar ancla de nombre:D8 8MEG=Hard1are <equirements>8qu; va algoD/8

Enla-ar a anclas de ombre"D8 H<ENG=RHard1are <equirements> 8qu; va algoD/8

'i l 3E i A l d



'i*erenlace" 3Eti6ueta" Ancla de'i*erenlace" 3Eti6ueta" Ancla de

1ombre51ombre5

&e"de dentro El enlace "e ve como

El mi"mo documento D8 H<ENG=Re%emlo>)olaD/8

La mi"ma car*etaFdi$erente documento

D8 H<ENG=services")tmlRrevie1>)olaD/8

El mi"mo "ervidor3di$erente car*eta ydocumentoF #RL relativo al"ervidor5

D8 H<ENG=in+ormation/services")tmlRrevie1)olaD/8

#n "ervidor di$erenteD8 H<ENG=)tt://111")"com/in+ormation/services")tmlRrevie1>Lin9D/8

http://www.hp.com/information/services.html

http://www.hp.com/information/services.html




In"ertar Enlace" de Correo Electrónico.

D8 H<ENGmailto:c)uitoVtumamasita"com SendNeedbac9D/8

8gregar comentarios en un documento HTML,se utili-an las etiquetas:

DI$$ =comentario> $$

8tributo clave" 8tributo clave"



'i*erenlace" 3Eem*lo5'i*erenlace" 3Eem*lo5

78&(C2PE 'L P#!LIC ;-//W<C//&&'L . >inal//E1?

7'L

7'EA&

7ILE Catalogo deProducto"7/ILE

7'EA&

7!(&2

7'< ALI,1;CE1ER? Producto"Ci"co7/'<

7'R

7P ALI,1;LE>?7!Servidore"7/!

7#L

7LI Servidore" ain$rame7/LI

7LI#1I7/LI

7/#L7/P

7!Programa"7/!

7(L

7LIA*licacione" de &e"arrollo7/LI

7LI,r0$ica" Jnb"*KJnb"*KJnb"*KJnb"*K

Cont9

7>(1 C(L(R;j>>?

7!

ultimedia

7/!

7/>(1

7/LI

7LI,rou*are

7>(1 C(L(R;j>>?

7!Jnb"*KJnb"*KProductivity7/!

7/>(1

7/LI

7/(L

7LI7A 'RE>;4tt*://.ci"co.com.ci"co.com?4ola 7/A7/LI

7/!(&2

7/'L

http://www.cisco.com/






abla" 'Labla" 'L

Crear Tablas"na de las lantillas m.s b.sicas es la tabla de dos

columnas, donde cada columna tiene un n0meroesec;+ico de celdas"

Eti6ueta #"o

7A!LE Crea una tabla dentro de un documento HTML"

7R Crea una +ila dentro de una tabla"

7& Crea una celda en una +ila"

7' Crea una celda de t;tulo dentro de una +ila



abla" 'Labla" 'L

ContK D'L 7R 7'EA&7/'EA& 7&7/& 7!(&2 7&7/& 7A!LE 7/R

7R 7R O 7'7/' 7&7/& O 7'7/' 7&7/&

7/R 7/R 7R 7R

O 7&7/& 7&7/& O 7&7/& 7&7/&

7/R 7/R

7/A!LE

7/!(&2

@era Parte 7/'L



abla" 'Labla" 'L

Agregar o uitar >ila" y Columna".

na ve- que se )a creado la tabla, es mu( +.cilagregar o quitar datos de 2sta" 8gregar Nilas" 7

Se uede agregar una nueva +ila agregandoetiquetas adicionales DT< ( DT al código HTMLdonde debe aarecer la nueva +ila"

8gregar Columnas"

Se ueden crear nuevas columnas dentro de unatabla agregando las etiquetas DTH o DT a cadauna de las +ilas"



abla" 'Labla" 'L

E+tender >ila" y Columna".

Atributo #"o

R(WSPA1;n?

8signados a las etiquetas DTH o DT, denota eln0mero de +ilas que se van a etender en una celda"Por e%emlo, <?WSP8G=3>, +usiona seis +ilas"

C(LSPA1;n?

tili-ados en las etiquetas DTH o DT, indica eln0mero de columnas que se van a etender en unacelda" Por e%emlo, C?LSP8G=>, +usiona cuatrocolumnas"



abla" 'Labla" 'L

E+tender >ila" y Columna".

Etender Nilas"

Se ueden +usionar +ilas ad(acentes usando laetiqueta DTH ( DT, deendiendo si se est.eandiendo un t;tulo de una tabla o datos de unatabla"

Etender Columnas"!, 3 (

Las columnas tambi2n se ueden +usionar usandolas etiquetas DTH o DT, deendiendo si se est.etendiendo un t;tulo o una celda de una tabla"



abla" 'Labla" 'L

8gregar T;tulos 'Cations* B

Eti6ueta/Atributo #"o

7CAPI(1 8signado dentro de una tabla ara identi+icarteto del t;tulo de una tabla"

ALI,1;9? 8gregar t;tulo en la arte suerior o in+eriorde una tabla"



abla" 'Labla" 'L

8gregar @ordes" 6Crear @ordes de Tablas"

Eseci+icar Tabla sin @orde

DT8@LE @?<E<G=4>

Atributo #"o

!(R&ER;n?e+ine el anc)o del borde de la tabla 'medido eniels*" @?<E<G=4> elimina el borde"

!(R&ERC(L(R;jRR,,!!?e+ine el color del borde como un n0meroR<<AA@@ o un nombre de color"



abla" 'Labla" 'L

8licar Color de Nondo a la Tabla"DT8@LE @AC?L?<G=R<<AA@@>

#ncluir una #magen de Nondo en la Tabla"DT8@LE @8CUA<?G=C:XY""YXY""YXc)icaseisi"%g>

Eseci+icar la 8lineación de la Celda" 8L#AG=n> e+ine alineamiento )ori-ontal delcontenido de la celda 'LENT, CETE<, <#AHT*"&8L#AG=n> e+ine alineamiento vertical delcontenido de la celda 'T?P, M#LE, @?TT?M,@8SEL#E*"



abla" 'Labla" 'L

E"*eci$icar el amao de la Celda.W#THG=n> e+ine el anc)o de la celda 'iels oorcenta%e del anc)o de tabla*"?W<8P es)abilita el legado 'dividir la l;nea*

de teto en la celda" Todo el teto aarecer. en unal;nea"

Agregar E"*aciado de Celda" y Relleno".CELLSP8C#AG=n> e+ine la cantidad de esaciosentre celdas en iels"CELLP8#AG=n> e+ine la cantidad de esacioentre el contenido ( el borde de la celda en iels"



abla" 'Labla" 'L

E"*eci$icar AlineaciónF Anc4o y Plegado de te+to en la

abla.

W#THG=n> e+ine el anc)o de tabla

'orcenta%e de la ventana o iels*" 8L#AG=K> e+ine la alineación de la tablacomo LENT, <#AHT '@LEELENT,@LEE<#AHT, ( JST#N ara #nternet

Elorer*"



Crear >ormulario" 'LCrear >ormulario" 'L

Los +ormularios son )erramientas a trav2s de los cuales, unsitio 1eb obtiene entradas de los visitantes" n +ormulariouede estar de+inido como un .rea de la .gina HTML,conteniendo elementos de entrada que ermiten al usuarioingresar in+ormación"

n +ormulario tiene varios controles que se usan ara recogerin+ormación" Cuando un visitante comleta ( env;a el+ormulario, la in+ormación de los controles en el +ormulario esredireccionada a un rograma, el cual e%ecuta las accionesnecesarias"

La creación de +ormularios involucra dos etaas b.sicas:La arte que es visible ( es llenada or el visitante"La arte que no es visible al visitante ( que eseci+ica como

el servidor debe rocesar la in+ormación"



>ormulario" 'L>ormulario" 'L

Controle" de un >ormulario.!otone" Submit y Re"et: El botón Submit 'Enviar* se usa ara enviarla in+ormación en un +ormulario a un servidor ara su rocesamiento,mientras el botón <eset '<estaurar* se usa ara regresar a lain+ormación inicial del +ormulario"Cam*o" de e+to: Son .reas en blanco en el +ormulario donde el

visitante uede ingresar in+ormación de teto desde el teclado, comoson nombre ( dirección"!otone" de Radio: Se usan cuando los visitantes tienen que escogeruna 0nica oción de un listado" Son usados ara ociones comoMasculino o Nemenino"Caa" de )eri$icación: 'C)ec9 @oes* Permiten a los visitantesseleccionar uno o m.s ;tems desde una lista de ociones"Area" de e+to: 'Tet 8rea* son camos ara el ingreso de tetosetensos"Li"ta" de Selección: 'Selection Lists*Permiten a los visitantesseleccionar uno o m.s ;tems desde una lista de ociones" Estastambi2n son llamados listas deslegables o 'dro$do1n*"




Crear un >ormulario y agregar un botón de Submit y de Re"et.

El rimer aso en la creación de un +ormulario es insertar laetiqueta DN?<M dentro de la etiqueta D@? ( agregar losbotones de Submit ( <eset"


7>(R#ndica un +ormulario dentro de undocumento HTML"

7I1P# 2PE ;S#!I? )AL#E;9?

8grega un botón Submit al +ormulario" El

atributo &alue ermite agregar teto en elbotón"

7I1P# 2PE ;IA,E? 1AE;P(I1? SRC ;9? !(R&ER

8gregar un botón Submit gr.+ico" Elatributo S<CG eseci+ica el arc)ivo +uentede la imagen"

7I1P# 2PE ;RESE? )AL#E;9? 8gregar un botón <eset al +ormulario"




Cam*o" de Entrada ,eneral.


7I1P#E"*eci$ica un 0rea dentro del $ormulario *ara la entrada dedato" del vi"itante.

2PE;..?

&e$ine el ti*o de cam*o de entradaF como "on EFPASSW(R&F C'ECD!(F RA&I(F >ILEF 'I&&E1F IA,EFS#!I y RESE.

1AE;9? Indica el nombre del elemento *ara el 6ue el valor *ertenece.

)AL#E;9? E"*eci$ica el contenido a"ociado con 1AE;9?.

SIfE;9? &e$ine el tamao de lo" caractere" 6ue *ueden "er enviado".

ALE1,';n?&e$ine el m0+imo nkmero de caractere" 6ue el u"uario *uedeingre"ar en el cam*o de entrada.

C'ECDE&E"*eci$ica la "elección *or de$ecto cuando el $ormulario "ecarga o re"taura. >unciona "olo con C4ec !o+ y Radio.

ACCEP;9? &e$ine ace*table" ti*o" de IE *ara cargar arc4ivo".




Camos de Teto" E%emlo 5@otón de <adio" E%emlo 7

Ca%a de &eri+icación" E%emlo

8reas de Teto" E%emlo

Listas de Selección" E%emlo !Procesamiento de Normularios" E%emlo3

Atributo #"o

ACI(1;9?Eseci+ica el rograma en el servidor HTTPque rocesar. la salida del +ormulario"

E'(&;9?#nstru(e al navegador si enviar los datos alservidor or el m2todo P?ST o el m2todo AET"



Im0gene"Im0gene"

#m.genes en un documento HTML"Normatos de im.genes:

Normato imagen A#N" 'Ara)ic #nterc)ange Nile*Soorta Transarencia, 8nimación, Entrega Progresiva ( menor

erdida de comresión"Normato JPA/JPEA" 'Joint Portable Eert Arou*

Normato PA" 'Portable et1or9 Ara)ics*

8gregar #m.genes" E%emlo 5

Crear T)umbnails" 'Miniaturas* E%emlo 7sar #m.genes como enlace" E%emlo 7



Im0gene"Im0gene"

Crear a*a" de Imagen.


#SEAP;9?Indica la de$inición del a*a de cliente a utili%ar. Atributo de la

eti6ueta 7I,.

ISAP&e$ine el ma*a de imagen del lado del cliente. Atributo de la eti6ueta7I,.

7AP&e$ine el blo6ue de de$inición de ma*a dentro de un documento'L.

7AREA &e$ine un 0rea en el documento 'L.

S'APE;9? E"*eci$ica la $orma de un 0rea 3RECF CIRCLE o P(L25.

'RE>;9? &e$ine un de"tino *ara el 0rea.

1('RE> &e$ine 6ue e"ta 0rea no conecta a ningkn #RL.

C((R&S;+F y? &e$ine la $orma de un 0rea.

ALE"*eci$ica te+to alternativo 3o te+to emergente *o*-u*5 de"cribiendoel enlace.



Im0gene"Im0gene"

DM8P 8MEG=onasZ<o%as>D8<E8 SH8PEG=C#<CLE> C??<SG=4, !4, 4> H<ENG=can7")tml>

8LTG=#ndice del Maa>D8<E8 SH8PEG=C#<CLE> C??<SG=744, 544, 744>

H<ENG=can")tml> 8LTG=@arcelona>

D8<E8 SH8PEG=C#<CLE> C??<SG=544, 4, 544>H<ENG=can!3")tml> 8LTG=Auanta>D8<E8 SH8PEG=C#<CLE> C??<SG=!4, 4, 44> H<ENG=can3")tml>

8LTG=Puerto La Cru->D8<E8 SH8PEGde+ault ?H<END/M8P

DCETE<D#MA S<CG=algo"%g> W#THG=B44> HE#AHTG=344> @?<E<G=4>

8LTG=onas <o%as Calientes> SEM8PG=RonasZ<o%as>D/CETE<



).- CSS 3Ca"cading Style

S4eet5 / ava"cri*t / Active

Content.



'oa" de E"tilo" 3CSS5'oa" de E"tilo" 3CSS5

Ho%as de Estilo" O Las )o%as de estilo, +ormalmente conocidas or la WC como

Cascading St(le S)eets, a(udan a +ormatear los documentosHTML +.cil ( consistentemente" #nsertar todas las etiquetas de+ormato manualmente uede ser mu( tedioso" Con las )o%as deestilo una ve- que se )a eseci+icado el +ormato, se alica a lolargo del documento"

&enta%as de sar Ho%as de Estilo" O Proorcionan m.s control sobre cómo aarecen los documentos

en los navegadores" O <educen el tiemo invertido en desarrollar ( mantener

documentos HTML" O Proorcionan +leibilidad" #ncluso si una )o%a de estilo alica atodas las .ginas del sitio 1eb, se ueden eseci+icar estilosindividuales que aliquen a documentos articulares"




#mlementar Ho%as de Estilo" O esarrollar la )o%a de estilo comleta con todas las ociones de +ormato" O Conectar 'o asociar* la )o%a de estilos al documento HTML"

?T8: Habr. dos tios de documentos, los documentos HTML ( las )o%as de estilo"Los documentos HTML contendr.n el contenido, mientras que las CSS contendr.n lain+ormación de +ormato"

esarrollar Ho%as de Estilo"

O Proiedades de Nuente: Eseci+ican el +ormato a nivel de car.cter 'inline* talcomo el tio de letra"

O Proiedades de Teto: Eseci+ican caracter;sticas de resentación de tetocomo alineación o esacio de letras

O Proiedades de Ca%a: Eseci+ican caracter;sticas de secciones de teto a nivelde .rra+o 'o bloque*"

O Proiedades de Color ( Nondo: Eseci+ican el color ( las im.genes de +ondo a

nivel de .rra+o 'o bloque*" O Proiedades de Clasi+icación: Eseci+ican las caracter;sticas de resentación delas listas ( los elementos 'como P o H5* a nivel de l;nea o bloque"




Eti6ueta/Atributo

#"o

7S2LEe+ine el .rea de )o%a de estilos dentro de un documentoHTML"

78-- --

Esta etiqueta de comentario, oculta los contenidos de la

)o%a de estilos de los navegadores que no soortanestilos"

2PE;te+t/c""? e+ine el tio de )o%a de estilos"

im*ort url395#morta una )o%a de estilos" El tratamiento es <L

')tt://m(st(les"com/ne1"css*"7LI1D Dlin9 )re+G[arc)ivo"css[ relG[st(les)eet[ t(eG[tet/css[



'oa" de E"tilo 3CSS5'oa" de E"tilo 3CSS5

8sociar Ho%as de Estilos a ocumentos HTML" O #ncrustar la )o%a de estilos en el documento HTML de+ini2ndola

entre las etiquetas DHE8 de aertura ( cierre" O 8lmacenar la )o%a de estilos en un documento searado ( luego

enla-ar o imortar las )o%as de estilos ara asociarlas con el

documento HTML" O tili-ar de+iniciones de estilo interno o individual 'inline*"

#ncrustar Ho%as de Estilos en el ocumento HTML" 5 #mortar Ho%as de Estilos" 7

Enla-ar Ho%as de Estilos"





7LI1D<e+erencia a una )o%a de estilos"

REL;StyleS4eet?e+ine el arc)ivo re+erenciado en una )o%a de estilos"

2PE;te+t/c""?e+ine el tio de )o%a de estilos a ser usada"

'RE>;#RL?#ndica la )o%a de estilos como un <L est.ndar"

ILE;9?

ombra la )o%a de estilos" Las )o%as de estilos sin

nombres siemre se alican" Las )o%as con nombre sealican or de+ecto o se roorcionan como ociones"Esto deende del atributo <EL usado"




8licar Clases de Estilos a Partes deocumentos"


7SPA1Contiene atributo" de e"tilo". Lo" a*lica al código 'Lentre la" eti6ueta" de a*ertura y cierre.

7&I)Contiene lo" atributo" de e"tilo. Lo" a*lica al código'L entre la" eti6ueta" de a*ertura y cierre.

CLASS;9?

Enla%a a una cla"e de e"tilo" 4acia una *arte

e"*eci$icada de un documento 'L.

I&;uni6ueen?

Pro*orciona un nombre knico *ara una de$inición dee"tilo e"*ecG$ica. E"to *uede u"ar"e "olo dentro de una4oa de e"tilo".




8licar e+iniciones de Estilos #nternos 'inline*" !

Eti6ueta/Atributo #"oCual6uier Eti6ueta'L

Todas las etiquetas HTML inclu(endo D@?ueden soortar de+iniciones de estilos"

S2LE;9?

sa de+iniciones de estilo interno, quealicamos como atributo a las etiquetas HTML"La de+inición de estilos se coloca dentro decomillas"



Contenido ActivoContenido Activo Sonidos"

Eti6ueta/Atributo &e"cri*ción

7E!E& #nserta un ob%eto incrustado en un documento

7ALI,1 ; ; e+ine el osicionamiento del ob%eto incrustado, relativo aldocumento ( contenidos circundantes

'EI,';n? e+ine la dimensión vertical del ob%eto incrustado

'I&&E1 ?culta el ob%eto incrustado

1AE;9? ombra el ob%eto ara que otros ob%etos uedan re+erenciarlo

PARA;9? e+ine ar.metros adicionales

SRC;#RL? Eseci+ica la ubicación del arc)ivo que contiene el ob%eto

WI&';n? Eseci+ica la dimensión )ori-ontal del ob%eto incrustado

A#(SAR;9? Eseci+ica cuando debe abrirse el arc)ivo de sonido 'cuando la.gina sea accesada o cuando se ulse un botón*

'I&&E1;9? Controla la visibilidad del cuadro de control de sonido

L((P;nF I1>I1IE? e+ine el n0mero de veces que debe reetirse el sonido de+ondo"

7!,S(#1& Eseci+ica la ubicación relativa o absoluta del arc)ivo de sonido"



Lenguae" Scri*tLenguae" Scri*t

8arte de los marcos ( estilos, tambi2n odemosagregar distintos lengua%es scrit a los documentosHTML ara )acerlos m.s amigables al usuario"

n e%emlo, es JavaScrit" JavaScrit es un lengua%e

oderoso ( 0til, aunque no es un lengua%e derogramación ant;guo" Los documentos HTML que inclu(en JavaScrit ueden

interactuar con los visitantes, los rocesos ( veri+icar lain+ormación que los visitantes roorcionan e incluso

entregar in+ormación aroiada a cada visitante" Para traba%ar con JavaScrit, se debe estar +amiliari-ado

con los siguientes concetos:



Lenguae" Scri*t 3avaScri*t5Lenguae" Scri*t 3avaScri*t5 (beto: n ob%eto es una entidad como la ca%a de veri+icación

'c)ec9bo* de un +ormulario, el +ormulario mismo, una imagen, undocumento, un enlace, o incluso una ventana del navegador" Pro*iedad: na roiedad describe un ob%eto" Las roiedades ueden

ser cualquier cosa, desde color a n0mero de items de un ob%eto" Pore%emlo, el n0mero de elementos en la lista Select es una roiedad"

Htodo: n m2todo es una instrucción" Los m2todos disonibles ara

cada ob%eto describen lo que se uede )acer con el ob%eto" Por e%emlo,utili-ando un m2todo odemos convertir todo el teto de un ob%eto ama(0sculas o min0sculas"

Sentencia: Es una sentencia de lengua%e scrit" Combina ob%etos,roiedades ( m2todos"

>unción: na +unción es una colección de sentencias que reali-an

acciones" Las +unciones contienen una o m.s sentencias ( ueden serconsideradas como .rra+os de un lengua%e scrit" aneador de evento": n mane%ador de eventos esera a que

ocurran eventos, como el movimiento del ratón sobre un enlace ( luegolan-a un scrit basado en ese evento" Por e%emlo, el mane%ador delevento onMouseOver reali-a una acción cuando el visitante mueve eluntero del ratón sobre el ob%eto"



avaScri*tavaScri*t

Caracter;sticas de JavaScrit O JavaScrit adota una tecnolog;a basada en ob%etos,

lo que signi+ica que roorciona un con%unto deob%etos del navegador rede+inidos" JavaScrit

ermite a los usuarios de+inir ob%etos ara su uso enel scrit"

JavaScrit est. basado en un modelo mane%adoor eventos" En un modelo mane%ado oreventos, se necesita una acción aroiada enresuesta a los eventos del usuario

S



avaScri*tavaScri*t

8gregar Scrit al ocumento" O Eisten tres +ormas de agregar un scrit al

documento:

#ncrustar el scrit en la .gina" 5 bicar el scrit en el )ead del documento" 7

Enla-ar a un scrit almacenado en otro arc)ivo"

S i



avaScri*tavaScri*t

#ncrustar el Scrit" DP DSC<#PT TPEG=tet/JavaScrit>

DI$$ document"1rite'=La +ec)a de Ho( es: =Qne1ate'**\

$$

D/SC<#PT D/P

S i t



avaScri*tavaScri*t

8gregar un @loque Scrit a la Etiqueta DHE8" DHE8 DT#TLE La P.gina #n+ormativaD/T#TLE DH5@ienvenidosD/H5

DP DSC<#PT TPEG=tet/JavaScrit> DI] document"1rite'=La +ec)a de Ho( es: =Qne1 ate'**\ //$$ D/SC<#PT D/P D/HE8

S i S i t



avaScri*tavaScri*t

Enla-ar el Scrit" DHE8 DT#TLE La P.gina #n+ormativaD/T#TLE

DSC<#PT S<CG=+uncion"%s>TPEG=tet/%avascrit> DI] //$$

D/SC<#PT D/HE8

EI#EAS 'LBEI#EAS 'LB




Eti6ueta 7ASI&E

Esta etiqueta se usa ara identi+icar contenido aarte delcontenido en el que se enmarca, ero con el que est.relacionado" &eamos un e%emlo:

DPHemos visitado el oológico de @arquisimeto estatarde"D/P

D8S#E

DHoológico de @arquisimetoD/)Se trata de un

arque -oológico""" D/H D/8S#E





Eti6ueta 7A#&I(

Esta etiqueta nos ermite introducir audio en nuestrositio" samos la etiqueta DS?<CE ara de+inirosteriormente la ruta ( el tio de 2ste:

D8#? C?T<?LSG[controls[ DS?<CE S<CG[+ic)ero"ogg[ TPEG[audio/ogg[/

DS?<CE S<CG[+ic)ero"m[ TPEG[audio/m[/

D/8#?





Eti6ueta 7CA1)AS

Es una de las etiquetas m.s +amosas de HTML!" Se trata de uncontenedor donde se ermite el dibu%o" ^ste, suele )acer conJavaScrit"

DC8&8S #G[dmCanvas[D/C8&8S

DSC<#PT TPEG[tet/%avascrit[

&8< C8&8SGdocument"getElement@(#d'_dmCanvas_*\

&8< MGcanvas"getContet'_7d_*\

dm"+illSt(leG_RNN4444_\

dm"+ill<ect'4,4,B4,544*\ D/SC<#PT





Eti6ueta 7C(A1& e+ine un comando 'uede ser un botón, un botón de selección

m0tile, c)ec9bo, o de selección simle, radiobutton* que elusuario uede invocar" n comando uede ser arte de un men0contetual, una barra de )erramientas, o +ormar arte de un men0

usado el elemento DME, o uede onerse en cualquier artede la .gina ara de+inir un ata%o de teclado"

DME

DC?MM8 TPEG[command[ L8@ELG[Auardar[?CL#CUG[guardar'*[ Auardar D/C?MM8

D/ME





Eti6ueta 7&AALIS Eseci+ica una lista de ociones rede+inidas ara un elemento Dinut" Se

usa ara roorcionar la caracter;stica de autocomletado a los elementosde este tio" Los usuarios ver.n una lista, que se va rellenando de +ormaautom.tica con+orme ellos escriben sugiri2ndole di+erentes ociones" n

e%emlo de uso ser;a el siguiente: D#PT L#STG[bro1sers[/

D8T8L#ST #G[bro1sers[

D?PT#? &8LEG[#nternet Elorer[

D?PT#? &8LEG[Nire+o[

D?PT#? &8LEG[Aoogle C)rome[ D?PT#? &8LEG[?era[

D?PT#? &8LEG[Sa+ari[

D/8T8L#ST





Eti6ueta 7E!E&

La idea de esta etiqueta es normali-ar las inclusiones decontenidos de alicaciones eternas v;a lugins ennuestro sitio, ara integrar un +ic)ero SWN de Nlas) se

)ar;a como se indica a continuación: DEM@E S<CG[+las)"s1+[/

Eti6ueta 7>((ER

e+ine el ie de .gina de un documento" Se uede

tener m.s de un ie de .gina" DN??TE<Linu Hisano $ So+t1are libreD/N??TE<





Eti6ueta 7'EA&ER

En el sitio contrario, esta etiqueta de+ine la cabecera"

DHE8E<

DH5@ievenidos al sitioD/H5

DPSomos un gruo de"""D/P

D/HE8E<

DP<esto del sitio"""D/P





Eti6ueta 7EER e+ine una medida escalar, dentro de un rango conocido" o

con+undir con la etiqueta DP<?A<ESS que a)ora comentaremos"

DMETE< &8LEG[7[ M#G[4[ M8G[54[7 de 54D/METE<D@</

DMETE< &8LEG[4"3[34`D/METE<

Eti6ueta 71A)

e+ine un bloque donde se enmarcan di+erentes enlaces denavegación"

D8&

D8 H<ENG[/inicio/[#nicioD/8 D8 H<ENG[/acerca/[8cerca deD/8 D8 H<ENG[/contacta/[ContactaD/8

D/8&





Eti6ueta 7PR(,RESS <eresenta el grado de rogreso de una tarea:

DP<?A<ESS &8LEG[77[ M8G[544[D/P<?A<ESS

Eti6ueta 7)I&E(

Casi todos los navegadores la soortan (a" Es una etiquetaequivalente a Daudio ero en este caso sirve ara emitir v;deo"

D&#E? W#THG[74[ HE#AHTG[74[ C?T<?LSG[controls[

DS?<CE S<CG[+ic)ero"m[ TPEG[video/m[ /

DS?<CE S<CG[+ic)ero"ogg[ TPEG[video/ogg[ /

D/&#E?





Eem*lo ,eneral: DI?CTPE )tml

D)tml

D)ead

Dmeta c)arsetG[ut+$B[ /

DtitleTitleD/title Dlin9 )re+G[css/)tml!reset"css[ relG[st(les)eet[ /

Dlin9 )re+G[css/st(le"css[ relG[st(les)eet[ /

D/)ead

Dbod(D)eaderD)grou

D)5Header in )5D/)5 D)7Sub)eader in )7D/)7

D/)grouD/)eader

Dnav





Dul DliDa )re+G[R[Menu ?tion 5D/aD/li

DliDa )re+G[R[Menu ?tion 7D/aD/li

DliDa )re+G[R[Menu ?tion D/aD/li

D/ulD/nav

DsectionDarticleD)eader D)58rticle R5D/)5

D/)eader

Dsection Este es el rimer art;culo" T)is is Dmar9)ig)lig)tedD/mar9"

D/sectionD/article

DarticleD)eader D)58rticle R7D/)5

D/)eader





Dsection Este es el segundo art;culo" Estos art;culos ueden ser

secciones del blog, etc"

D/sectionD/articleD/section

DasideDsection

D)5Lin9sD/)5

Dul

DliDa )re+G[R[Lin9 5D/aD/li

DliDa )re+G[R[Lin9 7D/aD/li

DliDa )re+G[R[Lin9 D/aD/li D/ulD/section





D+igure Dimg 1idt)G[B![ )eig)tG[B![

srcG[)tt://111"1indo1sdevbootcam"com/#mages/JennMar"%g[

altG[Jenni+er Marsman[ /

D+igcationJenni+er MarsmanD/+igcation D/+igureD/aside

D+ooterNooter $ Co(rig)t 745D/+ooter

D/bod(

D/)tml

Programación Web HTML5.ppt

Documents

Transcript of Programación Web HTML5.ppt