Introducción a Html5 - ebook gratuito

Introducción a html5 - Aprende a crear una webmediante html5

3

Indice

Tema 1 ¿Que es html5? / página 7Tema 2 ¿Que vas a aprender en este libro? / página 8Tema 3 Estructura básica de una web html5 / página 9Tema 4 Formando la cabecera del documento html5 etiquetas<head></head> / página 11Tema 5 Cuerpo del documento html5 etiquetas <body></body> /página 15Tema 6 Insertar vídeo / etiquetas <video> y <source> / página 31Tema 7 Crear formulario html5 / etiquetas <form></form> / página 41Conclusión / página 54Agradecimientos / Dedicatoria / página 56

5

Tema 1 ¿Que es html5?

Html5, es la nueva versión de html, es decir, la posterior a html4. Entresus características principales, destaca la implementación de nuevasespecificaciones. W3C es quien nos indica como debe ir desarrollándosela evolución de este lenguaje.

Entre las nuevas especificaciones y características de html5, podemosdestacar una gran cantidad de elementos importantes, gracias a loscuales, programar mediante lenguaje html5, resulta mucho más efectivoque hacerlo utilizando sus versiones anteriores. De entre éstos, pongocomo ejemplo:

Etiquetas canvas (audio, video, 2d, 3d, source...) Nuevas etiquetas semánticas para estructurar el sitio web (header,

nav, article, footer, section...) API Storage API de Geoposiconamiento Drag & Drop … y mucho más.

7

http://www.google.com/url?q=http%3A%2F%2Fwww.w3c.es%2F&sa=D&sntz=1&usg=AFQjCNGsISOXMyOmVjQiTn3tg9oiw-GoKA

Tema 2 ¿Que vas a aprender en este libro?

En este libro, te voy a enseñar algunos de los nuevos elementos yetiquetas de html5, y cómo utilizarlas. Aprenderás a crear la estructura deuna página web simple utilizando el lenguaje de programación html5.

Después, puedes animarte y aprender un poco de CSS, así serás capazde dar estilo a tus sitios web creados mediante html5.

8

Tema 3 Estructura básica de una web html5

Si no conoces ni una pizca el lenguaje de programación html, puede quete estés preguntado ¿cual es la estructura básica que debería tener unaweb creada mediante html5? Pues bien, la respuesta es bien sencilla, aligual que la estructura, ya que básicamente se compone de los siguienteselementos:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

</body>

</html>

Ahora te explico un poco esta estructura, para que lo entiendas todomejor:

1. <!DOCTYPE html> Esto es la etiqueta DOCTYPE. Siempre debeir colocada al principio del documento html y siempre debe ser así.En las versiones anteriores de html, el DOCTYPE era bastante más

9

largo. La etiqueta indica que se abre el documento html.2. <html lang=”es”> El atributo lang, sirve para especificar el idioma

del documento html. En este caso es español y está especificadomediante las letras “es”.

3. <head> Se abre la etiqueta <head>. La etiqueta head podríamosdecir que representa el encabezamiento del documento html. En suinterior debemos colocar elementos importantes, como el título deldocumento, las palabras clave, la descripción... etc. Losnavegadores dan mucha importancia a lo que hay en el interior delas etiquetas <head> de un sitio web.

4. <meta charset=”utf8” /> Etiqueta meta para la codificación decaracteres. Siempre debe ir colocada en el documento html y, demomento, debe ser exactamente como te la muestro.

5. <title><title/> Entre estas etiquetas debes colocar el título de tupágina web. Por ejemplo, si tu sitio web se llama “La web moderna3.0” deberías representarlo en el documento html de la siguientemanera: <title>La web moderna 3.0<title/>. Inmediatamente debajode la etiqueta title, se pueden insertar links y etiquetas, por ejemplola descripción y las palabras clave.

6. </head> Se cierra la etiqueta head, y por lo tanto, termina elencabezamiento del sitio web.

7. <body> Se abre el elemento body. Dentro de esta etiqueta tienesque insertar lo que quieres que el usuario vea en la pantalla deldispositivo de acceso mediante el cual intenta visualizar tu sitio web.En el interior del cuerpo o body, van situadas las secciones, losartículos, el menú o etiqueta <nav>, elementos <div>... y muchosmás elementos.

