Vamos a ir avanzando un poco mas en el uso de los Divs y para ello vamos a intentar reproducir la siguiente pagina Web.
En lugar de hacer un fichero con el código HTML y otro con los estilos CSS vamos a realizarlo todo dentro del mismo, aunque esto no suponga ninguna ventaja, solo a nivel de enseñanza.
Iremos estudiando poco a poco todo el código. Aprendiendo cosas que no solo tienen que ver con los divs.
Antes unas pequeñas cuestiones:
Si en lugar de incluir un fichero con los estilos CSS lo quiere hacer dentro del fichero HTML debe incluir unas etiquetas <style> </style> dentro de las etiquetas <head> y en dentro de esas etiquetas definirá los estilos.
Observe donde empiezan:
Vemos el código del body el cual es muy limpio:
Nos vamos a centrar en la estructura de divs que tiene un div llamado contenedor y dentro de él 4 divs mas al mismo nivel entre ellos, no hemos anidado otros divs dentro de cada uno de estos 4.
Iremos estudiando poco a poco todo el código. Aprendiendo cosas que no solo tienen que ver con los divs.
Antes unas pequeñas cuestiones:
Si en lugar de incluir un fichero con los estilos CSS lo quiere hacer dentro del fichero HTML debe incluir unas etiquetas <style> </style> dentro de las etiquetas <head> y en dentro de esas etiquetas definirá los estilos.
Observe donde empiezan:
Vemos como la etiqueta style está dentro de head.
Otra cosa que vamos a seguir a rajatabla aunque no haga falta en este caso es hacer caso al Consorcio, que nos da una serie de pautas de codificación html entre otras y es que en lugar de usar acentos usemos comandos de tipo á y similar y digo esto por que no es necesario gracias al meta charset que admite acentos y otros caracteres locales.
En primer lugar estudiaremos el html normal sin estilos.
HTML
Nos vamos a centrar en la estructura de divs que tiene un div llamado contenedor y dentro de él 4 divs mas al mismo nivel entre ellos, no hemos anidado otros divs dentro de cada uno de estos 4.
- cabecera
- menu
- contenido
- pie
Si observa la primera imagen el div de cabecera es donde aparece el texto en amarillo de CDEI Knotica presenta y con fondo negro.
El div menú muestra los enlaces a ciertos lugares de nuestra Web y aparece al lado izquierdo debajo de cabecera con un fondo diferente.
El div contenido muestra el texto de nuestra página y aparece a la derecha del menú.
Por último en la parte inferior vemos un texto que habla de CDEI Knotica como consultora etc y es el div pie.
Cada uno de estos divs incluido el contenedor tiene asignado un estilo propio. A lo largo del curso veremos otras formas de asignar estilos comunes.
Aquí termina la sesión que próximamente verá su continuación
Comentarios
Publicar un comentario