(1) リンク

ハイパーリンク

ハイパーリンクとは、ハイパーテキストにおいて複数の文書を結び付ける役割を担う参照のことです。現在では、単にリンクとよばれることがほとんどで、このサイトでも単にリンクと表記します。

<a>タグ

リンクを貼るには、リンクさせたい部分を<a>タグで囲み、リンク先をhref属性で指定します。<a>はanchorの略で、リンクの出発点や到達点を意味します。 


        <a href="リンク先">リンクの文字</a>

サイト内リンク

サイト内の別のHTMLファイルを指定するときには、相対パスを使用します。


        <a href="./sample1-2.html">サンプル12</a><br>

他のページへのリンクも作成しましょう。


        <a href="./sample1-3_1.html">見出し・段落・改行</a><br>
        <a href="./sample1-3_2.html">ページのアウトライン</a><br>
        <a href="./sample1-4.html">画像の挿入</a><br>

外部リンク

外部のサイトへのリンクを外部リンクといいます。外部サイトを指定するときには、絶対パスを使用します。外部リンクでは、新規ウィンドウや新規タブで開くことが多いですが、その場合はtarget="_blank"を加えます。


        <a href="https://www.kaijo.ed.jp/" target="_blank">海城中学高等学校</a><br>
        <a href="https://www.apple.com/jp/" target="_blank">Apple</a><br>
        <a href="https://www.google.com/" target="_blank">Google</a><br>

(2) ページ内リンク

ページ内リンク

ページ内にリンクを設定するためには、リンク先（到達点）の要素にid属性を使ってあらかじめ名前を付けておく必要があります。例えば、ページ内のある<h2>タグにtopic_bというIDを指定しておきます。 


        <h2 id="topic_b">トピックB</h2>

次に、リンク元（出発点）の<a>タグのhref属性に、ID名を「#」のあとに続けて記述します。


        <a href="#topic_b">トピックBはこちら</a>

課題（sample1-5_2.html）

sample1-5_2.htmlのダウンロード

ページ上部からsample1-5_2.htmlをダウンロードしてください。

画像ファイルのダウンロード

次のリンクをクリックして、画像をダウンロードし、imagesフォルダの中に保存してください。

※ChatGPT(4o)がこの課題の例文とそれを表現した画像を生成してくれました。

ページの目次

実習コード①に次のコードを追加します。

ここでは、ページ内に３つのトピック（インターネットの歴史，プログラミング言語の歴史，未来の技術）があり、ページの先頭に目次があります。


        <h2>目次</h2>
          <a href="#topic-a">インターネットの歴史</a><br>
          <a href="#topic-b">プログラミング言語の歴史</a><br>
          <a href="#topic-c">未来の技術</a><br>

各項目の記述

各項目には、見出し・段落・画像がそれぞれあります。sample1-5_2.htmlに既に記載されている内容に、見出しと画像のタグを補ってHTMLファイルを完成させてください。


        <h2 id="topic-a">インターネットの歴史</h2>
          <p>インターネットは1960年代に米国で軍事目的で開発されたARPANETに起源を持ちます。</p>
          <p>最初は、限られた大学や研究機関でのみ利用されていました。</p>
          <p>1980年代にパソコンが普及し、より多くの人々がネットワークを利用するようになりました。</p>
          <p>1990年代には、WWW（World Wide Web）が登場し、インターネットは急速に商業的に発展しました。</p>
          <p>現在では、インターネットは全世界に広がり、あらゆる産業に影響を与えています。</p>
          <p>インターネットの進化は通信技術の発展とともに続いています。</p>
          <p>近年では、IoTやクラウドコンピューティングなどの技術も登場し、インターネットの役割はさらに拡大しています。</p>
          <p>5Gや光ファイバーなどの高速通信技術もインターネットの利用範囲を広げています。</p>
          <p>今後も、AIやブロックチェーンなど新しい技術がインターネットと統合されることで、社会に大きな変化をもたらすと考えられています。</p>
          <p>インターネットの利用はますます日常生活の一部となりつつあります。</p>
          <img src="./images/evolution_of_internet.png" width="400px">

        <h2 id="topic-b">プログラミング言語の歴史</h2>
          <p>プログラミング言語の歴史は、1950年代に遡ります。</p>
          <p>初期のプログラミング言語は機械語やアセンブリ言語が主流でした。</p>
          <p>その後、FORTRANやCOBOLなど、高水準言語が開発されました。</p>
          <p>1970年代には、C言語やPascalなど、モダンなプログラミング言語が登場しました。</p>
          <p>1980年代には、オブジェクト指向プログラミングが注目され、SmalltalkやC++がその代表です。</p>
          <p>1990年代以降、JavaやPythonなど、多目的に使える言語が広く普及しました。</p>
          <p>近年では、JavaScriptやRuby、Goなど、より軽量で効率的な言語が注目されています。</p>
          <p>また、AIやデータ分析の分野で使われる言語として、RやScalaなどもあります。</p>
          <p>プログラミング言語の選択は、用途やプロジェクトに応じて多様化しています。</p>
          <p>未来のプログラミング言語は、さらなる効率性と柔軟性を提供することが期待されています。</p>
          <img src="./images/history_of_programming_languages.png" width="400px">

        <h2 id="topic-c">未来の技術</h2>
          <p>未来の技術は、現在の科学技術の発展によって支えられています。</p>
          <p>AI（人工知能）は、特に注目されており、今後多くの産業に革命をもたらすでしょう。</p>
          <p>自動運転車やスマートシティなどの技術も、日常生活を変革する可能性があります。</p>
          <p>バイオテクノロジーの分野では、遺伝子編集技術が新しい治療法や農業技術を生み出しています。</p>
          <p>クリーンエネルギー技術は、地球温暖化の問題を解決するために重要な役割を果たしています。</p>
          <p>宇宙探査技術の進歩により、月や火星への移住が現実のものになる可能性があります。</p>
          <p>また、量子コンピュータは、従来のコンピュータでは解けない問題を解決できるとされています。</p>
          <p>ナノテクノロジーも、医療や製造業において大きな影響を与えるでしょう。</p>
          <p>未来技術の発展は、社会全体に多大な影響を与えると考えられます。</p>
          <p>これらの技術革新は、私たちの生活の質を劇的に向上させる可能性を秘めています。</p>	
          <img src="./images/futuristic_technologies.png" width="400px">

ID属性について

ID属性は、任意のタグにid="ID名"を加えます。ID名をつけるときは、次のルールを守る必要があります。

別のページの特定部分へのリンク

別ページの特定の到達点を指定する場合には、sample1-5_2.html#topic-cのように、HTMLファイル名のあとに「#」とID名を記述します。


        <a href="./sample1-5_2.html#topic-c">未来の技術</a>