ハイパーリンクを作成する方法

ハイパーリンクを作成する方法

「ハイパーリンク」は、一般的に「リンク」とも呼ばれ、インターネットの重要な部分であり、すべての Web サイトに不可欠な部分です。ユーザーがテキストまたは画像内のリンクをクリックすると、別の Web ページを開くことができます。したがって、リンクは Web ブラウジング エクスペリエンスの重要な部分です。ほんの少しの HTML コード スニペットを使用するだけで、Web サイトにハイパーリンクを作成できます。この記事のコードを使用して、リンクをすばやく作成します。

方法1方法1/2:

基本的なリンクの確立

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/Create-a-Link-Step-1-Version-3.jpg\/v4-460px-Create-a-Link-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/Create-a-Link-Step-1-Version-3.jpg\/v4-728px-Create-a-Link-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1リンクとして使用するテキストまたは画像を作成します。ウェブサイトのコード編集時に、シンプルな HTML タグを使用してリンクが作成されます。ただし、まず、マークアップ シンボルに配置するコンテンツを作成する必要があります。コンテンツは、テキスト、画像、または別の HTML 要素にすることができます。この例では、テキストが使用されています。
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/Create-a-Link-Step-2-Version-3.jpg\/v4-460px-Create-a-Link-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/Create-a-Link-Step-2-Version-3.jpg\/v4-728px-Create-a-Link-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2作成したコンテンツにタグを付けます。ハイパーリンクは、単純なペアワイズ表記法を使用して注釈が付けられます。属性がなければ、これらのタグは効果がありません。心配しないでください。すぐにプロパティを追加できるようになります。
    • たとえば、リンクは次のようになります: 新しいページにアクセスするには、ここをクリックしてください。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Create-a-Link-Step-3-Version-3.jpg\/v4-460px-Create-a-Link-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Create-a-Link-Step-3-Version-3.jpg\/v4-728px-Create-a-Link-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3ハイパーリンクのターゲット アドレスを示す "href" 属性を追加します。ユーザーがリンクをクリックすると、「href」属性がブラウザにユーザーをどこに誘導するかを伝えます。 「href」の後に等号が続き、その後に引用符で囲んだ宛先 URL が続きます。
    • 前の手順の例を続けると、リンクは次のようになります。新しいページにアクセスするには、ここをクリックしてください。
    • リンクのターゲット URL が外部 Web サイトの場合は、完全な URL (通常は「http」で始まる) を使用する必要があることに注意してください。上記のようにページ名のみを指定すると、現在のページのディレクトリが親ディレクトリとして使用されます。
    広告する
方法2方法2/2:

