Lenguajes de Marcas y Sistemas de Gestión de la Información (Libro Curso 23_24) PDF

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIÓN DE LA INFORMACIÓN Administración de sistemas informáticos en red Desarrollo de aplicaciones multiplataforma...

LENGUAJES DE MARCAS Y SISTEMAS DE GESTIÓN DE LA INFORMACIÓN Administración de sistemas informáticos en red Desarrollo de aplicaciones multiplataforma Desarrollo de aplicaciones web ILERNA, centro autorizado con código 25002775 (Lleida), 28077294 (Madrid) y 41023090 (Sevilla) www.ilerna.es © Ilerna Online S. L., 2023 Maquetado e impreso por Ilerna Online S. L. © Imágenes: Shutterstock Impreso en España - Printed in Spain Reservados todos los derechos. No se permite la reproducción total o parcial de esta obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier medio (electrónico, mecánico, fotoco- pia, grabación u otros) sin autorización previa y por escrito de los titulares del copyright. La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual. Ilerna Online S. L. ha puesto todos los recursos necesarios para reconocer los derechos de terceros en esta obra y se excusa con antelación por posibles errores u omisiones y queda a disposición de corregirlos en posteriores ediciones. 2.a edición: marzo 2023  ÍNDICE Lenguajes de marcas y sistemas de gestión de la información 1. Reconocimiento de las características de los lenguajes de marcas.6 1.1. Conceptos generales.......................................................................7 1.2. Clasificación....................................................................................8 1.3. Herramientas de edición............................................................. 10 1.4. XML: Estructura, sintaxis y etiquetas.......................................... 13 1.5. Elaboración de documentos XML bien formados...................... 19 1.6. Utilización de espacio de nombres en XML................................ 22 2. Utilización de lenguajes de marcas en entornos web..................... 24 2.1. Evolución histórica....................................................................... 25 2.2. Identificación de etiquetas y atributos de HTML....................... 27 2.3. Estructura básica.......................................................................... 31 2.4. Elementos de un HTML................................................................ 33 2.5. XHTML y sus diferencias con HTML............................................ 62 2.6. Versiones de HTML y XHTML....................................................... 63 2.7. Herramientas de diseño web....................................................... 66 2.8. Hojas de estilo.............................................................................. 69 3. Definición de esquemas y vocabularios de XML............................ 78 3.1. Descripción de la información de documentos XML. Tecnologías................................................................................... 79 3.2. Asociación con documentos XML............................................... 80 3.3. Creación de descripciones. Estructura, reglas y sintaxis........... 84 3.4. Validación..................................................................................... 99 3.5. Herramientas de creación y validación..................................... 100 4. Aplicación de los lenguajes de marcas a la sindicación de contenidos.....................................................................................102 4.1. Ámbitos de aplicación............................................................... 104 4.2. Estructura de los canales de contenidos................................... 104 4.3. Elementos principales de un RSS.............................................. 106 4.4. Tecnologías de creación de canales de contenidos................. 109 4.5. Validación y publicación............................................................ 110 4.6. Directorios de canales de contenidos....................................... 112 4.7. Agregación................................................................................. 113 5. Conversión y adaptación de documentos XML.............................114 5.1. Necesidades y ámbitos de aplicación....................................... 115 5.2. Descripción y utilización de estructura, sintaxis y plantillas... 118 5.3. Elaboración de documentación................................................. 125 5.4. XSL- FO........................................................................................ 127 6. Gestión y almacenamiento de información en XML.....................136 6.1. Sistemas de almacenamiento de información XML. Tecnologías................................................................................. 137 6.2. Bases de datos relacionales con XML. Inserción de información................................................................................ 138 6.3. Técnicas de búsqueda de información en documentos XML.. 140 6.4. Lenguajes de consulta, extracción y manipulación de la información en XML................................................................... 142 6.5. Sistemas gestores de bases de datos nativos XML. Herramientas para el tratamiento y almacenamiento de la información en XML............................................................................................. 152 7. Sistema de gestión empresarial....................................................154 7.1. Inteligencia del negocio............................................................ 155 7.2. Sistemas de Gestión de recursos empresariales (ERP)............ 157 7.3. Software de gestión de relaciones con los clientes (CRM)...... 159 7.4. Instalación de un sistema de gestión empresarial.................. 161 7.5. Adaptación y configuración de un ERP. Integración de módulos...................................................................................... 167 7.6. Elaboración de informes............................................................ 167 7.7. Integración con aplicaciones ofimáticas. Exportación de la información................................................................................ 168 Bibliografía / webgrafía.....................................................................169 Solucionario.......................................................................................170 1 RECONOCIMIENTO DE LAS CARACTERÍSTICAS  LOS LENGUAJES DE MARCAS DE  Lenguajes de marcas y sistemas de gestión de la información 1.1. Conceptos generales Concepto de lenguaje de marcas youtu.be/vCVWZ3Cyzag Los lenguajes de marcas o lenguajes de marcado son aquellos que combinan la información contenida en un documento a través de etiquetas, marcas o anotaciones relativas a la estructura del texto o su forma de represen- tación. Este lenguaje especifica qué etiquetas aparecerán, dónde se colocarán y el significado que tendrá cada una de ellas. Normalmente, estas etiquetas o marcas no se mostrarán al usuario final, ya que este estará interesado únicamente en el propio contenido del documento. A continuación, se puede observar un ejemplo de cómo se muestra la información de una noticia mediante etiquetas o marcas: 03/09/2020 Lleida Inauguración de una tienda de zapatos A continuación, vamos a definir las principales característi- cas de los lenguajes de marcas: Texto plano Los archivos de texto plano se refieren a los que están for- mados solo por caracteres de texto. No pueden contener imágenes, ni sonido, ni archivos comprimidos ni de otros tipos. Los caracteres se codifican mediante la utilización de di- ferentes códigos, dependiendo del idioma o del alfabeto necesario, como pueden ser: ASCII, UTF-8 e ISO- 8859-15. Entre sus principales ventajas podemos mencionar que los archivos de texto plano se pueden interpretar mediante un simple editor de textos. Sin embargo, los archivos binarios necesitan un software específico, como por ejemplo des- compresores, visores multimedia o compiladores. De esta forma, conseguimos que los documentos lleguen a ser independientes del sistema operativo o del programa que los ha creado. 7  Tema 1: Reconocimiento de las características de los lenguajes de marcas Compacidad Permite mezclar las instrucciones de marcado con el propio contenido. Por ejemplo, Contenido. El código que aparece entre corchetes es lo que denomi- namos instrucciones de marcado o etiquetas. Haciendo referencia al ejemplo, podemos apreciar que la etiqueta es una etiqueta de presentación que nos indica que el texto seleccionado se corresponde con el formato asigna- do a la cabecera número 2. El texto situado entre las marcas hace referencia al conteni- do propio del documento. Independencia del dispositivo final Son las distintas interpretaciones que se pueden hacer de un mismo documento. Dependiendo del dispositivo final, podemos tener distintos resultados. Porque no es lo mismo emplear un móvil que un ordenador. Especialización Con la especialización nos referimos a que, con el paso de los años, los lenguajes han ido evolucionando, de tal ma- nera que podemos hacer uso de los lenguajes de marcas en un gran número de áreas, como pueden ser los gráficos vectoriales, notación científica, interfaces de usuario, etc. Flexibilidad Podemos combinar el mismo tipo de archivo con otros lenguajes diferentes, como pueden ser HTML con PHP y JavaScript. Además, existen unas etiquetas que ya vienen especificadas para tal fin, como son los. Clasificaciones de 1.2. Clasificación lenguaje de marcas Dependiendo del tipo de marcas que utilicemos, podemos youtu.be/sdQLtfZblW4 dividir los lenguajes de marcas en tres tipos diferentes. Los detallamos a continuación. De presentación Son los lenguajes de marcas que permiten dar un estilo al texto sin necesidad de modificar su contenido. Por ejemplo, pueden aumentar el tamaño de la fuente, poner el texto en cursiva, establecer otra tipografía, etc. 8  Lenguajes de marcas y sistemas de gestión de la información Este tipo de lenguaje cumple con la filosofía WYSIWYG (what you see is what you get o “lo que ves es lo que ob- tienes”). En algunos programas que manejan este tipo de lenguajes de marcas, las etiquetas pueden estar ocultas para el usuario. Las aplicaciones de edición y los procesadores de texto son algunos de los que utilizan este tipo de marcado. Algunos ejemplos de lenguajes de presentación son: Docbook (de- rivados de SGML) o RichText Format (RTF). { \rtfl\ansi{\fonttbl\f0\fswiss Free Sans;}\f0pard Esto es un ejemplo de un documento en {\b RTF}-\par } Descriptivo, estructural o semántico En estos tipos de lenguajes se utilizan las etiquetas para realizar una descripción del texto. Hacen referencia a las diferentes partes en las que se puede dividir un documen- to, pero no ofrecen detalles de cómo se representa el texto o en qué orden se muestra. Es decir, las etiquetas se usan para describir lo que es en vez de cómo se debe presentar un fragmento de texto de un documento. XML es un lenguaje diseñado específicamente para generar marcado descriptivo junto con los lenguajes que deriven de XML y tengan este propósito. Van a ir creando una serie de documentos que se almace- narán en forma de árbol, por lo que son bases de datos, pero en este caso no se utilizan tablas, ni bases de datos estructuradas, por tanto, reciben el nombre de bases de datos semi estructuradas. Algunos ejemplos de este tipo pueden ser: ASN.1, YAML, EBML, RDF, XFML, OWL, XTM. 9  Tema 1: Reconocimiento de las características de los lenguajes de marcas Procedimental Es un tipo de lenguaje de marcas que da formato al texto del documento, pero el usuario que edita el documento puede visualizar y manipular las propias etiquetas que dan estilo al texto. Estos lenguajes suelen usar macros y rutinas para lograr una mayor eficiencia. Ejemplos típi- cos de lenguajes de marcas procedimentales son Latex o troff. 1.3. Herramientas de edición Existen bastantes tipos de herramientas que podemos utilizar en un documento XML, entre las que diferenciamos las siguientes: BaseX Es un software libre (de licencia BSD) realizado como proyecto por la comunidad GitHub, que consiste en una interfaz gráfica para, no solo editar documentos XML, sino gestionar toda una base de datos XML. También tiene soporte para XPath, XQuery, JSON, HTML, CSV, etc.. Está disponible para Windows, Mac y Linux. https://basex.org/download/ XMLSpy de Altova Es un software propietario que consiste en un editor e interfaz gráfica de desarrollo con el que podemos modelar, editar, transformar y depurar tanto documentos XML (y sus derivados XSLT, XPath, XQuery y SXD) como documentos JSON. Cuenta con un gran número de herramientas diferentes, entre las que podemos distinguir las de representación gráfica de diferentes documentos. Aunque se trate de un software de pago, dispone de una versión de prueba gratuita de 30 días. Está diseñado para Windows. https://www.altova.com/xmlspy-xml-editor 10  Lenguajes de marcas y sistemas de gestión de la información de SyncroSoft Es un software propietario que consiste en un editor y sus herramientas de desarrollo para documentos XML y derivados como XSL, XSLT, XQuery y otros. También dispone de una versión gratuita de 30 días. Funciona como una aplicación Java, de modo que puede ejecutarse tanto en Windows como en Linux o Mac. http://www.oxygenxml.com XML Copy Editor Es un software libre que consiste en un editor y validador con el que podemos trabajar XML Schema, DTD, XSLT o XPath. Posee una licencia GNU GPL. Está disponible para Linux, Windows y Mac. http://www.xml-copy-editor.sourceforge.net XMLPad Pro Edition de WMHelp Herramienta bastante fácil de utilizar, cuya función principal es comprobar si un documento XML está bien formado. http://www.wmhelp.com/ Otras aplicaciones BUSCA EN LA WEB Stylus Studio Existen otra serie de aplicaciones, aunque detalla- remos solo algunas: www.stylusstudio.com/ xml-download.html Stylus Studio y Liquid XML Editor Ambos son programas de software privativos, aunque también tienen una versión gratuita y temporal de prueba. Liquid XML Editor Parser XML www.liquid-technologies. com/xml-editor Es un procesador que se encarga de leer docu- mentos XML para, posteriormente, determinar la estructura y propiedades de aquellos datos que se encuentran contenidos en dicho documento. Este procesador o analizador va a comprobar que se han seguido las reglas de forma correcta y, a continuación, puede validar el documento e infor- mar, en caso de que existan, de los errores que se han producido. 11  Tema 1: Reconocimiento de las características de los lenguajes de marcas ponte a prueba ¿Qué tipos de herramientas podemos utilizar en un documento XML? a) b) XML Copy Editor c) XMLSpy d) Todas las opciones son correctas ¿De qué forma se organiza la información de un documento XML? a) Jerárquica b) Relacional c) En red d) Todas las opciones son correctas ¿Qué nombre falta en la etiqueta p1? Roberto Nadal a) /apellido b) apellido c) /profesor d) nombre 12  Lenguajes de marcas y sistemas de gestión de la información 1.4. XML: Estructura, sintaxis y etiquetas Estructura Un documento XML tiene una estructura formada por los siguientes ítems: Elementos: son la unidad básica de los documentos XML. Tienen como función principal almacenar información, de tal modo que en un elemento XML podemos albergar información (como cadena de texto), atributos (que ca- racterizarán al elemento) u otros elementos (que serán descendentes del original). La sintaxis de un elemento XML es la siguiente: Contenido de la Información El nombre_del_elemento es el nombre que se asigna al elemento XML. Normalmente tiene dos etiquetas: una de apertura y otra de cierre, que deben coincidir: … Existen, además, dos tipos de elementos especiales: – Elemento raíz: es el elemento principal a partir del cual derivan los otros elementos en el documento XML. Si el documento está bien formado, debe existir un solo elemento raíz. – Elementos sin contenido: tenga atributos o no, debe abrirse y cerrarse con una sola instrucción. Su sintaxis es la siguiente: En el siguiente ejemplo, podemos observar que el ele- mento principal es , el cual contiene tres elementos más: , y. 13  Tema 1: Reconocimiento de las características de los lenguajes de marcas Juan Espinosa 961377420 Atributos: son una propiedad de los elementos, que tie- nen un nombre y un valor contenidos dentro de la etiqueta de apertura del elemento o bien en un elemento sin con- tenido. Son de tipo texto, de tal modo que el valor debe aparecer entre comillas. Un ejemplo sería el siguiente: … En este caso, DNI es el nombre del atributo y 35427641M es el valor del atributo. Raíz: el nodo raíz es el primer elemento que encontramos en la estructura y lo designamos como “/”. Texto: puede aparecer de dos formas diferentes. Como contenido de un elemento determinado o como valor co- rrespondiente de un atributo. Comentarios: se utilizan de la misma forma que en HTML. Espacio de nombres: utilizado para diferenciar las distintas etiquetas cuando se están utilizando varios vo- cabularios. Instrucciones de procesamiento: comienzan por. Engloban un conjunto de instrucciones que se envían al procesador. Entidades predefinidas: utilizadas para representar ca- racteres especiales de marcado, aunque se interpreten por el procesador como si fueran texto. Entidad Carácter &nbsp Espacio en blanco &amp; & &lt; < &gt; > &apos; ‘ &quot; “ 14  Lenguajes de marcas y sistemas de gestión de la información Secciones CDATA: grupo de varios caracteres que no ne- cesitan ser analizados por el procesador. Definición Tipo de Documento (DTD): se definen unas reglas que asignan una serie de restricciones sobre la es- tructura del documento XML. La información de un documento XML se organiza de forma jerárquica, de tal forma que los diferentes elemen- tos del documento se van a relacionar entre sí mediante relaciones de padres, hijos, hermanos, ascendentes, des- cendentes, etc. Las diferentes relaciones que se pueden dar entre los dis- tintos nodos son: Nodo raíz: nodo a partir del cual descienden el resto de nodos. Nodos descendentes: a partir de un nodo original pue- den derivan otros nodos que llamamos nodos hijos. Y a partir de estos, pueden derivar más nodos. Los nodos descendentes respecto a un nodo original son todos aquellos que deriven directa o indirectamente del nodo original. 15  Tema 1: Reconocimiento de las características de los lenguajes de marcas Nodos ascendentes: son todos aquellos nodos antece- sores a un nodo concreto. Nodos hermanos: son todos aquellos nodos que com- parten el mismo nodo padre. Veamos ahora el ejemplo del elemento , que es padre de los elementos y , que son hermanos entre sí. Jose Delgado 16  Lenguajes de marcas y sistemas de gestión de la información Si lo representamos, nos queda de la siguiente forma: Supongamos que también queremos recoger los dos apellidos de cada alumno. En tal caso tendríamos una nueva ramificación en el árbol: Jose Delgado Pérez Si lo representamos, nos queda de la siguiente forma: 17  Tema 1: Reconocimiento de las características de los lenguajes de marcas Sintaxis y etiquetas Las etiquetas XML son elementos básicos que conforman los nodos de la estructura de un documento XML. Para la ela- boración de dichas etiquetas existen unas reglas sintácticas dictaminadas por el W3C (World Wide Web Consortium) que debemos tener presente a la hora de elaborar un docu- mento XML y que describimos a continuación: Hay sensibilidad hacia mayúsculas y minúsculas. Por ejemplo: la etiqueta es diferente a la etiqueta. Todo documento XML debe tener una etiqueta raíz. La declaración (también llamada prólogo) XML es op- cional. Y, en caso de incluirla, esta debe estar situada al principio del documento (suele ser útil para especificar el tipo de codificación usada en el documento). Todos los elementos XML deben tener una etiqueta de cierre (la declaración no se considera como un elemento propio del documento y, por ello, queda exenta de esta norma). El valor de los atributos que tengan las etiquetas debe estar siempre entrecomillado. Las etiquetas deben estar bien anidadas. La etiqueta de cierre de un elemento padre no podrá aparecer antes de que lo hayan hechos todas las etiquetas de cierre de sus elementos hijos. Debe evitarse el uso explícito de los caracteres reserva- dos en las etiquetas. Un ejemplo de carácter reservado es el mayor que: >. 18  Lenguajes de marcas y sistemas de gestión de la información Los nombres de los elementos deben iniciarse con una letra o con el símbolo de guion bajo _. La sintaxis de un comentario XML es:. 1.5. Elaboración de documentos XML bien formados Para que un documento XML esté bien formado debe cumplir con las reglas sintácticas que se han listado ante- riormente. A la hora de especificar la sintaxis del lenguaje XML, defi- nimos: Cómo delimitar los elementos con etiquetas. Qué formato podemos asignar a una etiqueta. Qué nombres son aceptables para los diferentes elementos. Dónde se pueden colocar los atributos. Respecto a la nomenclatura de nombres de etiquetas de- bemos tener en cuenta lo siguiente: Tienen permitido empezar con una letra (puede tener til- de o no), que pertenezca al alfabeto no latino, subrayado o con dos puntos. Los caracteres que aparezcan a continuación pueden ser: letras, dígitos, guiones bajos, subrayados, comas o dos puntos. Aquellos nombres que empiecen por las letras XML (ma- yúscula o minúscula) están reservados. No deben contener espacios en blanco. Estas normas se aplican también a los atributos. No todos los lenguajes de marcas son tan restrictivos como XML. Por ejemplo, los navegadores de páginas HTML per- miten abrir y visualizar un documento HTML con algunos errores, como puede ser alguna etiqueta sin cerrar. En cam- bio, en XML esto nunca se permitirá. Por otro lado, debemos tener bien presente la diferencia- ción de la utilidad de los elementos y los atributos. 19  Tema 1: Reconocimiento de las características de los lenguajes de marcas Elementos Se pueden utilizar para representaciones jerárquicas. Pueden tener atributos. Puede que un elemento tenga distintas ocurrencias. Aparecen en orden representativo. Pueden extender algunos elementos en su interior. Atributos Deben asociar a los diferentes elementos. Permiten alterar la información. Aparecen en orden no representativo. Permiten realizar el registro de metadatos. No pueden extender otros elementos en su interior. Un atributo no dispone de múltiples ocurrencias. A continuación, mostramos un ejemplo de documento XML bien formado: 100 años de soledad Gabriel García Márquez 84-9759-220-4 Aspasa Cartago Ross Leckie 978-84-350-6197-1 edjasa 20  Lenguajes de marcas y sistemas de gestión de la información ponte a prueba En el siguiente ejemplo XML, ¿cuál es el elemento raíz? Roberto Mesa 19 a) alumno b) nombre c) edad d) profesor ¿Cuántos “hermanos” tiene la etiqueta en el anterior ejemplo XML? a) 1 b) 2 c) 3 d) No tiene Se definen una serie de reglas que asignan unas restricciones sobre la estructura del documento XML. a) Definición tipo de documento (DTD) b) Atributos c) Texto d) Espacio de nombres 21  Tema 1: Reconocimiento de las características de los lenguajes de marcas 1.6. Utilización de espacio de nombres en XML Espacio de nombres Es posible que al crear un documento XML varios elementos coincidan en el nombre. Por ejemplo, podría haber dos ele- mentos llamados …, uno que haga referencia al id del alumno y otro que haga referencia al id de la asignatura. Esto puede ocurrir en varias circunstancias. Por ejemplo, al combinar en un mismo documento dos vocabularios XML distintos. Imaginemos el caso de un documento XHTML que posee una parte en musicXML. Podría ocurrir que XHTML y musicXML tuviesen alguna etiqueta con el mismo nombre. Por tanto, un espacio de nombres es una colección de etiquetas XML con un ámbito semántico en común, con- tenidas y definidas en una misma URI (identificador de recursos uniforme). Dentro de una URI no pueden coincidir dos etiquetas, pero sí sería posible que dos etiquetas de diferentes URI coincidieran, como en el caso de. La sintaxis para declarar un espacio de nombres en un do- cumento XML es la siguiente: Un ejemplo podría ser el siguiente: 828392 Pedro Albors A244D Programacion B Podemos observar dos espacios de nombres, con sus res- pectivos prefijos (alu y asig) y sus respectivas URI (en este caso inventadas).En el documento aparecen dos etiquetas coincidentes, , pero para diferenciarlas se ha es- tablecido el espacio de nombres de cada una. El URI es un nombre lógico del espacio de nombres. Debe ser único, aunque no exista ninguna conexión que lo com- pruebe. El espacio de nombres afecta al elemento que lo declara, así como a todos los elementos descendientes 22  Lenguajes de marcas y sistemas de gestión de la información que deriven de este. En caso de declararse en un elemento descendiente otro espacio de nombres, para los elementos descendientes prevalecerá el último declarado, es decir, el más próximo en la estructura de árbol. Espacio de nombres por defecto En estos espacios de nombres no tenemos la obligación de definir un prefijo. Su ámbito de aplicación correspondiente es el del elemento en el que se ha declarado junto con sus elementos descendientes. No a sus atributos. Para añadir un espacio de nombres a un documento XML que ya está creado, iremos insertando el prefijo a los ele- mentos y atributos. Este proceso resulta un poco pesado y puede provocar errores. Así podemos evitar escribir prefijos. Uno de los mayores inconvenientes que se puede dar en el espacio de nombres por defecto es que el espacio de nom- bre al que nos refiramos solo afecte al elemento que está declarado y a sus descendientes, no a sus atributos. Atributos especiales xml:space: utilizado para indicar a la aplicación XML si debe tener en cuenta los espacios en blanco. xml:lang: ofrece la posibilidad de indicar el idioma en el que está escrito, diferenciando entre: – Código que contiene solo dos letras. – Identificador para el idioma. – Identificador que define el usuario. xml:base: puede definir una URI diferente a la existente en el documento. 23 2 UTILIZACIÓN DE LENGUAJES DE MARCAS  ENTORNOS WEB EN  Lenguajes de marcas y sistemas de gestión de la información 2.1. Evolución histórica Los lenguajes de marcas se empezaron a utilizar a finales de los años 60, permitiendo introducir anotaciones en documentos electrónicos. Esta posibilidad de añadir ano- taciones o marcas es de donde recibe su nombre. En esta década se estandariza el lenguaje SGML (Stan- dard Generalized Markup Language), dando lugar a la posibilidad de compartir información a través de sistemas informáticos. Lamentablemente, este estándar no consi- guió asentarse debido a su complejidad. Cuando hablamos del origen del HTML nos remontamos al año 1980, cuando el físico Tim Berners-Lee, que trabajaba para CERN (Organización Europea para la Investigación Nuclear), propone un nuevo sistema de hipertexto para compartir información utilizando redes de computadoras y a través de Internet. Estos sistemas de hipertexto ya se habían desarrollado con anterioridad, aunque en el ámbito de la informática, cuan- do hablamos de hipertexto nos referimos a que los usuarios puedan acceder a la información que esté relacionada con aquellos documentos electrónicos que están visibles. Así, los hipertextos iniciales se asimilaban a los enlaces a las distintas páginas web. Años después, Tim Bereners-Lee se une al ingeniero de sis- temas Robert Cailliau, con el que gana la propuesta World Wide Web (W3): En 1991 se presenta el primer documento con descrip- ción de HTML y bajo el nombre HTML Tags (Etiquetas HTML). En 1993 se presenta la primera propuesta oficial para con- vertir HTML en un estándar. Aunque existieron avances muy significativos al definirse las etiquetas de imágenes, las tablas y los formularios, no se llegó a conseguir que este fuera el estándar oficial. Ya en 1995, es el organismo IETF el que se encarga de poner en marcha un grupo para trabajar con HTML y es cuando se consigue publicar, el 22 de septiembre de 1995, el estándar HTML 2.0, siendo este el primer están- dar oficial de HTML. A partir de 1996, los diferentes estándares de HTML los publica otro organismo distinto, denominado W3C (World Wide Web Consortium), llegando a publicar la versión HTML 3.2 el 14 de enero de 1997. Esta fue la pri- mera recomendación de HTML que publicó W3C. Con la versión HTML 4.0, publicada el 24 de abril de 1998, se consiguieron numerosos avances sobre las 25  Tema 2: Utilización de lenguajes de marcas en entornos web versiones anteriores. Apareció la posibilidad de añadir pequeños programas (scripts) en las páginas web, con lo que se consiguió mejorar la accesibilidad de las páginas que ya estaban diseñadas, trabajar mediante la utiliza- ción de tablas más complejas y mejorar los formularios. La publicación de HTML 4.01 en 1999 se basó, sobre todo, en revisar publicaciones anteriores, pero no añadió avances significativos. Se detuvo un poco el desarrollo de HTML para centrarse más en el estándar XHTML. Sobre el año 2004 y debido a este parón que existió, al- gunas empresas como Apple, Mozilla y Opera empezaron a mostrar su preocupación por la falta de interés denle el W3C de HTML. Fue entonces cuando empezaron a orga- nizar una nueva asociación denominada WHATWG (Web Hypertext Application Technology Working Group). De forma paralela, se seguía avanzando en la estandari- zación de XHTML (versión avanzada de HTML basada en XML), publicando su primera versión en enero del 2000. XHTML 1.0 está basado en la adaptación de HTML 4.01 al lenguaje XML, por lo que utiliza sus mismas etiquetas y muchas de sus características, aunque añade algunas nuevas. Las versiones XHTML 1.1 y XHTML 2.0 se publicaron en forma de borrador con la intención de poder modularizar XHTML. En marzo de 2007 se publicaron distintos borradores de HTML 5.0. El 22 de enero de 2008 se publicó el primer borrador ofi- cial del estándar HTML5. 26  Lenguajes de marcas y sistemas de gestión de la información AÑO EVENTO 1991 Nacimiento. “HTML tags” 1993 HTML 1.2 1994 Se funda W3C 1995 HTML 2.0 1997 HTML 3.2 1998 HTML 4.0 y XML 1999 HTNK 4.01 2000 XHTML 1.0 2001 XHTML 1.1 2002 XHTML 2.0 2003 XFORMS 2004 Se funda WHATWG 2008 Borrador de HTML 5 Una vez conocido el origen y la evolución de este lenguaje de marcas a lo largo de los años, nos detendremos un poco en conocer más a fondo este lenguaje. 2.2. Identificación de etiquetas y atributos de HTML HTML (Hypertext Markup Language) es un lenguaje de marcas que nos permite desarrollar diferentes páginas web. Para poder desarrollar una página web necesitamos: Un editor de textos mediante el que vamos a añadir el contenido que pretendemos mostrar. Un navegador web con el que podemos visualizar el con- tenido de la página. Todos aquellos ficheros que contengan documentos HTML van a tener como extensión.html y.htm. Existen diferentes editores de textos para el desarrollo de una página web. Más adelante veremos con más detalle los editores y otras herramientas de desarrollo web. 27  Tema 2: Utilización de lenguajes de marcas en entornos web Cuando hayamos desarrollado los documentos HTML y tengamos la página web lista para su posterior publicación en internet, vamos a necesitar un servidor de páginas web en el que podamos almacenar las distintas páginas. El servidor web es un software que se encuentra en el pro- pio ordenador y debe estar conectado siempre a internet. Cuando pongamos las páginas en el servidor, ya serán accesibles para todos los usuarios que pertenezcan a la misma red. Existen proveedores de servicios de Internet que ofrecen a sus clientes sitios web gratuitos, para que puedan publicar sus páginas web personales o corporativas y, de esta forma, evitar la instalación de un servidor web propio. Al igual que en XML, un documento HTML es un conjunto de nodos enlazados de manera jerárquica en forma de árbol. Los elementos HTML son sus componentes principales. Es decir, un elemento HTML es un nodo del árbol. Un elemento HTML está formado por sus etiquetas, un contenido y unos atributos opcionales. Los atributos son las especificaciones o caracterizaciones de los elementos. Es decir, los atributos otorgan una serie de propiedades a los elementos. El contenido es la información en formato texto que está entre las etiquetas de apertura y cierre. 2.2.1. Etiquetas y atributos Los elementos HTML poseen una sintaxis y unas normas determinadas. Para que un documento HTML sea válido deben respetarse dichas normas. No todos los elementos tienen la misma estructura, pero de manera general, la composición de un elemento HTML es la siguiente: < etiqueta atributo=”valor”> contenido Como podemos observar, las etiquetas delimitan el ele- mento, estando el atributo dentro de la misma etiqueta y el contenido entre la etiqueta de apertura y la de cierre. Etiquetas Las etiquetas, también conocidas como marcas, definen una serie de elementos que forman el léxico del lengua- je HTML. Cada etiqueta se representa entre los signos de menor que (). Podemos diferenciar entre dos tipos de etiquetas: cerradas y abiertas. 28  Lenguajes de marcas y sistemas de gestión de la información Etiquetas cerradas: constan de una etiqueta para la aper- tura que indica el comienzo de la etiqueta y otra de cierre que indica que hemos terminado de trabajar con la etique- ta en cuestión y lleva el símbolo / antes del nombre. Por ejemplo: El hombre llegó a la luna el 24 de julio de 1969 La etiqueta es la de apertura y la etiqueta es la de cierre. Etiquetas abiertas: cuentan con una única palabra re- servada para indicar el inicio y fin de la etiqueta a la vez. Por ejemplo: Atributos Los atributos modifican el significado de un elemento HTML o incluso pueden proveerle de funcionalidad. Las etiquetas pueden contener atributos si necesitan realizar alguna configuración sobre una característica determina- da. Existen atributos obligatorios y atributos opcionales, lo cual dependerá de la etiqueta HTML en la que se sitúen. Respecto a la sintaxis, los atributos, al igual que las eti- quetas, se pueden definir tanto en mayúsculas como en minúsculas, aunque los valores que se asignen a los atri- butos son sensibles a mayúsculas o minúsculas. Por ello, es recomendable utilizar siempre minúsculas para etiquetas y atributos. De esta forma, evitaremos confusiones. Los atributos se colocan en el interior de la etiqueta de apertura, después del nombre de la etiqueta y separados por un espacio en blanco. Por tanto, el atributo se coloca antes del signo de cierre de la etiqueta de apertura. Los atributos se componen por un conjunto de palabras nombre-valor: esto es, el nombre que define qué atributo se va a usar y su valor asignado correspondiente. Ambas palabras se separan mediante el signo =. Por ejemplo: En este caso, tenemos la etiqueta correspondiente a párrafo junto al atributo align = left, que indica que la alineación del texto de dicho párrafo estará a la izquierda. Es recomendable poner el valor entre comillas dobles para que sea más legible. 29  Tema 2: Utilización de lenguajes de marcas en entornos web Cada etiqueta cuenta con una serie de atributos con sus correspondientes valores, pero hay atributos que pueden usarse en diferentes etiquetas. Una etiqueta HTML puede tener varios atributos a la vez. Por ejemplo: Esto es un link ponte a prueba Todos aquellos ficheros que contengan docu- mentos HTML van a tener como extensión.html o.htm. a) Verdadero b) Falso Definen una serie de elementos que forman el léxico del lenguaje HTML. Se encuentran entre los signos de menor que (). ¿De qué estamos hablando? a) Etiquetas b) Atributos c) Documentos d) Imágenes Las etiquetas abiertas cuentan con una única palabra reservada para indicar el inicio y fin de la etiqueta a la vez. Señala cuál de las siguientes etiquetas son de tipo abierto. a) b) c) d) Todas las opciones son correctas 30  Lenguajes de marcas y sistemas de gestión de la información 2.3. Estructura básica Como ya hemos indicado, las etiquetas que utilicemos en HTML siempre van a ir entre los símbolos < y >. Y cada vez que tengamos que cerrar una etiqueta, pondremos el nom- Estructura básica bre correspondiente comenzando con el símbolo /. youtu.be/HvrgYn0cmvI Todas las etiquetas afectan al contenido que se encuentre delimitado entre la apertura y cierre de la etiqueta corres- pondiente. El contenido puede ser una cadena de texto con información, otras etiquetas o incluso un código funcional. La estructura básica de un documento HTML es la siguiente: Como podemos observar, los elementos están anidados y cada etiqueta de apertura está correspondida con otra de cierre. Veamos cuál es el significado de cada etiqueta: : el elemento raíz del documento. Esta etiqueta engloba toda la página HTML. : la cabecera del documento. Contiene informa- ción que no es directamente el contenido de la página. Por ejemplo, título de la página web, metadatos, estilos, código JavaScript, etc. : el nombre que le damos al título que se asignará al documento. : el cuerpo del documento. Aquí se codifica todo aquello que deseamos que se visualice en el navegador. Por ejemplo, los párrafos, las imágenes, formularios, etc. HTML ha ido evolucionando a lo largo del tiempo, de modo que existen diferentes versiones de HTML que han ido aportando mejoras. HTML 5 es la más reciente. Y es precisamente en HTML5 que mediante la aportación de unas etiquetas nuevas, se consigue añadir una serie de características y elementos cuya función es facilitar la tarea a los autores de la aplicación web. HTML5 se basa principalmente en una estructuración avanzada que se encarga de definir los contenidos, agru- pándolos en distintas etiquetas con un nombre asignado que se corresponde con la tarea a realizar. 31  Tema 2: Utilización de lenguajes de marcas en entornos web Algunas de estas etiquetas son las que detallamos a con- tinuación: : encabezado de la página. : enlaces de navegación. : algún artículo que se haya publicado. : parte correspondiente a algún artículo. : barras laterales. : pie de página. : distintos diálogos o comentarios. Además de estas etiquetas, HTML5 también cuenta con ele- mentos como y , que se utilizan para agrupar los diferentes elementos hijos haciendo uso de atributos como: class, id o title. De esta manera, se pretende utilizar una misma semántica con un estilo común. 2.3.1. Comentarios Los comentarios son unas líneas que definen, de cara al usuario, lo que vamos a ir realizando en cada momento, aunque no son interpretados por el navegador. Es decir, los comentarios que indiquemos en el código HTML no se visualizan en el navegador. A lo largo del código fuente del desarrollador es conve- niente utilizar una serie de comentarios para explicar con palabras específicas lo que se va realizando en cada mo- mento. De esta forma, se quiere conseguir que, si alguien necesita trabajar con el código, sea capaz de interpretarlo de un simple vistazo gracias a los comentarios que apare- cen en él. La sintaxis de los comentarios es la siguiente: Por ejemplo, en la línea 6 de este documento HTML hemos insertado un comentario. El software editor ha detectado el comentario y por eso le ha otorgado otro color, que en este caso es grisáceo. 32  Lenguajes de marcas y sistemas de gestión de la información ponte a prueba Es la etiqueta que se utiliza para el inicio del cuerpo. a) b) c) d) Ninguna opción es correcta ¿Cómo se representan los comentarios en lenguaje HTML? a) b) //Esto es un comentario c) (Esto es un comentario) d) Todas las opciones son válidas 2.4. Elementos de un HTML En este apartado, detallaremos todas las marcas que se pueden utilizar en este lenguaje para diseñar una página web. Como ya hemos visto anteriormente, debemos seguir la estructura básica de un documento HTML. Cabecera Un documento HTML se puede dividir entre la cabecera y el cuerpo, es decir, entre y. La cabecera contiene información general acerca del docu- mento, pero normalmente la información que figura dentro de la cabecera no es la destinada a visualizarse en el nave- gador. Salvo el título, que sí es mostrado por el navegador, normalmente en la pestaña. El elemento de la cabecera se encuentra justo después del elemento raíz. Es decir, la etiqueta es el primer descendiente de la etiqueta raíz. La cabecera tiene una etiqueta de apertura y otra de cierre y su sintaxis es la siguiente: … 33  Tema 2: Utilización de lenguajes de marcas en entornos web Dentro del elemento de la cabecera pueden existir otros elementos. Es decir, dentro de pueden incluirse otras etiquetas hijas. El único elemento obligatorio que debe estar en la cabecera es el que especifica el título, (salvo que esté indicado en otro lugar). El resto de elementos son opcionales. Los elementos que podemos incluir dentro de la cabecera son los siguientes: Cabecera Elementos hijos Significado Título del documento HTML que va a aparecer en el nave- gador web, en la barra superior Usado para determinar el estilo de la información del documento, es decir, información CSS que nos permite insertar una hoja de estilo en la cabecera. Mediante el atributo type indicamos el lenguaje del estilo Relaciona el documento HTML con otro documento exter- no, como por ejemplo un archivo CSS Utilizado para especificar información sobre el propio documento, como el conjunto de caracteres, la descripción de la página, las palabras clave, el autor del documento… Suele llevar dos atributos: name y content, que hacen referencia al nombre de la página y a sus principales contenidos Lo utilizaremos para insertar, entre su apertura y cierre, un script implementado en otro lenguaje mediante el atributo type. Indicamos el lenguaje de programación y, mediante el atributo src, definimos la URL del script en caso de que sea externo Se usa para especificar la URL base a partir de la que partirán el resto de URL relativas del documento. Puede indicar la base de elementos como sonidos, gráficos, etc., siempre que hagan referencia a una determinada página web Otro uso diferente de la etiqueta es el refresco automático, que, transcurrido un tiempo estimado, pasa a actualizar la misma página. Es recomendable para aquellas páginas en las que el contenido se modifica con mucha frecuencia. 34  Lenguajes de marcas y sistemas de gestión de la información Con esta instrucción, estamos indicando que, pasados 10 segundos se acceda a la página web de Google. Un ejem- plo de documento HTML con la cabecera completa es el siguiente: En este ejemplo hemos incluido URL externas no reales, además de una simulación de enlace externo a un archivo JavaScript, que se encontraría en una carpeta llamada js. Cuando creamos una página web, es conveniente que, al comienzo, realicemos una planificación de su diseño, para después ordenar la información y recursos que se ofrece- rán. Para llevar a cabo esta tarea es recomendable utilizar una estructura de directorios. Cuerpo del documento El cuerpo del programa se encuentra entre: … Siempre está situado detrás de la cabecera y con- tiene todo el cuerpo correspondiente a una determinada página web, junto con los elementos propios de la página, como pueden ser párrafos, gráficos, textos, imágenes, etc. Existen un conjunto de atributos opcionales de que permiten realizar diferentes configuraciones sobre la apariencia de un documento. Sin embargo, hoy están obsoletos, ya que HTML5 no los soporta. Algunos de ellos son: bgcolor, text, link y vlink. 35  Tema 2: Utilización de lenguajes de marcas en entornos web Luego hay a algunos atributos que se recomienda utilizar en la marca. Son los siguientes: id: para identificar el elemento para la hoja de estilo. class: para asignar un nombre de la clase de la hoja de estilo y, de esta forma, poder mejorar su rendimiento. title: para agregar un comentario y que lo puedan visua- lizar los navegadores. style: aplicar un estilo a este elemento. A continuación, veremos todas las marcas que podemos utilizar en esta parte del documento para poder aplicar dis- tintos tipos de comandos y así confeccionar la página web correspondiente. Podemos clasificar los elementos del cuerpo () en dos tipos: elementos de bloque y elementos de línea. Los elementos de bloque poseen las siguientes caracte- rísticas: Comienzan en una nueva línea Ocupan todo el ancho de una línea disponible Por tanto, impiden que otros elementos se sitúen a su lado (horizontalmente) Pueden albergar en su interior otros elementos de bloque u otros elementos de línea 36  Lenguajes de marcas y sistemas de gestión de la información Algunos elementos de bloque típicos son los siguientes: , , , , , … Por su parte, los elementos de línea tienen las siguientes características: Solo pueden contener en su interior datos y otros ele- mentos en línea Ocupan el ancho mínimo (en horizontal) que necesitan Los elementos de línea más empleados son: , , , , … A continuación, vamos a ilustrar la diferencia entre un ele- mento de bloque, como el de párrafo () y un elemento de línea, como el de hiperenlace (). En el siguiente có- digo HTML indicamos en la cabecera () un código CSS que indica que los elementos de párrafo () tendrán un color de fondo anaranjado y los elementos de hiperenla- ce () tendrán un color de fondo celeste, de modo que podamos diferenciar bien ambos elementos. A partir del código anterior, si visualizáramos el resultado en un navegador, en este caso Firefox, el resultado sería el siguiente: Podemos comprobar que el elemento de bloque ocupa todo el ancho de línea del que dispone, y, sin embargo, el elemento de línea solo ocupa lo imprescindible para mostrar el texto asignado. 37  Tema 2: Utilización de lenguajes de marcas en entornos web Encabezados Para poner títulos en el contenido de un HTML podemos usar los encabezados (también llamados cabeceras). Existen seis tipos diferentes de encabezados (no hay que confundir los encabezados con la cabecera. En inglés se denomina headings a los primeros y head a la segunda). Las marcas de apertura y cierre de cada encabe- zado son obligatorias. Los encabezados que podemos usar son los siguientes: El texto que se escriba en h1 va a ser el del título de mayor tamaño, hasta llegar al de h6, que será el menor. En los encabezados podemos usar el atributo align para alinear el texto de la cabecera al centro, a la izquierda o a la derecha, como podemos observar en el siguiente ejemplo. Encabezado H1 Encabezado H2 Encabezado H3 Encabezado H4 Encabezado H5 Encabezado H6 Aquí tenemos el código HTML donde establecemos cuatro líneas de contenido en el body, todas con un encabezado distinto y algunas con el atributo align, con que tiene un valor específico: 38  Lenguajes de marcas y sistemas de gestión de la información De este modo, la visualización en el navegador Firefox del código HTML anterior sería la siguiente: 39  Tema 2: Utilización de lenguajes de marcas en entornos web Párrafos Son una de las marcas más utilizadas. No pueden contener elementos de bloque en su interior. Todos los párrafos del documento web serán bloques delimitados por la marca p. A la hora de insertar un espacio es necesario hacerlo me- diante el carácter &nbsp, ya que habrá navegadores que ignoren los espacios en blanco del teclado. : escribe un texto en forma de párrafo. : permite visualizar una cita con el margen izquierdo mayor, produciéndose un efecto de una sangría. : devuelve una copia exacta del texto res- petando los espacios en blanco, tabulaciones y retorno de carro, es decir, tal y como se ha escrito. Saltos de línea : representa un salto de línea entre párrafos, ya que el salto de línea del teclado es ignorado por el navegador. No necesita marca de cierre. : existe una forma de separar cada párrafo, utilizan- do una línea horizontal visible. No necesita etiqueta de cierre y podemos utilizar los siguientes atributos: align, noshade, size, width. Estilo de texto Son una serie de elementos HTML que proporcionan ele- mentos de estilo a una parte del texto. Así, pueden poner el texto en negrita, en cursiva o subrayarlo (, y ). Negrita. Cursiva. Agrandar el tamaño. Se puede introducir varios comandos para hacerlos más grande. Pequeño. Funciona de la misma forma que big. o Tachado de texto. Subrayado. 40  Lenguajes de marcas y sistemas de gestión de la información Existen algunas etiquetas bastante parecidas entre sí, que tienen como fin ofrecer un estilo diferente para alguna letra especial de un texto determinado. Colores Podemos representar los colores mediante el símbolo # se- guido de tres pares de dígitos hexadecimales. El rango de colores indica la intensidad de los colores primarios (rojo, verde y azul), que en dígitos hexadecimales es #RRVVAA. Los diferentes pares de cifras hexadecimales van a oscilar entre 00 y FF proporcionando un rango que va de 0 hasta 255 valores diferentes. Otra forma de expresar colores en HTML es usando una notación hexadecimal más corta, que utiliza un dígito para cada color (#JVA). En este caso, el rango de valores oscilará entre 0 y 15. Si lo preferimos, también podemos indicar el color de forma directa: red, green, blue… Hipervínculos Los hipervínculos son elementos del lenguaje HTML que permiten acceder a otro recurso. Es decir, los podemos de- finir como enlaces que apuntan a otro sitio web, un fichero, una imagen, etc. La sintaxis que debemos utilizar a la hora de incluir un hi- pervínculo es: De este modo, el texto que se encuentre en esa directiva se puede convertir en un hipervínculo. Si hacemos clic con el ratón, nos debe llevar al sitio referenciado. En el caso en el que el sitio web esté referenciado por un texto, este debe aparecer subrayado y de otro color. PARA + INFO El atributo href es el que nos ofrece la posibilidad de crear un hiperenlace. Debemos indicar una URL, que será aquella a la que queramos acceder al clicar en el hiperenlace. A continuación, si en el elemento no indicamos el atributo href, entonces el elemento representará un marca- dor de posición que será al que referencie otro. 41  Tema 2: Utilización de lenguajes de marcas en entornos web Disponemos de otro atributo target (opcional) que hará referencia al destino en el que se mostrará la información disponible en esa dirección a la que nos lleva. Por ejemplo, si deseamos que el enlace (link) se abra en una pestaña o página nueva, pondremos _blank como valor del atributo target, pero si deseamos que se abra en la misma pestaña o ventana, pondremos _self. Anclas y vínculos internos Los vínculos internos permiten acceder a un sitio concre- to dentro de una página web. Aunque si queremos hacer uso de los vínculos internos, antes debemos establecer un ancla, que es el punto fijo de posición al que accederemos tras un vínculo interno. Rutas absolutas y relativas Las rutas absolutas son aquellas que enlazan con pá- ginas, cuya dirección absoluta se indica en el atributo href del comando a. Suelen ser páginas web externas a nuestro proyecto. Las direcciones absolutas empiezan a direccionarse desde el comienzo de la ruta que indicamos. Las relativas se corresponden con aquellos enlaces cuya dirección relativa se indica en el atributo href del comando a. Suelen ser enlaces a páginas internas del mismo proyecto. Empiezan a direccionarse a partir del directorio actual. Imágenes Las imágenes pueden estar en diferentes formatos, como pueden ser los mapas de bits (archivos PNG, GIF, JPEG), do- cumentos vectoriales de una página (archivos PDF, XML), mapas de bits animados, gráficos de bits animados, etc. No obstante, existen otros tipos de archivos que no se consideran imágenes, como por ejemplo, los PDF de varias páginas, interactivos, documentos HTML, documentos sin formato, archivos SVG. 42  Lenguajes de marcas y sistemas de gestión de la información Gracias al elemento podemos representar una de- terminada imagen, ayudados por su atributo (obligatorio) src. En este caso, indicamos: La dirección válida en la que está la imagen que quere- mos visualizar. Una ruta relativa, si es que la imagen está en alguna parte local. Una URL, si se refiere a una imagen externa que se en- cuentra almacenada en una página web diferente. El atributo alt nos permite indicar un texto alternativo que sea capaz de representar el contenido de una imagen. Po- demos utilizar esta forma en caso de que el navegador no pueda visualizar o descargar las distintas imágenes. Las etiquetas y son novedosas para HTML5. Nos ofrecen la posibilidad de agrupar una imagen junto con su información o leyenda. Incorporación de imágenes Llegado el momento de añadir imágenes a las diferentes páginas web, debemos contar con que los navegadores permiten trabajar con ficheros que tengan formatos JPEG o GIF, ya que son los más recomendables. Si queremos que una imagen se muestre en una web, en primer lugar necesitamos declarar una etiqueta , que no necesita etiqueta de cierre. Por ejemplo: 43  Tema 2: Utilización de lenguajes de marcas en entornos web Aparte de estos dos atributos, también contamos con algu- nos más, que mostramos en la siguiente tabla: Etiqueta Atributo Valor Significado src URL Indica la URL de la imagen. Define un texto alternativo por alt Texto si no se encontrara la imagen deseada. Alinea la imagen respecto Top, middle, al texto, tanto en sentido Align bottom, left, right, horizontal como en sentido center vertical. Pone un borde o marco a la Border Número imagen. Se expresa en píxeles. img Especifica la altura que debe Height Número % tener la imagen. Se expresa en píxeles o porcentaje. Especifica el ancho que debe Width Número % tener la imagen. Se expresa en píxeles o porcentaje. Especifica en píxeles la hspace Número separación horizontal entre el texto y la imagen. Especifica en píxeles la vspace Número separación vertical entre el texto y la imagen. Uso de mapas sensibles Los mapas de imagen nos permiten definir distintas zonas clicables dentro de una imagen, de tal forma que el usuario puede hacer clic sobre las zonas definidas y, cada una de estas, puede apuntar a una URL distinta. Las diferentes zonas que se definen en una imagen se van creando mediante rectángulos, círculos y polígonos. A la hora de crear un mapa de imagen: En primer lugar, insertamos la imagen original mediante la etiqueta. A continuación, utilizamos la etiqueta para definir las distintas zonas o regiones de la imagen. Definiremos cada una de estas zonas con la etiqueta. 44  Lenguajes de marcas y sistemas de gestión de la información Veamos un ejemplo práctico de los mapas de bits: Mapa de imagen Atributos comunes Básicos, i18n y eventos Name = “texto”. Nombre que identifica de forma única al mapa Atributos específicos definido (es obligatorio indicar un nombre único) Tipo de elemento Bloque y en línea Descripción Se emplea para definir mapas de imagen Mediante este círculo, el triángulo y los dos rectángulos, podemos acceder a 4 zonas diferentes de la imagen a tra- vés del siguiente código HTML. 45  Tema 2: Utilización de lenguajes de marcas en entornos web Área de un mapa de imagen Atributos comunes Básicos, i18n, eventos y foco. href = “url” – URL a la que se accede al pinchar sobre el área. nohref = “nohref” – Se emplea para las áreas que no son seleccionables. shape = “default | rect | circle | poly” – Indica el tipo de área que se define (toda la imagen, rectangular, circular o poligonal). Atributos coords = “lista de números” – Se trata de una lista de números específicos separados por comas que representan las coordenadas del área. Rectangular = X1, Y1, X2, Y2 (coordenadas X e Y del vértice superior izquierdo y coordenadas X e Y del vértice inferior derecho). Circular = X1, Y1, R (coordenadas X e Y del centro y radio del círculo). Poligonal = X1, Y1, X2, Y2, …, XnYn (coordenadas de los vértices del polígono. Si las últimas coordenadas no son iguales que las primeras, se cierra automáticamente el polígono uniendo ambos vértices). Tipo de elemento Etiqueta vacía. Se emplea para definir las distintas áreas que forman un mapa Descripción de imagen. ciones sobre los tipos de datos complejos es correcta? d) Ninguna opción es correcta a) Se asignan a aquellos elementos que poseen elementos o atributos ¿Cuál de las siguientes opciones es descendientes un atributo que podemos diferen- ciar en un DTD? b) P  uede estar vacío, es decir, que no tiene contenido, aunque sí atri- a) CDATA butos b) ID c) Puede tener contenido mixto, que c) NMTOKEN significa, mezcla de contenido textual con elementos descen- d) IDREF dientes e) Todas las opciones son correctas d) Todas las opciones son correctas ¿Cómo se representa en el docu- mento XML teniendo la siguiente declaración del atributo en el DTD? a) 13:00 b) 13:00 c) 13:00 d) Ninguna opción es correcta 83  Tema 3: Definición de esquemas y vocabularios de XML 3.3. Creación de descripciones. Estructura, reglas y sintaxis A continuación, vamos a ver la estructura de dos tipos de esquemas XML: los DTD y los XML Schemas. Aunque a veces los términos nos puedan resultar algo enredados, no debemos confundir el concepto de Esquemas XML con uno de los tipos de esquemas en concreto: Schema XML”. Como hemos comentado anteriormente, es un tipo de esquema más, como Document Type Definition (DTD) o Schematron. 3.3.1. Estructura y componentes de un DTD Los principales componentes que tenemos en un DTD son: elemento, atributo, entidad y notación. A continuación, detallamos más información sobre ellos: Es una declaración de un tipo de elemento que nos señala si existe un elemento en un determinado documento XML. Sintaxis Donde nombre_elemento debe coincidir con el mismo que tenga el documento XML. Y nombre_contenido indica una regla, que puede ser: ANY (cualquier cosa). La utilizamos en la construcción del DTD para validar la descripción de un elemento sin llevar a cabo ningún tipo de comprobación sintáctica. EMPTY (elemento vacío). Tiene posibilidad de describir un elemento que no tenga descendientes. Por ejemplo, la descripción de un elemento br. Datos Se refiere a aquellos caracteres, que pueden ser textuales, numéricos o de cualquier otro formato que no disponga de ninguna marca (etiqueta). Los podemos describir como #PCDATA y deben aparecer entre paréntesis. Por ejemplo: 84  Lenguajes de marcas y sistemas de gestión de la información Elementos descendientes Es conveniente que aparezcan entre paréntesis y se basan en una serie de reglas. Cardinalidad de los elementos: indica la cantidad de veces que aparece un determinado elemento. Símbolo Significado ¿ El elemento (o secuen