Comunidad de diseño web y desarrollo en internet

Introducción

¿Qué es el XHTML?

XHTML significa eXtensible HyperText Markup Language y es la versión modernizada del tradicional HTML4. Si ya conoces HTML, al final del manual hay un apéndice para que sea más fácil la migración a XHTML.

4Lenguaje utilizado para crear páginas web.

XHTML 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. Haz algo para que destaque”. Y ese “algo” lo dejamos a decisión del navegador.

¿Y eso de CSS?

CSS son las siglas de Cascading Style Sheets y son un regalo del cielo. Si el documento XHTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar una sola línea de código en el archivo .html. Esto nos permite separar el contenido del aspecto, y es de gran importancia.

Si quieres ver un ejemplo de cómo con el mismo código XHTML y distintos archivos CSS se pueden conseguir resultados totalmente diferentes, a la vez que espectaculares, échale un vistazo al CSS Zen Garden y al Proyecto Camaleón.

¿Cómo funciona el XHTML?

XHTML es un lenguaje basado en etiquetas (tags). Una etiqueta tiene la siguiente forma:

<etiqueta>Algo aquí dentro</etiqueta>

Volviendo al ejemplo anterior de nuestro título: la etiqueta para poner el título principal en la página es <h1>. Entonces nos quedaría:

<h1>What is the Matrix?</h1>

Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga de cerrarla. Hay etiquetas que funcionan con una sola parte, y son así:

<etiqueta />

Observa el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que los navegadores antiguos no se vuelvan locos.

Hay etiquetas que pueden modificarse con atributos. Ahora mismo no hace falta entender qué hacen, ya los veremos más adelante. Sólo quédate con cómo van escritos:

<etiqueta atributo="valor">

Por último, queda comentar un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas7.

7Esto es un diferencia respecto al HTML, ya que podíamos poner atributos sin comillas y no importaba si escribíamos en mayúsculas o minúsculas.

¿Pero para hacer webs no se usa el FrontPage?

Sí. También puedes freír huevos con aceite para el coche.

Mi amigo que es diseñador usa Dreamweaver

El Macromedia Dreamweaver es un editor WYSIWYG8 muy extendido e idolatrado por infinidad de diseñadores. El problema es que nos permite hacer webs sin tocar nada de código.

8What You See Is What You Get (en castellano, “lo que ves es lo que obtienes”).

Sí, eso es un problema. Genera código basura y no tenemos control sobre lo que hacemos. Así que antes de usar Dreamweaver o algo similar, tenemos que aprender a hacer las webs nosotros solitos. Que quede claro que es mi opinión y no Ley Divina. . .

Una preguntilla...

¿Has mirado primero en Google? Es muy listo y lo sabe (casi) todo. Si aún así no te aclaras, mi e-mail es benko@ladybenko.net. También puedes preguntar en el foro de CSS y XHTML de Cristalab.

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.