XHTML

En XTHML:
Las etiquetas se escriben con minúsculas.
-Todas las etiquetas necesitan su etiqueta de cierre.
Por ejemplo: <p> Es un párrafo </p>
o también : <hr> debe cambiar a </hr>
-Todos los valores de atributos se escriben entre comillas dobles:
<table border=”1”>
-Anidación correcta:
Inválida: <p><i>…… </p></i>
Válida: <p><i> …. </i></p>
-Los atributos no se abrevian:
<option value=”pagina1.htm” selected=”selected”>

Página 1
</option>
-El atributo name se sustituye por id. Para navegadores antigüos se usan los dos:
<form name=”pregunta” id=”pregunta”>Texto</form>
-Tratar de envolver scripts y CSS en SGML:

Todas las secuencias de comandos (scripts) y CSS se envuelven en instrucciones CSS, por ejemplo:
<script language=”Javascript” type=”text/javascript”>

<![CDATA[
AQUI SE COLOCA EL VERDADERO SCRIPT
]]>
</script>
-Declaración del tipo de documento:

XHTML se debe validar con una de tres DTD públicas ubicadas en el servidor del W3C.
Son creadas en SGML, el usuario no las crea.
i. Estricta: sin texto suelto o encerrado entre párrafos o entre etiquetas <div>
<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Strict//En” “ http://www.w3.org/TR/xhtml/DTD/xhtml1-

strict.dtd”>
ii. Transicional o moderada: En la etiqueta anterior se sustituye solamente Strict y strict por Transitional y
transitional respectivamente.
Los navegadores pueden no hacer caso de una DTD e internamente utilizarán la estricta.
Si no se incluye el DOCTYPE, el navegador se pone “quirts mode”, tolerará errores y mostrará lo que le sea
posible.
iii. Para framesets (para dividir en marcos).

Ahora, se cambia la etiqueta por Frameset y frameset como se indicó anteriormente.
También se puede validar descargando de www.chami.com/html-kit el cual incluye a Tidy del W3C.
Por ejemplo:
<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//En" "
http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<body>
AQUI INGRESAR CÓDIGO HTML CON REGLAS XHTML
</body>
</HTML>
Formato para archivos XML con CSS
Adaptación de XML para visualizarlo en un navegador.
-Creación del CSS hola.css
documento{
font-family:Arial, sans-serif;
}
Donde, documento es el nombre de la primera etiqueta y , font-family es la fuente Arial o sans-serif.
-Retomando el programa del documento hola.xml

<?xml-stylesheet href="hola.css" type="text/css"?>
<documento>
<pregunta>HOLA ESCOM</pregunta>
<respuesta>Ya se inician clases</respuesta>
</documento>
Probar ejecución con y sin esta línea indicada.

La raíz con la fuente es el más alto nivel de jerarquía y los elementos dentro de la raíz heredan el formato, pero pueden
individualizarse, agregando:
respuesta{
font-family:"Courier New", monotype;
font-weight:bold;
}
Probar de nuevo los cambios.
-Se pueden asignar tipo y tamaño de fuente, negrita, cursiva, colores, de fuente y fondo, bordes o marcos. Para asignar
la misma instrucción a dos etiquetas se separan con comas:
pregunta, respuesta{
INSTRUCCIONES
}
Atributo Acción Valores Ejemplo

font-family Nombre de la fuente Nombre de fuente font-family: Arial;
font-size Tamaño de la fuente Puntos pt font-size: 14pt;
Pixeles px
color Color Color en inglés o color: red;
hexadecimal color: #ff0000;
font-weight Peso (como negrita) Bold, light, normal Font-weight: bold;
font-variant Variación de la fuente Small-caps Font-variant: small-caps;
font-style Estilo de fuente Italic font-style: italic;

line-weight Altura de línea 1 o 12 line-weight: 1.2;
margin Espacio exterior Pixeles px margin: 10 px;
Centímetros cm
padding Espacio inferior Píxeles px padding: 20px;
Centímetros cm
width Ancho px width: 400px;
cm
border-style Estilo de borde Por ejemplo solid border-style: solid;
border-width Ancho de borde px, cm border-width: 120;
-Ejemplo:
Utilizar el archivo productos.xml
<?DOCTYPE productos SYSTEM "productos.dtd"?>

<?xml-stylesheet href="productos.css" type="text/css"?>
<productos>
<partidas>
<nombre> Muñeca </nombre>
<num> 32945 </num>
<fabricante>
<empresa> Juegos, S.A. </empresa>
<localidad>Veracruz </localidad>
</fabricante>
<precio cliente="final">60 </precio>
<precio cliente="distribuidor">40 </precio>
</partidas>
<partidas>
<nombre> Carrito </nombre>
<num> 32981 </num>
<fabricante>
<empresa>Juegos, S.A.</empresa>
</fabricante>
</partidas>
<partidas>
<nombre> Pelota </nombre>
<num> 32901 </num>
<fabricante>
</fabricante>
</partidas>
<partidas>
<nombre> Oso peluche </nombre>
<num> 32341 </num>
<fabricante>
</fabricante>
</partidas>
</productos>
Con el archivo css en forma compacta:
productos{
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
line-weight: 1.2;
}
partidas{
display:block;
background-color: silver;
margin:10px;
padding:8px;
width:400px;
}
nombre{
display:block;
background:white;
border-style:solid;
border-width:1 px;
width:300px;
}
fabricante{
display:block;
font-style:italic;
}
num,precio{
color:red;
}
-XSL Y XSLT
XSLT es una subespecificación de XSL.
XSL: extensible Stylesheet Language
XSLt: extensible Stylesheet Language Transformation
Es un conunto de reglas para transformar XML en HTML, WML, SVG, RTF o PDF.
Ejemplo:
1. Abrir el archivo hola.xml
<?xml-stylesheet type="text/css" href="hola.xsl"?>
<documento>
<pregunta>HOLA ESCOM</pregunta>
<respuesta>Ya se inician clases</respuesta>
</documento>
2. Crear el archivo hola.xsl

