Qué es una página
web XHTMLQué es una página
web XHTMLUna página web es un documento de texto con marcas (también llamadas etiquetas). Las etiquetas permiten modificar la presentación del documento, incluir elementos no contenidos en el texto (por ejemplo, imágenes), crear hiperenlaces, añadir significado al texto (todavía de forma limitada), etc.
Los navegadores no muestran las etiquetas, aunque se puede pedir que las enseñen. En Internet Explorer el menú a utilizar es . Internet Explorer muestra el código fuente en una ventana del bloc de notas. Si el código fuente de ina página editada con Amaya se ve sin saltos de línea, es que no se ha configurado correctamente la exportación de finales de línea en Amaya. En Firefox el menú a utilizar es . En Firefox el código fuente se ve mucho mejor, ya que incluso colorea el código, por lo que es más fácil identificar cada elemento. En Amaya el menú a utilizar es . En Amaya el código fuente también aparece coloreado y se puede editar el código fuente (al guardar los cambios se sincronizan todas las vistas).
Las etiquetas se reconocen porque se escribe entre desigualdades, <etiqueta> (por ejemplo, <p>, <h1>, etc). Como regla general, las etiquetas van siempre en parejas, <etiqueta> ... </etiqueta>, que delimitan el contenido de la página a la que afecta la etiqueta. Las pocas etiquetas que no van emparejadas se escriben <etiqueta />. Un ejemplo de etiqueta monoatómica es la etiqueta de línea horizontal, <hr />.
Una etiqueta puede contener atributos, separados por espacios, que permiten especificar la etiqueta, <etiqueta atributo="valor_de_atributo"> (por ejemplo, <p class="centrado">.
El ejemplo siguiente muestra el código fuente de una página web recién creada con Amaya, con las líneas numeradas.
1 <?xml version="1.0" encoding="iso-8859-1"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 7 <title>No title</title> 8 <meta name="generator" content="amaya X.X, see http://www.w3.org/Amaya/" /> 9 </head> 10 11 <body> 12 </body> 13 </html>
La primera etiqueta <?xml ... ?> (línea 1) es una etiqueta opcional, pero recomendada. No es una etiqueta XHTML, sino una declaración XML que indica el juego de caracteres que se va a utilizar en el resto del documento.
La segunda etiqueta <!DOCTYPE ... > (líneas 2 y 3) sí que es obligatoria. Esta etiqueta indica el tipo de documento (DOCTYPE) de la página. Puesto que existen varias versiones de HTML y XHTML (y cada versión permite unas etiquetas diferentes), el navegador necesita saber a qué versión corresponde la página. La etiqueta contiene la dirección web de la dtd (definición de tipo de documento) que especifica la versión del lenguaje de etiquetas utilizado en el documento (cuál es la estructura, qué etiquetas existen y qué atributos pueden tener).
La etiqueta <html> ... </html> (líneas 4 a 13), engloba todo el documento html. El atributo xmlns especifica el espacio de nombres del documento. Los espacios de nombres sirven para resolver el problema que aparece cuando en un mismo documento se utilizan etiquetas de distintos lengujes de marcas, en los que pueden coincidir algunos nombres. El espacio de nombres es como el "apellido" de la etiqueta.
El documento html se divide a su vez en dos partes, la cabecera (<head> ... </head>, líneas 5 a 9) y el cuerpo (<body> ... </body> , líneas 11 y 12).
La cabecera <head> ... </head> (líneas 5 a 9) contiene información de identificación y control que en general no se muestra en la ventana del navegador, aunque puede afectar a la presentación (por ejemplo, los enlaces a hojas de estilo).
Las etiquetas <meta /> están pensada para proporcionar información sobre el documento a los programas que analicen la página. La línea 6 del ejemplo informa del juego de caracteres empleado en la página. La línea 8 del ejemplo indica que la página se ha realizado con Amaya. Existen otros tipo de <meta />. Por ejemplo, la etiqueta <meta name="keywords contents="palabras, más palabras, etc." /> está pensada para que los buscadores sepan de qué va la página (por desgracia, se ha abusado mucho de esta etiqueta así que los buscadores no la toman prácticamente en cuenta).
La etiqueta de título <title> ... </title> (línea 7) contiene el texto que se muestra en la barra de título de la ventana del navegador, como muestra el siguiente ejemplo:
  |
<title>Qué es una página web. XHTML. Amaya. Bartolomé Sintes Marco</title> |
|
El cuerpo (<body> .... </body>, líneas 11 y 12) contiene lo que se verá en la ventana del navegador. En el ejemplo no hay nada porque se trata de un documento recién creado.
La recomendación XHTML 1.0 define tres tipos de documentos, como ya lo hacía la recomendación HTML 4.0: Strict, Transitional y Frameset. El W3C recomienda utilizar la versión Strict, que elimina el mayor número posible de elementos y atributos relacionados con la presentación. La versión Transitional todavía mantiene esos elementos y sólo se debe utilizar en los casos que se quiera asegurar la compatibilidad con dispositivos que no son capaces de utilizar las hojas de estilo. La versión Frameset es como la versión Transitional, pero incluyendo la posibilidad de crear marcos (frames). Los marcos se utilizaron durante unos años para facilitar el diseño de sitios web, pero han caído en desuso por sus problemas de accesibilidad.
La recomendación XHTML 1.1 es una reformulación de XHTML 1.0 Strict de acuerdo con criterios de modularización, pero apenas supone en la práctica más de tres cambios con respecto a XHTML 1.0.
Debería escribir un apartado comentando estos puntos: diferencias entre XHTML 1.0 y HTML 4.0, compatibilidad con HTML (este punto es importante porque las páginas se suelen servir como text/html y no como application/xhtml+xml).
Una página web puede contener comentarios, que el navegador no muestra (salvo cuando muestra el código fuente de la página). La etiqueta que engloba el comentario (que puede extenderse una o varias líneas) es <!-- .... -->, como muestra el siguiente ejemplo:
| |
<p>Esto es un párrafo p normal y corriente. <!--Esto es un ejemplo de comentario--></p> <p>Entre este párrafo y el anterior hay un comentario que sólo puede verse en el código fuente.</p> |
Esto es un párrafo p normal y corriente. Entre este párrafo y el anterior hay un comentario que sólo puede verse en el código fuente. |
