Apuntes Marcado

INTRODUCCIÓN A LOS LENGUAJES DE MARCADO Y TECNOLOGÍAS WEB
ETIQUETAS
Las etiquetas HTML son nombres de elementos rodeados de corchetes angulares que
normalmente vienen en pares:
<etiqueta>_______</etiqueta>
La primera etiqueta en un par es la etiqueta de apertura y la segunda es la etiqueta de
cierre. Esta última se escribe igual que la etiqueta de inicio, pero con una barra inclinada
insertada antes del nombre de la etiqueta. Además, a cada etiqueta le puedo poner una
serie de atributos.
ATRIBUTOS
Los atributos proporcionan información adicional sobre los elementos HTML a los que
son asignados.
 Todos los elementos HTML pueden tener atributos.

 Los atributos siempre se especifican en la etiqueta de inicio.
 Los atributos generalmente vienen en pares de nombre/valor:
Name=”valor”
EJEMPLO:
Si quiero poner una palabra en cursiva sin añadir más palabras a mi texto deberé poner
una etiqueta donde le ordenemos al programa que esa palabra en cuestión debe ir de
una determinada manera:
ESTRUCTURA BÁSICA DE UN HTML

Un documento HTML correctamente formado debe cumplir las siguientes reglas:
 Los elementos deben estar anidados correctamente. Cuando escribimos

etiquetas anidadas no podemos cerrar una fuera de la otra.
REGLA 1 HOJA
 Todos los documentos HTML para poder validarlos correctamente deben tener
una primera línea donde te ponga el tipo de documento que vas a llevar a cabo.
 Todos los documentos deben tener un elemento raíz. Todo el contenido debe
estar dentro de esta etiqueta raíz que se cierra al final del documento en
cuestión.
 Los elementos siempre deben estar cerrados. Toda etiqueta que abramos en un
determinado momento deberemos cerrarla, ya sea de autocierre o no.
 Los elementos deben estar en minúsculas.
-1-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -> Línea tipo de documento
<html>-> etiqueta raíz
<head> dentro de esta etiqueta estarán los metadatos
<title>page title </title> ->Aparecerá en la etiqueta del navegador
</head>
<body> dentro de esta etiqueta estará todo lo que posteriormente será el cuerpo del
texto
<h1>heading</h1>
<p>paragraph</p>
</body>
</html>
ETIQUETAS:
ETIQUETA <META>
Este elemento se sua para especificar qué conjunto de caracteres se usa, descripción de
la página, palabras clave, autor y otros metadatos.
<meta charset=””> ->define el conjunto de caracteres utilizado, nosotros normalmente
siempre usaremos el mismo.
<meta http-equiv=”refresh” content=”30”> ->restaura la página cada 30 segundos

ETIQUETA COMENTARIO
No se visualizan cuando cargamos nuestra página web en el navegador, únicamente
podremos verlos cuando tengamos abierto el documento en Notepad.
-2-
OTRAS ETIQUETAS DE <BODY>
<p>párrafo</p>
<h1>epígrafe de primer nivel</h1>
<h2>epígrafe de segundo nivel</h2> (Podemos usar los números hasta cuando
queramos aunque html tenga un límite que por ejemplo a partir del tres ya deja de
mostrarlos más grandes)
<br/>Salto de línea (etiqueta de autocierre)
<hr/>inserta una línea horizontal al realizar el salto de línea (etiqueta de autocierre)
<strong>negrita</strong>
<em>cursiva</em>
Las siguientes etiquetas son puramente estructurales, están desrecomendadas porque
para dar formato a nuestro documento HTML usaremos una hoja de estilo ya que es
más cómodo y rápido.
<big>grande</big>
<small>pequeño</small>
<del>tacha</del>
<tt>fuente de máquina de escribir</tt>
-3-
CREAR LISTAS
No ordenadas: dentro de la etiqueta <ul> solo deben ir elementos de lista (<li>). El título
irá fuera de dicha etiqueta dentro de <p>.
Ordenadas: se aplican las mismas reglas que en el caso de las listas no ordenadas, sin
embargo, aquí la etiqueta principal es <ol>.
TABLAS
<table>
<tr>
<th>Título1</th> ->celda de encabezado
<th>Título2</th>
<th>Título3</th>
</tr>
<tr> -> fila
<td> fila 1 col 1 </td> ->columna
-4-
<td> fila 1 col 2 </td>
<td> fila 1 col 2 </td>
</tr>
A continuación, tenemos tres atributos básicos que debemos conocer con respecto a las
tablas de un documento HTML.
 Width: con este atributo le diremos qué porcentaje de la hoja queremos que
