Qué es el DOM y cuáles son los elementos más comunes

Me parece bueno tomarme el tiempo de explicar algunas cosas básicas para las personas que no tienen ningún conocimiento de HTML o CSS. La intención es ayudarles a que puedan sacar provecho del resto de los tutoriales sobre imacros, porque es importante que entiendan cómo se seleccionan las cosas y qué significan las etiquetas, aunque sea las más conocidas.

Los documentos HTML (paginas web) tienen una estructura de elementos, como si fueran unas cajas adentro de otras y seguidas de otras.

Podemos identificar a cada elemento según su tipo. Por ejemplo, en el gráfico que está arriba, podemos hablar de la primera minicaja que hay dentro de la segunda subcaja. Esta forma de seleccionar es posible.

Además de eso, normalmente se usa una id para identificar a un objeto al que nos vamos a referir a menudo o que queremos seleccionar con facilidad. La id es algo que agrega el diseñador de la pagina. Y nosotros podemos usarla para referirnos al mismo objeto o a los que están dentro de ese objeto, así no tenemos que indicar la ruta completa desde el documento HTML

Esta especie de "mapa" de los elementos y la estructura del sitio, como el que hice en el gráfico, se llama DOM. Obviamente, los elementos no se llaman subcajas y minicajas. Más adelante vamos a explicar algunos de los elementos.

En la imagen, podemos ver que la minicaja tiene una id (un identificador único). Si queremos referirnos a ella, solamente tenemos que referirnos a la id (en este caso, es tarja). Pero también podemos hablar de la caja que está dentro de tarja. Aunque hubiera muchas otras cajas, de esa forma estaríamos seguros de que estamos hablando de esa caja, porque sólo hay un elemento con id tarja y no puede haber dos con el mismo id.

¿Y qué pasa si queremos seleccionar varios elementos a la vez? Supongamos que tengamos cinco cajas y tres de ellas quisieramos tratarlas de una manera especial. En ese caso, los diseñadores le aplican una clase (class) y ahi sí que pueden referirse a las tres al mismo tiempo a través de la clase. Y, tal como pasa con la id, con la clase podemos referirnos a los objetos que tienen dentro. De esta forma, no hace falta decir la ruta completa para seleccionar algo. Podemos decir "tal cosa que está adentro de los objetos con esta clase".

Hay formas de seleccionar más avanzadas todavía, como el último elemento, el primero, el tercero o el que tiene cierto atributo. Vamos a hablar de eso más adelante. Ahora, lo que voy a hacer es explicar lo básico sobre las etiquetas HTML.

Los elementos de la pagina web se representan con etiquetas que generalmente van en pareja, una que abre y otra que cierra. en la que abre pueden ir ciertos atributos, a veces, esenciales y en otros casos, optativos (ya vimos dos de esos atributos: id y class). En la etiqueta que cierra no va nada, y se las reconoce porque llevan una barra antes del nombre de la etiqueta.

En el tercer gráfico, se explica de forma sencilla cómo se escriben las etiquetas. Como ves, pueden ir unas adentro de otras.

También existen etiquetas que van solas, no en pareja. En ese caso, se escriben como la primera etiqueta o se les agrega antes de terminar un espacio y una barra, justo antes del signo mayor que.

Te dejo una lista pequeña de los más utilizados y si llegas a tener dudas sobre algún elemento, te dejo un link con la explicación de todas las etiquetas. No necesitas aprenderlas todas ahora, pero sí tener una idea de las más usadas.

Te recomiendo añadir está página a marcadores (CTRL+D) o guardar el enlace dentro de un archivo de texto, para que puedas consultarlo más adelante. No es necesario que te acuerdes todo, pero te recomiendo leerlo, para darte una idea. Si surge alguna duda, puedes consultar en sitios que hablen sobre etiquetas HTML (abajo te dejo un enlace).


ELEMENTOS GENERALES:
div: es divisor que da estructura de bloque (sirve para dar forma al sitio).
span: es como el div pero la división no es visible, es decir, puede estar dentro de un párrafo y el texto se verá seguido, en vez de hacer saltos de linea cuando empieza y termina el span (sirve, por ejemplo, para dar estilo a una porción de texto).
p: es un párrafo.
h1: es un titulo, el h1 es el mas importante de todos, y si hay titulos menos importantes dentro del documento se pueden indicar con h2, h3, asi hasta h6.
strong: es un texto remarcado (en negrita, pero aclaro que se puede poner en negrita de otras formas, sin usar esta etiqueta).
a: es un enlace o un ancla (el ancla es como un enlace dentro del documento, muy utilizado en indices que te dirigen hasta la seccion indicada cuando le haces click); requiere el atributo href (la referencia que contiene el dirección web o la zona anclada).
img: una imagen, requiere la fuente de la misma a través del atributo src (source).
br: un salto de linea
ol: lista ordenada, puede ser numérica (1,2,3) o alfabética (a,b,c) y también en números romanos (i,ii,iii).
ul: lista desordenada, lleva un símbolo pero ningún tipo de orden.
li: cada elemento de una lista va entre un par de estas etiquetas.

ELEMENTOS DE FORMULARIO:
form: un formulario.
input type="text": una caja de texto.
textarea: un area de texto (es como la caja pero de varias lineas).
input type="button": un botón.
input type="submit": es el botón para enviar los datos del formulario una vez que lo llenamos.
button: un botón.
select: una lista desplegable para seleccionar algo.
input type="radio": es una opción, entre las cuales hay que elegir una u otra (se representa como un circulo con un punto negro adentro o en blanco), se agrupan gracias al atributo name (nombre), si elegimos una, la otra se desmarca.
input type="checkbox": es una opción para chequear, pero en este caso se pueden elegir muchas a la vez; están representadas con un cuadrado en blanco o con una marquita de check.

ELEMENTOS ESTRUCTURALES DE LA WEB:
title: es el titulo que se ve en la pestaña del navegador.
header: el encabezado donde generalmente va un banner representativo del sitio, un logo o aunque sea el nombre de la web.
nav: la parte donde está la lista de páginas, conocida "barra de navegación".
aside: la columna lateral.
section: la seccion principal.
article: un artículo dentro de section.
footer: el pie de pagina, donde van los derechos de autor, links de contacto y cosas así.

ELEMENTOS DE TABLAS:
table: una tabla.
tr: una fila de la tabla.
td: una celda de la tabla.


Estos son los elementos con los que vamos a tratar más seguido, pero si tienen dudas sobre una etiqueta que no haya nombrado, dejo una lista detallada para el que necesite consultarla:

http://virtualnauta.com/html-etiquetas


Sería bueno que conozcan HTML, no voy a profundizar en esto porque prefiero centrarme en imacros y explicar bien cómo se usa. Lo de HTML lo pueden aprender en otro lado, pero creo que esto era lo que más se necesitaba y ya con algo así, se pueden ir guiando.