8. </body> Esta etiqueta identifica el cierre de la etiqueta <body> ocuerpo del documento html.

9. </html> Fin del documento html.

10

Para comenzar a crear tu página web mediante html5, te recomiendodescargar e instalar el software Webmatrix2. Una vez que lo tengas, abreun nuevo documento html5 en blanco y... vamos a empezar a crear unapágina web mediante html5.

Tema 4 Formando la cabecera del documento html5 etiquetas <head></head>

Muy bien, ya has aprendido a formar la estructura muy básica de undocumento creado mediante html5. Ahora vamos a comenzar a insertarelementos para “rellenar” un poco la cabecera de nuestro documentohtml5.

Lo primero que debe aparecer dentro de la etiqueta <head> de undocumento html5, es la etiqueta <meta charset=”utf8” />. Igual deindispensable es el elemento <title>, que debe ir colocado justo debajode la etiqueta anterior y, como te he comentado anteriormente, sirve paraponer título al documento html.Una vez cerrada la etiqueta <title> vamos a añadir la descripción quequeremos que los navegadores lean. Esto se hace muy fácilmente: parainsertar un fragmento de texto que describa el contenido del documento,hay que utilizar una etiqueta meta. Dentro de esta etiqueta procedemos aindicar que se trata de una descripción, mediante el atributo name. Porotro lado, vamos a introducir el texto de nuestra descripción, medianteotro atributo conocido como: content.¿Parece difícil? no lo es!!! Mira el ejemplo que te pongo para que loentiendas mejor:

En este ejemplo voy a mostrar un documento html5 en el cual heinsertado el título y la descripción. La página web va a ser una web

11

http://www.google.com/url?q=http%3A%2F%2Fwww.microsoft.com%2Fweb%2Fwebmatrix%2F&sa=D&sntz=1&usg=AFQjCNFCV5d-nqBraUeMqdnaLkX30XQmGw

para conocer Asturias.

<!DOCTYPE html>

<html lang="es">

<head>


<title>Asturver - Ven a Asturias</title>

<meta content="Te mostramos una gran cantidad de

lugares de interés en Asturias y te animamos a conocer esta

región de España." name="description" />

</head>

<body >

</body>

</html>

¿Te has fijado en la tag meta? es esta: <meta content=”Te mostramosuna gran cantidad de lugares de interés en Asturias y te animamos aconocer esta región de España.” name=”description” /> Va justo debajode title, como te he comentado antes, y si te fijas, puedes observar comose utilizan los atributos content y name, para introducir una descripcióndel sitio web mediante una meta tag.

Vale, supongo que hasta ahora todo fácil, no? jeje!!! bueno pues vamos acontinuar introduciendo otra etiqueta meta con las palabras clave con las

12

que queremos los navegadores identifiquen la página web. Para haceresto, simplemente hay que crear otra meta tag como la anterior, solo queen este caso el atributo name debe estar definido por el valor keywords.Mira el ejemplo, así lo entiendes mejor.

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

Si te fijas, puedes observar como las etiquetas meta se cierran mediantela barra / . ¿Hasta ahora todo bien no? A continuación vamos a introducirotra etiqueta meta, en este caso para indicar a los robots de losnavegadores que tienen que indexar todo el contenido de nuestro sitioweb. Veamos como tendría que quedar el código html del documento una

13

vez introducida esta etiqueta:

<!DOCTYPE html>

<html lang="es">

<head>








name="keywords" />

<meta name="robots" content="index, follow">

</head>

<body >

</body>

</html>

Si observas la etiqueta meta que hemos destinado a los robots, veráscomo los atributos name y content, vuelven a cambiar de valores: <meta

14

name="robots" content="index, follow">. Mediante estos valoresestamos indicando a los navegadores que lo lean e indexen todo.

15

Tema 5 Cuerpo del documento html5 etiquetas<body></body>

La cantidad de elementos que se pueden insertar dentro del cuerpo de undocumento html es inmensa. En este tema, te voy a enseñar a utilizaralgunos de estos elementos, los suficientes como para crear unaestructura básica de ejemplo de una página web creada mediante html5.

5.1 Etiquetas <header></header>

