UNIVERSIDAD DE EL SALVADOR FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE TEMA: XHTML CATEDRA: INTRODUCCION A LA PROGRAMACION EN INTERNET

Transcripción

1 UNIVERSIDAD DE EL SALVADOR FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE TEMA: XHTML CATEDRA: INTRODUCCION A LA PROGRAMACION EN INTERNET DOCENTE: Ing. CARLOS ARTURO RUANO. INSTRUCTOR: Tec. DANIEL EDENILSON LOPEZ. ALUMNOS: DUBON CASTRO, MARIA ELISA LOPEZ MENENDEZ, RINA ELIZABETH PEREZ LINAREZ, NUVIA YESENIA RIVERA RAMOS, EDITH NOHEMY SANTA ANA, 17 DE OCTUBRE DE 2005

2 INDICE Introducción 3 Objetivos 4 Contenido 1. Html 5 2. Diferencias entre Html y Xhtml 7 3. Avances con los que cuenta Xhtml Elemento raíz Conversión de Html a Xhtml Conversión manual Conversión automática Ejemplos 18 Conclusión

3 INTRODUCCION HTML fue concebido principalmente como un lenguaje de intercambio de documentos científicos, valiéndose de un reducido numero de etiquetas para la formulación de documentos relativamente simples. Con la constante invención de nuevos elementos, se fue creando una falta de compatibilidad con los navegadores, dando paso a una nueva estructura llamado XHTML (Lenguaje de Marcado algo), con la cual se pretende corregir este tipo de problemas. XTHML es una redefinición de HTML 4 en XML, que a pasar de tener distinto nombre conserva la mayoría de los elementos y atributos que son utilizados en la creación de los documentos en HTML. En este trabajo se resaltan las principales diferencias de HTML con XHTML, así como sus normativas y los avances que se tienen con esta nueva redefinición; mostrando diferentes ejemplos aplicando la estructura básica de los documentos XHTML

4 OBJETIVOS OBJETIVO GENERAL Conocer los elementos necesarios que esta conformados en XHTM (Lenguaje de marcado de hipertexto extensible) OBJETIVOS ESPECIFICOS Definir las diferencias que existen entre HTML y XHTML Aplicar las normas de XHTML para lograr un mejor funcionamiento Identificar las mejoras que XHTML da para la realización de páginas Web

5 1. XHTML XHTML significa lenguaje de marcado de hipertexto extensible y es una extensión de HTML (lenguaje de marcado de hipertexto). XHTML nació por las limitaciones de uso con las que cada vez son más utilizadas las herramientas basadas en XML (lenguaje de etiqueta extensible). XHTML permite una correcta interpretación de la información independientemente del dispositivo desde el que se accede a ella, también esta orientado al uso de un etiquetado correcto por ello exige un conjunto de requisitos básicos entre los cuales se puede mencionar estructuración coherente dentro del documento donde se incluirían elementos correctamente anidados, etiquetas en minúsculas, elementos cerrados correctamente, atributos de valores entrecomillados, etc. Algunas mejoras que pueden ser percibidas al usar XHTML son: Los documentos XHTML son conformes a XML. Como tales son fácilmente visualizados, editados y validados con herramientas XML estándar. Los documentos XHTML pueden escribirse para que funcionen igual o mejor que lo hacían antes, tanto para los usuarios de HTML como en los nuevos usuarios de XHTML

6 Los documentos XHTML pueden usar aplicaciones que se basen ya sea en el Modelo del Objeto de Documento (DOM) de HTML o XML. A medida que la familia XHTML evolucione, los documentos conformes a XHTML estarán más preparados para interactuar dentro de y entre los distintos entornos XHTML. Al usar XHTML se deben tomar en cuenta algunos aspectos importantes entre los cuales se pueden mencionar: Los documentos deben estar bien formados: Esto quiere decir que todos los elementos deben tener etiquetas de cierre, deben estar escritos de una forma determinada y además todos los elementos deben estar anidados correctamente. Los nombres de atributos y elementos deben ir en minúsculas: Tanto los elementos como los atributos deben ir en minúsculas para todos los elementos HTML y los nombres de atributos. Esto es importante ya que XML interpreta las mayúsculas y las minúsculas de forma diferente. Los elementos que no estén vacíos necesitan etiquetas de cierre. Los valores de las etiquetas deben ir siempre entre comillas: Todos los valores de los atributos deben ir entre comillas, incluso aquellos que sean numéricos

7 2. DIFERENCIAS ENTRE HTML Y XHTML Para lograr una mejor explicación de las diferencias existentes entre HTML y XHTML se necesita de una definición mas clara de las siguientes aplicaciones: HTML: es una aplicación SGML conforme al estándar internacional ISO 8879 y está ampliamente considerado como el lenguaje de publicación estándar del World Wide Web. También es un lenguaje para el intercambio de documentos científicos y técnicos adaptado para ser usado por no especialistas en el tratamiento de documentos. SGML: Es un lenguaje para describir lenguajes de Etiquetas, particularmente aquellos usados en intercambio de documentos electrónicos, manejo de documentos y publicación de ellos. XML: Es un lenguaje de Etiqueta extensible, que fue concebido de modo de sacar lo mejor de potencia y flexibilidad de SGML y evitando su complejidad. Aun siendo una forma restringida de SGML, XML retiene las características mas usadas de SGML

