Índice: Tema 2.4 (Parte 1)
2.4 Hojas de estilo en cascada CSS
2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El
2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos
d l d
j
Índice: Tema 2.4 (Parte 1)
2.4 Hojas de estilo en cascada CSS
2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El
2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos
d l d
j
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
Introducción a XHTML (1)
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más
que una adaptación de HTML al lenguaje XML.
Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que
XHTML lo es del XML (que a su vez, también es descendiente de SGML).
CSS es el mecanismo que permite separar los contenidos definidos mediante
XHTML y el aspecto que deben presentar esos contenidos:
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
3
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
Introducción a XHTML (2)
XHTML (EXtensible Hypertext Markup Languange).
• http://www.w3.org/TR/xhtml1/
El objetivo del XHTML es reemplazar a HTML
El objetivo del XHTML es reemplazar a HTML.
HTML 4.01 es la última especificación de HTML como tal. A partir de entonces ha
evolucionado mediante especificaciones de XHTML
evolucionado mediante especificaciones de XHTML.
XHTML 1.0 es casi idéntico de HTML 4.01. XHTML es simplemente una versión
estricta y clara de HTML
estricta y clara de HTML.
Para que un documento sea XHTML:
• Tiene que ser XML bien formado.
• Tiene que ser válido frente a una DTD’s proporcionadas por W3C.
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
4
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
Introducción a XHTML (3)
Actualmente existen muchos sitios web cuyas páginas no son válidas respecto al
estándar HTML. Supóngase por ejemplo, la página siguiente:
<html>
<head>
<title>This is bad HTML</title>
<body>y
</body>
<h1>Bad HTML
Aunque los navegadores suelen interpretarlas de manera correcta pese a los
fallos, es preferible depurarlos mediante un proceso de validación.
Actualmente no todos los dispositivos (móviles, PDA, …) tienen la suficiente
potencia como para interpretar páginas HTML mal marcadas.
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
5
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
Introducción a XHTML (4)
Hay 3 tipos de documentos XHTML con sus correspondientes DTDs:
Strict: Estricta, sin marcado presentacional (para usar con CSS).
<!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1 0 Strict//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Transitional: Permisiva con algunos aspectos presentacionales.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Frameset: Con soporte de marcos (ventanas con distintos marcos)
Frameset: Con soporte de marcos (ventanas con distintos marcos) .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
htt
t dtd>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
/TR/ ht l1/DTD/ ht l1 f
//
3
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
6
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
XHTML bien formado: Diferencias respecto a HTML (1)
En el elemento raíz, <html>, se suele declarar el espacio de nombres:
<html xmlns="http://www.w3.org/1999/xhtml">
La DTD define como obligatorios la sección <head>, y dentro de ella el <title>.
t t e
ead , y
g
Todos los elementos XHTML deben tener la etiqueta de cierre, incluso los
elementos vacíos:
elementos vacíos:
•
Incorrecto:
• Correcto:
• Correcto:
<br>
<br></br> ó <br/> ó <br /> (Preferiblemente esta última)
<br></br> ó <br/> ó <br /> (Preferiblemente esta última)
Los elementos anidados deben tener un correcto orden de apertura/cierre (el que
se abre último debe cerrarse primero):
se abre último, debe cerrarse primero):
•
Incorrecto:
• Correcto:
Correcto:
<b><i>Este texto está en negrita y cursiva</b></i>
<b><i>Este texto está en negrita y cursiva</i></b>
<b><i>Este texto está en negrita y cursiva</i></b>
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
7
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
XHTML bien formado: Diferencias respecto a HTML (2)
Los valores de los atributos deben ir encerrados entre comillas (simples o dobles):
)
p
(
•
Incorrecto:
• Correcto:
• Correcto:
<td rowspan=3>
<td rowspan='3'>
<td rowspan="3">
p
No se permiten atributos minimizados (atributos booleanos):
No se permiten atributos minimizados (atributos booleanos):
•
Incorrecto:
• Correcto:
Correcto:
<input checked>
<input checked="checked">
<input checked checked >
Los nombres de elementos y atributos deben ir en minúsculas.
•
•
Incorrecto:
Incorrecto:
• Correcto:
• Correcto:
<P class="nombre">Texto com estilo</P>
<p CLASS="nombre">Texto com estilo</p>
<p class="nombre">Texto com estilo</p>
<p class="nombre">Texto com estilo</p>
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
8
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
XHTML bien formado: Diferencias respecto a HTML (3)
El atributo id sustituye a name:
•
Incorrecto:
• Correcto:
• Correcto:
<img src="picture.gif" name="picture1" />
<img src="picture.gif" id="picture1" />
<img src="picture.gif" name="picture1" id="picture1" />
Cuando se usan parámetros en el atributo href es preferible utilizar & a &:
p
•
Incorrecto:
• Correcto:
p
<a href="mailto:
[email protected]?subject=A&body=B">
<a href="mailto:
[email protected]?subject=A&body=B">
p
La DTD estricta define además algunas reglas adicionales:
• Desaparecen todos los atributos y elementos presentacionales, por lo que todo el estilo se
debe especificar mediante CSS.
• El texto no debe ser insertado directamente en el cuerpo (dentro de la etiqueta <body>).
y )
p (
q
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
9
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
Conversión de HTML a XHTML
Una posibilidad es la conversión manual, para ello:
1. Declarar espacio de nombres en el elemento <html>:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns http://www.w3.org/1999/xhtml >
2. Convertir todos los nombres de elementos y atributos a minúsculas, incluir etiquetas de
cierre para cada etiqueta de inicio y poner todos los valores de los atributos entre comillas.
cierre para cada etiqueta de inicio y poner todos los valores de los atributos entre comillas.
3. Asegurarse de que todos los elementos y atributos usados están definidos en la DTD
elegida. Si se quiere validar con la DTD estricta, hay que expresar todos los atributos de
estilo mediante hojas CSS.
Otra posibilidad es la conversión automática:
p
• Para ello, existen herramientas como HTML Tidy, que además de “limpiar” el código HTML
permite realizar una conversión a XHTML.
p
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
10
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
Validación de un documento XHTML (1)
La estructura básica de un documento XHTML es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<h d>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
...
</body>
</html>
</html>
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
11
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
Validación de un documento XHTML (2)
Existen diferentes formas de validar una página creada de acuerdo a una
determinada DTD:
• Algunos editores tienen el validador integrado en la propia herramienta.
• Algunos navegadores permite instalar un validador como complemento.
• El organismo W3C posee una herramienta que se puede utilizar gratuitamente a través de
Internet desde: http://validator.w3.org/
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
12
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
EJERCICIO 32
Validación de un documento XHTML (3)
Utilizar el validador online de W3C para corregir los errores del Ejercicio 26.
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
13
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
EJERCICIO 32
Validación de un documento XHTML (4)
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
14
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.1
EL LENGUAJE XHTML
EJERCICIO 32
Validación de un documento XHTML (5)
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
15
Índice: Tema 2.4 (Parte 1)
2.4 Hojas de estilo en cascada CSS
2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El
2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos
d l d
j
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.2
HOJAS DE ESTILO CSS
Motivación de las hojas de estilo (1)
HTML se creó como un lenguaje para la descripción de documentos, sin que la
presentación de la información o el diseño gráfico fuera un aspecto relevante.
Sin embargo, con la espectacular expansión de la WWW, ésta pasó a convertirse
en un medio de comunicación de masas y el aspecto de los documentos (páginas
web) pasó a ser un aspecto importante.
Aunque HTML ofrece recursos para crear presentaciones con estilo (dar un
determinado formato al contenido presentado) usando elementos y atributos
relativos a la presentación de la información, esto no es lo recomendable, sobre
b
ió
todo en webs complejas y de gran tamaño.
ió d l
d bl
i f
l
i
l
l
Crear cuenta
Comentarios de: Tema 2.4 - Hojas de estilo en cascada CSS (0)
No hay comentarios