Para comenzar, vamos a introducir las etiquetas <header> </header>,dentro del cuerpo del documento. El código debe quedar así:

<!DOCTYPE html>

<html lang="es">

<head>

16








name="keywords" />


</head>

<body >

<header></header>

</body>

</html>

En el interior de header, puedes colocar el logo de tu sitio web, ocualquier otro elemento que se te ocurra. Estas etiquetas, representas loque normalmente un usuario ve en la parte superior del sitio web.

17

Dentro de las etiquetas <header> vamos a colocar un título para que elusuario lo pueda ver. Es simple, solo hay que escribir lo que quieresmostrar como título, entre las etiquetas <h1></h1> y dentro de header.

<!DOCTYPE html>

<html lang="es">

<head>








name="keywords" />


</head>

18

<body >

<header>

<h1>Ven a conocer Asturias!!!</h1>

</header>

</body>

</html>

Si publicaras el código ahora mismo, en Google Chrome se vería esto:

5.2 Etiqueta <nav>

La etiqueta nav sirve para mostrar un menú o barra de navegación. Estemenú sirve a los usuarios para desplazarse por las páginas del sitio web.El menú, se representa dentro de la etiqueta nav mediante una lista html,es decir con <ul>.19

Este ejemplo, muestra la estructura de un menú realizado mediante html5:

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

Que visto en el navegador google Chrome, sería esto:

Los enlaces, se representan mediante las etiquetas <a>, y en su interior

20

se sitúan los atributos href y title. Recuerda que si quieres que el menúfuncione correctamente, deberás agregar más páginas e introducir ladirección correcta en el atributo href de los enlaces.Como puedes comprobar también, cada elemento <li>, es uno de losbotones que componen el menú <ul>.Podemos añadir el menú, por ejemplo, justo después de las etiquetas<header></header>. Por lo tanto, el código de nuestro archivo html hastael momento debe ser este, con menú incluido:

<!DOCTYPE html>

<html lang="es">

<head>








name="keywords" />


</head>

<body >

<header>


</header>

21

<nav>

<ul>






</ul>

</nav>

</body>

</html>

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

Las nuevas etiquetas <section> de html5, podríamos decir que son loselementos que representan las secciones en las cuales se divide eldocumento. Dentro de las etiquetas section, se ubican las etiquetas<article>, cuyo interior está formado principalmente por contenido textualen forma de artículo.En una misma sección puede haber varios artículos. Tras introducir unasección y varios artículos, la estructura del documento html5 va tomandoesta forma:

22

<!DOCTYPE html>

<html lang="es">

<head>








name="keywords" />


</head>

<body >

<header>


</header>

<nav>

<ul>






</ul>

23

</nav>

<section>

<article><h1>Artículo 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>

Si lo observas bien, verás que he añadido los siguientes elementos:<h1>Artículo 3</h1><br/><p> y que las etiquetas <section> y <article>van situadas justo después de <nav>, pero también dentro de l cuerpo deldocumento. Bien, pues te explico lo que son:

<h1></h1> ya las conocías de antes, has introducido un título enlel elemento <header>, mediante estas etiquetas. Sirven para indicara los navegadores que se trata de un título y que, por lo tanto, tienenque darle importancia. Además, ayudan a que los robots entiendanmejor la estructuración del sitio web.

<br/> esta etiqueta sirve para marcar un salto de línea en undocumento .html.

<p> sirve para introducir texto. Representa un párrafo y se cierracon la etiqueta </p>

26

¿lo has entendido? supongo que sí, jeje!!! Mira lo que se ve hasta ahoraen la pantalla del ordenador:

5.4 etiquetas <footer></footer>

Las etiquetas footer de html5, representan la parte inferior de lo que elusuario ve en la pantalla cuando accede a tu sitio web desde unnavegador de internet.En su interior puedes introducir secciones, artículos y cualquier elementode html5.

27

En nuestro ejemplo de estructura de documento html5, procedemos aintroducir las etiquetas <footer> justo después de la sección que hemosinsertado anteriormente, pero también dentro del cuerpo o <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 página</p>

</footer>

</body>

</html>

La estructura html5, corresponde a esta captura de pantalla en googleChrome:

31

