Posts filed under 'Curso de XHTML'
Curso XHTML II – Nuestro primer documento XHTML
Estructura básica de un documento XHTML
Después de varios apuntes previos, lo mejor es ponerse manos a la obra y comenzar a construir nuestro primer documento XHTML. Podemos insertar comentarios en nuestro documento de esta forma:
<!–Esto es un comentario–>
Los navegadores no tomarán en cuenta los comentarios y a nosotros nos serán de gran ayuda para ir describiendo cada elemento de nuestro documento. Veamos la estructura básica de un documento XHTML:
<?xml version="1.0" encoding="UTF-8"?><!–declaramos el xml y especificamos el encoding, en este caso UTF-8–>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!–declaramos el tipo de documento que estamos construyendo–>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" xml:lang="es-ES"><!–y el lenguaje que vamos a emplear, en este caso, el español–>
<head><!–comienza el encabezado de la página web, donde se incluirán algunas especificaciones–>
<title>Semanticode</title><!–el título de nuestra página–>
<meta http-equiv="content-type" content="text/html"/><!–decimos el tipo de contenido que va a tener nuestro documento, texto/html–>
<link rel="stylesheet" type="text/css" media="all" href="css/basics.css"/>
</head><!–cerramos el head–>
<body><!–abrimos el body (cuerpo), aquí es donde empieza el contenido de nuestro documento–>
<p>Este es el contenido de nuestro primer documento XHTML<p><!–esto es lo que se mostrará en nuestro navegador, para definir el párrafo hemos empleado la etiqueta <p>–>
</body><!–cerramos el body–>
</html><!–cerramos nuestro documento, aquí termina todo–>
Veamos con detalle el comienzo de nuestro documento:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" xml:lang="es-ES">
<head>
Realmente no es necesario saberse de memoria estas líneas de código, podemos copiarlas y pegarlas al comienzo de nuestro documento. Nos bastará saber que existen diferentes tipos de encoding, esto es, codificación de caracteres, y que el que nosotros hemos empleado, UTF-8, nos sirve para mostrar caracteres especiales (diéresis, tildes, etcétera).
2 comments Enero 3, 2008
Curso de XHTML I – Introducción
¿Qué es el XHTML?
El XHTML (lenguaje de marcado de hipertexto extendido) nos permite imprimir “marcas” (indicaciones) sobre un documento. Esto nos permite diferenciar entre distintos tipos de estructuras, secciones o contenidos. Se emplea para generar documentos y contenidos de hipertexto publicados en dispositivos web (navegadores, teléfonos móviles, portátiles…). Estos dispositivos (a los que, a partir de ahora, llamaremos agentes de usuario) son capaces de interpretar documentos XHTML. Las “marcas” nos permiten definir qué es un título y asignar a éste jerarquías de importancia (h1, h2,h3…). Por ejemplo:
<h1>Semanticode: Blog sobre diseño y semántica</h1>
<h2>Curso de XHTML - Introducción</h2>
Así, entenderemos que el título h1 tiene una jerarquía de importancia mayor que h2.
Ficheros XHTML, editores y navegadores
Los ficheros XHTML pueden representarse con las extensiones .html, .htm o .xhtml. Los agentes de usuario interpretarán dichos ficheros y los mostrarán en la pantalla. Así, cuando trabajemos con nuestro documento deberemos guardarlo con alguna de las extensiones mencionadas anteriormente.
Existen muchos editores de texto que nos ayudarán en el marcado de nuestros documentos. De entre todos ellos, en mi opinión los mejores son CODA o Komodo. Ambos para el sistema operativo Mac OS. Los hay también gratuitos, tanto para Windows como para Mac Os o Linux.
Es conveniente chequear el sitio en distintos navegadores. Hemos de saber que los más empleados son Internet Explorer (6 y 7), Mozilla Firefox (el mejor de ellos, que además cuenta con numerosas extensiones o plugins de gran ayuda), Ópera y Safari. Es conveniente emplear Mozilla Firefox como navegador predeterminado, pues de entre todos, es el que mejor se lleva con los estándares web.
Etiquetas (marcas)
El principal elemento de sintaxis en nuestro documento es la etiqueta (lo que antes denominábamos marca).
<p>Esta etiqueta se emplea para definir el contenido de un párrafo</p>
Este es un ejemplo del uso de una etiqueta, en este caso, la etiqueta p, que se abrirá y cerrará con paréntesis angulares. Debemos tener en cuenta, a modo de normativa, que toda etiqueta que abramos ha de ser cerrada. Abriremos la etiqueta así <p> y cerraremos la etiqueta del mismo modo pero añadiendo una barra </p>. Si no la cerramos, los agentes de usuario no interpretarán correctamente nuestro código y el código será mal generado.
Existen algunas etiquetas en cuyo uso se incluye la apertura y el cierre. Es el caso de la etiqueta <br/>. La etiqueta <br/> se utiliza para definir los “saltos de línea”, y es una abreviatura de <br><br/>. En este caso, bastará con colocar <br/> cuando queramos aplicar un salto de línea.
Esta es una frase que termina.<br/>
Tras la primera frase hay un salto de línea.<br/>
En el caso de que lo escribiésemos así…
Esta es una frase que termina.
Tras la primera frase hay un salto de línea.
Los agentes de usuario interpretarían dicho código sin saltos de línea, puesto que no reciben ninguna orden que les indique que han de mostrarlos.
Etiquetas de apertura con atributos
Algunas etiquetas pueden contener atributos que especifican características particulares de éstas. Los atributos tienen un nombre seguido de un igual = y entre comillas el valor de tal atributo.
<a href="http://semanticode.wordpress.com">Semanticode</a>
- <a> es la etiqueta
- href es el atributo
- http://semanticode.wordpress.com es el valor
Con esta etiqueta, atributo y valor estamos construyendo un enlace o vínculo. En este caso Semanticode será el nombre de nuestro enlace
1 comment Diciembre 26, 2007
