本節の目的
インライン要素でとくに重要な、ハイパーリンクを設定するa要素と、画像を挿入するimg要素の利用方法を習得します。
ハイパーリンク(a要素)
演習：ハイパーリンク
以下に説明するハイパーリンク(a要素)について学習し、HTMLでのハイパーリンクの張り方を習得して下さい。
以下のサンプルを参考にしながら、学生番号b02.htmlの本文(body要素の内容)に、説明のある要素の利用サンプルを追加記述して下さい。
ハイパーリンク1(a要素、href属性、name属性)
要素の説明
文書中にハイパーリンク(単に「リンク」ということもある)を設定するにはa要素を使います。リンク先のURIは、href属性により指定します。できるかぎり相対URIで指定するようにします。
a要素はインライン要素であり、a要素を除くインライン要素やテキストを含むことができます。多くのWebブラウザでは、a要素を設定した文章に自動的に特別の文字色と下線が付与され、ユーザが他の文章と明確に区別できるように表示されます。
サンプルHTML
詳しくは、<a href="http://www.kumamoto-u.ac.jp/"> 熊大のトップ </a>を参照下さい。
</p>
「熊大のトップ」という部分が、ハイパーリンクになります。
リンク先は、href属性の属性値である「http://www.kumamoto-u.ac.jp/」です。
熊大トップのURIは、皆さんの管理下にはないので、相対URIで指定することはできません。
そのため、絶対URIで指定します(指定することしかできません)。
Webブラウザでの表示結果
Crecent EveのHTMLプレビュー・ペインでハイパーリンクをクリックすると、そのペイン内にリンク先のページが表示されて、そのままでは元のページが表示されません。
元のページに戻るには、次のどちらかを実行して下さい。
- ペイン内で右クリックして、『前に戻る(B)』を選択する。
- ESCキーを押して、一旦プレビュー・ペインを閉じた上でF8キーで再度ペインを開く
同じWWWサーバ上のファイルへのハイパーリンク(相対URIによるリンク)
同じWWWサーバ上にあるファイルへのリンクは、相対URIで指定できます。
サンプルHTML
先週の課題ファイルは、
< a href="../week01/999q9999b01.html" > この999q9999b01.html です。< a >
</p>
「この999q9999b01.html」という部分が、ハイパーリンクになります。
リンク先は、href属性の属性値である「../week01/999q9999b01.html」です。
ただし、実際には999q9999b01.htmlが無いので、Webブラウザで表示させてリンクをクリックすると、ファイルが見つからないというエラーが出ます。
上記のエラーが出ないように、「../week01/999q9999b01.html」を、自分のファイルを指すように変更して下さい。
Webブラウザでの表示結果
画像 (img要素)
次は、画像ファイルを表示してみましょう。
演習：画像の表示
以下に説明する画像の挿入方法について学習して下さい。
先の演習と同様に、以下のサンプルを参考にしながら、学生番号b02.htmlの本文の最後 (</body>のすぐ上)に、説明のある要素の利用サンプルHTMLをコピー＆ペーストした後 (上書き)保存します。その後、必ずWebブラウザで表示して、要素の動作を理解して下さい。
演習の準備
画像を挿入する演習のための「リンゴの木の絵」と、「ニワトリの絵」があります。左の2つのリンクをクリックし、表示された絵を右クリックして、「名前をつけて画像を保存」を選んで、それぞれ保存して下さい (apple_tree.pngとniwatori.png)。
これらの画像ファイルを保存していないと、サンプルHTMLを表示しても、画像は表示されません。
もし、画像を右クリックして保存できない時は、以下のようにしてください。
まず、デスクトップのマイドキュメントから、「html1」を表示させた後、表示している画像をドラッグして 「html1」にドロップしてください。
画像 (img要素、src属性、alt属性)
要素および属性の説明
画像 (image)を表示 (挿入) するには img要素を使います。img要素はインライン要素です。また、img要素には終了タグ</img>は必要ありません。つまり、img要素は空要素なのです (「空要素」とは、前回出てきた<br>のように、内容部分の無いHTML要素のことです)。
img要素では、src属性で画像ファイルの相対URIを指定し、alt属性で代替テキスト(alternative text)を指定します。alt属性で指定される代替テキストは、URIで指定された画像ファイルが無い時や、ネットワーク事情が悪く画像ファイルの転送に時間がかかっている時などに、画像の代わりとして表示されます。また、テキストブラウザ(文字だけ表示するブラウザ)や音声ブラウザなどでも、 画像の代わりに利用されます。
サンプルHTML
これは、サンプルの画像です。
<img src="./apple_tree.png" alt="リンゴの木の絵">
同じ行にリンゴの木の絵が表示されましたね。
</p>
<p>
もし画像を独立して表示したいときは、
独立したブロックレベル要素 (通常は段落要素) の「内容」として扱えば良いです。
</p>
<p>
<img src="./niwatori.png" alt="にわとりの絵">
</p>
<p>
今度は、図だけが独立して表示されましたね。
</p>
Webブラウザでの表示結果
これは、サンプルの画像です。 
同じ行にリンゴの木の絵が表示されましたね。
もし画像を独立して表示したいときは、独立したブロックレベル要素 (通常は段落要素) の「内容」として扱えば良いです。
今度は、図だけが独立して表示されましたね。
width属性とheight属性による大きさの指定
img要素に width属性とheight属性を付加することで、画像の幅と高さを「ピクセル値」で指定することができます。
元の画像の大きさによらず、Webブラウザ上での大きさを指定することができるので便利です。 (自動的に、拡大・縮小が行なわれます。)
属性値を「ピクセル値」ではなく、「%」で指定することもできますが、そのときは、元の画像の大きさに対する比率ではなく、現在利用可能なWebブラウザの水平・垂直方向の空間に対する比率になります。
サンプルHTML
上の例と同じ画像です。
<img src="./apple_tree.png" alt="リンゴの木の絵" width="40" height="50">
width属性、height属性により小さく表示されています。
</p>
Webブラウザでの表示結果
width属性、height属性により小さく表示されています。画像に関しては、画像の配置 (センタリングや右寄せなど) や、前後の文章との余白など、設定したい事項があると思いますが、これらについては次章以降に改めて説明します。
同一ページ内へのハイパーリンク (a要素 ～再び～)
要素の説明：ハイパーリンク2 (name属性 (a要素、href属性))
文書中にハイパーリンク (単に「リンク」ということもある)を設定するには a要素を使い、リンク先のURIは、href属性により指定することは、先程学習しました。
このa要素とhref属性を用いて文書内の特定の位置を示すことや、その位置へリンクを張ることができます。
文書内の特定の位置に名前を付けること(「アンカー」と呼ばれます)は、a要素のname属性で行います。name属性で示した属性値が、アンカー名(そこの場所の名前)となります。一つの文書内で、アンカー名はユニーク(一意)である必要があります。
アンカーに対して、a要素のhref属性を用いて、リンクを張ることができます。アンカーにリンクを張るとき、hrefの属性値はURIではなく、先頭に「#」を付加したアンカー名を指定します。
また、hrefの属性値として、URIの最後に「#」を先頭に付加したアンカー名を追記することで、そのURIで示したHTMLファイル中のアンカーへリンクを張ることもできます。つまり、別のWebページ中の特定の場所へのリンクを張ることができるわけです。
例えば、<a href="./abc.html#koko">と書けば、相対URIが「./abc.html」のページ中の「koko」というアンカーに 対するリンクを張ることになります。 もちろん、参照される(リンクを張られる) HTMLファイル中では、name属性を用いて対応するアンカーを定義しておく必要あります。
サンプルHTML
このサンプルHTMLは、学生番号b03.html に貼り付けないで、Webブラウザでの表示結果と見比べるだけにして下さい。 (貼りつけても、一部動作しません。また、このページの最後で、再度演習を行ないますので、そこで実際に試してください。)
< p >
このページの上方にある
< a href="#a_youso2" > 「同一ページ内へのハイパーリンク」への見出しはこちら </a>です。
<br>
また、<a href="#midashi"> ここ </a>をクリックすると、2行上で定義したアンカー midashi へジャンプします。
</p>
上記サンプルの1行目で、h3要素に「midashi」というアンカーを付けています。これで、1行目に「midashi」という名前を付けたことになります。
また、上記のサンプルではわかりませんが、(上記サンプルではなく)このテキストページの上の方の「同一ページ内へのハイパーリンク (a要素 ～再び～)」に、「a_youso2」というアンカーを定義しています。そのため、サンプルHTML中の「ハイパーリンクの見出しはこちら」は、そのアンカーにリンクを張っていることがわかるでしょう。
最後の「ここ」は、行に「midashi」という名前を付けたこのサンプルの1行目にリンクを張っています。
Webブラウザでの表示結果
このページの上方にある 「同一ページ内へのハイパーリンク」の見出しはこちら です。
また、ここをクリックすると、2行上で定義したアンカーmidashiへジャンプします。
『「同一ページ内へのハイパーリンク」の見出しはこちら』をクリックして下さい。このテキストページの上の方にある 「同一ページ内へのハイパーリンク (a要素 ～再び～)」の見出しへジャンプします。ただ、実際は「同一ページ内へのハイパーリンク (a要素 ～再び～)」の行がブラウザの最上部に位置するように表示されます。
次に、「ここ」をクリックすると、「見出しにアンカーを付ける」の行にジャンプします。ジャンプ先が、ほんの2行上なのでジャンプしたと気づきにくいと思いますが、「見出しにアンカーを付ける」の行がWebページの先頭になることで、ジャンプしたことがわかるでしょう。
演習：同一ページ内のハイパーリンク
今、実習しなかった「同一ページ内のハイパーリンク」を実際に行なってみましょう。
学生番号b02.htmlをHTMLエディタで開き (既に開いていれば、改めて開く必要はありません)、以下のように、アンカー及びそのアンカーに対するハイパーリンクを設定してみましょう。
- まず、本文(body要素の内容)の先頭に、アンカーを設定してみましょう。つまり、先頭行に名前を付けてみましょう。
タグのすぐ下にあるブロックレベル要素の内容として、以下のような a要素(赤字の部分)を挿入(コピー＆ペースト)してアンカーを設定して下さい。これにより、この場所に「ptop」という名前をつけたことになります。 (この「場所に名前を付けること」が「アンカーを設定すること」です。)
<p>
<a name="ptop"> 詳しくは </a> 、
<a href="http://www.kumamoto-u.ac.jp/"> 熊大のトップ </a> を参照下さい。
</p>
<p>
・・・・・・・・・・・・・
・・・・・・・・・・・・・
上記の追加だけでは、Webブラウザ上での表示は変わりません。(HTML文書内のある場所に、名前を付けただけですから。)
- 次に、上のアンカーに対してハイパーリンクを指定してみましょう。
本文の最後である </body>タグのすぐ上に、以下のようなp要素、及びその子要素としてa要素 (赤字の部分全部) を挿入(コピー＆ペースト)して下さい。
．．．．．．．．．．．．．．
width属性、height属性により小さく表示されています。
</p>
<p>
<a href="#ptop">先頭へ戻る</a>
</p>
</body>
</html>
ここで利用する a要素のhref属性の値は、絶対URIや相対URIではなく、先頭に「#」記号を挿入した「アンカー名」であることに注意して下さい。
- 上記2つの変更を終えたら、上書き保存して、Webブラウザで表示させて (再読み込みさせて) 下さい。
ページの最後に、「先頭へ戻る」というリンクができているはずですので、それをクリックして下さい。
すると、a要素で指定した、アンカーの「ptop」へジャンプするはずです。