Perfecto!!! Ya tienes una estructura simple de documento html5 creada,por lo que ya sabes crear una página web mediante html5. Si quieres,puedes publicarla mediante Webmatrix o subir el archivo al servidormediante algún software FTP, yo te recomiendo FileZilla.Recuerda que se le pueden añadir muchos más elementos al documentohtml, como por ejemplo, etiquetas <div>, <sidebar>, <audio>, muchasmás secciones y artículos, un menú más complejo, más etiquetas metadentro de <head>... etc.

En los siguientes temas, te voy a enseñar a insertar en el documento unvídeo y a crear un formulario mediante html5.

32

Tema 6 Insertar vídeo / etiquetas <video> y <source>

Ya has aprendido a crear una página web mediante html5, pero solo llevatexto... parece un poco sosa, no? jeje!!!Bueno, pues para que te adentres un poco más en el mundo html, te voy aenseñar a introduciry reproducir un vídeo en el documento html5. Para hacer esto, vamos autilizar las etiquetas <video></video> y <source/>. Dichas etiquetas, lastienes que introducir donde quieres que se vea el vídeo, yo en este caso,lo quiero colocar en el segundo artículo, bajo el texto.

<!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 página</p>

</footer>

</body>

</html>

36

Cuyo resultado en la pantalla del dispositivo del usuario, sería este:

Parece complicado, pero no lo es, el único fragmento de código que heagregado a la estructura básica del ejemplo de documento html5, es este:

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

¿Quieres averiguar mejor como funciona?

En este tutorial, te voy a enseñar como tienes que utilizar las etiquetas37

<video> para insertar un vídeo en tu sitio web, utilizando html5. Vas aaprender a colocar controles a un vídeo con html5, a indicar si quieresque un vídeo insertado con html5, comience a reproducirseautomáticamente cuando la página web ha cargado, a colocar una imagende portada o poster para que se vea antes de que el vídeo hmtl5 seponga en marcha... y mucho más, espero que te guste el pequeño tutorialque te ofrezco.

Hasta hace poco tiempo, la manera más utilizada de insertar vídeos en unsitio web, era haciéndolo mediante flash o el código <iframe> de youtube.Poco a poco, las cosas van cambiando, y al parecer nuestro buen aliadohtml5, está finalmente ocupando su lugar correspondiente: el trono denuestro sitio web; esto me alegra. Es sumamente fácil insertar un vídeomediante html5 en un sitio web, las etiquetas <video> son muy útiles paranosotros.

Como ya sabrás (y si no lo sabes, te lo digo yo, jeje!!!), los vídeos debenestar representados principalmente por las etiquetas <video></video>siempre que estés creando o editando un sitio web mediante html5. Esdecir, para introducir un vídeo en tu sitio web, debes hacerlo entre estasetiquetas, como te explico en este tutorial:

<video></video>

Debes colocar el código html5 de inserción del vídeo, principalementeentre las etiquetas <body> y </body> de tu sitio web, justo donde quieresque aparezca éste. Por ejemplo, yo en este sitio web, quiero mostrar elvídeo html5 en la columna central izquierda; pues coloco el código deinserción html5 en ese lugar.

38

En definitiva, una estructura simple de sitio web creado en html5, al queacabamos de insertar un vídeo, podría quedar así:

<!DOCTYPE html>

<html lang="es"> <head> <meta charset="utf8" /> <title>Insertando video html5</title> </head> <body> <section> <video> <! Aquí va el vídeo > </video> </section> </body></html>

Ahora tenemos que añadir, la etiqueta <source/> dentro de <video>. Porlo tanto quedaría así:

<!DOCTYPE html>

<html lang="es"> <head> <meta charset="utf8" /> <title>Insertando video html5</title> </head> <body> <section>

39

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

Nota: se puede insertar el vídeo directamente dentro de <video>, sin la etiqueta <source> pero es mejorhacerlo así para seguir los estándares marcados por la W3C y que el "Markup validation service" de estaentidad, considere nuestro documento html5 por válido al analizarlo. "type", por ejemplo, no se aceptacomo válido ya que si se introduce directamente en <vídeo>, sale el siguiente mensaje de error al validarcódigo: Attribute type not allowed on element video at this point.

