Composición de una página web en código html

Otros recursos

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>

Color de fondo

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.)

Gráfico de fondo

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

Texto en color

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)

Buzón de mensajes

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 texto

Marcos A. Lamolda

en 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)

Marcos A. Lamolda

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 respectivos

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 cambios

Escalera de color

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

Menú desplegable

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.

su código JavaScript

<form>
    <select name="menu" onChange="top.location.href=this.form.menu.options[this.form.menu.selectedIndex].value">
    <option value="adicional.html" selected> Escoger cap&iacute;tulo
    <option value="texto.html"> Texto
    <option value="enlaces.html"> Enlaces
    <option value="graficos.html"> Gr&aacute;ficos
    <option value="tablas.html"> Tablas
    </select>
</form>

Las diferentes opciones se ponen por orden de aparición en el menú desplegable, comenzando por el título que se desee para el menú.
A cada opción se le pone la URL del documento deseado en la etiqueta <option value="URL">, añadiendo selected en la primera de ellas que constituye el título del menú, como se refirió anteriormente.

Fecha del día

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&eacute;rcoles",
"Jueves","Viernes","S&aacute;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>

Anuncio móvil

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 language="JavaScript">

<!--
var statBarMsg = "Ultimo cambio: 26 de enero de 2004 ... " ;
function startStatusScroller()
{
window.status = statBarMsg;
statBarMsg = statBarMsg.substring(1, statBarMsg.length) + statBarMsg.substring(0, 1)
setTimeout("startStatusScroller()", 150)
}
//-->

</script>
<!--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

©   Marcos A. Lamolda 2003portada