8 Entre algunas de las diferencias existentes entre HTML y XHTML tenemos: Los nombres de elementos y atributos deben escribirse en minúsculas: como por ejemplo <BODY BgColor="#000000"> esta correctamente escrito en HTML pero en XHTML se debe de escribir en minúsculas de la siguiente manera <body bgcolor="#000000">. Todos los elementos no vacíos deben ir entre la etiqueta de principio y la etiqueta de final. Esto se refiere que a veces en HTML se podían no cerrar algunas etiquetas por que se daba por terminado al comenzar otra etiqueta pero con XHTML se deben de especificar bien los cierres de todas las etiquetas. Todos los valores de los atributos deben estar entre comillas: como por ejemplo: <table border=2> esto esta correctamente escrito en HTML pero en XHTML esto debe de ponerse en comillas así <table border= 2 >. Minimización de los atributos: El XML no soporta la minimización de atributos. Los pares atributo-valor deben escribirse en toda su extensión. Todos los elementos deben estar anidados ordenadamente: En HTML no hace falta tener especial cuidado en ordenar los anidamientos de las etiquetas (etiquetas dentro de otras etiquetas). Al igual que sucede con XML, en XHTML no se permiten tales libertades, debiendo tener especial cuidado en el orden en el que se realizan los anidamientos. Como por ejemplo en HTML esta expresión es correcta <p>este - 8 -

9 texto <b>negrita<i> y cursiva</b></i></p> pero en XHTML deben de escribirse de la siguiente manera p>este texto <b>negrita<i> y cursiva</i></b></p>. Es tomado como un todo ya que cumple con la regla denominada document Cada una de las entidades analizadas a las que se hacen referencia en el documento están bien formadas

10 3. AVANCES CON LOS QUE CUENTA XHTML. Los documentos XHTML deben incluir una declaración de "tipo de documento."aunque esta norma ya existe en los documentos HTML. En el XHTML su utilización es obligatoria, y es necesario que antes del elemento raíz exista una declaración DOCTYPE. El identificador público incluido en la declaración DOCTYPE a alguna de las tres siguientes: DTD: strict, transitional. Frameset. Siendo todas ellas unas aproximaciones, más o menos completas, a la especificación HTML Su declaración y características más importantes son: strict: Se utiliza cuando se da formato a los textos a través de CSS (Cascading Style Sheets), cuando no se recurre a las etiquetas <font>. para controlar la forma en la que los navegadores muestran el contenido del documento. La declaración del tipo de documento debe ser de la siguiente manera:<! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" " transitional: Se utiliza cuando no se describe la presentación de los documentos por medio de hojas de estilo en cascada, prefiriendo realizarlo a base de etiquetas. Es el

11 Sistema adecuado para cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de tratamiento de CSS. La declaración del tipo de documento debe ser de la siguiente manera:<!doctype html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"" transitional.dtd"> frameset: Se utiliza cuando los documentos incorporan cuadros. La declaración del tipo de documento debe ser de la siguiente manera: <! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Frameset//EN"" En todos los casos es evidente que el identificador del sistema puede ser modificado apropiadamente para reflejar convenciones de rango local

12 4. ELEMENTO RAÍZ El elemento raíz del documento XHTML debe ser <html> y en él debemos declarar el "namespace" usando el atributo xmls. EL "namespace" para XHTML es: En XHTML, los elementos style y script se declaran como elementos con contenido #PCDATA. Pero en estos elementos se puede colocar todo tipo de código y, por ello, los elementos <,y & serán tratados como comienzos de etiquetado, y entidades como < y & serán reconocidas como referencias a las entidades < y & respectivamente por el procesador XML. Englobar el contenido del elemento script y style dentro de una sección como CDATA evita el procesamiento de estas entidades. Por ello, lo que en HTML escribimos así: <SCRIPT LANGUAGE="JavaScript"> document.write("<p>esto es una prueba</p>"); </SCRIPT> En XHTML lo debemos escribir así: <script language="javascript"> <![CDATA[ document.write("<p>esto es una prueba</p>"); ]]>

13 </script> El único carácter que no está permitido dentro es el que indica el cierre de la marca CDATA, es decir, el código ]]>. En muchos casos se puede evitar la utilización de las secciones CDATA, incluyendo los códigos en archivos externos y aplicando variantes similares a: <script language="javascript" src="codigo.js"></script> <link href="nombre_hoja_de_estilo.css"/>

14 5. CONVERSION DE HTML A XHTML son: La conversión de documentos HTML se puede realizar de dos formas, las cuales La conversión manual La conversión automática 5.1 CONVERSION MANUAL DE UN DOCUMENTO HTML A XHTML Existen dos maneras de para convertir un documento HTML a un documento XHTML lo cuales son: 1. Asegurarse de que el documento esta bien estructurado. 2. Observar su validez respecto a alguna de las tres DTD que forman XHTML. Como un ejemplo convertiremos el siguiente documento HTML a un documento XHTML: Primero se cambia la estructura del documento y se forma en la forma que XHTML lo exige: <html> <body>