Muy bien, hasta aquí todo muy fácil, no? jeje!!! ok, pues seguimos con lofácil. Le vamos a dar un ancho y una altura a nuestro vídeo, además,vamos a añadir controles. Para el ancho utilizamos "width" y para la altura"height", por otro lado, para indicar que queremos que los controles seanvisibles, añadimos la palabra "controls". Nuestro código va quedando así:

<!DOCTYPE html>

<html lang="es"> <head> <meta charset="utf8" /> <title>Insertando video html5</title> </head> <body> <section> <video width="305" height="230" controls> <source/> </video> </section>

40

</body></html>

A continuación, vamos a añadir dentro de la etiqueta <source/> la rutahasta el vídeo o la dirección web de éste y vamos a indicar el tipo devídeo que es: utilizaremos "src" y "type". En "src" debes especificar laruta que se debe seguir hasta el vídeo o la dirección web en la que estáalojado el vídeo (ejemplo: src="videos/mivideo1.mp4"). El atributo "type",sirve para indicar el tipo de vídeo que queremos reproducir, podríaquedar así:

<!DOCTYPE html>

<html lang="es"> <head> <meta charset="utf8" /> <title>Insertando video html5</title> </head> <body> <section> <video width="305" height="230" controls> <source type="video/mp4"src="http://benidormexperineces.comli.com/mostrar%20y%20ocultar%20un%20div%20con%20jquery%20%20evento%20slidetoggle.mp4" /> </video> </section> </body></html>

Si lo has hecho todo vien, se debería ver un vídeo como el de esteejemplo de web html5, en tu sitio web.

41

http://www.google.com/url?q=http%3A%2F%2Fbenibeniprue.site50.net%2F&sa=D&sntz=1&usg=AFQjCNGlrEaBGB0oJ3pAJ4jqq9fcGwa_CA

¿Has visto que fácil? Se le pueden añadir varios atributos más, bastanteinteresantes y útiles. Por ejemplo, si introduces la palabra "autoplay"dentro de la etiqueta <video>, el vídeo comienza a reproducirseautomáticamente tras cargar la página. Aquí te muestro una lista conalgunos de esos atributos:

src sirve para indicar la dirección o ruta de carga del vídeo. autoplay el vídeo comienza a reproducirse automáticamente. controls los controles del vídeo hmtl5 son visibles. preload "auto/metadata/none" cargar todo el vídeo, cargar los

metadatos o no cargar nada. poster imagen que se verá antes de que comience la reproducción

del vídeo html5.Otra cosa, si sabes un poco de javascript, puedes controlar tu vídeo htmlmuy fácilmente. Mira esto:

<button onclick="document.getElementById('video1').play()">comenzar areproducir el video</button><button onclick="document.getElementById('video1').pause()">parar elvideo</button><button onclick="document.getElementById('video1').volume+=0.1">Subirvolumen</button> <buttononclick="document.getElementById('video1').volume=0.1">Bajarvolumen</button></div>

Hay mucho más sobre las etiquetas <video> y </video> de html5 y su uso,te invito a descubrirlo visitando este link sobre vídeos y html5.Tutorial extraido de Miopiblog: http://miopiblog.blogspot.com.es/

42

http://www.google.com/url?q=http%3A%2F%2Fwww.w3.org%2Fwiki%2FHTML%2FElements%2Fvideo&sa=D&sntz=1&usg=AFQjCNFzhAKBjM8sQFvcIlq3VWLHmoslqA

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

Tema 7 Crear formulario html5 / etiquetas<form></form>

Ahora que ya te has sumergido en el océano del lenguaje html, crear laestructura de un formulario mediante html5, no tiene que resultar una tareacomplicada para ti.Una estructura para un formulario creada mediante html5, se componebásicamente de las etiquetas: <form>, <fieldset>, <legend>, <label> y<input>.

Para que veas un ejemplo, te muestro este formulario creado mediantehtml5. El texto que aparece entre <! Texto > son comentarios,de esta manera es como se realizan comentarios dentro de undocumento html5, para que los navegadores no los lean.

<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="[email protected]" 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>Teléfono:</span>

<input type="tel" id="tel" placeholder="Número de teléfono"

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>

Añadiendo este formulario bajo el texto del tercer artículo del documentohtml5, se vería así:

44

