{"id":1996,"date":"2023-11-25T08:48:04","date_gmt":"2023-11-25T11:48:04","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1996"},"modified":"2023-12-03T10:47:39","modified_gmt":"2023-12-03T13:47:39","slug":"capitulo-1-introduccion-a-html5","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-1-introduccion-a-html5\/","title":{"rendered":"Cap\u00edtulo 1: Introducci\u00f3n a HTML5"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 1.1: Historia de HTML y su Evoluci\u00f3n<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>HTML (Hypertext Markup Language)<\/em>&nbsp;es el lenguaje fundamental de la web. Desde su creaci\u00f3n en 1990 por Tim Berners-Lee, HTML ha evolucionado significativamente para adaptarse a las demandas cambiantes de la internet. La transici\u00f3n a HTML5 marc\u00f3 un hito importante en la evoluci\u00f3n de la web. A continuaci\u00f3n, exploraremos las etapas clave de esta evoluci\u00f3n:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML 1.0 (1993):<\/strong>&nbsp;La primera versi\u00f3n de HTML introdujo la idea de documentos hipertextuales y enlaces. Sin embargo, era bastante b\u00e1sica en t\u00e9rminos de estructura y dise\u00f1o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML 2.0 (1995):<\/strong>&nbsp;Esta versi\u00f3n incluy\u00f3 soporte para formularios y tablas, lo que permiti\u00f3 una mayor interacci\u00f3n en las p\u00e1ginas web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML 3.2 (1997):<\/strong>&nbsp;La adici\u00f3n de hojas de estilo en cascada (CSS) permiti\u00f3 un mejor control de la presentaci\u00f3n, y la web comenz\u00f3 a verse m\u00e1s profesional.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML 4.01 (1999):<\/strong>&nbsp;Esta versi\u00f3n trajo m\u00e1s mejoras de dise\u00f1o y presentaci\u00f3n. Tambi\u00e9n introdujo el modelo de programaci\u00f3n DOM (Document Object Model).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>XHTML (2000):<\/strong>&nbsp;XHTML combin\u00f3 las reglas de XML con HTML y promovi\u00f3 una estructura m\u00e1s rigurosa y una mejor separaci\u00f3n de contenido y presentaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML5 (2014):<\/strong>&nbsp;HTML5 fue un gran salto. Introdujo numerosas caracter\u00edsticas nuevas, incluyendo elementos sem\u00e1nticos, audio y video nativos, geolocalizaci\u00f3n y soporte para aplicaciones web progresivas (PWAs).<strong><br><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 1.2: Conceptos B\u00e1sicos de HTML5<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML5 es un lenguaje de marcado que se utiliza para estructurar el contenido de una p\u00e1gina web. A diferencia de sus predecesores, HTML5 se centra en la sem\u00e1ntica, lo que significa que los elementos tienen un significado intr\u00ednseco que describe su funci\u00f3n en la p\u00e1gina. A continuaci\u00f3n, algunos conceptos clave:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Elementos HTML:<\/strong>&nbsp;Los elementos son las etiquetas utilizadas para definir la estructura de una p\u00e1gina web. Comienzan con una etiqueta de apertura y terminan con una etiqueta de cierre. Por ejemplo:<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;Este es un encabezado&lt;\/h1&gt;\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;Este es un p\u00e1rrafo.&lt;\/p&gt;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Atributos:<\/strong>&nbsp;Los atributos proporcionan informaci\u00f3n adicional sobre los elementos HTML. Por ejemplo, el atributo \u00absrc\u00bb se utiliza en la etiqueta \u00abimg\u00bb para especificar la fuente de una imagen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src=\u00bbimagen.jpg\u00bb alt=\u00bbDescripci\u00f3n de la imagen\u00bb&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 1.3: Preparaci\u00f3n del Entorno de Desarrollo<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de sumergirse en la creaci\u00f3n de p\u00e1ginas web con HTML5, es esencial tener un entorno de desarrollo adecuado configurado. Esto incluye un editor de c\u00f3digo y un navegador web para visualizar tus p\u00e1ginas en tiempo real. Aqu\u00ed hay algunas recomendaciones para preparar tu entorno:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Editor de C\u00f3digo:<\/strong>&nbsp;Puedes utilizar una variedad de editores de c\u00f3digo para escribir HTML5, desde opciones gratuitas como Visual Studio Code, Atom o Sublime Text hasta soluciones m\u00e1s avanzadas como WebStorm. Estos editores ofrecen caracter\u00edsticas como resaltado de sintaxis y autocompletado para hacer tu codificaci\u00f3n m\u00e1s eficiente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Navegador Web:<\/strong>&nbsp;HTML5 es compatible con la mayor\u00eda de los navegadores modernos, como Google Chrome, Mozilla Firefox, Microsoft Edge y Safari. Aseg\u00farate de tener al menos uno de estos navegadores instalado para probar tus p\u00e1ginas web mientras las desarrollas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 1.4: Creaci\u00f3n de la Estructura B\u00e1sica de una P\u00e1gina Web<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La estructura b\u00e1sica de una p\u00e1gina web HTML5 consta de elementos esenciales que son cruciales para que un navegador pueda interpretar y mostrar correctamente tu contenido. A continuaci\u00f3n, te mostrar\u00e9 c\u00f3mo crear la estructura b\u00e1sica de una p\u00e1gina web:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html lang=\"es\">\r\n&lt;head>\r\n    &lt;meta charset=\"UTF-8\">\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    &lt;title>Mi Primera P\u00e1gina HTML5&lt;\/title>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;header>\r\n        &lt;h1>Bienvenido a mi p\u00e1gina web&lt;\/h1>\r\n    &lt;\/header>\r\n    &lt;nav>\r\n        &lt;ul>\r\n            &lt;li>&lt;a href=\"#\">Inicio&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Acerca de&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Contacto&lt;\/a>&lt;\/li>\r\n        &lt;\/ul>\r\n    &lt;\/nav>\r\n    &lt;main>\r\n        &lt;section>\r\n            &lt;h2>Sobre Nosotros&lt;\/h2>\r\n            &lt;p>Somos una empresa dedicada a...&lt;\/p>\r\n        &lt;\/section>\r\n        &lt;section>\r\n            &lt;h2>Nuestros Productos&lt;\/h2>\r\n            &lt;ul>\r\n                &lt;li>Producto 1&lt;\/li>\r\n                &lt;li>Producto 2&lt;\/li>\r\n                &lt;li>Producto 3&lt;\/li>\r\n            &lt;\/ul>\r\n        &lt;\/section>\r\n    &lt;\/main>\r\n    &lt;footer>\r\n        &lt;p>&amp;copy; 2023 Mi Empresa. Todos los derechos reservados.&lt;\/p>\r\n    &lt;\/footer>\r\n&lt;\/body>\r\n&lt;\/html>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A medida que avanzas en el estudio, aprender\u00e1s a agregar estilos, interactividad y contenido din\u00e1mico a tus p\u00e1ginas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Secci\u00f3n 1.1: Historia de HTML y su Evoluci\u00f3n HTML (Hypertext Markup Language)&nbsp;es el lenguaje fundamental de la web. Desde su creaci\u00f3n en 1990 por Tim Berners-Lee, HTML ha evolucionado significativamente para adaptarse a las demandas cambiantes de la internet. La transici\u00f3n a HTML5 marc\u00f3 un hito importante en la evoluci\u00f3n de la web. A continuaci\u00f3n, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2085,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[39],"tags":[],"class_list":["post-1996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Introduccion-a-HTML5.jpg",1000,665,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Introduccion-a-HTML5-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Introduccion-a-HTML5-300x200.jpg",300,200,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Introduccion-a-HTML5-768x511.jpg",768,511,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Introduccion-a-HTML5.jpg",1000,665,false],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Introduccion-a-HTML5.jpg",1000,665,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Introduccion-a-HTML5.jpg",1000,665,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Secci\u00f3n 1.1: Historia de HTML y su Evoluci\u00f3n HTML (Hypertext Markup Language)&nbsp;es el lenguaje fundamental de la web. Desde su creaci\u00f3n en 1990 por Tim Berners-Lee, HTML ha evolucionado significativamente para adaptarse a las demandas cambiantes de la internet. La transici\u00f3n a HTML5 marc\u00f3 un hito importante en la evoluci\u00f3n de la web. A continuaci\u00f3n,&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1996"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1996\/revisions"}],"predecessor-version":[{"id":1998,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1996\/revisions\/1998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/2085"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}