{"id":6761,"date":"2023-09-30T00:04:43","date_gmt":"2023-09-30T06:04:43","guid":{"rendered":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/?p=6761"},"modified":"2023-11-24T18:49:42","modified_gmt":"2023-11-25T00:49:42","slug":"propuesta-de-seleccion-y-clasificacion-de-etiquetas-basicas-para-el-aprendizaje-inicial-de-html-5","status":"publish","type":"post","link":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/propuesta-de-seleccion-y-clasificacion-de-etiquetas-basicas-para-el-aprendizaje-inicial-de-html-5\/","title":{"rendered":"Propuesta de selecci\u00f3n y clasificaci\u00f3n de etiquetas b\u00e1sicas para el aprendizaje inicial de HTML 5"},"content":{"rendered":"

La propuesta presentada en este art\u00edculo es el resultado del proceso inicial del desarrollo del sitio Web \u201cGu\u00eda b\u00e1sica HTML5\u201d, impulsada por el reto que representa abordar el aprendizaje de HTML para quienes comienzan a adentrarse en el estudio de las tecnolog\u00edas Web. Para ello, se identific\u00f3 la necesidad de contar con un base de conocimiento simplificada y estructurada como referencia inicial. En este sentido, se plantea una selecci\u00f3n de etiquetas b\u00e1sicas HTML clasificadas en grupos tem\u00e1ticos seg\u00fan su funci\u00f3n y tipolog\u00eda, de manera que sean f\u00e1cilmente identificables por personas sin conocimientos previos.<\/span><\/p>\n

Palabras clave: HTML, b\u00e1sico, etiquetas, aprendizaje.<\/span><\/p>\n

Abstract<\/em><\/span><\/p>\n

The proposal presented in this article is the result of the initial development process of the \u00abHTML5 Basic Guide\u00bb website, driven by the challenge of learning HTML for those who are just starting to learn about Web technologies. As an initial reference, the need for a simplified and structured knowledge base was identified. Therefore, a selection of basic HTML tags classified in thematic groups according to their function and typology is proposed, so as to be easily identifiable by people with no previous knowledge.<\/em><\/span><\/p>\n

Keywords: HTML, basic, tags, learning.<\/em><\/span><\/p>\n

Ra tsapu<\/em><\/strong>\u0337<\/em><\/strong> ts\u2019ike j\u00f1aa*<\/em><\/strong><\/span><\/p>\n

Ne s\u2019e<\/em>\u0337<\/em>ngua ra nzho<\/em>\u0337<\/em>o kja ne un kja ne tsjapu<\/em>\u0337<\/em> na joo gi kjobu k\u2019a pju<\/em>\u0337<\/em>ru<\/em>\u0337<\/em> gi ra tee gi k\u2019a b\u2019u<\/em>\u0337<\/em>b\u2019u<\/em>\u0337<\/em> Web \u201ctsju<\/em>\u0337<\/em>jnu<\/em>\u0337<\/em> tee dya ze<\/em>\u0337<\/em>zhi HTML5\u201d, ra d\u2019aku porka ne reto pje ndajmu chje<\/em>\u0337<\/em>bi ne k\u2019o ra mba<\/em>\u0331<\/em>ra gi HTML mbara kjo ngeje yo mbu<\/em>\u0337<\/em>ru nda pjotu<\/em>\u0337<\/em> kja ne jyod\u2019u<\/em>\u0337<\/em> \u00f1\u2019iji gi yo tecnolog\u00eda Web. Mbara ngeze, na pa<\/em>\u0331<\/em>ra<\/em>\u0331<\/em> ne ni jyod\u2019u gi pezhe ko ndaja tjujnu<\/em>\u0337<\/em> gi ndamba<\/em>\u0337<\/em>ra dyu<\/em>\u0337<\/em>nu<\/em>\u0337<\/em> \u00f1e ja ba kjaa jange pjot\u2019u<\/em>\u0337<\/em> j\u00f1aa mbu<\/em>\u0337<\/em>ru<\/em>\u0337<\/em>. Kja na pes\u2019i pje\u00f1e na mamu<\/em>\u0337<\/em> ndaja juajnu<\/em>\u0337<\/em> gi kjobu dya ze<\/em>\u0337<\/em>zhi HTML jmanda kja jmuru<\/em>\u0337<\/em> ts\u2019ij\u00f1a po nge na kjak\u2019u<\/em>\u0337<\/em> tje\u00f1e \u00f1e b\u2019ezo, gi a kjanu pje ngeje dya ze<\/em>\u0337<\/em>zhi pa<\/em>\u0331<\/em>ra porka ntee na ndamba<\/em>\u0337<\/em>ra ma jingua.<\/em><\/span><\/p>\n

J\u00f1a\u2019a na joo:<\/em><\/strong> HTML, dya ze<\/em>\u0337<\/em>zhi, kjobu, k\u2019o ra mba<\/em>\u0331<\/em>ra.<\/em><\/span><\/p>\n

*Traducci\u00f3n lengua mazahua, variante norte del Estado de M\u00e9xico: Mar\u00eda Cristina Ventura Narciso.<\/span><\/p>\n

PDF<\/a><\/p>\n

<\/p>\n

Introducci\u00f3n<\/span><\/p>\n

La propuesta presentada en este art\u00edculo es el resultado del proceso inicial del desarrollo de la Gu\u00eda b\u00e1sica HTML5, el cual se aborda en la tesis \u201cDesarrollo de un material did\u00e1ctico multifuncional, mediante el dise\u00f1o y construcci\u00f3n de una Gu\u00eda b\u00e1sica de HTML 5, en formato de sitio Web, para la ense\u00f1anza de este lenguaje.\u201d La Gu\u00eda esta est\u00e1 disponible en el siguiente enlace: https:\/\/guiahtml.com<\/a>.<\/span><\/p>\n

Ante el reto que representa abordar el aprendizaje del HTML, del ingl\u00e9s HyperText Markup Language<\/em> (lenguaje de marcado de hipertexto), para quienes comienzan a adentrarse en el estudio de las tecnolog\u00edas Web, se identific\u00f3 la necesidad de contar con un base de conocimiento simplificada y estructurada como referencia b\u00e1sica. Si bien, existen diversos recursos de consulta sobre este tema, lo cuales se abordan m\u00e1s adelante, dichos acervos enlistan la totalidad de etiquetas del est\u00e1ndar, algunas clasificadas, otras no, m\u00e1s para consulta de personas que ya cuentan con un determinado nivel de conocimiento del lenguaje y solo requieren consultar alguna especificaci\u00f3n en concreto. Sin embargo, para quienes no tienen ninguna noci\u00f3n de HTML puede ser una tarea complicada hacer uso de estos recursos.<\/span><\/p>\n

En este sentido, el objetivo es hacer una selecci\u00f3n de etiquetas b\u00e1sicas HTML, a partir del total de etiquetas que componen el est\u00e1ndar y, posteriormente, clasificarlas en grupos tem\u00e1ticos seg\u00fan su funci\u00f3n y tipolog\u00eda, de manera que sean f\u00e1cilmente identificables por personas sin conocimientos previos.<\/span><\/p>\n

    \n
  1. 1.\u00a0\u00a0 \u00bfPor qu\u00e9 es relevante el aprendizaje de HTML a nivel b\u00e1sico?<\/span><\/strong><\/li>\n<\/ol>\n

    El HTML es el lenguaje de creaci\u00f3n de Sitios Web, se emplea en la escritura de documentos de tipo HTML en los que se define la estructura y contenido de una p\u00e1gina Web, mediante el uso de un c\u00f3digo basado en etiquetas. (W3C 3)<\/span><\/p>\n

    El HTML, al igual que la mayor\u00eda de las tecnolog\u00edas Web, est\u00e1 estandarizado por el World Wide Web Consortium<\/em> (W3C). Al ser un est\u00e1ndar sobre el que se sustenta la visualizaci\u00f3n de contenidos en la Web, sin importar su naturaleza y tener el soporte total de todos los navegadores, es un lenguaje fundamental, de ah\u00ed que su ense\u00f1anza resulte un elemento fundamental y b\u00e1sico en los procesos de aprendizaje orientados al desarrollo de proyectos Web.<\/span><\/p>\n

    La introducci\u00f3n en el aprendizaje de tecnolog\u00edas de desarrollo Web parte, tradicionalmente del estudio de HTML como base, en la estructuraci\u00f3n de contenidos, complementado con las Hojas de Estilo en Cascada (CSS del ingl\u00e9s Cascading Style Sheets<\/em>) para la asignaci\u00f3n de estilos en diversos medios. Desde luego no son los \u00fanicos lenguajes en el universo Web, sin embargo, constituyen una base fundamental para el desarrollo de numerosas soluciones Web, desde sitios Web b\u00e1sicos, aplicaciones Web y m\u00f3viles, hasta grandes plataformas de contenido en l\u00ednea.<\/span><\/p>\n

    Por lo anterior, resulta esencial establecer mecanismos que faciliten el proceso formativo de estudiantes de estas tecnolog\u00edas mediante el uso de recursos eficientes, para trabajo en el aula y extra-clase. En este contexto se pueden identificar dos grandes temas de inter\u00e9s: el conocimiento reflexivo y aplicado, ambas con el mismo grado de importancia. En la base te\u00f3rica se encuentran las definiciones, estructura y l\u00f3gica del HTML y sus etiquetas, por otro lado, la pr\u00e1ctica se centra en la ejecuci\u00f3n del c\u00f3digo y la observaci\u00f3n por parte de los estudiantes, del comportamiento de este en un navegador Web.<\/span><\/p>\n

    El presente estudio se centra en la definici\u00f3n de una base te\u00f3rica como una estructura inicial orientada al aprendizaje b\u00e1sico del HTML, \u00fatil para el desarrollo de materiales did\u00e1cticos o como un recurso en los procesos elementales de ense\u00f1anza del tema.<\/span><\/p>\n

      \n
    1. 2.\u00a0\u00a0 Revisi\u00f3n de referencias existentes<\/span><\/strong><\/li>\n<\/ol>\n

      De manera general, al ser un t\u00f3pico tan extenso y de gran impacto, existen numerosas referencias sobre el HTML, de este universo se han seleccionado dos: w3cschools.com y developer.mozilla.org. Ambos son recursos en l\u00ednea con trayectoria y reconocimiento en el medio, adem\u00e1s de constituirse como acervos de gran volumen de conocimiento relacionado con el desarrollo Web en general. A continuaci\u00f3n, se describen brevemente sus caracter\u00edsticas.<\/span><\/p>\n

      w3schools.com<\/span><\/strong><\/h3>\n

      Se trata de un Sitio Web de consulta con referencias sobre m\u00faltiples tecnolog\u00edas Web creado por la empresa noruega Refsnes Data, se describe a s\u00ed mismo como: \u201cEl sitio Web de desarrollo m\u00e1s grande del mundo\u201d. Cuenta adem\u00e1s con tutoriales, ejemplos y ejercicios para el aprendizaje de otros lenguajes, as\u00ed como para algunas bibliotecas, frameworks<\/em> y complementos. (Refsnes Data)<\/span><\/p>\n

      Para efectos de este art\u00edculo, se tomar\u00e1 como antecedente la secci\u00f3n de \u201cHTML Tag Reference\u201d, la cual presenta un listado de etiquetas HTML con una breve descripci\u00f3n, al ingresar a cualquiera de ellas muestra el detalle de dicha etiqueta y sus caracter\u00edsticas: ejemplo, definici\u00f3n y uso, soporte de navegadores, consejos y notas, diferencias entre versiones de HTML, atributos, estilos CSS por defecto y algunos ejemplos interactivos de uso. Desde ah\u00ed se ofrece un panorama completo de las etiquetas HTML, sin embargo, su extensi\u00f3n, estructura y cantidad de detalles avanzados pueden resultar abrumadores para quienes reci\u00e9n se inician en el tema. La organizaci\u00f3n alfab\u00e9tica de contenidos supone un criterio de orden \u00fatil para que los usuarios con cierto conocimiento logren acceder de forma \u00e1gil a alguna referencia en particular, no as\u00ed para visitantes que desconocen los nombres, usos y estructuras de las etiquetas.<\/span><\/p>\n\"P\u00e1gina\n

      Figura 1. P\u00e1gina de etiqueta <a> en w3schools. Fuente: Sitio Web de w3schools. Fuente: https:\/\/www.w3schools.com\/tags\/tag_a<\/span><\/p>\n

      developer.mozilla.org<\/span><\/strong><\/h3>\n

      Es la documentaci\u00f3n en l\u00ednea de la corporaci\u00f3n Mozilla (los creadores del navegador Firefox) para desarrolladores, contiene gu\u00edas, tutoriales y referencias para HTML, CSS y JavaScript, adem\u00e1s de algunos complementos y tecnolog\u00edas extra. (Mozilla 2005)<\/span><\/p>\n

      La secci\u00f3n de inter\u00e9s para este estudio corresponde al \u201cListado de elementos HTML5\u201d, es pertinente aclarar que no debe confundirse con el \u201c\u00cdndice de elementos HTML\u201d disponible en el mismo Sitio. A continuaci\u00f3n, se describe cada uno para establecer la diferencia:<\/span><\/p>\n

      \u00cdndice de elementos HTML: contiene todas las etiquetas HTML que han existido sin considerar su validez, estandarizaci\u00f3n o vigencia y constituye un mero repositorio o base de conocimiento hist\u00f3rica.<\/span><\/p>\n

      Listado de elementos HTML 5: est\u00e1 compuesto \u00fanicamente por las etiquetas v\u00e1lidas, est\u00e1ndar, vigentes y actualizadas del lenguaje.<\/span><\/p>\n

      A diferencia de w3schools.com, la organizaci\u00f3n de los elementos es con base en su funci\u00f3n, lo que facilita su consulta para usuarios no experimentados, la estructura de los grupos por funcionalidad es la siguiente:<\/span><\/p>\n