素材共同組合
素材共同組合とは | 素材を求める方へ | 厳選バナーリンク | 著作権とは | お誕生日カード | 素材屋さん応援リンク

画像をHTMLで表示する

HTMLで画像を表示

 では実際に素材サイトからダウンロードした素材をホームページ上に表示するにはどうすればいいのでしょう。最近はホームページを制作するための便利なソフトウェアがでていますが、ホームページはHTMLという言葉(タグ)で記述されています。簡単なHTMLを覚えておくと便利だと思いますのでここではHTMLのタグで説明します。

 ホームページの表示ファイルはhtmlやhtmという拡張子を持ったファイルです。画像を表示したいhtmlファイルをメモ帳(MACだとシンプルテキスト)などで開きます。ここではgazou.gifというファイルを表示したいとします。下の青で示したものが画像を表示するタグです。見やすいように大文字で書いていますが小文字でもいいです。

<HTML>
<HEAD>
<TITLE>画像の表示</TITLE>
</HEAD>
<BODY>

<IMG SRC="saru1.gif" ALT="さる" WIDTH="83" HEIGHT="100">

</BODY>
</HTML>

さる

IMG (イメージタグ)

画像を表しするにはIMG(イメージタグ)を使います。

<IMG SRC="saru1.gif" ALT="さる" WIDTH="83" HEIGHT="100">

<IMG SRC="表示させたいJPEGやGIFなどの画像ファイル名" ALT="代替えテキスト"
    WIDTH="画像の幅 HEIGHT="画像の高さ"
>

※代替えテキストは省略が可能ですが画像が何かで表示されない場合に表示される文字になります。画像は検索エンジンなどにはかかりませんが代替えテキストを指定すると検索エンジンが拾ってくれる可能性があります。できるだけ記述しておきましょう。widthとheightは元画像の大きさと違う大きさを指定すると変形されて表示されます。ALTとwidth、heightは省略することもできます。

上記の画像の表示例はhtmlファイルと画像ファイルが同じ階層に合った場合です。階層が次のようになっていた場合、次のようになります。htmlファイルがhyouji.htmlで同じ階層に[gazou]フォルダがありそのフォルダの中にsaru.gifがあったとします。

 |--- hyouji.html
 |
 |---[gazou]----saru.gif

IMG (イメージタグ)

<IMG SRC="gazou/saru1.gif" ALT="さる" WIDTH="83" HEIGHT="100">

<IMG SRC="フォルダ名/画像ファイル名" ALT="さる" WIDTH="83" HEIGHT="100">

 画像ファイルの種類 → HTMLの画像表示 → 素材のダウンロードの仕方
 HTMLで背景画像を表示 スタイルシートを使うMIDIを流す

画像・MIDIについて

画像ファイルの種類
HTMLの画像表示
素材のダウンロードの仕方
HTMLで背景画像を表示
スタイルシートを使う
MIDIを流す


ピックアップコンテンツ 

素材共同組合サイトマップ
著作権とはなんだろう
利用規程を作ろう
君も素材屋になろう
組合イメージムービー(組合の意味)
厳選バナーリンク(ベスト素材サイト)

 
お勧めレンタルサーバー 

★可愛いレンタルサーバLOLIPOP!
月額125円からのレンタルサーバ