Lenguaje de Representacion

Los lenguajes de marcas, tambin denominados lenguajes de marcado o lenguajes de

descripcin de documentos, construyen un conjunto de reglas que definen todo aquello
que es parte de un documento digital, pero que no pertenece al texto del mismo. Los
lenguajes de marcas no son lenguajes de formato similares a los lenguajes que se
usan en Internet como los de descripcin de pginas (archivos PostScript, archivos
.pdf, etc.) ni son lenguajes de programacin (Java, Perl, C++...), sino que se trata de
lenguajes orientados a definir la estructura y la semntica de un documento. En
realidad, ms que de lenguajes, podramos hablar de metalenguajes o sistemas
formales mediante los cuales se aade informacin o codificacin a la forma digital de
un documento bien para controlar su procesamiento, bien para representar su
significado.
En un documento existen distintos niveles de informacin: por un lado, los datos que
conforman el contenido de un documento (caracteres de contenido), y por otro, una
informacin superpuesta al contenido, que es lo que constituye el etiquetado, marcado
o "markup" (caracteres de etiquetado).
Un lenguaje de marcado cumple con dos objetivos esenciales a la hora de disear y
procesar un documento digital:

Especifica las operaciones tipogrficas y las

funciones que debe ejecutar el programa
navegador/visualizador sobre dichos elementos.
Las operaciones tipogrficas son instrucciones
de formato que se aplican a cada uno de los
elementos de un documento digital como, por
ejemplo, imprimir un ttulo en negrita y a un
determinado tamao.

Separa un texto en los elementos de los que se

compone, como por ejemplo un prrafo, un captulo, un encabezamiento, etc.

As, pues, hay 2 tipos de marcacin:

especfica: describe cmo ha de formatearse el documento: fuente, tamao,

color, etc.

estructural: describe la estructura del documento: titular, prrafo, etc.

En general los lenguajes de marcado siguen una sintaxis basada en el uso de marcas o
etiquetas: una etiqueta que indica el principio de un elemento y otra el final del mismo.

Por regla general, la mayor parte de autores distinguen 2 tipos bsicos de lenguajes de
marcado:

Lenguaje de marcado de procedimiento o procesado: Las anotaciones o

marcas de los lenguajes de procedimiento describen la forma y el significado de
las operaciones tipogrficas que van a ser aplicadas a cada uno de los
elementos del documento. Por ejemplo, una regla de un lenguaje de
procedimiento indicara que el ttulo de la seccin de un texto debe ser impreso
en una sola lnea con una fuente de seis puntos ms grande que el resto del
texto, con objeto de que los lectores puedan inferir que es el ttulo. Se refiere,
pues, a la apariencia fsica o formato (fuente, estilo de letra, tamao, etc.) tanto
del documento en pantalla como del documento impreso.

Lenguaje de marcado estructural o descriptivo: En los lenguajes estructurales

las marcas o anotaciones nicamente describen la estructura lgica del
documento digital y/o la descripcin del contenido, no su tipografa.

Aunque lo cierto es que existen 3 utilizaciones bsicas de los lenguajes de marcas: los
que sirven principalmente para describir el contenido (por ejemplo, las bases de datos),
los que sirven para definir el formato (por ejemplo, los procesadores de textos) y los
que realizan las dos funciones indistintamente (por ejemplo, el lenguaje HTML).
Cmo surgen los lenguajes de marcado?
Dada la gran variedad de formatos existentes a la hora de archivar documentos y de
los problemas que se planteaban cuando se intercambiaban archivos con las
consiguientes prdidas de formato y otras caractersticas, todos estos problemas se
intentaron solucionar editando los textos en cdigo ASCII (American Standard Code for
Information Interchange) el cdigo de 7 bits que puede representar un mximo de 128
caracteres, muchos de ellos no imprimibles. Sin embargo, con la utilizacin de este
cdigo, no se poda definir el formato de un texto (por ejemplo, el uso de negrita o
cursiva, o el uso de tipos de letra ms grandes para los encabezamientos), ni se podan
definir otras caractersticas relativas a la posicin del texto, por lo que se intent buscar
un sistema de marcas con las que se pudieran determinar stas y otras
particularidades.
Se acord, pues, que las marcas deberan constar de unos caracteres ASCII
especialmente reservados para ello y que deberan seguirse unas reglas sintcticas
especiales. As naci un lenguaje especial normalizado internacional para la
formulacin de este tipo de reglas llamado Standard Generalized Markup Language o
SGML. SGML no es pues, un lenguaje en s mismo, sino un metalenguaje y de l se
deriva el lenguaje HTML o lenguaje de marcas de hipertexto, y otros muchos lenguajes.
SGML

SGML (Standard Generalized Markup Language) o Lenguaje de Etiquetado

Generalizado Estndar es una norma ISO que permite que la estructura de un
documento pueda ser definida en base a la relacin lgica de sus partes. Esta
estructura puede ser validada por una Definicin de Tipo de Documento (DTD Document Type Definition). La norma SGML define la sintaxis del documento y la
sintaxis y semntica de DTD.
En 1969 IBM ide el lenguaje GML o Generalized Markup Language con el objetivo de
crear un sistema general que permitiera la compatibilidad entre los documentos. En
1978, el Instituto Nacional Americano de Normalizacin (ANSI) comenz a trabajar en
las especificaciones para los procesadores de textos y el resultado fue el lenguaje
SGML, que se convirti en la Norma ISO 8879 en 1986.
En SGML, el marcado de un fragmento de texto se realiza a travs de las etiquetas o
marcas (tag). Estas marcas se diferencian del propio texto porque aparecen entre
parntesis angulares < > en caracteres ASCII que, por tanto, se convierten en signos
reservados para la sintaxis SGML.)
Una pareja de marcas o etiquetas encierran el texto al que afectan. Veamos un
ejemplo:
<p>En este texto, algunas palabras aparecen en <b>negrita</b>, otras en
<i>cursiva</i>
y otras en <b><i>negrita y cursiva</i><b>
que dara el siguiente resultado:
En este texto, algunas palabras aparecen en negrita, otras en cursiva y otras en
negrita y cursiva
Con la sintaxis del lenguaje SGML se pretende poder identificar la estructura lgica de
un documento a travs de estas marcas. Las etiquetas marcan los distintos elementos
de un texto, como por ejemplo, los encabezamientos o los prrafos, representando de
la misma forma los elementos de la misma categora. La presentacin final de estos
elementos viene determinada por las especificaciones de estilo especiales.
La funcin principal del SGML es describir los tipos de documentos de forma que
puedan determinarse mediante marcas las particularidades de cada tipo, en lo que se
refiere a su estructura y a su visualizacin en pantalla y con una sintaxis nica para
definir las distintas partes del texto. Esto se realiza definiendo todas las etiquetas
vlidas para cada tipo de documento, incluyendo tambin las reglas relativas a la
estructura lgica.
Con estas reglas se puede exigir, por ejemplo, que un texto que debe asignarse a un
tipo de documento definido se inicie generalmente con un encabezamiento, pero nunca
que acabe con un encabezamiento. Una definicin del tipo de documento o DTD

(Document Type Definition) se guarda en un archivo especial con una extensin .dtd.
Consta de una sucesin de comandos SGML enmarcados por los signos "<" y "", estos
comandos son, fundamentalmente, ELEMENT, ENTITY y ATTLIST.
El comando ELEMENT sirve para definir una etiqueta, ENTITY para indicar ciertos
elementos del texto en forma de sucesiones de caracteres ASCII y para utilizar dentro
del texto los caracteres reservados para la sintaxis de SGML, como los signos menor
que o mayor que. El comando ATTLIST permite establecer atributos
complementarios para determinados elementos concretos. Todos los atributos
pertenecientes a un elemento se resumen aqu en una sola lista en la que se
establecen los nombres de los atributos, as como los valores autorizados de cada
atributo.
Otro concepto importante dentro del SGML y del DTD es el de secciones marcadas.
Una seccin marcada se inicia con la secuencia de caracteres "<![", seguida de una o
ms claves que informan sobre la manera de interpretar la informacin que se
encuentra dentro de la seccin. A continuacin va el carcter "[" y detrs el contenido
en s de la seccin marcada, que puede ser todo lo extenso que se desee. Finalmente
se cierra la seccin mediante la secuencia de caracteres "]]". Las claves para la
especificacin de las secciones marcadas son INCLUDE, IGNORE, CDATA, RCDATA
o TEMP.
Otros comandos importantes del SGML son USEMAP y SHORTREF, que sirven para
establecer abreviaturas, el comando NOTATION, que sirve para fijar anotaciones en la
llamada hoja de estilo y el comando DOCTYPE que sirve para incluir un DTD o para
llamar a un archivo con la extensin .dtd que lo contiene.
Los lenguajes HTML y XML son, simplemente, dialectos y simplificaciones de SGML,
ya que ste es demasiado complejo. XML se diferencia en que es un lenguaje
extensible. El trmino extensibilidad (extensibility) se entiende, aqu, como la facultad
de flexibilidad para el cambio que posee un lenguaje, programa o aplicacin
determinada, para soportar nuevas funcionalidades cuando se produzcan cambios o se
incorporen nuevos elementos, sin que se alteren los elementos o bases existentes (o
alterando mnimamente los existentes).
HTML
HTML (Hipertext Markup Language) o lenguaje de marcas de hipertexto es el lenguaje
que permite la generacin de hipertextos en la World Wide Web. Este lenguaje deriva
de la existencia de otros lenguajes de marcados previos y, a su vez, ha tenido unos
desarrollos posteriores. HTML (HyperText Markup Language) es un lenguaje muy
sencillo que permite describir hipertexto. La descripcin se basa en especificar en el
texto la estructura lgica del contenido (ttulos, prrafos de texto normal,
enumeraciones, definiciones, citas, etc.) as como los diferentes efectos que se quieren
dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un

grfico determinado) y dejar que luego la presentacin final de dicho hipertexto se

realice por medio del navegador.
El lenguaje HTML est basado en la definicin de SGML. HTML naci en 1990, y su
entorno se basa en comandos concretos que han sido sometidos a constantes cambios
y a un crecimiento vertiginoso. La tarea de determinar la sintaxis de estos comandos
recae en primer lugar en el Consorcio World Wide Web (W3C). Su objetivo es la
creacin de documentos que puedan difundirse sin problemas por la red y que puedan
ser interpretados por los diferentes navegadores o "browsers". Se trata de un lenguaje
muy sencillo que permite estructurar textos y establecer enlaces con otros documentos
y que se ha convertido en la Norma ISO 15445:2000. Para todo lo relacionado con el
lenguaje HTML hay que consultar el sitio web del W3 Consortium
( (http://www.w3.org/TR/REC-html40/) donde se publican las Recomendaciones y
especificaciones sobre este lenguaje, as como las distintas versiones normalizadas.
Bsicamente, HTML utiliza los mismos elementos que el lenguaje SGML, las etiquetas,
instrucciones o marcas (tags, en ingls) que igualmente estn compuestas de cdigos
enmarcados por signos.
Cualquier documento HTML comienza con una etiqueta y termina con la misma
etiqueta precedida de una barra /. Dentro existen dos zonas bien identificadas, el
encabezamiento, que se identifica con la etiqueta y sirve para definir valores vlidos en
todo el documento y el cuerpo del documento, cuya etiqueta es y que muestra la
informacin del documento.
Dentro del encabezamiento, la etiqueta fundamental es la del ttulo o TITLE. En el
cuerpo del documento BODY se pueden establecer categoras utilizando diversos
tamaos de fuentes, estableciendo as la estructura bsica del documento.
Tambin podemos determinar el estilo y tipo de letra mediante determinados atributos,
como son los de final de lnea "br" y final de prrafo "p", los de presentacin de texto
preformateado, es decir, manteniendo espacios y retornos de carro (etiqueta "pre") o
los de negrita "b", cursiva "i" o centrar "center". Adems se pueden definir listas
numeradas y no numeradas, glosarios, marcar lneas horizontales para separar textos
o insertar comentarios, etc.
Pero, sin duda, los elementos ms caractersticos del lenguaje HTML son las etiquetas
<A> que marcan los anclajes o anclas utilizados para establecer un enlace con texto o
grficos de otros documentos. La directiva ancla debe incluir el parmetro href="URL"
para apuntar a la direccin o URL y el texto para pulsar. En cuanto a los grficos, se
pueden insertar mediante la directiva IMG con el parmetro src="URL". Pero no existe
compatibilidad entre los distintos formatos grficos, el ms extendido es el GIF, aunque
existen otros muchos. En cualquier caso, para dotar al documento de una mayor
accesibilidad, se puede aadir el parmetro alt="texto sustitutivo" por si el grfico no
puede ser visualizado. Tambin podemos hacer que un grfico se convierta en enlace.

Por ltimo, los caracteres reservados, como los signos < >, las vocales acentuadas o
la , pueden ser utilizados dentro del texto del documento mediante la sustitucin de
estos signos por una cadena de caracteres. Es cierto que la mayor parte de los
navegadores admiten la escritura directa de los signos en cuestin dentro del
documento, pero en otro tipo de programas, como en los de correo electrnico, pueden
surgir problemas, por lo que se precisa un pequeo programa de conversin.
Existe un lenguaje HTML dinmico llamado DHTML (Dinamic HyperText Markup
Language) que ha creado nuevas etiquetas para el lenguaje HTML con nuevas
opciones de estilo y programacin que permiten webs con animaciones y una mayor
interactividad. En realidad no se trata de un nuevo lenguaje, sino de nuevas
posibilidades que pueden integrarse en las pginas web construidas con HTML.
En conjuncin con HTML, se han desarrollado las llamadas Hojas de estilo (Style
Sheets). Una hoja de estilo es una coleccin de reglas que afecta a la apariencia de un
documento. Actualmente el tipo ms comn de hoja de estilo es la llamada Hoja de
estilo en cascada (Cascading Style Sheets CSS). Estas normas se refieren al modo
en que aparecer un documento en pantalla cuando el usuario utilice un navegador
grfico, controlando por ejemplo el color, el fondo, tipo de fuente, apariencia del borde,
mrgenes, alineacin, espacio entre caracteres, etc.
Las ltimas versiones de HTML como HTML 4.0 han desplazado muchas de las
funciones realizadas por las anteriores versiones hacia las hojas de estilo, reservando
el lenguaje HTML para cuestiones menos formales, relativas a la propia organizacin
del contenido.
XML
XML o eXtensible Markup Language, es un lenguaje de marcado derivado del lenguaje
SGML que proporciona una sintaxis superficial para documentos estructurados, pero
que no impone restricciones semnticas sobre el significado de los mismos. XML
permite suministrar, recibir y procesar informacin en la Web y puede interoperar tanto
con SGML como con HTML.
XML es un estndar desarrollado por el Consorcio World Wide Web (W3C). Se trata de
una versin reducida y especializada en la Web de la norma SGML. Su caracterizacin
como "extensible" se deriva de la no limitacin en el nmero de marcas o etiquetas,
pues permite crear todas aqullas que sean necesarias. Otra de sus caractersticas
principales es que permite enlaces multidireccionales (esto es, que apuntan a varios
documentos).
XML no es una nueva versin de HTML y, aunque ambos proceden de un mismo
metalenguaje, el SGML, el origen y enfoque que se ha seguido en ambos es muy
distinto.

HTML no es un lenguaje de programacin, es un lenguaje de especificacin de

contenidos para un tipo especfico de documentos SGML. Es decir, mediante HTML
podemos especificar, usando un conjunto de marcas o etiquetas, cmo va a
representarse la informacin en un navegador. El lenguaje HTML permite insertar
mens, tablas, imgenes o bases de datos en los documentos, pero no permite al
usuario que maneje estos elementos como mejor le convenga. Esa es la gran novedad
que aporta XML.
XML conserva todas las propiedades importantes de SGML. Es decir, XML es tambin
un metalenguaje, dado que con l podemos definir nuestro propio lenguaje de
presentacin y, a diferencia del HTML, que se centra en la representacin en la pantalla
de la informacin, XML se centra en la informacin en s misma. El objetivo del
desarrollo del XML es ser un estndar que sustituya a todo el conjunto de tecnologas
que permiten hoy acceder a informacin a travs del Web (applets, scripts,).
Las diferencias fundamentales de XML con respecto a HTML son:
No requiere DTD o Document Type Definition, ya que XML apunta a la
estructura de los datos, lo que ahorra tiempo y simplifica el software de
aplicacin.
XML no dispone de soporte para excepciones, por lo que cada etiqueta realiza
siempre la misma funcin
No existen modelos de contenido AND, los elementos deben nombrarse
siempre en un orden preestablecido
Tampoco dispone de las entidades internas Sdata, que en SGML permiten la
inclusin de informacin especfica, por ejemplo smbolos matemticos
Es un cdigo ms reducido y menos complejo que el SGML y, por lo tanto,
muchos ms fcil de usar
Posee independencia de los navegadores, porque en lugar de aadir las
etiquetas de presentacin al documento se remitir una hoja de estilo realizada
en XSL (Extensible Style Language)
XML posee una serie de especificaciones como XLL (que incluye XLink, XPointer), XSL
(que incluye XSLT, XPATH y FO) y XML Schema que permite restringir la estructura de
los documentos XML, DOM un analizador de ste, o los lenguajes Topics Map, XFML,
RDF y OWL que le dotan de una estructura semntica. XML tambin es una fuente
creciente para el desarrollo y puesta en marcha de otros lenguajes sectoriales y una
serie de herramientas y aplicaciones que lo complementan.

Mara Isabel Garca Arenas en su Curso XML establece un cuadro-resumen con

algunas de las diferencias significativas entre los distintos lenguajes mencionados:

HTML/DHTML

XML

Gramtica

Fija y no ampliable

Extensible

Extensible

Estructura

Monoltica

Jerrquica

Jerrquica

N de marcas

Fijas

Sin lmite

Sin lmite

Complejidad

Baja

Mediana

Alta

CSS o XSL

DSSSL

Diseo de pginas

Fijado por tags.

Etiquetas con atributos
CSS en DHTML

Simples enlaces

Poderosos
enlaces (XLL)

HyTime

No

Sin validacin

Pueden
validarse

Obligatorio
DTD

Enlaces

Exportabilidad
(formatos/aplicaciones)

Validacin

SGML

Bsquedas

Simple y a veces
resuelta por scripts o
CGI

Slo lo permiten los

atributos de la etiqueta
Indizacin/Catalogacin
<META>, e
de pginas web
implementaciones
como DC.

Potente
bsqueda.
Con
capacidad
para
personalizarla.

Son
posibles
potentes
bsquedas.

Una
Proyectos
descripcin
como TEI,
abierta y
DLI, etc.
personalizable
con el RDF.

Adaptacin de la Tabla de: Mara Isabel Garca Arenas. Curso XML 1 Edicin.
Curso XML
http://geneura.ugr.es/~maribel/xml/introduccion/index.shtml
Esta misma autora aporta el siguiente diagrama que permite aclarar las relaciones
entre los distintos lenguajes citados anteriormente:

Esquema de relaciones entre lenguajes. Fuente: Mara Isabel Garca Arenas.

Curso XML 1 Edicin. Curso XML
http://geneura.ugr.es/~maribel/xml/introduccion/index.shtml
Pero existen otros muchos lenguajes que abarcan diferentes aspectos. Unos se
refieren a aspectos semnticos (RDF, Topic Maps, DAML+OIL, OWL, XFML, etc. ) otros
son vocabularios especficos para tratar diferentes aspectos dentro de XML
(VoiceXML), y otros tienen que ver con la posibilidad de aadir objetos no textuales,
como grficos u objetos en 3 dimensiones (VRML) o diagramas orientados a objetos
(UML).
Veamos con detalle algunos de ellos.
LENGUAJES SEMNTICOS:
Un gran bloque en creciente y notable desarrollo corresponde a los lenguajes
orientados a la semntica. Entre los que cabe destacar el lenguaje RDF (Resource
Description Framework); la especificacin Topic Maps, un modelo abstracto que usa la
gramtica del lenguaje XML para el intercambio de mapas temticos basados en la
Web; el lenguaje XFML que permite definir, distribuir e intercambiar metadatos en
forma de taxonomas o clasificaciones facetadas, o el potente lenguaje OWL Web
Ontology Language. (http://www.w3.org/TR/owl-ref/)
RDF y OWL se han convertido en estndares semnticos de la Web para proveer un
marco de trabajo que asegure la gestin y la integracin de iniciativas para compartir y
reutilizar los datos sobre la Web. Estos formatos estndar para datos comparten

aplicaciones para que los diferentes tipos de usuarios pueden compartir la misma
informacin, aunque no compartan el mismo software.
RDF
El Resource Description Framework (RDF) es un lenguaje para representar informacin
sobre los recursos de la World Wide Web y las relaciones entre ellos. Est
particularmente diseado para representar metadatos tales como ttulo, autor, fechas
de las pginas web, copyright e informacin sobre autora y licencias de los
documentos, o para disponer de los listados o catlogos de algunos recursos
compartidos. Sin embargo, al generalizarse el concepto de recurso web, RDF puede
usarse tambin para representar informacin sobre cosas que son identificadas
(identified) en la Web, cuando no pueden ser directamente recuperadas en ella. Esto
incluye informacin sobre productos facilitados por las tiendas online (informacin
sobre especificaciones, precios, etc.) o la descripcin de las preferencias de los
usuarios de la Web para distribuir la informacin.
El World Wide Consortium desarrolla este lenguaje en 6 bloques o especificaciones
distintas:

RDF Primer. http://www.w3.org/TR/rdf-primer/

Resource Description Framework (RDF): Concepts and Abstract Syntax.

http://www.w3.org/TR/rdf-concepts/

RDF/XML Syntax Specification (Revised). http://www.w3.org/TR/rdf-syntaxgrammar/

RDF Semantics. http://www.w3.org/TR/rdf-mt/

RDF Vocabulary Description Language 1.0: RDF Schema.

http://www.w3.org/TR/rdf-schema/

RDF Test Cases. http://www.w3.org/TR/rdf-testcases/

El RDF (Resource Description Framework) es un estndar para descripciones simples.

Mientras que el lenguaje XML sirve para la sintaxis, RDF vale para la semntica,
porque ofrece de manera clara una serie de reglas para proveer informacin
descriptiva. Por su parte, RDFS (RDF Schema) ofrece una forma de que estas
descripciones puedan combinarse dentro de vocabularios simples. RDF integra una
gran variedad de aplicaciones, como pueden ser catlogos de bibliotecas, directorios
web, colecciones particulares de msica, fotos, eventos, etc. Se puede usar XML como
una sintaxis de intercambio. Las recomendaciones RDF ofrecen una estructura muy
potente para soportar el intercambio de conocimiento en la Web. RDF ha supuesto uno
de los mayores avances en la Web.

El RDFCore Working Group ha adoptado las recomendaciones RDF que, junto con
OWL, podr hacer realidad la Web Semntica.
Topic Maps
La especificacin XML Topic Maps (XTM) 1.0. http://www.topicmaps.org/xtm/1.0/ provee
un modelo y una gramtica para representar la estructura de los recursos de
informacin usados para definir tpicos (topics), y las asociaciones (relaciones) entre
los tpicos. Nombres, recursos y las relaciones entre ellos se establecen mediante una
serie de caractersticas de contenidos abstractos, que son llamados "topics". A su vez,
los topics se caracterizan por una serie de elementos como los scopes, esto es, los
mbitos, campos o contextos limitados en los cuales se consideran. Cuando uno o ms
documentos interrelacionados emplean esta gramtica, constituyen lo que se denomina
un mapa temtico o "topic map".
Un Topic Map (TM) tiene como fin normalizar los elementos y la notacin utilizada para
estructurar la informacin mediante la construccin de una red de enlaces semnticos
que relacionen diferentes recursos informativos.
Los Topic Maps son, pues, un estndar que se est implantando con gran xito en la
World Wide Web y que posibilita la navegacin entre conceptos y la inferencia, lo que
constituye un paso adelante en lo que se ha denominado la Web semntica. Adems,
poco a poco aumenta la la utilizacin de los Topic Maps en la Web como una forma de
representacin grfica que permite el acceso y navegacin por los recursos de un
mismo campo del conocimiento mediante los llamados mapas temticos que no son
sino un mapa conceptual aplicado a la World Wide Web.
La implementacin de los Mapas Temticos (TM) se dise para el lenguaje SGML, sin
embargo, la aparicin y auge del lenguaje XML junto con la universalizacin de la
utilizacin de los URIs para la identificacin de las referencias externas, ha conducido
al desarrollo del estndar "Topic Maps para XML" y las URIs, lo que se ha denominado
XTM (XML Topic Maps). En cualquier caso, actualmente se pueden encontrar ejemplos
de ambos lenguajes en la Web y, adems, la ISO ha incluido en la segunda edicin de
la norma 13250, junto a la antigua sintaxis para HyTime, la nueva sintaxis XML:
(http://www.y12.doe.gov/sgml/sc34/document/0322_files/iso13250-2nd-ed-v2.pdf).
XFML
XFML o eXchangeable Faceted Metadata Language. http://www.xfml.org/ Se trata de
un vocabulario para definir definir, distribuir e intercambiar metadatos en forma de
taxonomas o clasificaciones facetadas.
La XFML Specification se encuentra en: http://www.xfml.org/spec/ y consta de 2 partes:

XFML Core: es la versin actual XFML 1.0. Se trata de un formato abierto para
publicar y compartir metadatos facetados de forma jerrquica y productos para
la indizacin. http://www.xfml.org/spec/1.0.html

XFML 2.0 En el futuro, ser publicado XFML 2.0 que posiblemente soportar
vocabularios controlados y caractersticas de tesauros, namespaces y similares.

DAML+OIL
El uso de ontologas es una manera muy poderosa para describir objetos y sus
relaciones con otros objetos. As pues, el lenguaje DAML del programa DARPA Agent
Markup Language (DAML) se desarroll como una extensin del lenguaje XML y del
lenguaje Resource Description Framework (RDF) para establecer ontologas sobre la
Web.
Similar al lenguaje DAML es el lenguaje OIL u Ontology Inference Layer OIL. Se trata
de una propuesta para una representacin basada en la Web y las leyes de inferencia
para ontologas, que combina el uso de primitivas de modelado desde lenguajes
basados en frames (clases) con la semntica formal y los servicios de razonamiento
provistos por descripciones lgicas. OIL es compatible con RDF Schema (RDFS) e
incluye una semntica precisa para describir el significado de trminos y tambin para
describir informacin implicada.
Estos dos lenguajes se fusionaron en uno y la ltima revisin del
lenguaje (DAML+OIL) http://www.daml.org/2001/03/daml+oil-index
ofrece ya un rico conjunto de elementos con los cuales se pueden crear
ontologas y marcar la informacin para que sea legible y comprensible por mquina.
OWL
El OWL (Web Ontology Language) o Lenguaje de Ontologas para la Web, se ha
convertido en recomendacin del W3C el 10 de febrero de 2004
(http://www.w3.org/TR/owl-ref/).
El reciente desarrollo de numerosas ontologas y la puesta en prctica de la Web
Semntica, se ha convertido en el objetivo de este lenguaje. Las ontologas son
metadatos ofrecidos por un vocabulario controlado de trminos definidos de forma
explcita y semnticamente procesables por mquina. Para definir de forma compartida
y comn los dominios tericos, las ontologas ayudan a las personas y a las mquinas
a comunicarse de forma ms efectiva. Esto es algo crucial para el acceso al contenido,
la interoperabilidad y la comunicacin dentro de la World Wide Web. Ejemplos del uso
de ontologas que estn basadas en el acceso al contenido y la interoperabilidad ha
sido, por ejemplo, el proyecto norteamericano SHOE o Simple HTML Ontology
Extensions (con el que HTML ha sido extendido con una ontologa basada en cdigos
de etiquetas semnticos) o el proyecto europeo IST-project ON-TO-KNOWLEDGE (en
el que usan ontologas para facilitar el acceso a intranets). El lenguaje SHOE fue

abandonado poco a poco a medida que se desarrollaron DAML y OIL, conjugndose en

el lenguaje DAML+OIL y hoy, sin duda alguna, la especificacin del W3C del Web
Ontology Languaje OWL se est convirtiendo en el lenguaje de ontologas ms
utilizado.
La Web Semntica ofrecer un desarrollo crucial para las aplicaciones de la Web ya
que permitir que los usuarios realicen bsquedas ms sofisticadas a travs de
mayores capacidades de los buscadores, robots y agentes inteligentes.
La importancia de las ontologas en la Web Semntica ha impulsado el desarrollado de
"schemas" para los diferentes lenguajes. Por ejemplo, XML ha sido extendido hasta dar
XML-Schema (XMLS), mientras que RDF se ha extendido hacia RDF-Schema (RDFS).
Sin embargo, los primitivos lenguajes que proveen estos estndares son muy bsicos
cuando los comparamos con los nuevos desarrollos de los lenguajes de ontologas.
Otros lenguajes:
Pero existen otros lenguajes con diferentes aplicaciones, entre los que cabe destacar el
antiguo Virtual Reality Modeling Language (para modelado de realidad virtual) del que
tambin se habla en esta tesis al tratar, dentro de la morfologa de la imagen, las
imgenes tridimensionales; o lenguajes tan completos como el lenguaje de modelado
de sistemas UML, y toda la gama de lenguajes sectoriales nacidos al amparo del
potente y verstil XML para crear vocabularios estandarizados especficos, tales como
SMIL o Synchronized Multimedia Integration Language (para tratamiento de la
documentacin multimedia), SSML o Speech Synthesis Markup Language (para
acceso a la Web por medio del habla), VoiceXML oVoice Extensible Markup Language
para aplicaciones de voz interactivas, SRGS o Speech Recognition Grammar
Specification que es una Gramtica de Reconocimiento de habla, CCXML o Voice
Browser Control Call, esto es, Control de Llamadas para Navegadores de Voz, MathML
o Mathematical Markup Language (para describir la estructura y el contenido de
notaciones matemticas), SVG o Scalable Vector Graphics (para la descripcin de
grficos en dos dimensiones), XForms para formularios, VML o Vector Markup
Language (para describir cmo debe disponerse y editarse la informacin vectorial),
WML o Wireless Modeling Language (para telfonos mviles), etc.
VRML
El VRML o Virtual Reality Modeling Language, permite construir objetos en tres
dimensiones. Dicho lenguaje tiene una especificacin del Web 3D Consortium:
http://www.vrml.org/VRML1.0/vrml10c.html
Gracias a este lenguaje, se pueden construir objetos y mundos tridimensionales. Esto
ha dado origen a comunidades virtuales denominadas MUDs o Multi-user dungeons
(mazmorras o dominios multi-usuario) y sus variantes posteriores como MOOs (o
Multi-user object oriented), que se trata de un MUD orientado a objetos donde los
usuarios interactan en tiempo real y forman una comunidad que slo existe online.

Sintaxis
La sintaxis del HTML
Para fomentar una slida compresin del HTML, miraremos la estructura del lenguaje propiamente dicho.
El funcionamiento de la sintaxis del HTML es anlogo a la sintaxis de la gramtica espaola, pero, por
supuesto, mucho ms sencillo.
El HTML es en realidad un lenguaje muy lgico. Ciertamente, hay excepciones a las reglas, y hay
modificaciones o interpretaciones de algunas de stas. De todas formas, una vez que asimiles la
estructura bsica, empezars a notar que el HTML es simplemente un conjunto de piezas lgicas que
hacen de l un lenguaje muy cmodo de usar.
Por supuesto, est el tema que se coment en el captulo "Comprendiendo el HTML", de que el HTML es
un lenguaje que evoluciona. Mientras que la evolucin es un estado natural del HTML, estos cambios
normalmente no afectan a las reglas bsicas. Mientras que varios elementos de este lenguaje se hacen
obsoletos y otros nuevos son aadidos, la sintaxis, o la estructura correcta, raramente sufren cambios.
Para comprender el concepto de sintaxis, piensa en una frase. Tu tienes un sujeto y un verbo. Los
adjetivos y los adverbios se aaden para aportar cualidades y comportamiento, haciendo la frase ms
comprensiva.
El HTML es, en el fondo, no muy diferente a una simple frase. De hecho, los componentes del HTML
siguen el mismo concepto de sujeto, verbo y adjetivos/adverbios.

Los componentes del HTML

El propsito de este captulo es introducir a los tres componentes fundamentales del HTML y un apartado
independiente sobre "caracteres especiales". Otras partes del estndar HTML 4.0, como las joras de
estilo, usan otros mtodos sintcticos, pero sern explicados ms tarde. Por ahora, vamos a centrarnos
en los pilares de los componentes del HTML y extraeremos una slida nocin de ellos.
El pilar central de todo HTML es la etiqueta (tcnicamente se refiere como un elemento). Una etiqueta
(tag en ingls) es el identificador del HTML; dice "haz esto". Pero las etiquetas se hacen ms potentes
con modificaciones, y esa modificacin empieza con un atributo (tambin conocido como un argumento).
Los atributos son como los verbos en cuando que proporcionan actividad, con ellos, la etiqueta HTML
puede de repente adquirir vida y hacer algo en cierta manera.
Los atributos deben ser modificados con valores. Un valor define la manera en que un atributo actuar.
Piensa en un arjetivo o un adverbio modificando un sujeto o una accin, respectivamente. Como corre
Juan? Juan corre rpido. Los valores aaden conceptos como "rpido", diciendo a la etiqueta, y al
atributo, no slo el qu y el como, sino tambin el grado especfico.

En sentido figurado, la frase "Juan corre rpido" equivale a la estructura sintctica bsica del HTML.
"Juan" es el equivalente a una etiqueta HTML, "corre" se parece mucho a un atributo HTML y "rpido" es
un valor asignado al atributo que describe la manera en la cual actuar la etiqueta.

Etiquetas
Son especficas

EN CONSTRUCCIN DESDE AQU

Lo primero que hay que saber es el funcionamiento de los documentos HTML, que significa Hyper Text
Markup Language. Son lneas de texto modificadas con unas marcas. Estas marcas se llaman
etiquetas o tags, y es lo que se aprende en ste y cualquier curso de HTML.
Las etiquetas que encierran el texto son la de apertura <xxx> y la de cierre </xxx>. Fjate cmo no hay
espacios entre los signos de mayor y menor, y el lugar y la orientacin de la barra diagonal en la etiqueta
de cierre. Hay etiquetas que requieren la de cierre (como <A> y </A>, otras que pueden tener etiqueta de
cierre o no (como <P>, que no siempre requiere </P>) y otras que no llevan nunca etiqueta de cierre
(como <IMG>, la cual jams lleva </IMG>). Para saber cundo se quiere etiqueta de cierre, necesitars
conocer todas y cada una de ellas, lo irs aprendiendo con la experiencia.

ATRIBUTOS
Los atributos modifican las acciones de las tarjetas. Muchas etiquetas pueden permanecer solas,
mientras que otras neceistan un atributo para darles funcionalidad. Por ejemplo, <HTML> nunca lleva
atributos, mientras que <body> puede llevarlos o no (por ejemplo, <body BGCOLOR...>).
Ten en cuenta que los atributos siempre van en la etiqueta de apertura. nunca en la de cierre. Es absurdo
poner algo del estilo de </body BGCOLOR...>.

VALORES
Definen el atributo al que se lo hemos aplicado. El valor puede ser una palabra (por ejemplo <P
ALIGN="center">...</P>) o un nmero de pixels o porcentaje (como en <TABLE WIDTH="40%"
HEIGHT="500">...</TABLE>). A veces un nmero no define un nmero de pixels concreto, por ejemplo,
al cambiar el tamao de las fuentes (<FONT SIZE="5">...</FONT>) el nmero es simplemente
orientativo, no tiene ninguna relacin con el tamao final. Y el nmero a veces puede ser en formato

hexadecimal (16 nmeros, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F...), como en <FONT

COLOR="#FF0000">...</FONT>. Podrs conocer el funcionamiento de estos nmeros ms adelante,
cuando expliquemos los atributos que los requieren.

CARACTERES ESPECIALES

Caracteres especiales. Hay caracteres que no se pueden escribir tal cual en cdigo HTML, unos por
coincidir con las etiquetas (como <, > y &), otros por no ser compatibles con los navegadores (las letras
con tilde, las ees), etc...
En general se pueden obtener todos los caracteres con la etiqueta &#xxx;, poniendo en xxx el nmero
de carcter correspondiente.
Estos y otros cdigos son:

Cracter

En nmeros

En letras

Carcter

En nmeros

En letras

&#33;

--

"

&#34;

--

&#35;

--

&#36;

--

&#37;

--

&

&#38;

--

'

&#39;

--

&#40;

--

&#41;

--

&#42;

--

&#43;

--

&#44;

--

&#45;

--

&#46;

--

&#47;

--

&#58;

--

&#59;

--

<

&#60;

--

&#61;

--

>

&#62;

--

&#63;

--

&#64;

--

&#91;

--

&#92;

--

&#93;

--

&#94;

--

&#95;

--

&#96;

--

&#123;

--

&#124;

--

&#125;

--

&#126;

--

&#160;

nbsp

&#161;

iexcl

&#162;

cent

&#163;

pound

&#164;

curren

&#165;

yen

&#166;

brvbar

&#167;

sect

&#168;

uml

&#169;

copy

&#170;

ordf

&#171;

laquo

&#172;

not

&#173;

shy

&#174;

reg

&#175;

macr

&#176;

deg

&#177;

plusmn

&#178;

sup2

&#179;

sup3

&#180;

acute

&#181;

micro

&#182;

para

&#183;

middot

&#184;

cedil

&#185;

sup1

&#186;

ordm

&#187;

raquo

&#188;

frac14

&#189;

frac12

&#190;

frac34

&#191;

iquest

&#192;

Agrave

&#193;

Aacute

&#194;

Acirc

&#195;

Atilde

&#196;

Auml

&#197;

Aring

&#198;

AElig

&#199;

Ccedil

&#200;

Egrave

&#201;

Eacute

&#202;

Ecirc

&#203;

Euml

&#204;

Igrave

&#205;

Iacute

&#206;

Icirc

&#207;

Iuml

&#208;

ETH

&#209;

Ntilde

&#210;

Ograve

&#211;

Oacute

&#212;

Ocirc

&#213;

Otilde

&#214;

Ouml

&#215;

times

&#216;

Oslash

&#217;

Ugrave

&#218;

Uacute

&#219;

Ucirc

&#220;

Uuml

&#221;

Yacute

&#222;

THORN

&#223;

szlig

&#224;

agrave

&#225;

aacute

&#226;

acirc

&#227;

atilde

&#228;

auml

&#229;

aring

&#230;

aelig

&#231;

ccedil

&#232;

egrave

&#233;

eacute

&#234;

ecirc

&#235;

euml

&#236;

igrave

&#237;

iacute

&#238;

icirc

&#239;

iuml

&#240;

eth

&#241;

ntilde

&#242;

ograve

&#243;

oacute

&#244;

ocirc

&#245;

otilde

&#246;

ouml

&#247;

divide

&#248;

oslash

&#249;

ugrave

&#250;

uacute

&#251;

ucirc

&#252;

uuml

&#253;

yacute

&#254;

thorn

&#255;

yuml

MAYSCULAS, ESPACIOS Y COMILLAS

La forma correcta de poner una etiqueta es la siguiente:
<IMG SRC="hola.gif">
La utilizacin de maysculas y minsculas es indiferente en la etiqueta y el atributo (no as en el valor, no
siempre puede cambiarse indistintamente). Recomendamos ponerlo como en el ejemplo, etiqueta y
atributo en maysculas, y el valor en minscula.
Fjate en las comillas. Se recomienda ponerlas siempre, aunque si el valor contiene slo un simple
nmero o una simple palabra no suele ser necesario. Por ejemplo, width=200 y width="200" dara el
mismo resultado, pero se recomienda poner siempre las comillas (ALT=Aqu pone hola est mal, hay
que poner ALT="Aqu pone hola").

Terminaremos por los espacios. < IMG SRC = " hola.gif " > o <IMGSRC="hola.gif"> es totalmente
incorrecto. El nico espacio debe estar situado entre etiqueta/atributo y
atributo_con_valor/atributo_con_valor. Por ejemplo:
<IMG SRC="hola.gif" ALT="hola">
Si queremos poner espacios en el texto normal y corriente, deberemos usar el carcter especial &nbsp;.
Por ejemplo:
Esta es mi pgina WEB
y
Esta es mi pgina WEB,
se veran de la siguiente forma:
sta es mi pgina WEB
Si queremos poner lo segundo, con cuatro espacios en blanco entre medio habr que poner:
sta&nbsp;&nbsp;&nbsp; es mi pgina WEB
Y, para finalizar, este es un texto <B>en negrita</B>, y este es un texto<B> en negrita</B> dara un
resultado idntico, aunque se recomienda usar lo primero.

SIMETRA
Poner las etiquetas en el orden correcto nos permitir una edicin del documento ms rpida y efectiva
Por ejemplo: <I><B>Hola</B></I> y <I><B>Hola</B></I> dara el mismo resultado, pero es ms
recomendable usar lo segundo: puedes apreciar una simetra horizontal.
<I><B>Hola</B></I>
|
|
|
|
|----------|
|
|---------------------|

LAS DOS PARTES DE UN DOCUMENTO HTML

Los documentos HTML tienen dos partes:

1. La parte contenida entre las etiquetas <HEAD> y </HEAD> o cabecera, que es donde se
introduce el ttulo de la pgina (dentro de <TITLE> y </TITLE>, lo que se mostrar en la barra de
ttulo de la ventana del explorador), las etiquetas <META> (que nos servirn principalmente para
dar de alta nuestra pgina en los buscadores de una forma eficiente), los Scripts (para dar un
funcionamiento dinmico a la pgina) y las Hojas de estilo (un mtodo avanzado de
formateado).

2. La parte contenida entre las etiquetas <body> y </body> o cuerpo, que es donde se introducen
los dems elementos que se ven en pantalla, como texto, imgenes, tablas, enlaces,
formularios..., as como el color del fondo o de los diferentes tipos de texto.
En resumen, la estructura es la siguiente:
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
Aqu van otras etiquetas como las META, scripts y estilos
</HEAD>
<body>
Aqu va lo que se mostrar en pantalla del documento HTML
</body>
</HTML>

Haciendo documentos HTML

ETIQUETAS DE LA ESTRUCTURA BSICA

Las etiquetas de la estructura bsica. Como vimos en el tema 2, el documento HTML se

compone de unas etiquetas esenciales. Lo primero a escribir es <HTML>, la etiqueta de
inicio de los documentos HTML. Tras eso se introduce <HEAD> para abrir la cabecera. A
continuacin hay que poner un ttulo a la pgina, el cual estar situado entre las etiquetas
<TITLE> y </TITLE>. Tras eso cerramos la cabecera con la etiqueta </HEAD>. Y lo que
queremos que se vea en pantalla ir entre <body> y </body>. Y por fin, cerramos con
</HTML>. Hasta ahora hemos escrito:
<HTML>
<HEAD>
<TITLE>Mi primera pgina</TITLE>
</HEAD>
<body>
</body>
</HTML>

A continuacin vamos a ver todas las etiquetas que sirven para colocar y organizar el texto
que se muestra en pantalla de nuestra pgina WEB. Todo ello ir colocado entre <body> y
</body>.

Selectores
Selectores bsicos
Selector universal

Se utiliza para seleccionar todos los elementos de la pgina. El siguiente ejemplo elimina el
margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte
de la declaracin de la regla CSS):
* {
margin: 0;
padding: 0;
}

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

habitualmente, ya que es difcil que un mismo estilo se pueda aplicar a todos los elementos de
una pgina.
No obstante, s que se suele combinar con otros selectores y adems, forma parte de algunos
hacks muy utilizados, como se ver ms adelante.
Selector de tipo o etiqueta

Selecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del
selector. El siguiente ejemplo selecciona todos los prrafos de la pgina:
p {
...
}

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin
los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.
El siguiente ejemplo aplica diferentes estilos a los titulares y a los prrafos de una pgina HTML:
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los
selectores. En el siguiente ejemplo, los ttulos de seccin h1, h2 y h3 comparten los mismos
estilos:
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector
mltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es
que la siguiente regla CSS es equivalente a las tres reglas anteriores:
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios
elementos en una nica regla CSS y posteriormente definir las propiedades especficas de esos
mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de
los ttulos de seccin (color y tipo de letra) y a continuacin, establece el tamao de letra de cada
uno de ellos:
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es

descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro
elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la pgina que se
encuentren dentro de un elemento <p>:
p span { color: red; }

Si el cdigo HTML de la pgina es el siguiente:

<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selector p span selecciona tanto texto1 como texto2.

El motivo es que en el selector

descendente, un elemento no tiene que ser descendiente directo del otro. La nica condicin es
que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el
que se encuentre.
Al resto de elementos <span> de la pgina que no estn dentro de un elemento <p>, no se les
aplica la regla CSS anterior.
Los selectores descendentes permiten aumentar la precisin del selector de tipo o etiqueta. As,
utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo
tipo. El siguiente ejemplo ampla el anterior y muestra de color azul todo el texto de los <span>
contenidos dentro de un <h1>:
p span { color: red; }
h1 span { color: blue; }

Con las reglas CSS anteriores:

Los elementos <span> que se encuentran dentro de un elemento <p> se

muestran de color rojo.

Los elementos <span> que se encuentran dentro de un elemento <h1> se

muestran de color azul.

El resto de elementos <span> de la pgina, se muestran con el color por

defecto aplicado por el navegador.

La sintaxis formal del selector descendente se muestra a continuacin:

selector1 selector2 selector3 ... selectorN

Los selectores descendentes siempre estn formados por dos o ms selectores separados entre s
por espacios en blanco. El ltimo selector indica el elemento sobre el que se aplican los estilos y
todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.
En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:
p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro
de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se
encuentren dentro de elementos de tipo <p>.
No debe confundirse el selector descendente con la combinacin de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }

Se puede restringir el alcance del selector descendente combinndolo con el selector universal.
El siguiente ejemplo, muestra los dos enlaces de color rojo:
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
La razn es que el selector p * a se interpreta como

todos los elementos de tipo <a> que se

encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de
tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se
cumple la condicin del selector p * a.

Selector de clase

Si se considera el siguiente cdigo HTML de ejemplo:

<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>

Cmo se pueden aplicar estilos CSS slo al primer prrafo? El selector universal (*) no se
puede utilizar porque selecciona todos los elementos de la pgina. El selector de tipo o etiqueta
(p) tampoco se puede utilizar porque seleccionara todos los prrafos. Por ltimo, el selector
descendente (body p) tampoco se puede utilizar porque todos los prrafos se encuentran en el
mismo sitio.
Una de las soluciones ms sencillas para aplicar estilos a un solo elemento de la pgina consiste
en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS
que se le debe aplicar:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
A continuacin, se crea en el archivo CSS una nueva regla llamada destacado

con todos los

estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los
otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como
muestra el siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta

como "cualquier elemento de la pgina cuyo atributo

class sea igual a destacado", por lo que solamente el primer prrafo cumple esa condicin.
Este tipo de selectores se llaman selectores de clase y son los ms utilizados junto con los
selectores de ID que se vern a continuacin. La principal caracterstica de este selector es que
en una misma pgina HTML varios elementos diferentes pueden utilizar el mismo valor en el
atributo class:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>

Los selectores de clase son imprescindibles para disear pginas web complejas, ya que permiten
disponer de una precisin total al seleccionar los elementos. Adems, estos selectores permiten
reutilizar los mismos estilos para varios elementos diferentes.
A continuacin se muestra otro ejemplo de selectores de clase:

.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
<span class="error">...</span>
<div class="aviso">...</div>
El elemento <span> tiene un atributo class="error",

por lo que se le aplican las reglas CSS

indicadas por el selector .error. Por su parte, el elemento <div> tiene un atributo
class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso.
En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el
ejemplo anterior:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
Cmo es posible aplicar estilos solamente al prrafo cuyo atributo class sea igual a
destacado? Combinando

el selector de tipo y el selector de clase, se obtiene un selector mucho

ms especfico:
p.destacado { color: red }
El selector p.destacado se interpreta

como "aquellos elementos de tipo <p> que dispongan de

un atributo class con valor destacado". De la misma forma, el selector a.destacado
solamente selecciona los enlaces cuyo atributo class sea igual a destacado.
De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que
todos los diseadores obvian el smbolo * al escribir un selector de clase normal.
No debe confundirse el selector de clase con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estn dentro
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con
atributo class="aviso" de la pgina */

p, .aviso { ... }

Por ltimo, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La
sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en
blanco. En el siguiente ejemplo:
<p class="especial destacado error">Prrafo de texto...</p>
Al prrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado

y
.error, por lo que en el siguiente ejemplo, el texto del prrafo se vera de color rojo, en negrita
y con un tamao de letra de 15 pxel:
.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
<p class="especial destacado error">Prrafo de texto...</p>
Si un elemento dispone de un atributo class con ms de un valor, es posible

utilizar un selector

ms avanzado:
.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
<p class="especial destacado error">Prrafo de texto...</p>

En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que se ha
utilizado un selector de clase mltiple .error.destacado, que se interpreta como "aquellos
elementos de la pgina que dispongan de un atributo class con al menos los valores error y
destacado".

Selectores de ID

En ocasiones, es necesario aplicar estilos CSS a un nico elemento de la pgina. Aunque puede
utilizarse un selector de clase para aplicar estilos a un nico elemento, existe otro selector ms
eficiente en este caso.
El selector de ID permite seleccionar un elemento de la pgina a travs del valor de su atributo
id. Este tipo de selectores slo seleccionan un elemento de la pgina porque el valor del atributo
id no se puede repetir en dos elementos diferentes de una misma pgina.

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se
utiliza el smbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla
CSS:
#destacado { color: red; }
<p>Primer prrafo</p>
<p id="destacado">Segundo prrafo</p>
<p>Tercer prrafo</p>
En el ejemplo anterior, el selector #destacado

solamente selecciona el segundo prrafo (cuyo

atributo id es igual a destacado).

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y
no con CSS. Como se sabe, en una misma pgina, el valor del atributo id debe ser nico, de
forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el
atributo class no es obligatorio que sea nico, de forma que muchos elementos HTML
diferentes pueden compartir el mismo valor para su atributo class.
De esta forma, la recomendacin general es la de utilizar el selector de ID cuando se quiere
aplicar un estilo a un solo elemento especfico de la pgina y utilizar el selector de clase cuando
se quiere aplicar un estilo a varios elementos diferentes de la pgina HTML.
Al igual que los selectores de clase, en este caso tambin se puede restringir el alcance del
selector mediante la combinacin con otros selectores. El siguiente ejemplo aplica la regla CSS
solamente al elemento de tipo <p> que tenga un atributo id igual al indicado:
p#aviso { color: blue; }

A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En realidad, un

selector de tipo p#aviso slo tiene sentido cuando el archivo CSS se aplica sobre muchas
pginas HTML diferentes.
En este caso, algunas pginas pueden disponer de elementos con un atributo id igual a aviso y
que no sean prrafos, por lo que la regla anterior no se aplica sobre esos elementos.
No debe confundirse el selector de ID con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }
/* Todos los elementos con atributo id="aviso" que estn dentro
de cualquier elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con
atributo id="aviso" de la pgina */
p, #aviso { ... }

Combinacin de selectores bsicos

CSS permite la combinacin de uno o ms tipos de selectores para restringir el alcance de las
reglas CSS. A continuacin se muestran algunos ejemplos habituales de combinacin de
selectores.
.aviso .especial { ... }

El anterior selector solamente selecciona aquellos elementos con un class="especial" que se

encuentren dentro de cualquier elemento con un class="aviso".
Si se modifica el anterior selector:
div.aviso span.especial { ... }

Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un atributo
class="especial" que estn dentro de cualquier elemento de tipo <div> que tenga un atributo
class="aviso".
La combinacin de selectores puede llegar a ser todo lo compleja que sea necesario:
ul#menuPrincipal li.destacado a#inicio { ... }

El anterior selector hace referencia al enlace con un atributo id igual a inicio que se encuentra
dentro de un elemento de tipo <li> con un atributo class igual a destacado, que forma parte de
una lista <ul> con un atributo id igual a menuPrincipal.

Tipos de medios

Introduccin a los tipos de medios

Uno de los rasgos ms importantes de las hojas de estilo es que especifican cmo debe ser
presentado un documento en diferentes medios: en la pantalla, en papel, con un sintetizador de
voz, con un dispositivo braille, etc.
Ciertas propiedades CSS son diseadas slo para ciertos medios (ej., la propiedad 'cue-before'
para las aplicaciones del usuario auditivas). En ocasiones, sin embargo, las hojas de estilo para
diferentes tipos de medios pueden compartir una propiedad, pero requieren de valores diferentes
para esa propiedad. Por ejemplo, la propiedad 'font-size' es til para la pantalla y los medios
impresos. Sin embargo, los dos medios son lo suficientemente diferentes como para requerir
diferentes valores para la propiedad comn; un documento necesitar tpicamente una fuente
mayor en una pantalla de computadora que sobre papel. La experiencia tambin demuestra que
las fuentes sans-serif son ms fciles de leer en pantalla, mientras que las fuentes con serif son
ms fciles de leer sobre papel. Por estas razones, es necesario expresar que una hoja de estilo
--o una seccin de una hoja de estilo-- se aplica a ciertos tipos de medios.

Especificacin de hojas de estilos dependientes de los medios

Actualmente hay dos maneras de especificar la dependencia de las hojas de estilos:

Especificando el medio de destino desde una hoja de estilo con las reglas-arroba @media
o @import.

@import url("loudvoice.css") aural;

@media print {
/* la hoja de estilo para impresin va aqu */
}

Especificando el medio de destino dentro del lenguaje del documento. Por ejemplo, en
HTML 4.0 ([HTML40]), el atributo "media" en el elemento LINK especifica el medio de
destino de una hoja de estilo externa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>
<HEAD>
<TITLE>Vnculo a un medio</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">

</HEAD>
<BODY>
<P>El cuerpo...
</BODY>
</HTML>

La regla @import es definida en el captulo sobre cascada.

La regla @media
Una regla @media especifica los tipos de medios de destino (separados por comas) de un juego
de reglas (delimitadas por llaves). La construccin @media le permite a la hoja de estilo reglas
para distintos medios en la misma hoja de estilo:
@media
BODY
}
@media
BODY
}
@media
BODY
}

