Lenguaje xhtml
- 1. LENGUAJES WEB DEL CLIENTE Aplicaciones Web
- 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
- 3. 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 IES Augustóbriga – 2º SMR – Aplicaciones Web XHTML
- 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/