第6章 画像(写真やイラスト)を貼り付ける 前ページMENU次ページ
1.画像(写真やイラスト)を貼り付けてみましょう!
  1. HTMLファイルに画像を貼り付けるといっても、ワープロのようにに画像を載せることはできません。「画像ファイルを表示しろ」と指示するタグを挿入するだけです。
  2. タグで画像を貼り付けても、画像ファイルは保存されているフォルダーにそのまま残っていて、それが表示されるだけです。
    画像ファイルはホームページ用フォルダに保存し、ホームページをアップロードする際、画像ファイルも同時にアップロードしないと画像は表示されません。

  3. 画像を表示させるタグは<img src="★">で、「★」は画像の画像ファイル名またはURLです。終了タグはありません。
    ただし画像ファイルが別のフォルダにある場合は、そのフォルダまでの道のり(パス)を指示しなくてはなりません。→パスについてはタグ辞典参照
    <html>
    <head>
    <title>画像を貼り付ける</title>
    </head>
    <body>
    <img src="yamato.jpg"><br>
    写真が貼り付けられました
    </body>
    </html>


  4. これをHTMLファイルとして保存し、ブラウザで表示すると次のようになります。

2.画像が別のサーバーにある場合でも・・・・・
  1. 画像ファイルが別のサーバーにある場合でも、<img src="★">で、「★」に画像のURLを指定すればその画像を表示させることができます。
  2. 例えば、「yosimura.vis.ne.jp」というホームページにある「yamato.jpg」という画像を表示させる場合のタグは<img src="http://yosimura.vis.ne.jp/yamato.jpg">となります。
  3. URLで指定することを「絶対パスで指定する」といいます(「直リンク」ともいいます)。
    URLが他人のホームページの場合は、事前に許可を取っておくことが必要です。許可を取ったとしても、画像を表示させるたびにその人のサーバーに負荷をかけますので、画像は自分のパソコンにダウンロードして使うことをお勧めします。

  4. 画像のURLを指定して写真を貼り付けると次のようになります。
    <html>
    <head>
    <title>画像を貼り付ける(2)</title>
    </head>
    <body>
    <img src="http://yosimura.vis.ne.jp/yamato.jpg"><br>
    写真が貼り付けられました
    </body>
    </html>


前ページ HTMLの基礎 次ページ