web-dev-qa-db-ja.com

コードを適切に再利用および保守するために、HTMLをどのように構成しますか？

C++、C、Javaなどの言語を使用してネイティブアプリをコーディングするバックグラウンドは限られていますが、今はWeb開発に取り掛かろうとしています。そのほとんどはかなりシンプルでクリーンですが、該当する場合は既存のコードを再利用して適切に機能するWebサイトやWebアプリを作成する方法を理解するのにいくつか問題があります。私が理解しているように、JavaScript、CSS、PHPなどを使用する場合は、他のファイルからスクリプトをインポートして、任意のhtmlファイルで使用することができます。これは非常に便利です。しかし、HTMLでこれを行う方法を理解するのに苦労しています。それは可能ですか？

例、「ヘッダーバー」と以下の一連のユニークなコンテンツ（たとえば、stackoverflowのロゴ、ボタン、この上部にあるメニュー）を含む単一ページのWebサイトがあるとしますページ）。しかし、今、私は自分のウェブサイトを拡張し、同様のレイアウトを共有し、上部にまったく同じ「ヘッダーバー」を持つ3つの新しいページを追加したいと思います。これを実現する1つの方法は、コードのその部分を含むを単にコピーして、それをpage2.html、page3.html、およびpage4.htmlに貼り付けることです。各ページの一意のコードは個別であり、正常に機能します。このアプローチで私が抱えている問題は、HTMLの複数のページを経由せずに「ヘッダーバー」のコンテンツを変更することが本当に面倒になり、デザイン/コンテンツに奇妙な不整合が生じる可能性が高くなることです。 「stackoverflow.com/questions/ask」と「stackoverflow.com/tags」には、ページの上部にある要素の重複したコピーアンドペーストコードが含まれていないと思いますが、よくわかりません私の限られたHTMLエクスペリエンスのためにこれを達成する方法。

では、複数のページでコードをきれいに再利用するために、HTMLコードを「含める」または「インポートする」方法はありますか？この機能はHTMLに組み込まれているのですか、それともJavaScriptやPHP=のように構造化されたWebサイトを作成するためにもっと深く調べなければならないのですか？これに対する答えを検索しました。 iframeを提案しましたが、その後すぐに、最新のWebデザインでの使用は推奨されません。

htmlcode-reusemaintenance
16
MrKatSwordfish

コードの一部を含める可能性は現在利用可能ですが、適切な ブラウザサポート がありません。 html-templates と呼ばれます。将来的には、これにより独自のhtmlテンプレートを作成して、コードの重複を回避できるようになります。しかし今のところ..ネイティブHTMLではなく、他のテクノロジー（PHPベース、Javascriptベース、Rubyベース、および非ベース）のみです。

7
skip405

私が通常HTMLに対して行うことは、ベースサイトのレイアウトを作成することであり、ほとんどのコンテンツを自動的にロードしたいようなものです。まず、コンテンツを保持するすべてのdivを作成し、ヘッダーなどの必要なコンテンツをこれに入力し、ロゴ、ウェルカムテキスト、ナビゲーションバーなどを追加します。次に、ヘッダーdiv内のすべてを切り取り、ヘッダーに貼り付けます.html。

次に、JavaScriptプラグインであるJQueryを使用して、すべてのHTMLデータをheader.htmlからheader divにロードします。そのためのJQueryコードは次のようになります。しばらくして、現在ツールにアクセスできません。

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

PHPの場合、関数ファイルと次のように記述できます：include "functions.php"; PHPもOOPをサポートしており、その中に再利用可能なクラスとメソッドを作成できます。

6
Madmenyo

Dreamweaverを使用している場合は、特定のサーバー側の言語を必要とせずに、HTMLのテンプレートシステムがあります。

そうでなければ（CMSやSmartyなどの完全なテンプレートシステムを使用せずにシンプルに保つため）、PHPを使用して、サイトなどの固定ブロックをコードに含める必要があります。幅の広いヘッダーとフッター。

たとえば、サイト内のすべてのファイルの上部に次のPHPコードを配置して、header.phpファイルをその位置に挿入できます。

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

これが出発点として役立つことを願っています:)

5
flauntster

コードを再利用するには、PHPまたはJavaScriptフレームワークを使用する必要があります。

後者、特に http://angularjs.org/ をお勧めします。コードを再利用できるビュー（およびその他のコンポーネント）を使用してWebアプリケーションを構築することが重要です。

それはチェックアウトする価値があり、あなたの背景があれば問題はないはずです。

乾杯。

4
Ricard

「HTMLのベストプラクティス」を「グーグル」にして、次のような結果を試すことをお勧めします http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices- for-beginners /

2
Ramesh

これを行う方法はたくさんあります。 CSSおよびJava-Scriptコードを中央ファイルに配置します。これをHTMLファイルで参照することから始めるとよいでしょう。

以前は、PHP=を使用して、ヘッダー、ナビゲーション、フッターなどの一般的なものを含めました。

最近、私はJekyll（ http://jekyllrb.com/ ）を使い始めました。基本的に、中央ファイルにヘッダー、ナビゲーション、デザインを含むページのテンプレートを作成します。

ページ自体はコンテンツのみを含み、Jekyllはそのコンテンツからホームページを生成します。

アンディ

0
DA.