Estructura básica de un documento XHTML

Estructura de una página

 

            Si se observa el código fuente de una página Web básica, se pueden distinguir tres partes bien diferenciadas, un ejemplo de una página básica sería el siguiente:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”            “http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd”>
<html>
<head>
<title>Primera practica</title>
</head>
<body>
 <p>Esperamos vuestro portal <strong> aprendoencasa.com</strong> sea un lugar donde estéis cómodos</p>
</body>
</html>

 

 

            Como se puede observar en primer lugar se encuentra la definición del tipo de documento, el cual se especifica con la etiqueta <!DOCTYPE , seguidamente se encuentra la etiqueta <html> que especifica el principio y fin del documento HTML, entre las etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al encabezado y cuerpo del documento cuyas etiquetas correspondientes son <head> y <body>. A continuación se explica con detalle cada uno de estos apartados.

 

Definición del tipo de documento

 

            Actualmente al observar el código fuente de cualquier pagina Web, es normal encontrarse con la etiqueta que sirve para especificar el DTD[1] al principio del documento. Esta etiqueta se denomina <!DOCTYPE> e indica que versión de XHTML o HTML se utiliza en el documento, para que los navegadores puedan aplicar la gramática y sintaxis correspondiente al documento. Otra de las aplicaciones que tiene la etiqueta con respecto a los navegadores es la de activar el modo estándar o estricto, o el modo de compatibilidad (“quirk”)[2]. El no utilizar actualmente la etiqueta de definición del documento puede suponer que el navegador no interprete en su visualización la página como debe y por lo tanto presentar diferencias en el formato de la página entre distintos navegadores.

 

            Existen tres tipos de definición de documentos XTHML, Strict, Transitional y Frameset.

 

            El tipo Strict esta ideado para ser utilizado con CSS (“Hojas de estilo en cascada”), y separa completamente el contenido de la presentación. teniendo en cuenta esta característica este tipo no permite el uso de etiquetas y atributos orientados a la presentación o formato que están en desuso como por ejemplo las etiquetas font o center, etc. Utilizando este tipo se obtienen documentos muy bien estructurados y que se pueden remodelar de forma más o menos cómoda mediante CSS, pero este tipo tiene ciertas incompatibilidades con algunos navegadores. La definición que se ha de utilizar para este tipo de documento es la siguiente:

 

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.0 Strict//EN”            “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

 

 

            El tipo Transitional tiene las mismas características que el tipo anterior Strict, pero añade características orientadas a la presentación ya en desuso, básicamente es un tipo strict , pero permitiendo el uso de etiquetas de presentación y formato. La definición para este tipo de documentos en la siguiente:

 

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.0 Transitional//EN”            “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 

 

            El tipo Frameset es una variante del tipo anterior para los documentos que utilizan frames. Aunque actualmente es muy recomendable el no utilizar frames. Su definición es la siguiente

 

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.0 Frameset//EN”            “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

 

            Se ha de tener en cuenta que muchas veces en los documentos que se creen es posible mezclar varios lenguajes derivados de XML, por lo cual para que el navegador pueda reconocer los mismos y realizar la interpretación de estos se ha de especificar lo que se denomina el espacio de nombres o namespace del documento, esta especificación se suele poner justo después de la etiqueta de definición del documento y para realizarla se emplea la siguiente etiqueta, que es la que corresponde a los documentos xhtml.

 

 

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”es” xml:lang=”es”>

 

 

            El siguiente ejemplo muestra como quedarían las etiquetas correspondientes a una definición de documento de tipo Transitional y con el espacio de nombres para documentos xhtml:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.0 Transitional//EN”            “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”es” xml:lang=”es”>

 

 

            Los anteriores DTD son para la especificación de xhtml 1.0, para la especificación de xhtml 1.1 se ha de emplear la siguiente etiqueta:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.1//EN”            “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”es” xml:lang=”es”>

 

 

Elemento <head> (Cabecera)

 

 

            Con la etiqueta <head>…</head> se delimita la cabecera del documento que suele contener información sobre el documento como título, idioma, palabras clave, autor, etc. La información que se especifique en la cabecera no es mostrada por el navegador al usuario con la única excepción de la etiqueta <title>…</title>, la cual sirve para especificar el titulo del documento y es visualizada en la barra de titulo de la ventana correspondiente al programa navegador.

 

 

 

Elemento <body> (Cuerpo)

 

            Con este elemento <body> … </body>, se delimita el cuerpo del documento, que es el contenedor para todos los elementos visibles para el usuario, como párrafos, imágenes, listas, etc.

 

