インライン要素 (a要素とimg要素)

要素の説明

文書中にハイパーリンク (単に「リンク」ということもある)を設定するには a要素を使います。リンク先の URIは、href属性により指定します。
a要素はインライン要素であり、 a要素を除くインライン要素やテキストを含むことができます。 多くのWebブラウザでは、 a要素を設定した文章に自動的に特別の文字色と下線が付与され、 ユーザが他の文章と明確に区別されるように表示されます。

サンプルHTML

<p>
  詳しくは、
  <a href="http://www.kumamoto-u.ac.jp/"> 熊大のトップ </a>を参照下さい。
</p>

「熊大のトップ」という部分が、ハイパーリンクになります。
リンク先は、 href属性の属性値である 「http://www.kumamoto-u.ac.jp/」です。

Webブラウザでの表示結果

詳しくは、 熊大のトップ を参照下さい。

同じWWWサーバ上のファイルへのハイパーリンク

同じWWWサーバ上にあるファイルへも、 同様に href属性にサーバ名を含むURIを指定することでハイパーリンクを張ることができます。 しかし、通常は簡単にするために、スキームやサーバ名を省略して、 パス名(フォルダ名とファイル名)だけで表わします。
たとえば、対象としているHTMLファイル (現在編集中のHTMLファイル)と同じフォルダにある「abc.html」ヘのリンクは、 a要素のhref属性を、 href="./abc.html" のようにします。 ここで現われた「./」というのは、 「同じフォルダ中の」という修飾記号だと思って下さい。 つまり、「./abc.html」というのは、 「(今対象となっているファイルと)同じフォルダにある abc.html」 という意味です。
それでは、「week07\ex1.html」中で、 「\week06\999q9999b03.html」 へリンクを張るにはどうすれば良いでしょうか？ この場合は、 href="../week06/999q9999b03.html" のように表わします。 ここで現われた「../」というのは、 「一つ上のフォルダ中の」という修飾記号だと思って下さい。
つまり、「../week06/999q9999b03.html」というのは、 「(今対象となっているファイル)を含んでいるフォルダ (「week07」)の、 1つ上のフォルダにあるweek06というフォルダの中の 999q9999b03.html」 という意味です。

サンプルHTML

<p>
  前回利用したHTMLファイルは、
  <a href="../week03/999q9999b03.html"> この999q9999b03.html </a>です。
</p>

「この999q9999b03.html」という部分が、ハイパーリンクになります。
リンク先は、 href属性の属性値である 「../week06/999q9999b03.html」です。
ただし、実際には 999q9999b03.html が無いので、 リンクをクリックするとファイルが見つからないというエラーが出ます。

Webブラウザでの表示結果

前回利用したHTMLファイルは、 この999q9999b03.html です。

同一Webページ内でのリンク

文書内の特定の位置を示すことや、その位置へリンクを張ることができます。
文書内の特定の位置 (「アンカー」と呼ばれます)は、 a要素の name属性で示すことができます。name属性で示した属性値が、 アンカー名となります。 一つの文書内で、 アンカー名はユニーク(一意)である必要があります。
アンカーには、a要素のhref属性を用いて、リンクを張ることができます。 URIとは異なり、アンカーにリンクを張るときは、 hrefの属性値の先頭に、「#」を付け、アンカー名であることを示します。
また、hrefの属性値であるURIの最後に、 「#」を含むアンカー名を付加することで、 そのURIで示したHTMLファイル中のアンカーへリンクを張ることもできます。 もちろん、参照されるHTMLファイル中では、 name要素を用いて対応するアンカーを定義しておく必要あります。

サンプルHTML

<h3><a name="midashi"></a>見出しにアンカーを付ける</h3>
<p>
  このページの上方にある
  <a href="#a_youso"> ハイパーリンクの見出しはこちら </a>です。<br>
  2行上で定義したアンカー
  <a href="#midashi"> midashiへ </a>ジャンプします。
</p>

上記サンプルの1行目で、h3要素に「midashi」というアンカーを付けています。
(上記サンプルではなく)このテキストページの上の方で、 「a_youso」というアンカーを定義しており、 「ハイパーリンクの見出しはこちら」は、 そのアンカーにリンクを張っています。
「midashiへ」は、このサンプルの1行目にリンクを張っています。

Webブラウザでの表示結果

見出しにアンカーを付ける

このページの上方にある ハイパーリンクの見出しはこちら です。
2行上で定義したアンカー midashiへ ジャンプします。

「ハイパーリンクの見出しはこちら」をクリックすると、 このテキストページの上の方にある 「ハイパーリンク (a要素、...」の見出しへジャンプします。
「midashiへ」をクリックすると、 「見出しにアンカーを付ける」の行にジャンプします。

target属性

属性は複数してすることも可能です。例えば

<a href="http://www.kumamoto-u.ac.jp/" target="_blank"> 
熊大のトップ（新規ウインドウで表示） 
</a>	

と hrefに加えて、target (表示場所の指定) を属性として加えることができます。
target属性には、独自につけた名称をもったフレームやウィンドウに表示することや、次のような登録済の名前を利用することもできます。

_top	：フレーム表示を解除し、ウィンドウ全体に表示
_blank	：新しいウィンドウを開き、表示

登録済の名前には、_self, _parentもあります。その動作を調べてみてください。

画像ファイルを表示してみましょう。

要素および属性の説明

画像 (image)を表示 (挿入) するには img要素を使います。 img要素はインライン要素です。また、(内容の無い)空要素ですので、 終了タグは必要ありません。
img要素では、src属性で画像ファイルのURIを指定し、 alt属性で代替テキスト (alternative text) を指定します。 alt属性で指定される代替テキストは、 URIで指定された画像ファイルが無かった時や、 テキストブラウザ/音声ブラウザなどで画像の代わりに利用されます。

サンプルHTML

<p>
  これは、サンプルの画像です。
  <img src="./apple_tree.png" alt="リンゴの木の絵">
  同じ行にリンゴの木の絵が表示されましたね。
</p>

<p> 画像を独立して表示する場合は、ブロックレベル要素の子要素にすればよいです。 </p>
<p> <img src="./niwatori.png" alt="にわとりの絵"> </p>
<p> 今度は、図だけが </p>

(註) 「こちらにリンゴの木の絵」 が、 「こちらにニワトリの絵」があります。 左のリンクをクリックし、表示された絵を右クリックして、 「画像に名前をつけて保存」を選んで、「week07」に保存して下さい。 そうすれば、上のサンプルHTMLで 下のWebブラウザでの表示結果が再現できるでしょう。

Webブラウザでの表示結果

width属性とheight属性による大きさの指定

img要素に width属性とheight属性を付加することで、 画像の幅と高さを「ピクセル値」で指定することができます。 元の画像の大きさによらず、 Webブラウザ上での大きさを指定することができるので便利です。 (自動的に、拡大・縮小が行なわれます。)
属性値を「ピクセル値」ではなく、「%」で指定することもできますが、 そのときは、元の画像の大きさに対する比率ではなく、 現在利用可能なWebブラウザの水平・垂直方向の空間に対する比率になります。

サンプルHTML

<p>
  上の例と同じ画像です。
  <img src="./apple_tree.png" alt="リンゴの木の絵" width="40" height="50">
  width属性、height属性により小さく表示されています。
</p>

Webブラウザでの表示結果

画像に関しては、画像の配置 (センタリングや右寄せなど) や、 前後の文章との余白など、設定したい事項があると思いますが、 これらについては次回以降に改めて説明します。