UNIVERSIDAD NACIONAL AUTÓNOMA DE MÉXICO Dirección General de Cómputo y de Tecnologías de Información y Comunicación Estructura básica de un documento HTML CURSOS EN LÍNEA ELIER EMANUEL LÓPEZ BASILIO Estructura básica de un documento HTML La estructura de cualquier tipo de documento es muy importante para que los lectores logren comprender el mensaje que se desea transmitir. Cualquier texto, ya sea un artículo de una revista, una nota periodística, una carta, etc., cuenta con una estructura básica plenamente identificable. De manera convencional, es fácil identificar componentes esenciales como un título principal, el contenido desplegado en párrafos y, en algunos casos, imágenes que permitan ilustrar el tema en cuestión. De manera similar, las páginas web necesitan elementos especializados para definir la estructura de su contenido. A continuación, estudiaremos los componentes básicos del lenguaje HTML que permiten establecer la estructura de una página web. Estructura de una página web El lenguaje HTML permite definir la estructura de una página web por medio de etiquetas. Las etiquetas son una serie de caracteres que se colocan entre los símbolos mayor que y menor que (<>), y sirven para comunicar al navegador cómo desplegar una página web en pantalla. La siguiente imagen permite observar las etiquetas de una página web básica: Figura 1. Código HTML desde el editor de código y su resultado en el navegador. Cada elemento del código indica al navegador información importante sobre el tipo de contenido de las etiquetas y la forma en que deberá ser desplegado el archivo en pantalla. Realicemos un análisis de cada uno de los elementos para comprender de mejor manera su funcionamiento: <!DOCTYPE html> es una instrucción especial del lenguaje HTML que sirve para señalar al navegador que el documento es un archivo del tipo HTML y, por lo tanto, deberá ser tratado como una página web. Recuerde que un archivo HTML es un documento de texto Dirección General de Cómputo y de Tecnologías de Información y Comunicación 1 Estructura básica de un documento HTML Elier Emanuel López Basilio que se guarda con la extensión “.html”. La extensión, en combinación con la cabecera <!DOCTYPE html>, permitirán a los navegadores entender que deberán interpretar el código contenido en el archivo para su despliegue como una página web. Las etiquetas <html></html> sirven para definir el contenedor principal para el código HTML de la página. Representa la raíz de un documento HTML. Todos los elementos deberán ser colocados dentro de este contenedor. Esta etiqueta indica al navegador que es el comienzo del código del lenguaje HTML. Las etiquetas <head></head> son empleadas para especificar el contenedor de información sobre la página. Típicamente, contiene información de metadatos. En este caso, podemos observar que contiene la etiqueta <meta charset = ”utf-8”> que sirve para especificar el tipo de caracteres que el navegador deberá reconocer. Además, cuenta con las etiquetas <title></title> que funcionan para que su contenido se despliegue en pantalla como el nombre de la página en la pestaña del navegador. Las etiquetas <body></body> funcionan para definir el cuerpo del documento. Es el contenedor donde se colocará el contenido principal que se desplegará en la página. Es dentro de estas etiquetas que el desarrollador pasará el mayor tiempo implementando código. En este caso, cuenta con las etiquetas <h1></h1> que funcionan para agregar un título principal y un elemento de párrafo delimitado por las etiquetas <p></p>. Figura 2. Contenedores principales de una página web básica. Aunque existen algunas excepciones, será recomendable concebir a cada uno de los elementos de HTML como un contendedor delimitado por las etiquetas de apertura <> y de cierre </>. De esta manera, resultará más fácil comprender dónde es que se debe colocar el contenido de cada uno de los elementos. Más adelante revisaremos esta cuestión a detalle. Por el momento, considere los tres contenedores principales mostrados en la figura 2, donde <html> sirve como contenedor de las etiquetas <head> y <body> que, a su vez, sirven como contenedores para otros elementos. Dirección General de Cómputo y de Tecnologías de Información y Comunicación 2 Estructura básica de un documento HTML Elier Emanuel López Basilio Etiquetas y su sintaxis Básicamente, las etiquetas actúan como contenedores que sirven para definir los elementos que se desean incluir en una página web. A continuación, estudiaremos la sintaxis básica. Sintaxis Como se ha mencionado, para incorporar un elemento en un documento web se utiliza una sintaxis especial para definir las etiquetas de apertura y de cierre. Es decir, en la mayoría de los casos, será necesario contar con un par de etiquetas que funcionen para definir un elemento. Por ejemplo, la siguiente figura ilustra la sintaxis necesaria para definir un elemento de título: Figura 3. Sintaxis de etiquetas de un elemento h1 en HTML. Analicemos la sintaxis. Podemos observar la diferencia entre la etiqueta de apertura y la etiqueta de cierre. Ambas cuentan con los signos menor y mayor que, y, dentro de estos, los caracteres reservados del lenguaje HTML que sirven para señalar un título principal: “h1”. Sin embargo, la etiqueta de cierre cuenta con una barra inclinada que permite diferenciarlas. En la mayoría de los casos, será necesario utilizar ambas etiquetas para delimitar el contenido del elemento, aunque existen algunos elementos especiales que solo necesitan la etiqueta de apertura. Por otro lado, los caracteres reservados del lenguaje HTML permiten definir el tipo de elemento que se desea implementar. Existe una amplia variedad de estos elementos, por el momento se ha observado cómo utilizar las etiquetas <h1> para agregar un título principal y la etiqueta <p> para agregar párrafos, sin embargo, en los siguientes documentos se estudiarán muchas otras que permitirán enriquecer el contenido de una página web. La sintaxis del lenguaje HTML se vuelve muy sencilla de implementar una vez que se ha tomado un poco de práctica, sobre todo si se utiliza el software adecuado para la creación de los archivos. En la siguiente sección, estudiaremos la importancia de los editores de código que ayudan a realizar esta tarea. Dirección General de Cómputo y de Tecnologías de Información y Comunicación 3 Estructura básica de un documento HTML Elier Emanuel López Basilio Editor de código Como se ha mencionado, una página web es un archivo de texto creado a partir de la sintaxis del lenguaje HTML que, además, ha sido almacenado con la extensión “.html”. Por lo tanto, en su forma más básica, es posible crear una página web utilizando simplemente un editor de texto. Sin embargo, existen editores de código especializados que cuentan con herramientas específicas que facilitan su creación y edición. A continuación, mencionaremos algunas de las ventajas de utilizar este tipo de software. Un editor de código es un programa de software que facilita la creación de páginas web por medio de herramientas especializadas entre las que destacan: Detección de errores. Reconocimiento y corrección de sintaxis. Funciones para autocompletar porciones de código. Patrones de color para distinguir etiquetas, elementos y propiedades. El contar con estas herramientas facilitará enormemente la edición del código y el usuario podrá identificar claramente los diferentes fragmentos del documento. Considere la siguiente comparación entre un editor de texto convencional y un editor de código: Figura 4. A la izquierda la imagen del código en un editor de texto, a la derecha en un editor de código. A simple vista es posible distinguir cómo es que el editor de código facilita la identificación de elementos del lenguaje HTML. Esta presentación, en combinación con las diferentes herramientas con las que cuentan los editores de código, ayudarán al desarrollador principiante en la creación de páginas web. En este documento se han revisado algunos puntos importantes: La estructura de una página web puede definirse por medio de elementos que funcionan como contenedores de código. Dirección General de Cómputo y de Tecnologías de Información y Comunicación 4 Estructura básica de un documento HTML Elier Emanuel López Basilio La sintaxis del lenguaje HTML se basa en el uso de etiquetas que funcionan, en su mayoría, utilizando caracteres especiales para definir los elementos de apertura y de cierre que ayudan a delimitar su contenido. Existe una amplia variedad de etiquetas que ayudan al navegador a comprender cómo es que la página web deberá desplegarse en pantalla. Los editores de código facilitan la tarea del desarrollador, pues cuentan con herramientas especializadas para la creación y edición de páginas web. Dirección General de Cómputo y de Tecnologías de Información y Comunicación 5
