|
Cursillo Villano veraniego
de HTML básico (4)
- No lo aprenderás todo... pero aprenderás ;) - |
El cuerpo de una página HTML
Ya hemos comentado que el cuerpo de una página HTML es aquél en dónde se incluyen las etiquetas HTML de todos aquellos elementos que quereos que aparezcan en los navegadores. Esas etiquetas son las que iremos viendo en los siguientes capítulos. Antes de comenzar, conviene destacar aquí que hay un conjunto de etiquetas que pueden sustituir a <body> como cuerpo de una página HTML: las etiquetas que conforman los MARCOS. Estos, a diferencia de <body>, permitirán dividir la ventana de un navegador en varias partes o segmentos de tal modo, que cada una de esas partes puede mostrarse una página distinta. Recordemos también que las etiquetas pueden utilizar atributos que nos permiten dar valores a las mismas. Dicho esto, pasemos a entender que es el cuerpo de una página HTML.
El cuerpo se basa en dos etiquetas: <body> y <!--comentario-->. La primera ya sabemos que delimita el cuerpo de una página HTML y que la segunda nos sirve para introducir comentarios que no se interpretan por los navegadores.
<body> tiene asignados unos atributos que nos permitirán controlar la apariencia de la página. Esos atributos nos facilitarán controlar el color de fondo, la imagen de fondo, el color del texto y de los hiperenlaces -activos, visitados-, etc. (Estos atributos se han quedado obsoletos en HTML 4.0 que han sido sustituidos por estilos en cascada, como iremos viendo a lo largo del curso). Así podemos concluir que el cuerpo de la página o documento HTML es el lugar dónde se sitúan todos los contenidos de la misma y que estos pueden ser textos, imágenes, enlaces, sonidos, etc.
Veamos algunos de los atributos que nos permite la etiqueta <body>. Comenzaremos por el color, pero antes una puntualización: al color, tanto si es de texto como de fondo, podemos asignarle dos tipos de valores que son el simbólico y el númerico. Este último se representa con tres números hexadecimales, en el rango 00 a FF. Antes de cualquier valor númerico siempre debe estar precedido del símbolo # , que indica que se trata de un número hexadecimal; así tendríamos valores como por ejemplo #00FF78. En realidad son tres valores (00-FF-78 en nuestro ejemplo) hexadecimales que, colocados tras el símbolo #, están indicando los valores de color RGB (paleta de colores aditivos primarios: Rojo, Verde y Azul, en inglés) siendo 00 su valor de intensidad más bajo y FF el mas alto, los dos primeros equivalen al canal rojo, los segundos al canal verde y los dos últimos al canal azul. (Las aplicaciones que tratan imágenes digitales o vectoriales tienen controles que permiten ver estos valores por canal de color ylos buenos editores de HTML también). Asignar el valor del color mediante el método simbólico es hacerlo dando el nombre del color. Pero no vale cualquier nombre i en cualquier idioma. Los nombre comunmente aceptados son: aqua, black, blue, fuchsia, green, grey, maroon, navy, olive, purple, red, silver, teal lime, yellow y white. Advertencia: los navegadores no aceptan todos los colores y mucho menos todos en modo de valor simbólico por lo tanto es aconsejable utilizar el método númerico. Ahora veamos esos atributos de la etiqueta :
BACKGROUND, es el que indica el nombre de un fichero de imagen que se quiere poner como fondo de la página. NOTA: Cuando la imagen no "cubre" o "llena" el tamaño que tenga la pantalla, ésta se reproducirá como un mosaico, en vertical y horizontal, hasta que rellene toda la superficie de la pantalla. La forma de escribir este atributo es como sigue: <body background="nombre, extensión y ubicación del fichero de imagen">, o como vemos en el siguiente ejemplo:
<body background="../imagenes/astro.jpg">
…….contenidos del cuerpo……
</body>
BGCOLOR, va a indicar el color de fondo para una página, por defecto o si no se le indica un color es el blanco. NOTA: Si el fondo que tenemos para la página es una imagen se ignora este atributo. Lo escribiremos así: <body bgcolor="código de color númerico o simbólico"> que quedaría así:
<body bgcolor="#FFFFFF">
…….contenidos del cuerpo…….
</body>
o de esta otra manera:
<body bgcolor="black">
…….contenidos del cuerpo…….
</body>
TEXT, indicamos un color para el texto que se incluya en la página y por defecto es el negro. Se escribirá <body text="código de color númerico o simbólico"> que en el ejemplo es:
<body
text="#0000ff">
…….contenidos del cuerpo…….
</body>
LINK, define un color para los textos que dan acceso a hiperenlaces. Por defecto es el azul. Lo escribimos <body link=" código de color númerico o simbólico"> que en nuestro ejemplo es:
<body link="#00ff00">
…….contenidos del cuerpo…….
</body>
VLINK, igual que la anterior pero los textos que dan acceso a hiperenlaces que ya han sido visitados anteriormente. Por defecto tiene el color azul oscuro y se escribe <body vlink="código de color númerico o simbólico"> que quedaría:
<body
vlink="#551163">
…….contenidos del cuerpo…….
</body>
ALINK, por último, es el atributo que indica el color de los textos que dan acceso a hiperenlaces dentro de la misma página en la estemos. Por defecto sale el color rojo oscuro y la escribimos así: <body alink=" código de color númerico o simbólico"> quedando en nuestro ejemplo como sigue:
<body alink="#5500ff ">
…….contenidos del cuerpo…….
</body>
Podemos encontrarnos en mas de una ocasión con una etiqueta <BODY> que contenga todos estos atributos y el resultado en nuestra página quedaría así:
<html>
<head>
<title>Bienvenido a las páginas de Makynavaja</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href=http://williamg.eresmas.com/index.htm>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta>name="keywords" content="astronomía, astrofísica, biografías,
seti, eclipse, formación, informatica, cursos, empresas, diseño, web,
noticias, citas">
<meta name="description" content="Web de un grupo de formadores informáticos
entusiastas de astrofísica y de la cultura en general, con contenidos
variados y actualizados, citas célebres, biografías anécdoticas, el programa
SETI, diseño gráfico y de web, noticías para internautas y mucho más.">
</head>
<!--recordatorio de cómo poner un comentario-->
<body background="astro.jpg" text="#ffffff" link="#00ff55
vlink="#226661" alink="#0055ff">
</body>
</html>
 Indice del curso |
| Versión para imprimir | Hecho por escuela@villanos.net en 2000 |