HTML の a タグを使ってハイパーリンクとナビゲーションを作成する

はじめに

この実験では、参加者は HTML の A タグを使ってハイパーリンクとナビゲーションを作成する方法を学び、包括的な Web ページ構造を構築し、さまざまなリンク技術を実装することに焦点を当てます。この実験では、学生たちに基本的な HTML ページの設定、ページ間のナビゲーションリンクの作成、連絡先リンクの実装、ドキュメントブックマークの作成、および target 属性を使ったリンクの動作の探索を通じて案内します。

参加者はまず基本的な HTML5 ドキュメント構造を確立し、その後、内部ページナビゲーション、電子メールと電話の連絡先リンク、およびページ間の参照など、さまざまな種類のハイパーリンクを追加することで徐々にスキルを向上させます。この実験が終了するまでに、学生たちはアンカータグを効果的に使ってインタラクティブで構造的に整った Web ページを作成する方法をしっかりと理解しているでしょう。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451037{{"HTML の a タグを使ってハイパーリンクとナビゲーションを作成する"}} html/head_elems -.-> lab-451037{{"HTML の a タグを使ってハイパーリンクとナビゲーションを作成する"}} html/viewport -.-> lab-451037{{"HTML の a タグを使ってハイパーリンクとナビゲーションを作成する"}} html/layout -.-> lab-451037{{"HTML の a タグを使ってハイパーリンクとナビゲーションを作成する"}} html/nav_links -.-> lab-451037{{"HTML の a タグを使ってハイパーリンクとナビゲーションを作成する"}} html/inter_elems -.-> lab-451037{{"HTML の a タグを使ってハイパーリンクとナビゲーションを作成する"}} end

基本的な HTML ページ構造を設定する

このステップでは、ハイパーリンクとナビゲーションを追加するための基礎となる基本的な HTML ページ構造を作成する方法を学びます。HTML（HyperText Markup Language）は、Web ページを作成するための標準マークアップ言語です。

まず、WebIDE を開き、~/projectディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、index.htmlという新しいファイルを作成します。

必須構造を持つ簡単な HTML5 ドキュメントを作成しましょう。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>
      This is a basic HTML page structure that we'll use to create hyperlinks.
    </p>
  </body>
</html>

この HTML 構造の主要なコンポーネントを分解してみましょう。

<!DOCTYPE html>は、これが HTML5 ドキュメントであることを宣言します
<html>は HTML ページのルート要素です
<head>はドキュメントに関するメタ情報を含みます
<meta charset="UTF-8">は文字エンコーディングを指定します
<meta name="viewport">は、モバイルデバイスでの適切なレンダリングを確保します
<title>は、ブラウザのタブに表示されるページのタイトルを設定します
<body>は、表示されるページのコンテンツを含みます

注：WebIDE で HTML ファイルをプレビューする方法に関する詳細はこちらをご覧ください。

このファイルをブラウザで開いたときのサンプル出力：

ページ間のナビゲーションリンクを作成する

<a> タグは HTML でハイパーリンクを作成するために使用されます。ハイパーリンクを作成する基本的な構文は <a href="URL">リンクテキスト</a> です。

このステップでは、HTML のアンカー (<a>) タグを使用して異なるページ間のナビゲーションリンクを作成する方法を学びます。まず、ページ間のナビゲーションを示す追加の HTML ファイルを作成しましょう。

~/project ディレクトリに 2 つの新しいファイル about.html と contact.html を作成します。

ナビゲーションリンクを含めるために index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Welcome to My Website</h1>
    <p>This is the home page with navigation links.</p>
  </body>
</html>

about.html ファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>About Us</h1>
    <p>Learn more about our website and mission.</p>
  </body>
</html>

contact.html ファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Us</h1>
    <p>Get in touch with our team.</p>
  </body>
</html>

ページ間のナビゲーションに関する要点：

<a href="..."> 属性は、遷移先のページを指定します。
同じディレクトリ内のページ間をリンクする際は、相対ファイルパスを使用します。
各ページには一貫したナビゲーションメニューが含まれています。

Web ブラウザでのサンプル出力：

電子メールと電話の連絡先リンクを実装する

このステップでは、HTML のアンカータグを使ってクリック可能な電子メールと電話番号のリンクを作成する方法を学びます。contact.html ファイルを開き、特殊なリンクタイプで更新しましょう。

contact.html ファイルを以下の内容で更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Information</h1>

    <h2>Get in Touch</h2>

    <h3>Email Links</h3>
    <p>
      Contact us at:
      <a href="mailto:[email protected]">[email protected]</a>
    </p>

    <h3>Phone Links</h3>
    <p>
      Call us at:
      <a href="tel:+1-555-123-4567">+1 (555) 123-4567</a>
    </p>

    <h3>Multiple Contact Options</h3>
    <p>
      Email: <a href="mailto:[email protected]">[email protected]</a><br />
      Phone: <a href="tel:+1-800-555-0199">1-800-CONTACT</a>
    </p>
  </body>
