HTMLの勉強(イメージリンク編)

<目次>
5.イメージを貼り付けます。
 1)イメージを貼り付けます。
 2)イメージファイルが存在しないか、破損しているときの処理
 3)イメージサイズの指定
 4)イメージとテキストの並び位置の指定
 5)1行に複数のイメージが存在する場合のテキストの並び位置の指定
 6)テキストの回り込み指定
 7)イメージとテキストの余白指定
5. イメージを貼り付けます。
   ホームページにイメージを貼り付けするためには、<img src="イメージファイルへのURL">タグを使います。貼り付けれるイメージは、GIF、JPEG、PNGの3つです。GIFは、256色以下のイメージに適し、JPEGは256色以上のイメージに適しています。
  1) イメージを貼り付けます。
   

タグは、<img rc="イメージファイルへのURL">を使いますが、"イメージファイルへのURL"は、相対的に現在の位置(このプログラムが保存されているディレクトリ)からイメージファイルまでのパスとそのイメージファイルのファイル名を書きます。
 たとえば以下のようなディレクトリになっているとすれば、

  
 「html5-1.htm」に「image5-1.jpg」をリンクさせるためには、以下のプログラムになります。
 <img src="./images/image5-1.jpg"> になります。
  「./」は、現在のディレクトリからという意味で省略できます。
  「/」は、区切りを表します。
   この場合、
「image5-1.jpg」 は、「html5-1.htm」から見て、自分の配下にある「imeges」ディレクトリの中にある「image5-1.jpg」にリンクさせるために上述のように書きます。もう少しわかりやすく言うと、自分(「html5-1.htm」)に貼り付けたいイメージ(「image5-1.jpg」)が自分(「html5-1.htm」)の配下の「images」ディレクトリにあります。これをプログラムにすると上述のようになります。
 では、イメージがもう少し深い階層にあればどうなるのでしょうか。これは、ディレクトリの階層を上から順に「/」で区切って書いていけばいいことになります。
 
<img src="./images/picts/image5-2.jpg"> になります。
 次に、イメージファイルが自分の配下にないところのイメージはどうなるのでしょうか。以下のようになります。
 
<img src="../page1/images/image5-3.jpg">
  「../」は、 自分(「html5-1.htm」)より一つ上のディレクトリを表します。
  一つ上には「page1」ディレクトリがあり、そのディレクトリを指定すれば参照できるようになりますので上述のようになります。後は、同じです。
  「../../」と書けば、二つ上のディレクトリを指します。

    a. 上説明のディレクトリを作成しましょう。(図Fig5-1の赤の部分を作ってください。)
    b. 「page0」ディレクトリ(フォルダ)の下にホームページファイル「html5-1.htm」を作成します。
    c. b.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。
      <head>
<title>イメージの表示</title>
</head>
<body>
 <p>「image5-1.jpg」にリンクしイメージを表示させます。 <br>
  <img src="./images/image5-1.jpg"> </p>
 <p>「image5-2.jpg」にリンクしイメージを表示させます。 <br>
  <img src="./images/picts/image5-2.jpg"></p>
 <p>「image5-3.jpg」にリンクしイメージを表示させます。 <br>
  <img src="../page1/images/image5-3.jpg"></p>
</body>
</html>
    d.. c.のプログラムを「上書き保存」してブラウザで表示してみてください。(サンプルの表示
     

「image5-1.jpg」にリンクしイメージを表示させます。

「image5-2.jpg」にリンクしイメージを表示させます。

「image5-3.jpg」にリンクしイメージを表示させます。

  2) イメージファイルが存在しないか、破損しているときの処理
   

 存在しないイメージファイルやファイルが破損しているときは、以下の属性を使って代替テキストを表示できます。
 <img src="イメージファイルのURL" alt="わけあって表示できません">
 この属性がなかった場合は、「×」が表示されます。

    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html5-2.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。
      <html>
