HOME

楽しい消防団

自転車に乗ろう

私がせんむ

パソコンレスキュー隊

せんむのQ&A

PC改造部屋

宮中囃子連

掲示板

リンク集

パソコン レスキュー隊

ホームページの初歩の初歩

PCレスキュー隊目次

HPの初歩の初歩目次 

 

HPに画像を貼ってみよう

 

1.変更、上書き保存したHTMLファイル「test.html」を開いてみよう


    ダブルクリックするとIEが自動的に起動します。

 

2.HTMLソースを見てみよう


    「表示」→「ソース」とクリックすると、メモ帳が起動して下のようなHTMLソースが見られます。

<HTML>
<HEAD>
<TITLE>練習HP</TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" COLOR="red">ホームページのテスト</FONT>
</BODY>
</HTML>

 

3.デスクトップに適当な画像ファイルをコピーしよう

    画像はGIFやJPGがHPでよく使われます。BMPやTIFFファイルはファイルサイズが大きすぎるのでHPでは不適当です。その場合は画像でJPGやGIFファイルに変更しましょう。詳しい方法はこちら

    HPで画像を表示するには、HTMLファイルがある場所と画像ファイルの置く場所の関係が重要です。なれないうちはHTMLファイルと画像ファイルを同じ場所に保存するとわかりやすいですが、管理の面からは画像ファイルは別のフォルダを作ってそこに保存するといいと思います。

gazou01.gif
gazou01.gif

gazou02.gif
gazou02.gif 

左は練習で使う画像です。
画像の上で右クリック、「名前を付けて画像を保存」を選ぶと自分のPCに保存できます。

この例では「test.html」と同じ場所に画像ファイル(gazou01.gif)を置きますので、保存場所をデスクトップの「私のHP」フォルダの中に指定しましょう。

このようにHPにあるファイル(サーバにあるファイル)をPCにコピーすることを「ダウンロード」といいます。

 

4. メモ帳を使って下のようにHTMLを書き換えてみよう。

    タグ、ファイル名は必ず半角。タグは大文字でも小文字でもかまいませんが、サーバによってはファイル名の大文字、小文字を厳格に区別しますので、ファイル名は小文字に統一した方がまちがいありません。  

<HTML>
<HEAD>
<TITLE>練習HP</TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" COLOR="red">画像の貼り付けの練習</FONT>
<BR>
<IMG SRC="gazou01.gif">
<BR>
貼り付けテストの画像
</BODY>
</HTML>

<BR>は改行タグです。HTMLでは、<BR>を入れないと改行しません。
<HEAD>〜</HEAD>はHPの表には表示されない情報が書いてある部分です。
<TITLE>〜</TITLE>は、そのHPのタイトルを書きます。
ここに書いてあるタイトルが「お気に入り」の登録した時のタイトル名になります。

 

5.ファイルを上書き保存しよう。

    「ファイル」→「上書き保存」してブラウザの「更新」ボタンを押すと、下のように表示されると思います。画像が出ましたか?

    万一、画像が出ないときはファイル名をもう一度確認しましょう。一文字でも違うとエラーです。全角、半角に注意。タグの大文字、小文字は関係ありません。  

 画像の貼り付けの練習
 gazou01.gif
 
貼り付けテストの画像

 

6.画像ファイルを専用フォルダに入れてみよう。

    ファイルが多くなると管理が大変ですので、最初から専用のフォルダを作って画像ファイルをそこに置く、というのもいいと思います。その場合、HTMLファイルと画像ファイルの場所の関係が重要です。

    「私のHP」フォルダの中に画像専用として「images」というフォルダを作ります。デスクトップの「私のHP」フォルダを開き、何もないところで右クリック、「新規作成」→「フォルダ」→「名前の変更」で名前を「images」にします。そこへ「gazou02.gif(アライグマの画像です)」という画像ファイルをドラッグ&ドロップしてみましょう。(フォルダ名はお好きな名前にしてもOKです)

 

7.フォルダに入っている画像を表示しよう

    「表示」→「ソース」とクリック、メモ帳が起動したら下のようにHTMLソースを書き換えます。  

<HTML>
<HEAD>
<TITLE>練習HP</TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" COLOR="red">画像の貼り付けの練習</FONT>
<BR>
<IMG SRC="gazou01.gif">
<BR>
貼り付けテストの画像
<BR>
<IMG SRC="images/gazou02.gif">
<BR>
imagesフォルダに入れた画像
</BODY>
</HTML>

 

8.ファイルを上書き保存しよう。

    「ファイル」→「上書き保存」して、ブラウザの「更新」ボタンを押すと、下のように表示されると思います。画像が出ましたか?

    万一、画像が出ないときはタグやファイル名をもう一度確認しましょう。一文字でも違うとエラーです。全角、半角に注意。タグは大文字、小文字は関係ありませんが、ファイル名は大文字、小文字を厳密に区別します。  

 画像の貼り付けの練習
 gazou01.gif
 
貼り付けテストの画像

 gazou02.gif
 imagesフォルダに入れた画像 


    「test.html」ファイルと「gazou01.gif」ファイルはデスクトップの「私のHP」フォルダの中にあります。つまり、同じ場所です。そのため画像を表示するためのタグは下のように、直接ファイル名を指定して書きます。
    (すべて半角英数字を使うこと、タグ部分は大文字でも小文字でもOK)

    <IMG SRC="gazou01.gif">

    フォルダに画像ファイルを入れた場合は、「フォルダ名/画像ファイル名」にします。
    「test.html」ファイルと「images」フォルダは同じ場所にありますが、「gazou02.gif」は「images」フォルダの中にありますので、下のように書きます。「/」(スラッシュ)は「○○の中」と言う意味、と考えてください。

    <IMG SRC="images/gazou02.gif">


 背景(壁紙)を貼ろう

 

おまけのページTOPへ

質問は掲示板へ

HPのトラブルはURLを書いてください

 

 

 


女の子お絵かき掲示板ナスカiPhone修理