Página web básica
Además de definir partes individuales de tu página (como “un párrafo” o “una imagen”), HTML también cuenta con una serie de elementos a nivel de bloque que se utilizan para definir áreas de tu sitio web (como “la cabecera”, “el menú de navegación”, “la columna de contenido principal”). Este artículo analiza cómo planificar la estructura básica de un sitio web y cómo escribir el HTML para representar esta estructura.
Secciones básicas de un documentoLas páginas web pueden tener y tendrán un aspecto bastante diferente entre sí, pero todas suelen compartir componentes estándar similares, a menos que la página muestre un vídeo o un juego a pantalla completa, forme parte de algún tipo de proyecto artístico o simplemente esté mal estructurada:
Enlaces a las secciones principales del sitio; suelen estar representados por botones de menú, enlaces o pestañas. Al igual que la cabecera, este contenido suele ser consistente de una página web a otra: tener una navegación incoherente en tu sitio web sólo hará que los usuarios se sientan confundidos y frustrados. Muchos diseñadores web consideran que la barra de navegación forma parte de la cabecera en lugar de ser un componente individual, pero esto no es un requisito; de hecho, algunos también argumentan que tener las dos separadas es mejor para la accesibilidad, ya que los lectores de pantalla pueden leer las dos características mejor si están separadas.
Comentarios
Estoy tratando de entender mejor el diseño de HTML, pero es difícil tener una idea de ello, incluso teniendo la fuente abierta en un monitor separado, porque hay mucho código expansivo y misceláneo. Supongo que podría revisarlo, limpiarlo y configurar algún tipo de sistema de árbol plegable personalizado, pero eso llevaría demasiado tiempo para la cantidad de páginas de las que me gustaría tener una visión rápida del diseño/estructura.
Como otros han mencionado, las herramientas para desarrolladores web son buenas para este tipo de trabajo/aprendizaje. Todos los navegadores modernos tienen esto incorporado. Como estás usando Firefox, puedes hacer clic con el botón derecho del ratón en la parte que te interesa y seleccionar “Inspeccionar elemento”. Esto cargará un panel separado, con la fuente, desplazado hasta el elemento de interés.
Otra alternativa es el complemento de Firefox Firebug, que es donde la mayoría de estas herramientas para desarrolladores se inspiraron. Hay un gran solapamiento con las herramientas para desarrolladores integradas en Firefox, y es principalmente una cuestión de preferencia personal en cuanto a su uso. Yo tiendo a usar Firebug ya que lo usé desde el principio, y es con lo que estoy más familiarizado.
Diagrama de la estructura del sitio web
Por ejemplo, Ruby on Rails (un framework MVC) tiene una carpeta diferente para los distintos tipos de modelos del sitio. Puedes usar el archivo routes.rb para hacer parecer que los archivos están ubicados en otras partes de los directorios, pero se enmascara con el enrutamiento de sus ubicaciones reales. (no es extremadamente exacto, pero da una versión reducida de lo que sucede)
Sin embargo, si el sitio web no es tuyo, entonces estarás limitado en cuanto a lo que puedes acceder. Incluso si consigues encontrar una estructura de sitio, a través de http, serías incapaz de ver cualquier código ejecutado del lado del servidor.
Los sitios web no son como los ordenadores de su red, son máquinas remotas y como tales deben tener seguridad. Si quieren que veas la estructura la verás, si no quieren no la verás, así de simple.
Estructura del sitio web
Una vez que hayas guardado tu código en tu carpeta con el nombre adecuado, cierra el cuaderno. En tu carpeta, además del cuaderno, verás el icono que representa el archivo que acabas de grabar.
Para ejecutar la página que acaba de crear, haga doble clic en el icono. Automáticamente se abrirá el navegador y se cargará la página. La ruta completa y el nombre del archivo aparecerán en la barra de direcciones.
Para ello, cierra el navegador y, dentro de la carpeta en la que estés trabajando, arrastra el icono de template.html sobre el cuaderno. De este modo, el cuaderno se abrirá y cargará el código fuente que habías escrito previamente.