ocupe la tabla una vez que ejecutemos nuestra página web con el navegador.
 Cellpadding: modificaremos el espacio que hay entre la línea de la celda y el
contenido de la misma, el margen de la celda.
 Cellspacing: modificaremos el espacio que hay entre una celda y otra.
NOTA
Los caracteres con acento no aparecen como tal en el mundo de la programación
porque en inglés no hay tildes. Í: í
(VER DOC DEL CAMPUS ‘CARACTERES ESPECIALES DE HTML)
NOTA
Ctrl+h: se abre la ventana reemplazar
COMBINAR CELDAS
Los dos atributos que vamos a utilizar para expandir se ponen en las etiquetas <td>.
 Rowspan: expandir la fila el número de veces que queramos.

 Colspan: expandir la columna el número de veces que queramos.
Para que nos salga bien tenemos que eliminar el elemento de debajo cuando
expandimos la fila y el elemento de la derecha cuando expandimos la columna.
Rowspan=”2”
Colspan=”2”
IMÁGENES
En HTML, las imágenes se definen con la etiqueta <img>. Esta etiqueta está vacía,
contiene únicamente atributos y no tiene etiqueta de cierre.
El atributo src especifica la URL de la imagen, es decir, con este atributo le vamos a decir
a la etiqueta cuál es la ubicación de donde tiene que sacar la imagen ya sea una imagen
en internet o que esté en nuestro directorio.
-5-
El atributo alt proporciona un texto alternativo para una imagen, si el usuario por alguna
razón no puede verla (debido a una conexión lenta, un error en el atributo mencionado
anteriormente o si el usuario usa un lector de pantalla). Este atributo debe describir la
imagen y obligatorio para que a la hora de validarlo no nos de ningún error.
ENLACES
Los enlaces HTML son hipervínculos. Podemos hacer clic en un enlace y saltar a otro
documento, cuando pasemos el ratón por un enlace la flecha del mismo nos mostrará
una mano indicando que se trata de un hipervínculo. Un enlace no tiene que ser texto,
puede ser una imagen o cualquier otro elemento HTML.
<a href=”URL” target=”blank” (este atributo sirve para que el enlace nos lo abra en una
pestaña nueva)> texto del enlace (que es lo que se va a mostrar)</a>
Con esta etiqueta también podemos poner enlaces que en lugar de abrirnos un
documento nuevo o llevarnos a una página de internet, nos transporte a otra parte de
nuestro documento. Puede ser muy útil cuando queremos que nuestra página web
tenga un índice.
<a href=”#____”>texto enlace</a>

<a name=”____”>texto</a> para dar el nombre por el cual luego el programa nos va a
hacer el ancla.
TIPOS DE RUTAS
. = directorio (ruta) de trabajo
 Rutas absolutas: indicamos el camino completo hasta el fichero de destino, p.

ej.: C:/Documentos/asignaturas/Hipertexto/docs/ejemploHTML.html
Rutas relativas: indicamos el camino hasta el fichero de destino partiendo del fichero
actual, p. ej.: docs/ejemploHTML.html. Este tipo de rutas es más recomendable que las
rutas absolutas ya que si mi proyecto HTML se lo paso a alguien y tiene rutas absolutas
me dará un error porque va desde la raíz de mi ordenador.
-6-
Para hacer una ruta relativa siempre tenemos que poner ./ y escribir la ruta.
-7-
CSS
Tiene al igual que HTML un formalismo para hacer las cosas, en este caso tendremos la
siguiente estructura (sintaxis):
Para meter un estilo en un documento HTML tenemos tres posibilidades diferentes:

1. En tu documento HTML que se le suele llamar index.html al principal, una de las
opciones es directamente en el párrafo ponerle un atributo
style=”propiedad:valor;”. Pero esta desrecomendada porque solo se lo estás
poniendo a un párrafo y resulta poco productivo.
2. La siguiente forma es poner dentro del head una etiqueta <style> que se cierra
abajo. Plantea una ventaja sobre la anterior porque estás aplicándolo a todos los
elementos pero no se podría aplicar a otros archivos distintos.
3. Definirnos aparte nuestra hoja de estilo en formato CSS y en nuestro HTML

