[Tutorial] Crear Div y Agregarle sus respectivos Atributos

bueno este tutorial va dedicado a unos cuantos usuarios que me mandaron un MP diciendome como hice mi hi5
con varios scroll a lo cual son div.

bueno aca la explicacion:

en mi caso como hice mi hi5? dare una pequeña explicacion:

simplemente utilize el Tutorial Ocultar Todo Personalizar Perfil
segundo paso al tener la seccion acerca de mi activa. la agrande del tamaño de la pantalla del hi5.
a lo que empece a crear div.

pero que es un o una div?
aca encuentran la respuesta:
https://developer.mozilla.org/es/HTML/Elemento/div

pero vamos al hecho del tutorial:


Crear un div con un id:


<div id="ACA-NOMBRE-QUE-LE-DARAS-AL-DIV"> ACA IRA TODO LO QUE QUIERAS DENTRO DEL DIV </div>

Rojo: aca simplemente le daremos un nombre al div, el que sea.
Verde: en esta parte estamos especificando que sera un id.
Naranja: ahi le agregaremos lo que queramos dentro del div.
Azul: importante debemos de cerrar la etiqueta div si no no funcionara.


Ahora crearemos un div pero con un class:

<div class="ACA-NOMBRE-QUE-LE-DARAS-AL-DIV"> ACA IRA TODO LO QUE QUIERAS DENTRO DEL DIV </div>

Rojo: aca le daremos un nombre al div, el que uds gusten.
Verde: en esta parte estamos especificando que sera un class
Naranja: ahi le agregaremos lo que queramos dentro del div.
Azul: importante debemos de cerrar la etiqueta div si no no funcionara.


pero uds diran porque id o class?
que diferencia hay?
sencillo:

cuando creamos un div con id:
al momento de agregarle sus respectivos atributos
tendremos que poner
ejemplo:

<style>#ACA-NOMBRE-QUE-LE-DARAS-AL-DIV{aca iran los atributos del div;}</style>

como se daran cuenta lo de rojo es el nombre que le puse arriba al crear las div de ejemplo.
pero porque el --> # ¿?¿?
porque simplemente al no ponerle --># al momento de agregarle atributos no surgiran efecto y porque es propio de un div con id.

Lo que no pasa al crear un div con class
al momento de agregarle atributos a un div con class
se reemplaza el # por un [size=20pt].[/size] <-- punto
ejemplo:

<style>.ACA-NOMBRE-QUE-LE-DARAS-AL-DIV{aca iran los atributos del div;}</style>

como se daran cuenta lo de rojo es el nombre que le puse arriba al crear las div de ejemplo.
porque el --> . ¿?¿?
porque si no le ponemos el punto los atributos que le intentemos dar no surgiran efecto y porque es propio de un div con class.


Agregandole Atributos a las div:

Tomaremos el nombre de ejemplo que le di anteriormente al crear la div de ejemplo.

Agregandole atributos a un div con id:

<style>#ACA-NOMBRE-QUE-LE-DARAS-AL-DIV{text-align:center;height:200px;width:150px;overflow:auto;}</style>


Marron: Importante para poder agregarle atributos al div, abrir una etiqueta <style>.
Rojo: En este caso este nombre hemos elegido para agregarle atributos y como se daran cuenta es un div con id por el --> # antes del nombre del div.
Verde: Toda la Zona que esta de verde son los atributos que le hemos agregado al respectivo div. explicare los atributos basicos que le di al div:
text-align:center = significa que todo texto que se encuentre dentro del div tendra alineacion centrada.
height:200px = le hemos dado una altura de 200px lo que puede variar si le aumentamos o disminuimos el 200.
width:150px = le hemos dado un ancho de 150px lo que puede variar si le aumentamos o disminuimos el 150.
overflow:auto = este atributo va depender de los dos anteriores height y width ejemplo si le damos una altura de 150px al div y empezamos a escribir y escribir en el div al momento de que el texto ocupe toda la altura del div que es de 150px simplemente con el overflow:auto aparecera el scroll.
Azul: Importante si no cerramos esa etiqueta no surgira ningun atributo que le hemos dado.



Agregandole atributos a un div con Class:

<style>.ACA-NOMBRE-QUE-LE-DARAS-AL-DIV{text-align:center;height:200px;width:150px;overflow:auto;}</style>

Marron: Importante para poder agregarle atributos al div, abrir una etiqueta <style>.
Rojo: En este caso este nombre hemos elegido para agregarle atributos y como se daran cuenta es un div con Class por el --> [size=20pt].[/size] antes del nombre del div.
Verde: Toda la Zona que esta de verde son los atributos que le hemos agregado al respectivo div. explicare los atributos basicos que le di al div:
text-align:center = significa que todo texto que se encuentre dentro del div tendra alineacion centrada.
height:200px = le hemos dado una altura de 200px lo que puede variar si le aumentamos o disminuimos el 200.
width:150px = le hemos dado un ancho de 150px lo que puede variar si le aumentamos o disminuimos el 150.
overflow:auto = este atributo va depender de los dos anteriores height y width ejemplo si le damos una altura de 150px al div y empezamos a escribir y escribir en el div al momento de que el texto ocupe toda la altura del div que es de 150px simplemente con el overflow:auto aparecera el scroll.
Azul: Importante si no cerramos esa etiqueta no surgira ningun atributo que le hemos dado.


Bueno para Complementar los Atributos que le pueden dar a las div
pueden visitar el Tutorial de Hi5 explicado por Skeem ahi encontraran mas atributos.


y sobre todo se haya entendido
no soy bueno explicando pero hice mi esfuerzo :D

zaludos!

PD: Se aceptan gracias xD (bromas)

buen aporte men
todo zta mui buen
i bien explicacion i tratara bien lenguaje
te felicito men
zaludoz!!!

ell loloxitoo
ezta geneal
tuu ap0rte
me va a zervir
un bueen!
gracias

jejeej gracias por sus comentarios
el aporte lo habia hecho en geek primero
pero decidi aportarlo aca
como me insistieron unos users al decirme

"como hiciste tu hi5" con tantas secciones con scroll
decidi aportarlo

y si ke me tomo tiempito xD!!
pero mi recompensa es que les sirva a todos ps

zaludos!

brother este si es un verdadero aporte

jejejeje thanks brother
se hace lo que se puede x)

Claro muchachos
para todo modestia y humildad

sabes? -------> enseña....
no sabes? -------> aprende...

asi es x)

nose muchas cosas no soy un experto pero intento
aprender mejores cosas y superarme x)

zaludos! a todos