2. LENGUAJES DESDE EL CLIENTE
•Lenguaje de Marcas HTML.
•Hojas de Estilos CSS.
•Lenguaje de Marcas XHTML.
•JavaScript.
rmonago
2
IES Augustóbriga – 2º SMR – Aplicaciones Web
4. LENGUAJE XHTML
XHTML significa eXtensive HyperText Markup Language y es la versión
evolucionada del HTML. Es un lenguaje semántico, lo que quiere decir
que no definimos el aspecto de las cosas, sino lo que significan. Por
ejemplo, si tenemos el título de nuestra página, en lugar de decir “Lo
quiero grande en letras rojas”, le indicamos al navegador que “Este es el
título principal de la página”. Luego podemos controlar el aspecto con
las hojas de estilo CSS, pero no del XHTML.
XHTML es un lenguaje que se basa en etiquetas (tags). Una etiqueta
sería algo como esto:
<etiqueta>Algo aquí dentro</etiqueta>
rmonago
4
IES Augustóbriga – 2º SMR – Aplicaciones Web
5. VENTAJAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
5
Algunas mejoras que pueden ser percibidas para quienes migran a XHTML
•Los documentos XHTML son conformes a XML. Como tales son
fácilmente visualizados, editados y validados con herramientas XML
estándar.
•Los documentos XHTML pueden escribirse para que funcionen igual o
mejor que lo hacían antes, tanto en los agentes de usuarios conformes a
HTML 4.0 como en los nuevos agentes conformes a XHTML 1.0.
•Los documentos XHTML pueden usar aplicaciones (p.ej scripts y applets)
que se basen ya sea en el Modelo del Objeto de Documento (DOM) de
HTML o XML.
•A medida que la familia XHTML evolucione, los documentos conformes a
XHTML 1.0 estarán más preparados para interactuar dentro de y entre los
distintos entornos XHTML.
6. ETIQUETAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
6
La etiqueta que sirve para poner el título principal en la página es
<h1>.
<h1>Esto es un título</h1>
Entonces, <h1> marca el inicio de la etiqueta y </h1> se encarga
de cerrarla. También hay etiquetas que funcionan con una sola
parte, así:
<etiqueta />
Debes tener en cuenta el espacio en blanco que hay entre el
nombre de la etiqueta y la barra /. Es muy importante para que
funcione con los navegadores viejos.
7. ESTRUCTURA
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml” xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título de la web</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
8. REGLAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
8
Los documentos deben estar bien formados:
Un formato correcto en un documento XHTML es muy importante.
Esto quiere decir que todos los elementos deben tener etiquetas de
cierre, deben estar escritos de una forma determinada y además
todos los elementos deben estar anidados correctamente.
Código de elementos anidados:
<p>Ejemplo de elementos bien <b>anidados</b>.</p>
<p>Ejemplo de elementos mal <b>anidados.</p></b>
9. REGLAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
9
Los nombres de atributos y elementos deben ir en minúsculas:
Tanto los elementos como los atributos deben ir en minúsculas para
todos los elementos HTML y los nombres de atributos. Esto es
importante ya que XML interpreta las mayúsculas y las minúsculas de
forma diferente.
<body>Ejemplo correcto</body>
<BODY>Ejemplo incorrecto</BODY>
Los elementos que no estén vacios necesitan etiquetas de cierre:
<p>Ejemplo correcto.</p>
<p>Ejemplo correcto.</p>
<p>Ejemplo incorrecto.<p>Ejemplo incorrecto.</p>
10. REGLAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
10
Los valores de las etiquetas deben ir siempre entre comillas:
Todos los valores de los atributos deben ir entre comillas, incluso
aquellos que sean numéricos.
<table rows="3">
<table rows=3> ejemplo incorrecto
11. REGLAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
11
Toda etiqueta abierta se cierra.
Incluso los tag img, type (de los formularios) y br deben cerrarse.
<input type="hidden" value="9" name="pass" />
<br />
<img src="imagen.jpg" alt="Imagen" title="Imagen" />
Valido en HTML pero incorrecto en XHTML:
<input type="hidden" value="9" name="pass”>
<br>
<img src="imagen.jpg" alt="Imagen" title="Imagen”>
12. REGLAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
12
Las anclas son IDs.
Las anclas (anchor) que nos permiten navegar dentro una página
grande, ya no son referenciadas por el tag a sino por el ID del
elemento hacia el cual deseamos ir.
<img src="imagen.png" id="top" title="Imagen" alt="Imagen" />
<a href="#top">Ir arriba</a>
13. REGLAS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
13
Los atributos deben ser explícitos
Los atributos deben tener un nombre y un valor sin reducirlos
<input type="radio" value="2" checked="checked">
<td nowrap="nowrap"> Texto </td>
<option value="m" selected="selected">
En html podemos tener:
<input type="radio" value="2" checked>
<td nowrap> Texto </td>
<option value="m" selected>
14. VALIDAR UN DOCUMENTO XHTML
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
14
http://validator.w3.org/
