SECCIÓN BODY
En esta sección es donde van todas las cosas que se van a ver en nuestra página. Por eso vamos a empezar por lo que no queremos que se vea y eso son los comentarios, que los que hacemos esto metemos en el código para no perdernos en la maraña de datos que tiene una página (echa un vistazo al código y lo entenderás, menu ver-código fuente).
El primer método que apareció, y aún sirve, es un poco complicado de aprender: <!-- Aqui se pone lo que sea -->.
|
<BODY>
<!-- Aqui va el texto rojo --> <FONT COLOR=red> Hola </FONT> </BODY> |
Y sólo se ve:
|
Hola
|
Es decir, que no se ve lo de "Aquí va el texto rojo".
Aparece luego una nueva, más lógica, pero con el mismo funcionamiento y es la <COMMENT> y su cierre (sólo Explorer).
|
<BODY>
<COMMENT> Aqui va el texto rojo </COMMENT> <FONT COLOR=red> Hola </FONT> </BODY> |
Y sólo se ve lo mismo de antes:
|
|
Hay otra, que sólo se usa en las hojas de estilo. Ya la veremos (//el texto que sea), sin cierre y ocupando una sola línea.
Los márgenes de los documentos son tratados de distinta forma en los dos navegadores mayoritarios. Así, va a ser necesario poner varios atributos dentro de la etiqueta <BODY> (dentro) que, recuerda, se cierra al final de todo.
Los atributos son TOPMARGIN, LEFTMARGIN, BOTTOMMARGIN, RIGHTMARGIN (Explorer) y MARGINHEIGHT y MARGINWIDTH (Netscape). Los valores, como vamos a ver a partir de ahora, van en píxeles o en porcentajes. Parece ser que también funciona en Explorer poniendo sólo TOPMARGIN y LEFTMARGIN, sin los otros dos.
|
<BODY TOPMARGIN=50 LEFTMARGIN=50 BOTTOMMARGIN=0 RIGHTMARGIN=50 MARGINHEIGHT=50 MARGINWIDTH=50>
</BODY> |
En el caso de Netscape sólo se usan dos atributos, uno estrecha de arriba y abajo (HEIGHT) y el otro de izquierda y derecha (WIDTH), a la vez.
Pulsa aquí para verlo en otra página.
Vamos a ver los fondos de las páginas. Tenemos 2 tipos, los uniformes, de un solo color, y los que son imágenes, que quedan más chulos.
Si un valor decimal, con las cifras 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 se unen de dos en dos, podremos tener 00, 01, 02, 03,.....11, 12, 13,....34, 35, 36,......99. Esto es bien conocido pues los usamos siempre.
En el caso de valores hexadecimales tenemos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F con lo que si los unimos de dos en dos tendremos:
00, 01, 02, 03....09, 0A, 0B,....0F
10, 11, 12,....19, 1A, 1B,.....1F
20, 21,....,29, 2A,...2F
30,....3F
.....
70,....7F
90,....9F
A0, A1,....AF
B0,....BF
.......
F0,.....FF (que es el último)
Si ahora tenemos en cuenta que los valores en HTML se expresan con 6 "cifras" (todos los de antes multiplicados por 3), dos correspondientes al rojo, dos al verde y dos al azul tendremos los 16 millones y medio de colores posibles.
Se les antepone la # (almohadilla) delante con lo que un ejemplo sería #00ffaa que tendría el valor 00 de rojo (es decir, nada de rojo), ff de verde (todo el verde) y aa de azul. Esa mezcla me daría el color resultante. Veámoslo.
|
<BODY BGCOLOR=#00ffaa>
Texto... </BODY> |
|
Texto |
O también, como ya dije:
|
<BODY BGCOLOR=olive>
Texto... </BODY> |
|
Texto... |
El texto se ve de color negro, aún no lo hemos cambiado.
Para oscurecer un color reducimos el número de su componente dejando los otros dos igual.
|
|
Para suavizar un color cambiamos los otros 2 a números más altos, dejando el que quiero suavizar igual.
|
|
Algunos ejemplos:
| #ff0000 | Rojo |
| #00ff00 | Verde |
| #0000ff | Azul |
| #ffff00 | Amarillo |
| #000000 | Negro |
| #ffffff | Blanco |
Como vemos, el amarillo es tope de rojo y tope de verde, el negro es nada de ninguno de los 3 y blanco es tope de los 3.
El atributo, que también va dentro de <BODY>, es BACKGROUND seguido del signo igual (como siempre) y el nombre del archivo entrecomillado.
|
<BODY BACKGROUND="cuadro.gif">
Texto </BODY> |
|
|
El archivo "cuadro.gif" es un cuadro pequeño, lo que hace el navegador es poner un mosaico de ellos hasta cubrir todo.
Mi cuadro es: Y el del fondo de mi página es:
 |
|
Hay fondos que son como tiras delgaditas. Observa como es y como va a quedar al ponerse en mosaico.
|
<BODY BACKGROUND="anilla.gif">
</BODY> |
|
Para verlo en otra página todo bonito pulsa aquí.
Lo normal es poner, en la página, los dos atributos; primero BGCOLOR y luego BACKGROUND. De este modo, si se tarda en cargar la imagen, el visitante no verá el fondo blanco sino un color sólido, lógicamente parecido al fondo definitivo.
Ojo con los colores que elegimos, deben de dejar que el texto sea legible, no como en el ejemplo más arriba del cuadro.
Por último, un atributo más, con un sólo valor, que sólo funciona con Explorer:
|
<BODY BGPROPERTIES=fixed>
</BODY> |
Hace que el fondo no se desplaze cuando movemos las barras de desplazamiento.
Pulsa aquí para ver un ejemplo normal.
Pulsa aquí para ver un ejemplo sin desplazamiento.
Los documentos HTML tiene colores predeterminados para el texto (atributo TEXT: negro), para los enlaces (LINK: azul subrayado), para el enlace justo al pulsarlo (ALINK: rojo subrayado) y para los enlaces una vez visitados (VLINK: violeta subrayado).
Esto puede cambiarse, bien alguno o todos a la vez, desde <BODY> ya que afectará a todo el documento.
|
<BODY TEXT=red LINK=green ALINK=black VLINK=white>
</BODY> |
Pulsa aquí para ver el documento normal, sin atributos.
Pulsa aquí para ver el documento con los atributos de arriba.
