jueves, 26 de marzo de 2015

2.4 Estructura global de un documento




La estructura básíca de un doumento html5 es:

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8' />
  <title>Título de la página</title>
  <meta name='description' 
    content='Descripción de la página'>.
</head>
<body>
</body>
</html>

Creación de documentos HTML

  • Los documentos HTML son archivos de texto legibles ASCII con códigos de composición especiales embebidos o incorporados en el texto. Esto significa que los archivos HTML contienen letras, números, signos de puntuación, etc., más los códigos de composición HTML. Insistimos, se pueden leer o modificar directamente desde el bloc de notas.

  • Aunque no es obligatorio, es muy útil utilizar la extensión .html al archivar el documento HTML desde el bloc de notas. Así podrás saber luego de que tipo de documento se trata. Si utilizas un procesador de texto normal debes utilizar la opción Guardar como texto ASCII.
Aspecto de documentos HTML:

  • Lo que distingue a un archivo HTML de cualquier otro archivo de texto es la presencia de códigos de composición, denominados marcadores HTML. Estos códigos se incluyen en el documento y sirve para controlar el formato y la presentación del documento final. Los códigos también sirven para crear hipervínculos con otros documentos.

  • Los códigos de composición se acotan con unos caracteres especiales, que permiten diferenciarlos del texto del documento propiamente dicho. Estos símbolos son los corchetes angulares < y >. Estos códigos no distinguen entre mayúsculas y minúsculas aunque la normalización W3C indique que debemos usar minúsculas.

  • Los distintos navegadores muestran sus documentos de formas distintas: varía el color, el tipo de fuente, el tamaño, etc. Por lo tanto debes pensar en tu documento como una entidad lógica y no física, reconociendo que el aspecto físico puede variar de un visor a otro y de un PC a otro. Por ejemplo, si introduces tipos de letra especiales (que se salgan de los corrientes que tienen todos los PCs, en Arial, Courier, Times o Helvetica) dentro de tu página web, cuando alguien la "vea" en Internet, visualizará esos tipos de letra si están instalados en su PC, si no los verá con el tipo de letra que tenga cargado por defecto en su navegador.

    Marcadores o etiquetas HTML obligatorios:

  • Marcador <html>: todos y cada uno de los documentos HTML deben empezar y terminar con este marcador que sirve para indicar que se trata de un documento HTML. En el marcador de cierre es obligatoria la barra inclinada (/html).
    En html 5 la prímera línea es <!DOCTYPE html>

  • Marcador <head>: los documentos HTML se dividen en dos partes, la cabecera y el cuerpo. Los navegadores Web necesitan distinguir entre cabecera y cuerpo para poder interpretar correctamente los documentos. En general la cabecera del documento (head) incluye la información general sobre el documento. Este marcador tienen su marcador de terminación con la barra inclinada (/head).

  • Marcador <body>: incluye el contenido real del documento (body o cuerpo). Este marcador tiene también su marcador de terminación con la barra inclinada </body>.

Cabecera del documento

Contiene información general sobre el documento HTML. Es obligatorio incluir el marcador <title>, el resto de los marcadores son opcionales.
Marcador <title>
Los navegadores muestran el título de cada uno de los documentos HTML que encuentran. El título que aparece se toma del contenido de este marcador. Este marcador debe aparecer con su pareja con la barra inclinada </title> y dentro de la sección <head>

<title>Esto es el título de la página</title>

Marcador <meta>

Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.
Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc. Esta información podría ser utilizada por los robots de búsqueda para incluirla en las bases de datos de sus buscadores y mostrarla en el resumen de búsquedas o tenerla en cuenta durante las mismas y será invisible para un visitante normal.
Estas etiquetas también se usan para especificar cierta información técnica de la cual pueden valerse los navegadores para mostrar la página, como el grupo de caracteres usado, tiempo de expiración del contenido, posibilidad de dejar la página en cache o calificar el contenido del sitio ("programación web", "Oracle", etc.).

Meta tag Descripción
<meta content='copyright' name='autor'> Indica quien posee los derechos de contenido de la página.
<meta charset='utf-8'> Indica al servidor que el recurso es un documento del tipo html. Que está escrito en texto plano y el conjunto de caracteres con los que se ha escrito el contenido de la página.
<meta http-equiv='refresh' content='30; URL=./indice.html' /> Carga la URL en content segundos. En este caso en 30 segundos . No es reconocido por todos los navegadores,
<meta name='Description' content='El SGML es un sistema'  /> Este tag lo usan los buscadores para dar una descripción del contenido de la página.
<meta name='Robots' content='all'/> Determina si los robots indezaran la página. Los posibles valores de content son:
all para que el robot tenga en cuenta esta página y pueda seguir los links contenidos en la misma (este es el valor predeterminado), noindex para que no la tenga en cuenta.

A manera de ejemplo se muestra el siguiente código


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>html5</title>
</head>
<body>
  <p>Hola mundo desde el ITV</p>
</body>
</html>
 
 
 


No hay comentarios:

Publicar un comentario