En este tutorial se mostrará la estructura de un documento HTML (lenguaje de marcas hipertextual) y como se divide, así como el tipo de información que se puede insertar en cada una de estas divisiones. También se definirá el tipo de documento y las bases para diseñar un documento HTML compatible con el código XHTML (lenguaje de marcas hipertextual extensible).
Un documento HTML está básicamente separado en dos segmentos: el encabezado (tag HTML head) y el cuerpo (tag HTML body), ambos contenidos por el tag html. Le agregas a esto una declaración de tipo de documento en la parte superior y obtienes la estructura básica de documento para una página web.
Todo documento HTML correctamente escrito comienza con una declaración básica que define el tipo del mismo. Esta declaración se hace mediante el tag HTML !DOCTYPE y es la primera cosa que debe aparecer en todo el documento. Esto indica al agente procesador (como por ejemplo, navegadores, motores de búsqueda, etc.) a qué estándar supuestamente obedece el documento que está a punto de procesar.
Una declaración típica para un documento correctamente escrito de acuerdo con el estándar XHTML 1.0 Strict debería hacerse de la siguiente manera:
Para ver declaraciones de otros tipos de documentos, ver la referencia para el tag HTML !DOCTYPE.
El tag html actúa como un contenedor para todo el documento. Con la excepción del tag HTML !DOCTYPE cada carácter del documento debería situarse en medio de los tags html de apertura y cierre. El tag html puede también ser usado para definir el lenguaje del documento mediante el atributo "lang".
Al escribir código XHTML hay dos cosas por considerar. La primera es que el atributo "lang" (para todos los tags que lo acepten) recibe una diferente denominación: "xml:lang". Esto no significa que los códigos de lenguaje sean diferentes, solo el nombre del atributo cambia. La segunda cosa por considerar, es que el atributo "xmlns" también debe ser definido para el tag html. Un documento normal compatible con XHTML 1.0 Strict debería tener esta definición básica:
Asimismo el contenido del tag html puede ser básicamente dividido en dos partes: el encabezado (tag HTML head) y el cuerpo (tag HTML body).
El encabezado de un documento HTML actúa como contenedor para mucha información particular que es definida mediante un grupo de tags. Toda la información contenida en el encabezado del documento es cargada antes que el resto, por estar definida antes que el segmento del cuerpo. Dado que todo el contenido del encabezado de un documento es información no visual (a excepción del título), el encabezado se carga antes que el documento pueda ser mostrado, lo cual puede ser útil para definir muchas características que necesiten ser precargadas (por ejemplo, scripts).
El encabezado se encuentra encerrado por el tag HTML head y contiene algunas de estas definiciones de tags:
Nota que sólo hemos descrito brevemente los tags listados anteriormente. Puedes encontrar más información acerca del uso de los mismos en los recursos especificados para cada uno. Observa este ejemplo de encabezado:
El cuerpo de un documento HTML es el contenedor para la parte visual del mismo. Todas las cosas escritas aquí serán mostradas cuando el documento sea finalmente graficado. La mayoría de los tags pueden ser insertados en el cuerpo del documento (dentro del tag HTML body) y darán forma a los aspectos visuales del mismo.
Para este tutorial, construiremos una estructura básica de documento que será útil para el desarrollo de las prácticas de los tutoriales siguientes.
Para empezar, estableceremos la primera cosa que todo documento debería tener para encajar en los estándares: la declaración del tipo de documento (DTD). En este ejemplo, y debido a que consideramos que es la mejor opción (la última versión que da pocos problemas de compatibilidad con navegadores), construiremos un documento compatible con XHTML. Para ello, primero buscaremos en la referencia para el tag HTML !DOCTYPE, de donde obtendremos la declaración correcta.
La declaración anterior establecerá que puede hacerse y que no, en nuestro documento.
El próximo paso en nuestra práctica es definir el tag html dentro del cual todo el documento será encerrado. Con este tag, también estableceremos dos parámetros: el nombre de espacio XML, mediante el atributo "xmlns", y el lenguaje del documento mediante el atributo "xml:lang" (nota que otros estándares no compatibles con XML, como HTML 4.01, pueden utilizar el atributo "lang" en su lugar). El valor del atributo "xml:lang" puede ser obtenido de esta lista de códigos de lenguaje.
Ahora agregaremos dos partes importantes del documento: el encabezado y el cuerpo. Ambos tags, el tag HTML head y el tag HTML body, serán insertados, en ese órden, como contenido del tag html. Aún cuando ambos elementos poseen muchos atributos disponibles, no utilizaremos ninguno de ellos dado que no existe la necesidad en este ejemplo (como en la mayoría de los documentos básicos). Para ahorrarnos pasos agregaremos ambos al mismo tiempo.
Desde aquí, simplemente insertaremos un título en el encabezado; el contenido del cuerpo será dejado para tutoriales futuros.
Recuerda que el título debe describir de manera breve el contenido del documento. Emplazaremos el título usando el tag HTML title.
Eso es. La estructura principal para un documento básico ha sido establecida. Este "marco" puede ser reusado para construir otros documentos, y será de hecho utilizado en los próximos tutoriales. Prepárate!