Crear una página Web básica

 

Existen varios programas de diseño y creación de páginas Web, muchos de ellos WYSIWYG  Que permiten crear el documento viendo tal como quedaría en un navegador. Aunque realmente para crear un documento xhtml no es necesario más que un editor de textos simple y un navegador para comprobar el resultado. Aunque los programas mencionados son muy útiles, es recomendable iniciarse en el diseño de documentos tecleando los códigos xhtml, ya que se aprende más sobre ellos y sientan la base para diseñar con más comprensión sobre lo que se diseña. En esta práctica se va a utilizar el editor de textos simple de Windows, aunque sirve cualquier editor de textos que genere archivos de texto llano o simple.

 

clip_image002


En primer lugar se ha de abrir el bloc de notas, para realizar esta acción se ha de pulsar sobre el botón de Inicio, a continuación en el menú de inicio, se sitúa el puntero sobre la opción Todos los programas, con esta acción se presenta en pantalla el submenú correspondiente y en él se ha de seleccionar la opción Accesorios, la cual presenta el submenú correspondiente y en él se ha de pulsar sobre el programa Bloc de notas, tal como se muestra en la imagen siguiente:

 

            Una vez se ha pulsado para abrir el editor de textos bloc de notas se presenta en pantalla la ventana correspondiente al editor la cual presenta el siguiente aspecto:

 

clip_image006


 

            En la cual hay que teclear el código xhtml correspondiente al documento que se quiere crear. En primer lugar tecleamos las etiquetas correspondientes a la definición de documento y especificación del lenguaje, que para este documento será xhtml 1.1 y lenguaje español.

 

clip_image004

 


            A continuación se teclean las etiquetas correspondientes al principio de documento y encabezado especificando también el titulo del mismo.

 clip_image008

 

          Una vez establecido el encabezado y el titulo del documento, se ha de especificar el cuerpo del documento con el contenido que se quiere visualizar en el navegador, en este caso se muestra un mensaje de bienvenida y por último se cierra la etiqueta correspondiente al cuerpo y al documento.

  

 clip_image010

 

            Una vez se ha tecleado todas las etiquetas deben quedar tal como se muestran a continuación:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.1//EN”            “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”es” xml:lang=”es”>
<html>
<head>
            <title>Primera Practica www.aprendoencasa.com</title>
</head>
<body>
<p>Hola esperamos que te resulte fácil esta práctica</p>
<p>un saludo desde Aprendoencasa.com</p>
</body>
</html>

 

 

            Ahora queda guardar el documento como una página web. Para realizar esta acción se ha de pulsar sobre el menú Archivo de la ventana del Bloc de notas. Y seleccionar la opción Guardar, al realizar esta acción se presenta en pantalla el cuadro de dialogo correspondiente, igual al que se muestra en la imagen siguiente:

 

clip_image012


 

            En la cual en la sección etiquetada Nombre, se ha de teclear el nombre del documento. Las páginas Web tienen la extensión .html, es preferible para mantener mejor la compatibilidad de nombres dar un nombre de documento en minúsculas y que no exceda de 8 caracteres para el nombre. En este caso asignamos al documento el nombre de pagina1.html, se ha de tener en cuenta el teclear la extensión del documento para que posteriormente el sistema operativo identifique al documento como una página Web. Una vez guardado el documento se puede cerrar el editor de texto.

Si observamos el icono correspondiente al documento guardado, puede aparecer dependiendo del navegador instalado en el equipo de las siguientes formas:

 

       
  clip_image015   clip_image016


            Para comprobar que el documento se visualiza correctamente, se ha de realizar un doble clic, sobre el icono del mismo, con esta acción se ejecuta el navegador instalado en el sistema mostrando la página Web que se ha creado, igual que se muestra en la siguiente imagen:

  

 clip_image018

 

Etiquetas de Technorati: ,,,,

 



[1] DTD (Document Type Definition , Definición del Tipo de Documento). El DTD son normas y restricciones definidas como un estándar para establecer la sintaxis que han de cumplir los documentos de un tipo concreto.

[2] El modo de compatibilidad o “quirk” lo aplican automáticamente los navegadores cuando detectan que el documento que se está visualizando no tiene una definición de documento adecuada, estableciendo así que el navegador visualice la información del documento tal como lo harían los antiguos navegadores, de esta forma se intenta garantizar que la visualización se ajuste a la forma en la que fue diseñada. Si el navegador visualiza la información en modo quirk es muy posible que alguno de los elementos del documento, sobre todos los relativos a CSS, no se visualicen tal como fueron diseñados.

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies