Comment structurer mon HTML pour une bonne réutilisation et maintenance du code?

J'ai une base limitée dans le codage des applications natives en utilisant des langages comme C++, C, Java, mais maintenant que j'essaie de faire en développement web. Alors que la plupart du temps, il est assez simple et propre, je vais avoir un peu de mal à comprendre comment je peux créer des sites web et des applications web qui font un bon travail dans la réutilisation de code existant, le cas échéant. Si je comprends bien, lors de l'utilisation de choses comme le JavaScript, CSS, et PHP, vous pouvez simplement importer des scripts à partir d'autres fichiers pour l'utilisation dans un fichier html, ce qui est très utile. Mais je vais avoir un moment difficile essayer de comprendre comment cela peut être fait avec HTML, est-il possible?

Par exempledire que j'ai une seule page web avec une "barre d'en-tête" et un tas de contenu unique ci-dessous (par exemple, la stackoverflow logo, les boutons et les menus en haut de cette page). Mais maintenant, je veux élargir mon site web et ajouter 3 nouvelles pages qui partagent une mise en page similaire et ont exactement le même en-tête " bar " au sommet. Une façon d'atteindre cet objectif pourrait être de simplement copier le que contient la partie du code et le coller dans page2.html, page3.html et page4.html; le code unique pour chaque page séparée, et cela fonctionne très bien. Le problème que j'ai avec cette approche est que cela fait vraiment une douleur de modifier le contenu de l'en-tête " bar " sans passer par plusieurs pages de HTML, et les chances de créer bizarre incohérences dans la conception/contenu devient élevé. Je suppose qu' "stackoverflow.com/questions/ask" et "stackoverflow.com/tags" ne contiennent pas de dupliquer, copier et colle le code pour les éléments en haut de la page, mais je ne suis pas sûr de la façon d'atteindre ce à cause de mon peu de HTML expérience..

Donc, est-il un moyen de "notamment" ou "importer" code HTML pour le bien de nettoyer la réutilisation de code sur plusieurs pages? Cette fonctionnalité est intégrée dans le HTML ou dois-je besoin d'approfondir les choses, comme le JavaScript et le PHP pour créer bien structurée sites web? J'ai cherché la réponse à cette question, et quelques personnes ont suggéré d'iframes, mais alors presque immédiatement suggéré à l'encontre de leur utilisation dans le web design moderne.. Ce peut être une bonne approche?

source d'informationauteur MrKatSwordfish

  1. 7

    La possibilité d'inclure des morceaux de code est maintenant disponible, mais il manque un bon prise en charge du navigateur. Il est appelé html-templates. Dans l'avenir, cela va vous permettre de créer vous-même des modèles html-afin d'éviter la duplication de code. Mais pour l'instant.. pas natif HTML, que d'autres technologies (PHP, Javascript, Ruby base et qu'est-ce-pas).

  2. 6

    Ce que je fais habituellement pour le HTML est de faire une base de mise en page du site et comme vous voulez charger dans la plupart des automatiquement le contenu. Je souhaite tout d'abord de créer toutes les div qui détiennent le contenu, puis de remplir ce avec le contenu que vous souhaitez, de votre en-tête, ajouter un logo de certains de bienvenue de texte, une barre de navigation etc. Je puis découpez-le tout à l'intérieur de la tête de la div et de la coller dans header.html.

    Maintenant, je voudrais utiliser JQuery, un plugin javascript pour charger toutes les données HTML de header.html dans l'en-tête div. Le code JQuery pour pour cela ressemblerait à quelque chose comme ça, désolé, ça a été un moment et n'ont pas accès à des outils de droit maintenant.

    $(document).ready(function(){
   $('#header').load("header.html");
});

    Pour PHP, vous pouvez écrire des fonctions de fichier et:
    include "functions.php"; PHP prend en charge la programmation orientée objet ainsi et vous pourriez faire des classes réutilisables et des méthodes à l'intérieur.

  3. 5

    Si vous arrive d'utiliser Dreamweaver, puis il a un système de templating HTML sans avoir besoin de serveur spécifique langages côté.

    Sinon il ressemble (et pour faire simple sans l'aide d'un CMS ou complète de système de template comme Smarty), vous êtes désireux d'utiliser PHP pour inclure des blocs dans votre code, tel qu'un site à l'échelle de l'en-tête & pied de page.

    Par exemple en haut de chaque fichier dans votre site, vous pourriez avoir le code PHP suivant pour insérer le fichier header.php à cette position:

    <?php  include "header.php"; ?>

    Espère que cette aide comme un point de départ 🙂

  4. 4

    Afin de réutiliser le code que vous auriez à utiliser PHP ou d'un framework JavaScript.

    Je recommanderais le plus tard, http://angularjs.org/ qui est génial. Il est ment pour construire des applications web, à l'aide de points de vue (et d'autres), vous pouvez réutiliser votre code.

    Il vaut la peine de vérifier avec votre arrière-plan, vous ne devriez pas avoir de problèmes.

    Acclamations.

  5. 2

    Je recommanderais à "google" pour " HTML Meilleures pratiques et aux
    essayez quelques résultats comme: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

  6. 0

    il y a beaucoup de façons de le faire. Mettre les CSS et Java-Script de code dans le centre de fichiers, qui vous faites référence dans vos fichiers HTML est un bon début.

    Dans le passé, j'ai utilisé PHP pour inclure des choses en commun, comme l'en-tête, de navigation, footer etc.

    Récemment, j'ai commencé à utiliser Jekyll (http://jekyllrb.com/), en gros, vous créez les modèles de pages, avec en-tête, de la navigation et de la conception dans le centre de fichiers.

    Les pages elle-même contenir uniquement le contenu et Jekyll génère la page d'accueil.

    Andy