tendríamos que poner dentro del head una etiqueta <link/>.
Lo que está dentro del Href es la ruta relativa hasta llegar a nuestro doc CSS
-8-
Elemento=Aquello a lo que queremos que se aplique. MIRAR EJEMPLOS QUE HEMOS
HECHO EN CLASE
SELECTORES
Para dar formato a los elementos pero que cada uno tenga un formato diferente, es
decir, con lo que hemos visto hasta ahora cambiaríamos los párrafos pero le pondríamos
el mismo formato a todos.
SELECTOR ID
Este selector utiliza el atributo id de un elemento HTML para seleccionar un elemento
específico. La identificación de un elemento debe ser única dentro de una página, por lo
que el selector de id se usa para seleccionar un elemento único. Para seleccionar un
elemento con una identificación específica, escribiremos el carácter almohadilla (#)
seguido de la identificación del elemento.
HTML CSS
<p id=”001”>_________</p> al poner un id le estamos dando a la etiqueta una

identificación que le distingue del resto. Por ejemplo, si queremos que únicamente este
párrafo aparezca en negrita:
SELECTOR CLASS
Este selector selecciona elementos con un atributo de clase específico. Para seleccionar
elementos con una clase específica, deberemos escribir un carácter de punto (.), seguido
del nombre de la clase.
-9-
HTML CSS
SELECTOR DIV
Son etiquetas sin semántica que sirven para seleccionar partes del documento (varias
etiquetas a la vez) a las que quiero que les pase algo en particular. Por ejemplo, si tengo
una tabla y quiero decirle a mi HTML que me coloque la tabla entera en el centro del
documento la seleccionaría con estas etiquetas y le pondría las propiedades necesarias
con CSS.
ETIQUETAS PORCIONES DE TEXTO
-10-
MARCADO SEMÁNTICO
XML (extensible markup language)
Es un lenguaje de marcas extensible que nos sirve para crear lenguajes de marcado, los
que nosotros queramos. Si HTML ya tiene su gramática sobre qué elementos existen y
que elementos van unos dentro de otros la diferencia con XML es que este último es un
formalismo para crear lenguaje. Por ejemplo, podemos crear un lenguaje de marcas
para etiquetar una agenda de teléfonos.
La diferencia principal entre HTML y XML es sobre el tipo de marcado ya que en el
primero el marcado es más de presentación porque tu cuando creas un párrafo en HTML
ya significa algo por defecto, algo de visualización ya que se va a ver por defecto en una
línea. Sin embargo, en XML las etiquetas que usemos no van a hacer nada, por ejemplo:
Esto no se va a visualizar de ninguna manera porque es un lenguaje de marcado que es

puramente semántico. Tendremos que decirle nosotros con una hoja a parte en un
lenguaje de programación para que se muestre eso como nosotros queramos.
No se puede aplicar el XML al archivo HTML sino a un archivo de otro tipo. Además, XML
no cuenta con ninguna etiqueta definida, las tenemos que crear todas nosotros con una
semántica para poder darle sentido al texto.
GRAMÁTICA GENERATIVA DE TIPO 2
Consiste en especificar una serie de reglas de reescritura. Este tipo de reglas son reglas
que tienen una parte izquierda, una flechita que indica como se escribe como y una
parte derecha donde habrá una secuencia de terminales y no terminales que sea la que
yo quiera y en la parte izquierda siempre tiene que haber un símbolo de tipo no terminal.
Tenemos dos tipos de símbolos:
- Terminales: serían las palabras. Por ejemplo: la, mujer, corre, por, etc.
- No terminales: van a ser categorías que nos creamos para nombrar conjuntos de
estos símbolos. Por ejemplo: sustantivo, verbo, SN, preposiciones…
Para construir una gramática de las frases del español lo normal es empezar con el
símbolo raíz que sea oración. Creo un no terminal ‘Oración’ y puedo decir que se
reescribe como ‘SN SV’ (O->SN SV). Luego tendría que decirle que un SN puede tener un
nombre a secas (SN-> N) y por último otra regla de reescritura podría ser que un N se
reescribe como ‘Mujer’ (N-> Mujer).
O-> SN SV
SN-> N
N-> Mujer
-11-
Así lo haríamos con todos los posibles nombres del castellano. Así iríamos creando un
mecanismo formal para producir todas posibles frases del castellano.
EJEMPLO:
I shot an elephant in my pyjamas
O SN SV SP Prep N Pron Det (no terminales)
Reglas con la capacidad de generar posibilidades:
O -> SN SV
SN -> Pron
SN -> Det N
SN -> Det N SP
SV -> V SN SP
Det -> an
Det -> my
Pron -> I
N -> Elephant
N -> pyjamas
V -> Shot
Prep -> in
NOTA
Reglas que debe cumplir un documento HTML para estar bien formado:
- Los elementos tienen que estar bien anidados, no se puede cerrar uno antes
de otro. Por ejemplo, si yo he creado la etiqueta A y dentro abro una B no
puede ser que yo cierre la A y después cierre la B. ->1
- Solo tiene que haber una etiqueta raíz.
DTD (Document type definition)

XML es un metalenguaje para definir lenguajes de marcado. Nos permite definir un tipo
de documento y dicha definición consistía en decir qué tipo de etiquetas pueden estar
en ese documento (DTD). Para crear las líneas de una gramática XML usaremos la
siguiente estructura básica:
<! TIPO DE OBJETO id.genérico (modelo de contenido)>
-12-
Tipo de objeto= definiremos de que elemento se trata (etiqueta, atributo, etc.)
Identificador genérico= nombre que le demos a ese elemento. No vamos a poder llamar
a dos etiquetas con el mismo nombre ya que es un identificador.
Modelo de contenido= pondremos las etiquetas que tiene en su interior.
TIPOS DE OBJETO
ETIQUETAS
La sintaxis básica para crear una etiqueta es la siguiente:
<! ELEMENT agenda (contacto+)>
El más quiere decir que hay un contacto o más.
<! ELEMENT contacto (nombre, datos)> Al separarlo con comas tienen que estar
forzosamente en este orden.
<! ELEMENT datos (teléfono │ dirección?)> La barra quiere decir que las etiquetas
pueden aparecer en cualquier orden.
Nombre, teléfono y dirección son elementos terminales a los que tenemos que añadir
ahora los elementos no terminales. El resto de elementos no lo son porque tienen
dentro etiquetas, se reescriben mediante etiquetas.
<! ELEMENT nombre (#PCDATA)> PCDATA es una palabra clave que quiere decir que el
contenido serán datos del ordenador que ya no son terminales.
<! ELEMENT teléfono (#PCDATA)>
<! ELEMENT dirección (#PCDATA)>
Aquí le estamos diciendo al programa que hay un elemento raíz que es agenda
compuesto por un determinado número de etiquetas que son las que aparecen entre
paréntesis.
<!ELEMENT revisor EMPTY> (para etiquetas de autocierre)
EJEMPLO FOTO.
ATRIBUTOS
-13-
Sintaxis para poner atributos en la gramática:
<!ATTLIST elemento atributo tipo_valor valor_por_defecto>
EJEMPLO:
<!ELEMENT contacto (…)>
<!ATTLIST contacto id ID #REQUIRED>
Aquí le esto diciendo que mi etiqueta contacto requiere necesariamente un
identificador. Si le pongo ID en tipo de valor quiere decir que el usuario puede escribir
lo que quiera pero que solo puede estar una vez en el documento.
<!ATTLIST contacto tipo (amigo I casa I trabajo) #IMPLIED>
Además de un atributo id contacto tendrá un atributo tipo que sea o bien casa o bien
trabajo o bien amigo.
<!ATTLIST contacto tipo (amigo I casa I trabajo) “amigo”>
Ponemos amigo entre comillas para que aparezca por defecto, lo quiere decir que es un
dato requerido que yo permito que el usuario no lo ponga pero que si no lo pone yo voy
a interpretar que es amigo.
IDREF: el valor de un atributo tendrá que contener el texto que sea un identificador en
otra etiqueta, en otro lugar de la etiqueta. Tengo que tener una etiqueta que sea
identificador con ese mismo código.
ENTIDADES:
<!ENTITY nombre “contenido”> Se utiliza para crear entidades que en nuestro HTML
aparecerán siempre con el & al inicio y ; al final. El ‘nombre’ será el nombre que le demos
nosotros a la entidad, es decir, lo que nosotros deberemos escribir en nuestro HTML
para que la entidad funcione. El contenido será aquella información que queramos que
aparezca cuando pongamos la entidad correspondiente.
EJEMPLO: <!ENTITY minombre “Anaray Pérez Bonilla”> (MIRAR DOC ANTOLOGIA)
EXPRESIONES REGULARES: VIDEO 4/4/2018

Es un símbolo que permite representar cadenas de texto que no son literalmente esa
cadena, sino que pueden contener los símbolos que representaban sus caracteres
especiales. Tenemos por un lado los literales que son aquellos que buscan literalmente
eso que está escrito, por ejemplo, el literal ‘casa’ me va a localizar en cualquier texto la
palabra casa. Sin embargo, si yo escribo ‘Cas.’ Me va a encontrar en el texto tanto ‘casa’,
-14-
como ‘caso’, como ‘case’, como ‘cas1’, etc. cualquier cosa que tenga donde este carácter
especial (.) cualquier carácter que es lo que significa el punto.
Es esto lo que tienen de especial las expresiones regulares, permiten no solo buscar
literales en un texto sino buscar mediante caracteres especiales más de un literal gracias
al significado de estos símbolos.
Tenemos los siguientes símbolos:
. -> Cualquier carácter
^ -> Al inicio de la cadena o frase. Por ejemplo, si yo busco ‘^cas.’ Solo voy a encontrar
casa si está al inicio de la frase.
$ -> Final de cadena o frase. Si yo pongo ‘s$’ quiere decir que me va a encontrar todas
las eses que estén en final de cadena.
[]-> Los literales que hay dentro son una disyunción. Equivaldría a poner: (a|b).
Un subconjunto de estos símbolos con los cuantificadores: Si no ponemos
cuantificadores se entiende que solo está una vez.
+ -> quiere decir que lo que estaba inmediatamente a su izquierda que podía ser un solo
carácter o una cadena si lo poníamos entre paréntesis para agruparlo, se repetía una o
más veces. Por ejemplo, si yo busco ‘a+’ me va a encontrar ‘a’, ‘aaa’ pero no me
encontraría los espacios vacíos ‘ ‘.
* -> quiere decir que lo que estaba inmediatamente a su izquierda que podía ser un solo
carácter o una cadena si lo poníamos entre paréntesis para agruparlo, se repetía cero o
más veces. Al contrario que en el ejemplo anterior si yo busco ‘a*’ si me encontraría el
espacio en blando además de todos los ejemplos anteriores.
? -> quiere decir que lo que estaba inmediatamente a su izquierda que podía ser un solo
carácter o una cadena si lo poníamos entre paréntesis para agruparlo, se repetía cero o
una veces.
| -> quiere decir que lo que estaba inmediatamente a su izquierda que podía ser un solo
carácter o una cadena si lo poníamos entre paréntesis para agruparlo, se repetía o lo
que está a su izquierda o lo que está a su derecha que a su vez lo podemos agrupar por
paréntesis. Hay dos tipos de disyunción, puede ser inclusiva o excluyente. En las DTD
siempre serán excluyentes ya que no pueden estar las dos cosas a la vez. Si yo tengo la
expresión regular (casa|casas) esto me dará bien con ‘casa’ y con ‘casas’ de forma
inidividual pero no con ‘casa,casas’. Para que me de bien con la sucesión de los dos
tendremos que ponerle un símbolo + o * dependiendo de si queremos que nos
contabilice el espacio en blanco o no. Si hago esto entonces si nos localizaría cosas como
‘casa,casas’ o ‘casa,casas,casa,casas’.
-15-
CHULETILLA
<?xml versión=”1.0” encoding=utf-8” ?>
<!DOCTYPE raíz (este es el nombre de nuestra etiqueta raíz, por ejemplo en HTML
siempre es la etiqueta <html>) [
<!ELEMENT id.nombre (modelo de contenido)> Modelo de contenido= etiquetas,
#PCDATA, EMPTY
<!ATTLIST etiqueta atributo tipo_contenido> Tipo de contenido= CDATA, ID,
(valor1|valor2), IDREF (con idref tiene que existir otro ID con el valor que se indique en
otro xml)
<!ENTITY id_nombre “valor”>
]>
¿Cómo adjuntar la gramática (el doc DTD) desde un fichero distinto?
<?xml versión=”1.0” encoding=utf-8” ?>
<!DOCTYPE raíz SYSTEM “raíz.dtd” [ ]>
-16-
ENLACES EXTERNOS XML
RECURSIVIDAD
Una regla es recursiva cuando lo que está a la izquierda también se pone en la derecha
(VER EJEMPLO RECURSIVIDAD PRACTICA 2)
SP -> Prep, SP
SN
-17-
PROCESAMIENTO DE DOCUMENTOS XML
Hay dos maneras de poder visualizar los documentos MXL ya que si abrimos un
documento XML de la forma convencional (tal y como hacíamos con los documentos
HTML) el navegador nos muestra el documento en sí, con todas sus etiquetas, etc.
ESQUEMA OJO
Nosotros tenemos nuestro documento XML con nuestra gramática DTD, dentro o fuera,
y para que nuestro XML se vea nosotros podemos optar por añadirle una hoja de estilo
(CSS).
La otra opción que tengo de poder visualizar un documento XML es creando una hoja
de estilo XSLT, que me va a permitir transformar un XML en un HTML. Con esta hoja de
estilo le voy a poder decir que etiquetas del XML quiero meter en el HTML.
CSS
Para hacer un CSS de un documento XML el formalismo es el mismo, el único cambio es
que en lugar de poner las etiquetas HTML le vamos a poner las etiquetas que
corresponden al XML sobre el que estamos trabajando y que nosotros como autores nos
hemos “inventado”. Tendremos que tener en cuenta que para que se apliquen los
cambios en el formato que hacemos en el CSS, en nuestro documento XML deberemos
poner ‘display: block;’.
EJ:
Una vez creado completamente el documento CSS únicamente tendremos que llamarlo
desde el XML para que el formato se aplique correctamente (al igual que hacíamos con
los documentos HTML).
EJ: en lugar de decirle que el párrafo nos lo ponga en rojo, yo le voy a decir que las
<opiniones> me las ponga en gris.
XSL (eXtensive Stylesheet Language)
Muchos navegadores no te dejan abrir este tipo de documentos por motivos de
seguridad.
Está dividido en tres partes:
XPath
-18-
Nos permite navegar como si fuera una ruta por las etiquetas del documento. Aquí, al
igual que en el ordenador navegamos por qué directorios hay dentro de otros,
podremos navegar por etiquetas.
EJ: para llegar a la etiqueta ‘artista’ yo le tengo que decir, como si fuera una ruta absoluta
desde el principio del documento: catalog/cd/artista.
Estas es una manera de identificar etiquetas como si fueran rutas desde la etiqueta raíz,
al igual que cuando le hacíamos desde la raíz del ordenador, hasta la etiqueta a la que
queramos llegar.
XQuery
Me permite hacer una serie de consultas al documento sobre una especie de base de
datos.
EJ: esto me va a permitir decirle que quiero mostrar de mi catalogo de cds, el artista que
tiene un apellido que sea ‘Pérez’.
XSLT
eXtensive Stylesheet Language Transformation.
Es un lenguaje de estilo extensible, es decir, no es un lenguaje que me sirva
directamente solo para dar estilo a las etiquetas, sino que es un lenguaje que me
permite hacer otras cosas. EJ: me permite seleccionar qué etiquetas quiero que se vean,
ordenar la información de una determinada manera, seleccionar lo que quiero mostrar
en función del valor de uno de sus atributos, etc.
La estructura de un documento de este tipo es la siguiente:
<?xml version="1.0" encoding="UTF-8"?> (OBLIGATORIO)
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> (OBLIGATORIO)
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
-19-
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet> (OBLIGATORIO)
A continuación, para conseguir visualizar los cambios efectuados deberemos poner un

link en el documento XML para decirle donde está su documento XSL mediante la
siguiente fórmula:
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
La etiqueta xml:template nos permite llamar a las etiquetas del xml. Siempre le
pondremos match=”/” ya que con esto le decimos al documento que vamos a trabar con
todas las etiquetas del XML.
A continuación de esto ya tenemos un html normal salvo que no le pondremos cabecera
por lo que pondremos directamente body y por ultimo los elementos que queremos que
se vean. En el documento del ejemplo únicamente está creando una tabla a la cual le
está metiendo datos.
COMO LLAMAR A ETIQUETAS
VALUE-OF
Esta etiqueta de autocierre nos permite extraer el valor de únicamente un nodo que
queramos, si queremos hacer un bucle deberemos utilizar otra etiqueta diferente. El
atributo select nos permite poner la ruta hasta el nodo que queremos que se ponga ahí.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"> La barra nos permite acceder a cualquier nodo del XML
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
-20-
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
FOR-EACH
Podremos seleccionar todos los nodos que se llamen de una manera y estén en un sitio.
La sintaxis de esta etiqueta es un poco más complicada porque tendremos que crear
una etiqueta que no es de autocierre porque como por cada iteración yo quiero hacer
cosas y tiene que tener que hacer cosas dentro no puede ser de este tipo.
En el siguiente ejemplo podemos observar como la etiqueta en cuestión está
seleccionando el lugar de donde queremos que saque la información, más adelante nos
vuelve a aparecer la etiqueta ‘value-of’ donde deberemos decirle al programa qué datos
de ese lugar queremos que nos muestre.
Como podemos observar la ruta relativa que tiene la etiqueta ‘for-each’ no tiene la barra
inicial, esto se debe a que ya le hemos dicho al inicio del documento que queremos que
la información nos la saque del documento que sea.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Reseña</h2>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
-21-
<tr>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
SORT
Sirve para ordenar los datos en función del valor de un determinado campo, que puede
ser bien un atributo o el texto de la etiqueta. Un SORT siempre tiene que estar dentro
de un FOR-EACH porque es cuando creas un bucle que te va a imprimir varias cosas,
cuando puedes ordenar esas cosas.
La etiqueta SORT nos está diciendo que va a ordenar los CDs en función del artista por
orden alfabético.
IF
Puedo añadir un test condicional que puede cumplirse o no y en función de que se
cumpla o no, se imprimen unas etiquetas u otras. Siempre va dentro de un FOR-EACH.
-22-
Solo imprime los CDs que tienen un precio mayor que 10
Dentro de nuestro bucle FOR-EACH nos mete otro que es un IF que hace que dentro de
ese bucle solo se impriman los que tengan un precio que cumple la condición. Y lo que
hay dentro es lo que estaría dentro del FOR-EACH de antes, que para los que existen se
crea una fila con tres columnas.
EN UNA NOTA:
>: >
<: <
CHOOSE
Es una variante de IF que te deja hacer una cosa para cuando cumpla la condición y otra
cosa diferente para cuando no la cumpla. Dentro de CHOOSE le podemos poner dos
etiquetas: WHEN y OTHERWISE.
-23-
Cuando el precio es mayor que 10 ponme una columna con el artista pero con un
atributo de color y cuando es menor que 10 ponme solo una columna con el artista.
-24-

Apuntes Marcado

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Apuntes Marcado

Încărcat de

Drepturi de autor:

Formate disponibile

INTRODUCCIÓN A LOS LENGUAJES DE MARCADO Y TECNOLOGÍAS WEB

 Todos los elementos HTML pueden tener atributos.

ESTRUCTURA BÁSICA DE UN HTML

 Los elementos deben estar anidados correctamente. Cuando escribimos

<meta http-equiv=”refresh” content=”30”> ->restaura la página cada 30 segundos

(VER DOC DEL CAMPUS ‘CARACTERES ESPECIALES DE HTML)

 Rowspan: expandir la fila el número de veces que queramos.

<a href=”#____”>texto enlace</a>

 Rutas absolutas: indicamos el camino completo hasta el fichero de destino, p.

Para meter un estilo en un documento HTML tenemos tres posibilidades diferentes:

3. Definirnos aparte nuestra hoja de estilo en formato CSS y en nuestro HTML

<p id=”001”>_________</p> al poner un id le estamos dando a la etiqueta una

ETIQUETAS PORCIONES DE TEXTO

Esto no se va a visualizar de ninguna manera porque es un lenguaje de marcado que es

DTD (Document type definition)

EXPRESIONES REGULARES: VIDEO 4/4/2018

A continuación, para conseguir visualizar los cambios efectuados deberemos poner un

S-ar putea să vă placă și