パソコン レスキュー隊 |
|
ホームページの初歩の初歩 |
HPに画像を貼ってみよう |
1.変更、上書き保存したHTMLファイル「test.html」を開いてみよう |
|
2.HTMLソースを見てみよう |
|
|
3.デスクトップに適当な画像ファイルをコピーしよう |
||
画像はGIFやJPGがHPでよく使われます。BMPやTIFFファイルはファイルサイズが大きすぎるのでHPでは不適当です。その場合は画像でJPGやGIFファイルに変更しましょう。詳しい方法はこちら HPで画像を表示するには、HTMLファイルがある場所と画像ファイルの置く場所の関係が重要です。なれないうちはHTMLファイルと画像ファイルを同じ場所に保存するとわかりやすいですが、管理の面からは画像ファイルは別のフォルダを作ってそこに保存するといいと思います。
|
4. メモ帳を使って下のようにHTMLを書き換えてみよう。 |
||
タグ、ファイル名は必ず半角。タグは大文字でも小文字でもかまいませんが、サーバによってはファイル名の大文字、小文字を厳格に区別しますので、ファイル名は小文字に統一した方がまちがいありません。
|
5.ファイルを上書き保存しよう。 |
|
「ファイル」→「上書き保存」してブラウザの「更新」ボタンを押すと、下のように表示されると思います。画像が出ましたか? 万一、画像が出ないときはファイル名をもう一度確認しましょう。一文字でも違うとエラーです。全角、半角に注意。タグの大文字、小文字は関係ありません。
|
6.画像ファイルを専用フォルダに入れてみよう。 |
ファイルが多くなると管理が大変ですので、最初から専用のフォルダを作って画像ファイルをそこに置く、というのもいいと思います。その場合、HTMLファイルと画像ファイルの場所の関係が重要です。 「私のHP」フォルダの中に画像専用として「images」というフォルダを作ります。デスクトップの「私のHP」フォルダを開き、何もないところで右クリック、「新規作成」→「フォルダ」→「名前の変更」で名前を「images」にします。そこへ「gazou02.gif(アライグマの画像です)」という画像ファイルをドラッグ&ドロップしてみましょう。(フォルダ名はお好きな名前にしてもOKです) |
7.フォルダに入っている画像を表示しよう |
|
「表示」→「ソース」とクリック、メモ帳が起動したら下のようにHTMLソースを書き換えます。
|
8.ファイルを上書き保存しよう。 |
|
「ファイル」→「上書き保存」して、ブラウザの「更新」ボタンを押すと、下のように表示されると思います。画像が出ましたか? 万一、画像が出ないときはタグやファイル名をもう一度確認しましょう。一文字でも違うとエラーです。全角、半角に注意。タグは大文字、小文字は関係ありませんが、ファイル名は大文字、小文字を厳密に区別します。
<IMG SRC="gazou01.gif"> フォルダに画像ファイルを入れた場合は、「フォルダ名/画像ファイル名」にします。 <IMG SRC="images/gazou02.gif"> |
HPのトラブルはURLを書いてください |