HTML Básico: Capitulo 4

image

Temas:

Cabecera
Titulo
Indicadores
Cuerpo
Codigo Colores
Fondo
Texto
Links


Cabecera

Cabecera del documento HTML <HEAD>

……

</HEAD>

En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento, como por ejemplo el título de la página que aparecerá en la parte superior de la ventana del navegador.

Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la cabecera de nuestro documento.

Todas la etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos la etiqueta <TITLE> correspondiente al título del documento.

A continuación vamos a tratar cada uno de los posibles componentes de la cabecera por separado.

Título del documento

<TITLE>…………..</TITLE>

El título de nuestro documento viene especificado por las etiquetas: <TITLE> y </TITLE> y, como ya hemos mencionado, este título es el que aparecerá en la ventana de nuestro programa navegador.

Lo normal y recomendable es que el título guarde relación con el contenido de nuestro documento, ya que por ejemplo es utilizado por algunos servidores de búsqueda para poder intuir el contenido de nuestro documento. Veamos un ejemplo en el Código fuente 2.

<TITLE>Mi primera página Web</TITLE>

Código fuente 2

Indicador de refresco del documento

<META http-equiv="refresh" content="número_segundos;url=URL de refresco">

Esta etiqueta sirve para indicar un documento que deberá sustituir al actual transcurrido un número determinado de segundos. Una posible utilidad de esta etiqueta podría ser para visualizar documentos de forma secuencial, de forma que se empieza por un documento y se pasa al siguiente transcurrido un período de tiempo sin necesidad de que la persona que lee el documento realice ninguna acción.

Veamos un ejemplo en el Código fuente 3.

<META http-equiv="refresh" content="5;url=http://www.eidos.es">

Código fuente 3

Si insertamos esta instrucción en la cabecera de nuestro página HTML, transcurridos 5 segundos ésta se refrescará con la página Web de portada de: "Villa Eidos".

Indicador de la URL base del documento

<BASE href="URL">

Con esta etiqueta indicamos la localización de los ficheros a los que se hace referencia en nuestra página Web. Si no incluimos esta etiqueta el navegador entenderá que dichos ficheros se encuentran en el mismo lugar donde reside nuestra página Web.

Vemos un ejemplo en el Código fuente 4.

<BASE href="http://www.eidos.es/vulcan/"&gt;

Código fuente 4

Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra página a un fichero llamado "aula.htm", se entenderá que la localización del fichero es "http://www.eidos.es/vulcan/aula.htm&quot;.

Cuerpo

Cuerpo del documento HTML: <BODY>

……

</BODY>

En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en sí de nuestra página Web: textos, imágenes, enlaces a otras páginas, etc..

Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo de nuestro documento.

Esta posee una serie de argumentos que nos van a permitir variar las características del documento en su conjunto, como por ejemplo el color del texto o del color de fondo de nuestra página web.

Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML.

Estos se pueden especificar por su nombre (name) o por su código de color, que es un número compuesto de tres pares de cifras hexadecimales que nos indican la proporción de los colores primarios (rojo, verde y azul) que forman el color deseado (#rrggbb):

Nombre Código de color Color mostrado

Black #000000 Negro

Teal #008080 Teal

Blue #0000FF Azul

Navy #000080 Azul marino

Lime #00FF00 Lima

White #FFFFFF Blanco

Purple #800080 Púrpura

Yellow #FFFF00 Amarillo

Olive #808000 Oliva

Red #FF0000 Rojo

maroon #800000 Marrón

gray #808080 Gris

fuchsia #FF00FF Fucsia

green #008000 Verde

silver #C0C0C0 Plata

aqua #00FFFF Agua

La etiqueta <BODY> presenta una serie de atributos que van a afectar a todo el documento en su conjunto. Estos atributos nos van a permitir definir los colores del texto, del fondo, y de los hiperenlaces del documento. Incluso nos permitirán insertar una imagen de fondo en nuestra página.

<BODY background="URL" bgcolor="#rrggbb ó name" text="name" link="name" vlink="name" >

background="URL". Nos va a permitir mostrar una imagen como fondo de nuestro documento HTML.

El camino a esta imagen vendrá especificado por la URL que definamos.

Si la imagen no rellena todo el fondo del documento, ésta será reproducida tantas veces como sea necesario hasta completar todo el fondo.

Si insertas el Código fuente 5 en el documento HTML que creamos como ejemplo en el capítulo anterior: Pagina1.htm, este presentará como fondo la imagen "fondo.gif"

<BODY background="fondo.gif">

Código fuente 5

bgcolor=#rrggbb ó name {bgcolor: Background Color}. Nos va a permitir definir un color para el fondo de nuestro documento. Este atributo será ignorado si previamente hemos utilizado el atributo background.

Inserte el Código fuente 6 en Pagina1.htm y compruebe el resultado.

<BODY bgcolor="blue">

Código fuente 6

text=#rrggbb ó name. Nos permitirá definir un color para el texto de nuestro documento. Por defecto es negro. Inserte el Código fuente 7 en Pagina1.html y compruebe el resultado

<BODY text="red">

Código fuente 7

Y ahora, inserte el Código fuente 8 en el documento y comprueba el resultado.

<BODY bgcolor="yellow" text="navy">

Código fuente 8

link=#rrggbb ó name. Indica el color que tendrán los hiperenlaces que no han sido accedidos. Por defecto es azul. Como todavía no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para más adelante.

vlink=#rrggbb ó name {vlink: Visited Links}. Indica el color de los hiperenlaces que ya han sido accedidos. Por defecto es púrpura.

Acerca de ArturoMezDa

Ing.Sistemas Computacionales

Publicado el 5 mayo, 2010 en Cursos, Tutoriales y etiquetado en , , , , , . Guarda el enlace permanente. Deja un comentario.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: