HTMLを使っていくつかのウェブページを作成したら、それらをつなげてより大きなサイトにしたいと思うでしょう。サイトのあるページから別のページ、あるいはインターネット上の他のサイトにリンクする方法を学びましょう。スクロールの時間を節約するために、訪問者をページの特定の場所に送ることもできます。
別のウェブページにリンクする
-
HTMLファイルを開きます。編集したいページのHTMLファイルを開きます。(ゼロから始める場合で、背景情報が必要な場合は、この記事を読む前に)
-
ページにリンクを貼ります。リンクを表示させたいHTML文書の本文に、以下のコードを追加します:
- hrefタグを作成します。
- リンクテキスト。
- このように表示されます。
-
表示するリンクテキストを記述します。タグとタグの間にあるものは、リンクとしてページに表示されます。他のテキストと同じように、他のhtmlタグでこれを変更することができます。
-
同じフォルダ内のページにリンクします。同じウェブサイト内のページにリンクする場合は、完全なURLを含める必要はありません(ただし、URLはそのままでも機能します)。代わりにドメイン名を含まない相対リンクを使用すると、ウェブサイトを整理しやすくなります。あるページから同じフォルダ内の別のページにリンクする簡単な例を示します:
- 例えば、http://example.edu/about/author.html というページを編集しているとします。
- http://example.edu/about/family.html のページにリンクするには、ファイル名を入力するだけです:
リンクテキストと入力してください。
-
ウェブサイトの他のページへのリンク相対リンクを使って、同じサイト内の他のページにリンクを向けることもできます。知っておくべきことは2つだけです:
- サブフォルダー内のページにリンクするには、新しいファイルパスを含めます。たとえば、http://example.edu/about/author.html というページにいて、http://example.edu/about/pets/dog.jpg にリンクしたい場合、"about:" までのすべてをスキップすることができます。
リンクテキストとします。 - サイトの別のブランチのページにリンクするには、"../"を使って上位のフォルダに移動します。例えば、/about/author.htmlからhttp://example.edu/writing/books.html:
リンクテキストと入力します。
- サブフォルダー内のページにリンクするには、新しいファイルパスを含めます。たとえば、http://example.edu/about/author.html というページにいて、http://example.edu/about/pets/dog.jpg にリンクしたい場合、"about:" までのすべてをスキップすることができます。
ページ内リンク
-
リンク先アンカーを作成する。長いウェブページにリンクする場合、ページの先頭ではなく、特定のポイントに誘導したいと思うかもしれません。これを可能にするには、リンク先ページのHTMLドキュメントを開きます。このアンカー・タグをリンクしたい箇所に挿入します:
- アンカーテキストこれはリンク先であってリンクそのものではないので、通常のテキストとして表示される。1つのページに同じ名前を2回使わない限り、「anchorname」を任意の名前で置き換えることができます。
-
リンク先アンカーへのリンクページ上の特定のポイントにリンクするには、URIの末尾に記号#を付け、その後にid属性に使用した正確な名前を付けます。これは大文字と小文字を区別します。
- 例えば、ページ http://example.edu/vacation.html のアンカー にリンクするには、次のように入力します:
リンクテキストと入力します。 - これを絶対リンクまたは相対リンクに追加することができます(別の方法の説明を参照してください)。
- 例えば、ページ http://example.edu/vacation.html のアンカー にリンクするには、次のように入力します:
-
任意のHTMLタグにアンカーを追加します。任意のHTMLタグに挿入してアンカーを作成することもできます。 これとまったく同じ方法でリンクします。以下はその例です:
-
ヘッダーテキスト
。
URLに#topheaderを追加してリンクします。 -
段落テキスト
。
URLに#introparagraphを追加してリンクしてください。
-
コメント
最新を表示する
NG表示方式
NGID一覧