{"id":39905,"date":"2023-08-24T12:49:53","date_gmt":"2023-08-24T17:49:53","guid":{"rendered":"https:\/\/niixer.com\/?p=39905"},"modified":"2023-09-07T12:45:01","modified_gmt":"2023-09-07T17:45:01","slug":"html-5","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2023\/08\/24\/html-5\/","title":{"rendered":"HTML 5\u00a0"},"content":{"rendered":"\n

\u00bfQu\u00e9 es HTML 5?<\/strong> <\/h3>\n\n\n\n

HyperText Markup language o m\u00e1s conocido como HTML es un lenguaje de marcado de hipertexto lo cual tiene varias versiones como: HTML 2.0, HTML 3.2, HTML 4.0, HTML 4.01 y el HTML5 que es la \u00faltima versi\u00f3n y en el momento que se lanz\u00f3 el HTML 5 los navegadores mas grandes del mundo quisieron revolucionar con esta nueva tecnolog\u00eda que estaba rompiendo el mercado, as\u00ed que empezaron actualizar sus funciones como por ejemplo (Mozilla) presento Firefox 3<\/a><\/strong>, grandes compa\u00f1\u00edas como lo eran Google y Safari tardaron mucho en actualizar sus navegadores, HTML5 no es solo para sitios web, tambi\u00e9n son aplicaciones compatibles con navegadores y smartphones. <\/p>\n\n\n\n

\u00bfQu\u00e9 es HTML?<\/strong><\/h3>\n\n\n\n

Desde los inicios de Internet, HTML (Lenguaje de marcado de hipertexto) se ha consolidado como el lenguaje est\u00e1ndar para estructurar, combinar y proporcionar contenidos en la web, independientemente de la plataforma. A pesar de ello, el desarrollo de este lenguaje qued\u00f3 ineficaz tras la publicaci\u00f3n de HTML 4.01 en diciembre de 1999, a diferencia de Internet, que sigui\u00f3 desarroll\u00e1ndose. Navegar por Internet ya no es lo que era en el cambio de milenio. Adem\u00e1s de textos e im\u00e1genes, tambi\u00e9n hay elementos multimedia que hacen de Internet lo que es hoy, gracias al creciente inter\u00e9s por las ofertas m\u00f3viles.
En los \u00faltimos a\u00f1os, el uso moderno de Internet ha ido mucho m\u00e1s all\u00e1 del lenguaje del hipertexto. Las p\u00e1ginas web actuales dependen de muchos complementos para satisfacer las necesidades de los desarrolladores, editores y consumidores, lo que genera incompatibilidades y fallas de seguridad y, en este sentido, la quinta versi\u00f3n de HTML tiene la responsabilidad de acabar con esto. El 28 de octubre de 2014, el World Wide Web Consortium (W3C) lanz\u00f3 HTML5 como nuevo lenguaje WWW. Sin embargo, un gran n\u00famero de empresas de alojamiento web siguen invirtiendo en la versi\u00f3n anterior u otros est\u00e1ndares m\u00e1s antiguos como XHTML, aunque esto puede cambiar en un futuro pr\u00f3ximo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\u00bfCu\u00e1ndo se fund\u00f3 HTML 5?<\/strong><\/h3>\n\n\n\n

HTML5 fue fundada el 28 de octubre del a\u00f1o 2014, se ven\u00eda trabajando desde el a\u00f1o 2004, el proyecto fue fundado por el grupo de trabajo de W3C<\/a> tecnolog\u00eda de aplicaciones de hipertexto web, esta empresa decidi\u00f3 abandonar el proyecto despu\u00e9s de la publicaci\u00f3n de HTML 4.01 y se fij\u00f3 en el desarrollo de XHTML atreves de esto hubo mucho descontento en varias organizaciones de software y los proveedores de navegadores, luego se fund\u00f3 una comunidad de trabajo que adopto el nombre de Web HyperText Application Technology Working Group (WHATWG)<\/a> el cual se dedicaron solamente a desarrollar los est\u00e1ndares HTML e impulsaron la integraci\u00f3n de aplicaciones en el a\u00f1o 2006, as\u00ed que Ian Hickson <\/a>de Google termino el proyecto con la cooperaci\u00f3n WHATWG y saco al mercado la primera versi\u00f3n de HTML5.<\/p>\n\n\n\n

Ventajas de HTML 5<\/strong> <\/h3>\n\n\n\n

Para facilitar la estructura de los documentos HTML, existen nuevas etiquetas sem\u00e1nticas que reemplazan las etiquetas de versiones anteriores (p. ej.), que ayudaban a identificar cada bloque de p\u00e1ginas web. Este es el desarrollo m\u00e1s importante en HTML4 porque este tipo de etiqueta permite a los motores de b\u00fasqueda indexar una p\u00e1gina web con mayor precisi\u00f3n. Estos nuevos identificadores tambi\u00e9n ayudan a definir mejor la estructura y los componentes de la red y proporcionan informaci\u00f3n sobre su contenido y significado. HTML5 separa art\u00edculo, secci\u00f3n, v\u00eddeo, t\u00edtulo, etc. Esta \u00faltima versi\u00f3n de HTML es muy completa, ya que combina tres tecnolog\u00edas que son muy importantes a la hora de construir p\u00e1ginas web, como lo ser\u00edan: <\/p>\n\n\n\n

1.HTML  <\/p>\n\n\n\n

2. CSS <\/p>\n\n\n\n

3. JavaScript <\/p>\n\n\n\n

Estas tres tecnolog\u00edas tienen una funci\u00f3n muy importante dentro de una p\u00e1gina web como: HTML<\/a> sirve para construir la p\u00e1gina, CSS<\/a> ayuda a decorar la presentaci\u00f3n de la p\u00e1gina y JavaScript <\/a>ayuda agregar la funcionalidad a los elementos de HTML, y si buscas efectos o gr\u00e1ficos en nuestra p\u00e1gina web, tambi\u00e9n trae el CSS3<\/a>.<\/p>\n\n\n\n

HTML 5 tambi\u00e9n tiene un lenguaje, el cual es muy claro y ordenado, por lo tanto, ayuda a su f\u00e1cil aprendizaje, porque tiene varias opciones, la cual lo hacen muy completo, como crear aplicaciones web o incluir elementos complejos, como dibujos 3D directamente en el documento, y adem\u00e1s es compatible con Chrome, Firefox, Safari y Opera. <\/p>\n\n\n\n

Tambi\u00e9n Se pueden agregar audio y video usando etiquetas multimedia. Scalable Vector Graphics (SVG) est\u00e1 mejor integrado que los habituales como <object>, y adem\u00e1s cuenta con nuevos elementos que nos permiten dibujar sobre \u00e9l con una etiqueta. Algunos elementos que se repiten en la mayor\u00eda de p\u00e1ginas web son redefinidos, modificados o estandarizados. MathML<\/a> se puede utilizar para agregar f\u00f3rmulas matem\u00e1ticas.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Desventajas de HMTL 5<\/strong> <\/h3>\n\n\n\n

Las desventajas que tiene el HTML 5 son muy pocas como lo ser\u00eda: <\/p>\n\n\n\n

1. Tiene un formato de video el cual es predeterminado. <\/p>\n\n\n\n

2. Su proceso de dise\u00f1o llega a ser lento.<\/p>\n\n\n\n

3. Su lenguaje est\u00e1tico generan desventajas a la hora de usarlo.<\/p>\n\n\n\n

Siempre que se agrega un cambio o caracter\u00edstica a un sistema iOS, Android o Windows, la herramienta de desarrollador debe considerar o considerar el cambio y realizar los cambios necesarios en el c\u00f3digo. Esto significa que las herramientas de desarrollo m\u00f3vil multiplataforma siempre van por detr\u00e1s de los SDK oficiales.
Otras posibles desventajas incluyen:<\/p>\n\n\n\n

A veces, crear aplicaciones m\u00f3viles lleva tiempo porque los desarrolladores tienen que escribir c\u00f3digo para cada plataforma. porque trabajan en otro idioma; por lo tanto, la eficiencia del c\u00f3digo depende del recopilador. sucede que las t\u00e9cnicas de codificaci\u00f3n son ineficientes o el c\u00f3digo es redundante. Las diferencias en los tiempos de ejecuci\u00f3n de las plataformas a menudo causan dificultades al desarrollar aplicaciones m\u00f3viles para diferentes plataformas. El est\u00e1ndar HTML5 ha evolucionado en un per\u00edodo de tiempo relativamente corto, lo cual genera diferencias en la implementaci\u00f3n de propiedades CSS, etiquetas HTML y API de JavaScript. A veces, estas funciones funcionan de manera diferente en diferentes plataformas. Sin embargo, existen herramientas para resolver estos conflictos. A continuaci\u00f3n se presentan algunas ventajas y desventajas de las herramientas de desarrollo de aplicaciones m\u00f3viles multiplataforma basadas en HTML5. Es evidente que las ventajas superan con creces las desventajas. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Elementos estructurales<\/strong><\/h3>\n\n\n\n

A continuaci\u00f3n vamos a ver algunos elementos estructurales de HTML5 y su funci\u00f3n:<\/p>\n\n\n\n

<!DOCTYPE html> : Sirve para indicar que el documento est\u00e1 bajo el est\u00e1ndar de HTML5. <\/p>\n\n\n\n

<html> : Esto sirve para representa la ra\u00edz de un documento HTML y tambi\u00e9n sirve como contenedor para los dem\u00e1s elementos HTML, como <head> y <body>. El atributo Lang especifica el idioma del documento, lo que ayuda con la accesibilidad y el SEO.<\/p>\n\n\n\n

<head> : En su interior se incluye la colecci\u00f3n de metadatos sobre el documento, los enlaces a scripts y hojas de estilo.<\/p>\n\n\n\n

<title> : Este c\u00f3digo representa el t\u00edtulo del documento. Se muestra en la barra superior del navegador o en las pesta\u00f1as de p\u00e1gina.<\/p>\n\n\n\n

<link>: Sirve para enlazar documentos externos, por ejemplo CSS.<\/p>\n\n\n\n

<meta>: Este c\u00f3digo nos ayuda a definir los metadatos que no pueden ser definidos usando otro elemento HTML. <\/p>\n\n\n\n

<style> : El c\u00f3digo style ayuda para escribir CSS interno. Y as\u00ed decorar la p\u00e1gina.<\/p>\n\n\n\n

<script> : Nos ayuda a definir un script o mas conocido como un enlace hacia un script externo de JavaScript.<\/p>\n\n\n\n

Como podemos observa es aqu\u00ed los elementos estructurales de una pagina web como lo ser\u00eda: <head> lo cual ser\u00eda la cabecera de la p\u00e1gina, <body> que es en espa\u00f1ol cuerpo y por lo tanto tambi\u00e9n es el cuerpo de la p\u00e1gina y muchos m\u00e1s, la mayor\u00eda de c\u00f3digos est\u00e1n en el idioma ingles, as\u00ed que si te facilita el ingles podr\u00edas entender de una manera m\u00e1s f\u00e1cil.<\/p>\n\n\n\n

Elementos sem\u00e1nticos<\/strong><\/h3>\n\n\n\n

<body> : Escoge todo el contenido de un documento HTML. S\u00f3lo puede existir un elemento <body><\/code> en el documento.<\/p>\n\n\n\n

<section> : Nos ayuda a definir secciones de una web.<\/p>\n\n\n\n

<nav> : este c\u00f3digo nos facilita a etiquetar una secci\u00f3n que contiene un men\u00fa de navegaci\u00f3n.<\/p>\n\n\n\n

<article> :Ayuda a determinar secciones de contenido.<\/p>\n\n\n\n

<aside> : Ayuda a definir la barra lateral de una p\u00e1gina web.<\/p>\n\n\n\n

<h1> <h2> <h3> <h4> <h5> <h6> : Describe el tema de la secci\u00f3n seg\u00fan su orden. H1 es para usar texto grande y el H6 un texto m\u00e1s peque\u00f1o y as\u00ed va su orden.<\/p>\n\n\n\n

<header>: Es la cabecera de una web o de un elemento<\/p>\n\n\n\n

<footer>: Sirve para definir un pie de pagina o de alg\u00fan elemento.<\/p>\n\n\n\n

<address> : Ayuda especificar alguna secci\u00f3n que contenga informaci\u00f3n de contacto.<\/p>\n\n\n\n

<main>: Nos facilita la categorizaci\u00f3n del contenido principal del documento.<\/p>\n\n\n\n

Estos elementos que acabamos de ver es todo lo que se utiliza para poder formar una p\u00e1gina web de manera profesional. pero todav\u00eda faltar\u00eda el otro proceso que seria meter toda la informaci\u00f3n de manera correcta y en el orden correcto en la pagina con los c\u00f3digos requeridos y a continuaci\u00f3n hacer la decoraci\u00f3n de la pagina con CSS, el cual ser\u00eda el dise\u00f1o de la p\u00e1gina, pero no el dise\u00f1o estructural si no el dise\u00f1o gr\u00e1fico de la p\u00e1gina para as\u00ed de esta manera quede llamativa la p\u00e1gina web y por \u00faltimo ser\u00eda darle la funcionalidad con JavaScript que puede llegar a ser lo m\u00e1s complicado, en fin, si no dominas mucho el tema podr\u00edas tarda hasta 3 meses creando solo una secci\u00f3n de la p\u00e1gina web, s\u00f3lo el inicio de la p\u00e1gina y faltar\u00edan secciones como contacto, noticias entre otras y dependiendo tambi\u00e9n qu\u00e9 tipo de p\u00e1gina es.<\/p>\n\n\n\n

<\/p>\n\n\n\n

.<\/p>\n\n\n\n

<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n