画像をページに貼付ける

1.画像をページに貼付ける   (ページサンプル)
画像をページに貼付けるには <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="http://park15.wakwak.com/~kurage/
  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

 
2.画像をリンクボタンにする
 画像をリンクボタンにするには、 
  <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">HPを作る</a>  のように書いたとき、 HPを作る  と表示されたものと同じ働きをします。


 
3.画像を加工する
 デジカメなどで撮った画像を使う場合は、画像を適当なファイルサイズ(100kB以下を推奨)にしたり、 文字を書いたりする「画像編集」が必要になります。
 ホームページビルダなどのソフトを使っている場合は、付属の 画像編集ソフトを使えばよいでしょう。
  それが無い場合は、ペイント などの付属ソフトを使って、こちらのサイト のように画像を加工編集する必要があります。
  また編集した画像は、jpggif もしくは png ファイルとして保存する必要があります。
 「ペイント」で bmp でしか保存できないときは、そのままではファイルサイズが大きくなってしまうので、 このようなソフトや、 その他のソフト を使って、「ファイルの種類」をjpg、gif もしくは png にして保存します。

Top ページHP作りTopHTMLの初歩/ 初歩 解説/ ソース表示/ 画像貼付/ リンク/ Tableタグ/ 演習sample/