HTMLのa要素を使用して、クリックすると別ページにジャンプするハイパーリンクを作成していきます。
ハイパーリンクはウェブ制作に欠かせませんので、しっかりと身に付けましょう。
メニュー項目のテキストにハイパーリンクを指定します。
index を開いて、メインメニュー部分に以下の記述を追加してください。
href属性にはリンク先のファイル名を指定します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>ウェブサンプル株式会社</title> </head> <body> <h1>ウェブサンプル株式会社</h1> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</a></li> </ul> <h2>新着情報</h2> <h3>新商品のご案内</h3> <p> あいうえおかきくけこさしすせそ（中略） </p> <h3>展示会への出展</h3> <p> あいうえおかきくけこさしすせそ（中略） </p> <h3>環境への取り組み</h3> <p> あいうえおかきくけこさしすせそ（中略） </p> <small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small> </body> </html>
保存をしたらブラウザで表示してみましょう。
メインメニュー部分の文字色が青くなって、下線が付いて表示されれば成功です。
下線の付けられたリンク部分をクリックして、他のページへとジャンプすることを確認してください。
一度リンク先ページが表示されたリンクテキストは、青色から紫色に変化します。
尚、リンク先ページは、ごく簡単なHTMLソースしか指定していません。
そのため、「製品紹介」「会社概要」「お問合せ」という見出しが表示されるだけで「ホーム」へ戻るためのハイパーリンクが用意されていません。
リンク先ページから元のページに戻るには、ブラウザの戻るボタンを押してください。
リンク先ページが表示されると、リンクテキストが紫色に変わります。
インターネット上に公開されているファイルの所在地をURL（Uniform Resource Locator）といいます。
ウェブページから他のウェブページへリンクをはる場合には、リンク先となるファイルの所在地、つまり、URLを指定します。
URLの指定方法には「絶対パス」と「相対パス」の2つがあります。
絶対パスとは、https://～ で始まる形式です。
絶対パスで指定すれば、リンク元ファイルがどこにあっても、リンク先URLを一意に特定することができます。
<a href="https://htmqcom1.wpengine.com/tech/index ">ホームページ</a>
一方、相対パスとは、リンク元ファイルとの位置関係からリンク先ファイルを指定する形式です。
<a href="../index ">ホームページ</a>
インターネット上に公開されているファイルのフォルダ階層は、スラッシュ（ / ）で区切ります。
URLを相対パスで指定する場合、同じフォルダ階層へのリンクはスラッシュを付けずにファイル名だけを指定します。
上のフォルダ階層へのリンクは「 ../ 」で区切ります。
例えば、上の上の上の階層にあるindex へリンクする場合には、「 ../../../index 」となります。
リンク元ファイルより下の階層にあるファイルへリンクするには、フォルダ名とファイル名で指定します。
例えば、abcという名前のフォルダの下にあるindex へリンクしたければ、「abc/index 」となります。
<a href="index ">ホームページ</a>
<a href="../index ">ホームページ</a>
<a href="abc/index ">ホームページ</a>
HTMLには２つの重要な役割があります。
ひとつはマークアップです。
これは、情報にタグ付けして、どこが見出しでどこが段落なのか、コンピュータにも分かるようにするということです。
もうひとつの重要な役割は、ハイパーリンクです。
これは、関連する情報どうしを結び付けて、情報を整理するということです。
a要素の使い方を身に付けて、情報を自在に関連付けられるようになりましょう。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
| <前へ | 目次へ | 次へ> |
