Introducción A Html5 - Ebook Gratuito

1
2
Introduccin a html5 - Aprende a crear una web
mediante html5
3
4
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
5
6
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.
7
Tema2Quevasaaprenderenestelibro?
Enestelibro,tevoyaensearalgunosdelosnuevoselementosy
etiquetasdehtml5,ycmoutilizarlas.Aprendersacrearlaestructurade
unapginawebsimpleutilizandoellenguajedeprogramacinhtml5.
Despus,puedesanimarteyaprenderunpocodeCSS,asserscapaz
dedarestiloatussitioswebcreadosmediantehtml5.
8
Tema3Estructurabsicadeunawebhtml5
Sinoconocesniunapizcaellenguajedeprogramacinhtml,puedeque
teestspreguntadocualeslaestructurabsicaquedeberateneruna
webcreadamediantehtml5?Puesbien,larespuestaesbiensencilla,al
igualquelaestructura,yaquebsicamentesecomponedelossiguientes
elementos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Ahorateexplicounpocoestaestructura,paraqueloentiendastodo
mejor:
1. <!DOCTYPEhtml>EstoeslaetiquetaDOCTYPE.Siempredebe
ircolocadaalprincipiodeldocumentohtmlysiempredebeseras.
Enlasversionesanterioresdehtml,elDOCTYPEerabastantems
9
largo.Laetiquetaindicaqueseabreeldocumentohtml.
2. <htmllang=es>Elatributolang,sirveparaespecificarelidioma
deldocumentohtml.Enestecasoesespaolyestespecificado
mediantelasletrases.
3. <head>Seabrelaetiqueta<head>.Laetiquetaheadpodramos
decirquerepresentaelencabezamientodeldocumentohtml.Ensu
interiordebemoscolocarelementosimportantes,comoelttulodel
documento,laspalabrasclave,ladescripcin...etc.Los
navegadoresdanmuchaimportanciaaloquehayenelinteriorde
lasetiquetas<head>deunsitioweb.
4. <metacharset=utf8/>Etiquetametaparalacodificacinde
caracteres.Siempredebeircolocadaeneldocumentohtmly,de
momento,debeserexactamentecomotelamuestro.
5. <title><title/>Entreestasetiquetasdebescolocarelttulodetu
pginaweb.Porejemplo,situsitiowebsellamaLawebmoderna
3.0deberasrepresentarloeneldocumentohtmldelasiguiente
manera:<title>Lawebmoderna3.0<title/>.Inmediatamentedebajo
delaetiquetatitle,sepuedeninsertarlinksyetiquetas,porejemplo
ladescripcinylaspalabrasclave.
6. </head>Secierralaetiquetahead,yporlotanto,terminael
encabezamientodelsitioweb.
7. <body>Seabreelelementobody.Dentrodeestaetiquetatienes
queinsertarloquequieresqueelusuarioveaenlapantalladel
dispositivodeaccesomedianteelcualintentavisualizartusitioweb.
Enelinteriordelcuerpoobody,vansituadaslassecciones,los
artculos,elmenoetiqueta<nav>,elementos<div>...ymuchos
mselementos.
8. </body>Estaetiquetaidentificaelcierredelaetiqueta<body>o
cuerpodeldocumentohtml.
9. </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.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Asturver - Ven a Asturias</title>
<meta content="Te mostramos una gran cantidad de
lugares de inters en Asturias y te animamos a conocer esta
regin de Espaa." name="description" />
</head>
<body >
</body>
</html>
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.
<!DOCTYPE html>
<html lang="es">
<head>
<meta content="Asturias, ver Asturias, conocer
Asturias, que ver en asturias, de interes en asturias"
name="keywords" />
</head>
<body >
</body>
</html>
Sitefijas,puedesobservarcomolasetiquetasmetasecierranmediante
labarra/.Hastaahoratodobienno?Acontinuacinvamosaintroducir
otraetiquetameta,enestecasoparaindicaralosrobotsdelos
navegadoresquetienenqueindexartodoelcontenidodenuestrositio
web.Veamoscomotendraquequedarelcdigohtmldeldocumentouna
13
vezintroducidaestaetiqueta:
<!DOCTYPE html>
<html lang="es">
<head>
name="keywords" />
<meta name="robots" content="index, follow">
</head>
<body >
</body>
</html>
Siobservaslaetiquetametaquehemosdestinadoalosrobots,vers
comolosatributosnameycontent,vuelvenacambiardevalores:<meta
14
name="robots" content="index, follow">.Medianteestosvalores
estamosindicandoalosnavegadoresqueloleaneindexentodo.
15
Tema5Cuerpodeldocumentohtml5etiquetas
<body></body>
Lacantidaddeelementosquesepuedeninsertardentrodelcuerpodeun
documentohtmlesinmensa.Enestetema,tevoyaensearautilizar
algunosdeestoselementos,lossuficientescomoparacrearuna
estructurabsicadeejemplodeunapginawebcreadamediantehtml5.
5.1Etiquetas<header></header>
Paracomenzar,vamosaintroducirlasetiquetas<header></header>,
dentrodelcuerpodeldocumento.Elcdigodebequedaras:
<!DOCTYPE html>
<html lang="es">
<head>
16
name="keywords" />
</head>
<body >
<header></header>
</body>
</html>
Enelinteriordeheader,puedescolocarellogodetusitioweb,o
cualquierotroelementoqueseteocurra.Estasetiquetas,representaslo
quenormalmenteunusuarioveenlapartesuperiordelsitioweb.
17
Dentrodelasetiquetas<header>vamosacolocarunttuloparaqueel
usuariolopuedaver.Essimple,solohayqueescribirloquequieres
mostrarcomottulo,entrelasetiquetas<h1></h1>ydentrodeheader.
<!DOCTYPE html>
<html lang="es">
<head>
name="keywords" />
</head>
18
<body >
<header>
<h1>Ven a conocer Asturias!!!</h1>
</header>
</body>
</html>
Sipublicaraselcdigoahoramismo,enGoogleChromeseveraesto:
5.2Etiqueta<nav>
Laetiquetanavsirveparamostrarunmenobarradenavegacin.Este
mensirvealosusuariosparadesplazarseporlaspginasdelsitioweb.
Elmen,serepresentadentrodelaetiquetanavmedianteunalistahtml,
esdecircon<ul>.
19
Esteejemplo,muestralaestructuradeunmenrealizadomediantehtml5:
<nav>
<ul>
<li><a href="#" title="Men 1">Blog</a></li>
<li><a href="#" title="Men 2">Qu ver</a></li>
<li><a href="#" title="Men 3">Qu hacer</a></li>
<li><a href="#" title="Men 4">Escapadas</a></li>
<li><a href="#" title="Men 5">Hoteles</a></li>
</ul>
</nav>
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:
<!DOCTYPE html>
<html lang="es">
<head>
name="keywords" />
</head>
<body >
<header>
</header>
21
<nav>
<ul>
</ul>
</nav>
</body>
</html>
5.3Etiquetas<section></section>y<article></article>
Lasnuevasetiquetas<section>dehtml5,podramosdecirquesonlos
elementosquerepresentanlasseccionesenlascualessedivideel
documento.Dentrodelasetiquetassection,seubicanlasetiquetas
<article>,cuyointeriorestformadoprincipalmenteporcontenidotextual
enformadeartculo.
Enunamismaseccinpuedehabervariosartculos.Trasintroduciruna
seccinyvariosartculos,laestructuradeldocumentohtml5vatomando
estaforma:
22
<!DOCTYPE html>
<html lang="es">
<head>
name="keywords" />
</head>
<body >
<header>
</header>
<nav>
<ul>
</ul>
23
</nav>
<section>
<article><h1>Artculo 1</h1><br/>
<p>Lorem ipsum ad his scripta blandit
partiendo, eum fastidii accumsan euripidis in,
eum liber hendrerit an. Qui ut wisi vocibus
suscipiantur, quo dicit ridens inciderint id.
Quo mundi lobortis reformidans eu, legimus
senserit definiebas an eos. Eu sit tincidunt
incorrupte definitionem, vis mutat affert
percipit cu, eirmod consectetuer signiferumque
eu per. In usu latine equidem dolores. Quo
no falli viris intellegam, ut fugit veritus
placerat per. Ius id vidit volumus mandamus,
vide veritus democritum te nec, ei eos debet
libris consulatu. No mei ferri graeco
dicunt, ad cum veri accommodare. Sed at malis omnesque
delicata, usu et iusto zzril meliore. Dicunt
maiorum eloquentiam cum cu, sit summo dolor
essent te. Ne quodsi nusquam legendos has,
ea dicit voluptua eloquentiam pro, ad sit
quas qualisque. Eos vocibus </p></article>
<p>deserunt quaestio ei. Blandit incorrupte
quaerendum in quo, nibh impedit id vis,
vel no nullam semper audiam. Ei populo
graeci consulatu mei, has ea stet modus phaedrum.
Inani oblique ne has, duo et veritus
24
detraxit. Tota ludus oratio ea mel, offendit persequeris
ei vim. Eos dicat oratio partem ut, id cum
ignota senserit intellegat. Sit inani ubique graecis
ad, quando graecis liberavisse et cum,
dicit option eruditi at duo. Homero salutatus
suscipiantur eum id, tamquam voluptaria
expetendis ad sed, nobis feugiat similique usu ex.
Eum hinc argumentum te, no sit percipit
adversarium, ne qui feugiat persecuti. Odio omnes
scripserit ad est, ut vidit lorem maiestatis
his, putent mandamus gloriatur ne pro. Oratio
iriure rationibus ne his, ad est corrumpit
splendide. Ad duo appareat moderatius, ei falli
tollit denique eos. Dicant evertitur
</p></article>
<p>mei in, ne his deserunt perpetua
sententiae, ea sea omnes similique vituperatoribus.
Ex mel errem intellegebat comprehensam, vel
ad tantas antiopam delicatissimi, tota ferri
affert eu nec. Legere expetenda pertinacia
ne pro, et pro impetus persius assueverit. Ea mei
nullam facete, omnis oratio offendit ius cu.
Doming takimata repudiandae usu an, mei
dicant takimata id, pri eleifend inimicus
euripidis at. His vero singulis ea, quem euripidis
abhorreant mei ut, et populo iriure vix.
Usu ludus affert voluptaria ei, vix ea error
definitiones, movet fastidii signiferumque
25
in qui. Vis prodesset adolescens adipiscing te,
usu mazim perfecto recteque at, assum putant
erroribus mea in. Vel facete imperdiet id,
cum an libris luptatum perfecto, vel
fabellas inciderint ut. Veri facete debitis ea vis, ut
eos oratio erroribus. Sint
facete</p></article>
</section>
</body>
</html>
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>.
<!DOCTYPE html>
<html lang="es">
<head>
name="keywords" />
</head>
<body >
<header>
</header>
<nav>
<ul>
28
</ul>
</nav>
<section>
29
tollit denique eos. Dicant evertitur
</p></article>
30
</section>
<footer><p>
Y este es el pie de pgina</p>
</footer>
</body>
</html>
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.
<!DOCTYPE html>
<html lang="es">
<head>
name="keywords" />
<<meta name="robots" content="index, follow">
</head>
<body >
<header>
33
</header>
<nav>
<ul>
</ul>
</nav>
<section>
34
tollit denique eos. Dicant evertitur </p>
<video controls width="340" height="245"
id="video1" >
<source type="video/mp4"
src="http://benidormexperineces.comli.com/mostrar%20y%20oculta
r%20un%20div%20con%20jquery%20-%20evento%20slidetoggle.mp4" />
</video></div>
35
</article>
</section>
<footer><p>
Y este es el pie de pgina</p>
</footer>
</body>
</html>
36
Cuyoresultadoenlapantalladeldispositivodelusuario,seraeste:
Parececomplicado,peronoloes,elnicofragmentodecdigoquehe
agregadoalaestructurabsicadelejemplodedocumentohtml5,eseste:
<video controls width="340" height="245" id="video1" >
<source type="video/mp4"
src="http://benidormexperineces.comli.com/mostrar%20y%20oculta
r%20un%20div%20con%20jquery%20-%20evento%20slidetoggle.mp4" />
</video></div>
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>
</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>
</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>
</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.
<fieldset id="contmiformu">

