Lenguaje xhtml

LENGUAJES WEB DEL CLIENTE

Aplicaciones Web

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

Página WebPágina Web

Estructura

Contenido

Apariencia

Comportamiento

HTML

CSS

Javascript

• Colores• Tipografías• Alineación

• Efectos• Validaciones• Automatización

• Párrafos• Encabezados• Listas

•Tablas• Capas• Etc.

• Textos• Imágenes• Enlaces

• Fondos• Tamaños • Etc.

rmonago

3


XHTML

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


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.

ETIQUETAS


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.

ESTRUCTURA


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>

REGLAS


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>

REGLAS


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>

REGLAS


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

REGLAS


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”>

REGLAS


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>

REGLAS


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>

VALIDAR UN DOCUMENTO XHTML


14

http://validator.w3.org/

http://validator.w3.org/

Lenguaje xhtml

Education

Transcript of Lenguaje xhtml