Scribd Logo
Upload

Welcome to Scribd!

  • Introducción A Html5 - Ebook Gratuito

    Uploaded by

    epul16
    35 views64 pages

    Original Title

    Introducción a Html5 - ebook gratuito

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    35 views64 pages

    Introducción A Html5 - Ebook Gratuito

    Uploaded by

    epul16

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 64

    1

    Introduccin a html5 - Aprende a crear una web mediante html5

    Indice

    Tema1Queeshtml5?/pgina7 Tema2Quevasaaprenderenestelibro?/pgina8 Tema3Estructurabsicadeunawebhtml5/pgina9 Tema4Formandolacabeceradeldocumentohtml5etiquetas <head></head>/pgina11 Tema5Cuerpodeldocumentohtml5etiquetas<body></body>/ pgina15 Tema6Insertarvdeo/etiquetas<video>y<source>/pgina31 Tema7Crearformulariohtml5/etiquetas<form></form>/pgina41 Conclusin/pgina54 Agradecimientos/Dedicatoria/pgina56

    Tema1Queeshtml5?
    Html5,eslanuevaversindehtml,esdecir,laposteriorahtml4.Entre suscaractersticasprincipales,destacalaimplementacindenuevas especificaciones.W3Cesquiennosindicacomodebeirdesarrollndose laevolucindeestelenguaje. Entrelasnuevasespecificacionesycaractersticasdehtml5,podemos destacarunagrancantidaddeelementosimportantes,graciasalos cuales,programarmediantelenguajehtml5,resultamuchomsefectivo quehacerloutilizandosusversionesanteriores.Deentrestos,pongo comoejemplo: Etiquetascanvas(audio,video,2d,3d,source...) Nuevasetiquetassemnticasparaestructurarelsitioweb(header, nav,article,footer,section...) APIStorage APIdeGeoposiconamiento Drag&Drop ymuchoms.

    Tema2Quevasaaprenderenestelibro?
    Enestelibro,tevoyaensearalgunosdelosnuevoselementosy etiquetasdehtml5,ycmoutilizarlas.Aprendersacrearlaestructurade unapginawebsimpleutilizandoellenguajedeprogramacinhtml5.

    Despus,puedesanimarteyaprenderunpocodeCSS,asserscapaz dedarestiloatussitioswebcreadosmediantehtml5.

    Tema3Estructurabsicadeunawebhtml5
    Sinoconocesniunapizcaellenguajedeprogramacinhtml,puedeque teestspreguntadocualeslaestructurabsicaquedeberateneruna webcreadamediantehtml5?Puesbien,larespuestaesbiensencilla,al igualquelaestructura,yaquebsicamentesecomponedelossiguientes elementos: < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > < / t i t l e > < / h e a d > < b o d y > < / b o d y > < / h t m l >

    Ahorateexplicounpocoestaestructura,paraqueloentiendastodo mejor: 1. <!DOCTYPEhtml>EstoeslaetiquetaDOCTYPE.Siempredebe ircolocadaalprincipiodeldocumentohtmlysiempredebeseras. Enlasversionesanterioresdehtml,elDOCTYPEerabastantems


    9

    2.

    3.

    4.

    5.

    6. 7.

    8. 9.

    largo.Laetiquetaindicaqueseabreeldocumentohtml. <htmllang=es>Elatributolang,sirveparaespecificarelidioma deldocumentohtml.Enestecasoesespaolyestespecificado mediantelasletrases. <head>Seabrelaetiqueta<head>.Laetiquetaheadpodramos decirquerepresentaelencabezamientodeldocumentohtml.Ensu interiordebemoscolocarelementosimportantes,comoelttulodel documento,laspalabrasclave,ladescripcin...etc.Los navegadoresdanmuchaimportanciaaloquehayenelinteriorde lasetiquetas<head>deunsitioweb. <metacharset=utf8/>Etiquetametaparalacodificacinde caracteres.Siempredebeircolocadaeneldocumentohtmly,de momento,debeserexactamentecomotelamuestro. <title><title/>Entreestasetiquetasdebescolocarelttulodetu pginaweb.Porejemplo,situsitiowebsellamaLawebmoderna 3.0deberasrepresentarloeneldocumentohtmldelasiguiente manera:<title>Lawebmoderna3.0<title/>.Inmediatamentedebajo delaetiquetatitle,sepuedeninsertarlinksyetiquetas,porejemplo ladescripcinylaspalabrasclave. </head>Secierralaetiquetahead,yporlotanto,terminael encabezamientodelsitioweb. <body>Seabreelelementobody.Dentrodeestaetiquetatienes queinsertarloquequieresqueelusuarioveaenlapantalladel dispositivodeaccesomedianteelcualintentavisualizartusitioweb. Enelinteriordelcuerpoobody,vansituadaslassecciones,los artculos,elmenoetiqueta<nav>,elementos<div>...ymuchos mselementos. </body>Estaetiquetaidentificaelcierredelaetiqueta<body>o cuerpodeldocumentohtml. </html>Findeldocumentohtml.

    10

    Paracomenzaracreartupginawebmediantehtml5,terecomiendo descargareinstalarelsoftwareWebmatrix2.Unavezquelotengas,abre unnuevodocumentohtml5enblancoy...vamosaempezaracrearuna pginawebmediantehtml5.

    Tema4Formandolacabeceradeldocumentohtml5 etiquetas<head></head>

    Muybien,yahasaprendidoaformarlaestructuramuybsicadeun documentocreadomediantehtml5.Ahoravamosacomenzarainsertar elementospararellenarunpocolacabeceradenuestrodocumento html5. Loprimeroquedebeaparecerdentrodelaetiqueta<head>deun documentohtml5,eslaetiqueta<metacharset=utf8/>.Igualde indispensableeselelemento<title>,quedebeircolocadojustodebajo delaetiquetaanteriory,comotehecomentadoanteriormente,sirvepara ponerttuloaldocumentohtml. Unavezcerradalaetiqueta<title>vamosaaadirladescripcinque queremosquelosnavegadoreslean.Estosehacemuyfcilmente:para insertarunfragmentodetextoquedescribaelcontenidodeldocumento, hayqueutilizarunaetiquetameta.Dentrodeestaetiquetaprocedemosa indicarquesetratadeunadescripcin,medianteelatributoname.Por otrolado,vamosaintroducireltextodenuestradescripcin,mediante otroatributoconocidocomo:content. Parecedifcil?noloes!!!Miraelejemploquetepongoparaquelo entiendasmejor: Enesteejemplovoyamostrarundocumentohtml5enelcualhe insertadoelttuloyladescripcin.Lapginawebvaaserunaweb
    11

    paraconocerAsturias. < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < / h e a d > < b o d y> < / b o d y > < / h t m l >

    Tehasfijadoenlatagmeta?esesta:<metacontent=Temostramos unagrancantidaddelugaresdeintersenAsturiasyteanimamosa conocerestaregindeEspaa.name=description/>Vajustodebajo detitle,comotehecomentadoantes,ysitefijas,puedesobservarcomo seutilizanlosatributoscontentyname,paraintroducirunadescripcin delsitiowebmedianteunametatag. Vale,supongoquehastaahoratodofcil,no?jeje!!!buenopuesvamosa continuarintroduciendootraetiquetametaconlaspalabrasclaveconlas


    12

    quequeremoslosnavegadoresidentifiquenlapginaweb.Parahacer esto,simplementehayquecrearotrametatagcomolaanterior,soloque enestecasoelatributonamedebeestardefinidoporelvalorkeywords. Miraelejemplo,asloentiendesmejor. < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < / h e a d > < b o d y> < / b o d y > < / h t m l >

    Sitefijas,puedesobservarcomolasetiquetasmetasecierranmediante labarra/.Hastaahoratodobienno?Acontinuacinvamosaintroducir otraetiquetameta,enestecasoparaindicaralosrobotsdelos navegadoresquetienenqueindexartodoelcontenidodenuestrositio web.Veamoscomotendraquequedarelcdigohtmldeldocumentouna


    13

    vezintroducidaestaetiqueta:

    < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < m e t an a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > < / h e a d > < b o d y> < / b o d y > < / h t m l >

    Siobservaslaetiquetametaquehemosdestinadoalosrobots,vers comolosatributosnameycontent,vuelvenacambiardevalores:< m e t a
    14

    n a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > .Medianteestosvalores estamosindicandoalosnavegadoresqueloleaneindexentodo.

    15

    Tema5Cuerpodeldocumentohtml5etiquetas <body></body>

    Lacantidaddeelementosquesepuedeninsertardentrodelcuerpodeun documentohtmlesinmensa.Enestetema,tevoyaensearautilizar algunosdeestoselementos,lossuficientescomoparacrearuna estructurabsicadeejemplodeunapginawebcreadamediantehtml5.

    5.1Etiquetas<header></header>

    Paracomenzar,vamosaintroducirlasetiquetas<header></header>, dentrodelcuerpodeldocumento.Elcdigodebequedaras:

    < ! D O C T Y P Eh t m l >

    < h t m ll a n g = " e s " > < h e a d >


    16

    < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < m e t an a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > < / h e a d > < b o d y> < h e a d e r > < / h e a d e r > < / b o d y > < / h t m l >

    Enelinteriordeheader,puedescolocarellogodetusitioweb,o cualquierotroelementoqueseteocurra.Estasetiquetas,representaslo quenormalmenteunusuarioveenlapartesuperiordelsitioweb.

    17

    Dentrodelasetiquetas<header>vamosacolocarunttuloparaqueel usuariolopuedaver.Essimple,solohayqueescribirloquequieres mostrarcomottulo,entrelasetiquetas<h1></h1>ydentrodeheader. < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < m e t an a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > < / h e a d >
    18

    < b o d y> < h e a d e r > < h 1 > V e nac o n o c e rA s t u r i a s ! ! ! < / h 1 > < / h e a d e r > < / b o d y > < / h t m l >

    Sipublicaraselcdigoahoramismo,enGoogleChromeseveraesto:

    5.2Etiqueta<nav> Laetiquetanavsirveparamostrarunmenobarradenavegacin.Este mensirvealosusuariosparadesplazarseporlaspginasdelsitioweb. Elmen,serepresentadentrodelaetiquetanavmedianteunalistahtml, esdecircon<ul>.


    19

    Esteejemplo,muestralaestructuradeunmenrealizadomediantehtml5:

    < n a v > < u l > < l i > < ah r e f = " # "t i t l e = " M e n 1 " > B l o g < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 2 " > Q u v e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 3 " > Q u h a c e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 4 " > E s c a p a d a s < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 5 " > H o t e l e s < / a > < / l i > < / u l > < / n a v >

    QuevistoenelnavegadorgoogleChrome,seraesto:

    Losenlaces,serepresentanmediantelasetiquetas<a>,yensuinterior
    20

    sesitanlosatributoshrefytitle.Recuerdaquesiquieresqueelmen funcionecorrectamente,debersagregarmspginaseintroducirla direccincorrectaenelatributohrefdelosenlaces. Comopuedescomprobartambin,cadaelemento<li>,esunodelos botonesquecomponenelmen<ul>. Podemosaadirelmen,porejemplo,justodespusdelasetiquetas <header></header>.Porlotanto,elcdigodenuestroarchivohtmlhasta elmomentodebesereste,conmenincluido:

    < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < m e t an a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > < / h e a d > < b o d y> < h e a d e r > < h 1 > V e nac o n o c e rA s t u r i a s ! ! ! < / h 1 > < / h e a d e r >
    21

    < n a v > < u l > < l i > < ah r e f = " # "t i t l e = " M e n 1 " > B l o g < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 2 " > Q u v e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 3 " > Q u h a c e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 4 " > E s c a p a d a s < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 5 " > H o t e l e s < / a > < / l i > < / u l > < / n a v > < / b o d y > < / h t m l >

    5.3Etiquetas<section></section>y<article></article>

    Lasnuevasetiquetas<section>dehtml5,podramosdecirquesonlos elementosquerepresentanlasseccionesenlascualessedivideel documento.Dentrodelasetiquetassection,seubicanlasetiquetas <article>,cuyointeriorestformadoprincipalmenteporcontenidotextual enformadeartculo. Enunamismaseccinpuedehabervariosartculos.Trasintroduciruna seccinyvariosartculos,laestructuradeldocumentohtml5vatomando estaforma:

    22

    < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < m e t an a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > < / h e a d > < b o d y> < h e a d e r > < h 1 > V e nac o n o c e rA s t u r i a s ! ! ! < / h 1 > < / h e a d e r > < n a v > < u l > < l i > < ah r e f = " # "t i t l e = " M e n 1 " > B l o g < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 2 " > Q u v e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 3 " > Q u h a c e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 4 " > E s c a p a d a s < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 5 " > H o t e l e s < / a > < / l i > < / u l >
    23

    < / n a v > < s e c t i o n > < a r t i c l e > < h 1 > A r t c u l o1 < / h 1 > < b r / > < p > L o r e mi p s u ma dh i ss c r i p t ab l a n d i t p a r t i e n d o ,e u mf a s t i d i ia c c u m s a ne u r i p i d i si n , e u ml i b e rh e n d r e r i ta n .Q u iu tw i s iv o c i b u s s u s c i p i a n t u r ,q u od i c i tr i d e n si n c i d e r i n ti d . Q u om u n d il o b o r t i sr e f o r m i d a n se u ,l e g i m u s s e n s e r i td e f i n i e b a sa ne o s .E us i tt i n c i d u n t i n c o r r u p t ed e f i n i t i o n e m ,v i sm u t a ta f f e r t p e r c i p i tc u ,e i r m o dc o n s e c t e t u e rs i g n i f e r u m q u e e up e r .I nu s ul a t i n ee q u i d e md o l o r e s .Q u o n of a l l iv i r i si n t e l l e g a m ,u tf u g i tv e r i t u s p l a c e r a tp e r .I u si dv i d i tv o l u m u sm a n d a m u s , v i d ev e r i t u sd e m o c r i t u mt en e c ,e ie o sd e b e t l i b r i sc o n s u l a t u .N om e if e r r ig r a e c o d i c u n t ,a dc u mv e r ia c c o m m o d a r e .S e da tm a l i so m n e s q u e d e l i c a t a ,u s ue ti u s t oz z r i lm e l i o r e .D i c u n t m a i o r u me l o q u e n t i a mc u mc u ,s i ts u m m od o l o r e s s e n tt e .N eq u o d s in u s q u a ml e g e n d o sh a s , e ad i c i tv o l u p t u ae l o q u e n t i a mp r o ,a ds i t q u a sq u a l i s q u e .E o sv o c i b u s< / p > < / a r t i c l e > < a r t i c l e > < h 1 > A r t c u l o2 < / h 1 > < b r / > < p > d e s e r u n tq u a e s t i oe i .B l a n d i ti n c o r r u p t e q u a e r e n d u mi nq u o ,n i b hi m p e d i ti dv i s , v e ln on u l l a ms e m p e ra u d i a m .E ip o p u l o g r a e c ic o n s u l a t um e i ,h a se as t e tm o d u sp h a e d r u m . I n a n io b l i q u en eh a s ,d u oe tv e r i t u s
    24

    d e t r a x i t .T o t al u d u so r a t i oe am e l ,o f f e n d i tp e r s e q u e r i s e iv i m .E o sd i c a to r a t i op a r t e mu t ,i dc u m i g n o t as e n s e r i ti n t e l l e g a t .S i ti n a n iu b i q u eg r a e c i s a d ,q u a n d og r a e c i sl i b e r a v i s s ee tc u m , d i c i to p t i o ne r u d i t ia td u o .H o m e r os a l u t a t u s s u s c i p i a n t u re u mi d ,t a m q u a mv o l u p t a r i a e x p e t e n d i sa ds e d ,n o b i sf e u g i a ts i m i l i q u eu s ue x . E u mh i n ca r g u m e n t u mt e ,n os i tp e r c i p i t a d v e r s a r i u m ,n eq u if e u g i a tp e r s e c u t i .O d i oo m n e s s c r i p s e r i ta de s t ,u tv i d i tl o r e mm a i e s t a t i s h i s ,p u t e n tm a n d a m u sg l o r i a t u rn ep r o .O r a t i o i r i u r er a t i o n i b u sn eh i s ,a de s tc o r r u m p i t s p l e n d i d e .A dd u oa p p a r e a tm o d e r a t i u s ,e if a l l i t o l l i td e n i q u ee o s .D i c a n te v e r t i t u r < / p > < / a r t i c l e > < a r t i c l e > < h 1 > A r t c u l o3 < / h 1 > < b r / > < p > m e ii n ,n eh i sd e s e r u n tp e r p e t u a s e n t e n t i a e ,e as e ao m n e ss i m i l i q u ev i t u p e r a t o r i b u s . E xm e le r r e mi n t e l l e g e b a tc o m p r e h e n s a m ,v e l a dt a n t a sa n t i o p a md e l i c a t i s s i m i ,t o t af e r r i a f f e r te un e c .L e g e r ee x p e t e n d ap e r t i n a c i a n ep r o ,e tp r oi m p e t u sp e r s i u sa s s u e v e r i t .E am e i n u l l a mf a c e t e ,o m n i so r a t i oo f f e n d i ti u sc u . D o m i n gt a k i m a t ar e p u d i a n d a eu s ua n ,m e i d i c a n tt a k i m a t ai d ,p r ie l e i f e n di n i m i c u s e u r i p i d i sa t .H i sv e r os i n g u l i se a ,q u e me u r i p i d i s a b h o r r e a n tm e iu t ,e tp o p u l oi r i u r ev i x . U s ul u d u sa f f e r tv o l u p t a r i ae i ,v i xe ae r r o r d e f i n i t i o n e s ,m o v e tf a s t i d i is i g n i f e r u m q u e
    25

    i nq u i .V i sp r o d e s s e ta d o l e s c e n sa d i p i s c i n gt e , u s um a z i mp e r f e c t or e c t e q u ea t ,a s s u mp u t a n t e r r o r i b u sm e ai n .V e lf a c e t ei m p e r d i e ti d , c u ma nl i b r i sl u p t a t u mp e r f e c t o ,v e l f a b e l l a si n c i d e r i n tu t .V e r if a c e t ed e b i t i se av i s ,u t e o so r a t i oe r r o r i b u s .S i n t f a c e t e < / p > < / a r t i c l e > < / s e c t i o n > < / b o d y > < / h t m l >

    Siloobservasbien,versqueheaadidolossiguienteselementos: <h1>Artculo3</h1><br/><p>yquelasetiquetas<section>y<article> vansituadasjustodespusde<nav>,perotambindentrodelcuerpodel documento.Bien,puesteexplicoloqueson:

    <h1></h1>yalasconocasdeantes,hasintroducidounttuloen lelelemento<header>,medianteestasetiquetas.Sirvenparaindicar alosnavegadoresquesetratadeunttuloyque,porlotanto,tienen quedarleimportancia.Adems,ayudanaquelosrobotsentiendan mejorlaestructuracindelsitioweb. <br/>estaetiquetasirveparamarcarunsaltodelneaenun documento.html. <p>sirveparaintroducirtexto.Representaunprrafoysecierra conlaetiqueta</p>


    26

    lohasentendido?supongoques,jeje!!!Miraloquesevehastaahora enlapantalladelordenador:

    5.4etiquetas<footer></footer>

    Lasetiquetasfooterdehtml5,representanlaparteinferiordeloqueel usuarioveenlapantallacuandoaccedeatusitiowebdesdeun navegadordeinternet. Ensuinteriorpuedesintroducirsecciones,artculosycualquierelemento dehtml5.


    27

    Ennuestroejemplodeestructuradedocumentohtml5,procedemosa introducirlasetiquetas<footer>justodespusdelaseccinquehemos insertadoanteriormente,perotambindentrodelcuerpoo<body>.

    < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < m e t an a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > < / h e a d > < b o d y> < h e a d e r > < h 1 > V e nac o n o c e rA s t u r i a s ! ! ! < / h 1 > < / h e a d e r > < n a v > < u l > < l i > < ah r e f = " # "t i t l e = " M e n 1 " > B l o g < / a > < / l i >
    28

    < l i > < ah r e f = " # "t i t l e = " M e n 2 " > Q u v e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 3 " > Q u h a c e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 4 " > E s c a p a d a s < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 5 " > H o t e l e s < / a > < / l i > < / u l > < / n a v > < s e c t i o n > < a r t i c l e > < h 1 > A r t c u l o1 < / h 1 > < b r / > < p > L o r e mi p s u ma dh i ss c r i p t ab l a n d i t p a r t i e n d o ,e u mf a s t i d i ia c c u m s a ne u r i p i d i si n , e u ml i b e rh e n d r e r i ta n .Q u iu tw i s iv o c i b u s s u s c i p i a n t u r ,q u od i c i tr i d e n si n c i d e r i n ti d . Q u om u n d il o b o r t i sr e f o r m i d a n se u ,l e g i m u s s e n s e r i td e f i n i e b a sa ne o s .E us i tt i n c i d u n t i n c o r r u p t ed e f i n i t i o n e m ,v i sm u t a ta f f e r t p e r c i p i tc u ,e i r m o dc o n s e c t e t u e rs i g n i f e r u m q u e e up e r .I nu s ul a t i n ee q u i d e md o l o r e s .Q u o n of a l l iv i r i si n t e l l e g a m ,u tf u g i tv e r i t u s p l a c e r a tp e r .I u si dv i d i tv o l u m u sm a n d a m u s , v i d ev e r i t u sd e m o c r i t u mt en e c ,e ie o sd e b e t l i b r i sc o n s u l a t u .N om e if e r r ig r a e c o d i c u n t ,a dc u mv e r ia c c o m m o d a r e .S e da tm a l i so m n e s q u e d e l i c a t a ,u s ue ti u s t oz z r i lm e l i o r e .D i c u n t m a i o r u me l o q u e n t i a mc u mc u ,s i ts u m m od o l o r e s s e n tt e .N eq u o d s in u s q u a ml e g e n d o sh a s , e ad i c i tv o l u p t u ae l o q u e n t i a mp r o ,a ds i t q u a sq u a l i s q u e .E o sv o c i b u s< / p > < / a r t i c l e > < a r t i c l e > < h 1 > A r t c u l o2 < / h 1 > < b r / > < p > d e s e r u n tq u a e s t i oe i .B l a n d i ti n c o r r u p t e
    29

    q u a e r e n d u mi nq u o ,n i b hi m p e d i ti dv i s , v e ln on u l l a ms e m p e ra u d i a m .E ip o p u l o g r a e c ic o n s u l a t um e i ,h a se as t e tm o d u sp h a e d r u m . I n a n io b l i q u en eh a s ,d u oe tv e r i t u s d e t r a x i t .T o t al u d u so r a t i oe am e l ,o f f e n d i tp e r s e q u e r i s e iv i m .E o sd i c a to r a t i op a r t e mu t ,i dc u m i g n o t as e n s e r i ti n t e l l e g a t .S i ti n a n iu b i q u eg r a e c i s a d ,q u a n d og r a e c i sl i b e r a v i s s ee tc u m , d i c i to p t i o ne r u d i t ia td u o .H o m e r os a l u t a t u s s u s c i p i a n t u re u mi d ,t a m q u a mv o l u p t a r i a e x p e t e n d i sa ds e d ,n o b i sf e u g i a ts i m i l i q u eu s ue x . E u mh i n ca r g u m e n t u mt e ,n os i tp e r c i p i t a d v e r s a r i u m ,n eq u if e u g i a tp e r s e c u t i .O d i oo m n e s s c r i p s e r i ta de s t ,u tv i d i tl o r e mm a i e s t a t i s h i s ,p u t e n tm a n d a m u sg l o r i a t u rn ep r o .O r a t i o i r i u r er a t i o n i b u sn eh i s ,a de s tc o r r u m p i t s p l e n d i d e .A dd u oa p p a r e a tm o d e r a t i u s ,e if a l l i t o l l i td e n i q u ee o s .D i c a n te v e r t i t u r < / p > < / a r t i c l e > < a r t i c l e > < h 1 > A r t c u l o3 < / h 1 > < b r / > < p > m e ii n ,n eh i sd e s e r u n tp e r p e t u a s e n t e n t i a e ,e as e ao m n e ss i m i l i q u ev i t u p e r a t o r i b u s . E xm e le r r e mi n t e l l e g e b a tc o m p r e h e n s a m ,v e l a dt a n t a sa n t i o p a md e l i c a t i s s i m i ,t o t af e r r i a f f e r te un e c .L e g e r ee x p e t e n d ap e r t i n a c i a n ep r o ,e tp r oi m p e t u sp e r s i u sa s s u e v e r i t .E am e i n u l l a mf a c e t e ,o m n i so r a t i oo f f e n d i ti u sc u . D o m i n gt a k i m a t ar e p u d i a n d a eu s ua n ,m e i d i c a n tt a k i m a t ai d ,p r ie l e i f e n di n i m i c u s
    30

    e u r i p i d i sa t .H i sv e r os i n g u l i se a ,q u e me u r i p i d i s a b h o r r e a n tm e iu t ,e tp o p u l oi r i u r ev i x . U s ul u d u sa f f e r tv o l u p t a r i ae i ,v i xe ae r r o r d e f i n i t i o n e s ,m o v e tf a s t i d i is i g n i f e r u m q u e i nq u i .V i sp r o d e s s e ta d o l e s c e n sa d i p i s c i n gt e , u s um a z i mp e r f e c t or e c t e q u ea t ,a s s u mp u t a n t e r r o r i b u sm e ai n .V e lf a c e t ei m p e r d i e ti d , c u ma nl i b r i sl u p t a t u mp e r f e c t o ,v e l f a b e l l a si n c i d e r i n tu t .V e r if a c e t ed e b i t i se av i s ,u t e o so r a t i oe r r o r i b u s .S i n t f a c e t e < / p > < / a r t i c l e > < / s e c t i o n > < f o o t e r > < p > Ye s t ee se lp i ed ep g i n a < / p > < / f o o t e r > < / b o d y > < / h t m l >

    Laestructurahtml5,correspondeaestacapturadepantallaengoogle Chrome:

    31

    Perfecto!!!Yatienesunaestructurasimplededocumentohtml5creada, porloqueyasabescrearunapginawebmediantehtml5.Siquieres, puedespublicarlamedianteWebmatrixosubirelarchivoalservidor mediantealgnsoftwareFTP,yoterecomiendoFileZilla. Recuerdaqueselepuedenaadirmuchosmselementosaldocumento html,comoporejemplo,etiquetas<div>,<sidebar>,<audio>,muchas msseccionesyartculos,unmenmscomplejo,msetiquetasmeta dentrode<head>...etc. Enlossiguientestemas,tevoyaensearainsertareneldocumentoun vdeoyacrearunformulariomediantehtml5.

    32

    Tema6Insertarvdeo/etiquetas<video>y<source>
    Yahasaprendidoacrearunapginawebmediantehtml5,perosololleva texto...pareceunpocososa,no?jeje!!! Bueno,puesparaqueteadentresunpocomsenelmundohtml,tevoya ensearaintroducir yreproducirunvdeoeneldocumentohtml5.Parahaceresto,vamosa utilizarlasetiquetas<video></video>y<source/>.Dichasetiquetas,las tienesqueintroducirdondequieresqueseveaelvdeo,yoenestecaso, loquierocolocarenelsegundoartculo,bajoeltexto.

    < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < m e t ac h a r s e t = " u t f 8 "/ > < t i t l e > A s t u r v e r-V e naA s t u r i a s < / t i t l e > < m e t ac o n t e n t = " T em o s t r a m o su n ag r a nc a n t i d a dd e l u g a r e sd ei n t e r se nA s t u r i a syt ea n i m a m o sac o n o c e re s t a r e g i nd eE s p a a . "n a m e = " d e s c r i p t i o n "/ > < m e t ac o n t e n t = " A s t u r i a s ,v e rA s t u r i a s ,c o n o c e r A s t u r i a s ,q u ev e re na s t u r i a s ,d ei n t e r e se na s t u r i a s " n a m e = " k e y w o r d s "/ > < < m e t an a m e = " r o b o t s "c o n t e n t = " i n d e x ,f o l l o w " > < / h e a d > < b o d y> < h e a d e r >
    33

    < h 1 > V e nac o n o c e rA s t u r i a s ! ! ! < / h 1 > < / h e a d e r > < n a v > < u l > < l i > < ah r e f = " # "t i t l e = " M e n 1 " > B l o g < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 2 " > Q u v e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 3 " > Q u h a c e r < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 4 " > E s c a p a d a s < / a > < / l i > < l i > < ah r e f = " # "t i t l e = " M e n 5 " > H o t e l e s < / a > < / l i > < / u l > < / n a v > < s e c t i o n > < a r t i c l e > < h 1 > A r t c u l o1 < / h 1 > < b r / > < p > L o r e mi p s u ma dh i ss c r i p t ab l a n d i t p a r t i e n d o ,e u mf a s t i d i ia c c u m s a ne u r i p i d i si n , e u ml i b e rh e n d r e r i ta n .Q u iu tw i s iv o c i b u s s u s c i p i a n t u r ,q u od i c i tr i d e n si n c i d e r i n ti d . Q u om u n d il o b o r t i sr e f o r m i d a n se u ,l e g i m u s s e n s e r i td e f i n i e b a sa ne o s .E us i tt i n c i d u n t i n c o r r u p t ed e f i n i t i o n e m ,v i sm u t a ta f f e r t p e r c i p i tc u ,e i r m o dc o n s e c t e t u e rs i g n i f e r u m q u e e up e r .I nu s ul a t i n ee q u i d e md o l o r e s .Q u o n of a l l iv i r i si n t e l l e g a m ,u tf u g i tv e r i t u s p l a c e r a tp e r .I u si dv i d i tv o l u m u sm a n d a m u s , v i d ev e r i t u sd e m o c r i t u mt en e c ,e ie o sd e b e t l i b r i sc o n s u l a t u .N om e if e r r ig r a e c o d i c u n t ,a dc u mv e r ia c c o m m o d a r e .S e da tm a l i so m n e s q u e d e l i c a t a ,u s ue ti u s t oz z r i lm e l i o r e .D i c u n t m a i o r u me l o q u e n t i a mc u mc u ,s i ts u m m od o l o r
    34

    e s s e n tt e .N eq u o d s in u s q u a ml e g e n d o sh a s , e ad i c i tv o l u p t u ae l o q u e n t i a mp r o ,a ds i t q u a sq u a l i s q u e .E o sv o c i b u s< / p > < / a r t i c l e > < a r t i c l e > < h 1 > A r t c u l o2 < / h 1 > < b r / > < p > d e s e r u n tq u a e s t i oe i .B l a n d i ti n c o r r u p t e q u a e r e n d u mi nq u o ,n i b hi m p e d i ti dv i s , v e ln on u l l a ms e m p e ra u d i a m .E ip o p u l o g r a e c ic o n s u l a t um e i ,h a se as t e tm o d u sp h a e d r u m . I n a n io b l i q u en eh a s ,d u oe tv e r i t u s d e t r a x i t .T o t al u d u so r a t i oe am e l ,o f f e n d i tp e r s e q u e r i s e iv i m .E o sd i c a to r a t i op a r t e mu t ,i dc u m i g n o t as e n s e r i ti n t e l l e g a t .S i ti n a n iu b i q u eg r a e c i s a d ,q u a n d og r a e c i sl i b e r a v i s s ee tc u m , d i c i to p t i o ne r u d i t ia td u o .H o m e r os a l u t a t u s s u s c i p i a n t u re u mi d ,t a m q u a mv o l u p t a r i a e x p e t e n d i sa ds e d ,n o b i sf e u g i a ts i m i l i q u eu s ue x . E u mh i n ca r g u m e n t u mt e ,n os i tp e r c i p i t a d v e r s a r i u m ,n eq u if e u g i a tp e r s e c u t i .O d i oo m n e s s c r i p s e r i ta de s t ,u tv i d i tl o r e mm a i e s t a t i s h i s ,p u t e n tm a n d a m u sg l o r i a t u rn ep r o .O r a t i o i r i u r er a t i o n i b u sn eh i s ,a de s tc o r r u m p i t s p l e n d i d e .A dd u oa p p a r e a tm o d e r a t i u s ,e if a l l i t o l l i td e n i q u ee o s .D i c a n te v e r t i t u r< / p > < v i d e oc o n t r o l s w i d t h = " 3 4 0 "h e i g h t = " 2 4 5 " i d = " v i d e o 1 "> < s o u r c et y p e = " v i d e o / m p 4 " s r c = " h t t p : / / b e n i d o r m e x p e r i n e c e s . c o m l i . c o m / m o s t r a r % 2 0 y % 2 0 o c u l t a r % 2 0 u n % 2 0 d i v % 2 0 c o n % 2 0 j q u e r y % 2 0 % 2 0 e v e n t o % 2 0 s l i d e t o g g l e . m p 4 "/ > < / v i d e o > < / d i v >
    35

    < / a r t i c l e > < a r t i c l e > < h 1 > A r t c u l o3 < / h 1 > < b r / > < p > m e ii n ,n eh i sd e s e r u n tp e r p e t u a s e n t e n t i a e ,e as e ao m n e ss i m i l i q u ev i t u p e r a t o r i b u s . E xm e le r r e mi n t e l l e g e b a tc o m p r e h e n s a m ,v e l a dt a n t a sa n t i o p a md e l i c a t i s s i m i ,t o t af e r r i a f f e r te un e c .L e g e r ee x p e t e n d ap e r t i n a c i a n ep r o ,e tp r oi m p e t u sp e r s i u sa s s u e v e r i t .E am e i n u l l a mf a c e t e ,o m n i so r a t i oo f f e n d i ti u sc u . D o m i n gt a k i m a t ar e p u d i a n d a eu s ua n ,m e i d i c a n tt a k i m a t ai d ,p r ie l e i f e n di n i m i c u s e u r i p i d i sa t .H i sv e r os i n g u l i se a ,q u e me u r i p i d i s a b h o r r e a n tm e iu t ,e tp o p u l oi r i u r ev i x . U s ul u d u sa f f e r tv o l u p t a r i ae i ,v i xe ae r r o r d e f i n i t i o n e s ,m o v e tf a s t i d i is i g n i f e r u m q u e i nq u i .V i sp r o d e s s e ta d o l e s c e n sa d i p i s c i n gt e , u s um a z i mp e r f e c t or e c t e q u ea t ,a s s u mp u t a n t e r r o r i b u sm e ai n .V e lf a c e t ei m p e r d i e ti d , c u ma nl i b r i sl u p t a t u mp e r f e c t o ,v e l f a b e l l a si n c i d e r i n tu t .V e r if a c e t ed e b i t i se av i s ,u t e o so r a t i oe r r o r i b u s .S i n t f a c e t e < / p > < / a r t i c l e > < / s e c t i o n > < f o o t e r > < p > Ye s t ee se lp i ed ep g i n a < / p > < / f o o t e r > < / b o d y > < / h t m l >

    36

    Cuyoresultadoenlapantalladeldispositivodelusuario,seraeste:

    Parececomplicado,peronoloes,elnicofragmentodecdigoquehe agregadoalaestructurabsicadelejemplodedocumentohtml5,eseste: < v i d e oc o n t r o l s w i d t h = " 3 4 0 "h e i g h t = " 2 4 5 "i d = " v i d e o 1 "> < s o u r c et y p e = " v i d e o / m p 4 " s r c = " h t t p : / / b e n i d o r m e x p e r i n e c e s . c o m l i . c o m / m o s t r a r % 2 0 y % 2 0 o c u l t a r % 2 0 u n % 2 0 d i v % 2 0 c o n % 2 0 j q u e r y % 2 0 % 2 0 e v e n t o % 2 0 s l i d e t o g g l e . m p 4 "/ > < / v i d e o > < / d i v >

    Quieresaveriguarmejorcomofunciona? Enestetutorial,tevoyaensearcomotienesqueutilizarlasetiquetas
    37

    <video>parainsertarunvdeoentusitioweb,utilizandohtml5.Vasa aprenderacolocarcontrolesaunvdeoconhtml5,aindicarsiquieres queunvdeoinsertadoconhtml5,comienceareproducirse automticamentecuandolapginawebhacargado,acolocarunaimagen deportadaoposterparaqueseveaantesdequeelvdeohmtl5se pongaenmarcha...ymuchoms,esperoquetegusteelpequeotutorial queteofrezco. Hastahacepocotiempo,lamaneramsutilizadadeinsertarvdeosenun sitioweb,erahacindolomedianteflashoelcdigo<iframe>deyoutube. Pocoapoco,lascosasvancambiando,yalparecernuestrobuenaliado html5,estfinalmenteocupandosulugarcorrespondiente:eltronode nuestrositiowebestomealegra.Essumamentefcilinsertarunvdeo mediantehtml5enunsitioweb,lasetiquetas<video>sonmuytilespara nosotros.

    Comoyasabrs(ysinolosabes,telodigoyo,jeje!!!),losvdeosdeben estarrepresentadosprincipalmenteporlasetiquetas<video></video> siemprequeestscreandooeditandounsitiowebmediantehtml5.Es decir,paraintroducirunvdeoentusitioweb,debeshacerloentreestas etiquetas,comoteexplicoenestetutorial:

    <video></video>

    Debescolocarelcdigohtml5deinsercindelvdeo,principalemente entrelasetiquetas<body>y</body>detusitioweb,justodondequieres queaparezcaste.Porejemplo,yoenestesitioweb,quieromostrarel vdeohtml5enlacolumnacentralizquierdapuescolocoelcdigode insercinhtml5eneselugar.


    38

    Endefinitiva,unaestructurasimpledesitiowebcreadoenhtml5,alque acabamosdeinsertarunvdeo,podraquedaras:

    <!DOCTYPEhtml> <htmllang="es"> <head> <metacharset="utf8"/> <title>Insertandovideohtml5</title> </head> <body> <section> <video> <!Aquvaelvdeo> </video> </section> </body> </html> Ahoratenemosqueaadir,laetiqueta<source/>dentrode<video>.Por lotantoquedaraas:

    <!DOCTYPEhtml> <htmllang="es"> <head> <metacharset="utf8"/> <title>Insertandovideohtml5</title> </head> <body> <section>


    39

    <video> <source/> </video> </section> </body> </html>


    Nota:sepuedeinsertarelvdeodirectamentedentrode<video>,sinlaetiqueta<source>peroesmejor hacerloasparaseguirlosestndaresmarcadosporlaW3Cyqueel"Markupvalidationservice"deesta entidad,considerenuestrodocumentohtml5porvlidoalanalizarlo."type",porejemplo,noseacepta comovlidoyaquesiseintroducedirectamenteen<vdeo>,saleelsiguientemensajedeerroralvalidar cdigo:Attributetypenotallowedonelementvideoatthispoint.

    Muybien,hastaaqutodomuyfcil,no?jeje!!!ok,puesseguimosconlo fcil.Levamosadarunanchoyunaalturaanuestrovdeo,adems, vamosaaadircontroles.Paraelanchoutilizamos"width"yparalaaltura "height",porotrolado,paraindicarquequeremosqueloscontrolessean visibles,aadimoslapalabra"controls".Nuestrocdigovaquedandoas:

    <!DOCTYPEhtml> <htmllang="es"> <head> <metacharset="utf8"/> <title>Insertandovideohtml5</title> </head> <body> <section> <videowidth="305"height="230"controls> <source/> </video> </section>
    40

    </body> </html> Acontinuacin,vamosaaadirdentrodelaetiqueta<source/>laruta hastaelvdeooladireccinwebdesteyvamosaindicareltipode vdeoquees:utilizaremos"src"y"type".En"src"debesespecificarla rutaquesedebeseguirhastaelvdeooladireccinwebenlaqueest alojadoelvdeo(ejemplo:src="videos/mivideo1.mp4").Elatributo"type", sirveparaindicareltipodevdeoquequeremosreproducir,podra quedaras:

    <!DOCTYPEhtml> <htmllang="es"> <head> <metacharset="utf8"/> <title>Insertandovideohtml5</title> </head> <body> <section> <videowidth="305"height="230"controls> <sourcetype="video/mp4" src="http://benidormexperineces.comli.com/mostrar%20y%20ocultar%20 un%20div%20con%20jquery%20%20evento%20slidetoggle.mp4"/> </video> </section> </body> </html> Silohashechotodovien,sedeberaverunvdeocomoeldeeste ejemplodewebhtml5,entusitioweb.
    41

    Hasvistoquefcil?Selepuedenaadirvariosatributosms,bastante interesantesytiles.Porejemplo,siintroduceslapalabra"autoplay" dentrodelaetiqueta<video>,elvdeocomienzaareproducirse automticamentetrascargarlapgina.Aqutemuestrounalistacon algunosdeesosatributos:

    srcsirveparaindicarladireccinorutadecargadelvdeo. autoplayelvdeocomienzaareproducirseautomticamente. controlsloscontrolesdelvdeohmtl5sonvisibles. preload"auto/metadata/none"cargartodoelvdeo,cargarlos metadatosonocargarnada. posterimagenqueseverantesdequecomiencelareproduccin delvdeohtml5. Otracosa,sisabesunpocodejavascript,puedescontrolartuvdeohtml muyfcilmente.Miraesto:

    <buttononclick="document.getElementById('video1').play()">comenzara reproducirelvideo</button> <buttononclick="document.getElementById('video1').pause()">pararel video</button> <buttononclick="document.getElementById('video1').volume+=0.1">Subir volumen</button> <button onclick="document.getElementById('video1').volume=0.1">Bajar volumen</button> </div> Haymuchomssobrelasetiquetas<video>y</video>dehtml5ysuuso, teinvitoadescubrirlovisitandoestelinksobrevdeosyhtml5.
    TutorialextraidodeMiopiblog:http://miopiblog.blogspot.com.es/

    42

    Tema7Crearformulariohtml5/etiquetas <form></form>

    Ahoraqueyatehassumergidoenelocanodellenguajehtml,crearla estructuradeunformulariomediantehtml5,notienequeresultarunatarea complicadaparati. Unaestructuraparaunformulariocreadamediantehtml5,secompone bsicamentedelasetiquetas:<form>,<fieldset>,<legend>,<label>y <input>. Paraqueveasunejemplo,temuestroesteformulariocreadomediante html5.Eltextoqueapareceentre<!Texto>soncomentarios, deestamaneraescomoserealizancomentariosdentrodeun documentohtml5,paraquelosnavegadoresnoloslean.

    < f i e l d s e ti d = " c o n t m i f o r m u " > < ! -T t u l o> < l e g e n d > C o n t a c t o : < / l e g e n d > < ! -C o m i e n z ae lf o r m u l a r i o> < f o r mi d = " m i f o r m u "a c t i o n = " e n v i a r f o r m . p h p " m e t h o d = " p o s t "> < ! -i n p u t syl a b e l> < p > < l a b e lc l a s s = " l a b e l "> < s p a n > N o m b r e : < / s p a n >< i n p u t t y p e = " t e x t "i d = " n o m b r e "n a m e = " n o m b r e "p l a c e h o l d e r = " E s c r i b et u n o m b r e "r e q u i r e d = " r e q u i r e d "a u t o f o c u s> < / l a b e l > < / p > < p > < l a b e lc l a s s = " l a b e l "> < s p a n > A p e l l i d o s : < / s p a n > < i n p u tt y p e = " t e x t "i d = " a p e l l i d o s "n a m e = " a p e l l i d o s "
    43

    p l a c e h o l d e r = " A p e l l i d o s "r e q u i r e d = " r e q u i r e d "> < / l a b e l > < / p > < p > < l a b e lc l a s s = " l a b e l "> < s p a n > E m a i l : < / s p a n > < i n p u tt y p e = " e m a i l "i d = " e m a i l "n a m e = " e m a i l " p l a c e h o l d e r = " a s t u r v e r @ h o t m a i l . e s "r e q u i r e d = " r e q u i r e d " > < / l a b e l > < / p > < p > < l a b e lc l a s s = " l a b e l "> < s p a n > S i t i ow e b ? : < / s p a n > < i n p u tt y p e = " u r l "i d = " u r l "p l a c e h o l d e r = " h t t p : / / a s t u r v e r . c o m " n a m e = " w e b "> < / l a b e l > < / p > < p > < l a b e lc l a s s = " l a b e l "> < s p a n > T e l f o n o : < / s p a n > < i n p u tt y p e = " t e l "i d = " t e l "p l a c e h o l d e r = " N m e r od et e l f o n o " n a m e = " t e l e f o n o "> < / l a b e l > < / p > < p > < l a b e lc l a s s = " l a b e l "> < s p a n > C o m e n t a r i o s : < / s p a n > < t e x t a r e ai d = " c o m e n t a r i o s "n a m e = " c o m e n t a r i o s " p l a c e h o l d e r = " E s c r i b ea q u "c o l s = " 1 7 "r o w s = " 5 " m a x l e n g t h = " 1 0 0 0 " > < / t e x t a r e a > < / l a b e l > < / p > < ! -B o t nd ee n v i a r> < p > < i n p u tc l a s s = " s u b m i t "t y p e = " s u b m i t " v a l u e = " E n v i a r "/ > < p > < / f o r m > < / f i e l d s e t >

    Aadiendoesteformulariobajoeltextodeltercerartculodeldocumento html5,severaas:

    44

    Pruebaahacerlot,averquetal...aunquesiquieressaberalgoms sobrecmocrearformulariosmediantehtml5,terecomiendoecharun vistazoalestetutorialqueteofrezco: Enestetutorial,tevoyaexplicarqueesloquetienesquehacerpara crearunformulariodecontactoparasitioweb,utilizandohtml5para laestructurayCSS3paraeldiseooestilodelformulario.Paralograr queelformulariodecontactohtml5funcioneyenvelosdatos, emplearemosunafuncinphp. Paracomenzaracrearnuestroformulariodecontactoparasitioweb,


    45

    mediantehtml5,vamosacomenzarporlaestructura.Laestructuradel formulariodecontactohtml5yCSS3,vaaestarcompuestapor:un <legend>ottulodelformulario,poruncontenedoro<fieldset>,las etiquetas<form>quecorrespondenalpropioformulario,yvarios elementos<label>encuyointeriorestarnlos<input>(recuadrosdonde elusuariointroducesusdatos). Porlotanto,nuestrohtmlparaelformulariodecontactoquedaraas:

    <fieldsetid="contmiformu"> <!Ttulo> <legend>Contacto:</legend> <!Comienzaelformulario> <formid="miformu"action="enviarform.php"method="post"> <!inputsylabel> <p><labelclass="label"><span>Nombre:</span><inputtype="text" id="nombre"name="nombre"placeholder="Escribetunombre" required="required"autofocus></label></p> <p><labelclass="label"><span>Apellidos:</span><input type="text"id="apellidos"name="apellidos"placeholder="Apellidos" required="required"></label></p> <p><labelclass="label"><span>Email:</span><inputtype="email" id="email"name="email"placeholder="asturver@hotmail.es" required="required"></label></p> <p><labelclass="label"><span>Sitioweb?:</span><input type="url"id="url"placeholder="http://asturver.com"name="web" ></label></p> <p><labelclass="label"><span>Telfono:</span><input type="tel"id="tel"placeholder="Nmerodetelfono"name="telefono" ></label></p> <p><labelclass="label"><span>Comentarios:</span><textarea
    46

    id="comentarios"name="comentarios"placeholder="Escribeaqu" cols="17"rows="5"maxlength="1000"></textarea></label></p> <!Botndeenviar> <p><inputclass="submit"type="submit"value="Enviar"/><p> </form> </fieldset>

    Teexplicounpocoloquehecreado:

    1. "<fieldsetid="contmiformu"> 2. <!Ttulo> 3. <legend>Contacto:</legend>"Estefragmentodecdigo crea,omejordicho,abreelcontenedoro"fieldset"yhacevisibleun ttuloparaelformulario,enestecaso:"Contacto:". 4. "<!Comienzaelformulario> 5. <formid="miformu"action="enviarform.php"method="post">" Abrimoselelemento<form>oformulario,encuyointeriorvan situadoslos<input>y<label>.Comopuedesobservar,heasignado unid="",paraidentificarlo,action=""quehacereferenciaalafuncin phpquevamosautilizarparaenviardichoformulario (enviarform.php)yelmethod="",enestecaso"post". 6. "<!inputsylabel> 7. <p><labelclass="label"><span>Nombre:</span><input type="text"id="nombre"name="nombre"placeholder="Escribetu nombre"required="required"autofocus></label></p>"los elementos<label>sonenlosqueintroducimoselenunciadoque queremosquetenganlos<input>,ylospropios<input>,quesonlos cuadrosdetextoqueelusuariorellenaconsusdatos.Dentrodel elemento<input>sepuedenespecificarvariosatributos,eneste casohemosespecificado:"required"(requerido),"autofocus"
    47

    (graciasaesteatributoesteelemento<input>salecomoel"primero arellenar"siempre),type=""(eltipodeinput),id=""(estableceuna identidad),name=""(estableceunaidentidadquedespusnossirve paralafuncinphp),placeholder=""(textoquesaleescritopor defectodentrodelinput). 8. "<p><inputclass="submit"type="submit"value="Enviar"/><p>" Botndeenviar.

    Silohashechotodobien,entusitiowebtendraqueverseesto:

    Parecequenuestroformulariodecontactoestunpocososo,no?jeje!!! noimporta,vamosadarleunpocodeestilo.Creaunahojadeestilos CSSyaadeunlinkastaentrelassecciones<head>y</head>,detu sitioweb,oaadelossiguientesestilosCSS3atuhojadeestilos. Tambinpuedesintroducirelcdigoparalosestilosdelformulariode contacto,entrelasetiquetas<styletype="text/css">y</style>,para insertarloentusitioweb:

    /*estilospara elttulo*/ #contmiformulegend{ margin:0auto fontsize:2em


    48

    fontweight:bold } /*estilospara elcontenedor*/ #contmiformu{ width:250px border:0 padding:3px } /*estilospara elformulario*/ #miformu{ width:300px backgroundimage:lineargradient(bottom,rgb(192,204,20)47%, rgb(91,240,126)68%) backgroundimage:olineargradient(bottom,rgb(192,204,20)47%, rgb(91,240,126)68%) backgroundimage:mozlineargradient(bottom,rgb(192,204,20)47%, rgb(91,240,126)68%) backgroundimage:webkitlineargradient(bottom,rgb(192,204,20)47%, rgb(91,240,126)68%) backgroundimage:mslineargradient(bottom,rgb(192,204,20)47%, rgb(91,240,126)68%) backgroundcolor:#5bf07e backgroundimage:webkitgradient( linear, leftbottom, lefttop, colorstop(0.47,rgb(192,204,20)),
    49

    colorstop(0.68,rgb(91,240,126)) ) borderwidth:2px bordercolor:#26600c borderstyle:solid mozborderradius:15px15px15px15px webkitborderradius:15px15px15px15px borderradius:15px15px15px15px } #miformulabel{ display:block margin:0 } #miformulabelspan{ display:block marginleft:7px } /*estilospara losinputyareadetexto*/ #miformulabelinput{ marginleft:40px margintop:5px paddingleft:3px bordercolor:#ff6a00 moztransition:all.25s webkittransition:all.25s otransition:all.25s transition:all.25s }
    50

    #miformulabeltextarea{ marginleft:40px margintop:5px paddingleft:3px bordercolor:#ff6a00 moztransition:all.25s webkittransition:all.25s otransition:all.25s transition:all.25s } /*efectospara losinputyareadetexto*/

    #miformulabelinput:focus,#miformulabeltextarea:focus{ background:#fff bordercolor:#0000FF boxshadow:004px#0000FF paddingright:65px marginleft:10px } #miformu.submit{ marginleft:50px fontsize:14px fontweight:bold padding:3px marginbottom:7px backgroundcolor:#808080 color:#fff cursor:pointer
    51

    moztransition:all.32s webkittransition:all.32s otransition:all.32s transition:all.32s }

    /*estilospara botondeenvo*/

    #miformu.submit:hover{ padding:3px5px backgroundcolor:#ebe7e7 color:#0000FF } Vamosavercomotendraquequedarelformulariodecontactohtml5 diseadoconCSS3finalmente,vistoconelnavegadorGoogleChrome, porejemplo:

    52

    Parecequeahorasevealgomejor.Eninternetexplorersevealgo diferenteysepuedemejoraralgoeldiseo,peroenlamayorade navegadoresmodernosseveexactamenteas,comoenlaimagen.te gusta?esperoques,noobstante,recuerdaquepuedespersonalizarlos estilosmodificandoelCSS. Annosfaltaalgomuyimportantelafuncinphpparaenviarlosdatos delformulariodecontactohmtl5.Creaunnuevodocumento.php, copiaestecdigoensuinterior,personalzalocontudireccindecorreo, tuspropiasfrases...etc,ygardaloeneldirectoriorazdetusitiowebcon elnombre:"e n v i a r f o r m . p h p " .Unavezlotengas,sbeloatuservidorconel restodearchivos.

    53

    <?php //Importamoslosdatosdelformulario @$nombre=addslashes($_POST['nombre']) @$apellidos=addslashes($_POST['apellidos']) @$email=addslashes($_POST['email']) @$web=addslashes($_POST['web']) @$mensaje=addslashes($_POST['comentarios']) //Preparoelcorreo $cabecemail="From:$email\n" ."ReplyTo:$email\n" $asunto="Mensajedesdeelformulariodecontacto"//asuntodel mensaje $email_to="asturver@hotmail.es"//cambiarportuemail $contenido="$nombrehaenviadounmensajedesdeelformulariode contacto,estossonsusdatos:" ."\n" ."Nombre:$nombre\n" ."Apellidos:$apellidos\n" ."Email:$email\n" ."SitioWeb:$web\n" ."Comentarios:$mensaje\n" ."\n" //Enviamoselcorreo if(@mail($email_to,$asunto,$contenido,$cabecemail)){ //Sielmensajeseenvamuestraunafrase die("Gracias,hemosrecibidosusdatoscorrectamente.") }else{ //Sialgofalla,saleerror
    54

    die("Error:Nohemosrecibidosusdatos,intntelomstarde.") } ?>

    Muybien,supongoquehastaelmomentonohasidomuydifcil,no? pues...yahemosterminado,jeje!!!Yatienescreadotuformulariode contacto,realizadoconhtml5ydiseadoconCSS3. Unacosams:esteformulariorealizalavalidacincorrectamente mediantehtml5enlosnavegadoresmodernos,peronoenotroscomoIE niendispositivosmviles. Parasolucionaresteproblema,yquenuestroformulariodecontacto funcionecorrectamenteentodoslosnavegadoresyenlosdispositivos android,introduceelsiguientecdigoentrelasetiquetas<head>y </head>delsitiowebdondevayaairsituadoelformulariodecontacto html5:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></scri pt> <script src="http://minuevaprueba.webuda.com/jquery.h5formcustom.js"></script > <script> $(document).ready(function(){ $('#miformu').h5form() }) </script>

    55

    Estecdigojavascript,haceusodelframeworkjQueryydeunpluginpara validarformulariosconjQuery,conocidocomojquery.h5form.Sisabes hacerlo,descrgaloysbeloatupropioservidorenvezdeutilizar "minuevaprueba.webuda.com/jquery.h5formcustom.js",asnuncadejar defuncionar,seguro. Tambinpuedesagregarestilosalasetiquetasdeerrorydemsdel plugin,paraellovisitaestelink: https://github.com/rapidexp/jqueryh5form/blob/master/jquery.h5form2.8.0 /css/jquery.h5form2.8.0.css Bueno,puesnada,puedesverestemismoejemplofuncionandosivisitas estesubdominiodepruebas,enelquetemuestroelformulariohtml5y CSS3quehemosconstruido,funcionando.Porcierto,enmiandroid funcionaperfectamente. Siquieres,puedesdescargartodosloscdigosparaelformulariode contactohtml5deesteejemplo,visitandoellink.Unacosa:paraeditarel archivoindex,tendrsqueutilizarunprogramaoeditorquesoportehtml5, sinolotienes,puedesutilizarelblocdenotasdewindows.Noobstante, tambintefacilitoelarchivoindexenversin.txtparaquepuedaseditarlo fcilmente(estearchivo.txtnoesnecesariosubirloalservidor). Noteolvidesdeseguirmeenlasredessocialesodesuscribirteami newsletter.Silohaces,estarssiemprealdasobrenuevas actualizacionesypublicacionesenMiopiblog.

    TutorialextraidodeMiopiblog:http://miopiblog.blogspot.com.es/

    56

    Conclusin

    Html5,esunlenguajedeprogramacinbastanteextenso.Enestelibrote invitoacomenzarapracticaryaprenderhtml,ensendoteaformaruna estructurabsicaparapginaweb,mediantehtml5.Loquetemuestro,tan soloesunapequeapartedehtml5,yaquesumundoesmuchoms amplio. Teanimoadescubrirtodoloquepuedessercapazdehacerutilizando html5paracreartusproyectos.Aprenderesnecesario,yyoteayudo gratis.Siteapeteceyquieresseguiraprendiendo,terecomiendopasarte porMiopiblog,miblogpersonal.

    57

    58

    Agradecimientos/Dedicatoria

    Megustaraagradecerlacreacindeestelibroatodaslaspersonasy entidadesque,medianteforosyredessociales,sehanprestadoa ofrecermeayudadurantemisaosdeaprendizajeymelohanpuesto todomuchomsfcil. Paraelltimolugar,dejolosagradecimientosagoogle.Selosmerece porestarahyponeralalcancedetodoslosusuarioslainformacinque nosotros,loswebmaster,lequeremostransmitirastos. Graciasdenuevo,deverdad:GRACIAS Atentamente:AntonioMenchnGarca. Todoslosderechosreservados.

    59

    60

    61

    You might also like