<legend>Contacto:</legend>

<form id="miformu" action="enviarform.php"
method="post" >

<p><label class="label" ><span>Nombre:</span> <input
type="text" id="nombre" name="nombre" placeholder="Escribe tu
nombre" required="required" autofocus ></label></p>
<p><label class="label" ><span>Apellidos:</span>
<input type="text" id="apellidos" name="apellidos"
43
placeholder="Apellidos" required="required" ></label></p>
<p><label class="label" ><span>Email:</span>
<input type="email" id="email" name="email"
placeholder="asturver@hotmail.es" required="required"
></label></p>
<p><label class="label" ><span>Sitio web?:</span>
<input type="url" id="url" placeholder="http://asturver.com"
name="web" ></label></p>
<p><label class="label" ><span>Telfono:</span>
<input type="tel" id="tel" placeholder="Nmero de telfono"
name="telefono" ></label></p>
<p><label class="label" ><span>Comentarios:</span>
<textarea id="comentarios" name="comentarios"
placeholder="Escribe aqu" cols="17" rows="5"
maxlength="1000"></textarea></label></p>

<p><input class="submit" type="submit"
value="Enviar" /><p>
</form>
</fieldset>
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
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
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:"enviarform.php".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

Introducción A Html5 - Ebook Gratuito

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción A Html5 - Ebook Gratuito

Cargado por

Copyright:

Formatos disponibles

1

También podría gustarte