miércoles, 11 de marzo de 2015

Nociones de html y xhtml

Nociones de Html y xhtml


El estándar XHTML 1.0 incluye el 95% del estándar HTML 4.01, ya que sólo añade pequeñas mejoras y modificaciones menores. Afortunadamente, no es necesario leer las especificaciones y recomendaciones oficiales de HTML para aprender a diseñar páginas con HTML o XHTML. Las normas oficiales están escritas con un lenguaje bastante formal y algunas secciones son difíciles de comprender. Por ello, en los próximos capítulos se explica de forma sencilla y con decenas de ejemplos la especificación oficial de XHTML.
HTML y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, también es descendiente de SGML).
Figura 1.1 Esquema de la evolución de HTML y XHTML
Las páginas y documentos creados con XHTML son muy similares a las páginas y documentos HTML.
Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el ámbito de la creación de contenidos web, aunque no existe una conclusión ampliamente aceptada.
Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen XHTML. En un futuro cercano, si los diseñadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente. Sintaxis de las etiquetas XHTML
El lenguaje HTML original era muy permisivo en su sintaxis, por lo que era posible escribir sus etiquetas y atributos de muchas formas diferentes. Las etiquetas por ejemplo podían escribirse en mayúsculas, en minúsculas e incluso combinando mayúsculas y minúsculas. El valor de los atributos de las etiquetas se podían indicar con y sin comillas ("). Además, el orden en el que se abrían y cerraban las
etiquetas no era importante.
La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final son páginas con un código HTML desordenado, difícil de mantener y muy poco profesional. Afortunadamente, XHTML soluciona estos problemas añadiendo ciertas normas en la forma de escribir las etiquetas y atributos.
A continuación se muestran las cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a>un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>
4) Los atributos no se pueden comprimir:
Ejemplo correcto en XHTML:
<dl compact="compact">...</dl>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<dl compact>...</dl>
Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
5) Todas las etiquetas deben cerrarse siempre:
La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.
La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva línea, tal y como se verá más adelante. Por sus características, la etiqueta <br> nunca encierra ningún contenido de texto.
Como el estándar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que se incluya la etiqueta <br> se debería cerrar de forma seguida: <br></br>. Para que el código resulte más cómodo de escribir, XHTML permite en estos casos escribir de forma abreviada una etiqueta que se abre y se cierra de forma consecutiva.
En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto. En la forma compacta es habitual equivocarse con la posición del carácter /.
Ejemplo correcto en XHTML:
<br/>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<br>
Además de estas cinco restricciones básicas, XHTML incluye otros cambios más avanzados respecto a HTML:
1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que se encuentran antes y después del valor. Además, se eliminan todos los espacios en blanco sobrantes dentro del valor de un atributo. En otras palabras, si en el interior de un atributo se incluyen varios espacios en blanco seguidos, se eliminan todos salvo un único espacio en blanco utilizado para separar las diferentes palabras.
2. Como se explicará más adelante al hablar de la etiqueta <script>, el código JavaScript debe encerrarse entre unas etiquetas especiales (<![CDATA[ y ]]>) para evitar que el navegador interprete de forma errónea caracteres como & y <.
3. Las páginas XHTML deben prescindir del atributo name para identificar de forma única a los elementos. En su lugar, siempre debe utilizarse el atributo id. De hecho, en la versión 1.0 del estándar XHTML, el atributo name se ha declarado obsoleto para las etiquetas a, applet, form, frame, iframe, img y map.
Ejemplo:
Aunque la etiqueta <script> permite enlazar código de varios lenguajes de programación, el uso habitual de <script> consiste en enlazar un archivo JavaScript externo:
<head>
<script type="text/javascript" src="http://www.ejemplo.com/js/
inicializar.js"></script>
</head>
El atributo type utilizado habitualmente para los archivos JavaScript es "text/javascript". El atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.
Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:
<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function() { alert("La página se ha cargado completamente"); }
//]]>
</script>
</head>
<body>
...
</body>
</html>
Cuando se incluye código JavaScript en la propia página XHTML, se debe insertar dentro de una sección especial llamada CDATA. Para ello, el código JavaScript se debe encerrar entre <![CDATA[ y ]]>.
Cuando el navegador encuentra una sección de este tipo, no procesa su contenido como si fuera XHTML y por tanto no tiene en cuenta los posibles errores de validación de XHTML.
De esta forma, se pueden construir páginas XHTML válidas y código JavaScript correcto. En los capítulos posteriores se profundiza en el concepto de validación de páginas XHTML. Los caracteres // al comienzo y al final de la sección CDATA son necesarios para los navegadores que no son capaces de procesar correctamente estas secciones.
La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el código) puede aparecer en cualquier parte del documento HTML, aunque normalmente se incluye dentro de la cabecera de la página (<head>...</head>).
Reglas para DTDs estrictos
El texto no debe ser insertado directamente en el cuerpo (dentro de la etiqueta body).
o Incorrecto: <body>Texto plano</body>
o Correcto: <body><span>Texto plano</span></body>
No se deben insertar elementos de bloque dentro de elementos de línea.
o Incorrecto: <em><h2>Título</h2></em>
o Correcto: <h2><em>Título</em></h2>

