27. Desarrollo web con HTML5

Comenzamos con el desarrollo web, en el capítulo 27 vamos a ver como comenzar un desarrollo web con HTML5. Este capítulo está dentro de la serie de capítulos donde pretendemos hacer un proyecto del Internet de las Cosas con Arduino. Hemos creado una campaña en Twitter, #SacaLaPlacaDeLaCaja, nos gustaría que nos enviaras tus fotos y comentarios de proyectos con Arduino.Ya sabéis, para contactar con nosotros lo podéis hacer a través del formulario de contacto y si queréis estar al día podéis suscribiros a la lista de distribución. También nos podéis seguir en Twitter.En este capítulo hacemos una introducción al HTML (HiperText Makage Language) Lenguaje de Marcas de Hipertexto. Ya tuvimos un capítulo dedicado en donde hablamos del cliente y el servidor web. Si queremos saber qué es HTML lo primero que tenemos que hacer es ir a un navegador ya sea Google Chrome, Firefox y el menos recomendado Internet Explorer y sobre la página web que queremos ver el código y encima del fondo, pulsar 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.ver-codigo-fuente-htmlCon esto podremos ver el código fuente de cualquier página. Recordar que el único código que podemos ver a través de nuestro navegador es HTML, CSS y JavaScript. Cualquier otro código del Backend será interpretado por el servidor y traducido a estos lenguajes del Frontend. Una página básica de HTML sería la siguiente.Título de la página, aparece en la pestaña del navegador.Esto es un títuloEsto es un párrafo. Aquí escribimos información.Esto es un enlace a nuestra web.Si copias el código anterior, lo pegas en el Notepad de Windows y lo guardas con extensión .html o .htm podrás abrirlo en cualquier navegador y verás como interpreta el código.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.inspeccionar-elemento-htmlUna vez pulsada esta opción se nos abre una pantalla donde podemos ver el código HTML 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, nosotros lo hemos hecho, hemos puesto nuestro logo en la página inicial de su buscador y éste es el resultado. Dentro del HTML tenemos muchas etiquetas. Ya hemos visto algunas en la página web simple que os hemos mostrado, pero existen infinidad de ellas para usos diversos. Las más importantes son:Informa del tipo de documento, en este caso HTML.Engloba todo el código de nuestra página. Es la etiqueta principal.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.Título de la página. Es lo que aparece en la pestaña del navegador.Quizás la etiqueta más importante que tiene HTML. Dentro de esta etiqueta vamos a meter todos los elementos visuales de nuestra web.Con estas etiquetas y alguna más somos capaces de hacer un documento HTML perfectamente operativo. 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.Esto es un enlace a nuestra web.El href nos...