Alguna información general que puede serle útil antes de responder la pregunta:
En el desarrollo web profesional, los archivos HTML generalmente se combinan con un servicio de enrutamiento y un lenguaje de script del lado del servidor (comúnmente PHP o Node.js). Ambos tienen el concepto de vistas o plantillas, que alimentan el HTML compilado de su navegador, puede entender que se ha visto afectado por algún nivel de lógica detrás de él (pero eso generalmente no es directamente evidente). Entonces, en el concepto general, un archivo HTML es una vista que carece de una lógica particular. Se puede usar directamente, pero una vez que te sientas cómodo con eso, debes emparejarlo con un lenguaje del lado del servidor, que es algo que abordaré más adelante en esta publicación.
Puede estructurar sus archivos HTML de la misma manera que lo haría con plantillas o vistas. Ignorar el enrutamiento sofisticado u otros marcos de estructuración pueden obligarlo a hacerlo, hay un principio simple que sigo: agrupe las páginas relevantes por contexto.
- A partir del tercer trimestre de 2014, ¿cuáles son todos los pros y los contras entre Play (Scala) y meteor.js (node.js / JavaScript) para crear aplicaciones web?
- ¿Cuáles son las ventajas y desventajas de usar PHP 5.x versus PHP 7?
- ¿Qué hace a un excelente desarrollador web? ¿Qué cualidades buscan las personas en su personal, consultores y contratistas independientes cuando contratan a un desarrollador web para construir un sitio web?
- ¿Qué tan difícil es aprender programación y convertirse en desarrollador web?
- ¿Cómo sería un sistema operativo que desaprobara efectivamente el navegador web?
Los contextos que usualmente son:
- el subsistema (coloca todos los archivos relacionados con un algoritmo significativo, es decir, el motor de búsqueda en la misma carpeta “motor de búsqueda”, o tiene algún tipo de calculadora que crea algunas estadísticas “stat-tracker”, etc.);
- el tema (es decir, estoy escribiendo archivos para ayudar a administrar un producto en un sitio web, por lo que los coloco todos en una carpeta “producto”, y si estoy tratando con el cliente, tendré una carpeta “cliente”, y pronto).
Volviendo a acoplar sus páginas HTML con archivos CSS, hay un problema importante que debe evitarse.
Supongamos que tiene sus 8 páginas hechas, junto con 8 archivos CSS, y desea cambiar algo en el diseño. Tal vez desee que todos sus encabezados h1 tengan un tamaño de fuente diferente. Tal vez vas a cambiar tu color primario. Eso significa que tendría que revisar todos los archivos CSS individualmente y cambiar esa propiedad. Esto no es demasiado difícil en un proyecto pequeño, pero a medida que ganas experiencia, la cantidad de trabajo se convierte en una pesadilla. Entonces, la forma de evitar esto es confiar en el concepto de plantillas:
Cree su trabajo en torno a elementos reutilizables y mantenga un archivo maestro que incluya con su proyecto. Entonces, en lugar de style1.css, style2.css, style3.css, etc., simplemente escriba todo en style.css e inclúyalo una vez en todos los encabezados.
Pero ahora, ¿qué pasa si quieres cambiar style.css a my-cool-style.css? Aún necesitaría revisar 8 archivos HTML para hacerlo. Nuevamente, mucho trabajo cuando su proyecto se hace más grande y tampoco una cantidad insignificante en este momento. Para evitar eso, las personas generalmente crean un archivo de sitio maestro (comúnmente conocido como la plantilla maestra) que incluye los encabezados del sitio (lo que se encuentra entre , generalmente también incluye su CSS), encabezado (generalmente una barra de navegación y / o logotipo) y pie de página (generalmente enlaces a derechos de autor, etc.) de su sitio web.
Por lo tanto, en última instancia, le recomiendo que aprenda a usar dicho archivo, pero para simplificar las cosas, puede mantener su encabezado, encabezado y pie de página en 3 archivos, que incluye según sea necesario en sus páginas. Si necesita títulos dinámicos, puede lograrlo a través de un trabajo adicional, pero manteniéndolo simple, puede omitir la sección de encabezado y mantener ese manual en sus archivos.
En resumen, así es como estructuraría un sitio web muy simple usando PHP para representar a clientes y productos junto con algunas páginas ficticias:
/www/
—— → / index.php
—— → / css / style.css
—— → / incluye / header.php
—— → / incluye / footer.php
—— → /customer/customer-page.php
—— → / customer / customer-dashboard.php
—— → / product / product-page.php
—— → / product / product-edit.php
En index.php, su página de inicio (y bueno, probablemente la mayoría de las otras páginas también), tendría algo como:
<? php include ('/includes/header.php'); ?>
// el resto de tus cosas; incluso puede ser HTML sin formato
En su header.php, tendría algo como:
Después de hacer esta configuración inicial, puede continuar escribiendo HTML sin formato siempre que lo incluya a través de este método. También puede incluir archivos .html usando PHP. Este es todo el PHP que necesitarías para ahorrarte mucho trabajo al confiar solo en HTML puro. Los archivos .php funcionan igual que los archivos .html, por lo que no está obligado a usar más de lo que he escrito anteriormente si adopta este enfoque.
Puede leer más sobre la función de inclusión aquí: incluir – Manual
Finalmente, una cosa más que me gustaría mencionar es que también puede estructurar su CSS de una manera similar si le facilita el desarrollo, pero necesitaría ensuciarse las manos con algo como SCSS para usar importaciones (¡Pero también tiene muchas otras características elegantes!). Le permitiría tener un archivo CSS maestro compilado (lo que le ahorrará dolores de cabeza al escribir encabezados) al tiempo que también tiene archivos individuales que usted, como desarrollador, puede leer rápidamente.
¡La mejor de las suertes para ti! Sé que esta respuesta puede parecer abrumadora, pero obtener un poco de experiencia con un lenguaje del lado del servidor ahora le ahorrará muchos dolores de cabeza al trabajar con HTML sin formato.
