Otros recursos
Color de fondoBuzón de mensajes
Gráfico de fondo
Color de los enlaces
Texto en color
Escalera de colorMenú desplegable
Enlaces | Gráficos | Tablas | Textos |
Características del contenido de la página
Por defecto los navegadores reproducen un fondo gris claro o blanco, texto en color negro, letra redonda, etc., tal como se mencionaba en el apartado de composición de textos o en el de enlaces.
Para cambiar esas características, se dispone de directivas que han de ser incluidas dentro de la etiqueta <body>
Se indica mediante la directriz bgcolor="blue"
si deseamos que el color de fondo del documento sea azul (es el mismo
procedimiento utilizado para el caso de celdillas de tablas, pero ahora
para todo el documento)
Recomendación: la utilización de un color de fondo viene limitada por la visibilidad del texto y de otros gráficos (contraste entre colores, etc.)
Se indica mediante la directriz background="URL"
en la que dispondremos la dirección URL del gráfico que deseemos utilizar, siguiendo lo ya visto en el apartado de gráficos.
Recomendación: no todos los gráficos sirven para ponerlos
de fondo, ya que pueden camuflar el texto u otros gráficos; su interferencia
con los elementos del documento puede ser mayor que la de un color de fondo.
Una norma general es usar tonos pastel para estos gráficos.
Color de los enlaces
sobre texto o sobre gráficos (con reborde cuyo valor no sea
0)
si deseamos que aparezcan en rojo (sin visitar), en violeta (al seleccionarlos) y en verde los visitados tal como puede verse aquí y en Enlaces
Se indica mediante la directriz text="magenta"
si es el color magenta el que queremos para el texto del documento, salvo que se indique otro mediante su etiqueta en el lugar correspondiente.
Ejemplo 1)
En este documento el color de fondo es cyan, el texto está en color índigo, los enlaces en color rojo, sin visitar, violeta al seleccionarlos y verde los visitados.en código html
<body bgcolor="cyan" text="indigo" link="red" alink="violet" vlink="green"></body>
(entre ambas partes de la etiqueta está todo el contenido del documento)
Mediante la directriz mailto se crea un buzón de correo electrónico en nuestra página web. Puede ligarse a un texto o a un gráfico, de manera que al seleccionarlo hace que el navegador abra el programa de correo electrónico asociado (que habrá de estar habilitado en las preferencias).
Ejemplo 2)
sobre un textoen código html
<a href="mailto:gpplapam@lg.ehu.es">Marcos A. Lamolda</a>o bien sobre un gráfico (en este caso la estrella)
en código html
<a href="mailto:gpplapam@lg.ehu.es"><img src="../marcas/estrella.gif" hspace=2 border=0 height=8 width=8></a> Marcos A. Lamolda
Generador de Colores
Los navegadores interpretan correctamente la directriz con el nombre en inglés de los colores habituales, según hemos visto en Composición de textos y otros ejemplos de esta guía.
La directriz correcta usa una numeración hexadecimal para los tres colores básicos: rojo, verde y azul desde el valor 0 (00) al de saturación 255 (FF).
Contiene seis caracteres, los dos primeros para el rojo, los centrales para el verde y los dos últimos para el azul
Ejemplo 3)
Se dan las directrices para varios colores sencillos, seguidos de sus códigos html respectivosblanco #FFFFFF <font color="#FFFFFF">blanco</font> #FFFFFF (se produce por saturación de los tres colores básicos)
rojo #FF0000 <font color="#FF0000">rojo</font> #FF0000
amarillo #FFFF00 <font color="#FFFF00">amarillo</font> #FFFF00
verde #00FF00 <font color="#00FF00">verde</font> #00FF00
cyan #00FFFF <font color="#00FFFF">cyan</font> #00FFFF (el texto en color cyan no se ve puesto que es el del color de fondo)
azul #0000FF <font color="#0000FF">azul</font> #0000FF
magenta #FF00FF <font color="#FF00FF">magenta</font> #FF00FF
negro #000000 <font color="#000000">negro</font> #000000 (se produce por defecto, salvo en este caso en que se ha dado la directriz de texto en color índigo, por lo que se trata como a cualquier otro color)
Para oscurecer un color hay que bajar el valor correspondiente.
Para aclararlo hay que subir el valor de otro de los colores, dependiendo de hacia que parte del espectro lúminico deseemos desplazarlo.
Ejemplo 4)
Los valores utilizados son indicativos para ver los cambiosrojo oscuro #C00000 <font color="#C00000">rojo oscuro</font> #C00000
naranja #FF9900 <font color="#FF9900">naranja</font> #FF9900
verde claro #50FF00 <font color="#50FF00">verde claro</font> #50FF00
verde oscuro #007000 <font color="#007000">verde oscuro</font> #007000
azul claro #0099FF <font color="#0099FF">verde oscuro</font> #0099FF
azul oscuro #000090 <font color="#000090">azul oscuro</font> #000090
morado #9900F0 <font color="#9900F0">morado</font> #9900F0
violeta #FF70E0 <font color="#FF70E0">violeta</font> #FF70E0
rosa #FFCCCC <font color="#FFCCCC">rosa</font> #FFCCCC
a | b | c | d | e | f | g | h | i | j | k | l | m | n | ñ | o | p | q | r | s | t | u | v | w | x | y | z |
a #990000 | d #FF6600 | g #FFFF33 | j #99CC00 | m #33FF33 | o #33FFCC | r #00CCCC | u #3333FF | x #993399 |
b #CC0000 | e #FF9900 | h #CCFF00 | k #33CC00 | n #33FF66 | p #00FFCC | s #0099CC | v #333399 | y #CC3399 |
c #FF3300 | f #FFCC00 | i #CCCC00 | l #33FF00 | ñ #33FF99 | q #33CCCC | t #0066CC | w #663399 | z #FF66FF |
Se construye mediante una <form> propia del código JavaScript. No obstante es un caso sencillo y se coloca directamente en el documento html en el lugar que deseemos que aparezca; siédole de aplicación las directrices usuales para su maquetado (igual que si fuera una parte de texto o gráfico).
En este caso es un desplegable con la opción de seleccionar entre los otros capítulos de esta guía. Como no tiene directriz sobre su posición aparece a la izquierda y entre este párrafo y el anterior, que es donde se ha dispuesto
Nótese que el color de las opciones es negro y no índigo, como el resto del texto del documento, ya que no está regido por el código html del conjunto del documento.
<form>
<select name="menu" onChange="top.location.href=this.form.menu.options[this.form.menu.selectedIndex].value">
<option value="adicional.html" selected> Escoger capítulo
<option value="texto.html"> Texto
<option value="enlaces.html"> Enlaces
<option value="graficos.html"> Gráficos
<option value="tablas.html"> Tablas
</select>
</form>
Es un sencillo <script>, en código JavaScript, que permite incluir la fecha del día completa, o sea días de la semana y del mes, mes y año.
Se coloca su código en la posición deseada del documento html, en este caso entre este párrafo y el anterior, y centrado por medio de la directriz <center>. En el ejemplo, el tipo de letra es Verdana, tamaño +1, en negrita y color rojo (ver su código, más abajo, porque algunas directrices y la sintaxis difieren de las del código html).
su código JavaScript
<p>
<center>
<script languaje="JavaScript" class="normal">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym=daym
var dayarray=new Array("Domingo","Lunes","Martes","Miércoles",
"Jueves","Viernes","Sábado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto",
"Septiembre","Octubre","Noviembre","Diciembre")
document.write("<strong><font size='+1' color='#FF0000' face='Verdana'>"+dayarray[day]+", "+daym+" de "+montharray[month]+" de "+year+"</font></strong>")
</script>
</center>
Otro <script> sencillo que nos permite poner un anuncio móvil en la barra inferior del navegador, tal como se ve en este documento.
El código del <script>se dispone dentro de la etiqueta <head></head>, igual que se hizo con <title> (ver Introducción).
Además hay que poner la directriz onload="startStatusScroller();" en la etiqueta <body>, igual que se hizo para la directriz bgcolor para el color de fondo o para darle a todo el texto un determinado color (ver más arriba ).
su código JavaScript
<!-- TOP scrolling status bar message-->
<!--
</script>
<script language="JavaScript">
var statBarMsg = "
function startStatusScroller()
{
window.status = statBarMsg;
statBarMsg = statBarMsg.substring(1, statBarMsg.length) + statBarMsg.substring(0, 1)
setTimeout("startStatusScroller()", 150)
}
//-->
<!--BOTTOM scrolling status bar message-->
Para modificar el contenido del anuncio se hace sobre la línea del código que lo contiene (aparece en color índigo)
Enlaces | Gráficos | Tablas | Textos |