</html>

電子メールと電話のリンクに関する要点：

mailto: 接頭辞は、既定の電子メールクライアントを開く電子メールリンクを作成します。
tel: 接頭辞は、モバイルデバイスで機能する電話番号リンクを作成します。
これらのリンクにより、ユーザーは 1 クリックで簡単に連絡できます。

Web ブラウザでのサンプル出力：

単一のページ内でドキュメントブックマークを作成する

このステップでは、HTML のアンカータグを使って内部ページのブックマークを作成する方法を学びます。~/project ディレクトリに long-document.html という新しいファイルを作成し、以下の内容を入れます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document with Bookmarks</title>
    <style>
      body {
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
      }
      section {
        height: 500px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Table of Contents</h1>
    <nav>
      <a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
      <a href="#section3">Section 3</a>
    </nav>

    <section id="section1">
      <h2>Section 1: Introduction</h2>
      <p>
        This is the first section of our long document. Click the links above to
        navigate quickly.
      </p>
    </section>

    <section id="section2">
      <h2>Section 2: Main Content</h2>
      <p>This is the second section with more detailed information.</p>
    </section>

    <section id="section3">
      <h2>Section 3: Conclusion</h2>
      <p>This is the final section of the document.</p>
    </section>

    <a href="#" style="position: fixed; bottom: 20px; right: 20px;"
      >Back to Top</a
    >
  </body>
</html>

ドキュメントブックマークに関する要点：

<style> ブロックは、セクションの高さやマージンなど、ドキュメントのスタイリングに CSS を追加します。今は CSS のことは心配しないでください。後の実験で扱います。
- max-width: 600px; はドキュメントの最大幅を設定します。
- margin: 0 auto; はドキュメントを水平方向に中央に配置します。
- line-height: 1.6; は読みやすさを向上させるための行間を設定します。
- section { height: 500px; margin-bottom: 20px; } は各セクションの高さとマージンを設定します。
ブックマークのターゲットを作成するには id 属性を使用します。
href="#elementId" を使って特定のセクションにジャンプするリンクを作成します。
id の後に続く # シンボルは内部ページリンクを作成します。

ナビゲーションリンクの最後に long-document.html を追加して、ドキュメントをプレビューできるようにします。

Web ブラウザでのサンプル出力：

リンクの動作を制御するためのターゲット属性を使用する

このステップでは、リンクがどのように開くかを制御する HTML のリンクターゲット属性について学びます。~/project ディレクトリに link-targets.html という新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Target Attributes</title>
  </head>
  <body>
    <h1>Link Target Demonstration</h1>

    <h2>Default Link Behavior</h2>
    <p>
      <a href="https://www.example.com">Normal Link</a>
      (同じウィンドウで開きます)
    </p>

    <h2>Target Attribute Examples</h2>
    <p>
      <a href="https://www.example.com" target="_blank">New Tab Link</a>
      (新しいタブで開きます)
    </p>

    <h2>Multiple Target Demonstrations</h2>
    <p>
      <a href="https://www.example.com" target="_self">Same Window</a> |
      <a href="https://www.example.com" target="_blank">New Tab</a> |
      <a href="https://www.example.com" target="_parent">Parent Frame</a> |
      <a href="https://www.example.com" target="_top">Full Browser Window</a>
    </p>

    <h2>Named Window Target</h2>
    <p>
      <a href="https://www.example.com" target="myWindow">Named Window で開く</a>
    </p>
  </body>
</html>

リンクターゲット属性に関する要点：

_blank：新しいタブまたはウィンドウでリンクを開きます。
_self：既定の動作で、同じウィンドウで開きます。
_parent：親フレームで開きます。
_top：ブラウザの全画面で開きます。
カスタムの名前付きターゲットは、特定のウィンドウの動作を作成できます。

Web サーバーの URL をコピーし、URL の末尾に /link-targets.html を追加してページを表示します（新しいタブ）。

Web ブラウザでのサンプル出力：

まとめ

この実験では、参加者は包括的な HTML ウェブページを作成し、さまざまなハイパーリンク技術を実装する方法を学びました。実験は、基本的な HTML5 ページ構造を確立することから始まり、DOCTYPE、メタタグ、基本的なコンテンツの組織化などの重要な要素を示しました。参加者は、HTML のアンカータグを利用してウェブサイトの異なるセクションを接続することで、複数のページ間のナビゲーションリンクを作成する方法を探求しました。

実験は、電子メールと電話の連絡先リンクの実装、単一のページ内でのドキュメントブックマークの作成、およびターゲット属性を通じたリンクの動作の理解などの高度な技術を導入することで、さらにハイパーリンクの機能を拡大しました。これらの実践的な演習は、HTML のリンク機構を使用してインタラクティブで構造的に整ったウェブページを構築する際の実践的な経験を提供しました。