Todos los días, nos fijamos en docenas de sitios web. La estructura de estos sitios web se define en HTML, la lengua franca para la publicación de información en la web.
El trabajo del navegador es traducir el código HTML en una serie de elementos visuales identificables.
Se puede ver el código detrás de cualquier sitio web seleccionando la opción “Ver código fuente” localizado en algún lugar en el menú del navegador.
HTML se compone de los llamados tags (etiquetas), como la etiqueta A de los enlaces, la etiqueta IMG para imágenes y así sucesivamente. Dado que las etiquetas están anidadas dentro de otras etiquetas, que se organizan de forma jerárquica, y que la jerarquía se puede representar como un gráfico, se ha desarrollado una pequeña aplicación que permite visualizar ese gráfico.
Se he usado un poco de color para indicar las etiquetas más utilizadas de la siguiente manera:
azul : para enlaces (la etiqueta A)
rojo : para tablas (TABLE, TR y las etiquetas TD)
verde : de la etiqueta DIV
violeta : imágenes (etiqueta IMG)
amarillo : para formularios (FORM, INPUT, TEXTAREA, SELECT y OPTION tags)
naranja : para saltos de línea y blockquotes (BR, P, y las etiquetas BLOCKQUOTE)
negro : la etiqueta HTML, el nodo raíz
gris : todas las otras etiquetas
De esta manera podemos transformar nuestra web en una especie de árbol con multitud de ramificaciones y coloreado de acuerdo al patrón expuesto con anterioridad.
Realmente es impresionante ver como se despliega nuestra página mientras se forma el entramado. Os dejo el árbol de esta humilde página web y el enlace a la aplicación.
Página Web en forma de Gráfico
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure