07 Dic
Estructura de una Página Web
Un sitio web es una colección de páginas o documentos HTML que comparten un dominio de Internet y una misma misión informativa. Así, el sitio web de un periódico online, de un blog, de una empresa, de una institución o de una campaña de activismo social se compondrá, en la mayoría de los casos, de un conjunto de páginas que compartirán una estética o identidad gráfica y una estructura.
La ingente cantidad de páginas web existentes en el ciberespacio hace difícil y un tanto vacuo hablar de la estructura visual que debería tener una web. El crecimiento en el uso de dispositivos móviles ha conducido a que muchas páginas web presenten dos o tres estructuras visuales diferentes: una para equipos de escritorio, otra para tabletas y otra para smartphones.
Lenguajes Empleados en el Desarrollo de un Sitio Web
El lenguaje de marcas de hipertexto, el de hojas de estilo en cascada y el lenguaje de cliente JavaScript son empleados, respectivamente, para determinar el contenido, la presentación y las funcionalidades de la página.
1 El Lenguaje de Marcas
Se trata de un sistema para anotar un documento de texto, de tal modo que las marcas o etiquetas con las especificaciones proporcionadas sean plenamente distinguibles del texto dicho.
HTML es un lenguaje de marcado de hipertexto, destinado a anotar documentos de hipertexto. La mayor parte de etiquetas emplean una sintaxis particular: constan de una etiqueta de apertura y otra análoga de cierre.
El contenido texto resaltado debe representarse de una forma destacada con respecto al resto del texto. El documento HTML está compuesto por bloques anidados, cada uno de ellos definido por una etiqueta de apertura y otra de cierre. Entre ellos, fijémonos en los siguientes:
- En la parte superior del documento se sitúa la denominada Definición de Tipo de Documento o DTD. La DTD es una indicación del tipo de marcado que emplea el documento.
- Las etiquetas
<html>y</html>indican el comienzo y final del documento HTML. - Las etiquetas
<head>y</head>delimitan la cabecera del documento HTML. Esta cabecera contiene información sobre el propio documento HTML, como su título, la codificación de caracteres que emplea, las hojas de estilo y los archivos JavaScript que empleará, o algunos metaelementos como la descripción de la página. Con excepción del título<title>del documento, la información contenida en la cabecera no se mostrará en el navegador. - Las etiquetas
<body>y</body>delimitan el cuerpo o el contenido visual propiamente dicho del documento.
HTML 4.0 se publica en 1998 y supone un gran avance, como la posibilidad de incluir hojas de estilo y trozos de código para ser ejecutados por el navegador web, mejoras en la accesibilidad y en la organización de la información.
Una de las tendencias más destacadas en la evolución del lenguaje HTML es la progresiva separación del contenido y la presentación del documento. En la actualidad, se recomienda reservar el lenguaje de hipertexto para definir la semántica del documento, empleando el lenguaje de hojas de estilo en cascada para el formato o presentación gráfica del mismo.
Desde la publicación de HTML 4.01, la actividad de estandarización se detuvo y el W3C se centró en la preparación del estándar XHTML, una versión más avanzada de HTML. HTML4 y XHTML son estándares publicados por el World Wide Web Consortium, mientras que HTML5 es un estándar de facto publicado por una asociación de fabricantes de software.
Los objetivos para el desarrollo de esta nueva versión del lenguaje de marcado de hipertexto son los siguientes:
- Incorporar al lenguaje soporte para mostrar elementos multimedia. Se introducen etiquetas como
<audio>y<video>. - Definir un único lenguaje de marcado, que pueda escribirse con la sintaxis de HTML y de XHTML.
- Incorporar nuevos elementos para mejorar el marcado de la estructura, entre ellos podemos citar los siguientes:
<section>, que representa una sección genérica del documento que puede usarse en combinación con las etiquetas de encabezados<h1>,<h2>, …<article>, representa un trozo independiente en el contenido del documento.<main>y<aside>, se pueden usar para indicar cuáles son los contenidos principales de un documento y cuáles resultan más accesorios o están menos relacionados con el documento.<header>, se emplea para presentar información introductoria.<footer>, se usa para una sección con información sobre la autoría o el tipo de licencia del documento.<nav>, representa un menú de navegación.<figure>, se usa para incluir una imagen acompañada al texto y a la que se puede hacer referencia desde este.
Se introducen una serie de mejoras en los formularios de introducción de datos, con nuevos tipos de datos como email, date, … Cuando en un formulario se introduce un campo de tipo date, el navegador presentará un calendario para que el usuario pueda elegir la fecha que desea introducir. Se incluyen una serie de interfaces de aplicación programables para la creación de aplicaciones web y la posibilidad de crear gráficos dinámicos.
2 Maquetación Web y Lenguaje de Estilos en Cascada: CSS
El lenguaje CSS surge a finales de la década de 1990 para la especificación del estilo o la presentación de documentos HTML y otros. Este lenguaje usa una serie de propiedades basadas en la lengua inglesa, como border, color o background.
El lenguaje CSS se estructura en bloques a los que se aplican ciertas reglas. Los bloques vienen definidos por unos selectores que pueden ser de varios tipos. Si usamos como selector una de las etiquetas definidas en el lenguaje HTML, especificaremos reglas que se aplicarán a todas las instancias de la etiqueta indicada que estén presentes en la página web.
Deja un comentario