Está en la página 1de 4

Qué es una página web. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé Si...

Página 1 de 4

Qué es una página web XHTML


• Qué es una página web
• Etiquetas mínimas
• Variedades XHTML
• Comentarios en una página web

Qué es una página web


Una 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 (el código
aparece en diferentes colores para facilitar su lectura):
• En Firefox la opción de menú es Ver > Código fuente de la página (o el atajo de teclado
Ctrl+u). Firefox muestra el código fuente en una ventana distinta.
• En Internet Explorer la opción de menú es Ver > Código fuente. Internet Explorer 8 muestra el
código fuente en una ventana distinta. Internet Explorer 7 y anteriores mostraban el código
fuente en una ventana del bloc de notas.
• En Chrome la opción de menú es Herramientas > Ver código fuente (o el atajo de teclado
Ctrl+u). Chrome muestra el código fuente en una pestaña distinta.
• En Amaya la opción de menú es Ver > Código fuente (o el atajo de teclado Ctrl+o). En
Amaya el código fuente se puede editar (al guardar los cambios se sincronizan todas las
vistas).

Nota: Si el código fuente de una página editada con Amaya se ve en la vista de código fuente de
Internet Explorer o Firefox sin saltos de línea, es que no se ha configurado correctamente la
exportación de finales de línea en Amaya.
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 con una barra al final de la etiqueta, <etiqueta /> (por ejemplo, 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">.
Volver al principio de la página

Etiquetas mínimas
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, see http://www.w3.org/Amaya/" />
9 </head>
10
11 <body>
12 </body>
13 </html>

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_te_quees.html 27/09/2013
Qué es una página web. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé Si... Página 2 de 4
En este código se pueden reconocer bloques anidados en el que cada bloque corresponde a una
etiqueta:

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, 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).

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_te_quees.html 27/09/2013
Qué es una página web. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé Si... Página 3 de 4

◾ 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>
◾ La etiqueta title es obligatoria y debe incluirse en todas las páginas web.
◦ 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.

Volver al principio de la página

Variedades XHTML
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.
En este curso se trata la versión HTML 1.0 Strict. Los ejercicios están realizados en esta versión,
salvo aquellos en los que es necesario utilizar la versión HTML 1.1.
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).
Volver al principio de la página

Comentarios en una página web


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:

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_te_quees.html 27/09/2013
Qué es una página web. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé Si... Página 4 de 4
<p>Esto es un párrafo p normal y corriente. 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 Entre este párrafo y el anterior hay un
comentario que sólo puede comentario que sólo puede verse en el
verse en el código fuente.</p> código fuente.
<!--Esto es otro comentario-->

Los comentarios pueden estar insertados en cualquier lugar de la página web. El ejemplo muestra
dos comentarios, uno dentro de un párrafo <p> y otro fuera, pero también pueden añadirse
comentarios en el bloque <head>.
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en
http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 4 de octubre de de 2011

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_te_quees.html 27/09/2013

También podría gustarte