Prueba a hacerlo tú, a ver que tal... aunque si quieres saber algo mássobre cómo crear formularios mediante html5, te recomiendo echar unvistazo al este tutorial que te ofrezco:

En este tutorial, te voy a explicar que es lo que tienes que hacer paracrear un formulario de contacto para sitio web, utilizando html5 parala estructura y CSS3 para el diseño o estilo del formulario. Para lograrque el formulario de contacto html5 funcione y envíe los datos,emplearemos una función php.

Para comenzar a crear nuestro formulario de contacto para sitio web,

45

mediante html5, vamos a comenzar por la estructura. La estructura delformulario de contacto html5 y CSS3, va a estar compuesta por: un<legend> o título del formulario, por un contenedor o <fieldset>, lasetiquetas <form> que corresponden al propio formulario, y varioselementos <label> en cuyo interior estarán los <input> (recuadros dondeel usuario introduce sus datos).

Por lo tanto, nuestro html para el formulario de contacto quedaría así:

<fieldset id="contmiformu"> <! Título > <legend>Contacto:</legend> <! Comienza el formulario > <form id="miformu" action="enviarform.php" method="post" > <! inputs y label > <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> <inputtype="text" id="apellidos" name="apellidos" placeholder="Apellidos"required="required" ></label></p> <p><label class="label" ><span>Email:</span> <input type="email"id="email" name="email" placeholder="[email protected]"required="required" ></label></p> <p><label class="label" ><span>¿Sitio web?:</span> <inputtype="url" id="url" placeholder="http://asturver.com" name="web"></label></p> <p><label class="label" ><span>Teléfono:</span> <inputtype="tel" id="tel" placeholder="Número de teléfono" name="telefono"></label></p> <p><label class="label" ><span>Comentarios:</span> <textarea

46

id="comentarios" name="comentarios" placeholder="Escribe aquí"cols="17" rows="5" maxlength="1000"></textarea></label></p> <! Botón de enviar > <p><input class="submit" type="submit" value="Enviar" /><p> </form> </fieldset>

Te explico un poco lo que he creado:

1. " <fieldset id="contmiformu">2. <! Título >3. <legend>Contacto:</legend>" Este fragmento de código

crea, o mejor dicho, abre el contenedor o "fieldset" y hace visible untítulo para el formulario, en este caso: "Contacto:".

4. " <! Comienza el formulario >5. <form id="miformu" action="enviarform.php" method="post" >"

Abrimos el elemento <form> o formulario, en cuyo interior vansituados los <input> y <label>. Como puedes observar, he asignadoun id="", para identificarlo, action="" que hace referencia a la funciónphp que vamos a utilizar para enviar dicho formulario(enviarform.php) y el method="", en este caso "post".

6. "<! inputs y label >7. <p><label class="label" ><span>Nombre:</span> <input

type="text" id="nombre" name="nombre" placeholder="Escribe tunombre" required="required" autofocus ></label></p>" loselementos <label> son en los que introducimos el enunciado quequeremos que tengan los <input>, y los propios <input>, que son loscuadros de texto que el usuario rellena con sus datos. Dentro delelemento <input> se pueden especificar varios atributos, en estecaso hemos especificado: "required" (requerido), "autofocus"

47

(gracias a este atributo este elemento <input> sale como el "primeroa rellenar" siempre), type="" (el tipo de input), id="" (establece unaidentidad), name="" (establece una identidad que después nos sirvepara la función php), placeholder="" (texto que sale escrito pordefecto dentro del input).

8. "<p><input class="submit" type="submit" value="Enviar" /><p>" Botón de enviar.

Si lo has hecho todo bien, en tu sitio web tendría que verse esto:

Parece que nuestro formulario de contacto está un poco soso, no? jeje!!!no importa, vamos a darle un poco de estilo. Crea una hoja de estilosCSS y añade un link a ésta entre las secciones <head> y </head>, de tusitio web, o añade los siguientes estilos CSS3 a tu hoja de estilos.También puedes introducir el código para los estilos del formulario decontacto, entre las etiquetas <style type="text/css"> y </style>, parainsertarlo en tu sitio web:

/* estilos para el título */

#contmiformu legend margin: 0 auto; fontsize: 2em;

48

fontweight: bold;

/* estilos para el contenedor */

