XHTML de una maldita vez I: Introducción
Permalink | Archivado en: Diseño y Desarrollo Web, Tutoriales, XHTML
Este es el primer artítulo de un tutorial que cubre cómo realizar webs usando una de las tecnologías estándares del W3C: el XHTML. En este mismo blog iré escribiendo también tutoriales de CSS, que es la otra tecnología necesaria para hacer páginas web.
Para entender este tutorial no hace falta tener conocimientos previos, así que lo único que necesitas es:
- Un editor de texto plano: si usas Windows, te sirve el Bloc de Notas. Ten cuidado con algunos procesadores de texto como el Word, ya que da formato (negritas, fuentes, etc) al código y no queremos eso. Si usas Linux, tienes muchas alternativas: Kate, Vim, Emacs, Joe, etc.
- Un navegador que funcione bien y cumpla los estándares: el Firefox, por ejemplo. Es multiplataforma, libre, y muy bueno.
- Un navegador que funcione mal, tenga todo el mundo, y pase de los estándares. Quien-tú-ya-sabes (su nombre está escrito en la Lengua Negra, que no pronunciaré aquí).
Es muy recomendable que tengas a mano un navegador y el editor de texto para ir probando en el acto los ejemplos que aparecen aquí. Escribir código es la única manera de aprender.
¿Qué es el XHTML?
XHTML significa eXtensible HyperText Markup Language y es la versión modernizada del clásico HTML, pero compatible con XML.
Es un lenguaje semántico, lo que quiere decir que definimos qué significan las cosas en lugar de qué aspecto tienen. Por ejemplo, si tenemos el título de nuestra página, en lugar de decir “Lo quiero grande y con letras rojas”, le indicamos al navegador que “Este es el título de la página. Haz algo para que destaque”. Y no nos importa nada qué es ese “algo”.
Bueno, en realidad sí que nos importa, pero es que el aspecto de las cosas las controlamos mediante las hojas de estilo (CSS).
¿Y eso del 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 ni 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 diferentes hojas de estilo se consiguen resultados radicalmente diferentes, puedes echar un vistazo al Zen Garden o al Proyecto Camaleón.
¿Cómo funciona el XHTML?
XHTML está basado en etiquetas. Una etiqueta tiene esta forma:
<etiqueta>Aquí algo dentro</etiqueta>
Volvemos 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. Sin embargo, 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 mediante atributos. Ahora mismo no hace falta entender qué hacen, ya lo veremos más adelante. Sólo quédate con cómo van escritos:
<etiqueta atributo="valor">
Por último, un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas. Esto es una diferencia respecto al HTML, ya que con él podíamos poner atributos con o 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 freir huevos con aceite para el coche.
Mi amigo que es diseñador usa el Dreamweaver
El Macromedia Dreamweaver es un editor WYSIWYG muy extendido. Y bastante bueno, por cierto. El problema es que nos permite hacer webs sin tocar nada de código.
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 solos. Que quede claro que es mi opinión y no Ley Divina (todo se andará 
).
Una preguntilla…
¿Has mirado primero en Google? Es muy listo y lo sabe (casi) todo. Si aun así no te aclaras, puedes dejar un comentario en alguno de los posts del tutorial o escribirme un e-mail. Es mejor que escribas un comentario, porque así todos lo vemos y todos aprendemos.
3 comentarios »
Si quieres hacer un trackback, usa esta TrackBack URI
Escribe un comentario
Los párrafos y saltos de línea se ponen de forma automática. La dirección de e-mail no se mostrará nunca. Se permiten las siguientes etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Pues yo estoy ahora renovando todo mi blog (handmade cms!) y me estoy peleando con xHTML y CSS. Y… ¡he conseguido validar xHTML 1.1! Para mi es un logro. Siempre había algo que lo estropeaba. De todas formas, tendré que utilizar 1.0 Strict porque el 1.1 tienes que servirlo como application/xhtml+xml y no text/html. Pues eso. Qüe me estoy liando. Bueno post y que continúen
Comentario de iOne — 20-05-05 12:25 am
[...] Técnicamente no tenia ni idea de cómo hacer una web, así que cometí el primer fallo, bueno quizás el primero fue la absurda idea de querer una página picfortera, pero como ya llevo tantos el orden es lo de menos. A lo que iba, ese fallo al que me refería fue el de hacer caso del consejo de que con el Front Page diseñar una web era cosa de niños. Y sí, la página salió y todavía funciona, pero ahora me doy cuenta de la razón que tenia BenKo al decir que un huevo en aceite de motor también se puede freír. [...]
Pingback de Picafort Weblog » Diseño web — 14-11-05 1:42 pm
[...] Como no quería volver a cometer un fallo más, esta vez miré que usaban los que dominan la materia. Y es que tomar ejemplo de los que van un paso más avanzado que uno suele ir bien. Que BenKo lo use ya hubiera sido motivo suficiente, pero también descubrí que dos navegantes avanzados del foro lo usaban, me refiero al Putatriat y al Suki, este último fue definitivo ya que pensé que si alguien que era capaz de montar un servidor inalámbrico metido en una fiambrera llena de aceite lo usaba por algo debía ser. [...]
Pingback de Picafort Weblog » Word Press — 16-11-05 2:38 pm