ホームページに、画像や写真を表示するには

<img src=" < 画像URL ">   img 空要素 (終了タグがない)
画像や写真を表示するには
ホームページ作成を進めていくと、ページを美麗に飾りたくなる、 ウェブデザインとしても、画像はインパクトもあり設定も容易です。  今回は、静止画関連の講座です。 src 関連要素  iframe  embed
表示する画像は、ページと同じ(フォルダー 【folder】)に入れる。
コピー貼り付けでタグを作成ページに、貼り付け画像を置き換える。
サンプル画像
春の花素材集のサムネイル画像です
画像表示、のサンプルタグ
<img src=" <pic001.jpg ">    
上記は、フォルダー【folder】を無指定の場合の画像表示例。
Webに、表示出来る静止画像の種類として、  jpg   gif   png  などで、
その他の静止画像は、 OS・ブラウザにに依存した静止画像であり特定OS以外では、表示しないので
画像ファイルの種類に留意しよう。

 制限事項
webにアップする 画像・写真ファイル名に、 日本語・特殊文字・空白・全角文字・英数字大文字は使えません。
必ず英数字半角小文字で作成して下さい。  必須

(注1)   画像が表示しないトラブル 画像ファイルが、アップされていない。
折角作成してアップした画像が、Webで正常に表示しないトラブルの大半は、上記制限事項を考慮していないからである。
トラブルで、特に多いのが 日本語・英数字大文字・空白の挿入で画像ファイル名を指定していると、作成過程のオフラインでは表示するので オンラインで表示しないトラブルに慌てる。
それは、画像ファイルがアップ出来ないからである。
画像ファイル名が英数字小文字で有るか確認してみよう。

(注2)  画像が表示しないトラブル フォルダー指定の間違い 静止画像の種類を指定間違い
上記の他に、
<【1】  表示画像をフォルダー【folder】 に格納している場合のフォルダー【folder】設定ミスが多い。
    別フォルダーを指定したい場合、下記かまた詳しくは
フォルダー【folder】の指定方法で学習して下さい。
<【2】  OSに依存した静止画像を措定した場合、他のブラウザでは正常に表示されないので表示画像の種類に留意しよう。


フォルダー【folder】を指定する場合は、下記のHTMLタグ解説のように
      フォルダー 【folder】 パス img フォルダー指定例
同一フォルダー 【folder】 画像ファイル名 sample.gif (注3)
下位フォルダー 【folder】 フォルダー名/画像ファイル名 img/sample.gif
上位フォルダー 【folder】 ../画像ファイル名 ../sample.gif
同位フォルダー 【folder】 ../フォルダー名/画像ファイル名 ../img/sample.gif
(注4) 現在のところ通常省略してよいが、
正確には同一フォルダーを、 ./sample.gifXHTML1.0 以降では、厳格に記述しなければいけない。
 

Webに、表示出来る静止画像の種類
jpg   ジェイペグ Joint Photographic Experts Group
JPEGとは、フルカラーまたはグレースケールの画像圧縮方式の名称である。
圧縮方式には、画質の劣化を許容する不可逆圧縮方式と、劣化のない可逆圧縮方式の2種類があります。

gif  ジフ Graphics Interchange Format
Web上で画像を表示する際に用いられる形式で、8ビット(256色)までの画像を保存することができます。
拡張形式として、3種類の拡張形式がある。
【アニメーションGIF】。複数のGIFファイルをつなぎ合わせてアニメーションのような表示を行える。
【インターレースGIF】荒い画像から徐々に鮮明な画像に変化して表示する。。
【透過GIF(トランスペアレンシーGIF)】。背景色を透明にすることで背景とGIFファイルを同化させてポイントを強調できる。

png  ピング Portable Network Graphics
もともと、GIFの特許権問題を避けるためにWebでの普及をを目的にライセンス料の要らないフォーマット形式として開発されたファイル形式のことである。
GIF形式に比べて、ファイルの圧縮率が高く、画質の劣化も少ないことが特徴である。 フルカラーの自然画を劣化無しで圧縮できる、1ピクセルあたりの情報量(色深度)として48ビット(赤青緑それぞれ16ビットずつ)まで扱える、各ピクセル毎に透明度を指定できる、ガンマ補正のパラメータを画像に持たせられる、などの特長がある。
img 関連属性HTMLタグ 解 説
タグ 読み名 語源 属性 説明
img イメージ image 要素 (印象、映像) 画像を表示するタグ
src ソース sorce 属性 (出典) 表示する画像ファイルを指定
url ユーアールエル Uniform Resource Locator 属性

インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述方式。インターネットにおける情報の「住所」にあたる。
情報の種類やサーバ名、ポート番号、フォルダ名、ファイル名などで構成される。
所在地を指定します。

属性値は、引用符のダブルコーテーション "" で括り。必ず 要素 < > 内で設定する事
貼り付けて、任意の画像ファイルと入れ替えて表示してみましょう。