画像をページに貼付ける
１．画像をページに貼付ける 　　(ページサンプル)
画像をページに貼付けるには　<img>タグを使います。例えば
　 <img src="fuji.jpg" width=240 height=180 alt="富士" align=right> 　　

　と書きます。ここで、srcには画像ファイル名(fuji.jpg)、width と height で画像の幅と高さを 指定します。また画像を表示できないとき、画像の代わりに表示される文字を　alt="**"で指定します。
　＊当然ファイル名(fuji.jpg)は、半角英数字で記述します。

　align=right　と書くと、画像を右に寄せて表示します。左に表示したいときは、 align=left　と書きます。

　"fuji.jpg"の記述は、画像のあるURLを意味し、 リンクのときの表示と同じで、一般には「相対指定」します。

 富士
絶対的指定 　<img src="https://kurage.ready.jp/
　　jhp_g/syoho/fuji.jpg" >
のようにURLを表示します
相対的指定

　右例参照		 　<img src="./fuji.jpg"> のように現ページより相対的な位置を表示します
　 ../〜 は一つ上のフォルダの、../../〜 は二つ上のフォルダのファイル〜を示し、　
　 ./fuji.jpg又は、fuji.jpgは同じで現フォルダ内のファイル fuji.jpg を示します。
　 ＊ページが出来上がったら、該当ページと同様、画像ファイルも所定のフォルダにアップロードします。
　 
【相対的URL指定の例】
              
public_html (利用者のWebスペース)
 ├ page01.html         (1)
 ├ page02.html
 ├ fig01.jpg           (2)
 ├ folder1
 │ ├ page11.html
 │ ├ page12.html     (3)
 │ ├ fig11.jpg
 │ ├ fig12.gif
 │ └ folder11
 │    ├ page111.html   (4)
 │    └ fig111.png     (5)
 └ folder2
    ├ page21.html       (6)
    └ fig21.jpg

基点→行先
 (1)→(2) ./fig01.jpg (又は fig01.jpg)
 (1)→(3) ./folder1/page12.html
 (1)→(5) ./folder1/folder11/fig111.png
 (4)→(2) ../../fig01.jpg
 (4)→(6) ../../folder2/page21.html
 (6)→(4) ../folder1/folder11/page111.html

　
２．画像をリンクボタンにする
　画像をリンクボタンにするには、　
　　<a href="../hp_g.html">
　　　<img src="top51.gif" border=0 height=20 width=80 alt="Topへ"></a>
のように書きます。
　すると、 Topへ のように表示され、クリックすると、その指定先(hp_g.html)にジャンプします。

　このときの画像の働きは、　<a href="../hp_g.html">ＨＰを作る</a>　 のように書いたとき、　ＨＰを作る　 と表示されたものと同じ働きをします。


　
３．画像を加工する
　デジカメなどで撮った画像を使う場合は、画像を適当なファイルサイズ(100kB以下を推奨)にしたり、 文字を書いたりする「画像編集」が必要になります。
　ホームページビルダなどのソフトを使っている場合は、付属の 画像編集ソフトを使えばよいでしょう。
　 それが無い場合は、ペイント などの付属ソフトを使って、こちらのサイト のように画像を加工編集する必要があります。
　 また編集した画像は、jpg、gif もしくは png ファイルとして保存する必要があります。
　「ペイント」で bmp でしか保存できないときは、そのままではファイルサイズが大きくなってしまうので、 このようなソフトや、 その他のソフト を使って、「ファイルの種類」をjpg、gif　もしくは png　にして保存します。
Top ページ>  ＨＰ作りTop>  HTMLの初歩/ 初歩 解説/ ソース表示/ 画像貼付/ リンク/ Tableタグ/ 演習sample/