簡単なHTMLプログラミングでリンクを作成する方法

ページ名:簡単なHTMLプログラミングでリンクを作成する方法

HTMLを使っていくつかのウェブページを作成したら、それらをつなげてより大きなサイトにしたいと思うでしょう。サイトのあるページから別のページ、あるいはインターネット上の他のサイトにリンクする方法を学びましょう。スクロールの時間を節約するために、訪問者をページの特定の場所に送ることもできます。

方法1

別のウェブページにリンクする

  1. HTMLファイルを開きます。編集したいページのHTMLファイルを開きます。(ゼロから始める場合で、背景情報が必要な場合は、この記事を読む前に)
  2. ページにリンクを貼ります。リンクを表示させたいHTML文書の本文に、以下のコードを追加します:
  3. 表示するリンクテキストを記述します。タグとタグの間にあるものは、リンクとしてページに表示されます。他のテキストと同じように、他のhtmlタグでこれを変更することができます。
    • 画像をリンクにすることもできます:
      .
      ユーザーは画像wikihow_logo.pngを見ることができ、画像をクリックしてhttps://www.wikihow.com/。
  4. リンク先を変更します。先ほど作成したタグは "アンカー "と呼ばれます。アンカー内のhref属性がリンク先を定義します。上の例のhttps://www.wikihow.com/ をリンク先のURIに置き換えてください。
    • URIは常に引用符で囲んでください。
    • URIは大文字と小文字を区別しますので、コピーペーストするか、正確に入力してください。
  5. 同じフォルダ内のページにリンクします。同じウェブサイト内のページにリンクする場合は、完全なURLを含める必要はありません(ただし、URLはそのままでも機能します)。代わりにドメイン名を含まない相対リンクを使用すると、ウェブサイトを整理しやすくなります。あるページから同じフォルダ内の別のページにリンクする簡単な例を示します:
    • 例えば、http://example.edu/about/author.html というページを編集しているとします。
    • http://example.edu/about/family.html のページにリンクするには、ファイル名を入力するだけです:
      リンクテキストと入力してください。
  6. ウェブサイトの他のページへのリンク相対リンクを使って、同じサイト内の他のページにリンクを向けることもできます。知っておくべきことは2つだけです:
    • サブフォルダー内のページにリンクするには、新しいファイルパスを含めます。たとえば、http://example.edu/about/author.html というページにいて、http://example.edu/about/pets/dog.jpg にリンクしたい場合、"about:" までのすべてをスキップすることができます。
      リンクテキストとします。
    • サイトの別のブランチのページにリンクするには、"../"を使って上位のフォルダに移動します。例えば、/about/author.htmlからhttp://example.edu/writing/books.html:
      リンクテキストと入力します。
方法2

ページ内リンク

  1. リンク先アンカーを作成する。長いウェブページにリンクする場合、ページの先頭ではなく、特定のポイントに誘導したいと思うかもしれません。これを可能にするには、リンク先ページのHTMLドキュメントを開きます。このアンカー・タグをリンクしたい箇所に挿入します:
  2. 任意のHTMLタグにアンカーを追加します。任意のHTMLタグに挿入してアンカーを作成することもできます。 これとまったく同じ方法でリンクします。以下はその例です:
    • ヘッダーテキスト


      URLに#topheaderを追加してリンクします。
    • 段落テキスト


      URLに#introparagraphを追加してリンクしてください。
この記事は、CC BY-NC-SAで公開されている「 How to Create a Link With Simple HTML Programming 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン: このページをSNSに投稿するのに便利です。

コメント

返信元返信をやめる

※ 悪質なユーザーの書き込みは制限します。

最新を表示する

NG表示方式

NGID一覧