Ir al contenido principal

Avanzando en Divs Parte 1

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 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 &aacute; 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

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.
  • 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

Entradas populares de este blog

Chrome: desactivar la opción “Abrir siempre archivos de este tipo”

En Chrome, al descargar un archivo aparecen tres opciones en el desplegable de la barra de descargas:

Combinar Correspondencia con varias cuentas en Outlook

A veces necesitamos realizar un mailing (Combinar correspondencia) y disponemos de varias cuentas de correo en nuestro Outlook. Comprobamos que no funciona el elegir una de ellas como predeterminada ya que para el envío por correspondencia usa un servicio llamado MAPI que no usa la cuenta predeterminada.  Antiguamente en versiones como la 2010 de office simplemente con cambiar el fichero de datos predeterminado de la cuenta bastaba para ello. Actualmente (nosotros usamos 365, equivalente a la 2016) la solución pasa por crear un perfil de correo en el que configuremos la cuenta que usaremos para combinar correspondencia. Adjuntamos un video en el que se explica en Windows 10 como crear un perfil de correo de una cuenta. Una vez creado ese perfil de Correo pasaríamos a realizar la combinación de Correspondencia y en el último paso cuando  realizamos la combinación de correspondencia nos solicitará el perfil a usar para poder enviar los correos y en ese caso elegiríamos el perfil asociado

Conectar Teléfono BQ M5 a PC

Cual no seria mi sorpresa que al conectar mi teléfono BQ M5 a mi ordenador Windows no aparece la posibilidad de ver su contenido.