En este artículo hacemos una introducción al HTML5 (HiperText Makage Language) Lenguaje de Marcas de Hipertexto. Ya tuvimos un capítulo dedicado en donde hablamos del cliente y el servidor web.
Si realmente quieres hacer proyectos espectaculares con tu placa de Arduino enfocados al IoT, debes conocer este tipo de lenguajes. Junto con CSS y JavaScript, HTML5 es la esencia del desarrollo web.
Indice de contenidos
¿Qué es el código HTML5?
Si queremos saber qué es HTML5 lo primero que tenemos que hacer es ir a un navegador ya sea Google Chrome, Firefox y el menos recomendado Internet Explorer. Sobre la página web que queremos ver el código, encima del fondo, pulsar el botón derecho y habrá alguna opción donde ponga mostrar el código.
En Chrome, el navegador recomendado desde Programarfacil, está la opción de Ver código fuente de la página.
Con esto podremos ver el código fuente de cualquier página. Recuerda que el único código que podemos ver a través de nuestro navegador es HTML5, CSS y JavaScript. Cualquier otro código del Backend como PHP, Java o C#, será interpretado por el servidor y traducido a estos lenguajes del Frontend.
Una página básica de HTML5 sería la siguiente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Título de la página, aparece en la pestaña del navegador.</title> </head> <body> <h1>Esto es un titulo</h1> <p>Esto es un parrafo. Aqui escribimos informacion.</p> <a href="https://programarfacil.com">Esto es un enlace a la web.</a> </body> </html> |
Si copias el código anterior, lo pegas en el Notepad de Windows, o cualquier otro editor de texto, y lo guardas con extensión .html o .htm podrás abrirlo en cualquier navegador. El se encargará de interpretar el HTML5 y mostrarte una página web.
En Chrome tenemos una segunda opción para ver el código fuente y además lo podemos modificar en el momento. Solo tenemos que ponernos encima de un elemento como un botón, una imagen o un enlace y pulsar el botón derecho de nuestro ratón. Dentro de las opciones seleccionamos Inspeccionar elemento.
Una vez pulsada esta opción se nos abre una pantalla donde podemos ver el código HTML5 y el CSS asociado. Como ya se ha comentado podemos cambiar el código y probar como quedaría. Podéis hacer la prueba por ejemplo con Google. Puedes cambiar el logo de google con tu logo :).
HTML5 y las etiquetas
Lo más importante dentro de este meta lenguaje, son las etiquetas. Ellas nos permitirán situar y colocar los diferentes componentes dentro de la página web. Te recomiendo que eches un vistazo a la web de referecia W3 School, donde encontrarás casi todas con ejemplos y una descripción.
Dentro del HTML tenemos muchas etiquetas. Ya has visto algunas de las más simples, en la web básica que he creado. Pero existen infinidad de ellas para usos diversos. Las más importantes son:
- <!DOCTYPE html>
Informa del tipo de documento, en este caso HTML. - <html></html>
Engloba todo el código de nuestra página. Es la etiqueta principal. - <head></head>
Indica que esto es la cabecera. Dentro de estas etiquetas se meterá información no visual salvo el título de la página. Aquí irían todos los enlaces a nuestros archivos CSS y Javascript aunque es recomendable cargar estos archivos al final de nuestro archivo HTML. Esto es debido a la optimización de la carga de nuestra web. - <title></title>
Título de la página. Es lo que aparece en la pestaña del navegador. - <body></body>
Quizás la etiqueta más importante que tiene HTML. Dentro de esta etiqueta vamos a meter todos los elementos visuales de nuestra web.
Dependerá de lo que quieras hacer en tu página web, deberá utilizar unas etiquetas u otras. Con estas etiquetas básias y alguna más, serás capaz de hacer un documento HTML perfectamente operativo.
Funcionalidades extra en HTML5 con atributos
Pero no solo de etiquetas vive la web, cada etiqueta tiene asociado unos atributos o propiedades que dan funcionalidad a cada una de ellas por ejemplo href. Si queremos poner un enlace lo haríamos de la siguiente manera.
|
1 |
<a href="https://programarfacil.com">Esto es un enlace a nuestra web.</a> |
El href nos está indicando donde apunta el enlace, en este caso a programarfacil.com, pero existen multitud de propiedades para cada etiqueta con una funcionalidad distinta como por ejemplo Id, src, class, etc…
Eventos lanzados desde una página web
Además de las propiedades o atributos, algunas etiquetas tienen eventos. Los eventos permiten a JavaScript ejecutar una determinada acción cuando se lanza. Supongamos que tenemos un botón (<button></button>) y queremos que cuando se pulse el botón se cambie el color de un párrafo.
Para hacer esto tenemos que insertar algo de código de JavaScript. Esto está fuera de este capítulo pero resulta interesante verlo para que veas su funcionalidad.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <p id="demo">Este texto cambia de color cuando se pulsa un botón.</p> <button onclick="cambiaColortexto('red')">Color rojo</button> <button onclick="cambiaColortexto('green')">Color verde</button> <button onclick="cambiaColortexto('blue')">Color azul</button> <script> function cambiaColortexto(color) { document.getElementById("demo").style.color = color; } </script> </body> </html> |
En el código anterior hemos hecho uso del atributo Id del elemento <p> para asignar un identificador único en el documento. Luego hemos creado tres botones cada uno de ellos con el evento onclick que llama a una función JavaScript (cambiaColorTexto).
Esta función JavaScript recibe un parámetro, color, que será el color que queremos asignar al texto de nuestro párrafo. Cada botón manda como parámetro un color red (rojo), green (verde) y blue (azul).
Cada vez que pulsemos uno, cambiará el color del texto de nuestro párrafo dependiendo del botón que hayamos pulsado y el color que tenga asignado. Como puedes ver esto se puede complicar todo lo que queramos y todavía no hemos metido nada de código del Backend :)
Existen frameworks de JavaScript que hacen el desarrollo de aplicaciones web con HTML y JavaScript algo muy sencillo. De todo esto hablaremos en siguientes artículos, después de ver las hojas de estilos CSS, pero para que los vayáis conociendo son jQuery y Angular.js.
Si queréis investigar más sobre etiquetas en HTML la mejor referencia es la que ya te he mencionado W3 Schools, donde encontrarás todas las etiquetas de HTML y sus atributos con muchos ejemplos. Sin duda alguna una referencia básica para programar con HTML.
¿Entornos de desarrollo para programar?
Hasta ahora te he enseñado como empezar con el HTML pero no hemos hablado del entorno de desarrollo (IDE). Para crear una página web solo nos hace falta un editor de textos como el Notepad.
Simplemente con eso podemos crear nuestra página web, pero hay herramientas más potentes que son gratuítas y nos facilitan la programación en entorno web. Os dejamos a continuación tres herramientas que son muy interesantes.
HTML5 como estándar del desarrollo web
Antes de comenzar a ver las la últimas novedades de HTML5, es importante conocer la organización o consorcio que se encarga de mantener el estándar, la W3C. Gracias a ellos se pueden ver las webs de igual manera en todos los navegadores o por lo menos se intenta.
Solo recordar que todos los navegadores en el mercado, deben cumplir el estándar HTML que dicta esta organización, pero no están obligados. Por ejemplo, Internet Explorer de Microsoft no cumplía dicho estándar y es más, tenían su propio lenguaje HTML5. Esto cambió a partir de la versión 5 de este navegador.
Para un programador es inviable programar una web para cada navegador, de aquí la importancia de un lenguaje estándar. Hace unos años esto ocurría con IE y Netscape. Existía una guerra entre estos dos gigantes para ver quien se llevaba el mercado de los navegadores y los mayores perjudicados fueron los usuarios.
En la actualidad esto está estandarizado y aunque existen todavía diferencias entre ellos, son las mínimas. Incluso IE empezó a cumplir dichos estándar con la versión 9. En W3C Validator puedes validar tu sitio web para comprobar si cumple con el estándar HTML5.
Estiquetas nuevas con HTML5
Con la llegada de HTML5 algunas de las etiquetas que se usaban en HTML4 fueron eliminadas del estándar. Esto no quiere decir que los navegadores han dejado de mostrarlas, las siguen mostrando sin ningún problema pero todas aquellas webs que no cumplan el estándar de HTML5 serán penalizadas de alguna manera.
Se han eliminado etiquetas que sobre todo estaban en desuso como <frame>, <font> y <center> debido a que estos elementos ya pueden ser modificados por las hojas de estilos CSS. Lo más importante en este cambio ha sido la incorporación de multitud de etiquetas y atributos. Entre todas ellas vamos a destacar unas cuantas.
- <header></header>
No confundir con la etiqueta <head> que aún se mantiene en HTML5. Esta etiqueta tiene un contenido semántico y describe lo que significa tanto para los navegadores como para los desarrolladores. - <footer></footer>
Igual que la cabecera pero para los pies de página o de documento. - <nav></nav>
Define un conjunto de enlaces de navegación. Realmente no hay diferencia de poner nav o no ponerlo en un conjunto de enlaces a simple vista pero, es muy importante situar todos los enlaces importantes o principales de nuestro web entre estas etiquetas. - <canvas></canvas>
Nos permite renderizar elementos 2D como líneas o figuras y modelos en 3D a través de JavaScript. - <audio></audio>
Con esta etiqueta podemos incrustar dentro de nuestra web archivos de audio. - <video></video>
Al igual que el audio pero para vídeo.
Ejemplo con un vídeo
A modo de ejemplo veremos como utilizar la etiqueta <video> dentro de una página web.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <video autoplay> <source src="https://pdlvimeocdn-a.akamaihd.net/43888/648/364804929.mp4?token2=1434544032_3b0ca67a5bd925bb8f8be2826c2ec29e&aksessionid=ba639424bb599ef5" type="video/mp4"> </video> </body> </html> |
Como ves en el ejemplo he incrustado un vídeo de una manera muy sencilla. Puedes compiar el código de ejemplo en el Notepad y lo guardarlo con la extensión .html o .htm. Si luego abres ese archivo en un navegador, verás el resultado ;).
Esta etiqueta es la utilizada en la actualidad por Youtube para mostrar sus videos, al igual que Vimeo. El uso de Adobe Flash ha caído debido a que es una tecnología poco amigable con los buscadores. El contenido Flash no se puede indexar por los motores de búsqueda.
W3C ha recogido todas las características de la web moderna y las han convertido en el estándar HTML5 para que los desarrolladores puedan trabajar de una manera más sencilla y los usuarios tengan una experiencia de usuario más óptima.
Si has llegado hasta aquí me gustaría recomendar otra entrada del blog, en el te enseño a montar un servidor web en Arduino con Ethernet Shield.
Gracias a Shutterstock por ceder los derechos de la imagen