Aplicaciones Web
XHTML+CSS
David Cabrero Souto
Grupo MADS (http://www.grupomads.org/)
Universidade da Coruña
W3C
Establece estándares: recomendaciones.
HTML 4.0
XHTML 1.0, XHTML 1.1, XHTML 2.0, XFORMS
CSS1, CSS2, CSS3
XML, XPath, XSLT, XLink, XSD, . . .
MathML, SMIL, SVG
. . .
Estilo: separar contentido (HTML) de presentación (CSS).
XHTML
Tres sabores de XHTML 1.0:
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
Lenguaje XML.
Documento = árbol XML.
Elementos contienen otros elementos.
Cada elemento está marcado por dos etiquetas inicio y fin.
Sintaxis:
Etiquetas encerradas en ángulos “<” y “>”.
“<etiqueta>”, “</etiqueta>”.
No se pueden cruzar etiquetas de elementos anidados.
Nombres de etiquetas en minúsculas.
Valores de atributos entre comillas.
<etiqueta attr=”valor”></etiqueta>
Comentarios: “<!– Comentario –>”
Estrucutura de un documento XHTML
HTML
Elemento raíz del documento.
Principio y fin: “<html>” “</html>”.
HEAD (“<head></head>”)
Metainformación del documento.
Primer elemento.
Ejemplo: “<title>¡Hola Web!</title>”.
Ejemplo: “<meta name="keywords" content="Linux,
Accesibilidad, Distribución" />”
BODY (“<body></body>”)
Después de HEAD.
Encierra el contenido del documento.
Estrucutura de un documento XHTML
HTML
Elemento raíz del documento.
Principio y fin: “<html>” “</html>”.
HEAD (“<head></head>”)
Metainformación del documento.
Primer elemento.
Ejemplo: “<title>¡Hola Web!</title>”.
Ejemplo: “<meta name="keywords" content="Linux,
Accesibilidad, Distribución" />”
BODY (“<body></body>”)
Después de HEAD.
Encierra el contenido del documento.
Estrucutura de un documento XHTML
HTML
Elemento raíz del documento.
Principio y fin: “<html>” “</html>”.
HEAD (“<head></head>”)
Metainformación del documento.
Primer elemento.
Ejemplo: “<title>¡Hola Web!</title>”.
Ejemplo: “<meta name="keywords" content="Linux,
Accesibilidad, Distribución" />”
BODY (“<body></body>”)
Después de HEAD.
Encierra el contenido del documento.
Elementos XHTML
Encabezados: h1, h2, h3, . . .
Párrafos: p
Listas:
Desordenada: ul
Ordenada: ol
Elemento de la lista: li
Lista de definiciones: dl
Término: dt
Definición: dd
Enfasis: em
Citas: cite
Acrónimo: abbr, acronym
Elementos XHTML
Encabezados: h1, h2, h3, . . .
Párrafos: p
Listas:
Desordenada: ul
Ordenada: ol
Elemento de la lista: li
Lista de definiciones: dl
Término: dt
Definición: dd
Enfasis: em
Citas: cite
Acrónimo: abbr, acronym
Elementos XHTML
Encabezados: h1, h2, h3, . . .
Párrafos: p
Listas:
Desordenada: ul
Ordenada: ol
Elemento de la lista: li
Lista de definiciones: dl
Término: dt
Definición: dd
Enfasis: em
Citas: cite
Acrónimo: abbr, acronym
Elementos XHTML
Encabezados: h1, h2, h3, . . .
Párrafos: p
Listas:
Desordenada: ul
Ordenada: ol
Elemento de la lista: li
Lista de definiciones: dl
Término: dt
Definición: dd
Enfasis: em
Citas: cite
Acrónimo: abbr, acronym
Elementos XHTML
Encabezados: h1, h2, h3, . . .
Párrafos: p
Listas:
Desordenada: ul
Ordenada: ol
Elemento de la lista: li
Lista de definiciones: dl
Término: dt
Definición: dd
Enfasis: em
Citas: cite
Acrónimo: abbr, acronym
Elementos XHTML
Encabezados: h1, h2, h3, . . .
Párrafos: p
Listas:
Desordenada: ul
Ordenada: ol
Elemento de la lista: li
Lista de definiciones: dl
Término: dt
Definición: dd
Enfasis: em
Citas: cite
Acrónimo: abbr, acronym
Elementos XHTML
Encabezados: h1, h2, h3, . . .
Párrafos: p
Listas:
Desordenada: ul
Ordenada: ol
Elemento de la lista: li
Lista de definiciones: dl
Término: dt
Definición: dd
Enfasis: em
Citas: cite
Acrónimo: abbr, acronym
Hipertexto XHTML
Enlace a un recurso externo.
Enlaces: elemento a
Destino = atributo href: “<a href="URL">contenido</a>”
“contenido” se presenta como hiperenlace.
Enlace dentro del documento.
Etiquetar un punto del documento (ancla).
“<a name="ancla">. . . </a>”
Hipervínculo: “<a href="#ancla">. . . </a>”
Hipertexto XHTML
Enlace a un recurso externo.
Enlaces: elemento a
Destino = atributo href: “<a href="URL">contenido</a>”
“contenido” se presenta como hiperenlace.
Enlace dentro del documento.
Etiquetar un punto del documento (ancla).
“<a name="ancla">. . . </a>”
Hipervínculo: “<a href="#ancla">. . . </a>”
Ejemplo: Tic-Tac-Toe
Juego similar al tres en raya.
No se pueden mover las fichas.
Si se llena el tablero = empate.
Ejemplo: Tic-Tac-Toe (II)
<html>
<head>
<title>TIC-TAC-TOE</title>
</head>
<body>
<h1>TIC-TAC-TOE</h1>
<p>Turno de: Jugador 1</p>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>
Separación de contenido y presentación
XHTML (HTML): contenido del documento.
CSS: presentación (aspecto).
CSS
Cascade Style Sheet.
Versiones: CSS1, CSS2, CSS3.
Presentación del documento.
Posibilidad de especificar varios estilos.
Pantalla, impresora, handheld, . . .
“Themes”, versiones alto contraste, . . .
CSS: Cómo enlazar a un documento
1 No recomendado: atributo style.
<h1 style="color:red;">
2 Hoja de estilo incrustada o interna.
<head>
<style type="text/css">
h1 { color: red; }
</style>
...
3 Hoja de estilo externa.
<head>
<link rel="stylesheet" href="css/default.css"
title="default"
type="text/css" />
<link rel="alternate stylesheet" href="css/hc.css"
title="Contraste alto" type="text/css" />
<link rel="stylesheet" type="text/css"
CSS: reglas
CSS = conjunto de reglas.
Regla = par (selector, elementos).
Selector: define a qué elementos se aplica la regla.
Elementos: pares atributo, valor.
h1 {
color: red;
}
table {
}
border: 1px solid #000000;
CSS: selectores
Elementos html. Ejemplo: h1, table, p, ...
Seleccionar por clase.
<table class="tablero">
table.tablero { border: 1px solid #000000; }
Seleccionar por identificador.
<table id="tabla01">
table#tabla01 { border: 1px solid #000000; }
Selector universal: *
*.tablero = .tablero, *#tablero = #tablero
CSS: selectores (II)
Varios elementos en un selector separados por comas.
h1, p, .xtra
Seleccionar descendientes, hermanos e hijos:
p > p, p + p, p p
Pseudo-clases
:first-child, :visited, :hover, ...
CSS: atributos
Background
Borde
Dimensiones
Fuentes
Margenes
Posición
. . .
CSS: valores
Dimensiones: pt, px, pc, in, cm, mm, em, ex.
xx-small, x-small, small, normal, large,
x-large, xx-large, larger, smaller
Colores: Nombres de color blue, valor RGB #0000ff,
rgb(0,0,255), rgb(0 %,0 %,100 %)
CSS: el modelo de caja
Ejemplo: Tic-Tac-Toe (CSS)
<td><p class="cas_vacia"/></td>
.cas_vacia, .cas_azul, .cas_roja {
border: 1px solid #000000;
width: 128px;
height: 128px;
}
.cas_azul {
}
.cas_roja {
}
background: #0000ff;
background: #ff0000;
CSS: Herencia
Algunos elementos heredan las propiedades del elemento
que los contiene.
<div>El texto de este párrafo está en rojo.
<p class="grande">Y este párrafo además,
en letra grande.</p>
</div>
div { color: red; }
p.grande { font-size: large; }
También existe el elemento span.
<p>...
<span class="xtra"><a href="...">...</a></span>
...</p>
XHTML+CSS: capas
Elemento div.
Pseudo-estructural, pseudo-visual.
Define un área rectangular.
Se puede modificar su posición.
Se pueden superponer.
Navegadores: modo estándares
Navegadores modernos: dos modos:
Modo cumplir estándares.
Quirksmode.
Switch: declaración de tipo de documento correcta.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML+CSS: validadores
http://www.w3.org/QA/Tools/, . . .
Analizan el documento.
Inidican los errores respecto al estándar.
Referencias
http://www.w3c.org/, http://www.w3c.es/
http://www.w3schools.com/,
http://www.quirksmode.org/
http://www.csszengarden.com/, . . .
http://www.alistapart.com/, . . .
. . .
“Designing With Web Standards”, Jeffrey Zeldman.
Crear cuenta
Comentarios de: Aplicaciones Web XHTML+CSS (0)
No hay comentarios