HTMLWebサイトに追加のWebページを作成する方法

Webサイトを構築するときは、複数のWebページが必要になる場合があります。追加のページを追加してリンクする場合は、最初にWebサイトのプロジェクトディレクトリに新しいhtmlファイルを作成する必要があります。このチュートリアルでは、Webサイトに追加のWebページを作成してリンクする方法を学習します。

デモンストレーションWebサイトには、「About」Webページが含まれています。このチュートリアルでは、「About」Webページを作成してリンクするプロセスについて説明しますが、必要に応じてこのページのタイトルとコンテンツを変更できます。

Webサイトに新しいページを追加するには、about.htmlという名前の新しいファイルを作成し、プロジェクトディレクトリhtml-practiceに保存します。（チュートリアルシリーズに従わなかった場合は、チュートリアル HTMLプロジェクトのセットアップで新しいhtmlファイルをセットアップする手順を確認できます。）

注：ファイルに独自の名前を選択する場合は、文字スペース、特殊文字（！、＃、％など）、および大文字を使用しないでください。これらは問題を引き起こす可能性があります。後で。 .html拡張機能も含める必要があります。

次に、ブラウザがファイルの内容を解釈するのに役立つ情報を追加して、ファイルをフォーマットする必要があります。ファイルをフォーマットするには、ドキュメントの上部に次のコードスニペットを追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>About</title>
  </head>
</html>

強調表示されたテキストを、ページに必要なタイトルに変更してください。各HTMLタグの説明については、このシリーズの以前のチュートリアルにアクセスしてください。 HTMLの追加あなたのウェブページへの要素。続行する前にファイルを保存してください。

このページにコンテンツを追加する前に、ホームページにこのページへのリンクを追加する手順を見ていきましょう。

まず、index.htmlファイルに戻り、サイトのサブタイトルの下、および終了</div>タグの上に次のスニペットを追加します。

...
<p style="font-size: 20px; color:#1F9AFE;">
<a href="Webpage_FilePath">About this site</a>
</p>
...

強調表示されたファイルパスを「about.html」ファイルのrelativeファイルパスに変更します。相対パスは、現在の作業ディレクトリを基準にしたファイルの場所を参照します（ルートディレクトリを基準にしたファイルの場所を参照する Absolute パスとは対照的です）。VisualStudioコードテキストを使用している場合エディターでは、CTRL + Left Click（Macの場合）またはright-clicking' (on Windows) on the file icon and selecting CopyRelativePath.`で相対ファイルパスをコピーできます。

style属性を使用してフォントサイズと色も指定していることに注意してください。 index.htmlファイルを保存し、ブラウザにリロードします。

これで、次のようなabout.htmlWebページへのリンクが作成されます。

エラーが発生した場合は、ファイルがindex.htmlファイルと同じプロジェクトディレクトリにあり、プロジェクトパスにエラーがないことを確認してください。

これで、Webサイトに新しいWebページを作成してリンクする方法を理解する必要があります。これらの同じ手順を使用して、Webサイト上の追加のWebページを作成してリンクすることができます。ホームページにコンテンツを追加する方法を学習しているのと同じ方法で、新しいWebページにコンテンツを追加することもできます。