#contmiformu width: 250px; border: 0; padding: 3px;

/* estilos para el formulario */

#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, left bottom, left top, colorstop(0.47, rgb(192,204,20)),

49

colorstop(0.68, rgb(91,240,126)));borderwidth: 2px;bordercolor: #26600c;borderstyle: solid;mozborderradius: 15px 15px 15px 15px;webkitborderradius: 15px 15px 15px 15px;borderradius: 15px 15px 15px 15px;

#miformu label display: block; margin:0;

#miformu label span display: block; marginleft: 7px;

/* estilos para los input y area de texto */

#miformu label input marginleft: 40px; margintop: 5px; paddingleft: 3px; bordercolor: #ff6a00; moztransition: all .25s; webkittransition: all .25s; otransition: all .25s; transition: all .25s;

50

#miformu label textarea marginleft: 40px; margintop: 5px; paddingleft: 3px; bordercolor: #ff6a00; moztransition: all .25s; webkittransition: all .25s; otransition: all .25s; transition: all .25s;

/* efectos para los input y area de texto */

#miformu label input:focus, #miformu label textarea:focus background: #fff; bordercolor: #0000FF; boxshadow: 0 0 4px #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;

/* estilos para boton de envío */

#miformu .submit:hover padding: 3px 5px; backgroundcolor: #ebe7e7; color: #0000FF;

Vamos a ver como tendría que quedar el formulario de contacto html5diseñado con CSS3 finalmente, visto con el navegador Google Chrome,por ejemplo:

52

Parece que ahora se ve algo mejor. En internet explorer se ve algodiferente y se puede mejorar algo el diseño, pero en la mayoría denavegadores modernos se ve exactamente así, como en la imagen. ¿tegusta? espero que sí, no obstante, recuerda que puedes personalizar losestilos modificando el CSS.

Aún nos falta algo muy importante; la función php para enviar los datosdel formulario de contacto hmtl5. Crea un nuevo documento .php,copia este código en su interior, personalízalo con tu dirección de correo,tus propias frases... etc, y gúardalo en el directorio raíz de tu sitio web conel nombre: "enviarform.php". Una vez lo tengas, súbelo a tu servidor con elresto de archivos.

53

<?php//Importamos los datos del formulario@$nombre = addslashes($_POST['nombre']);@$apellidos = addslashes($_POST['apellidos']);@$email = addslashes($_POST['email']);@$web = addslashes($_POST['web']);@$mensaje = addslashes($_POST['comentarios']);

//Preparo el correo$cabecemail = "From: $email\n" . "ReplyTo: $email\n";$asunto = "Mensaje desde el formulario de contacto"; //asunto delmensaje$email_to = "[email protected]"; //cambiar por tu email$contenido = "$nombre ha enviado un mensaje desde el formulario decontacto, estos son sus datos:". "\n". "Nombre: $nombre\n". "Apellidos: $apellidos\n". "Email: $email\n". "Sitio Web: $web\n". "Comentarios: $mensaje\n". "\n";

//Enviamos el correoif (@mail($email_to, $asunto ,$contenido ,$cabecemail ))

//Si el mensaje se envía muestra una frasedie("Gracias, hemos recibido sus datos correctamente.");else

//Si algo falla, sale error

54

die("Error: No hemos recibido sus datos, inténtelo más tarde.");?>

Muy bien, supongo que hasta el momento no ha sido muy difícil, no?pues... ya hemos terminado, jeje!!! Ya tienes creado tu formulario decontacto, realizado con html5 y diseñado con CSS3.

Una cosa más: este formulario realiza la validación correctamentemediante html5 en los navegadores modernos, pero no en otros como IEni en dispositivos móviles.Para solucionar este problema, y que nuestro formulario de contactofuncione correctamente en todos los navegadores y en los dispositivosandroid, introduce el siguiente código entre las etiquetas <head> y</head> del sitio web donde vaya a ir situado el formulario de contactohtml5:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <scriptsrc="http://minuevaprueba.webuda.com/jquery.h5formcustom.js"></script>

<script> $(document).ready(function() $('#miformu').h5form(); );</script>

55

