カスタム検索

リンクの指定

他のWebページへリンクする方法を説明します。まず、2つのHTMLファイルを作っておきます。

ここでは説明のためにsample1.htmlというファイル名で保存します。

sample1.html
<html>
    <head>
        <title>サンプル1</title>
    </head>
    <body>
        <h1>サンプル1</h1>
        <p>これは、sample1.htmlファイルです。
        </p>
    </body>
</html>

もう一方は、sample2.htmlというファイル名で保存します。

sample2.html
<html>
    <head>
        <title>サンプル2</title>
    </head>
    <body>
        <h1>サンプル2</h1>
        <p>これは、sample2.htmlファイルです。
        </p>
    </body>
</html>

作成した2つのHTMLファイルは、同じディレクトリ(フォルダ)に保存しておきます。

作成したHTMLファイルは、同じディレクトリ(フォルダ)に保存します。名前は「sample1.html」と「sample2.html」にしました。

<a>タグ

他のWebページにリンクするには、<a>タグを使用します。先ほど作成したsample1.htmlに下の入力例のように追加します。

開始タグである<a>の中で、「a」の後にスペースで区切って、「href="sample2.html"」とありますが、そのまま入力してください(この部分については次ページで説明します)。

sample1a.html
<html>
    <head>
        <title>サンプル1</title>
    </head>
    <body>
        <h1>サンプル1</h1>
        <p>これは、sample1a.htmlファイルです。
        </p>
        <p><a href="sample2.html">sample2.html</a>へリンク
        </p>
    </body>
</html>

<a>タグでリンクを指定すると、多くのブラウザでは青い文字色でアンダーラインをつけて表示します。その青い文字色の部分をクリックすると、sample2.htmlファイルがブラウザに読み込まれ(開かれ)ることになります。

<a>は「Anchor」(アンカー:船のいかりの意味)の頭文字を取っています。<a>要素を基点として、他のファイルを読み込むという感覚です。

まとめ
  • <a>タグでリンクを指定
CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