introduccion a xhtml

LIBROSWEB

JAVIER EGUILUZXHTMLINTRODUCCIN A

Introduccin a XHTMLJavier Eguiluz

Fecha publicacin: 14/03/2013

Este libro fue publicado con la aplicacin easybook (http://easybook-project.org) , una herramien-ta de software libre para la publicacin de libros digitales.

LicenciaEste libro se publica bajo la licencia Creative Commons Reconocimiento - No Comercial - Compartir Igual 3.0,cuyos detalles puedes consultar en http://creativecommons.org/licenses/by-nc-sa/3.0/es/

Puedes copiar, distribuir y comunicar pblicamente la obra, incluso transformndola, siempre quecumplas todas las condiciones siguientes:

Reconocimiento: debes reconocer siempre la autora de la obra original, indicando tanto elnombre del autor (Javier Eguiluz) como el nombre del sitio donde se public originalmente(librosweb.es). Este reconocimiento no debe hacerse de una manera que sugiera que el autor oel sitio apoyan el uso que haces de su obra.

No comercial: no puedes utilizar esta obra con fines comerciales de ningn tipo. Entre otros,no puedes vender esta obra bajo ningn concepto y tampoco puedes publicar estos contenidosen sitios web que incluyan publicidad de cualquier tipo.

Compartir igual: si alteras o transformas esta obra o si realizas una obra derivada, debescompartir tu trabajo obligatoriamente bajo esta misma licencia.

ndice de contenidosCaptulo 1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.1. Qu es HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.2. Breve historia de HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.3. Especificacin oficial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.4. HTML y XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.5. HTML y CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Captulo 2. Caractersticas bsicas . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.1. Lenguajes de etiquetas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.2. El primer documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.3. Etiquetas y atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.4. Elementos HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.5. Sintaxis de las etiquetas XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Captulo 3. Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253.1. Estructurar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.2. Marcado bsico de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303.3. Marcado avanzado de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353.4. Marcado genrico de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.5. Espacios en blanco y nuevas lneas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.6. Codificacin de caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Captulo 4. Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514.1. URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514.2. Enlaces relativos y absolutos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544.3. Enlaces bsicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594.4. Enlaces avanzados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634.5. Otros tipos de enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664.6. Ejemplos de enlaces habituales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Captulo 5. Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735.1. Listas no ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735.2. Listas ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745.3. Listas de definicin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Captulo 6. Imgenes y objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796.1. Imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796.2. Mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 826.3. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Captulo 7. Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 897.1. Tablas bsicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 907.2. Tablas avanzadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Captulo 8. Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1078.1. Formularios bsicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1078.2. Elementos de formulario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1098.3. Formularios avanzados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1168.4. Otros elementos de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Captulo 9. Estructura y layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Captulo 10. Metainformacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

10.1. Estructura de la cabecera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13110.2. Metadatos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13310.3. DOCTYPE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Captulo 11. Otras etiquetas importantes. . . . . . . . . . . . . . . . . . . . . 13711.1. Comentarios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13711.2. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13811.3. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13911.4. Iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14011.5. Otras etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Captulo 12. Accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14512.1. Requisitos del nivel A de accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Captulo 13. Validacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14913.1. Validacin con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14913.2. Validador del W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15113.3. Otros validadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Captulo 14. Fragmentos de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . 15514.1. Documento XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16014.2. Cabecera XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

14.3. Tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16114.4. Formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Captulo 15. Ejercicios resueltos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16515.1. Ejercicio 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16515.2. Ejercicio 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16515.3. Ejercicio 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16615.4. Ejercicio 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16715.5. Ejercicio 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16815.6. Ejercicio 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16815.7. Ejercicio 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17015.8. Ejercicio 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17115.9. Ejercicio 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17215.10. Ejercicio 10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17315.11. Ejercicio 11. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17415.12. Ejercicio 12. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17515.13. Ejercicio 13. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17615.14. Ejercicio 14. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17815.15. Ejercicio 15. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17915.16. Ejercicio 16. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Esta pgina se ha dejado vaca a propsito

6

Captulo 1.

Introduccin1.1. Qu es HTML?Definindolo de forma sencilla, "HTML es lo que se utiliza para crear todas las pginas web de Internet". Msconcretamente, HTML es el lenguaje con el que se "escriben" la mayora de pginas web.

Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los programas que utilizan losdiseadores generan pginas escritas en HTML y los navegadores que utilizamos los usuarios mues-tran las pginas web despus de leer su contenido HTML.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseo, es muy fcil deaprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText MarkupLanguage y ms adelante se ver el significado de cada una de estas palabras.

El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismosin nimo de lucro llamado World Wide Web Consortium (http://www.w3.org/) , ms conocido comoW3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo deInternet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cual-quier sistema operativo.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite pu-blicar informacin de forma global". Desde su creacin, el lenguaje HTML ha pasado de ser un lenguajeutilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en mu-chas aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.

1.2. Breve historia de HTMLLa historia completa de HTML es tan interesante como larga, por lo que a continuacin se muestra suhistoria resumida a partir de la informacin que se puede encontrar en la Wikipedia.

El origen de HTML se remonta a 1980, cuando el fsico Tim Berners-Lee, trabajador del CERN(http://www.cern.ch/) (Organizacin Europea para la Investigacin Nuclear) propuso un nuevo sistemade "hipertexto" para compartir documentos.

7

Los sistemas de "hipertexto" haban sido desarrollados aos antes. En el mbito de la informtica, el"hipertexto" permita que los usuarios accedieran a la informacin relacionada con los documentoselectrnicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto" po-dran asimilarse a los enlaces de las pginas web actuales.

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo present a una convoca-toria organizada para desarrollar un sistema de "hipertexto" para Internet. Despus de unir sus fuerzascon el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWide-Web (W3).

El primer documento formal con la descripcin de HTML se public en 1991 bajo el nombre HTML Tags(http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html) (EtiquetasHTML) y todava hoy puede ser consultado online a modo de reliquia informtica.

La primera propuesta oficial para convertir HTML en un estndar se realiz en 1993 por parte del or-ganismo IETF (http://www.ietf.org/) (Internet Engineering Task Force). Aunque se consiguieron avancessignificativos (en esta poca se definieron las etiquetas para imgenes, tablas y formularios) ningu-na de las dos propuestas de estndar, llamadas HTML y HTML+ consiguieron convertirse en estndaroficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de sep-tiembre de ese mismo ao, el estndar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estn-dar oficial de HTML.

A partir de 1996, los estndares de HTML los publica otro organismo de estandarizacin llamado W3C(http://www.w3.org/) (World Wide Web Consortium). La versin HTML 3.2 se public el 14 de Enero de1997 y es la primera recomendacin de HTML publicada por el W3C. Esta revisin incorpora los lti-mos avances de las pginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alre-dedor de las imgenes.

HTML 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la publicacin original del18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedadesms destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeos programaso scripts en las pginas web, mejora de la accesibilidad de las pginas diseadas, tablas complejas ymejoras en los formularios.

La ltima especificacin oficial de HTML se public el 24 de diciembre de 1999 y se denomina HTML4.01. Se trata de una revisin y actualizacin de la versin HTML 4.0, por lo que no incluye novedadessignificativas.

Desde la publicacin de HTML 4.01, la actividad de estandarizacin de HTML se detuvo y el W3C secentr en el desarrollo del estndar XHTML. Por este motivo, en el ao 2004, las empresas Apple, Mo-zilla y Opera mostraron su preocupacin por la falta de inters del W3C en HTML y decidieron orga-nizarse en una nueva asociacin llamada WHATWG (http://www.whatwg.org/) (Web Hypertext Appli-cation Technology Working Group).

La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo primer borrador oficial(http://www.w3.org/TR/html5/) se public el 22 de enero de 2008. Debido a la fuerza de las empresas

Captulo 1. Introduccin Introduccin a XHTML

8

que forman el grupo WHATWG y a la publicacin de los borradores de HTML 5.0, en marzo de 2007el W3C decidi retomar la actividad estandarizadora de HTML (http://www.w3.org/2007/03/html-pressrelease) .

De forma paralela a su actividad con HTML, W3C ha continuado con la estandarizacin de XHTML,una versin avanzada de HTML y basada en XML. La primera versin de XHTML se denomina XHTML1.0 y se public el 26 de Enero de 2000 (y posteriormente se revis el 1 de Agosto de 2002).

XHTML 1.0 es una adaptacin de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus eti-quetas y caractersticas, pero aade algunas restricciones y elementos propios de XML. La versinXHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. Tambin hasido publicado el borrador de XHTML 2.0, que supondr un cambio muy importante respecto de lasanteriores versiones de XHTML.

1.3. Especificacin oficialEl organismo W3C (http://www.w3.org/) (World Wide Web Consortium) elabora las normas que debenseguir los diseadores de pginas web para crear las pginas HTML. Las normas oficiales estn escri-tas en ingls y se pueden consultar de forma gratuita en las siguientes direcciones:

Especificacin oficial de HTML 4.01 (http://www.w3.org/TR/html401/)

Especificacin oficial de XHTML 1.0 (http://www.w3.org/TR/xhtml1/)

El estndar XHTML 1.0 incluye el 95% del estndar HTML 4.01, ya que slo aade pequeas mejorasy modificaciones menores. Afortunadamente, no es necesario leer las especificaciones y recomenda-ciones oficiales de HTML para aprender a disear pginas con HTML o XHTML. Las normas oficialesestn escritas con un lenguaje bastante formal y algunas secciones son difciles de comprender. Porello, en los prximos captulos se explica de forma sencilla y con decenas de ejemplos la especifica-cin oficial de XHTML.

1.4. HTML y XHTMLEl lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es ms que una adaptacinde HTML al lenguaje XML. Tcnicamente, HTML es descendiente directo del lenguaje SGML, mientrasque XHTML lo es del XML (que a su vez, tambin es descendiente de SGML).

Figura 1.1 Esquema de la evolucin de HTML y XHTML

Introduccin a XHTML Captulo 1. Introduccin

9

Las pginas y documentos creados con XHTML son muy similares a las pginas y documentos HTML.Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el mbito de lacreacin de contenidos web, aunque no existe una conclusin ampliamente aceptada.

Actualmente, entre HTML 4.01 y XHTML 1.0, la mayora de diseadores escogen XHTML. En un futurocercano, si los diseadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizs la eleccinsea diferente.

1.5. HTML y CSSOriginalmente, las pginas HTML slo incluan informacin sobre sus contenidos de texto e imagenes.Con el desarrollo del estndar HTML, las pginas empezaron a incluir tambin informacin sobre elaspecto de sus contenidos: tipos de letra, colores y mrgenes.

La posterior aparicin de tecnologas como JavaScript, provocaron que las pginas HTML tambin in-cluyeran el cdigo de las aplicaciones (llamadas scripts) que se utilizan para crear pginas web din-micas.

Incluir en una misma pgina HTML los contenidos, el diseo y la programacin complica en excesosu mantenimiento. Normalmente, los contenidos y el diseo de la pgina web son responsabilidad dediferentes personas, por lo que es conveniente separarlos.

CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto quedeben presentar esos contenidos:

Figura 1.2 Esquema de la separacin de los contenidos y su presentacin

Una ventaja aadida de la separacin de los contenidos y su presentacin es que los documentosXHTML creados son ms flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas deordenador, pantallas de dispositivos mviles, impresoras y dispositivos utilizados por personas disca-pacitadas.

De esta forma, utilizando exclusivamente XHTML se crean pginas web "feas" pero correctas. Aplican-do CSS, se pueden crear pginas "bonitas" a partir de las pginas XHTML correctas.

Captulo 1. Introduccin Introduccin a XHTML

10

Captulo 2.

Caractersticas bsicas2.1. Lenguajes de etiquetasUno de los retos iniciales a los que se tuvo que enfrentar la informtica fue el de cmo almacenar lainformacin en los archivos digitales. Como los primeros archivos slo contenan texto sin formato,la solucin utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en n-meros.

De esta forma, para almacenar un contenido de texto en un archivo electrnico, se utiliza una tablade conversin que transforma cada carcter en un nmero. Una vez almacenada la secuencia de n-meros, el contenido del archivo se puede recuperar realizando el proceso inverso.

Figura 2.1 Ejemplo sencillo de codificacin de caracteres

El proceso de transformacin de caracteres en secuencias de nmeros se denomina codificacin decaracteres y cada una de las tablas que se han definido para realizar la transformacin se conocencon el nombre de pginas de cdigo. Una de las codificaciones ms conocidas (y una de las primerasque se publicaron) es la codificacin ASCII. La importancia de las codificaciones en HTML se ver msadelante.

11

Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de almacenar los con-tenidos de texto con formato. En otras palabras, cmo se almacena un texto en negrita? y un textode color rojo? y otro texto azul, en negrita y subrayado?

Utilizar una tabla de conversin similar a las que se utilizan para textos sin formato no es posible, yaque existen infinitos posibles estilos para aplicar al texto. Una solucin tcnicamente viable consis-te en almacenar la informacin sobre el formato del texto en una zona especial reservada dentro delpropio archivo. En esta zona se podra indicar dnde comienza y dnde termina cada formato.

No obstante, la solucin que realmente se emplea para guardar la informacin con formato es muchoms sencilla: el archivo electrnico almacena tanto los contenidos como la informacin sobre el for-mato de esos contenidos. Si por ejemplo se quiere dividir el texto en prrafos y se desea dar especialimportancia a algunas palabras, se podra indicar de la siguiente manera:

Contenido de texto con algunas palabras resaltadas de forma

especial.

El principio de un prrafo se indica mediante la palabra y el final de un prrafo se indicamediante la palabra . De la misma manera, para asignar ms importancia a ciertas palabrasdel texto, se encierran entre y .

El proceso de indicar las diferentes partes que componen la informacin se denomina marcar (mar-kup en ingls). Cada una de las palabras que se emplean para marcar el inicio y el final de una seccinse denominan etiquetas.

Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de lasiguiente manera:

Etiqueta de apertura: carcter

Etiqueta de cierre: carcter

As, la estructura tpica de las etiquetas HTML es:

...

HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las pginas web habi-tuales estn formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la siglaHTML significan "markup language", que es como se denominan en ingls a los lenguajes de marcado.Adems de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.

La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por partede las personas y de los sistemas electrnicos. La principal desventaja es que pueden aumentar mu-cho el tamao del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.

Captulo 2. Caractersticas bsicas Introduccin a XHTML

12

2.2. El primer documento HTMLLas pginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye informacinsobre la propia pgina, como por ejemplo su ttulo y su idioma. El cuerpo de la pgina incluye todossus contenidos, como prrafos de texto e imgenes.

Figura 2.2 Esquema de las partes que forman un documento HTML

El cuerpo (llamado body en ingls) contiene todo lo que el usuario ve en su pantalla y la cabecera (lla-mada head en ingls) contiene todo lo que no se ve (con la nica excepcin del ttulo de la pgina, quelos navegadores muestran como ttulo de sus ventanas).

A continuacin se muestra el cdigo HTML de una pgina web muy sencilla:

El primer documento HTML

El lenguaje HTML es tan sencillo que

prcticamente se entiende sin estudiar el significado

de sus etiquetas principales.

Si quieres probar este primer ejemplo, debes hacer lo siguiente:

1. Abre un editor de archivos de texto y crea un archivo nuevo

2. Copia el cdigo HTML mostrado anteriormente y pgalo tal cual en el archivo que has creado

3. Guarda el archivo con el nombre que quieras, pero con la extensin .html

Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de tex-to sin formato. Si tu sistema operativo es Windows, puedes utilizar el Bloc de notas, Wordpad, EmEditor,UltraEdit, Notepad++, etc. pero no puedes utilizar un procesador de textos como Word o Open Office. Siutilizas sistemas operativos tipo Linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso Vi,pero no utilices KOffice ni Open Office.

Despus de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador paraque se muestre con el siguiente aspecto:

Introduccin a XHTML Captulo 2. Caractersticas bsicas

13

Figura 2.3 Aspecto que muestra el primer documento HTML en cualquier navegador

Si ya ests viendo tu primera pgina HTML en el navegador, prueba a pulsar sobre el men Ver >Cdigo fuente y podrs ver el cdigo HTML de la pgina que est cargada en el navegador. De hecho,puedes ver el cdigo HTML de cualquier pgina de Internet mediante la opcin Ver > Cdigo fuente.Prueba a ver el cdigo HTML de tu pgina preferida y vers cuantas etiquetas puede llegar a teneruna pgina compleja.

Volviendo al cdigo HTML del primer ejemplo, es importante conocer las tres etiquetas principalesde un documento HTML (, , ):

: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenidopuede colocarse antes o despus de la etiqueta (con una sola excepcin que se ver msadelante). En el interior de la etiqueta se definen la cabecera y el cuerpo del documentoHTML y todo lo que se coloque fuera de la etiqueta se ignora.

: delimita la parte de la cabecera del documento. La cabecera contiene informacin sobreel propio documento HTML, como por ejemplo su ttulo y el idioma de la pgina. Los contenidosindicados en la cabecera no son visibles para el usuario, con la excepcin de la etiqueta ,que se utiliza para indicar el ttulo del documento y que los navegadores lo visualizan en laparte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelvea abrir el primer ejemplo en cualquier navegador y observa dnde se muestra el ttulo de lapgina).

: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que semuestran al usuario (prrafos de texto, imgenes, tablas). En general, el de undocumento contiene cientos de etiquetas HTML, mientras que el no contiene ms queunas pocas.


14

Figura 2.4 Esquema de las etiquetas principales que contiene un documento HTML

Ejercicio 1

Determinar el cdigo HTML correspondiente a la siguiente pgina:

Figura 2.5 Pgina HTML sencilla que resalta algunas partes del texto

Pistas: y

2.3. Etiquetas y atributosHTML define 91 etiquetas que los diseadores pueden utilizar para marcar los diferentes elementosque componen una pgina:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button,caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame,frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li,link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script,select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title,tr, tt, u, ul, var.


15

De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar:applet, basefont, center, dir, font, isindex, menu, s, strike, u.

A pesar de que se trata de un nmero de etiquetas muy grande, no es suficiente para crear pginascomplejas. Algunos elementos como las imgenes y los enlaces requieren cierta informacin adicio-nal para estar completamente definidos.

La etiqueta por ejemplo se emplea para incluir un enlace en una pgina. Utilizando slo la etique-ta no es posible establecer la direccin a la que apunta cada enlace. Como no es viable crear unaetiqueta por cada enlace diferente, la solucin consiste en personalizar las etiquetas HTML mediantecierta informacin adicional llamada atributos.

De esta forma, se utiliza la misma etiqueta para todos los enlaces de la pgina y se utilizan losatributos para indicar la direccin a la que apunta cada enlace.

Ejemplo de atributos en las etiquetas

Los enlaces son muy fciles de indicar:

Soy un enlace incompleto, porque no tengo direccin de destino.

Este otro enlace apunta a la pgina de Google.

Figura 2.6 Los atributos permiten personalizar las etiquetas HTML


16

El primer enlace del ejemplo anterior no est completamente definido, ya que no apunta a ningunadireccin. El segundo enlace, utiliza la misma etiqueta , pero aade informacin adicional median-te un atributo llamado href. Los atributos se incluyen dentro de la etiqueta de apertura. Por ahora noes importante comprender la etiqueta ni el atributo href, ya que se explicarn con todo detallems adelante.

No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su pro-pia lista de atributos disponibles. Adems, cada atributo tambin indica el tipo de valor que se le pue-de asignar. Si el valor de un atributo no es vlido, el navegador ignora ese atributo.

Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los atributos son co-munes a muchas o casi todas las etiquetas. De esta forma, es habitual explicar por separado los atri-butos comunes de las etiquetas para no tener que volver a hacerlo cada vez que se explica una nuevaetiqueta. Los atributos comunes se dividen en cuatro grupos segn su funcionalidad:

Atributos bsicos: se pueden utilizar prcticamente en todas las etiquetas HTML.

Atributos para internacionalizacin: los utilizan las pginas que muestran sus contenidos envarios idiomas.

Atributos de eventos: slo se utilizan en las pginas web dinmicas creadas con JavaScript.

Atributos de foco: relacionados principalmente con la accesibilidad de los sitios web.

2.3.1. Atributos bsicosLos siguiente cuatro atributos bsicos se pueden aplicar prcticamente a todas las etiquetas HTML:

Atributo Descripcin

id = "texto" Establece un identificador nico a cada elemento dentro de una pgina HTML

class = "texto" Establece la clase CSS que se aplica a los estilos del elemento

style = "texto" Establece de forma directa los estilos CSS de un elemento

title = "texto" Establece el ttulo a un elemento (mejora la accesibilidad y los navegadores lomuestran cuando el usuario pasa el ratn por encima del elemento)

La mayora de pginas web actuales utilizan los atributos id y class de forma masiva. Sin embargo,estos atributos slo son realmente tiles cuando se trabaja con CSS y con Javascript.

Respecto al valor de los atributos id y class, slo pueden contener guiones medios (-), guiones bajos(_), letras y/o nmeros, pero no pueden empezar por nmeros. Adems, los navegadores distinguenmaysculas de minsculas y no se recomienda utilizar letras como y acentos, ya que no es seguroque funcionen correctamente en todas las versiones de todos los navegadores.

2.3.2. Atributos para internacionalizacinEstos atributos son tiles para aquellas pginas que muestran sus contenidos en varios idiomas y paraaquellas que quieren indicar de forma expltica el idioma de sus contenidos:


17

Atributo Descripcin

lang = "codigo de idioma" Indica el idioma del elemento mediante un cdigo predefinido

xml:lang = "codigo de idioma" Indica el idioma del elemento mediante un cdigo predefinido

dir Indica la direccin del texto (til para los idiomas que escribende derecha a izquierda)

En las pginas XHTML, el atributo xml:lang tiene ms prioridad que lang y es obligatorio incluirlosiempre que se incluye el atributo lang. Los idiomas se indican mediante un cdigo estandarizado (espara espaol, en para ingls, etc.), tal y como se explicar ms adelante en la seccin idioma del enla-ce (pgina 64) del captulo 4.

Como la palabra internacionalizacin es muy larga, se suele sustituir por la abreviatura i18n (elnmero 18 se refiere al nmero de letras que existen entre la letra i y la letra n de la palabrainternacionalizacin).

2.3.3. Atributos de eventosEstos atributos slo se utilizan en las pginas web que incluyen cdigo JavaScript para realizar accio-nes dinmicas sobre los elementos de la pgina. Cada vez que el usuario pulsa una tecla, mueve suratn o pulsa cualquier botn del ratn, se produce un evento dentro del navegador. Utilizando Ja-vaScript y los siguientes atributos, es posible responder de forma adecuada a cada evento.

Atributo Descripcin Elementos que pueden usarlo

onblur Deseleccionar el elemento , , , ,,

onchange Deseleccionar un elemento que se hamodificado

, ,

onclick Pinchar y soltar el ratn Todos los elementos

ondblclick Pinchar dos veces seguidas con el ratn Todos los elementos

onfocus Seleccionar un elemento , , , ,,

onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y

onkeypress Pulsar una tecla Elementos de formulario y

onkeyup Soltar una tecla pulsada Elementos de formulario y

onload La pgina se ha cargado completamente

onmousedown Pulsar (sin soltar) un botn del ratn Todos los elementos

onmousemove Mover el ratn Todos los elementos


18

Atributo Descripcin Elementos que pueden usarlo

onmouseout El ratn "sale" del elemento (pasa porencima de otro elemento)

Todos los elementos

onmouseover El ratn "entra" en el elemento (pasa porencima del elemento)

Todos los elementos

onmouseup Soltar el botn que estaba pulsado en elratn

Todos los elementos

onreset Inicializar el formulario (borrar todos susdatos)

onresize Se ha modificado el tamao de la ventanadel navegador

onselect Seleccionar un texto ,

onsubmit Enviar el formulario

onunload Se abandona la pgina (por ejemplo alcerrar el navegador)

2.3.4. Atributos de focoCuando el usuario selecciona un elemento en una aplicacin, se dice que "el elemento tiene el foco delprograma". Si por ejemplo un usuario pincha con su ratn sobre un cuadro de texto y comienza a es-cribir, ese cuadro de texto tiene el foco del programa, llamado "focus" en ingls. Si el usuario seleccio-na despus otro elemento, el elemento original pierde el foco y el nuevo elemento es el que tiene elfoco del programa.

Los elementos de las pginas web tambin pueden obtener el foco de la aplicacin (en este caso, elfoco del navegador) y HTML define algunos atributos especficos para controlar cmo se seleccionanlos elementos.

Atributo Descripcin

accesskey = "letra" Establece una tecla de acceso rpido a un elemento HTML

tabindex = "numero" Establece la posicin del elemento en el orden de tabulacin de la pgina.Su valor debe estar comprendido entre 0 y 32.767

onfocus, onblur Controlan los eventos JavaScript que se ejecutan cuando el elementoobtiene o pierde el foco

Cuando se pulsa repetidamente la tecla del tabulador sobre una pgina web, el navegador seleccionade forma alternativa todos los elementos de la pgina que se pueden seleccionar (principalmente losenlaces y los elementos de formulario). El atributo tabindex permite alterar el orden en el que se se-leccionan los elementos, por lo que es muy til cuando se quiere controlar de forma precisa cmo seseleccionan los campos de un formulario complejo.


19

Por su parte, el atributo accesskey permite establecer una tecla para acceder de forma rpida a cual-quier elemento. Aunque la tecla de acceso rpido se establece mediante HTML, la combinacin deteclas necesarias para activar ese acceso rpido depende del navegador. En el navegador Internet Ex-plorer se pulsa la tecla ALT + la tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecladefinida; en el navegador Opera se pulsa Shift + Esc + la tecla definida; en el navegador Safari se pulsaCtrl + la tecla definida.

2.4. Elementos HTMLAdems de etiquetas y atributos, HTML define el trmino elemento para referirse a las partes quecomponen los documentos HTML.

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un ele-mento HTML es mucho ms que una etiqueta, ya que est formado por:

Una etiqueta de apertura.

Cero o ms atributos.

Texto encerrado por la etiqueta.

Una etiqueta de cierre.

El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrarningn texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta , atri-butos y contenidos de texto:

Figura 2.7 Esquema de las partes que componen un elemento HTML

La estructura mostrada en el esquema anterior es un elemento HTML ya que comienza con una eti-queta de apertura (), contiene cero o ms atributos (class="normal"), dispone de un contenido detexto (Esto es un prrafo) y finaliza con una etiqueta de cierre ().

Por tanto, si una pgina web tiene dos prrafos de texto, la pgina contiene dos elementos y cuatroetiquetas (dos etiquetas de apertura y dos etiquetas de cierre). De todas formas, aunque es-trictamente no son lo mismo, es habitual intercambiar las palabras "elemento" y "etiqueta".

Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en lnea(inline elements en ingls) y elementos de bloque (block elements en ingls).

La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio dis-ponible en la pgina. Los elementos de bloque siempre empiezan en una nueva lnea y ocupan todoel espacio disponible hasta el final de la lnea, aunque sus contenidos no lleguen hasta el final de la


20

lnea. Por su parte, los elementos en lnea slo ocupan el espacio necesario para mostrar sus conteni-dos.

Si se considera el siguiente ejemplo:

Ejemplo de elementos en lnea y elementos de bloque

Los prrafos son elementos de bloque.

Los enlaces son elementos en lnea

Dentro de un prrafo, los enlaces

siguen siendo elementos en lnea.

La siguiente imagen muestra cmo visualizan los navegadores el cdigo HTML anterior (medianteCSS se han aadido bordes que muestran el espacio ocupado por cada elemento):

Figura 2.8 Diferencias entre elementos en lnea y elementos de bloque

El primer prrafo contiene un texto corto que slo ocupa la mitad de la anchura de la ventana delnavegador. No obstante, el espacio reservado por el navegador para el primer prrafo llega hasta elfinal de esa lnea, por lo que resulta evidente que los elementos son elementos de bloque.

Por otra parte, el primer enlace del ejemplo anterior tambin tiene un texto corto que ocupa sola-mente la mitad de la anchura de la ventana del navegador. En este caso, el navegador slo reservapara el enlace el sitio necesario para mostrar sus contenidos. Si se aade otro enlace en esa mismalnea, se mostrara a continuacin del primer enlace. Por tanto, los elementos son elementos enlnea.


21

Por ltimo, el segundo prrafo sigue ocupando todo el espacio disponible hasta el final de cada lnea(por ser un elemento de bloque) y el enlace que se encuentra dentro del prrafo slo ocupa el sitionecesario para mostrar sus contenidos (por ser un elemento en lnea).

La mayora de elementos de bloque pueden contener en su interior elementos en lnea y otros ele-mentos de bloque. Los elementos en lnea slo pueden contener texto u otros elementos en lnea. Enotras palabras, un elemento de bloque no puede aparecer dentro de un elemento en lnea. En cambio,un elemento en lnea puede aparecer dentro de un elemento de bloque y dentro de otro elemento enlnea.

Los elementos en lnea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code,dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea,tt, u, var.

Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset,form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.

Los siguientes elementos tambin se considera que son de bloque: dd, dt, frame-set, li, tbody, td,tfoot, th, thead, tr.

Los siguientes elementos pueden ser en lnea y de bloque segn las circunstancias: button, del,iframe, ins, map, object, script.

2.5. Sintaxis de las etiquetas XHTMLEl lenguaje HTML original era muy permisivo en su sintaxis, por lo que era posible escribir sus etique-tas y atributos de muchas formas diferentes. Las etiquetas por ejemplo podan escribirse en mays-culas, en minsculas e incluso combinando maysculas y minsculas. El valor de los atributos de lasetiquetas se podan indicar con y sin comillas ("). Adems, el orden en el que se abran y cerraban lasetiquetas no era importante.

La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final son pginas con uncdigo HTML desordenado, difcil de mantener y muy poco profesional. Afortunadamente, XHTMLsoluciona estos problemas aadiendo ciertas normas en la forma de escribir las etiquetas y atributos.

A continuacin se muestran las cinco restricciones bsicas que introduce XHTML respecto a HTML enla sintaxis de sus etiquetas:

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:

Ejemplo correcto en XHTML:

Este es un prrafo con un enlace

Ejemplo incorrecto en XHTML (pero correcto en HTML):


2) Los nombres de las etiquetas y atributos siempre se escriben en minsculas:


22





3) El valor de los atributos siempre se encierra con comillas:





4) Los atributos no se pueden comprimir:


...


...

Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.

5) Todas las etiquetas deben cerrarse siempre:

La mayora de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la eti-queta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacas" no necesitan en-cerrar ningn texto.

La etiqueta por ejemplo, se utiliza para indicar el comienzo de una nueva lnea, tal y como sever ms adelante. Por sus caractersticas, la etiqueta nunca encierra ningn contenido de texto.

Como el estndar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que se incluya la eti-queta se debera cerrar de forma seguida: . Para que el cdigo resulte ms cmodo deescribir, XHTML permite en estos casos escribir de forma abreviada una etiqueta que se abre y se cie-rra de forma consecutiva.

En lugar de abrir y cerrar de forma consecutiva la etiqueta () se puede utilizar la sintaxis para indicar que es una etiqueta vaca que se abre y se cierra en ese mismo punto. En la formacompacta es habitual equivocarse con la posicin del carcter /.



23


Adems de estas cinco restricciones bsicas, XHTML incluye otros cambios ms avanzados respecto aHTML:

1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que seencuentran antes y despus del valor. Adems, se eliminan todos los espacios en blancosobrantes dentro del valor de un atributo. En otras palabras, si en el interior de un atributo seincluyen varios espacios en blanco seguidos, se eliminan todos salvo un nico espacio en blancoutilizado para separar las diferentes palabras.

2. Como se explicar ms adelante al hablar de la etiqueta , el cdigo JavaScript debeencerrarse entre unas etiquetas especiales () para evitar que el navegadorinterprete de forma errnea caracteres como & y

Captulo 3.

TextoLa mayor parte del contenido de las pginas HTML habituales est formado por texto, llegando a serms del 90% del cdigo de la pgina. Por este motivo, es muy importante conocer los elementos y eti-quetas que define HTML para el manejo del texto.

El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas enotros entornos de publicacin de contenidos. De esta forma, HTML define etiquetas para estructu-rar el contenido en secciones y prrafos y define otras etiquetas para marcar elementos importantesdentro del texto.

La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo susprrafos, titulares y ttulos de seccin, como se muestra en la siguiente imagen:

Figura 3.1 Resultado de estructurar un texto sencillo

25

El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o secciones quecomponen el texto. De esta forma, los textos estructurados utilizan etiquetas para delimitar cada p-rrafo y ttulos de seccin para delimitar cada una de las secciones que forman el texto.

Una vez definida la estructura bsica de los contenidos de la pgina, el siguiente paso consiste en mar-car los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos importantes,textos modificados, citas a otras referencias, etc.

Figura 3.2 Resultado de marcar un texto sencillo

El anterior ejemplo muestra la transformacin de un prrafo con un texto simple en un prrafo cuyotexto contiene elementos marcados de forma especial. As, algunas palabras del texto se muestran ennegrita porque se consideran importantes; otras palabras aparecen en cursiva, ya que se han marca-do como destacadas e incluso una frase aparece tabulada y entre comillas, indicando que es una citatextual de otro contenido.

En las secciones siguientes se muestran todas las etiquetas que define HTML para estructurar y mar-car el texto. Adems, se hace una mencin especial al tratamiento que hace HTML de los espacios enblanco y las nuevas lneas.

3.1. EstructurarLa forma ms sencilla de estructurar un texto consiste en separarlo por prrafos. Adems, HTML per-mite incluir ttulos que delimitan cada una de las secciones.

3.1.1. PrrafosUna de las etiquetas ms utilizadas de HTML es la etiqueta , que permite definir los prrafos queforman el texto de una pgina. Para delimitar el texto de un prrafo, se encierra ese texto con la eti-queta , como muestra el siguiente ejemplo:

Ejemplo de texto estructurado con prrafos

Captulo 3. Texto Introduccin a XHTML

26

Este es el texto que forma el primer prrafo de la pgina.

Los prrafos pueden ocupar varias lneas y el navegador se encarga

de ajustar su longitud al tamao de la ventana.

El segundo prrafo de la pgina tambin se define encerrando

su texto con la etiqueta p. El navegador tambin se encarga de

separar automticamente cada prrafo.

El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:

Figura 3.3 Ejemplo de texto HTML estructurado con prrafos

La siguiente tabla recoge la definicin formal de la etiqueta :

Delimita el contenido de un prrafo de textoAtributos comunes bsicos, internacionalizacin y eventos Tipo de elemento Bloque

Atributos propios -

Introduccin a XHTML Captulo 3. Texto

27

Los prrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchurade la ventana del navegador. Adems, no tienen atributos especficos, pero s que se les pueden asig-nar los atributos comunes de HTML bsicos, de internacionalizacin y de eventos.

3.1.2. SeccionesLas pginas HTML habituales suelen tener una estructura ms compleja que la que se puede crear so-lamente mediante prrafos. De hecho, es habitual que las pginas se dividan en diferentes seccionesjerrquicas.

Los ttulos de seccin se utilizan para delimitar el comienzo de cada seccin de la pgina. HTML per-mite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una pgina puededefinir cualquier nmero de secciones, slo puede incluir seis niveles jerrquicos.

Las etiquetas que definen los ttulos de seccin son , , , , y . La etiqueta es la de mayor importancia y por tanto se utiliza para definir los titulares de la pgina. La importanciadel resto de etiquetas es descendiente, de forma que la etiqueta es la que se utiliza para delimitarlas secciones menos importantes de la pgina.

A continuacin se muestra la definicin formal de la etiqueta , siendo idntica la definicin delresto de etiquetas referidas a los ttulos de seccin:

Define los ttulos de las secciones de mayor importancia de la pgina.Atributos comunes bsicos, internacionalizacin y eventos Tipo de elemento Bloque

Atributos propios -

Al igual que la etiqueta , las etiquetas de ttulo de seccin son elementos de bloque y no tienenatributos especficos.

Las etiquetas , ..., definen ttulos de seccin, no secciones completas. Por este motivo, no esnecesario encerrar los contenidos de una seccin con su etiqueta correspondiente. Solamente se debeencerrar con las etiquetas , ..., los ttulos de cada seccin.

El siguiente ejemplo muestra el uso de las etiquetas de ttulo de seccin:

Ejemplo de texto estructurado con secciones

Titular de la pgina

Prrafo de introduccin...

La primera sub-seccin


28

Prrafo de contenido...

Otra subseccin

Ms prrafos de contenido...

Los navegadores muestran el ejemplo anterior de la siguiente manera:

Figura 3.4 Ejemplo de texto HTML estructurado con prrafos y secciones

Los navegadores asignan de forma automticamente el tamao del ttulo de cada seccin en funcinde su importancia. As, los ttulos de seccin se muestran con el tamao de letra ms grande, yaque son el nivel jerrquico superior, mientras que los ttulos de seccin se visualizan con un ta-mao de letra muy pequeo, adecuado para el nivel jerrquico de menor importancia.

Evidentemente, el aspecto que los navegadores aplican por defecto a los ttulos de seccin se puedemodificar utilizando las hojas de estilos de CSS. La siguiente imagen muestra el tamao por defectocon el que los navegadores muestran cada titular:


29

Figura 3.5 Ejemplo de uso de las etiquetas h1, h2, h3, h4, h5 y h6

3.2. Marcado bsico de textoUna vez estructurado el texto en prrafos y secciones, el siguiente paso es el marcado de los elemen-tos que componen el texto. Los textos habituales estn formados por elementos como palabras ennegrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc. HTML propor-ciona varias etiquetas para marcar cada uno de los diferentes tipos de texto.

Entre las etiquetas ms utilizadas para marcar texto se encuentran y . La definicin for-mal de estas dos etiquetas se muestra a continuacin:

Realza la importancia del texto que encierraAtributos comunes bsicos, internacionalizacin y eventos Tipo de elemento En lnea

Atributos propios -

Realza con la mxima importancia el texto que encierraAtributos comunes bsicos, internacionalizacin y eventos Tipo de elemento En lnea

Atributos propios -

La etiqueta marca un texto indicando que su importancia es mayor que la del resto del texto. Laetiqueta indica que un determinado texto es de la mayor importancia dentro de la pgina.Ejemplo:


30

Ejemplo de etiqueta em y strong

El lenguaje HTML permite marcar algunos segmentos de texto

como muy importantes y otros segmentos como los

ms importantes.

Por defecto, los navegadores muestran los elementos en cursiva para hacer evidente su impor-tancia y muestran los elementos en negrita, para indicar que son los ms importantes:

Figura 3.6 Ejemplo de uso de las etiquetas em y strong

Ejercicio 2

Estructurar y marcar el siguiente texto extrado de la Wikipedia (http://es.wikipedia.org/wiki/Ex-ploracin_espacial) para que el navegador lo muestre con el aspecto de la siguiente imagen:


31

Figura 3.7 Resultado de estructurar y marcar el texto original

HTML tambin permite marcar de forma adecuada las modificaciones realizadas en el contenido deuna pgina. En otras palabras, HTML permite indicar de forma clara el texto que ha sido eliminadoy el texto que ha sido aadido a un determinado texto original. Las etiquetas utilizadas son y, cuya definicin formal es la siguiente:


32

Se emplea para marcar una modificacin en los contenidos originales consistenteen la insercin de un nuevo contenidoAtributoscomunes

bsicos, internacionalizacin y eventos Tipo de elemento Bloque y en lnea

Atributospropios cite = "url" - Indica la URL de la pgina en la que se puede obtener ms informacinsobre el motivo por el que se realiz la modificacin.

datetime = "fecha" - Especifica la fecha y hora en la que se realiz el cambio

Se emplea para marcar una modificacin en los contenidos originales consistenteen el borrado de cierto contenidoAtributoscomunes

bsicos, internacionalizacin y eventos Tipo de elemento Bloque y en lnea

Atributospropios cite = "url" - Indica la URL de la pgina en la que se puede obtener ms informacinsobre el motivo por el que se realiz la modificacin.

datetime = "fecha" - Especifica la fecha y hora en la que se realiz el cambio

Las dos etiquetas cuentan con los mismos atributos especficos, que opcionalmente se pueden aadirpara proporcionar ms informacin sobre los cambios realizados. El atributo cite se emplea para in-dicar la direccin de un documento externo en el que se puede encontrar ms informacin relaciona-da con la insercin o el borrado de texto. El atributo datetime puede utilizarse para indicar la fecha yla hora en la que se realiz cada cambio.

Ejemplo:

Ejemplo de etiqueta ins y del

Ejemplo de etiqueta ins y del

El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcado de hipertexto marcas hipertextuales) es un

lenguaje de marcacin diseado para estructurar textos y presentarlos en forma de

hipertexto.

Los navegadores muestran el ejemplo anterior de la siguiente manera:


33

Figura 3.8 Ejemplo de uso de las etiquetas ins y del

Por defecto, el texto eliminado (marcado con la etiqueta ) se muestra tachado de forma que elusuario pueda identificarlo fcilmente como un texto que formaba parte del texto original y que yano tiene validez. El texto insertado (marcado con la etiqueta ) se muestra subrayado, de formaque el usuario pueda identificarlo como un texto nuevo que no formaba parte del texto original.

Por otra parte, en muchos tipos de pginas (artculos, noticias) es habitual citar literalmente un textoexterno. HTML define la etiqueta para incluir citas textuales en las pginas web. Ladefinicin de la etiqueta HTML con el nombre ms largo se muestra a continuacin:

Se emplea para indicar que el texto que encierra es una cita textual deotro texto externoAtributos comunes bsicos, internacionalizacin y eventos Tipo de elemento Bloque

Atributos propios cite = "url" - Indica la direccin de la pgina web original de la que se

extrae la cita

Al igual que y , la etiqueta permite indicar mediante el atributo cite la di-reccin de un documento del que se ha extrado la cita. Ejemplo:

Ejemplo de etiqueta blockquote

Segn el W3C, el valor del

atributo cite en las etiquetas blockquote tiene el

siguiente significado:

"El valor de este

atributo

es una direccin URL que indica el documento original de la cita."


34

El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:

Figura 3.9 Ejemplo de uso de la etiqueta blockquote

Para indicar de forma clara que el texto es una cita externa, los navegadores muestran por defecto eltexto del elemento con un gran margen en la parte izquierda.

3.3. Marcado avanzado de textoLas pginas y documentos ms avanzados suelen incluir otros elementos importantes que se debenmarcar de forma adecuada. Por ello, HTML incluye muchas otras etiquetas que permiten marcar mselementos del texto.

La etiqueta marca las abreviaturas de un texto y la etiqueta se emplea para marcarlas siglas o acrnimos del texto. Su definicin es la siguiente:

Se emplea para marcar las abreviaturas del texto y proporcionar el significadode esas abreviaturasAtributoscomunes

bsicos, internacionalizacin y eventos Tipo de elemento En lnea

Atributospropios title = "texto" - Indica el significado completo de la abreviatura

Se emplea para marcar las siglas o acrnimos del texto y proporcionar elsignificado de esas siglasAtributos comunes bsicos, internacionalizacin y eventos Tipo de elemento En lnea

Atributos propios title = "texto" - Indica el significado completo del acrnimo o sigla

En ambos casos, el atributo title se puede utilizar para incluir el significado completo de la abrevia-tura o sigla. Ejemplo:


35

Ejemplo de etiqueta acronym

El lenguaje HTML es

estandarizado

por el W3C.

La mayora de navegadores muestran por defecto un borde inferior punteado para todos los elemen-tos y . Al posicionar el puntero del ratn sobre la palabra subrayada, el navegadormuestra un pequeo recuadro (llamado tooltip en ingls) con el valor del atributo title:

Figura 3.10 Ejemplo de uso de la etiqueta acronym

Por otra parte, en ocasiones resulta til incluir la definicin de una palabra extraa o cuyo uso estrestringido a un entorno muy determinado. HTML incluye la etiqueta para proporcionar alusuario la definicin de todas las palabras para las que se considere apropiado. La definicin formalde esta etiqueta se muestra a continuacin:


36

Se emplea para marcar las definiciones de ciertos trminos y proporcionar elsignificado de esos trminosAtributoscomunes

bsicos, internacionalizacin y eventos Tipo de elemento En lnea

Atributospropios title = "texto" - Indica el significado completo del trmino

El siguiente ejemplo muestra cmo se utiliza la etiqueta para incluir la definicin completa deuna palabra cuyo uso no es habitual fuera de los mbitos mdicos y psicolgicos:

Con estos sntomas, podra tratarse de un caso de sinestesia

Por ltimo, HTML incluye una etiqueta que se puede utilizar para marcar un texto como una citacin:

Se emplea para marcar una cita o una referencia a otras fuentesAtributos comunes bsicos, internacionalizacin y eventos Tipo de elemento En lnea

Atributos propios -

En ocasiones, no est clara la diferencia entre y . El elemento marca elautor de la cita (persona, documento, etc.) y marca el contenido de la propia cita. En elsiguiente ejemplo, encierra el contenido de una frase clebre y encierra el nom-bre de su autor:

Como dijo Mahatma Gandhi:

Vive como si fueras a morir maana y aprende como si fueras a vivir para

siempre.

Ejercicio 3

Estructurar y marcar el siguiente texto para que el navegador lo muestre con el aspecto de la siguien-te imagen:


37

Figura 3.11 Texto HTML correctamente estructurado y marcado

3.4. Marcado genrico de textoEl estndar HTML/XHTML incluye numerosas etiquetas para marcar los contenidos de texto. No obs-tante, la infinita variedad de posibles contenidos textuales hace que no sean suficientes. Si se consi-dera el siguiente ejemplo:

Importante: si quiere ponerse en contacto con la empresa ACME, puede hacerlo en el

telfono 900 555 555 o a travs de la direccin de correo electrnico [email protected]

El texto del ejemplo anterior contiene elementos de texto importantes, siglas, nmeros de telfonoy direcciones de correo electrnico. XHTML define la etiqueta para marcar los elementosimportantes y para marcar las siglas:

Importante: si quiere ponerse en contacto con la empresa

ACME, puede hacerlo en el telfono 900 555 555 o a travs de la

direccin de correo electrnico [email protected]

Desafortunadamente, XHTML no define ninguna etiqueta especfica para marcar nmeros de telfonoo direcciones de correo electrnico. De la misma forma, no define etiquetas para otros posibles ele-mentos que se pueden encontrar en los contenidos de texto.

Por este motivo, el estndar HTML/XHTML incluye una etiqueta llamada que se emplea paramarcar cualquier elemento que no se puede marcar con las otras etiquetas definidas. Siguiendo con


38

el ejemplo anterior, la etiqueta se utiliza para marcar el telfono y la direccin de correo elec-trnico:


ACME, puede hacerlo en el telfono 900 555 555 o a

travs de la direccin de correo electrnico [email protected]

La etiqueta se visualiza por defecto con el mismo aspecto que el texto normal. Por tanto eshabitual utilizar esta etiqueta junto con los atributos id y class para modificar posteriormente su as-pecto con CSS:


ACME, puede hacerlo en el telfono 900 555

555 o a travs de la direccin de correo electrnico [email protected]

La etiqueta slo se puede utilizar para encerrar contenidos y etiquetas en lnea. Cuando sequieren estructurar elementos de bloque, se utiliza la etiqueta , tal y como se ver en captulosposteriores.

3.5. Espacios en blanco y nuevas lneasEl aspecto ms sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es eltratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espa-cios en blanco, los tabuladores, los retornos de carro y el carcter de nueva lnea (ENTER o Intro).

El siguiente ejemplo ilustra este comportamiento:

Ejemplo de etiqueta p

Este primer prrafo no contiene saltos de lnea ni otro tipo de espaciado.

Este segundo prrafo s que contiene saltos

de

lnea

y otro tipo de espaciado.

El anterior cdigo HTML se visualiza en cualquier navegador de la siguiente manera:


39

Figura 3.12 Ejemplo de comportamiento de HTML con los espacios en blanco

Los dos prrafos de la imagen anterior se ven idnticos, aunque el segundo prrafo incluye varios es-pacios en blanco y est escrito en varias lneas diferentes. La razn de este comportamiento es queHTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no sonel espacio en blanco que separa las palabras.

No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco ytantas nuevas lneas como sean necesarias dentro del contenido textual de las pginas.

3.5.1. Nuevas lneasPara incluir una nueva lnea en un punto y forzar a que el texto que sigue se muestre en la lnea infe-rior, se utiliza la etiqueta . En cierta manera, insertar la etiqueta en un determinado puntodel texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.

La definicin formal de se muestra a continuacin:

Fuerza al navegador a insertar una nueva lneaAtributos comunes bsicos Tipo de elemento En lnea y etiqueta vaca

Atributos propios -

La etiqueta es una de las pocas etiquetas especiales de HTML. La particularidad de es que esuna etiqueta vaca, es decir, no encierra ningn texto. De esta forma, la etiqueta debe abrirse y ce-rrarse de forma consecutiva: .


40

En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se est abriendo y ce-rrando de forma consecutiva: (tambin se puede escribir como ).

Utilizando la etiqueta se puede rehacer el ejemplo anterior para que respete las lneas que for-man el segundo prrafo:

Ejemplo de etiqueta br



de

lnea


El navegador ahora s que muestra correctamente las nuevas lneas que se queran insertar:

Figura 3.13 Ejemplo de uso de la etiqueta br


41

3.5.2. Espacios en blancoLa solucin al problema de los espacios en blanco no es tan sencilla como el de las nuevas lneas. Paraincluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto (es importante incluir el smbolo & al principio y el smbolo ; al final).

As, el cdigo HTML del ejemplo anterior se debe rehacer para incluir los espacios en blanco adicio-nales:

Ejemplo de entidad



de

lnea


Ahora el navegador s que muestra correctamente los espacios en blanco (y las nuevas lneas) del se-gundo prrafo:

Figura 3.14 Ejemplo de uso de espacios en blanco en HTML


42

Cada texto solamente equivale a un espacio en blanco, por lo que se deben escribir tantos seguidos como espacios en blanco seguidos existan en el texto.

Ms adelante se profundiza en el origen de y se comprender por qu es necesario incluir esasucesin tan extraa de caracteres cada vez que se quiere incluir un espacio en blanco adicional.

Ejercicio 4

Determinar el cdigo HTML que corresponde al siguiente documento:

Figura 3.15 Texto HTML con espacios en blanco y nuevas lneas

3.5.3. Texto preformateadoEn ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Setrata de un caso habitual cuando una pgina web debe mostrar directamente el texto generado poralguna aplicacin.

En estos casos, se puede utiliza la etiqueta , que muestra el texto tal y como se ha escrito, res-petando todos los espacios en blanco y todas las nuevas lneas. La definicin formal de la etiqueta semuestra a continuacin:

Muestra el texto que encierra tal y como est escrito (respetando los espaciosen blanco)Atributoscomunes

bsicos, internacionalizacin y eventos Tipo de elemento Bloque

Atributospropios

-


43

El siguiente ejemplo muestra el uso de la etiqueta :

Ejemplo de etiqueta pre

La etiqueta pre

respeta los espacios en blanco

y

muestra el texto

tal y como

est escrito

La etiqueta pre

respeta los espacios en blanco

y

muestra el texto

tal y como

est escrito

El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias lneas) dentro de una eti-queta y dentro de una etiqueta . Las diferencias visuales en un navegador son muy eviden-tes:


44

Figura 3.16 Ejemplo de uso de la etiqueta pre

El primer texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios en blanco ytodas las nuevas lneas. El segundo texto se ve como un prrafo normal, ya que HTML ha eliminadotodos los espacios en blanco sobrantes.

Los elementos son especiales, ya que los navegadores les aplican las siguientes reglas:

Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas lneas)

Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas susletras son de la misma anchura

No se ajusta la longitud de las lneas (las lneas largas producen un scroll horizontal en laventana del navegador)

Esta ltima caracterstica diferencia por completo a los prrafos de los elementos . Como se havisto, los navegadores ajustan la anchura de los prrafos de texto para que ocupen todo el tamao dela ventana. Sin embargo, los elementos se muestran tal y como son originalmente, por lo queuna lnea muy larga dentro de un elemento provoca que la anchura de la pgina sea superior ala anchura de la ventana del navegador.

Si en el ejemplo anterior se aade ms texto al final de la segunda lnea (para producir una lnea lar-ga), el navegador muestra un scroll horizontal ya que el texto completo no cabe en el tamao de laventana y las lneas de los elementos nunca se ajustan.


45

Figura 3.17 Ejemplo de aparicin de scroll horizontal con la etiqueta pre

Otra etiqueta relacionada con es la etiqueta , que se utiliza para mostrar cdigo fuentede cualquier lenguaje de programacin. La definicin formal de es la siguiente:

Delimita el texto considerado un fragmento de cdigo fuenteAtributos comunes bsicos, internacionalizacin y eventos Tipo de elemento En lnea

Atributos propios -

En la mayora de pginas web, no tiene sentido utilizar la etiqueta . Sin embargo, en muchaspginas web tcnicas que incluyen listados de programas, trozos de cdigo o etiquetas HTML, lo co-rrecto es emplear la etiqueta .

Ejemplo:

Ejemplo de etiqueta code

La etiqueta code

no respeta los espacios en blanco

La etiqueta code es similar a la


46

etiqueta pre, sobre todo en el formato

del texto.

El navegador muestra claramente el comportamiento de y sus diferencias con :

Figura 3.18 Ejemplo de uso de la etiqueta code

Al igual que sucede con los elementos , el texto encerrado por la etiqueta se muestra conun tipo de letra especial de ancho fijo. Por el contrario, el elemento no respeta los espacios enblanco ni las lneas, por lo que su comportamiento es similar a la etiqueta . La ltima diferencia esque es un elemento en lnea, mientras que es un elemento de bloque.

3.6. Codificacin de caracteresUna consideracin importante directamente relacionada con el texto de las pginas HTML es la co-dificacin de los caracteres y la insercin de caracteres especiales. Algunos de los caracteres que seutilizan habitualmente en los textos no se pueden incluir directamente en las pginas web:

Los caracteres que utiliza HTML para definir sus etiquetas ( y ") no se pueden utilizarlibremente.

Los caracteres propios de los idiomas que no son el ingls (, , , , , etc.) pueden serproblemticos dependiendo de la codificacin de caracteres utilizada.

La solucin a la primera limitacin consiste en sustituir los caracteres reservados de HTML por unasexpresiones llamadas entidades HTML y que representan a cada carcter:


47

Entidad Carcter Descripcin Traduccin

< < less than signo de menor que

> > more than signo de mayor que

& & ampersand ampersand

" " quotation mark comillas

(espacio en blanco) non-breaking space espacio en blanco

' ' apostrophe apstrofo

De esta forma, si se considera el siguiente texto:

Los caracteres , " y & pueden dar problemas con los textos en HTML

Para mostrar correctamente el texto anterior en una pgina HTML, se debe sustituir cada carcterespecial por su entidad HTML:

Los caracteres , " y & pueden dar problemas con los textos en

HTML

Ejercicio 5

Determinar el cdigo HTML que corresponde al siguiente documento:

Figura 3.19 Texto HTML que incluye caracteres especiales

Por otra parte, los caracteres propios de los idiomas diferentes al ingls tambin pueden ser proble-mticos. El motivo es que desde que se crea una pgina web hasta que llega al navegador del usuario,intervienen numerosos procesos:


48

El diseador crea la pgina web con su editor HTML (por ejemplo Dreamweaver).

Si se trata de una aplicacin dinmica, el programador recorta la pgina HTML del diseador yla mezcla con el resto del cdigo de la aplicacin (por ejemplo PHP).

El servidor web almacena las pginas HTML estticas o el cdigo de la aplicacin web y sirve laspginas solicitadas por los usuarios.

El usuario solicita y visualiza las pginas web a travs de su navegador.

Si en todos los procesos anteriores se utiliza la misma codificacin de caracteres, los caracteres pro-pios de los idiomas se pueden escribir directamente:

Este prrafo contiene caracteres acentuados y se almacena en formato UTF-8

La palabra prrafo del ejemplo anterior incluye la letra . Si el editor HTML del diseador utiliza lacodificacin UTF-8, el entorno de desarrollo del programador tambin utiliza UTF-8, el servidor websirve las pginas con esa codificacin y el navegador del usuario es capaz de visualizar las pginas conformato UTF-8, el texto anterior se ver correctamente en el navegador del usuario.

Sin embargo, muchas veces no es posible que todos los procesos involucrados utilicen la misma co-dificacin de caracteres. Por limitaciones tcnicas o por decisiones de los diseadores y programado-res, los textos pueden pasar de codificacin UTF-8 a codificacin ISO-8859 en cualquier momento. Sise produce este cambio sin realizar una conversin correcta, el navegador del usuario mostrar ca-racteres extraos en todos los acentos y en todas las letras como la .

La solucin ms sencilla para asegurar que todos estos caracteres potencialmente problemticos sevan a visualizar correctamente en el navegador del usuario consiste en sustituir cada carcter pro-blemtico por su entidad HTML:

Entidad Carcter Descripcin oficial

latin letter n with tilde

latin capital n letter with tilde

a acute

e acute

i acute

o acute

u acute

A acute

E acute

I acute

O acute


49

Entidad Carcter Descripcin oficial

U acute

euro

As, el prrafo de texto del ejemplo anterior, se podra escribir de la siguiente manera:

Este prrafo contiene caracteres acentuados y se almacena en formato UTF-8

Si se utilizan las entidades HTML en vez de los caracteres problemticos, es indiferente pasar deuna codificacin de caracteres a otra diferente. En la Wikipedia se puede consultar la lista completade las 252 entidades HTML definidas (http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references) .


50

Captulo 4.

EnlacesEl lenguaje de marcado HTML se defini teniendo en cuenta algunas de las caractersticas que existanen ese momento para la publicacin digital de contenidos. Entre los conceptos utilizados en su crea-cin, se encuentra el mecanismo de "hipertexto".

De hecho, las letras "HT" de la sigla HTML significan "hipertexto" (hypertext en ingls), por lo que elsignificado completo de HTML podra traducirse como "lenguaje de marcado para hipertexto".

La incorporacin del hipertexto fue una de las claves del xito del lenguaje HTML, ya que permiticrear documentos interactivos que proporcionan informacin adicional cuando se solicita. El elemen-to principal del hipertexto es el "hiperenlace", tambin llamado "enlace web" o simplemente "enlace".

Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayora de enlacesrelacionan pginas web, tambin es posible enlazar otros recursos como imgenes, documentos y ar-chivos.

Una caracterstica que no se suele tener en cuenta en los enlaces es que estn formados por dos ex-tremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso.Cada uno de los dos extremos se llaman "anchors" en ingls, que se puede traducir literalmente como"anclas".

4.1. URLAntes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acr-nimo URL (del ingls Uniform Resource Locator) hace referencia al identificador nico de cada recur-so disponible en Internet. Las URL son esenciales para crear los enlaces, pero tambin se utilizan enotros elementos HTML como las imgenes y los formularios.

La URL de un recurso tiene dos objetivos principales:

Identificar de forma nica a ese recurso

Permitir localizar de forma eficiente ese recurso

51

En primer lugar, las URL permiten que cada pgina HTML publicada en Internet tenga un nombrenico que permita diferenciarla de las dems. De esta forma es posible crear enlaces que apunten deforma inequvoca a una determinada pgina.

Si se accede a la pgina principal de Google, la direccin que muestra el navegador es:

http://www.google.com

La cadena de texto http://www.google.com es la URL completa de la pgina principal de Google. LaURL de las pginas es imprescindible para crear los enlaces, ya que permite distinguir una pgina deotra.

El segundo objetivo de las URL es el de permitir la localizacin eficiente de cada recurso de Internet.Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempreest formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:

http://www.librosweb.es/xhtml/capitulo4.html

Las partes que componen la URL anterior son:

Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso.Todas las pginas web utilizan http://. Las pginas web seguras (por ejemplo las de los bancos ylas de los servicios de email) utilizan https:// (se aade una letra s).

Servidor (www.librosweb.es): simplificando mucho su explicacin, se trata del ordenador en elque se encuentra guardada la pgina que se quiere acceder. Los navegadores son capaces deobtener la direccin de cada servidor a partir de su nombre.

Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor,para localizar el recurso especfico que se quiere acceder.

Por tanto, las URL no slo identifican de forma nica a cada recurso de Internet, sino que tambinproporcionan a los navegadores la informacin necesaria para poder llegar hasta ese recurso.

La mayora de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URLcomplejas formadas por ms partes.

http://www.alistapart.com/comments/webstandards2008?page=5#42

Las cinco partes que forman la URL anterior son:

Protocolo (http://)

Servidor (www.alistapart.com)

Ruta (/comments/webstandards2008)

Consulta (?page=5): informacin adicional necesaria para que el servidor localice correctamenteel recurso que se quiere acceder. Siempre comienza con el carcter ? y contiene una sucesinde palabras separadas por = y &

Seccin (#42): permite que el navegador se posicione automticamente en una seccin de lapgina web. Siempre comienza con el caracter #

Captulo 4. Enlaces Introduccin a XHTML

52

Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres estn reserva-dos y no se pueden utilizar libremente. Adems, algunos caracteres no estn reservados pero puedenser problemticos si se utilizan en la propia URL.

Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combi-naciones de caracteres seguros. Esta sustitucin se denomina codificacin de caracteres y el servidorrealiza el proceso inverso (decodificacin) cuando le llega una URL con los caracteres codificados.

A continuacin se muestra la tabla para codificar los caracteres ms comunes:

Carcter original Carcter codificado Carcter original Carcter codificado

/ %2F ? %3F

: %3A @ %40

= %3D & %26

" %22 \ %5C

' %60 ~ %7E

(espacio en blanco) %20 # %23

Por otra parte, aunque desde hace tiempo ya es posible incluir en las URL caracteres de otros idiomasque no sean el ingls, an no es completamente seguro utilizar estos caracteres en las URL. Si se uti-lizan letras como , , o , es posible que algunos navegadores no las interpreten de forma correcta.

La solucin consiste en codificar todos los caracteres que no existen en ingls. La siguiente tablamuestra la codificacin de los caracteres ms utilizados:

Carcter original Carcter codificado Carcter original Carcter codificado

%F1 %D1

%E1 %C1

%E9 %C9

%ED %CD

%F3 %D3

%FA %DA

%E7 %C7

Teniendo en cuenta las dos tablas anteriores de codificacin de caracteres, es fcil crear las URL co-rrectas sin caracteres problemticos:

http://www.ejemplo.com/estaciones/otoo.html

Introduccin a XHTML Captulo 4. Enlaces

53

http://www.ejemplo.com/estaciones/oto%F1o.html

http://www.ejemplo.com/ruta/nombre pgina.html

http://www.ejemplo.com/ruta/nombre%20p%E1gina.html

4.2. Enlaces relativos y absolutosLas pginas web habituales suelen contener decenas de enlaces de diferentes tipos. La siguienteimagen muestra algunos de los tipos de enlaces de la pgina principal del sitio webwww.thinkvitamin.com:

Figura 4.1 Ejemplo de diferentes tipos de enlaces en la pgina 456BereaStreet.com

En esa pgina, cuando se pincha sobre algunos enlaces, el navegador abandona el sitio web para ac-ceder a pginas que se encuentran en otros sitios. Estos enlaces se conocen como "enlaces externos".Sin embargo, la mayora de enlaces de un sitio web apuntan a pginas del propio sitio web, por lo quese denominan "enlaces internos".

Adems de internos/externos, la otra caracterstica que diferencia a los enlaces (y por tanto, tambina las URL) es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL(protocolo, servidor y ruta) por lo que no se necesita ms informacin para obtener el recurso enla-zado.

Las URL relativas prescinden de algunas partes de las URL para hacerlas ms breves. Como se tratade URL incompletas, es necesario disponer de informacin adicional para obtener el recurso enlaza-

Captulo 4. Enlaces Introduccin a XHTML

54

do. En concreto, para que una URL relativa sea til es imprescindible conocer la URL del origen delenlace.

Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo,del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL rela-tivas pueden ser difciles de entender para los que comienzan con HTML, son tan tiles que todos lossitios web las utilizan.

Imagina que dispones de una pgina publicada en http://www.ejemplo.com/ruta1/ruta2/pagi-na1.html y quieres incluir en ella un enlace a otra pgina que se encuentra enhttp://www.ejemplo.com/ruta1/ruta2/pagina2.html. Como las URL identifican de forma nica a losrecursos de Internet y proporcionan la informacin necesaria para llegar hasta ellos, el enlace debe-ra utilizar la URL completa de la segunda pgina.

Las URL completas tambin se llaman URL absolutas, ya que el navegador no necesita disponer de in-formacin adicional para localizar el recurso enlazado. Si se utilizan siempre las URL absolutas, losenlaces estn completamente definidos.

Sin embargo, escribir siempre las URL completas es bastante aburrido, cuesta mucho tiempo y haceimposible cambiar la ubicacin de los contenidos de un sitio web. Por ese motivo, casi todos los sitiosweb de Internet utilizan URL relativas siempre que es posible.

Una URL relativa es una versin abreviada de una URL absoluta. Su objetivo es eliminar todas las par-tes de la URL absoluta que se pueden adivinar a partir de la informacin de contexto de la pgina web.En otras palabras, las URL relativas aprovechan la inteligencia de los navegadores para crear URL in-completas que los navegadores pueden completar deduciendo la informacin que falta.

Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo pro-tocolo y se encuentra en el mismo servidor que la pgina origen, por lo que la URL relativa puedeprescindir de esas partes:

URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html

URL relativa: /ruta1/ruta2/pagina2.html

En el ejemplo anterior, las dos URL son equivalentes porque cuando no se indica el protocolo y el ser-vidor de una URL, los navegadores suponen que son los mismos que los de la pgina origen. Por lotanto, cuando el navegador encuentra la URL /ruta1/ruta2/pagina2.html, realiza el siguiente proce-so:

1. La URL no es absoluta, por lo que se debe determinar la URL absoluta a partir de la URL relativapara poder cargar el recurso enlazado.

2. A la URL relativa le falta el protocolo y el servidor, por lo que se supone que son los mismos quelos de la pgina origen (http:// y www.ejemplo.com).

3. Se aaden las partes que faltan a la URL relativa para obtener la URL absoluta: http:// +www.ejemplo.com + /ruta1/ruta2/pagina2.html = http://www.ejemplo.com/ruta1/ruta2/pagina2.html.

Introduccin a XHTML Captulo 4. Enlaces

55

Aunque el ejemplo mostrado es el caso ms sencillo de URL relativa, existen otros casos ms avanza-dos en los que se prescinde de parte o toda la ruta del recurso que se enlaza. A continuacin se mues-tran los cuatro tipos diferentes de URL relativas:

1) El origen y el destino del enlace se encuentran en el mismo directorio

Si desde una pgina web se quiere enlazar un recurso que se encuentra en el mismo directorio delservidor, la URL relativa puede prescindir de todas las partes de la URL absoluta salvo el nombre delrecurso enlazado.

Elemento Valor

Pgina origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

Pgina enlazada Pgina web llamada pagina2.html y que se encuentra en el mismo directorio

URL absoluta http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina2.html

URL relativa pagina2.html

Cuando el navegador encuentra una URL relativa que slo consiste en el nombre de un recurso, supo-ne que el protocolo, servidor y directorio del recurso enlazado son los mismos que los del origen delenlace.

2) El destino del enlace se encuentra cerca de su origen y en un nivel superior

introduccion a xhtml

Documents