mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-22 00:12:32 +00:00
399 lines
18 KiB
HTML
399 lines
18 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>XHTML</title>
|
|
<meta content="Raúl Luna" name="author">
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
|
|
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>XHTML</p>
|
|
|
|
</div>
|
|
|
|
<div id="flechadcha">
|
|
<a href="../estilos/css1.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="../marcos/marcos5.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div id="contenido">
|
|
|
|
<h2>XHTML</h2>
|
|
|
|
|
|
|
|
<h3>¿Qué es?</h3>
|
|
|
|
|
|
<p>Esta es
|
|
la primera pregunta que surge cuando escuchamos este nuevo
|
|
acrónimo. El lenguaje extensible de marcado de hipertexto,
|
|
que sería la traducción del acrónimo <acronym title="eXtensible HyperText Markup Language">XHTML</acronym>
|
|
y nace con la intención de sustituir al lenguaje <acronym title="HyperText Markup Language">HTML</acronym> para
|
|
superar las limitaciones de éste y adaptarse a la creciente
|
|
cantidad de aplicaciones capaces de hacer uso del lenguaje <acronym title="eXtensible Markup Language">XML</acronym>. La
|
|
idea base es combinar la sintaxis del lenguaje <acronym title="HyperText Markup Language">HTML</acronym>,
|
|
diseñado para mostrar los datos con la de <acronym title="eXtensible Markup Language">XML</acronym>,
|
|
encargado de describir dichos datos. </p>
|
|
|
|
|
|
<p>El
|
|
objetivo perseguido es que la información pueda ser
|
|
interpretada correctamente independientemente del dispositivo desde el
|
|
que se accede a ella. Para conseguir este fin, la
|
|
especificación <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> establece
|
|
unas normas más estrictas que las del <acronym title="HyperText Markup Language">HTML</acronym> para
|
|
el etiquetado de los documentos.</p>
|
|
|
|
|
|
<h3>¿Cúales
|
|
son los requisitos que debe cumplir?</h3>
|
|
|
|
|
|
<p>El esquema básico del documento, para considerarse conforme a
|
|
la especificación deberá cumplir las siguientes
|
|
condiciones:</p>
|
|
|
|
|
|
|
|
<ol>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<p>El elemento raíz del documento debe ser<code>
|
|
<html></code>.</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<p>El elemento raíz del documento
|
|
debe indicar el espacio nominal XHTML usando el atributo <code>xmlns</code>.
|
|
El
|
|
espacio nominal para XHTML es <code>http://www.w3.org/1999/xhtml</code><br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<p>Debe haber una declaración DOCTYPE en el documento
|
|
antes del elemento raíz. El identificador público
|
|
incluido en la declaración DOCTYPE debe hacer referencia a
|
|
alguna de las tres DTD definidas por el W3C usando el Identificador Formal Público
|
|
correspondiente. </p>
|
|
|
|
|
|
|
|
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
|
|
|
|
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code><br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br>
|
|
|
|
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
|
|
|
|
|
|
</code><br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"<br>
|
|
|
|
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></code><br>
|
|
|
|
|
|
<br class="avisos">
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<p class="avisos"><acronym title="HyperText Markup Language"></acronym>
|
|
N|VU es capaz de cumplir estos requisitos y crear la base de documentos
|
|
conformes con la especificación para los dos primeros tipos, ya
|
|
que, igual que ocurría en HTML, no admite documentos basados en
|
|
la DTD de marcos.</p>
|
|
|
|
|
|
<p>Además de lo anterior, y aunque las etiquetas serán las que ya conocemos puesto que proceden
|
|
del <acronym title="HyperText Markup Language">HTML</acronym>,
|
|
habrá que cumplir algunas normas específicas para que el
|
|
documento se pueda validar como "gramaticalmente correcto". Algunos de
|
|
los más importantes serán:</p>
|
|
|
|
|
|
<ol>
|
|
|
|
|
|
<li>Las etiquetas no podrán solaparse. <br>
|
|
|
|
|
|
El código <code><p>un fragmento <em>enfatizado</p></em></code>
|
|
que validaría correctamente en HTML 4 será incorrecto y
|
|
tendrá que escribirse con las etiquetas correctamente anidadas: <code><p>un fragmento <em>enfatizado</em></p></code></li>
|
|
|
|
|
|
<li><code></code>Los nombres de elementos y atributos deben escribirse siempre en minúsculas.<br>
|
|
|
|
|
|
Aunque desde el principio recomendamos que se escribieran siempre
|
|
en minúsculas, podríamos haberlo hecho en también
|
|
en mayúsculas, pero <acronym title="eXtensible Markup Language">XML</acronym> es sensible a mayúsculas y por eso se adopta esta norma.</li>
|
|
|
|
|
|
<li>Con HTML 4.0, basado en SGML, en algunos elementos podía omitirse la etiqueta
|
|
|
|
de cierre, de tal manera que la apertura de los elementos que les sucedían
|
|
|
|
implicaba dicho cierre. Esta omisión no está permitida en XHTML, basado en XML.
|
|
|
|
Todos los elementos que no estén declarados en la DTD como <code>EMPTY</code>
|
|
|
|
deben tener una etiqueta de cierre.<br>
|
|
|
|
|
|
Por ejemplo: <code><p>esto es un párrafo<p>y esto otro</code> sería correcto en HTML, pero tendría que convertirse en <code><p>esto es un párrafo</p> <p>y esto otro</p> </code>para validar correctamente en XHTML.</li>
|
|
|
|
|
|
<li>Todos los valores de atributos deben ir entrecomillados, incluso aquellos
|
|
|
|
que son numéricos. Ya no valdrá <code><table rows=3></code> sino que habrá que escribirlo <code><table rows="3"></code></li>
|
|
|
|
|
|
<li><code></code>XML no soporta la minimización de atributos.
|
|
Los pares atributo-valor deben escribirse en toda su extensión,
|
|
por lo que no podríamos hacer que un elemento de formulario
|
|
apareciera marcado con el código <code><input type="radio" name="verde" checked>, </code>sino que habría que escribirlo<code> </code><code><input type="radio" name="verde" checked="checked"></code></li>
|
|
|
|
|
|
<li><code></code>Los elementos vacíos, que no necesitaban una
|
|
etiqueta de cierre en HTML, como <br> <hr> o <img>
|
|
deben llevarla para validar correctamente en XHTML o bien terminar su
|
|
etiqueta de apertura con <code>/></code>. Para garantizar la
|
|
compatibilidad es conveniente que este cierre de la etiqueta de
|
|
apertura vaya precedido por un espacio con lo que las etiquetas
|
|
mencionadas quedarían así: <code><br /> <hr atributos /> <img atributos /></code></li>
|
|
|
|
|
|
<li><code></code>En HTML se podía identificar fragmentos del documento utilizando tanto el atributo <code>name</code> como el atributo <code>id</code>. En XHTML se utilizará siempre <code>id</code> incluso en aquellos casos en los que se había utilizado siempre <code>name</code>, pudiendo cada atributo <code>id</code> aplicarse a un único fragmento del documento.</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<p class="avisos">Aunque en un principio pueda haberte parecido
|
|
complicado, el objetivo de este epígrafe es sencillamente
|
|
presentarte algunas normas específicas para que las conozcas,
|
|
pero no deberías preocuparte por su aplicación, ya
|
|
que N|VU se ajusta a las especificaciones y se encarga de crear el
|
|
código acorde con las normas para que sea un documento bien
|
|
formado y gramaticalmente correcto. </p>
|
|
|
|
<h2>Crear un documento XHTML con N|VU</h2>
|
|
|
|
<p>Podemos decidirnos a escribir crear documentos <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> como opción por defecto, para lo cual bastará con que lo indiquemos en el menú <span class="refmenu">herramientas </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> preferencias </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> avanzado</span>
|
|
donde marcaremos como lenguaje preferido XHTML 1 y optaremos por
|
|
utilizar un DTD transitional o strict. A partir de este momento, cada
|
|
vez que pulsemos el icono <img style="width: 58px; height: 40px;" alt="Nuevo" src="../imagenes/botonnuevo.png"> sin indicar ningún cambio el documento se creará de acuerdo a lo especificado.</p>
|
|
|
|
<p>Por otra parte, si desplegamos las opciones, elegimos<span class="refmenu"> archivo </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> nuevo</span> o pulsamos <img style="width: 36px; height: 26px;" alt="Tecla CTRL" src="../imagenes/teclactrl.png"> + <img style="width: 26px; height: 27px;" alt="Tecla N" src="../imagenes/teclan.png">
|
|
dispondremos de dos casillas de verificación para indicar para
|
|
indicar si queremos que el nuevo documento sea en lenguaje XHTML y con
|
|
DTD strict.</p>
|
|
|
|
<p>Ten en cuenta que existe un error en el programa por el que, cuando
|
|
al crear un documento nuevo especifiquemos un lenguaje y una DTD esta
|
|
elección sobreescribirá las que hubiéramos marcado
|
|
en las preferencias generales.</p>
|
|
|
|
<p>Convertir documentos HTML a XHTML</p>
|
|
|
|
<p>Podríamos convertir manualmente documentos creados
|
|
originalmente en lenguaje HTML aplicando las normas que hemos
|
|
comentado, pero puede ser una tarea muy tediosa.</p>
|
|
|
|
<p>El W3C desarrolló inicialmente una herramienta entre cuyas
|
|
funcionalidades, además de la de analizar y validar documentos
|
|
estaba la de corregir y convertir el código de HTML 4 a XHTML 1,
|
|
siempre que el documento original no contuviera un número
|
|
excesivo de errores. Dicha herramienta se denomina TidyHTML pero tiene
|
|
el problema de tratarse de una aplicación en línea de
|
|
comandos. Para facilitar el uso se ha desarrollado un interfaz grafico
|
|
de usuario (GUI) que recibe el nombre de HTML-Kit que podrás
|
|
descargar desde <a href="http://www.chami.com/html-kit/download/" target="_blank">http://www.chami.com/html-kit/download/</a></p>
|
|
|
|
<p><img class="flotder" style="width: 194px; height: 90px;" alt="Opción de menú para instalar traducción de HTMLKit" title="Opción de menú para instalar traducción de HTMLKit" src="imagenes/instalarparche.gif">Una
|
|
vez instalado el programa original en inglés tendrás que
|
|
descargar el parche de traducción al castellano desde <br>
|
|
<a href="http://www.chami.com/html-kit/plugins/info/irtranslationspanish/" target="_blank">http://www.chami.com/html-kit/plugins/info/irtranslationspanish/</a> </p>
|
|
|
|
<p>Se trata de un archivo comprimido pero no será necesario que
|
|
lo instalemos manualmente, ya que el propio HTMLKit se encargará
|
|
de instalarlo. Para ello arrancamos el programa y vamos al menú <span class="refmenu">tools </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> </span><span class="refmenu">install </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> install data file</span>, elegiremos el archivo que acabamos de bajar y pulsaremos <span class="refmenu">ok</span>, contestando afirmativamente si se nos hace alguna pregunta más durante el proceso de instalación.</p>
|
|
|
|
<p>Aunque comprobarás que el programa cuenta con multitud de
|
|
posibilidades vamos a concentrarnos en la que nos ha llevado hasta
|
|
él. Para ello vamos primero a modificar un par de opciones en
|
|
las preferencias y luego veremos el procedimiento para convertir un
|
|
archivo a XHTML.</p>
|
|
|
|
<h3>Modificación de dos preferencias básicas de HTML-Kit</h3>
|
|
|
|
<p>Si no se aplica inmediatamente la traducción reiniciamos el
|
|
programa y, ya con él en castellano, vamos al menú <span class="refmenu">editar </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> preferencias</span>.
|
|
Veremos aparecer un panel con multitud de pestañas y opciones
|
|
(que siguen en inglés porque esta parte no está
|
|
traducida).</p>
|
|
|
|
<p class="centrado"><img style="width: 598px; height: 430px;" alt="Panel de preferencias de configuración" title="Panel de preferencias de configuración" src="imagenes/preferencias.png"></p>
|
|
|
|
<p>Como ves en la imagen hemos seleccionado la pestaña <span class="refmenu">tidy</span> y hemos modificado dos características:</p>
|
|
|
|
<ul>
|
|
|
|
<li>En <span class="refmenu">character encoding</span> hemos utilizado el desplegable para seleccionar <span class="refmenu">ISO Latin-1</span>
|
|
(que es otra forma de denominar al conjunto de caracteres ISO-8859-1
|
|
que estamos usando habitualmente). Si no lo hacemos así el
|
|
programa tomará por defecto el conjunto <acronym title="United States American Standard Code for Information Interchange">US ASCII</acronym> con lo que nos encontraremos con problemas con los caracteres acentuados que no están incluidos en este conjunto.</li>
|
|
|
|
<li>La segunda opción que viene desmarcada por defecto pero que aquí hemos activado es <span class="refmenu">indent code</span>
|
|
que hace que el programa tabule el contenido para facilitar su lectura
|
|
cuando vemos el código. Si la activamos aumentará
|
|
ligeramente el tamaño de los archivos pero, a cambio
|
|
resultará mucho más fácil consultarlos cuando
|
|
veamos el código. Queda pues a tu elección activarla o
|
|
no.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<p>Cuando pulsemos <span class="refmenu">ok</span> el programa quedará preparado para realizar el trabajo que le vamos a pedir.</p>
|
|
|
|
<h3>Convertir documentos de HTML a XHTML con HTM-Kit</h3>
|
|
|
|
<p>El procedimiento a seguir es:</p>
|
|
|
|
<ol>
|
|
|
|
<li>Abrimos el documento original con la opción habitual <span class="refmenu">archivo </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> abrir archivo</span> </li>
|
|
|
|
<li>Acudimos al menú acciones <img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"> tools <img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"> html tidy <img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"> convert to xhtml</li>
|
|
|
|
<li>Veremos dividirse la pantalla en dos zonas: en la izquierda el
|
|
documento original y en la derecha la conversión propuesta.
|
|
Es conveniente que comprobemos que aparece el conjunto de
|
|
carácteres ISO-8859-1 que habíamos establecido en las
|
|
preferencias. Por cierto, puedes comprobar en la imagen que una de las
|
|
correcciones que ha realizado el programa ha sido la supresión
|
|
de los espacios en blanco que erróneamente introduce N|VU en el
|
|
código. </li>
|
|
|
|
</ol>
|
|
|
|
<p class="centrado"><img style="width: 700px; height: 381px;" alt="Ventana con original y propuesta de conversión" title="Ventana con original y propuesta de conversión" src="imagenes/resultado.png"></p>
|
|
|
|
<ol start="4">
|
|
|
|
<li>Si estamos de acuerdo con las modificaciones propuestas
|
|
pulsaremos sobre la zona del resultado con el botón derecho y
|
|
elegiremos la opción <img style="width: 246px; height: 22px;" alt="Copiar resultado al editor" src="imagenes/copiarresultado.png"> que trasladará el contenido de la zona derecha a la izquierda. </li>
|
|
|
|
<li>Por último salvaremos el archivo, bien con el mismo nombre o bien con otro diferente con las opciones habituales <span class="refmenu">archivo </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> salvar</span> o <span class="refmenu">archivo </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> salvar como</span></li>
|
|
|
|
</ol>
|
|
Puedes encontrar un manual en castellano bastante amplio en <a href="http://www.ignside.net/man/html-kit/index.php" target="_blank">http://www.ignside.net/man/html-kit/index.php</a>
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 75" title="Actividad 75" src="../imagenes/numeracion/setentaycinco.gif">
|
|
<ul>
|
|
|
|
<li>Como es posible que te inquiete someter tus archivos a un
|
|
programa que modificará automáticamente el código
|
|
vamos a empezar a hacer "experimentos con gaseosa". Utilizaremos
|
|
archivos ajenos, como puede ser éste que estás leyendo en
|
|
este momento.</li>
|
|
<li>Abre este archivo en N|VU y guárdalo en una carpeta en tu
|
|
disco duro. La razón para hacer esto es evitar problemas con las
|
|
rutas hacia las imágenes cuando modifiquemos el archivo
|
|
original: al encontrarse en el CD-ROM no podríamos escribir en
|
|
la ruta original y podría ocurrir que perdiéramos alguna
|
|
referencia al guardarlo en el disco duro, mientras que
|
|
haciéndolo así todos los archivos necesarios
|
|
deberían guardarseen la misma carpeta que el código de la página. </li>
|
|
|
|
<li>Abre el archivo que acabas de guardar en tu disco duro con HTML-Kit.</li>
|
|
<li>Conviértelo a XHTML tal como se ha indicado y
|
|
guárdalo con un nombre diferente. Puedes utilizar el propio
|
|
HTML-Kit para abrir ambos archivos y comparar las diferencias de
|
|
código.</li>
|
|
<li>Abre ambos archivos con el navegador y compáralos para ver
|
|
si encuentras alguna diferencia en la presentación. (No
|
|
debería ocurrir y, gracias a la conversión tendrás
|
|
un archivo escrito de acuerdo a las recomendaciones más
|
|
actualizadas del W3C)</li>
|
|
<li>Sigue practicando con otros archivos hasta que tengas suficiente seguridad para atreverte a convertir tu propio trabajo.</li>
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|