<head>
<title>画像の代替テキストの表示</title>
</head>
<body>
<p>属性:ALTがない場合<br>
<img src="tekitou.jpg"> </p>
<p>属性:ALTがある場合<br>
<img src="tekitou.jpg" alt="わけあって表示できません"></p>
</body>
</html>
    c. b.のプログラムを「上書き保存」してブラウザで表示してみてください。(サンプルの表示
     

属性:ALTがない場合

属性:ALTがある場合
わけあって表示できません

  3) イメージサイズの指定
   

イメージサイズは、任意に拡大/縮小できます。イメージサイズは以下の属性を使って変更します。
 <img src="イメージファイルのURL" width="横幅" height="高さ">
  横幅、高さは、ピクセルまたは、パーセントで指定できます。パーセントで指定した場合は、ブラウザのホームページ表示範囲を横幅、高さとも最大を100%として計算されます。また、height属性を省略するとwidth属性を基準に等比で拡大/縮小されます

    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html5-3.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。
      <html>
<head>
<title>イメージサイズの変更</title>
</head>
<body>
<p>デフォルトでのイメージの表示<br>
<img src="page0/images/image5-1.jpg" width="240" height="180"> </p>
<p>縮小したイメージの表示<br>
<img src="page0/images/image5-1.jpg" width="100" height="75"></p>
<p>拡大したイメージの表示<br>
<img src="page0/images/image5-1.jpg" width="300" height="225"></p>
</body>
</html>
    c. b.のプログラムを「上書き保存」してブラウザで表示してみてください。(サンプルの表示
     

デフォルトでのイメージの表示

縮小したイメージの表示

拡大したイメージの表示

 

4)

イメージとテキストの並び位置の指定
     イメージの左右にあるテキストは、イメージのどの位置に表示させるかをalign属性で指定することができます。
 <img src="イメージファイルのURL" align="テキストの表示位置">
  テキストの表示位置:top ・・・ イメージの上部に表示されます。
               middle,center ・・・ イメージの中央に表示されます。
               buttom ・・・ イメージの下部に表示されます。(デフォルト)
 テキストは、イメージの左右に付けれますが、左右別々に指定することはできません。
    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html5-4.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。
      <html>
<head>
<title>イメージとテキストの並び位置の指定</title>
</head>
<body>
<p>Topです。(左) <img src="page0/images/picts/image5-2.jpg" width="100" align="top">
Topです。(右) </p>
<p>Middleです。(左)<img src="page0/images/picts/image5-2.jpg" width="100" align="middle">Middleです。(右)</p>
<p>Bottomです(左)<img src="page0/images/picts/image5-2.jpg" width="100">Bottomです(右)</p>
</body>
</html>
    c. b.のプログラムを「上書き保存」してブラウザで表示してみてください。(サンプルの表示
     

Topです。(左) Topです。(右)

Middleです。(左)Middleです。(右)

Bottomです(左)Bottomです(右)

  5) 1行に複数のイメージが存在する場合のテキストの並び位置の指定
     高さの異なるイメージが1行に存在する場合、align属性を細かく指定することで最も背の高いイメージにあわせることができます。
 <img src="イメージファイルのURL" align="テキストの表示位置">  
  テキストの表示位置:texttop ・・・最も背の高いイメージの上部に表示されます。
               absmiddle ・・・ 最も背の高いイメージの中央に表示されます。
               absbottom ・・・ 最も背の高いイメージの下部に表示されます。
               baseline ・・・ bottomと同じ。
    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html5-5.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。
      <html>
