HTML :: Contenedores

jeje, oleada de entradas XD es que estoy de buen humor por el kossi... gracias XD

CONTENEDORES

Como lo mencione antes, HTML es un lenguaje de marcas para poner un documento en linea y los exploradores le den el formato que queramos
Estamos de acuerdo que un documento cuenta de varias partes como podria ser parrafos, enunciados, capitulos, etc...
Entonces HTML tambien tiene etiquetas especiales para poder dar el formato adecuado para esos elementos... o para hacer algunos truquillos que le dan un aspecto estupendo a la página

Existen diversas etiquetas para esto, cada una para diversas funciones por lo que existen muchas, como la de

<address></address>

que formatea el texto dentro de ella para que aparezca como una direccion, con letra italica y como esta muchas otras.

En mi sano juicio siempre recomendare aquellos contenedores faciles de manipular y que por default el explorador no les de ningun formato en especial, lo cual los convierte en medios de facil manejor y alta personalizacion.

Los contenedores que no dan formato son solo dos:
<div></div>
<span></span>

Pero... ¿Cúal es la diferencia entre uno y otro?, ¿Cúal es mejor?
La unica diferencia es que el DIV toma todo el ancho que la pagina o el contenedor le permita, en cambio el SPAN solo toma lo que necesita para contener lo que tiene en el.
Como veran en este ejemplo:

Hola mundo! <div style="border: solid red 1px;">como</div> estan?

Hola mundo <span style="border: solid red 1px;">como</span> estan?

esto les dara como resultado: Hola mundo!

como

estan? Hola mundo como estan?


Agregue el borde para que se pueda apreciar mejor...
Como podran ver es mucho mejor usar SPAN.
Pero...¿Por qué casi todo mundo usa DIV?

Esto es cierto, todo mundo usa el DIV, incluyendome, esto es devido a que la manipulacion del div es mucho más facil devido a su naturaleza por ser un objeto block (el SPAN es inline) lo que significa que para usos en conjunto con CSS no es necesario usar mas codigo que con un objeto SPAN, esto devido a que al poner un SPAN en una pagina diseñada para cualquier resolucion en donde se usa el position: relative; para que ese objeto siempre este en el mismo lugar en "relacion" con la resolucion.
En palabras mas sencillas... el position: relative; se usa para que ese elemento sea "relativo" a los demas... es decir, si tenemos 4 bloques de 500 pixeles de altura y el 5 bloque es de 200 pixeles de altura... la pagina medira 1200 pixeles apesar de que por el estilo no pasen de los 500 pixeles, esto es porque el SPAN entra en conflicto con el "relative".
Es por eso que es mucho mejor usar DIV por su naturaleza de bloque que no entra en conflicto con nada.

---

IDENTIFICAR CONTENEDORES

Bueno, ahora que creamos nuestro contenedor y para poder hacer una pagina web 2.0
[WEB 1.0 - Páginas estáticas que no se actualizan muy seguido]
[WEB 2.0 - Multiples servicios web con la interaccion completa de los usuarios]

Aparte de que hay que hacer una página mas vistosa, tambien la podemos conviar con muchisimas tecnologias como CSS, Javascript, PHP, JSP, etc... para que sea interactiva, como este blog.
Para ellos es de gran utilidad identificar, agrupar y personalizar cada uno de los elementos de nuestra página.
Solo trabajare con DIV's para esta explicacion, por lo ya antes mencionado, asi que sin mas preambulo, comenzemos.

Para identificar o agrupar los DIV's para personalizarlos o "jugar" con ellos existen dos metodos:

• ID
• CLASS

Ambos se tienen que poner en los atributos del DIV

<div id="nombre_ID" class="nombre_CLASS">

Es bastante recomanendable que utilices ambos ya que sera algo confuso a la hora de manipularlo pero si la situacion lo requiere NO ESTA MAL.
El ID es usado para IDentificar a un DIV dentro de los otros muchos que puede contener tu página por eso es recomendable que los ID's sean unicos.
Para eso tenemos a CLASS que es utilizado (segun estandares) para agrupar los DIV's (o cualquier contenedor, elemento o etiqueta...)
Pero una vez mas repito, no es necesario usar el CLASS para agrupar, tambien se puede hacer con ID.

Aunque claro, habra limitantes si te quieres poner a romper estandares. Por Ejemplo en Javascript para modificar o manipular un DIV primero lo tienes que llamar usando la instruccion

document.getElementByID(id_div)

peeeeeero esta instruccion solamente sirve para llamar a los DIV's que tengan la ID entre parentesis. Por eso solo llama a una, o esa es la intencion de esa instruccion.
En cambio para llamar a una clase (CLASS)

document.getElementsByClassName(class_div)

Bueno, aparte de que es un poco mas compleja... esta instruccion, su funcionalidad principal, es llamar a todos los objetos que tengan esa clase.


Ahora que identificamos o agrupamos nuestros DIV's podremos hacer varias cosas con ellos, como ponerles estilos o manipularlos desde Javascript.