Atributos
Como pueden leer en el titulo en esta entrada del blog nos dedicaremos exclusivamente a la aplicación de atributos a diferentes etiquetas del HTML.
Como anteriormente dije los atributos son "propiedades" que tienen las etiquetas y al especificarle un valor distinto al por defecto podremos mejorar la estética, maquetado, diseño, etc. de una página web.
Un ejemplo de atributo pueden verlo en la parte de las tablas cuando establecimos al atributo "border" el valor "1".
Debo aclarar de antemano que muchas de las cosas que veremos a continuación han caído en desuso, sin embargo, es necesario que las conozcan puesto que servirá para que estén preparados por si algún día se enfrentan con un HTML que fue creado hace mucho tiempo.
Comencemos…
Atributos para la etiqueta Body
La etiqueta <body> tiene ciertos atributos que permiten definir por ejemplo el color de fondo, el color del texto y el color de los links de todo el documento.
Para definir el color de fondo del documento HTML que estamos editando debemos utilizar el atributo "bgcolor". Este atributo puede recibir valores de tres formas posibles a saber:
Mediante un código de color RGB, mediante un código de color en Hexadecimal o mediante el nombre de un color preestablecido. Ejemplo:
Para que el color de fondo del documento sea Rojo tenemos tres formas de hacerlo:
En Hexadecimal: <body bgcolor="#FF0000">
En RGB: <body bgcolor="rgb(255,0,0)">
Por el Nombre: <body bgcolor="red">
Al igual que el fondo, de la misma manera se puede establecer el color que tendrá el texto dentro de documento HTML. Esto se hace mediante el atributo "text" y su valor, al igual que en "bgcolor", se puede escribir de tres formas distintas.
Supongamos que quiero que el color del texto sea blanco para qué contraste con el color rojo de fondo el código quedaría de la siguiente manera:
En Hexadecimal: <body bgcolor="#FF0000" text="#FFFFFF">
En RGB: <body bgcolor="rgb(255,0,0)" text="rgb(255,255,255)">
Por el Nombre: <body bgcolor="red" text="white">
Otros posibles nombre de colores:
Red – Pink – Yellow – Gold – Purple – LightGreen – Green – Olive – Blue – DarkBlue – Navy – Brown – White – Silver – Gray – Black.
Existen muchos más, sin embargo, estos son los más utilizados.
Ejemplo visual de una página con fondo rojo y color de texto blanco:
 |
| Fondo en Rojo y Texto en Blanco |
Definición de los colores de los Links de una página web.
Como ya se habrán dado cuenta, los links en una página web tienen varios colores dependiendo de factores como ser: Link visitado, Link no visitado, Link activo.
Este arcoíris de colores puede ser alterado mediante tres atributos que se definen en el <body> estos son: alink (Link Activo), link (Link no visitado), vlink (Link Visitado).
Al igual que los otros dos atributos de <body> la manera de establecerle un valor a los atributos de links es mediante un código hexadecimal, rgb o nombre de color.
El siguiente ejemplo establece que los links no visitados son verdes, los visitados son rojos y el activo gris. Veamos el código de esto:
<body link="green" vlink="red" alink="gray">
Así se ve en un navegador:
 |
| Utilizando los Atributos alink, vlink y link |
Pagina y Pagina2 son links visitados, Pagina3 es un link no visitado y Pagina50 es el Link en el cual el usuario esta clickeando, es decir, el Link activo.
A parte de la forma que utilizamos (que es mediante el nombre de color) existen dos formas más de escribir lo mismo:
Hexadecimal: <body link="#008000" vlink="#FF0000" alink="#808080">
RGB: <body link="rgb(0,128,0)" vlink="rgb(255,0,0)" alink="rgb(128,128,128)">
Aclaración: "Link Activo" se denomina cuando el usuario clickea sobre un link y mantiene presionado el botón del mouse, este se pondrá del color que se definió en vlink, sin embargo desaparecerá cuando suelte el click.
Imagen de fondo para un HTML
Finalmente llegamos al atributo "background", este atributo permite definir como fondo del documento a una imagen específica.
Su sintaxis es la siguiente:
<body background="fondotexto.jpg">
 |
| Utilizando el Atributo Background |
En este caso utilizamos como imagen de fondo a una imagen utilizada más arriba en el post.
Hasta acá llegamos por ahora, en la próxima entrega seguiremos viendo mas atributos.
No hay comentarios:
Publicar un comentario