Iniciación a las capas o divs
Bueno, primero que todo os voy a enseñar cuál es el objetivo de esta primera lección del curso. Nuestro objetivo será crear ésta web. Una vez visto esto pasaremos a explicar qué son las capas. Una web se puede estructurar en tablas, que las veremos más adelante, o un capas (también llamadas divs). Los divs, para entenderlos, son como rectángulitos que colocamos en la web, y que podemos ir metiendo unos dentro de otros, o ponerlos juntos. De esta forma con estos divs podemos organizar una web.
El código de un div es <div> para abrirlo y </div> para cerrarlo. De esta forma vamos a poner el rectángulo blanco que se ve de fondo en la web que os enseñé que tenemos prevista hacer. Vamos a hacer que este rectángulo tenga dentro las frases que teníamos escritas ya en el código html. De esta forma el código del body se nos queda así:
<body>
<div>
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</body>
<div>
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</body>
Ya tenemos un div creado con todo el texto dentro, pero, la página se sigue viendo igual, ¿por qué? Pues esto se debe a que no le hemos indicado al div cómo tiene que ser, no le hemos puesto los estilos.
Creando los estilos al div
Ahora vámonos a la hoja de estilos. Esta vez no podemos crear un estilo para todos los divs, puesto que todos los divs no van a ser iguales, pero entonces, ¿cómo le ponemos estilos a ese div? Pues tenemos que crear un estilo con el nombre que queramos, y esto se hace poniendo en la hoja de estilos "#nombre {estilos}". De esta forma vamos a crear un estilo que se llame fondo y vamos a ponerle un color de fondo blanco, por lo que nos quedará la hoja estilo.css así:
body {color: #FF0000; background-image: url(imagenes/fondo.jpg)}
#fondo {background-color:#FFFFFF}
#fondo {background-color:#FFFFFF}
Aplicando los estilos al div
Ahora volvamos a la hoja html. Si previsualizamos la página veremos que sigue igual. Esto se debe a que no le hemos dicho al div que hemos creado que lea el estilo fondo. Para indicarle que lea ese estilo lo que hacemos es incluir el código "id="nombredelestilo"" dentro de la etiqueta del div, quedando así "<div id="nombredelestilo">", de forma que el código html nos quedará así poniéndole al div que use el estilo llamado "fondo":
<body>
<div id="fondo">
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</body>
<div id="fondo">
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</body>
Ahora si previsulizamos nuestro index.html ya veremos el rectángulo blanco con el texto enmedio.
Más estilos
Ahora volvamos a la hoja estilo.css (que mareo, jeje). Esta vez vamos a decirle al div fondo que tenga un ancho definido. Para ello tenemos que ponerle de estilo "width: medidapx", por ejemplo, "width: 800px", que quiere decir que tenga un ancho de 800 píxeles. En este caso vamos a hacer que nuestro div tenga un ancho de 820 píxeles siempre, por lo que tendremos nuestro código css así:
body {color: #FF0000; background-image: url(imagenes/fondo.jpg)}
#fondo {background-color:#FFFFFF; width: 820px}
#fondo {background-color:#FFFFFF; width: 820px}
Ahora vamos a determinar la posición de este div. Para determinar su posición tenemos que decirle al body que centre todo lo que tiene dentro, para lo que usamos el código "text-align: center". Donde pone center (centrar) también puedes poner right (a la derecha), left (a la izquierda) o justify (para justificar el texto). Por lo tanto agregad ese código en el body en la hoja estilo.css
Ahora vamos a indicarle una cosa al fondo para que se centre, y es su margen, para lo que usamos el código "margin: medidapx". Podemos poner, por ejemplo, "margin: 10px", que quiere decir que tendrá un margen de 10 px en todos los lados. Otro ejemplo es "margin: 10px 5px", que quiere decir que tendrá un margen de 10 px arriba y abajo y un margen de 5 px a los lados. Por último podemos poner "margin: 1px 2px 3px 4px", que son los márgenes de todos los lados en este orden: arriba - derecha - abajo - izquierda. De esta forma le pondremos al fondo "margin: 4px auto", para que el margen arriba y abajo sean 4 píxeles y a los lados sea automático. Agregando estas dos últimas cosas el código del estilo.css nos queda así:
body {color: #FF0000; background-image: url(imagenes/fondo.jpg); text-align: center}
#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto}
#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto}
Ahora, si os fijais en nuestro objetivo, todo lo demás está dentro del fondo, es como si hubiera un rectángulo más chico dentro de éste. Pues vamos a indicarle a nuestro div fondo que todo lo que haya dentro se aleje 6px hacia abajo, para que no quede pegado arriba. Para eso se usa el padding, que es como el margin sólo que en vez de ser el margen exterior es el margen interior. Además vamos a hacer que centre lo de dentro, al igual que hicimos con el body. De esta forma tenemos nuestra hoja de estilos así:
body {color: #FF0000; background-image: url(imagenes/fondo.jpg); text-align: center}
#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}
#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}
Ahora vamos a encuadrar todo lo de dentro en un nuevo div, al que llamaremos global. Este div no se ve, puesto que no le ponemos color de fondo, pero nos sirve para colocar todo dentro. Así que vamos a crear un div que se llame global, y vamos a ponerle un "margin: auto" para que se centre, así como un "width: 800px" para que tenga 800 píxeles de ancho. Así que tendremos la hoja de estilos así (vamos a quitar ya del body el código "color: #FF0000"):
body {background-image: url(imagenes/fondo.jpg); text-align: center}
#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}
#global {margin: 0px auto; width: 800px}
#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}
#global {margin: 0px auto; width: 800px}
Y que no se nos olvide colocar el div global dentro del div fondo en la hoja html:
<body>
<div id="fondo">
<div id="global">
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</div>
</body>
<div id="fondo">
<div id="global">
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</div>
</body>
No hay comentarios:
Publicar un comentario