15 <h1>página que convertiremos </h1> <p>texto en <b>negrita <i> y</b> cursiva </i>. <p>salto de linea. <br>xxxxxx.</p> <P align=center>centrado</p> <ul> <li>esto es una lista con un enlace <a href="xxxxxx">enlace</a></li> <li>esto es otra lista con una imagen <img src="xxx.gif"> <li><font size="2" color=blue>este es otro elemento de la lista con otro color y tamaño de fuente mayor.</font> </ul> <p>formulario</p> <form> <input type="checkbox" checked>opcion 1 <input type="checkbox">opción 2 </form> </body> </html> Al convertirlo a XHTML quedaria de la siguiente forma: <?xml version="1.0" encoding="iso "?> <html> <body> <h1>página convertida</h1>

16 <p> texto en <b>negrita </b> y <i>cursiva </i>.</p> <p> salto de linea. <br />xxxxxxxxxx </p> <p align="center"> centrado</p> <ul> <li>esta es una lista con un enlace <a href="xxxx">enlace</a></li> <li>esto es otra lista con una imagen <img src="xxx.gif" /></li> <li><font size="2" color="blue">este es otro elemento de la lista con otro color y tamaño de fuente mayor.</font></li> </ul> <p> formularío</p> <form> <input type="checkbox" checked="checked" />Opción 1 <input type="checkbox" />Opción 2 </form> </body> </html> Luego se comprueba si el documento se ajusta a alguna de las DTD de XHTML. Para esto se debe colocar en la cabecera del documento la declaración de tipo de documento y luego al validarlo primero se observara la obligatoriedad de que exista el elemento head. Y al hacer esto el documento HTML se convierte en un documento XHTML

17 5.2 CONVERSION AUTOMATICA DE UN DOCUMENTO HTML A XHTML Es posible que la conversión de un documento HTML se pueda convertir a un documento XTHML de una forma automática. Para ello existe una herramienta muy útil desarrollada por Dave Raggett denominada como Tidy. Dicha herramienta la podemos encontrar en el Web del W3C. Para poder utilizar esta herramienta es necesario tenerla instalada, este paso no implica de mucha complejidad ya que es un fichero.exe. El Tidy dispone de un amplio número de parámetros que nos permiten parametrizar la salida de maneras muy diferentes. En la documentación de la aplicación se encuentran definidos con más detalle todos los parámetros que podemos utilizar. Entre ellos el parámetro --output-xhtml, mediante el cual indicamos que la salida sea XHTML El Tidy es capaz de trabajar con un fichero de configuración, lo que nos permite no tener que reescribir los parámetros todas las veces que lo utilicemos. Este fichero de configuración se referencia mediante el parámetro: -config. La aplicación Tidy es cada vez más utilizada, en especial porque el uso del XHTML se está popularizando y la facilidad que nos ofrece para convertir nuestros documentos HTML en XHTML. Esto ha contribuido a que el número de aplicaciones que surgen alrededor de Tidy sea cada vez mayor

18 6. EJEMPLOS DE XHTML 1.-Ejemplo de links <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd"> <html xmlns=" <head> <title>los centros de mensajes mas utilizados</title> </head> <body> <p>los centros de mensajes mas utilizados:</p> <p><a href=" <p><a href=" <p><a href=" </body> </html> 2.-Ejemplo de titulo en cascada. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" " <html> <head>

19 <title>hola a todos</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <!--.Estilo1 { font-size: 12px; font-style: italic; font-weight: bold; } --> </style> </head> <body> <div align="center" class="estilo1"> <h1>hola este es un ejemplo en xhtnl </h1> </div> </body> </html> 3.-Ejemplo de listas sin ordenar. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd"> <html xmlns=" <head>

20 <title>los centros de mensajes mas utilizados</title> </head> <body> <p>cursos:</p> <ul> <li>cc52r</li> <li>el271</li> </ul> </body> </html> 4.-Ejemplo de elementos bien y mal anidados. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd"> <html xmlns=" <head> <title>los centros de mensajes mas utilizados</title> </head> <body> <p>ejemplo de elementos bien <em>anidados</em>.</p> <p>ejemplo de elementos mal <em>anidados</p>.</em> </body> </html>

21 5.-Ejemplo de valores de atributos correctos e incorrectos. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd"> <html xmlns=" <head> <title>los centros de mensajes mas utilizados</title> </head> <body> <table rows="3"> <table rows=3> ejemplo incorrecto </body> </html>

22 CONCLUSION Con la realización de este documento se ha visto claramente la importancia de conocer todas las normativas necesarias para la realización de páginas Web, ya que el lenguaje de marcado de hipertexto (XHTML) es el siguiente paso para la evolución y desarrollo de Internet. Siendo XHTML una herramienta fácil de manejar y de gran relevancia para los desarrolladores de paginas Web ya que cada vez se van acercando mas al mundo de XML esperando todos los beneficios que este pueda ofrecer para un futuro