1 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html"/>
2 <xsl:template match="/">
<html>
<head>
<title>Hola ESCOM</title>
</head>
<body>
3 <h1>
<xsl:value-of select="documento/pregunta" />
</h1>
<h2>
<xsl:value-of select="documento/respuesta" />
</h2>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
1. Elemento raíz.
2. Sintaxis de X-Path que pone el foco allí.
3. Pregunta es un título de primer orden h1.
Ejercicio:
<?xml version="1.0" encoding=" ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title>Tabla</title>
</head>
<body>
<table border="1">
<tr><th><xsl:value-of select="documento/pregunta" /></th></tr>
<tr><td><xsl:value-of select="documento/respuesta" /></td></tr>
<tr><td><img src="imagen.gif"/></td></tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
NOTA: XSLT permite elementos HTML ilimitados.

En el ejercicio, crear un vínculo HTML hacia otro sitio con un click en la imagen.
- Ejemplo XSLT:
Considerar los archivos lista.xml y lista.dtd.
En el archivo lista.xml insertar debajo del enlace a la DTD un enlace al archivo XSL:
<?xml versión=”1.0” encoding=”ISO-8859-1”?>
<?xml-stylesheet xmlns:xls=”http://www.w3.org/1999/XSL/Transform” version=”1.0”>
<xsl:template match="/">
<html>
<head>
<title>Titulo</title>
</head>
<link rel="stylesheet" type="text/css" href="lista.css"/>
<body>
<xsl:for-each select="lista/libro">
<xsl:sort select="titulo"/>
<h3>
<xsl:value-of select="titulo"/>
</h3>
<xsl:for-each select="autor">
<i>
<xsl:value-of select="."/>
</i>
<br />
</xsl:for-each>
<div>
<xsl:value-of select="editorial"/>
</div>
<i>
<xsl:value-of select="descripcion"/>
</i>
<div>
<xsl:value-of select="precio"/>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
El archive lista.css es:

body {
font-family: Arial,Helvetica;
}
h3{
font-size: 14pt;
color:blue;
}
- El esquema XML:
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xsd:element name="lista">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="libro" maxOccurs="unbounded">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="titulo" type="xsd:string"/>
<xsd:element name="autor" type="xsd:string" maxOccurs="2"/>
<xsd:element name="editorial" type="xsd:string"/>
<xsd:element name="descripcion" type="xsd:string" minOccurs="0"/>
<xsd:element name="precio" type="xsd:decimal"/>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
Nota: Los tipos pueden ser:

Xsd: string alfanumérico
Xsd: decimal -1,2,5,37
Xsd: integer -255,7,0
Xsd: date 2011-11-11, A-M-D
Xsd: boolean true, false, 1, 0
El código anterior es la referencia del XML siguiente:

<lista xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi="noNamespace"
SchemaLocation="lista.xsd">
<lista>
<libro>
<titulo>Photoshop</titulo>
<autor>Uno </autor>
<editorial>Abc </editorial>
<precio>10 </precio>
</libro>
<libro>
<titulo>Java</titulo>
<autor>Josling </autor>
<editorial>Sun </editorial>
</libro>
<libro>
<titulo>XML</titulo>
<autor>Sgml </autor>
<editorial>IPN </editorial>
<descripcion>Introducción a XML </descripcion>
</libro>
</lista>

XHTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

XHTML

Hochgeladen von

Copyright:

Verfügbare Formate

En XTHML:

Las etiquetas se escriben con minúsculas.

-Todas las etiquetas necesitan su etiqueta de cierre.

Por ejemplo: <p> Es un párrafo </p>

o también : <hr> debe cambiar a </hr>

-Todos los valores de atributos se escriben entre comillas dobles:

Inválida: <p><i>…… </p></i>

Válida: <p><i> …. </i></p>

-Los atributos no se abrevian:

<option value=”pagina1.htm” selected=”selected”>

-Tratar de envolver scripts y CSS en SGML:

<script language=”Javascript” type=”text/javascript”>

-Declaración del tipo de documento:

<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Strict//En” “ http://www.w3.org/TR/xhtml/DTD/xhtml1-

iii. Para framesets (para dividir en marcos).

<?xml version="1.0" encoding="ISO-8859-1"?>

Formato para archivos XML con CSS

Adaptación de XML para visualizarlo en un navegador.

-Creación del CSS hola.css

-Retomando el programa del documento hola.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

Probar ejecución con y sin esta línea indicada.

Probar de nuevo los cambios.

Atributo Acción Valores Ejemplo

font-style Estilo de fuente Italic font-style: italic;

<?DOCTYPE productos SYSTEM "productos.dtd"?>

Con el archivo css en forma compacta:

2. Crear el archivo hola.xsl

1 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

NOTA: XSLT permite elementos HTML ilimitados.

El archive lista.css es:

Nota: Los tipos pueden ser:

El código anterior es la referencia del XML siguiente:

Das könnte Ihnen auch gefallen