mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
871 lines
20 KiB
HTML
871 lines
20 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Estructura general - Colores y fondos de página</title>
|
|
<script type="text/javascript" language="JavaScript">
|
|
<!--
|
|
function Abrefondos (){
|
|
fondos=window.open("selectordecolores/index.html","fondos","width=780,height=700,top=0,left=0");
|
|
return true;
|
|
}
|
|
//-->
|
|
</script>
|
|
|
|
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div id="localizador">
|
|
<p>La base>>Colores y fondos de página</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="pag2.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="texto6.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div id="contenido">
|
|
|
|
|
|
<h2>Diseñando
|
|
el aspecto general</h2>
|
|
|
|
|
|
|
|
<p>Hasta el momento las páginas que hemos creado
|
|
editando
|
|
directamente el código eran de color blanco. Sin embargo, es
|
|
extraño encontrar páginas WEB que se asemejen a
|
|
una hoja de papel; lo habitual es que se incluyan colores que hagan
|
|
más agradable su presentación. Pero, antes de
|
|
lanzarte a una desenfrenada pasión carnavalesca por el color
|
|
no estaría de más que reflexionaras sobre la
|
|
siguiente aportación de estilo.</p>
|
|
|
|
|
|
|
|
<div class="estilo"> El uso indiscriminado
|
|
de
|
|
colores e imágenes no aumenta la calidad de una
|
|
página, más aún, tiende a reducirla.
|
|
No estaría de más respetar unas sencillas reglas:
|
|
<ul>
|
|
|
|
|
|
|
|
<li>Los colores, de fondo o de texto, se utilizan con el
|
|
objetivo de contribuir a la legibilidad de los textos. Salvo que sirvan
|
|
para diferenciar contenidos las páginas que constituyen una
|
|
sede WEB deberían tender a un diseño uniforme que
|
|
transmita al visitante la sensación de que se encuentra en
|
|
un lugar con señas de identidad propias.
|
|
</li>
|
|
|
|
|
|
|
|
<li> Los archivos de imágenes ocupan espacio...
|
|
mucho espacio. Transmitirlos lleva tiempo... mucho tiempo. Por tanto,
|
|
habrá que minimizar en lo posible el tamaño de
|
|
las imágenes y utilizarlas cuando sean significativas, no
|
|
meramente como elementos decorativos. Si utilizamos imágenes
|
|
para enlazar unas páginas con otras hagámoslo
|
|
siempre con las mismas: contribuiremos a la "imagen de marca" y
|
|
aceleraremos la navegación puesto que sólo se
|
|
descargarán la primera vez.</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<h3> Color de fondo </h3>
|
|
|
|
|
|
|
|
<p>La forma más elemental de modificar el aspecto de
|
|
una página es variando el color del fondo. Hay unas cuantas
|
|
explicaciones sobre la forma de representar el color en una pantalla de
|
|
ordenador, pero antes de verlas vamos a hacer una práctica
|
|
sencilla para cambiar el color del fondo de nuestra página.</p>
|
|
|
|
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 16" title="Actividad 16" src="../imagenes/numeracion/dieciseis.gif">
|
|
<ul>
|
|
|
|
|
|
|
|
<li>Localiza en la
|
|
barra de herramientas el icono que
|
|
representa el color de fondo <img class="imgcentr" alt="Barra de herramientas: Selector de color de fondo" title="Barra de herramientas: Selector de color de fondo" src="img/seleccionarcolorfondo.png" height="30" width="312">y haz clic sobre él.</li>
|
|
|
|
|
|
|
|
<li>Para empezar puedes optar por marcar uno de los colores que
|
|
aparecen como predefinidos y pulsar el botón <span style="font-weight: bold;">Aceptar</span>.</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p>Hay un procedimiento algo que nos ofrece alguna posibilidad
|
|
más para ayudarnos a elegir correctamente los colores para
|
|
nuestra página, pero, tras haber visto el procedimiento
|
|
más sencillo vamos a detenernos para
|
|
entender cómo se definen los colores en una
|
|
página
|
|
WEB. </p>
|
|
|
|
|
|
|
|
<p>Para que el navegador sepa cuáles son los colores
|
|
que
|
|
tiene que presentar se utiliza la denominada combinación <acronym title="Rojo Verde Azul" style="">RVA</acronym>
|
|
(Rojo-Verde-Azul) que en muchos sitios verás en sus siglas
|
|
en inglés (<acronym title="Red Green Blue">RGB</acronym>
|
|
por Red-Green-Blue).</p>
|
|
|
|
|
|
|
|
<p>Este tipo de definición del color se basa en la
|
|
combinación de 256 posibles cantidades de cada uno de los
|
|
colores. Es como si tuviéramos un cuentagotas con capacidad
|
|
para ir depositando sobre cada punto de la pantalla desde 0 a 255 gotas
|
|
de cada uno de los colores básicos. Con esta forma de
|
|
trabajar tendríamos desde el negro absoluto que
|
|
correspondería a la ausencia total de color, hasta el blanco
|
|
absoluto que sería la mezcla de las 255 gotas de cada uno de
|
|
los colores. Entre ambos extremos quedan las posibles combinaciones de
|
|
"gotas" de colores: 256 x 256 x 256 que hacen un total de 16<sub><font size="-2">1</font></sub>777.216 colores
|
|
diferentes.</p>
|
|
|
|
|
|
|
|
<p>Para representar esta gama de combinaciones se utilizan tres
|
|
pares de números que indican respectivamente la cantidad de
|
|
rojo, verde y azul que componen cada color. Por cierto, seguro que te
|
|
estás preguntando cómo se hace para expresar una
|
|
cantidad mayor de 99 "gotas" con un solo par de números. El
|
|
misterio está en que no se utiliza la base 10, sino la
|
|
notación hexadecimal o base 16, donde la A equivale al 10
|
|
decimal, la B al 11 y así sucesivamente hasta la F que
|
|
equivale al 15. Además, para pasar de un orden de unidades
|
|
al siguiente hay que juntar 16 unidades de cada orden en vez de 10 que
|
|
es a lo que estamos habituados. Por ejemplo, la notación 12
|
|
en hexadecimal equivaldría a nuestro 18 ya que es una
|
|
"decena hexadecimal", o sea 16 unidades, y dos unidades sueltas. Veamos
|
|
algunos ejemplos:</p>
|
|
|
|
|
|
|
|
<center>
|
|
<table width="90%">
|
|
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
<th>
|
|
|
|
|
|
<p>Valores</p>
|
|
|
|
|
|
|
|
</th>
|
|
|
|
|
|
|
|
<th width="10"> </th>
|
|
|
|
|
|
|
|
<th>
|
|
|
|
|
|
<p>Color resultante</p>
|
|
|
|
|
|
|
|
</th>
|
|
|
|
|
|
|
|
<th width="10"> </th>
|
|
|
|
|
|
|
|
<th>
|
|
|
|
|
|
<p>Valores</p>
|
|
|
|
|
|
|
|
</th>
|
|
|
|
|
|
|
|
<th width="10"> </th>
|
|
|
|
|
|
|
|
<th>
|
|
|
|
|
|
<p>Color resultante</p>
|
|
|
|
|
|
|
|
</th>
|
|
|
|
|
|
|
|
<th width="10"> </th>
|
|
|
|
|
|
|
|
<th>
|
|
|
|
|
|
<p>Valores</p>
|
|
|
|
|
|
|
|
</th>
|
|
|
|
|
|
|
|
<th width="10"> </th>
|
|
|
|
|
|
|
|
<th>
|
|
|
|
|
|
<p>Color resultante</p>
|
|
|
|
|
|
|
|
</th>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<p>FF0000</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#ff0000"> </td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<p>00FF00</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#008000"> </td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<p>0000FF</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#0000ff"> </td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
<td height="20">
|
|
|
|
|
|
<p>FFFF00</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td height="20" width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#ffff00" height="20"> </td>
|
|
|
|
|
|
|
|
<td height="20" width="10"> </td>
|
|
|
|
|
|
|
|
<td height="20">
|
|
|
|
|
|
<p>FF00FF</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td height="20" width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#ff00ff" height="20"> </td>
|
|
|
|
|
|
|
|
<td height="20" width="10"> </td>
|
|
|
|
|
|
|
|
<td height="20">
|
|
|
|
|
|
<p>00FFFF</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td height="20" width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#00ffff" height="20"> </td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<p>25A7BB</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#25a7bb"> </td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<p>ACB312</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#acb312"> </td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<p>6047B6</p>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td width="10"> </td>
|
|
|
|
|
|
|
|
<td bgcolor="#6047b6"> </td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
</center>
|
|
|
|
|
|
|
|
<p>El otro procedimiento para modificar
|
|
el color de fondo de la página lo encontramos a
|
|
través del menú <span class="refmenu">formato </span><span class="refmenu"><img class="imgcentr" style="font-weight: bold; width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span> <span class="refmenu">colores
|
|
y fondo de la página</span>.</p>
|
|
|
|
|
|
|
|
<p><img class="flotder" style="width: 419px; height: 395px;" alt="Panel de selección de colores de la página" title="Panel de selección de colores de la página" src="img/colores.png"> En el panel que aparece se muestra la
|
|
combinación básica que se aplica por defecto a
|
|
las nuevas páginas: fondo blanco, texto en negro y color
|
|
para los enlaces en diferentes situaciones (enlace simple, activo o
|
|
visitado) pero sin darnos la posibilidad de modificar ninguno de ellos.</p>
|
|
|
|
|
|
|
|
<p>Si optamos por marcar el botón de
|
|
verificación para <span class="refmenu">usar
|
|
colores personalizados</span> se activan los botones que
|
|
acompañan a cada uno de los elementos.</p>
|
|
|
|
|
|
|
|
<p><img style="width: 372px; height: 163px;" alt="Usar colores personalizados" title="Usar colores personalizados" src="img/colores2.png"></p>
|
|
|
|
|
|
|
|
<p>Comprobamos que en la zona derecha del panel se
|
|
presenta un recuadro
|
|
que sirve de testigo visual para mostrarnos el efecto visual que
|
|
produce la combinación de colores que se está
|
|
aplicando.</p>
|
|
|
|
|
|
|
|
<p>Cuando pulsamos sobre algunos de los botones se lanza la
|
|
paleta de selección de color para ese elemento a la que la
|
|
dedicamos ahora algo más de atención.</p>
|
|
|
|
|
|
|
|
<p><img class="flotizq" style="width: 479px; height: 417px;" alt="Panel para seleccionar los colores" title="Panel para seleccionar los colores" src="img/colores3.png">Además de los colores
|
|
predefinidos que hemos utilizado previamente podemos elegir cualquiera
|
|
de los 16,8 millones de colores arrastrando la cruceta que se muestra
|
|
en el cuadro principal para modificar el tono y la
|
|
saturación. El brillo del color se modifica arrastrando
|
|
cursor hacia la izquierda o derecha de la barra que aparece bajo el
|
|
cuadro de tono y saturación.</p>
|
|
|
|
|
|
|
|
<p>A medida que modificamos la posición de estos dos
|
|
indicadores veremos como se van produciendo variaciones en los
|
|
indicadores numéricos de la zona inferior, tanto en la
|
|
combinación de RVA como en la traducción de esa
|
|
combinación a valores hexadecimales.</p>
|
|
|
|
|
|
|
|
<p>El lenguaje <acronym title="Hypertext Markup Language">HTML</acronym>
|
|
también utiliza nombres, en inglés, para
|
|
identificar algunos colores. Cuando el valor seleccionado coincide con
|
|
alguno de los colores que tienen un nombre asignado dicho nombre
|
|
aparece en la caja correspondiente, permaneciendo esta vacía
|
|
si la combinación no se corresponde con ningún
|
|
color con nombre. En el ejemplo que se muestra en la imagen aparece el
|
|
nombre yellow (amarillo) que identifica a la combinación
|
|
hexadecimal ffff00.</p>
|
|
|
|
|
|
|
|
<p>Una vez localizado el color que deseamos basta con pulsar el
|
|
botón Aceptar para que se aplique ese valor al elemento
|
|
desde el que habíamos lanzado el panel de
|
|
selección de colores y volvamos al panel anterior para poder
|
|
dar por finalizado el proceso o elegir el color de otro
|
|
elemento. </p>
|
|
|
|
|
|
|
|
<p>Es importante en este momento comprobar que las combinaciones
|
|
entre los colores del fondo y de los diferentes tipos de texto y
|
|
enlaces es armoniosa y facilita la legibilidad. </p>
|
|
|
|
|
|
|
|
<img class="flotizq" alt="Selección de color de texto en la barra de herramientas" title="Selección de color de texto en la barra de herramientas" src="img/colores4.png" height="52" width="52">Ya
|
|
conocías la
|
|
forma rápida de acceder a la modificación del
|
|
color de fondo de la página desde la barra de herramientas.
|
|
También podemos desde ella modificar el color del texto que
|
|
tengamos seleccionado, o del que se escriba a partir de ese momento.
|
|
Como ya es habitual en la mayoría de los programas el
|
|
recuadro que figura más "abajo" (en nuestro ejemplo el
|
|
blanco) representa el color de fondo, mientras que el que se encuentra
|
|
más "arriba" indica el color del primer plano. Pulsando pues
|
|
sobre el cuadro de "primer plano" se abriría el panel de
|
|
selección de color que acabamos de comentar.
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 17" title="Actividad 17" src="../imagenes/numeracion/diecisiete.gif">
|
|
<ul>
|
|
|
|
|
|
|
|
<li>Aprovecharemos la
|
|
página que tenemos abierta y,
|
|
modificamos su color de fondo aplicando el procedimiento
|
|
descrito de selección de colores desde el menú.</li>
|
|
|
|
|
|
|
|
<li>Variamos también el color del texto normal y
|
|
aceptamos las modificaciones.</li>
|
|
|
|
|
|
|
|
<li>Escribimos una frase.</li>
|
|
|
|
|
|
|
|
<li>Recurrimos a la pestaña <img class="imgcentr" style="width: 99px; height: 21px;" alt="Codigo fuente" title="Codigo fuente" src="../imagenes/pestanacodigofuente.png"> para comprobar cómo se han
|
|
recogido las modificaciones en el código de la
|
|
página.</li>
|
|
|
|
|
|
|
|
<li>Si pulsamos sobre el botón <img style="width: 54px; height: 43px;" alt="Navegar" title="Navegar" src="../imagenes/botonnavegar.png"> para
|
|
mostrar los resultados en el navegador comprobaremos que, como
|
|
aún no hemos salvado la página, el programa nos
|
|
pide que le demos un título para la página
|
|
así como un nombre y una ubicación al archivo.
|
|
Utiliza el título que te parezca más adecuado y
|
|
nombra el archivo como <strong>actividad17.html</strong></li>
|
|
|
|
|
|
|
|
<li>Modifica los colores hasta encontrar una
|
|
combinación que no
|
|
dificulte la legibilidad.</li>
|
|
|
|
|
|
|
|
<li>Guardamos definitivamente el trabajo con el nombre que le
|
|
habías adjudicado: <strong>actividad17.html</strong></li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="codigo">
|
|
<p><img src="../imagenes/atencion.gif" height="25" hspace="5" width="28">El color del
|
|
fondo de página es un atributo de la etiqueta <code><body> </code><br>
|
|
|
|
|
|
|
|
Si vemos el código de una página que tenga el
|
|
fondo de color verde puro sería así:<br>
|
|
|
|
|
|
|
|
<code><span><body
|
|
bgcolor="#00ff00"></span></code> (El
|
|
símbolo
|
|
# es el equivalente anglosajón de nuestra abreviatura
|
|
nº)</p>
|
|
|
|
|
|
|
|
<p>El código que crea N|VU recoge de forma
|
|
diferente las combinaciones de color dependiendo de que se haya
|
|
activado o no la utilización de estilos en el
|
|
menú <span class="refmenu">herramientas<span class="refmenu"> </span><img class="imgcentr" style="font-weight: bold; width: 14px; height: 13px;" alt="submenú" title="submenú" src="../imagenes/flechamenu.png"> preferencias</span><br>
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
Si se trabaja sin estilos el código que se genera
|
|
será del siguiente tipo:<br>
|
|
|
|
|
|
|
|
<code><span><body
|
|
text="#000000"
|
|
bgcolor="#6666cc" link="#000099" vlink="#990099"
|
|
alink="#000099"> </span></code><br>
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
Sin embargo, si se activa la utilización de estilos,
|
|
quedaría:<br>
|
|
|
|
|
|
|
|
<code><body
|
|
style="color:
|
|
rgb(0,0,0); background-color: rgb(102,102,204);" link="#000099"
|
|
vlink="#ff0099" alink="#000099"></code><br>
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
Lo importante es que, cuando se activan los estilos, el color del texto
|
|
y el del fondo se reflejan con notación decimal en lugar de
|
|
hexadecimal
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 18" title="Actividad 18" src="../imagenes/numeracion/dieciocho.gif">
|
|
<ul>
|
|
|
|
|
|
|
|
<li>Si
|
|
habías cerrado el ejercicio anterior vuelve a abrirlo</li>
|
|
|
|
|
|
|
|
<li>Utiliza la opción de menú <span class="refmenu">ver <span style="font-weight: normal;" class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"> </span>código
|
|
fuente html</span><b><strong> </strong></b>o,
|
|
más cómodamente, la pestaña <img class="imgcentr" style="width: 99px; height: 21px;" alt="Codigo fuente" title="Codigo fuente" src="../imagenes/pestanacodigofuente.png">
|
|
para
|
|
localizar el código del color de fondo.</li>
|
|
|
|
|
|
|
|
<li>Modifica el color de fondo para que tenga el valor FFCC66 y
|
|
guarda el archivo como <strong>actividad18.html</strong></li>
|
|
|
|
|
|
|
|
<li>Vamos a hacer ahora un ejercicio de estimación,
|
|
para lo que tendrás que responderte mentalmente a la
|
|
pregunta ¿Qué combinación de las
|
|
siguientes estará más cerca de los tonos
|
|
salmón: FEBBAA, 55AAAA, 32BC7A?. (Utiliza los valores
|
|
254,187,170 / 85,170,170 / 50,188,122 si tienes activados los estilos).
|
|
</li>
|
|
|
|
|
|
|
|
<li>Intenta justificar mentalmente tu respuesta y
|
|
luego comprueba la validez de tu estimación introduciendo el
|
|
dato manualmente. Puedes comprobar también los otros dos
|
|
datos.</li>
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
Puedes hacer pruebas en este <a href="javascript:void(0)" onclick="Abrefondos ()" title="Visualizador de combinaciones de color proveniente de pagetutor.com">visualizador</a>
|
|
para comprobar los resultados de algunas combinaciones de color.
|
|
<div class="estilo">
|
|
<p>Ahora que ya sabes
|
|
cómo hacer que tu página muestre diferentes
|
|
colores de fondo es el momento de que pongas en juego tu sentido
|
|
estético.</p>
|
|
|
|
|
|
|
|
<p>¿Te parece agradable que cada una de las
|
|
páginas
|
|
de un sitio WEB tenga un color diferente o, por el contrario, te
|
|
provoca cierto sobresalto?</p>
|
|
|
|
|
|
|
|
<p>¿Podría ser útil un cambio de
|
|
color
|
|
para identificar secciones dentro de un sitio WEB? ¿De
|
|
hacerlo, utilizarías un cambio brusco o lo harías
|
|
dentro de una gama tonal para todo el sitio?
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p class="avisos"> <img src="../imagenes/atencion.gif" align="left" height="25" width="28">Seguro que
|
|
con esas dos preguntas puedes empezar tus reflexiones, pero te apunto
|
|
otra cuestión que deberías tener en cuenta: hay
|
|
combinaciones estéticas y muy legibles que pueden ser
|
|
inadecuadas si pretendemos que la información de la
|
|
página se destine a imprimir. ¿Que
|
|
ocurriría si alguien pretende imprimir una página
|
|
que tiene el texto en blanco sobre un fondo de tono azul oscuro? </p>
|
|
|
|
<br>
|
|
|
|
<div class="estilo">
|
|
<p>Cada vez es más habitual que se utilicen recursos
|
|
para que los enlaces no aparezcan subrayados. Sin embargo, la
|
|
opción que utilizan los navegadores como alternativa
|
|
predeterminada es mostrar el <span style="color: rgb(51, 51, 255); text-decoration: underline; font-weight: bold;">enlace</span>
|
|
en color azul y subrayado, lo cual ha creado un aprendizaje
|
|
condicionado en el que hemos asociado esas características
|
|
visuales a la función de enlace. </p>
|
|
|
|
|
|
|
|
|
|
|
|
<p> Por cierto, a pesar de que ya has visto que los enlaces entre
|
|
las páginas de este curso no aparecen subrayados
|
|
¿no has intentado pinchar en la palabra enlace para ver a
|
|
dónde te llevaba? Está claro que no
|
|
deberíamos, bajo ningún concepto, utilizar el
|
|
color azul y el subrayado para resaltar algún
|
|
término, ya que inducimos a error al visitante al alterar el
|
|
esquema perceptivo propio de la WEB.</p>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|