El diseño web es una fuente de ingresos económicos para muchos, no dejes de estudiar
Muestra de otros en este curso gratuito
Qué es div en Diseño web
Escribe Javier R. Cinacchi en
https://www.estudiargratis.com.ar/webmaster/que-es-div.html
Revisión: 05/06/15
<div> delimita un bloque de contenido. Todo contenido debería estar delimitado entre un <div> y su cierre </div> o su equivalente tal como en HTML5 con las etiquetas semánticasUn diseño web en HTML5 posee incluso div que se encuentran dentro de otros div, con lo cual se va generando el diseño final.
Equivalentes de <div> etiquetas semánticas:
(En otras palabras es como si se hubieran puesto nombres predeterminados a los "DIV", y de hecho se pueden en HTML5 seguir utilizando DIV, más estas etiquetas específicas que son etiquetas semánticas de estructura html5, o bien jugarsela por lo último y utilizar las etiquetas semánticas, no soportadas por viejos navegadores que sí soportan DIV)
- <header> Especifica la sección superior donde suele ir la cabecera de un sitio web (allí donde va una imagen grande y el menú de navegación).
- <nav> Es para la navegación importante (los links principales y puede ir dentro de header).
- <hgroup> Es para el titular h1 y h2 de cada artículo o contenido principal de la página.
- <article> Es la parte más importante de la página.
- <section> Es para dividir la página en secciones Estudiargratis.net.
- <aside> Es para indicar bloques por ejemplo verticales a los costados, que no es el bloque central.
- <footer> Suele ser el pie de página.
Utilización del DIV junto a estilos CSS:
Explicación desde cero:
Tienen un inicio y cierre, <div> y su cierre </div>
Código:
<div> contenido </div>
Se observa:
contenido
(Un DIV es un bloque es decir si coloco <div> contenido1 </div><div> contenido2 </div> se verá uno debajo de otro)
Se observa:
contenido1
contenido2
Si se le aplica un estilo cambia:
Código:
<div style="background: #CCCCFF; border: 1px solid #aaaaff;"> contenido </div>
Se observa:
contenido
Si se quiere colocar un div al lado de otro div como si se tratara cada uno de una palabra hay que utilizar display:inline-block.
Código:
<div style="background: #CCCCFF; border: 1px solid #aaaaff; display:inline-block;"> contenido </div> <div style="background: #CCFFCC; border: 1px solid #aaffaa; display:inline-block;"> contenido 2 </div>
Se observa:
contenido
contenido 2
Si se quiere colocar el estilo aparte:
Esto se explicó aquí:
Lo básico en estilos.
En la cabecera (antes de /head) llamar al css según el nombre que le pusiste y dónde lo subiste:
<link rel="stylesheet" type="text/css" href="https://www.estudiargratis.com.ar/JavierRCinacchi.css">
Si por ejemplo tengo un Div que lo llame "centrar"
<div class="centrar"> </div>
En el CSS podría ir por ejemplo una propiedad de centrado del siguiente modo:
.centrar {text-align: center;}
En Estudiargratis.net hay muchas secciones, algunas de estas: