HTML 5 1. Introducción HTML5 es el lenguaje de etiquetas que permite diseñar documentos web estáticos la cual ofrece (a diferencia de las versiones anteriores) un conjunto de funciones que permitirá dar una nueva experiencia en el diseño WEB: Semántica: Mejora en la distribución de los elementos web dando precisión al contenido Conectividad: Permite comunicarse con un servidor WEB de manera ágil, sin consumir muchas capacidades. Servicio local: Permite navegar por un sitio WEB sin necesidad de estar en línea (ejecución local desde el lado del cliente) Multimedia: Permite asignar archivos de videos o música con una sola etiqueta de manera sencilla Alto Rendimiento: Proporciona una mayor optimización con respecto a la velocidad usada en el hardware del lado del cliente Multiplataforma: Permite visualizar las páginas WEB en diferentes dispositivos con la misma calidad adecuándose a la resolución de pantalla de los mismos (nivel responsivo) 2. Nuevos Conceptos Con respecto a la Estructura: HTML5 presenta nuevas etiquetas que mejoran la experiencia en el desarrollo de documentos WEB. Esta nueva versión presenta un nuevo orden en los elementos; basado en seis etiquetas como la estructura principal de una página web: header, nav, article, section, aside y footer, logrando un aumento en el dinamismo de una página web dentro de su estructura estática natural.
Gráficos canvas: Aunque Canvas ya estaba implementado en las versiones anteriores de HTML, en HTML5 se mejora su uso y propone nuevas funciones teniendo como base los scrpts de JavaScript. Audio y Video: HTML5 incorpora un reproductor multimedia para ejecutar videos y música en línea cuya funcionalidad presenta menos código que en versiones anteriores haciendo más sencillo y amigable la manera implementar audio y video en la web. Además no necesita de la instalación de ningún plugin para su uso. Geolocalización: La geolocalización permite determinar desde que lugar se esta visualizando un sitio web (gracias a los sistemas GPS). Esto permite al usuario tener una rápida ubicación de la empresa que proporciona el sitio web que se esta visitando, lo que da confianza al cliente sobre todo si es un sitio web en donde se realizan compras en línea.
3. ESTRUCTURA DE UNA ETIQUETA EN HTML5 Etiqueta o tag definidos por el lenguaje HTML5 Contenido Web basado en la etiqueta <Etiqueta> </Etiqueta> Apertura o inicio de etiqueta Fin o cierre de etiqueta Características de las Etiquetas: Toda etiqueta en HTML5 se encuentra estandarizada por la W3C (comunidad Internacional que desarrolla estándares que aseguran el crecimiento de la Web) Las etiquetas no distinguen las mayúsculas de las minúsculas, por lo tanto no genera ningún error el escribir una etiqueta con mayúsculas o minúsculas Casi siempre se utilizan dos etiquetas, una de apertura y una de cerradura
Las etiquetas obsoletas de las versiones anteriores a HTML5 no han sido deshabilitadas por los navegadores web actuales, por lo que podemos seguir utilizándolas, sin embargo HTML5 promueve siempre el uso de las nuevas etiquetas así como de los estilos CSS3. Etiquetas obsoletas para HTML5 ETIQUETA OBSOLETA DESCRIPCIÓN ETIQUETA EN HTML5 applet Permite insertar un script insertado por algún lenguaje de programación, como por ejemplo Java e integrarlo a Object html basefont Determina el tamaño de la fuente predeterminado CSS3 big Muestra un texto en tamaño grande CSS3 center Centra un elemento específico CSS3 dir Inserta una lista de directorios UL font Establece el estilo de la fuente de un texto CSS3 frame Inserta un marco web --- frameset Inserta un grupo de frames o marcos web --- strike Muestra el texto que contiene el estilo tachado CSS3 tt Muestra el texto como teletype o espaciado simple CSS3 u Muestra el texto como subrayado CSS3 xmp Define un texto preformateado Pre El uso de estilos CSS3 ha hecho que muchas etiquetas HTML pierdan sentido en su uso. El CSS3 presenta el mismo aspecto pero de manera más profesional con ciertas ventajas para ello. Etiquetas que cambian su significado Aunque la mayoría de las etiquetas en HTML5 trabajan de la misma forma que en las versiones anteriores, existen algunas etiquetas que se han reacomodado en cuanto a su funcionalidad: Etiqueta small: Se utiliza para hacer referencia a condiciones legales, por ejemplo de copyright. <small> Todos los derechos reservados -Copyright @2015. </small>
Etiqueta b: Se emplea cuando deseamos resaltar algún aspecto de un párrafo aunque es mejor usar encabezados (h1...h6), em, strong, o estilos CSS3 en función del tipo de información que se desee resaltar. <p> Solo podrán hacer examen aquellos alumnos que hayan entregado su ficha de pago en <b> las oficinas de secretaría académica </b> en las fechas indicadas </p> Etiqueta i: La etiqueta i permite aplicar el estilo cursiva a un texto. Se utiliza para resaltar nombres propios, una frase en otro idioma, una idea o un pensamiento. En otros casos se suele usar los estilos CSS3. <p> Solo podrán hacer examen aquellos alumnos que hayan entregado su ficha de pago en <i> las oficinas de secretaría académica </i> en las fechas indicadas </p> Etiqueta s: La etiqueta s aplica un estilo tachado a un determinado texto el cual podría indicar que un párrafo no es recomendado o está obsoleto. <p>visítenos</p> <p> <s> dirección anterior: Av. Lima 549 </s> <p> <p> <strong> Nueva Dirección: Jr. Cuzco 120 </strong> </p> Atributos de una etiqueta en HTML5 Un atributo es cualesquiera opciones adicionales que puede tener una etiqueta, por ejemplo asignar un estilo o definir un nombre a la etiqueta. Apertura de etiqueta Contenido Cierre de etiqueta <p class="titulo"> Hola Mundo...!!</p> Nombre Valor Atributo
Atributo id: Permite asignar un identificador único a un elemento contenido en el script de una página web, lo cual es analizado por el SGML (Standar Generalized Markup Language). Por ejemplo: <p id="email"> mtorres@queue-systems.com </p> <p id="celular"> (55) 222-5387612 </p> Atributo class: Se puede usar como selector para hojas de estilo, en especial cuando se desea asignar información de estilo a un conjunto de elementos web. Procedimiento: 1. Se define un estilo: <style> p.info {color: green} p.advertencia {color:blue} p.error {color:red} </style> 2. Se aplica el estilo: <p class="info"> Mensaje de información </p> <p class="advertencia"> Mensaje de advertencia </p> <p class="error"> Mensaje de error </p> Atributo title: Muestra un mensaje o información de apoyo al usuario sobre un determinado elemento web cuando el usuario posiciona el puntero del mouse sobre dicho elemento. Por ejemplo: <a href="mailto:comentarios@queue-systems.com" title="servicio de atención al cliente"> remítanos sus comentarios </a> 4. ESPECIFICACIÓN DOCTYPE La declaración DOCTYPE le informa al navegador WEB con qué versión HTML está escrita dicha página, basándose en la especificación DTD (Document Type Definition) que es en donde se definen las reglas utilizadas por HTML5 en un documento web y será interpretado correctamente por el servidor web. Su formato es: <!DOCTYPE html>.
Las versiones anteriores a HTML5 utilizaban el siguiente formato: Doctype HTML 4.01 strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/tr/html4/strict.dtd> Doctype HTML 4.01 transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/tr/html4/loose.dtd> 5. LA ETIQUETA HEAD Es la etiqueta que permite definir la cabecera del documento WEB y normalmente contiene información que no es visible para el usuario. HEAD pertenece a la estructura principal de una página web y debe ser colocada antes de la etiqueta <BODY> y dentro de la etiqueta <HTML>. <!DOCTYPE html> <html> <head> Cabecera del documento </head> <body> Cuerpo del Documento </body> </html>
Lo que puede contener el bloque HEAD puede ser: <title> Libro HTML 5 </title> <META charset="utf-8" /> <LINK rel="stylesheet" href="estilo.css" /> Donde: title: Muestra el título de la ventana al ejecutar el documento web en el navegador META charset="utf-8": Define el uso de tildes y eñes en el documento web LINK: Permite asociar un archivo al documento WEB actual, por ejemplo para asociar un documento web a un archivo CSS, tendríamos que hacer lo siguiente: <LINK href="estilo.css" rel="stylesheet" /> 6. LA ETIQUETA BODY Es el espacio de trabajo que contiene todo lo visible en un documento HTML a la vista del usuario; tal como texto, hipervínculos, imágenes, tablas, listas y todo lo que se pueda colocar en un documento web. La etiqueta BODY puede contener: Elementos estándares de HTML5 como párrafos, formularios, imágenes, tablas, listas, etc. Enlaces o ligas a otras páginas web Scripts de los lenguajes de programación tales como PHP, Java, ASP, JSP, etc. El contenido de BODY ha sido mejorado en HTML5 haciéndolo semántico. Las etiquetas relevantes de HTML5 en BODY son:
HEADER: Es la etiqueta que conforma la cabecera de una sección o artículo de un documento WEB basado en HTML5. NAV: Sirve para incluir menús de navegación en diferentes partes de nuestro sitio SECTION: Permite crear secciones dentro de las demás etiquetas, organizando de mejor manera la información que se muestre en un documento WEB. ARTICLE: Un artículo es parecido a una sección en la cual podríamos colocar noticias, entradas de un blog, trabajo de un portafolio o un contenido dinámico agregado con cierta frecuencia. ASIDE: Es similar a una sección con la diferencia que se puede implementar como una barra lateral. FOOTER: Es el pie de página de una sección, artículo, etc.
El script de una página WEB básica con HTML5 es el siguiente: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title> Estructura básica de una página web en HTML5 </title> </head> <body> <header> <nav> <a href="opcion1.html"> Opción 1 </a> <a href="opcion2.html"> Opción 2 </a> <a href="opcion3.html"> Opción 3 </a> <a href="opcion4.html"> Opción 4 </a> </nav> </header> <aside> <p> Contenido aside </p> </aside> <section> <p> división de contenidos </p> <article> <h1> Nombre del artículo </h1> <p> Contenido del artículo </p> </article> </section> <footer> <p> Todos los Derechos Reservados </p> </footer> </body> </html>
7. COMENTARIOS EN HTML5 Un comentario permite asignar mensajes en un documento WEB con el fin de recordar algunos detalles del código, o simplemente mostrar un texto en cualquier parte del documento HTML5 que será ignorado por el navegador. El formato para asignar un comentario es: <!-- Comentario de una línea --> <!-- Comentario de varias líneas -->