Curso completo de HTML - Cómo cambiar la apariencia de una pagina
(126 opiniones)
Curso gratis de
Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
Una vez conocemos a la perfección la manera de insertar colores ya podemos empezar a aprovechar las posibilidades que nos ofrece el lenguaje HTML para controlar la apariencia de una página Web. Como primera aplicación práctica aprenderemos a cambiar el color del fondo, luego cambiaremos el color del texto y por último crearemos el efecto más impactante de todos, pondremos un imagen de fondo.
Color de fondo
Para cambiar el color de fondo de nuestras páginas usaremos un nuevo atributo de la, ya conocida, etiqueta BODY.
El nuevo atributo se llama BGCOLOR y debe ser añadido a la etiqueta BODY existente:
<body bgcolor="#RRGGBB">
|
Por ejemplo para crear una página con el fondo de color azul podemos usar:
<body bgcolor="#0000FF">
|
O bien:
<body bgcolor="Blue">
|
El resultado es en ambos casos el que podemos apreciar en la figura 5.2
Figura 5.2. El lenguaje HTML nos permite cambiar el color de fondo de nuestras páginas. Podemos indicar el color por su nombre en inglés o con su número RGB.
NOTA: Algunos navegadores, como Explorer, permiten poner el código en decimal. Para ello hay que omitir el símbolo # y usar 3 dígitos decimales (números del 0 al 255) para especificar la cantidad de cada color en el mismo orden (rojo, verde y azul). Sin embargo no recomendamos el uso de esta característica porque de esta forma provocaremos que sólo los visitantes con ese navegador puedan apreciar el colorido de nuestras páginas y realmente el esfuerzo de poner el código en hexadecimal no es tan grande.
Es importante resaltar que si no usamos el atributo BGCOLOR el color de fondo de nuestras páginas será el que cada usuario haya especificado en su navegador. En algunos navegadores el color por defecto es el blanco, mientras que en otros es el gris plateado habitual en Windows.
Color del texto y Links
Igual que se puede cambiar el color del fondo de la página se puede cambiar el color de su texto. Para ello se usan cuatro nuevos atributos de la etiqueta BODY. Lo primero que deberemos hacer es pensar en el color y el código de este, y una vez lo tengamos cambiaremos el color del texto usando:
- TEXT
-
Sirve para controlar el color que tendrá el texto normal de la página, es decir todo aquel que no sea un enlace hipertexto. Su valor por defecto es negro.
- LINK
-
Permite cambiar el color con el que son mostrados los enlaces hipertexto o links de la página. Su valor por defecto es azul.
- VLINK
-
Permite cambiar el color por defecto de los links visitados (Visited LINK). Los links visitados de una página son aquellos que ya hemos seleccionado alguna vez. El valor por defecto de estos enlaces es morado.
- ALINK
-
Sirve para controlar el color de los enlaces activos (Active LINK). El significado de enlace activo varía en función del navegador. Para Netscape un enlace activo es aquel sobre el que se ha pulsado con el ratón pero todavía no se ha soltado. El color por defecto de los links activos es el rojo.
Vistas todas las etiquetas pasemos a crear un ejemplo, para él seleccionaremos un color de pantalla negro, texto blanco, enlaces verdes, enlaces visitados verde azulado y enlaces activos rojos. El código usado es por tanto:
<body bgcolor="#000000" text="#FFFFFF"
link="#00FF00" vlink="#008080" alink="#FF0000">
|
En la figura 5.3 podemos ver el resultado de este código.
Imágenes de fondo
Las posibilidades que nos ofrece el lenguaje HTML para cambiar la apariencia de una página no se limitan a cambiar los colores, también se pueden poner imágenes ya sean dibujos o fotos como fondo de una página. Las imágenes deberán estar en formato GIF o JPEG al igual que las imágenes normales que aprendimos a insertar en el capítulo 2.
Para incluir una imagen de fondo deberemos usar el atributo BACKGROUND de la etiqueta BODY. Como habrá podido comprobar el lector a estas alturas dentro de esta etiqueta se engloban todos los parámetros que cambian las características globales de la Web, es decir aquellas que afectan a toda la página.
El funcionamiento de BACKGROUND es idéntico al del atributo SRC de la etiqueta IMG, esto es, deberemos indicar como valor el nombre de la imagen, junto con su ruta de directorios (path) si es necesario o bien la dirección completa de Internet (URL) si no se encuentra en nuestro sitio Web.
Veamos un primer ejemplo de una página con una imagen de fondo, para ello usamos el siguiente código en el que hemos usado la imagen fondo1.jpg que se encuentra en el mismo directorio que la página donde está el código:
<body background="fondo1.jpg">
|
En la figura 5.4 podemos ver el resultado en el que hemos incluido, además, un encabezado que contraste con el fondo.
Figura 5.4. Para crear un mayor impacto visual podemos usar como fondo una imagen, esta imagen se replicará (es puesta en mosaico) por toda la página, luego los bordes deben coincidir.
Las imágenes que insertemos como fondo de la página serán mostradas en mosaico, es decir, se replicará la imagen tanto horizontal como verticalmente hasta ocupar todo el área de la página. Por esta razón no todas las imágenes quedan bien como fondo de una página Web. De hecho se recomienda que sólo se usen dos tipos de imágenes:
-
Imágenes con pocos colores que muestran un logo sobre un relleno sólido y que interfiere poco con el contenido de la página. En la Web de la figura 5.5 podemos ver un ejemplo de este tipo de imágenes en la que no se aprecian los bordes de la imagen al ser el fondo de esta de un solo color sólido (gris oscuro en este caso).
-
Imágenes especiales cuyos bordes encajan perfectamente y parece que todo del fondo es una única imagen. La imagen de la figura 5.4 es un ejemplo de ello ya que su tamaño real es de 90x90 pixeles. En la figura 5.6 vemos esa imagen por sí sola. Es difícil apreciar que los bordes encajarán cuando se creen las réplicas, de hecho ese efecto debe ser hecho con programas especiales.
Por lo general la creación de fondos requiere además de programas especiales, bastante cuidado para asegurarnos que no sobrecarguen demasiado la página, por lo que un gran número de programadores de Webs optan por usar alguno de los fondos de los cliparts gratuitos que podemos encontrar en Internet, por ejemplo en las direcciones:
-
www.specialweb.com
-
www.dewa.com
-
www.teleportcom
Si usamos una imagen normal como fondo de una página, los bordes no encajarán y se verán claramente los límites de la imagen. Podemos ver un ejemplo de este efecto en la figura 5.7. En esta misma figura vemos también que poner una foto de fondo suele provocar que la página esté demasiado sobrecargada, además sería difícil leer el texto que hubiese en esa imagen.
Figura 5.7. También podemos poner fotos como fondo de la página, pero hay que tener cuidado porque los bordes no encajan y además la página queda demasiado sobrecargada.
|
No use imágenes demasiado oscuras o con demasiados colores como fondo de la página. Si aún así debe usarla utilice los atributos TEXT, LINK, VLINK y ALINK de la etiquetas BODY para poner colores de texto que permitan que el texto sea legible. |
Por último, queremos terminar este apartado con un consejo. Como hemos repetido, la creación de imágenes de fondo es complicada y delicada. Si no las hemos hecho nosotros deberemos elegir bien, en general suelen ser mas apropiadas las imágenes con tonos claros sobre los que se puede leer sin problemas texto negro. Pero antes de incluir la imagen deberemos volver a hacernos unas preguntas ¿Es realmente necesaria? ¿Mejora realmente el aspecto gráfico? que con frecuencia nos hacen ver las cosas más claras. Una vez hemos probado la imagen debemos tener mucho cuidado y hacer pruebas con otras personas para comprobar que el texto de la página se lea bien. Piense que por muy espectacular que sea la página, si no conseguimos que lea lo que tenemos que decir el objetivo no estará cumplido.
- 1 - Introducción al lenguaje HTML
- 2 - Primeros pasos con HTML
- 3 - Parrafos en HTML
- 4 - Cómo insertar imagenes en una pagina
- 5 - Cómo crear enlaces hipertexto
- 6 - PRÁCTICA 1: La pagina web de "La chistera"
- 7 - Anclas (I)
- 8 - Anclas (II)
- 9 - Formato de texto
- 10 - La etiqueta FONT
- 11 - Texto preformateado
- 12 - Acentos y otros caracteres especiales
- 13 - Listas en HTML (I)
- 14 - Listas en HTML (II)
- 15 - Comentarios en HTML
- 16 - Practica 2: Un sitio web completo
- 17 - Usando color en el WWW
- 18 - Cómo cambiar la apariencia de una pagina
- 19 - Imagenes en las paginas Web (I)
- 20 - Imagenes en las paginas Web (II)
- 21 - Imagenes en las paginas Web (III)
- 22 - Cómo cambiar la apariencia de las imagenes
- 23 - Alternativas a las imagenes inline (I)
- 24 - Alternativas a las imagenes inline (II)
- 25 - Mejoras en las imagenes
- 26 - Cómo se crea una tabla HTML (I)
- 27 - Cómo se crea una tabla HTML (II)
- 28 - Alineamiento de tablas
- 29 - Alineamiento de celdas y filas
- 30 - Ancho de tablas y celdas
- 31 - Celdas que abarcan varias filas o columnas
- 32 - Margenes y separación de celdas
- 33 - Anidamiento
- 34 - Practica 3 - Tabla de Datos
- 35 - Practica 4 - Pagina Web con una estructura creada con tablas
- 36 - Practica 4 - Pagina Web con una estructura creada con tablas
- 37 - Practica 4 - Pagina Web con una estructura creada con tablas
- 38 - Estandares y extensiones del lenguaje HTML (I)
- 39 - Estandares y extensiones del lenguaje HTML (II)
- 40 - Extensiones a las listas (I)
- 41 - Extensiones a las listas (II)
- 42 - Alineamiento
- 43 - La etiqueta META
- 44 - Otras etiquetas del lenguaje HTML 3.2
- 45 - El atributo TARGET
- 46 - La etiqueta BASE
- 47 - Creación de paginas con frames
- 48 - Creación del documento de definición de frames (I)
- 49 - Creación del documento de definición de frames (II)
- 50 - Pagina completa con frames
- 51 - Atributos de la etiqueta FRAME
- 52 - Compatibilidad: NOFRAME
- 53 - Anidamiento de framesets
- 54 - Bordes de los frames
- 55 - Valores especiales del atributo TARGET
- 56 - Practica 5: Web de Los Alpes con frames
- 57 - Frames flotantes
- 58 - Sonido vídeo y otros ficheros externos
- 59 - Multimedia Inline (I)
- 60 - Multimedia Inline (I)
- 61 - Plug-ins y objetos incrustados
- 62 - Java en las Paginas Web
- 63 - Inserción de Applets Java (I)
- 64 - Inserción de Applets Java (II)
- 65 - Inserción de Applets Java (III)
- 66 - ActiveX, la tecnología del futuro
- 67 - Formularios en HTML
- 68 - Controles de Formularios (I)
- 69 - Controles de Formularios (II)
- 70 - Controles de Formularios (III)
- 71 - Controles de Formularios (IV)
- 72 - Otros controles
- 73 - Practica 6-Formulario para "Los Alpes"
- 74 - COMO USAR LOS DATOS DE UN FORMULARIO
- 75 - Envío De Ficheros Usando Formularios
|
Wikis relacionados con 'Curso completo de HTML - Cómo cambiar la apariencia de una pagina'