修飾子の追加

  1. : {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Create-a-Link-Step-4-Version-3.jpg\/v4-460px-Create-a-Link-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Create-a-Link-Step-4-Version-3.jpg\/v4-728px-Create-a-Link-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1画像リンクを作成します。画像リンクを作成するには、リンク タグ内に画像タグを追加するだけです。代わりに、画像がホストされている URL (つまり、自分のサーバーまたは他のサーバー上の場所) を使用する必要があります。サンプル画像リンクを以下に示します。
    • <a href="the_intended_link_url.html"><img src="the_picture_in_question.jpg" /></a>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d6\/Create-a-Link-Step-5-Version-3.jpg\/v4-460px-Create-a-Link-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d6\/Create-a-Link-Step-5-Version-3.jpg\/v4-728px-Create-a-Link-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 メール リンクを作成するには、 「mailto:」修飾子を使用します。ユーザーが特定のアドレスに電子メール メッセージの作成を開始するためのリンクを作成するには、電子メール アドレスの前に「 mailto: 」修飾子を使用します。
    • たとえば、電子メール リンクは次のようになります: 質問したり懸念事項を表明したりするには、ここをクリックしてください。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fd\/Create-a-Link-Step-6-Version-2.jpg\/v4-460px-Create-a-Link-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fd\/Create-a-Link-Step-6-Version-2.jpg\/v4-728px-Create-a-Link-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3後で参照できるように、大きな Web ページ内にアンカーを作成します。 Web ページの特定の部分にリンクするには、アンカーを使用する必要があります。アンカーは、目次を含む大きなページで役立ちます。テキストの各セクションに、目次がリンクするアンカーを割り当てることができます。アンカーを作成するには、「name」属性を使用します。
    • アンカーを作成するには、次のタグをページの適切な場所に挿入します。例: 第 3 章 - HTML でのアンカーの使用
    • 作成したアンカーにリンクするには、次のように#タグを使用します。第3章にスキップ
    広告する

ヒント

  • ウェブサイトを構築するために特別なソフトウェアを使用する必要はありません。ほとんどのコンピュータには、HTML ファイルを作成できるテキスト編集ソフトウェアが付属しています。たとえば、Microsoft のメモ帳プログラム。コードを入力して HTML 形式で保存するだけです。ただし、より高度なプログラムのようにネイティブ テキスト エディターでいつでもプレビューを表示することはできず、コードをチェックしてすべてが正しく動作し、適用される規制に準拠していることを確認できる機能がいくつか欠けています。
  • CSS スタイルやその他の方法を使用して、リンクの外観を変更できます。
広告する

準備が必要です

  • コンピューター
  • テキストエディタまたはWebデザインソフトウェア

<<:  迷子の猫を探す方法

>>:  速く走る方法

推薦する

精巣上体炎かどうかはどうすればわかりますか?

睾丸の痛みや圧痛について少し心配になるのは当然です。この痛みは、精巣につながる精管の炎症である精巣上...

脳震盪を起こしているかどうかを見分ける方法

脳震盪は、通常、頭部への打撃があったときに起こる外傷性脳損傷です。脳震盪は、転倒や身体的虐待、車両、...

姿勢を正す方法

正しい姿勢は、健康な心と体を維持するためのシンプルですが、非常に重要な方法です。正しい姿勢を維持する...

ソリティアの遊び方

「ソリティア」の本来の意味は、シングル プレイヤー向けに設計された一連の忍耐ゲームを指します。この記...

「私のどこが好きですか?」にどう答えるか

「私のどんなところが好きですか?」という質問は、答えるのが少しストレスになることがあります。たとえ、...

嫉妬を克服する方法

どれだけ笑顔で隠そうとしても、嫉妬は自然に消えることはありません。この精神状態が制御不能になると、嫉...

GIMP で画像の色を変更する方法

多くの場合、写真の色は写真全体の印象に影響を与えます。たとえば、服の色が目に心地よくなかったり、葉が...

斜筋の緊張を治療する方法

腹斜筋は腹部の側面、腰と胸郭の間にあります。腹斜筋は外腹斜筋と内腹斜筋に分けられ、この2つが一緒にな...

新しいデバイスをiTunesに接続する方法

iTunes は、iOS デバイス (iPhone、iPad、iPod など) で使用される音楽再生...

尿の臭いを取り除く方法

尿の独特の臭いは、自然発生する細菌と、尿の残留物が結晶化して生じる尿酸結晶から生じます。これらの結晶...

液体石鹸の作り方

液体石鹸はいつもすぐになくなってしまうのでしょうか?市販の液体石鹸、特に天然成分から作られたものは、...

痛みなく授乳をやめる方法

ほとんどの女性は、断乳の過程で何らかの不快感を経験します。離乳の過程で痛みを軽減する効果的な方法を見...

犬の歯を見て年齢を知る方法

知っていましたか?犬の歯を見ればその年齢を推測することができます。成犬の場合、歯を見ておおよその年齢...

変装する方法

消えたいですか?友人や家族を驚かせたい場合でも、特定の人を避けたい場合でも、顔立ちや服装、態度を変え...

パートナーの首にキスする方法

パートナーの首にキスをするのは愛情表現としてとても愛情深い方法であり、さらに親密になる前のとてもセク...