Completo tutorial de HTML - Atributos para paginas
(5 opiniones)
Tutorial de
Indaya.com - 11 de Septiembre de 2005
dar un aspecto a la página muy personalizado. Podemos definir atributos como el
color de fondo, el color del texto o de los enlaces. Estos atributos se definen
en la etiqueta <body> y, como decíamos son generales a toda la página.
Lo mejor para explicar su funcionamiento es verlos uno por uno.
Atributos para fondos
bgcolor: El color de fondo que podemos asignar con bgcolor es un color
plano, es decir el mismo para toda la superficie del navegador.
background: sirve para indicar la colocación de una imagen como fondo de
la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas
veces hasta ocupar todo el espacio del fondo de la página. En capítulos más
adelante veremos como se insertan imágenes con HTML y los tipos de imágenes que
se pueden utilizar.
Ejemplo de fondo
Vamos a colocar esta imagen como fondo en la página.
La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio
que la página. En este caso se colocaría la siguiente etiqueta <body>
<body background="fondo.jpg">
| Consejo: siempre que coloquemos una imagen de fondo, debemos poner también un color de fondo cercano al color de la imagen. Esto se debe a que, al colocar una imagen de fondo, el texto de la página debemos colocarlo en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por cualquier cuestión (Por ejemplo tener deshabilitada la carga de imágenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la web. Creo que lo mejor será poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner un texto claro para que se pueda leer. Si el visitante que accede a la página no ve la imagen de fondo, le saldrá el fondo por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasará que no podremos leer el texto convenientemente. Ocurre parecido cuando se está cargando la página. Si todavía no ha llegado a nuestro sistema la imagen de fondo, se verá el fondo que hayamos seleccionado con bgcolor y es interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de fondo. |
Color del texto
text: este atributo sirve para asignar el color del texto de la página.
Por defecto es el negro.
Además del color del texto, tenemos tres atributos para asignar el color de los
enlaces de la página. Ya debemos saber que los enlaces deben diferenciarse del
resto del texto de la página para que los usuarios puedan identificarlos
fácilmente. Para ello suelen aparecer subrayados y con un color más vivo que el
texto. Los tres atributos son los siguientes:
link: el color de los enlaces que no han sido visitados. (por defecto es
azul clarito)
vlink: el color de los enlaces visitandos. La "v" viene justamente de la
palabra visitado. Es el color que tendrán los enlaces que ya hemos visitado. Por
defecto su color es morado. Este color debería ser un poco menos vivo que el
color de los enlaces normales.
alink: es el color de los enlaces activos. Un enlace está activo en el
preciso instante que se pulsa. A veces es difícil darse cuenta cuando un enlace
está activo porque en el momento en el que se activa es porque lo estamos
pulsando y en ese caso el navegador abandonará la página rápidamente y no
podremos ver el enlace activo más que por unos instantes mínimos.
Ejemplo de color del texto
Vamos a ver una página donde el color de fondo sea negro, y los colores del
texto y los enlaces sean claros. Pondremos el color de texto balnco y los
enlaces amarillos, más resaltados los que no estén visitados y menos resaltados
lo que ya están visitados. Para ello escribiríamos la etiqueta body así:
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">
Márgenes
Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen
en las páginas, lo que es muy útil para eliminar los márgenes en blanco que
aparecen a los lados, arriba y debajo de la página. Estos atributos son
distintos para Internet Explorer y para Netscape Navigator, por lo que debemos
utilizarlos todos si queremos que todos los navegadores los interpreten
perfectamente.
leftmargin: para indicar el margen a los lados de la página. Válido para
iexplorer.
topmargin: para indicar el margen arriba y debajo de la página. Para
iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los
lados)
marginheight: igual que topmargin, pero para Netscape. (Margen arriba y
abajo)
Un ejemplo de página sin margen es la propia página de DesarrolloWeb.com, que
estás visitando actualmente. (Por lo menos a la hora de escribir este artículo)
Además, vamos a ver otra página sin márgenes, por si alguien necesita ver el
ejemplo en estas líneas.
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
<br>
<br>
Gracias por visitarme!
</td></tr></table>
</body>
Esta página tiene el fondo blanco y dentro una tabla con el fondo rojo. En la
página podremos ver que la tabla ocupa el espacio en la página sin dejar sitio
para ningún tipo de margen.
- 1 - Prólogo al manual de HTML
- 2 - Introducción al HTML
- 3 - Sintaxis del HTML
- 4 - Tu primera pagina
- 5 - Formato de parrafos en HTML
- 6 - Formateando el texto
- 7 - Color, tamaño y tipo de letra
- 8 - Atributos para paginas
- 9 - Listas I
- 10 - Listas II
- 11 - Listas III
- 12 - Caracteres especiales
- 13 - Enlaces internos
- 14 - Enlaces en HTML
- 15 - Enlaces locales
- 16 - Enlaces externos, de correo y hacia archivos
- 17 - Imagenes en HTML
- 18 - Alineación de imagenes con HTML
- 19 - Formatos graficos para paginas web
- 20 - Tablas en HTML
- 21 - Tablas en HTML. Atributos para filas y celdas
- 22 - Tablas en HTML. Atributos de la tabla y conclusión
- 23 - Formularios HTML
- 24 - Elementos de Formularios. Campos de texto
- 25 - Otros elementos de formulario
- 26 - Envio, borrado y demas en formularios HTML
- 27 - Mapas de imagenes con HTML
- 28 - Frames en HTML
- 29 - Frames - Explicación basica
- 30 - Frames - Creación de una estructura simple
- 31 - Frames - Una pagina en cada marco
- 32 - Frames - Dirigir los enlaces
- 33 - Frames - Anidar frames
- 34 - Frames - Atributos avanzados
- 35 - Ventajas e inconvenientes del uso de frames
- 36 - Las nuevas etiquetas de HTML 4.0
- 37 - Las nuevas etiquetas de HTML 4.0 (1)
- 38 - Las nuevas etiquetas de HTML 4.0 (2)
- 39 - Sonido en HTML I, introducción
- 40 - Sonido en HTML II, características del sonido digital
- 41 - Sonido en HTML (III)
- 42 - Sonido en HTML (IV)
- 43 - Sonido en HTML (V)
- 44 - Frames
|
Wikis relacionados con 'Completo tutorial de HTML - Atributos para paginas'