print {
{ font-size: 10pt }
screen {
{ font-size: 12pt }
screen, print {
{ line-height: 1.2 }

Tipos de medios reconocidos

Un tipo de medio de CSS designa un juego de propiedades CSS. Una aplicacin del usuario que
aspira a dar soporte a un tipo de medio por nombre debe implementar todas las propiedades que
se aplican a ese tipo de medio.
Los nombres elegidos para los tipos de medios de CSS reflejan los dispositivos de destino para
los cuales las propiedades relevantes tienen sentido. En el siguiente listado de tipos de medios de
CSS, las descripciones entre parntesis no son normativas. Solamente brindan un sentido de la
clase de dispositivo del tipo de medio a que se hace referencia.
all
Apropiado para todos los dispositivos.
aural
Propuesto para los sintetizadores de voz. Ver la seccin sobre hojas de estilo auditivas
para ms detalles.
braille
Propuesto para dispositivos tctiles braille.
embossed
Propuesto para impresoras de pginas braille.
handheld
Propuesto para dispositivos de mano (tpicamente de pantalla pequea, monocromos, de
limitado ancho de banda).
print

Propuesto para material opaco en pginas y para documentos percibidos en pantalla en

modo de vista previa a la impresin. Por favor, consulte la seccin sobre medios
paginados por informacin acerca de los formatos de publicacin que son especficos de
los medios paginados.
projection
Propuesto para las presentaciones proyectadas, por ejemplo, proyectores o transparencias
impresas. Por favor, consulte la seccin sobre medios paginados por informacin acerca
de los formatos de publicacin que son especficos de los medios paginados.
screen
Propuesto primariamente para pantallas de computadora a color.
tty
Propuesto para medios que usan una grilla de caracteres de espacio fijo, tales como
teletipos, terminales o dispositivos porttiles con limitada capacidad del monitor. Los
autores no deben usar las unidades en pixeles con el tipo de medio "tty".
tv
Propuesto para dispositivos de tipo televisin (baja resolucin, color, pantalla con
limitado desplazamiento, sonido disponible).
Los nombres de los tipos de medios no diferencian entre maysculas y minsculas.
Debido al acelerado cambio de las tecnologas, CSS2 no especifica una lista definitiva de tipos
de medios que pueden ser valores para @media.
Nota. Las futuras versiones de CSS pueden extender esta lista. Los autores no deben contar con
nombres de tipos de medios que an no han sido definidos por una especificacin CSS.

Grupos de medios
Cada definicin de propiedad en CSS especifica los tipos de medios para los cuales la propiedad
debe ser implementada por una aplicacin del usuario con conformidad. Como las propiedades
generalmente se aplican a varios medios, la seccin "Se aplica a los medios" de cada definicin
de propiedad lista los grupos de medios en vez de los tipos de medio individuales. Cada
propiedad se aplica a todos los tipos de medio en los grupos de medios listados en su definicin.
CSS2 define los siguientes grupos de medios:

contnuos o paginados. "Ambos" significa que la propiedad en cuestin se aplica a

ambos grupos de medios.

visuales, auditivos, o tctiles.

grillas (para dispositivos de grilla de caracteres) o bitmap. "Ambos" significa que la

propiedad en cuestin se aplica a ambos grupos de medios.

interactivos (para dispositivos que permiten la interaccin con el usuario) o estticos

(para aquellos que no). "Ambos" significa que la propiedad en cuestin se aplica a ambos
grupos de medios.

todos (incluye a todos los tipos de medios)

La siguiente tabla muestra la relacin entre los grupos de medios y los tipos de medios:
Relacin entre los grupos de medios y los tipos de medios
Tipos de
Medios

Grupos de Medios

contnuos/paginado visuales/auditivos/tctile grillas/bitma interactivos/esttico

s
s
p
s
aural
contnuos
auditivos
N/A
ambos
braille
contnuos
tctiles
grillas
ambos
emboss
paginados
tctiles
grillas
ambos
handheld
ambos
visuales
ambos
ambos
print
paginados
visuales
bitmap
estticos
projection
paginados
visuales
bitmap
estticos
screen
contnuos
visuales
bitmap
ambos
tty
contnuos
visuales
grillas
ambos
tv
ambos
visuales, auditivos
bitmap
ambos

Modelo de caja
El modelo de caja
El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El
modelo de caja tambin contiene opciones detalladas en lo referente al ajuste de mrgenes,
bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cmo se
construye el modelo de caja:
El modelo de caja en CSS

A primera vista, la imagen anterior puede parecer muy terica, as que intentemos usar el modelo
en un caso real con un encabezado y algo de texto. El cdigo HTML de nuestro ejemplo es el
siguiente (extrado de la Declaracin Universal de los Derechos Humanos):
<h1>Artculo 1:</h1>
<p>Todos los hombres nacen libres
e iguales en diginidad y derechos. Estn
dotados de razonamiento y consciencia y
deberan de comportarse entre s con
espritu de hermandad.</p>

si aadimos algo de color e informacin sobre la fuente, el ejemplo se podra presentar as:

El ejemplo contiene dos elementos: el elemento <h1> y el elemento <p>. El modelo de caja para
los dos elementos se puede ilustrar como sigue:T

Aunque puede parecer un poco complicado, la imagen muestra cmo cada elemento HTML est
rodeado por cajas, cajas que se pueden ajustar usando CSS.
Resumen

En esta leccin hemos introducido el modelo de caja. En las tres lecciones siguientes
examinaremos ms detenidamente cmo crear y controlar elementos del modelo de caja.

Aplicacin del documento web

En la ingeniera de software se denomina aplicacin web a aquellas herramientas que
los usuarios pueden utilizar accediendo a un servidor web a travs de Internet o de una
intranet mediante un navegador. En otras palabras, es una aplicacin software que se
codifica en un lenguaje soportado por los navegadores web en la que se confa la
ejecucin al navegador.
Las aplicaciones web son populares debido a lo prctico del navegador web como
cliente ligero, a la independencia del sistema operativo, as como a la facilidad para
actualizar y mantener aplicaciones web sin distribuir e instalar software a miles de
usuarios potenciales. Existen aplicaciones como los webmails, wikis, weblogs, tiendas
en lnea y la propia Wikipedia que son ejemplos bastante conocidos de aplicaciones
web.
Es importante mencionar que una pgina Web puede contener elementos que permiten
una comunicacin activa entre el usuario y la informacin. Esto permite que el usuario
acceda a los datos de modo interactivo, gracias a que la pgina responder a cada una
de sus acciones, como por ejemplo rellenar y enviar formularios, participar en juegos
diversos y acceder a gestores de base de datos de todo tipo.