DOCTYPE
El estándar XHTML deriva de XML, por lo que comparte con el muchas de sus normas y sintaxis. Uno de los conceptos fundamentales de XML es la utilización del DTD o Document Type Definition ("Definición del Tipo de Documento").
Un DTD es un documento que recoge el conjunto de normas y restricciones que deben cumplir los documentos de un determinado tipo. Si por ejemplo se define un DTD para los documentos relacionados con libros, se puede fijar como norma que cada libro tenga un título y sólo uno, que tenga uno o más autores, que la información sobre el número de páginas pueda ser opcional, etc.
El conjunto de normas, obligaciones y restricciones que se deben seguir al crear un documento de un determinado tipo, se recogen en su correspondiente DTD. El estándar XHTML define el DTD que deben seguir las páginas y documentos XHTML. En este documento se definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede tener cada atributo.
En realidad, la versión 1.0 del estándar de XHTML define tres DTD diferentes. Para indicar el DTD utilizado al crear una determinada página, se emplea una etiqueta especial llamada doctype. La etiqueta doctype es el único elemento que se incluye fuera de la etiqueta <html> de la página. De hecho, la declaración del doctype es lo primero que se debe incluir en una página web, antes incluso que la etiqueta
<html>.
Para que una página XHTML sea correcta y válida es imprescindible que incluya el correspondiente doctype que indica el DTD utilizado. A continuación se muestran los tres DTD que se pueden utilizar al crear páginas XHTML:
XHTML 1.0 Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Se trata de la variante con las normas más estrictas y las restricciones más severas. Las páginas web que incluyan este doctype, no pueden utilizar atributos relacionados con el aspecto de los contenidos, por lo que requiere una separación total de código HTML y estilos CSS.
XHTML 1.0 Transitorio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se trata de una variante menos estricta que la anterior, ya que permite el uso de algunos atributos HTML relacionados con el aspecto de los elementos.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta última variante la utilizan las páginas que están formadas por frames, una práctica completamente desaconsejada y que hoy en día sólo utilizan los sitios web obsoletos.
Si no tienes claro el DTD que más te conviene, deberías utilizar el XHTML 1.0 transitorio, ya que es más fácil crear páginas web válidas. Si tienes conocimientos avanzados de XHTML, puedes utilizar XHTML 1.0 estricto.
Por otra parte, además del DOCTYPE apropiado, también es necesario que las páginas web indiquen el namespace asociado. Un namespace en un documento XML permite diferenciar las etiquetas y atributos que pertenecen a cada lenguaje.
Si en un mismo documento se mezclan etiquetas de dos o más lenguajes derivados de XML (XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podría determinar a qué lenguaje pertenece cada etiqueta y por tanto, no se podría interpretar esa etiqueta o ese atributo. Los namespaces se indican mediante una URL.
El namespace que utilizan todas las páginas XHTML (independientemente de la versión y del DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
De esta forma, es habitual que las páginas XHTML comiencen con el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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">
Aunque el código anterior es mucho más complicado que una simple etiqueta <html>, es imprescindible para que las páginas XHTML creadas sean correctas y superen satisfactoriamente el proceso de validación que se muestra en los capítulos siguientes.
Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear las páginas, todo el código anterior se incluye de forma automática. Si creas las páginas a mano, sólo tienes que copiar y pegar ese código en cada nueva página.
Documento XHTML
La estructura básica de cualquier página o documento XHTML válido incluye al menos las siguientes etiquetas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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">
<head>
<title>...</title>
...
</head>
<body>
...
</body>
</html>
El DOCTYPE también puede ser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Cabecera XHTML
Las cabeceras HTML pueden llegar a ser muy grandes, ya que incluyen toda la metainformación de la página y los enlaces a todos los recursos externos (hojas de estilos CSS, archivos JavaScript y archivos
RSS).
<head>
<title>Título de la página</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="..." />
...
<meta name="author" content="..." />
<style type="text/css" media="screen,projection">
@import '/css/archivo.css';
</style>
<link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link rel="alternate" type="application/rss+xml" title="..." href="/archivo_rss.xml" />
<script type="text/javascript" src="/js/archivo.js"></script>
<style type="text/css">
/* Código CSS */
</style>
<script type="text/javascript">
//<![CDATA[ // Código JavaScript
//]]>
</script>
</head>


No hay comentarios:

Publicar un comentario