miércoles, 1 de agosto de 2018

HTML: Teoría INTRODUCCIÓN

Estructura de una página HTML

Las páginas HTML están estructuradas en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo).

Ejemplo de página

Si escribes:
<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>

<!-- Esto es un comentario-->

<BODY>

<H1> Esto es una "demo" de documento HTML </H1>

Esto es el más sencillo de los documentos HTML.

</BODY>
</HTML> 
 

Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un documento HTML. En la HEAD reside información acerca del documento, y generalmente no se ve cuando se navega por él. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripción que identifica la página. Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o libro de direcciones), con lo que crea la lista que aparece en la orden "Go" de la barra de órdenes, lo que aparece en la esquina superior izquierda cuando se imprime el documento, y lo que aparece en el marco de la ventana del navegador. También lo guarda en su caché, y servirá para mostrar la página, cuando sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor de origen.
No hay que confundir el elemento <TITLE> con el nombre del fichero.
Por ejemplo, esta página está contenida en un fichero llamado head.htm y el texto de su <TITLE> es: Head de un documento. Se escibirá asi:
<HEAD> <TITLE>Head de un documento </TITLE> </HEAD> Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se escribe:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10"> </HEAD> Esto hace que el visualizador vuelva a cargar la página activa al cabo de 10 segundos. También puede hacerse a un servidor. Así: <HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm"> </HEAD>

Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un documento HTML. Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella. Se escibirá asi:
<BODY>

texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto

</BODY>
Como ya habrás visto, los navegadores, por defecto, presentan el texto de una página ajustando los contenidos a la esquina superior izquierda de la pantalla. El elemento BODY tiene parámetros que permiten modificar los márgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. Por ejemplo, Netscape utiliza solamente dos instrucciones que afectan simultáneamente a los márgenes superior e inferior e izquierdo y derecho respectivamente:   marginwidth="pixels", para los márgenes izquierdo y derecho.
  marginheight="pixels", para los márgenes superior e inferior.
En cambio, el Internet Explores, utiliza uno para cada cual:
  leftmargin="pixels", para el margen izquierdo
  topmargin="pixels", para el margen superior
  rightmargin="pixels", para el margen derecho
  bottommargin="pixels", para el margen inferior
Donde pixels es el número de pixels que se quiere mover cada margen hacia el interior de la página. Estos parámetros también son accesibles desde instrucciones de estilo.
Otro problema que suele presentarse con los márgenes es que a la hora de imprimir una página, cada impresora, junto con el navegador, se las ingeniarán para hacer justo lo contrario de lo que se desea... Tal vez algun dia todo esto funcione bien.
Otra cosa que puede controlarse desde BODY es el color que tomarán los links que pongamos en la página. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes después de haber sido utilizados, se escribe:
<BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">
Veamos a hora los elementos más habituales del lenguaje que deben escribirse en el BODY.


 

No hay comentarios.:

Publicar un comentario