Este código javascript, hace uso del framework jQuery y de un plugin paravalidar formularios con jQuery, conocido como jquery.h5form. Si sabeshacerlo, descárgalo y súbelo a tu propio servidor en vez de utilizar"minuevaprueba.webuda.com/jquery.h5formcustom.js", así nunca dejaráde funcionar, seguro.También puedes agregar estilos a las etiquetas de error y demás delplugin, para ello visita este link:https://github.com/rapidexp/jqueryh5form/blob/master/jquery.h5form2.8.0/css/jquery.h5form2.8.0.css

Bueno, pues nada, puedes ver este mismo ejemplo funcionando si visitaseste subdominio de pruebas, en el que te muestro el formulario html5 yCSS3 que hemos construido, funcionando. Por cierto, en mi androidfunciona perfectamente.

Si quieres, puedes descargar todos los códigos para el formulario decontacto html5 de este ejemplo, visitando el link. Una cosa: para editar elarchivo index, tendrás que utilizar un programa o editor que soporte html5,si no lo tienes, puedes utilizar el bloc de notas de windows. No obstante,también te facilito el archivo index en versión .txt para que puedas editarlofácilmente (este archivo .txt no es necesario subirlo al servidor).

No te olvides de seguirme en las redes sociales o de suscribirte a minewsletter. Si lo haces, estarás siempre al día sobre nuevasactualizaciones y publicaciones en Miopiblog.

Tutorial extraido de Miopiblog: http://miopiblog.blogspot.com.es/

56

http://www.google.com/url?q=http%3A%2F%2Fwww.rapidexp.com%2Fh5form%2F&sa=D&sntz=1&usg=AFQjCNHpTNYAtDi_NK3aV225StY-ljjKIg

http://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Frapidexp%2Fjquery-h5form%2Fblob%2Fmaster%2Fjquery.h5form-2.8.0%2Fcss%2Fjquery.h5form-2.8.0.css&sa=D&sntz=1&usg=AFQjCNGSscZTw1-XU0bGJOvsQLWHtefFew

http://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Frapidexp%2Fjquery-h5form%2Fblob%2Fmaster%2Fjquery.h5form-2.8.0%2Fcss%2Fjquery.h5form-2.8.0.css&sa=D&sntz=1&usg=AFQjCNGSscZTw1-XU0bGJOvsQLWHtefFew

http://www.google.com/url?q=http%3A%2F%2Fminuevaprueba.webuda.com%2F&sa=D&sntz=1&usg=AFQjCNHOKROOE0RrDNdBB5aLpZSR6damEg

http://www.google.com/url?q=http%3A%2F%2Fminuevaprueba.webuda.com%2F&sa=D&sntz=1&usg=AFQjCNHOKROOE0RrDNdBB5aLpZSR6damEg

http://www.google.com/url?q=http%3A%2F%2Fminuevaprueba.webuda.com%2Fenviarform.zip&sa=D&sntz=1&usg=AFQjCNEbgV8yoB7SdGiqxt8-R237rQQ6Yw




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

Conclusión

Html5, es un lenguaje de programación bastante extenso. En este libro teinvito a comenzar a practicar y aprender html, enseñándote a formar unaestructura básica para página web, mediante html5. Lo que te muestro, tansolo es una pequeña parte de html5, ya que su mundo es mucho másamplio.

Te animo a descubrir todo lo que puedes ser capaz de hacer utilizandohtml5 para crear tus proyectos. Aprender es necesario, y yo te ayudogratis. Si te apetece y quieres seguir aprendiendo, te recomiendo pasartepor Miopiblog, mi blog personal.

57

http://miopiblog.blogspot.com.es/search/label/html5

Agradecimientos / Dedicatoria

Me gustaría agradecer la creación de este libro a todas las personas yentidades que, mediante foros y redes sociales, se han prestado aofrecerme ayuda durante mis años de aprendizaje y me lo han puestotodo mucho más fácil.

Para el último lugar, dejo los agradecimientos a google. Se los merecepor estar ahí y poner al alcance de todos los usuarios la información quenosotros, los webmaster, le queremos transmitir a éstos.

Gracias de nuevo, de verdad: GRACIASAtentamente: Antonio Menchón García.

© Todos los derechos reservados.

59

Introducción a Html5 - ebook gratuito

Documents

Transcript of Introducción a Html5 - ebook gratuito