<head>
<title>1行に複数のイメージが存在する場合のテキストの並び位置の指定</title>
</head>
<body>
<p><img src="page1/images/image5-3.jpg" width="50" align="texttop">TextTopです。<img src="page0/images/picts/image5-2.jpg" width="100" align="texttop">
TextTopです。</p>
<p><img src="page1/images/image5-3.jpg" width="50" align="absmiddle">AbsMiddleです。<img src="page0/images/picts/image5-2.jpg" width="100" align="absmiddle">AbsMiddleです。</p>
<p><img src="page1/images/image5-3.jpg" width="50" align="absbottom">AbsBottomです。<img src="page0/images/picts/image5-2.jpg" width="100" align="absbottom">AbsBottomです。</p>
<p><img src="page1/images/image5-3.jpg" width="50" align="absbottom">AbsBottomです。<img src="page0/images/picts/image5-2.jpg" width="100" align="absmiddle">AbsMiddleです。 ←合わせ技</p>
</body>
</html>
    c. b.のプログラムを「上書き保存」してブラウザで表示してみてください。(サンプルの表示
     

TextTopです。 TextTopです。

AbsMiddleです。AbsMiddleです。

AbsBottomです。AbsBottomです。

AbsBottomです。AbsMiddleです。 ←合わせ技

  6) テキストの回り込み指定
   

イメージの左右にテキストは、基本的に1行しか配置できません。しかし、align属性にleft、rightパラメータを指定することで複数行のテキストが配置できるようになります。このときleft、rightパラメータは文字の位置を表すのでなくイメージの位置を示します。たとえば、イメージが左でテキストが右にある場合は、leftパラメータを指定します。
 イメージの途中で強制的に回り込みを解除したい場合は、<br clear="all">タグで行います。

    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html5-6.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。
      <html>
<head>
<title>テキストの回りこみ指定</title>
</head>
<body>
テキストの回り込みの例<br>
<img src="page0/images/picts/image5-2.jpg" width="100" align="left">今日は、<br>
楽しい<br>
バーベキュー<br>
一日<br>
楽しんで<br>
しまいました。<br>
また行きたいですね。 <br>
<br>
テキストの回りこみをキャンセルした例 <br>
<img src="page0/images/picts/image5-2.jpg" width="100" align="left">今日は、<br>
楽しい<br>
バーベキュー<br clear="all">
一日<br>
楽しんで<br>
しまいました。<br>
また行きたいですね。
</body>
</html>
    c. b.のプログラムを「上書き保存」してブラウザで表示してみてください。(サンプルの表示
      テキストの回り込みの例
今日は、
楽しい
バーベキュー
一日
楽しんで
しまいました。
また行きたいですね。

テキストの回りこみをキャンセルした例
今日は、
楽しい
バーベキュー
一日
楽しんで
しまいました。
また行きたいですね。
  7) イメージとテキストの余白指定
     イメージの上下左右にテキストを配置するとデフォルトでは、ほとんどくっついてしまいます。以下の属性を使って空白をあけることができます。
 <img src="URL" vspace="上下の余白(ピクセル)" hspace="左右の余白(ピクセル)">
 余白は、 上下(または、左右)別々に指定することはできません。
    a. 「public_html」ディレクトリ(フォルダ)の下にホームページファイル「html5-7.htm」を作成します。
    b. a.で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。
      <html>
<head>
<title>イメージとテキストの余白指定</title>
</head>
<body>
<p>イメージとテキストの余白(余白なし)</p>
<p>        上部テキスト<br>
左テキスト<img src="page0/images/picts/image5-2.jpg" width="100" align="middle">右テキスト<br>
        下部テイスト</p>
<p>イメージとテキストの余白(余白あり)</p>
<p>        上部テキスト<br>
左テキスト<img src="page0/images/picts/image5-2.jpg" width="100" hspace="10" vspace="5" align="middle">右テキスト<br>
        下部テイスト</p>
</body>
</html>
    c. b.のプログラムを「上書き保存」してブラウザで表示してみてください。(サンプルの表示)
     

イメージとテキストの余白(余白なし)

        上部テキスト
左テキスト右テキスト
        下部テイスト

イメージとテキストの余白(余白あり)

        上部テキスト
左テキスト右テキスト
        下部テイスト

ページ2

ページ1へ  ページ3へ