Cambia el Fondo de tu Página [Jan. 17, 2012, 9:41 a.m.]

Uno de los factores que le da más visibilidad a una página web es el uso de colores e imágenes de fondo, especialmente para secciones como el encabezado y pie de página.

Por ejemplo, digamos que queremos que nuestro encabezado quede de esta manera:

Una opción sería insertar una imagen utilizando HTML, de esta forma:

<html>
<head>
    <title>Trisfera</title>
    <meta charset=”utf-8” />
</head>
<body>
  <div style="text-align:center">
    <img src="encabezado.png" alt="encabezado"  />
  </div>
</body>
</html>

Sin embargo, si abrimos esta página en el navegador, podremos identificar dos grandes problemas:

La imagen no se ajusta al tamaño del navegador
Si achicamos nuestro navegador, nos daremos cuenta que el logo y slogan quedan cortados y tenemos que hacer scroll hacia la derecha para verlos. De igual forma, si expandimos el navegador al tamaño máximo, veremos que quedan espacios en blanco a ambos lados de la imagen (si tu monitor no es muy grande, tal vez no lo veas).
El slogan está incrustado en la imagen
Tal vez este problema sea menos evidente, pero pensemos un poco en las consecuencias:
- Si más adelante cambia el slogan de la página, tendríamos que buscar la imagen original, editarla, exportarla y luego caerle encima a la imagen anterior. En cambio, si el slogan estuviera como texto, solo tendríamos que abrir el archivo HTML y modificarlo con nuestro editor de texto.
- Los buscadores (Google, Yahoo, Bing, etc.) no pueden leer texto si está incrustado dentro de una imagen. Esto significa que si alguien entra a Google y hace una búsqueda con tu slogan, ¡tu página no aparecerá entre los resultados!

Background

La manera correcta de insertar imágenes de fondo en una página web es utilizando la propiedad "background". Te recomendamos leer esta página para que conozcas cómo funciona.

Ahora podemos utilizar la propiedad background para re-escribir nuestro HTML de esta manera:

<html>
<head>
    <meta charset="UTF-8" />
    <title>Trisfera</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .container {
        height: 207px; 
        text-align:center;
        background: url(fondo.jpg) repeat-x; 
        color:#4F737F;
      }

      img {
        width: 386px; 
        height: 88px; 
        padding-top: 20px;
      }
    </style>
</head>


<body>
  <div class="container">
    <img src="logo-trisfera.png" alt="Trisfera" />
    <div>Grupo estudiantil dedicado al aprendizaje y desarrollo de aplicaciones web</div>
  </div>  
</body>
</html>

(Decidimos insertar el CSS dentro del HTML utilizando el elemento <style> - esta es otra manera en la que se puede añadir CSS a una página.)

Y si abrimos la página en nuestro navegador, veremos algo como esto. Fíjate que ahora el slogan aparece como texto HTML, y la imagen de fondo se ajusta al tamaño del navegador.

Tómate un tiempo para añadirle colores o imágenes de fondo a tus páginas. Prueba con diferentes valores e imágenes para que te vayas familiarizando con la propiedad background.

9. Dale Estilo a tu Página Web

Cambia el Fondo de tu Página [Jan. 17, 2012, 9:41 a.m.]